/* ============================================================================
   CHANGELOG - page-specific layout only.
   ook.css owns the palette, the nav, the hero, .badge, .chip, .note, .more,
   .tile and every token used below. style.css owns .slabel, .count,
   .noscript-note and the shared tool-page bits. Nothing here redeclares any of
   them; this file only describes the shapes that exist on this page alone: the
   kind legend, the month headings, a log row and a resolved record reference.
   ========================================================================== */


/* ============================================================================
   0. HERO
   The hero says the page name and what a row is; the log is the page.
   ========================================================================== */

/* Hero rhythm - the SAME two lines on all six sub-site surface pages (guide,
   config, audit, commands, binds, changes): a tighter band than the shared one,
   because every hero here is now a heading, one line and one action, and the
   tool or list under it is the point. Set page-locally rather than in
   ook.css because the gallery pages consume the shared band too. */
.hero { padding-block: clamp(32px, 3.5vw, 48px) var(--s5); }
main > .hero + section { margin-top: var(--s6); }

/* And the bands below it close up on the same argument: this page is one long
   list with a short preface, so the site's full section rhythm only pushes the
   filter chips further down the screen. Spacing only - nothing is hidden. */
main > section + section { margin-top: var(--s8); }

/* Two stats on two fixed tracks. .stat-row on its own is a wrapping flex row,
   and items of different label widths wrap into a rag that does not line up
   column to column - the same failure the reference page hit and solved the
   same way. */
.log-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
}

.log-stats b { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }

/* The stat grid ends on a label, so the meta sentence under it needs a real
   gap or it reads as a fifth label. */
.rail-card .source { margin-top: var(--s5); }


/* ============================================================================
   1. THE FIVE KINDS
   The badge component from ook.css, wearing the existing status ramps. No new
   colour is invented: corrected borrows the high ramp because it is the row a
   reader should stop on, removed borrows critical because the client deleting
   a name is the loudest thing that can happen to a config, and site borrows the
   low ramp because it is the quietest.
   ========================================================================== */

.badge.k-corrected { background: var(--imp-high-bg);   color: var(--imp-high-fg);   border-color: var(--imp-high-line); }
.badge.k-removed   { background: var(--imp-crit-bg);   color: var(--imp-crit-fg);   border-color: var(--imp-crit-line); }
.badge.k-added     { background: var(--dif-easy-bg);   color: var(--dif-easy-fg);   border-color: var(--dif-easy-line); }
.badge.k-verified  { background: var(--ev-measured-bg); color: var(--ev-measured-fg); border-color: var(--ev-measured-line); }
.badge.k-site      { background: var(--imp-low-bg);    color: var(--imp-low-fg);    border-color: var(--imp-low-line); }

/* The legend. A definition list rather than a grid of cards: five short
   definitions are prose, and prose is what a <dl> is for. It now sits under the
   filter chips instead of above the log's heading, so it closes with a real gap
   - without one the first row of the log reads as a sixth definition. */
.kind-legend {
  display: grid;
  gap: var(--s3);
  margin: var(--s2) 0 var(--s6);
}

.kval {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--s2) var(--s4);
  align-items: baseline;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-1);
}

.kval:last-child { border-bottom: 0; padding-bottom: 0; }

.kval dt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.kval dd {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  max-width: var(--measure);
}

.kind-n { color: var(--fg-3); font-size: var(--fs-xs); }

/* The whole badge-and-count is the filter link. No underline and no link
   colour: the badge already reads as an object you can act on, and five
   underlined rows would turn the legend into a link list. The hover moves the
   COUNT, which is the part that says how many rows the click will leave. */
.kind-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  border-radius: var(--r-sm);
}

/* The at-rest cue is a dotted rule under the count, which is the same thing
   .chg-date does for the permalink on every row - one "this is a link, and it
   is not underlined prose" signal on the page rather than two. */
.kind-jump .kind-n { border-bottom: 1px dotted var(--line-2); }
.kind-jump:hover .kind-n { color: var(--accent-300); border-bottom-color: var(--accent-500); }
.kind-jump:hover .badge { border-color: currentColor; }

@media (max-width: 40em) {
  .kval { grid-template-columns: 1fr; }
}


/* ============================================================================
   2. CONTROLS
   ========================================================================== */

.log-controls {
  display: flex;
  align-items: center;
  gap: var(--s3) var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.chip-row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* The count sits at the end of the row on a wide screen and under the chips on
   a narrow one, which is what flex-wrap already does - it only needs to stop
   being pushed against the last chip. */
.log-controls .count { margin: 0; color: var(--fg-3); font-size: var(--fs-sm); }


/* ============================================================================
   3. MONTH HEADINGS
   The month is the unit a reader thinks in for a game that patches monthly, so
   it gets a real heading with its own count rather than a divider.
   ========================================================================== */

.chg-month {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
  margin: var(--s7) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-h3-lg);
  letter-spacing: var(--tk-h3);
  color: var(--fg-0);
}

#log > .chg-month:first-child { margin-top: 0; }

.chg-month-n {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--fg-3);
  margin-left: auto;
}


/* ============================================================================
   4. A LOG ROW
   Wide: a fixed rail carries the kind, the date and who made the change, and
   the prose sits beside it in one column - so the eye can run down the rail
   looking for "corrected" without reading anything.
   Narrow: the rail becomes a wrapping line above the prose. Same order, same
   information, no horizontal scroll.
   ========================================================================== */

/* Every row carries the same inset, whether or not it is painted. A row that
   only gets its padding when it is highlighted puts a jog in the left edge of
   the whole log, and the rail of kind labels stops being a straight line to
   run your eye down - which is the one job the rail has. */
.chg {
  padding: var(--s4);
  border-top: 1px solid var(--line-1);
}

/* The month heading already closes with a rule, so the first row under it does
   not draw a second one 12px below the first. Transparent rather than removed,
   so the row box does not change height between positions. */
.chg-month + .chg { border-top-color: transparent; }

.chg-head {
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.chg-date {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-2);
}

.chg-date:hover { color: var(--accent-300); border-bottom-color: var(--accent-500); }

.chg-src { color: var(--fg-3); font-size: var(--fs-xs); }

.chg-what {
  color: var(--fg-0);
  font-weight: 500;
  max-width: var(--measure);
  margin: 0 0 var(--s2);
}

.chg-why {
  color: var(--fg-2);
  font-size: var(--fs-sm);
  max-width: var(--measure);
  margin: 0;
}

.chg-rec {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  margin: var(--s2) 0 0;
  font-variant-numeric: tabular-nums;
}

/* A correction is the row this page exists for, so it is the one row that gets
   a surface of its own and an accent rail. It is not a warning box: being
   wrong in public and saying so is the normal, healthy state of a reference. */
.chg.k-corrected {
  background: var(--bg-1);
  border-radius: var(--r-sm);
  box-shadow: inset 2px 0 0 var(--imp-high-line);
  border-top-color: transparent;
}

/* A painted row has no hairline of its own, so filtering the log down to
   corrections would otherwise fuse five rows into one long panel. The gap does
   the separating that the border does everywhere else. */
.chg.k-corrected,
.chg.is-target { margin-block: var(--s2); }

/* A row arrived at by permalink. Held, not flashed: a reader who followed a
   link from another page needs to see WHICH row for as long as they are on it. */
.chg.is-target {
  box-shadow: inset 2px 0 0 var(--accent-500);
  background: var(--bg-2);
  border-radius: var(--r-sm);
  border-top-color: transparent;
}

.chg-empty {
  color: var(--fg-2);
  max-width: var(--measure);
  padding: var(--s5) 0;
}

@media (min-width: 46em) {
  .chg {
    display: grid;
    grid-template-columns: 12.5rem 1fr;
    column-gap: var(--s5);
  }

  .chg-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
    margin-bottom: 0;
  }

  .chg-what,
  .chg-why,
  .chg-refs,
  .chg-rec { grid-column: 2; }

  .chg-head { grid-row: 1 / span 5; }
}


/* ============================================================================
   5. RESOLVED RECORD REFERENCES
   Each one names a record that moved and links to the page that owns it. The
   type word rides inside the chip because a bare "frame-cap" or a bare
   "graphics.vsync" does not say which surface it lives on.
   ========================================================================== */

.chg-refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0 0;
}

/* Wraps between its own parts. Without this the chip is one unbreakable row,
   so a long convar name plus the evidence word overflows the 390 gutter and
   `overflow-wrap: anywhere` breaks the NAME mid-word - the one string on the
   chip a reader may have to type. Wrapping moves the label down instead. */
.ref {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  max-width: 100%;
  padding: 3px var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-std),
              background-color var(--dur-base) var(--ease-std);
}

a.ref:hover { border-color: var(--accent-500); background: var(--bg-3); }

.ref-t {
  flex: none;
  color: var(--fg-3);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tk-label);
}

.ref-l { color: var(--accent-300); overflow-wrap: anywhere; }

.ref-mono .ref-l { font-family: var(--font-mono); font-size: .75rem; }

/* The evidence label the RECORD carries, riding on the chip that links to it.
   The word is printed, not just the colour: the four ramps are the reference's
   own, and a reader who has not learned them still reads "inference". Muted
   against the record name, because the name is what the row is about and the
   label is how far to trust it. Tokens come from ook.css; this is not a second
   .ev-label component, it is the same four ramps at chip scale. */
.ref-ev {
  flex: none;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tk-label);
  padding-left: var(--s2);
  border-left: 1px solid var(--line-2);
}

/* Own class names, not ook.css's `.ev-*`: those carry a filled background and
   a border because they are a standalone badge, and a badge inside a chip is
   one box too many. This consumes the four TOKENS, which is what tokens are
   for, and redeclares no component. */
.ref-ev-measured  { color: var(--ev-measured-fg); }
.ref-ev-consensus { color: var(--ev-consensus-fg); }
.ref-ev-vendor    { color: var(--ev-vendor-fg); }
.ref-ev-inference { color: var(--ev-inference-fg); }

/* A name with no record behind it on this page: still printed, because the name
   is what moved, but never dressed as a link. */
.ref-dead { background: transparent; border-style: dashed; }
.ref-dead .ref-l { color: var(--fg-2); }


/* ============================================================================
   6. SMALL SCREENS
   ========================================================================== */

@media (max-width: 32em) {
  .chg-month { margin-top: var(--s6); }
  .chg-month-n { margin-left: 0; }
  /* The gutter is already tight at this width; the row's own inset comes off
     rather than stacking with it. */
  .chg { padding-inline: var(--s2); }
}


/* ============================================================================
   7. KEEP GOING
   The three tiles lost their kicker TEXT - it was a voice above a title that
   already names the destination - so the chevron keeps the right edge it has
   always been read on rather than being parked at the left by space-between
   with one child. These tiles carry no chip row either, so the copy's closing
   margin has nothing left to reserve space above.
   ========================================================================== */

.keep-going .tile-kicker { justify-content: flex-end; }
.keep-going .tile > p:last-child { margin-bottom: 0; }