/* notes.css — editorial layer for /notes/ long-form pages. Linked ALONGSIDE
   cadgent.css (which provides tokens, reset, .chip, footer base) and ONLY on
   note pages, so its generic selectors (figure, footer, body) never leak to the
   rest of the site. Keeps the design system DRY: nothing here is duplicated. */

/* long-form overrides of the core */
body { font:16px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: max(20px, env(safe-area-inset-top)) 22px max(40px, env(safe-area-inset-bottom)); }
.wide { max-width:1100px; }

/* ---- masthead / backbar ---- */
.backbar { max-width:1100px; margin:0 auto 30px; display:flex; align-items:baseline; gap:14px; }
.backbar .wordmark { font:700 19px/1 var(--font-display); letter-spacing:-0.02em; margin:0; display:flex; }
.backbar a.back { margin-left:auto; font:600 11px/1 var(--font-display); text-transform:uppercase;
  letter-spacing:0.1em; color:var(--ink-soft); text-decoration:none; }
.backbar a.back:hover { color:var(--orange); }

/* ---- lede / kicker / title / standfirst ---- */
.kicker { font:600 11px/1 var(--font-display); text-transform:uppercase; letter-spacing:0.14em;
  color:var(--orange); margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.kicker::before { content:""; width:22px; height:3px; border-radius:1px; background:var(--orange); }
h1.title { font:700 clamp(30px,5.2vw,48px)/1.05 var(--font-display); letter-spacing:-0.025em;
  margin:0 0 16px; max-width:20ch; overflow-wrap:anywhere; }
.standfirst { font-size:19px; line-height:1.5; color:var(--ink-soft); max-width:62ch; margin:0 0 20px; }
.standfirst b { color:var(--ink); font-weight:600; }
.lede { color:var(--ink-soft); font-size:17px; max-width:60ch; margin:0 0 40px; }

/* ---- state banner / prose ---- */
.state { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 8px; padding:13px 16px;
  background:var(--surface); border:1.5px solid var(--ink); border-radius:11px; }
.state .note { font:13px/1.4 var(--font-mono); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.measure p { margin:0 0 18px; }
.measure p.first { margin-top:30px; }
strong.tight { font-weight:600; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---- instrument ledger ---- */
.ledger { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); border:1.5px solid var(--ink);
  border-radius:11px; overflow:hidden; margin:26px 0; background:var(--surface); }
.ledger .cell { padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.ledger .cell .k { font:600 10px/1 var(--font-display); text-transform:uppercase; letter-spacing:0.1em;
  color:var(--ink-soft); margin-bottom:7px; }
.ledger .cell .v { font:500 18px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.ledger .cell .v small { font-size:12px; color:var(--ink-soft); }
.ledger .cell .v .was { color:var(--ink-soft); text-decoration:line-through; }
.ledger .cell .v .now { color:var(--orange); }

/* ---- figures (model is the hero) ---- */
figure { margin:34px 0; }
figure.bleed { max-width:1100px; }
figure img { width:100%; display:block; background:var(--well); border:1px solid var(--line); border-radius:12px; }
figure img.pad { padding:10px; }
figcaption { margin-top:11px; font:12.5px/1.5 var(--font-mono); color:var(--ink-soft);
  font-variant-numeric:tabular-nums; display:flex; gap:10px; }
figcaption .fig { color:var(--orange); font-weight:500; flex:0 0 auto; }

/* ---- step chapters ---- */
.step { margin:46px 0 0; }
.step.flush { margin-top:0; }
.step-head { display:flex; align-items:baseline; gap:14px; margin:0 0 14px; }
.step-num { font:500 13px/1 var(--font-mono); color:var(--paper); background:var(--ink); border-radius:6px;
  padding:6px 8px; letter-spacing:0.02em; flex:0 0 auto; }
.step-title { font:700 23px/1.1 var(--font-display); letter-spacing:-0.015em; margin:0; overflow-wrap:anywhere; }

/* ---- callout ---- */
.callout { border:1.5px solid var(--ink); border-radius:11px; background:var(--surface); padding:18px 20px; margin:26px 0; }
.callout .tag { display:inline-flex; align-items:center; gap:7px; font:700 10.5px/1 var(--font-display);
  text-transform:uppercase; letter-spacing:0.07em; color:var(--paper); background:var(--red); border-radius:6px;
  padding:5px 9px; margin-bottom:11px; }
.callout.win .tag { background:var(--green); }
.callout p { margin:0; color:var(--ink); }
.callout p + p { margin-top:10px; }

/* ---- verdict table ---- */
.verdict { width:100%; border-collapse:collapse; margin:22px 0; font-size:14px; }
.verdict th { text-align:left; font:600 10px/1 var(--font-display); text-transform:uppercase; letter-spacing:0.1em;
  color:var(--ink-soft); padding:0 14px 10px 0; border-bottom:1.5px solid var(--ink); }
.verdict td { padding:11px 14px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.verdict td.r { white-space:nowrap; }
.verdict .v-chip { display:inline-block; border-radius:5px; padding:3px 8px; font:700 10px/1 var(--font-display);
  text-transform:uppercase; letter-spacing:0.04em; }
.v-chip.pass { background:var(--green); color:var(--paper); }
.v-chip.fixed{ background:var(--yellow); color:var(--ink); }
.v-chip.open { background:var(--red); color:var(--paper); }
hr.rule { border:0; border-top:1px solid var(--line); margin:42px 0; }

/* ---- method-page components ---- */
.stub { display:inline-flex; align-items:center; gap:9px; margin:6px 0 30px; padding:10px 14px;
  background:var(--surface); border:1.5px solid var(--ink); border-radius:10px;
  font:13px/1.4 var(--font-mono); color:var(--ink-soft); }
.rules { list-style:none; padding:0; margin:18px 0; display:grid; gap:12px; }
.rules li { background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:15px 17px; }
.rules li b { font:700 15px/1.3 var(--font-display); display:block; margin-bottom:5px; }
.rules li span { color:var(--ink-soft); font-size:14.5px; }
.stack { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border:1.5px solid var(--ink);
  border-radius:11px; overflow:hidden; margin:20px 0; background:var(--surface); }
.stack .t { padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.stack .t .n { font:500 16px/1.1 var(--font-mono); }
.stack .t .d { color:var(--ink-soft); font-size:13px; margin-top:6px; }
.tiers { margin:16px 0; border-collapse:collapse; width:100%; font-size:14.5px; }
.tiers td { padding:9px 14px 9px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.tiers td.lvl { font-family:var(--font-mono); color:var(--ink); white-space:nowrap; }
.tiers tr:last-child td { color:var(--green); font-weight:600; }
.pull { font:600 19px/1.4 var(--font-display); color:var(--ink); border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink); padding:18px 0; margin:30px 0; max-width:62ch; }

/* ---- call to action (back to the live model) ---- */
.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:10px; }
.cta { display:inline-flex; align-items:center; gap:9px; background:var(--orange); color:var(--paper);
  text-decoration:none; font:700 14.5px/1 var(--font-display); letter-spacing:-0.01em;
  padding:13px 18px; border-radius:10px;
  transition:transform .15s var(--ease-out), filter .15s var(--ease-out); }
.cta:hover { filter:brightness(0.93); transform:translateY(-1px); }
.cta:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* ---- notes-index list ---- */
.notes { display:flex; flex-direction:column; }
.notes .entry { display:block; text-decoration:none; color:var(--ink); padding:26px 0;
  border-top:1px solid var(--line); transition:padding-left .18s var(--ease-out); }
.notes .entry:last-child { border-bottom:1px solid var(--line); }
.notes .entry:hover { padding-left:8px; }
.notes .entry:hover .h { color:var(--orange); }
.notes .entry .row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.notes .entry .num { font:500 13px/1 var(--font-mono); color:var(--ink-soft); }
.notes .entry .h { font:700 25px/1.15 var(--font-display); letter-spacing:-0.02em; margin:6px 0 8px;
  overflow-wrap:anywhere; }
.notes .entry .sf { color:var(--ink-soft); font-size:15px; max-width:64ch; }
.notes .entry .meta { font:12px/1 var(--font-mono); color:var(--ink-soft); margin-left:auto; }

/* ---- footer (flush) ---- */
footer { max-width:1100px; margin:54px auto 0; padding-top:22px; border-top:1px solid var(--line);
  color:var(--ink-soft); font:12px/1.7 var(--font-mono); font-variant-numeric:tabular-nums;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; text-align:left; }
footer a { color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
footer .spacer { margin-left:auto; }

@media (max-width:560px){ h1.title{ letter-spacing:-0.02em; } .standfirst{ font-size:17px; } }