/* RecapWP Changelog page — "Ledger" design, page sheet.
 *
 * A faithful port of the design handoff's Changelog sheet:
 *   docs/design_handoff_marketing_site_Ledger/design_files/site/changelog-ledger.css
 * Ported VERBATIM so the design is pixel-exact. Local changes live in the marked
 * "THEME ADDITIONS" block at the foot — keep the ported rules untouched so the
 * next design drop can be diffed against this file.
 *
 * Layers on ledger.css AND ledger-docs.css, in that order — the handoff's
 * Changelog loads home-ledger.css + docs-ledger.css + changelog-ledger.css,
 * because it reuses the Docs hero (.hero-docs) and prose atoms. The enqueue map
 * in functions.php ships that exact chain.
 */
/* RecapWP Changelog — Ledger · editorial timeline · extends home-ledger.css */

/* ── hero plaque ── */
.cl-plaque{margin-top:30px;max-width:620px;display:flex;align-items:center;gap:22px;padding:20px 24px;
  border:1px solid var(--navy-ln);border-radius:4px;background:rgba(255,255,255,.045);position:relative}
.cl-plaque::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;
  background:color-mix(in oklab,var(--ac) 55%,transparent)}
.cl-plaque .pl{font:600 9px var(--mono);letter-spacing:.2em;color:#6E7B86}
.cl-plaque .pv{font:500 34px/1 var(--serif);color:#F5F1E7;margin-top:6px}
.cl-plaque .pv em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.cl-plaque .pd{font:11px var(--mono);color:#8D97A1;margin-top:8px}
.cl-plaque .sp{flex:1}
.cl-plaque .latest{font:600 8.5px var(--mono);letter-spacing:.18em;color:#14100A;padding:5px 9px 4px;border-radius:2px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 70%,#fff),color-mix(in oklab,var(--ac) 88%,#fff))}

/* ── layout ── */
.cl-main{padding:56px 0 88px}
.cl-wrap{margin:0 auto}

/* toolbar */
.cl-toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:22px;
  border-bottom:1px solid var(--card-ln)}
.cl-toolbar .tt{font:500 15px var(--serif);color:var(--ink)}
.cl-toolbar .tt b{color:var(--ac)}
.cl-toolbar .sp{flex:1}
.cl-filter{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cl-filter .fl{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--hint);margin-right:4px}
.fchip{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--sans);color:var(--mut);
  padding:7px 13px;border:1px solid var(--card-ln);border-radius:3px;background:var(--card);cursor:pointer}
.fchip .c{font:600 10px var(--mono);color:var(--hint)}
.fchip:hover{border-color:color-mix(in oklab,var(--ac) 45%,var(--card-ln))}
.fchip.on{background:linear-gradient(180deg,#D3DEE9,#C5D3E0);color:#2B4155;border-color:#ABBED0}
.fchip.on .c{color:#5E7284}

/* ── timeline ── */
.timeline{position:relative;margin-top:8px}
/* the spine */
.timeline::before{content:'';position:absolute;top:14px;bottom:0;left:184px;width:1px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--ac) 55%,transparent),var(--card-ln) 120px,var(--card-ln))}

.rel{position:relative;display:grid;grid-template-columns:160px 1fr;gap:48px;padding:40px 0 8px}
/* node */
.rel::before{content:'';position:absolute;left:184px;top:50px;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--paper);
  border:2px solid color-mix(in oklab,var(--ac) 70%,#fff);z-index:1}
.rel.is-latest::before{background:var(--ac);box-shadow:0 0 0 4px color-mix(in oklab,var(--ac) 22%,transparent)}

/* sticky gutter */
.rel-aside{position:sticky;top:26px;align-self:start;padding-top:2px}
.rel-ver{font:500 30px/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.rel-ver em{font-style:normal;color:var(--ac)}
.rel-date{font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--hint);margin-top:10px}
.rel-ago{font:11px var(--mono);color:var(--hint);margin-top:4px}
.rel-aside .latest{display:inline-block;margin-top:12px;font:600 8px var(--mono);letter-spacing:.18em;
  color:#24402E;padding:4px 8px 3px;border-radius:2px;
  background:linear-gradient(180deg,#CFDDCC,#C3D4C0);border:1px solid #AFC6AC}
.rel-tally{margin-top:16px;display:flex;flex-direction:column;gap:5px}
.rel-tally span{font:600 9.5px var(--mono);letter-spacing:.1em;color:var(--hint);display:flex;align-items:center;gap:7px}
.rel-tally span::before{content:'';width:6px;height:6px;border-radius:1px}
.rel-tally .n::before{background:var(--ac)}
.rel-tally .i::before{background:var(--pass)}
.rel-tally .f::before{background:var(--warn)}

/* release body */
.rel-main{min-width:0}
.rel-sum{font:600 17px/1.4 var(--serif);color:var(--ink);max-width:600px}
.rel-lede{font:400 13.5px/1.75 var(--sans);color:var(--mut);margin-top:10px;max-width:600px;text-wrap:pretty}
.rel-g{margin-top:16px;background:color-mix(in oklab,var(--paper) 55%,#fff);
  border:1px solid var(--card-ln);border-radius:6px;padding:14px 14px 16px}
.rel-g .gh{display:flex;align-items:center;gap:9px;padding:4px 8px 12px 2px;font:600 9px var(--mono);letter-spacing:.16em}
.rel-g .gh .tchip{font:600 8.5px var(--mono);letter-spacing:.16em;padding:4px 9px 3px;border-radius:2px}
.rel-g .gh .gc{margin-left:auto;color:var(--hint);letter-spacing:.1em;font-weight:600;font-size:10px}
.rel-g[data-t="new"] .gh .tchip{color:#5B4A1E;background:color-mix(in oklab,var(--ac) 14%,#fff);border:1px solid color-mix(in oklab,var(--ac) 38%,#fff)}
.rel-g[data-t="imp"] .gh .tchip{color:var(--pass);background:color-mix(in oklab,var(--pass) 8%,#fff);border:1px solid color-mix(in oklab,var(--pass) 24%,#fff)}
.rel-g[data-t="fix"] .gh .tchip{color:var(--warn);background:color-mix(in oklab,var(--warn) 9%,#fff);border:1px solid color-mix(in oklab,var(--warn) 28%,#fff)}
.rel-g ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px}
.rel-g li{position:relative;background:var(--card);border:1px solid var(--card-ln);border-radius:4px;
  box-shadow:0 1px 1px rgba(12,34,51,.03);padding:13px 16px 13px 34px;
  font:400 13.5px/1.7 var(--sans);color:var(--mut);text-wrap:pretty;max-width:none}
.rel-g li::before{content:'';position:absolute;left:15px;top:19px;width:6px;height:6px;border-radius:50%}
.rel-g[data-t="new"] li::before{background:var(--ac)}
.rel-g[data-t="imp"] li::before{background:var(--pass)}
.rel-g[data-t="fix"] li::before{background:var(--warn)}
.rel-g li b{font-weight:600;color:var(--ink)}
.rel-g li code{font:500 11.5px var(--mono);color:var(--ink);background:color-mix(in oklab,var(--card-ln) 38%,#fff);
  border:1px solid color-mix(in oklab,var(--card-ln) 80%,#fff);padding:1px 5px;border-radius:2px;white-space:nowrap}
.rel-g li .protag{margin-left:2px}

/* empty filter state */
.cl-empty{display:none;margin:40px 0 0 208px;padding:26px;border:1px dashed var(--card-ln);border-radius:4px;
  font:400 13.5px var(--sans);color:var(--mut);text-align:center}

/* ── v1 era register ── */
.era{margin-top:24px;padding-top:52px;border-top:1px solid var(--card-ln)}
.era-hd{max-width:640px}
.era-hd h2{font:500 clamp(24px,2.4vw,30px)/1.2 var(--serif);color:var(--ink)}
.era-hd h2 em{font-style:normal;color:var(--ac)}
.era-hd p{font:400 13.5px/1.7 var(--sans);color:var(--mut);margin-top:10px;text-wrap:pretty}
.era-list{margin-top:24px;border:1px solid var(--card-ln);border-radius:4px;background:var(--card);
  box-shadow:var(--shadow-1);overflow:hidden}
.era-row{display:grid;grid-template-columns:88px 108px 1fr;gap:18px;align-items:baseline;
  padding:14px 22px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.era-row:last-child{border-bottom:0}
.era-row:hover{background:color-mix(in oklab,var(--card) 60%,#fff)}
.era-row .ev{font:600 13.5px var(--serif);color:var(--ink)}
.era-row .ed{font:600 9.5px var(--mono);letter-spacing:.1em;color:var(--hint)}
.era-row .es{font:400 13px/1.6 var(--sans);color:var(--mut)}
.era-row .es b{font-weight:600;color:var(--ink)}
.era-ft{display:flex;align-items:center;justify-content:center;gap:14px;
  padding:16px 22px;border-top:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);
  background:color-mix(in oklab,var(--paper) 55%,#fff);
  font:600 9.5px var(--mono);letter-spacing:.18em;color:var(--hint)}
.era-ft::before,.era-ft::after{content:'';height:1px;width:40px;background:var(--card-ln)}

@media (max-width:880px){
  .timeline::before,.rel::before{display:none}
  .rel{grid-template-columns:1fr;gap:0;padding:32px 0 8px;border-top:1px solid var(--card-ln)}
  .rel:first-of-type{border-top:0}
  .rel-aside{position:static;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
  .rel-ver{font-size:26px}
  .rel-date,.rel-ago{margin-top:0}
  .rel-tally{flex-direction:row;gap:14px;margin-top:0;flex-basis:100%}
  .rel-sum,.rel-lede,.rel-g li{max-width:none}
  .cl-empty{margin-left:0}
  .era-row{grid-template-columns:76px 1fr}
  .era-row .es{grid-column:1 / -1}
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — everything above this line is the verbatim design port.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── filter visibility ────────────────────────────────────────────────────
 * The filter (main.js module 25) toggles the `hidden` attribute rather than
 * writing inline styles like the prototype's script does, so the CSS keeps
 * ownership of display and the DOM states plainly what's hidden.
 *
 * These rules are REQUIRED, not cosmetic: `.rel` sets display:grid and `.rel-g`
 * is a block with its own rule, both of which out-specify the UA stylesheet's
 * `[hidden]{display:none}` — so without them the attribute would be set and
 * nothing would disappear. Class+attribute selectors win it back.
 */
.rel[hidden],
.rel-g[hidden]{display:none}

/* The empty state, revealed only when a filter matches nothing. */
.cl-empty.on{display:block}

/* ── the "Removed" change type ────────────────────────────────────────────
 * The design's type system covers three kinds — new / imp / fix — but the real
 * release history has a fourth: REMOVED (7 changes, e.g. Turbo mode, the
 * standalone SEO scan area). The prototype never hit this because its release
 * notes are invented sample content; the actual CHANGELOG.md has carried
 * "Removed" since the v2.4.0 pivot, and dropping those entries would hide real
 * history (retiring a feature is exactly what a reader scans a changelog for).
 *
 * So the design's chip/tchip/tally atoms are extended with a fourth variant,
 * built from the same tokens. Colour: --hint (muted grey), deliberately NOT
 * --crit — a removal is a retirement, not a failure, and red would read as an
 * error next to the amber "fixed" chip.
 */
.rel-g[data-t="rem"] .gh .tchip{color:var(--mut);background:color-mix(in oklab,var(--hint) 10%,#fff);
  border:1px solid color-mix(in oklab,var(--hint) 30%,#fff)}
.rel-g[data-t="rem"] li::before{background:var(--hint)}
.rel-tally .r::before{background:var(--hint)}

/* ── WP admin bar ─────────────────────────────────────────────────────────
 * The sticky element on this page is `.rel-aside` (the per-release version/date
 * column, sticky at top:26px) — NOT the toolbar, which merely sits above the
 * timeline. Every sticky top offset owes an admin-bar rule or it tucks under the
 * fixed bar for logged-in users (see the note in ledger.css). Mirrors
 * foundation.css's 32px desktop / 46px ≤782px pattern. The 26px must track
 * .rel-aside's own `top` in the ported rules above.
 *
 * Only ONE rule here, unlike the other pages' pairs: the design drops .rel-aside
 * to position:static at ≤880px (it becomes a plain header row), and `top` is
 * inert on a static element — so the usual ≤782px / 46px companion would be dead
 * code. Sticky is only ever in force above 880px, where the admin bar is always
 * 32px. Scoped to match, so the rule can't outlive the sticky it corrects.
 */
@media screen and (min-width:881px){
  body.admin-bar .rel-aside{top:calc(26px + 32px)}
}