/* changelog.css — composition for /changelog/, the dated-feed view of the
   writing hub. Tokens live in blog.css and are inherited; never redeclare them
   here. The hub masthead (H1 + tab row) is also in blog.css, because /blog/
   carries the identical one.

   Composition: one continuous feed. A left rail holds the release date and a
   dot on an unbroken vertical hairline; the entry sits to its right on the same
   680px reading measure every long-form page uses. A release holds several
   named items; the terse residue — fixes, improvements, API — folds away into
   real <details>/<summary> rows so it stays in the DOM and on the keyboard.

   MEASURE. This page has the same left edge as every post. On a post, a 680px
   measure is centred in the 1056px container content box, which puts its left
   edge 188px in. Here the whole composition — masthead and feed — hangs off
   that same 188px, so the rail starts where a post's first line starts and the
   entry column runs 680px wide to the container's right edge.

       188 (indent) + 148 (rail) + 40 (gap) + 680 (entry) = 1056
   ========================================================================= */

.changelog {
  padding: 112px 0 128px;
}

/* No indent. The masthead has to line up with the same H1 and tab row on /blog/,
   /findings/ and /field-guide/, so the whole composition starts at the container
   edge like they do. The rail sits at that edge and the entry column is offset
   right by the rail, which is also what the reference does.

       0 (indent) + 148 (rail) + 40 (gap) + 680 (entry) = 868 of 1056

   The 188px right-hand slack that leaves is deliberate: the entry column keeps
   the site's 680px measure rather than stretching to fill the container. */
.cl-wrap {
  padding-left: 0;
}

/* ---------- Feed ---------- */

/* The hairline is drawn once, by the feed, so it runs unbroken through the
   whitespace between releases instead of restarting at each one. It is
   centred under the 9px dot: dot 0–9 → centre 4.5 → a 1px line at x=4. */
.cl-feed {
  position: relative;
}

.cl-feed::before {
  content: "";
  position: absolute;
  left: 4px;
  /* Starts at the centre of the first dot: rail padding 6 + dot offset 4 +
     half of 9 = 14.5, so the line emerges from the dot rather than above it. */
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.cl-release {
  display: grid;
  grid-template-columns: 148px minmax(0, 680px);
  column-gap: 40px;
  align-items: start;
  scroll-margin-top: 88px;
}

.cl-release + .cl-release {
  margin-top: 128px;
}

/* ---------- Rail ---------- */

.cl-rail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 6px;
}

.cl-dot {
  flex: none;
  width: 9px;
  height: 9px;
  /* Centred on the date's 16.8px line box (12px x 1.4): 8.4 - 4.5 = 3.9. */
  margin-top: 4px;
  border-radius: var(--r-pill);
  background: var(--border-hover);
}

/* Only the newest release is accented, and the accent is lavender.
   --warm-rose and the high-severity amber are severity colours, meaning CRITICAL
   and HIGH everywhere else on the site. A release is not a severity. */
.cl-release.is-latest .cl-dot {
  background: var(--lavender);
}

.cl-railtext {
  min-width: 0;
  /* Matches .cl-date, so the inline strut cannot make the first line box
     taller than the text and push the date off the dot. */
  line-height: 1.4;
}

.cl-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--secondary-text);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}

.cl-date:hover,
.cl-date:focus-visible { color: var(--light-text); }

/* Optional version string, written verbatim by the author. */
.cl-ver {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--lavender);
  background: rgba(109, 60, 200, 0.12);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}

/* ---------- Entry ---------- */

/* Item headings are the `##` in the release body, and sit on the site ladder
   at the in-article h2 step: 60 (hub H1) → 34 (item) → 21 (sub-point). */
.cl-body h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.05;
  color: var(--light-text);
  text-wrap: balance;
  margin-top: 72px;
  margin-bottom: 24px;
}

.cl-body > h2:first-child { margin-top: 0; }

.cl-body h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.15;
  color: var(--light-text);
  text-wrap: balance;
  margin-top: 40px;
  margin-bottom: 16px;
}

.cl-body {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.75;
  color: var(--secondary-text);
}

.cl-body > * + * { margin-top: 1.3em; }

.cl-body p,
.cl-body ul,
.cl-body ol { color: var(--secondary-text); }

.cl-body ul,
.cl-body ol { padding-left: 1.3em; }

.cl-body li + li { margin-top: 0.4em; }
.cl-body li::marker { color: var(--secondary-text); }

.cl-body strong { color: var(--light-text); font-weight: 600; }
.cl-body em { color: var(--light-text); }

.cl-body a {
  color: var(--lavender);
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 3px;
  transition: color 0.16s var(--ease), text-decoration-color 0.16s var(--ease);
}

.cl-body a:hover { color: var(--light-text); }

.cl-body :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--light-text);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* ---------- Media ---------- */

.cl-media {
  margin-top: 32px;
  margin-bottom: 32px;
}

.cl-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--edge);
}

.cl-media figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--secondary-text);
}

/* ---------- Collapsible rows ----------

   Real <details>/<summary>, not a scripted accordion: the contents ship in the
   DOM whether or not the row is open, so they are crawlable, findable with
   ctrl-F, and operable from the keyboard with no JS on the page at all.

   The chevron rotates on [open] and does not transition — this system
   transitions colour, background, border and opacity only. */

.cl-groups {
  margin-top: 56px;
  border-top: 1px solid var(--border);
}

.cl-group {
  border-bottom: 1px solid var(--border);
}

.cl-group-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--light-text);
  transition: color 0.16s var(--ease);
}

.cl-group-sum::-webkit-details-marker { display: none; }

.cl-group-sum:hover { color: var(--lavender); }
.cl-group-sum:focus-visible { color: var(--lavender); }

.cl-chev {
  flex: none;
  color: var(--secondary-text);
}

.cl-group[open] .cl-chev { transform: rotate(90deg); }

.cl-group-list {
  list-style: none;
  padding: 0 0 22px;
  margin: 0;
}

.cl-group-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--secondary-text);
}

.cl-group-list li + li { margin-top: 10px; }

/* A 6px dash instead of a bullet glyph: the rows are a list of edits, and a
   dash reads as one line of a diff rather than as prose. */
.cl-group-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 1px;
  background: var(--border-hover);
}

.cl-group-list li p { margin: 0; }

.cl-group-list code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--light-text);
}

.cl-group-list a {
  color: var(--lavender);
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 3px;
  transition: color 0.16s var(--ease);
}

.cl-group-list a:hover { color: var(--light-text); }

/* ---------- Responsive — the system's two breakpoints ---------- */

@media (max-width: 1000px) {
  .changelog { padding: 88px 0 104px; }
  /* Below the 1120px container the indent has nothing left to buy: the entry
     column would start eating the measure instead. Drop it and let the feed
     use the full container. */
  .cl-wrap { padding-left: 0; }
  .cl-release {
    grid-template-columns: 132px minmax(0, 680px);
    column-gap: 32px;
  }
  .cl-release + .cl-release { margin-top: 104px; }
  .cl-body h2 { font-size: 30px; }
}

@media (max-width: 900px) {
  .changelog { padding: 72px 0 88px; }
  /* The rail folds above the entry and the hairline goes with it — a 1px line
     down the side of a single-column page is decoration, not structure. */
  .cl-feed::before { display: none; }
  /* Still capped at the 680px measure — a single column is not licence to run
     body copy the full width of the container. */
  .cl-release {
    grid-template-columns: minmax(0, 680px);
    row-gap: 20px;
  }
  .cl-release + .cl-release { margin-top: 80px; }
  .cl-rail {
    align-items: baseline;
    padding-top: 0;
  }
  .cl-railtext {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .cl-ver { margin-top: 0; }
  .cl-body { font-size: 17px; }
  .cl-body h2 { font-size: 28px; margin-top: 56px; }
}