/* SyncVals — Field Notes
   Light-first editorial theme. Monospace is the interface voice, a serif carries
   the display type, and structure comes from hairlines and whitespace rather
   than cards. Chart colours are the validated categorical slots; charts stay in
   sans, never the serif. */

:root {
  color-scheme: light;
  --plane:      #f9f9f7;
  --surface:    #fcfcfb;
  --ink:        #0b0b0b;
  --ink-2:      #52514e;
  --muted:      #898781;
  --rule:       #e1e0d9;
  --axis:       #c3c2b7;
  --ring:       rgba(11, 11, 11, .10);
  --wash:       rgba(11, 11, 11, .035);

  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #eda100;  --s5: #e87ba4;
  --ok: #0ca30c;  --crit: #d03b3b;  --warn: #fab219;
  --good-text: #006300;

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --col: 1180px;
  --step: clamp(1rem, .6rem + 1.6vw, 1.6rem);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:   #0d0d0d;
  --surface: #1a1a19;
  --ink:     #ffffff;
  --ink-2:   #c3c2b7;
  --muted:   #898781;
  --rule:    #2c2c2a;
  --axis:    #383835;
  --ring:    rgba(255, 255, 255, .10);
  --wash:    rgba(255, 255, 255, .05);
  --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;  --s5: #d55181;
  --good-text: #0ca30c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1;
}

.mono { font-family: var(--mono); font-size: .92em; }
.num, .mono.num { font-variant-numeric: tabular-nums; text-align: right; }
.dim { color: var(--ink-2); }
.dot { color: var(--axis); padding: 0 .35em; }
kbd {
  font: 500 11px/1 var(--mono);
  border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 4px; padding: .28em .4em;
  background: var(--surface); color: var(--ink-2);
}

/* ---------------------------------------------------------------- chrome */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 2rem;
  padding: .85rem var(--step);
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
.mark { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.mark-b {
  font: 600 15px/1 var(--mono); letter-spacing: -.02em; color: var(--ink);
}
.mark-b::before { content: "▚ "; color: var(--s1); }
.mark-s {
  font: 400 11px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .13em;
}
.nav { display: flex; gap: .25rem; margin-left: auto; }
.nav a {
  font: 400 12px/1 var(--mono); color: var(--ink-2); text-decoration: none;
  padding: .5rem .7rem; border-radius: 6px; letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--wash); color: var(--ink); }
.top-r { display: flex; gap: .5rem; align-items: center; }
.kbtn, .tbtn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 400 12px/1 var(--mono); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 7px; padding: .5rem .6rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.kbtn:hover, .tbtn:hover { border-color: var(--axis); color: var(--ink); }
.tbtn { padding: .5rem .55rem; }
.ti-d { display: none; }
:root[data-theme="dark"] .ti-l { display: none; }
:root[data-theme="dark"] .ti-d { display: inline; }

main { max-width: var(--col); margin: 0 auto; padding: 0 var(--step); }

/* ------------------------------------------------------------------ hero */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem;
  padding: clamp(3rem, 7vh, 6rem) 0 clamp(2.5rem, 5vh, 4rem);
  align-items: start;
}
.eyebrow {
  font: 400 11px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .14em; margin: 0 0 1.6rem;
}
h1 {
  font: 400 clamp(2.1rem, 1.2rem + 3vw, 3.55rem)/1.1 var(--serif);
  letter-spacing: -.021em; margin: 0 0 1.4rem; text-wrap: balance;
}
h1 em { font-style: italic; color: var(--s1); }
.lede {
  font-size: 1.055rem; line-height: 1.62; color: var(--ink-2);
  max-width: 46ch; margin: 0 0 2rem;
}
.lede em { font-style: normal; color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn {
  font: 500 13px/1 var(--sans); text-decoration: none;
  background: var(--ink); color: var(--plane);
  padding: .78rem 1.15rem; border-radius: 8px;
  border: 1px solid var(--ink);
  transition: transform .12s, opacity .15s;
}
.btn:hover { transform: translateY(-1px); opacity: .9; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--axis); }

/* stat tiles — hero figures, proportional numerals */
.hero-r { margin: 0; }
.tiles {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.tile {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.05rem 1.1rem 1.15rem;
  background: var(--surface);
}
.tile:first-child { grid-column: 1 / -1; }
.tile:first-child .tile-v { font-size: 3rem; }
.tile-v {
  font: 400 2.05rem/1 var(--serif); letter-spacing: -.02em; color: var(--ink);
}
.tile-v i { font-style: normal; font-size: .5em; color: var(--muted); margin-left: .1em; }
.tile-k {
  font: 400 11px/1.35 var(--mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .6rem;
}
.tile-note { font: 400 11.5px/1.4 var(--sans); color: var(--muted); margin-top: .25rem; }

/* ----------------------------------------------------------------- bands */
.band { padding: clamp(2.5rem, 6vh, 4.5rem) 0; border-top: 1px solid var(--rule); }
.sec-head { max-width: 62ch; margin-bottom: 2.2rem; }
h2 {
  font: 400 clamp(1.5rem, 1rem + 1.5vw, 2.1rem)/1.18 var(--serif);
  letter-spacing: -.015em; margin: 0 0 .7rem;
}
.sec-head p { color: var(--ink-2); margin: 0; font-size: .975rem; }
.sec-head em { font-style: normal; font-weight: 500; color: var(--ink); }

/* -------------------------------------------------------------- ribbon */
.ribbon {
  display: flex; gap: 2px; height: 60px;             /* 2px surface gap */
  margin-bottom: 1.5rem;
}
.seg {
  position: relative; min-width: 3px;
  border-radius: 4px;                                /* 4px rounded ends */
  display: flex; align-items: center; justify-content: center;
  cursor: default; outline: none;
  transition: filter .15s, transform .15s;
}
.seg:hover, .seg:focus-visible { filter: brightness(1.06); transform: translateY(-2px); }
.seg:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.seg-in {
  font: 500 11.5px/1 var(--sans); font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  padding: 0 .2rem;
}
/* Narrowness is decided at build time from the real percentage, not by matching
   the leading digit of a string — "2.0" would slip past a prefix selector and
   clip. Renderers add .narrow and omit the label entirely. */
.seg.narrow .seg-in { display: none; }
.s1 { background: var(--s1); } .s2 { background: var(--s2); }
.s3 { background: var(--s3); } .s4 { background: var(--s4); }
.s5 { background: var(--s5); }

.legend { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; }
.lg { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.sw { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px var(--ring); }
.lg-k { color: var(--ink); font-weight: 450; }
.lg-code { font: 400 10.5px/1 var(--mono); color: var(--muted); letter-spacing: .02em; }
.lg-n { font: 500 12px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.tableview { margin-top: 1.6rem; }
.tableview summary {
  font: 400 12px/1 var(--mono); color: var(--ink-2); cursor: pointer;
  padding: .5rem 0; letter-spacing: .02em;
}
.tableview summary:hover { color: var(--ink); }
.dt { border-collapse: collapse; margin-top: .8rem; font-size: .88rem; }
.dt th, .dt td { text-align: left; padding: .45rem 1.4rem .45rem 0; border-bottom: 1px solid var(--rule); }
.dt th { font: 400 10.5px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.dt .num, .dt td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- dot plot */
.dotplot { border-top: 1px solid var(--rule); }
.dp-head, .dp-row {
  display: grid; grid-template-columns: 15rem 1fr 6.5rem 3.5rem;
  gap: 1.25rem; align-items: center;
}
/* Horizontal padding keeps the right-hand figures off the container edge and
   gives the hover band an intentional inset. */
.dp-head { padding: .6rem .9rem; border-bottom: 1px solid var(--rule); }
.dp-hk {
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; text-align: right;
}
.dp-axis { position: relative; height: 12px; }
.tk { position: absolute; top: 0; transform: translateX(-50%); }
.tk i {
  font: 400 10px/1 var(--mono); color: var(--muted); font-style: normal;
  font-variant-numeric: tabular-nums;
}
.dp-row { padding: .95rem .9rem; border-bottom: 1px solid var(--rule); }
.dp-row:hover { background: var(--wash); }
.dp-lab { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dp-agent { font: 500 13.5px/1.2 var(--sans); }
.dp-model { font: 400 11.5px/1.2 var(--mono); color: var(--muted); }
.dp-track {
  position: relative; height: 12px;
  background: linear-gradient(to right, var(--rule) 1px, transparent 1px) repeat-x;
  background-size: 25% 100%;                          /* recessive gridline */
}
.dp-track::after {
  content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--axis);
}
.dp-ci {
  position: absolute; top: 5px; height: 2px;           /* 2px line */
  background: var(--axis); border-radius: 2px;
}
.dp-pt {
  position: absolute; top: 1px; width: 10px; height: 10px;   /* >=8px marker */
  margin-left: -5px; border-radius: 50%;
  background: var(--s1);
  box-shadow: 0 0 0 2px var(--surface);                /* 2px surface ring */
  cursor: help;
}
.dp-val { text-align: right; }
.dp-val b { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.dp-ci-t {
  display: block; font: 400 10.5px/1.3 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: .2rem;
}
.dp-n {
  text-align: right; font: 400 12px/1 var(--mono); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- category */
.catgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.cat {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.05rem 1.15rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--surface); transition: background .15s;
}
.cat:hover { background: var(--wash); }
.cat-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.cat-n { font: 500 13.5px/1.25 var(--sans); flex: 1; }
.cat-st {
  font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  padding: .3em .45em; border-radius: 4px; white-space: nowrap;
}
.cat-st.live { color: var(--good-text); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.cat-st.preview { color: var(--ink-2); background: var(--wash); }
.cat-bar { height: 5px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.cat-bar span { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
.cat-meta {
  font: 400 11.5px/1 var(--sans); color: var(--ink-2); margin-top: .65rem;
}
.cat-meta .mono { font-variant-numeric: tabular-nums; color: var(--ink); }
.cat-b {
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  margin: .7rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --------------------------------------------------------------- filters */
.filters { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.3rem; }
.filters input, .filters select {
  font: 400 12.5px/1 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 7px; padding: .6rem .7rem; min-width: 0;
}
.filters input { flex: 1 1 15rem; font-family: var(--mono); font-size: 12px; }
.filters input:focus, .filters select:focus { outline: 2px solid var(--s1); outline-offset: -1px; }
.fcount {
  font: 400 11px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-left: auto;
}

/* ----------------------------------------------------------- runs table */
/* The run index flows at full length so the PAGE is the only scroller. A capped
   480px window onto 879 rows meant a nested scrollbar and a page that barely
   scrolled at all, which left filter navigation with nowhere to travel.
   .tw.short (used for the short evidence tables) keeps its own cap. */
.tw {
  border: 1px solid var(--rule); border-radius: 10px; overflow: visible;
  background: var(--surface);
}
.tw.short { overflow: auto; }
/* Filter feedback. The fade runs a little longer than a glance so it is still
   resolving while the ~1s scroll travels, rather than finishing before arrival. */
@keyframes rowsIn {
  from { opacity: .25; transform: translateY(6px); }
  to   { opacity: 1;   transform: none; }
}
.tw.is-refreshed tbody { animation: rowsIn .45s cubic-bezier(.22, .61, .36, 1) both; }

.runs { width: 100%; border-collapse: collapse; font-size: .875rem; }
.runs thead th {
  position: sticky; top: 4.25rem; z-index: 2;
  background: var(--surface); text-align: left;
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  padding: .75rem .9rem; border-bottom: 1px solid var(--rule);
}
.runs thead th.num { text-align: right; }
.runs td { padding: .6rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.runs tbody tr:last-child td { border-bottom: 0; }
.runs tbody tr:hover { background: var(--wash); }
.t-task { font-weight: 450; }
.sl { color: var(--axis); }
.rw {
  font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  padding: .35em .5em; border-radius: 4px; white-space: nowrap;
}
.rw.ok   { color: var(--good-text); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.rw.no   { color: var(--crit);      background: color-mix(in srgb, var(--crit) 12%, transparent); }
.rw.part { color: var(--ink-2);     background: var(--wash); font-variant-numeric: tabular-nums; }
.rw.ok::before   { content: "✓ "; }
.rw.no::before   { content: "✗ "; }
.chip {
  display: inline-block; font: 500 10.5px/1 var(--sans);
  padding: .38em .55em; border-radius: 4px; color: #fff; white-space: nowrap;
}
:root[data-theme="dark"] .chip { color: #0d0d0d; }
.t-go a {
  font: 400 11px/1 var(--mono); color: var(--muted); text-decoration: none;
  opacity: 0; transition: opacity .15s, color .15s;
}
.runs tbody tr:hover .t-go a { opacity: 1; color: var(--s1); }
.t-go a:hover { text-decoration: underline; }
.empty { font: 400 13px/1 var(--mono); color: var(--muted); padding: 1.5rem 0; }

/* ------------------------------------------------------------------ foot */
.foot {
  max-width: var(--col); margin: 0 auto; padding: 3rem var(--step) 4rem;
  border-top: 1px solid var(--rule);
}
.foot p { max-width: 68ch; color: var(--ink-2); font-size: .9rem; margin: 0 0 .6rem; }
.foot .attrib {
  font-size: .82rem; color: var(--muted); padding-top: .8rem;
  border-top: 1px solid var(--rule); margin-top: 1.2rem;
}
.foot .attrib a { color: var(--s1); text-decoration: none; }
.foot .attrib a:hover { text-decoration: underline; }
.foot .dim { color: var(--muted); font: 400 11px/1.5 var(--mono); }

/* -------------------------------------------------------- command palette */
.pal {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--plane) 55%, transparent);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
/* An author `display` rule outranks the UA's [hidden]{display:none}, so any
   element that sets display MUST restate hidden or it can never be closed. */
.pal[hidden] { display: none; }
.pal-box {
  width: min(600px, 92vw); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .28);
  overflow: hidden;
}
#pal-q {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule);
  padding: 1rem 1.1rem; font: 400 14px/1 var(--mono);
  background: transparent; color: var(--ink); outline: none;
}
#pal-list { list-style: none; margin: 0; padding: .4rem; max-height: 45vh; overflow: auto; }
#pal-list li {
  padding: .6rem .7rem; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; gap: .7rem; font-size: .875rem;
}
#pal-list li[aria-selected="true"] { background: var(--wash); }
#pal-list .pl-n { flex: 1; font-weight: 450; }
#pal-list .pl-c { font: 400 10.5px/1 var(--mono); color: var(--muted); }
#pal-list .pl-k { font: 500 11px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pal-foot {
  border-top: 1px solid var(--rule); padding: .55rem .8rem;
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  display: flex; gap: .45rem; align-items: center;
}

/* ---------------------------------------------------------------- tooltip */
.tip {
  position: fixed; z-index: 95; pointer-events: none;
  background: var(--ink); color: var(--plane);
  border-radius: 7px; padding: .55rem .7rem;
  font: 400 11.5px/1.5 var(--sans); max-width: 17rem;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .3);
}
.tip b { font-weight: 600; }
.tip .tip-n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .dp-head, .dp-row { grid-template-columns: 9rem 1fr 5rem; gap: .8rem; }
  .dp-head .dp-hk:last-child, .dp-n { display: none; }
  .nav { display: none; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .kbtn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
}


/* ---- analysis.css ---- */
/* analysis.css — page-specific only.
   Everything structural (bands, tiles, chips, .dt, .tw, .legend, .tk) comes from
   editorial.css. What is added here: the two-sided ledger, the trap cards, the
   horizontal bar chart used twice on this page, the findings blocks, and the
   caveats list. Colour is never introduced — only the existing --s1..--s5 slots
   are referenced, and every bar carries a text key plus a printed value because
   three of the five light-mode slots fall under 3:1 contrast. */

/* --------------------------------------------------------------- hero tweak */
.an-hero h1 em { font-style: italic; color: var(--s2); }   /* the hack slot */

/* ------------------------------------------------------------- the ledger */
.led {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.led-col {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.led-h {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--rule);
  background: var(--wash);
}
.led-h b { font: 500 13px/1 var(--sans); letter-spacing: .01em; }
.led-h span {
  font: 400 11px/1 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.led-row { padding: .95rem 1.15rem 1.05rem; border-bottom: 1px solid var(--rule); }
.led-col .led-row:last-child { border-bottom: 0; }
.led-top { display: flex; align-items: center; gap: .6rem; }
.led-n {
  font: 500 18px/1 var(--sans); font-variant-numeric: tabular-nums;
  margin-left: auto; color: var(--ink);
}
.led-pct {
  font: 400 11.5px/1 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 3.4rem;
}
.led-imp {
  margin: .6rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2);
  max-width: 52ch;
}

.rulebox {
  margin-top: 1.6rem; padding: 1.05rem 1.2rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--s1);
  border-radius: 3px; background: var(--surface);
}
.rulebox p { margin: 0; font-size: .93rem; line-height: 1.62; color: var(--ink-2); max-width: 78ch; }
.rulebox b { color: var(--ink); font-weight: 500; }
.rulebox .mono { color: var(--ink); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- trap cards */
/* The evidence table follows immediately; without the bottom margin the cards
   sit flush against it and the two blocks read as one. */
.traps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.75rem; }
.trap-c {
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--surface);
}
.trap-tag {
  display: inline-block; font: 400 10.5px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .11em;
}
.trap-c h3 {
  font: 400 1.22rem/1.25 var(--serif); letter-spacing: -.012em;
  margin: .7rem 0 .8rem;
}
.trap-c p { margin: 0 0 .8rem; font-size: .93rem; line-height: 1.6; color: var(--ink-2); }
.trap-c p:last-child { margin-bottom: 0; }
.trap-c .mono { color: var(--ink); font-variant-numeric: tabular-nums; }
.trap-rule {
  border-top: 1px solid var(--rule); padding-top: .8rem;
  font-size: .885rem !important;
}
.trap-rule b { color: var(--ink); font-weight: 500; }
.trap-rule i { font-style: italic; }

/* ------------------------------------------------------ horizontal bar chart
   One axis, one measure per series, recessive gridlines, thin marks. The tick
   spacing arrives as --grid from the renderer so the gridlines land exactly on
   the printed ticks. */
.hb { margin: 0; }
.hb-head {
  display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem;
  align-items: end; padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}
.hb-hl, .hb-unit {
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.hb-axis { position: relative; height: 13px; }
.hb-axis .tk { top: 2px; }
.hb-unit { position: absolute; right: 0; top: -14px; }
.hb-rows { border-bottom: 1px solid var(--rule); }
.hb-row {
  display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem;
  align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
.hb-rows .hb-row:last-child { border-bottom: 0; }
.hb-row:hover { background: var(--wash); }
.hb-lab { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.hb-name { font: 500 13px/1.25 var(--sans); }
.hb-sub {
  font: 400 10.5px/1.3 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hb-plot {
  display: flex; flex-direction: column; gap: .3rem;
  background: linear-gradient(to right, var(--rule) 1px, transparent 1px) repeat-x;
  background-size: var(--grid, 25%) 100%;
}
.hb-bar { display: grid; grid-template-columns: 4.4rem 1fr 3.6rem; gap: .55rem; align-items: center; }
.hb-bar.nokey { grid-template-columns: 1fr 3.6rem; }
.hb-key {
  font: 400 10px/1 var(--mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .07em; text-align: right;
}
.hb-track { position: relative; display: block; height: 9px; }
.hb-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  min-width: 1px; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--ring) inset;
}
.hb-v {
  font: 500 11.5px/1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}
.hb .legend { margin-top: 1.1rem; }
.hb-cap {
  margin-top: .9rem; font-size: .875rem; line-height: 1.55;
  color: var(--muted); max-width: 72ch;
}

/* ----------------------------------------------------------- findings block */
.finds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.5rem; margin-top: 1.8rem;
  border-top: 1px solid var(--rule); padding-top: 1.5rem;
}
.find p { margin: .5rem 0 0; font-size: .915rem; line-height: 1.6; color: var(--ink-2); }
.find-n {
  display: block; font: 400 1.5rem/1 var(--serif); letter-spacing: -.015em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* short scroll tables, so a 14-row table does not need 30rem of viewport */
.tw.short { max-height: 22rem; }
/* Scrolls internally, so its header pins to the box, not below the site header. */
.tw.short .runs thead th { top: 0; }
.dt.wide { width: 100%; }
.flag {
  font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); background: var(--wash);
  padding: .3em .4em; border-radius: 4px; white-space: nowrap;
}
a.tl { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--axis); }
a.tl:hover { color: var(--s1); border-bottom-color: var(--s1); }

/* ------------------------------------------------------------------ caveats */
.caveats {
  margin: 0; padding: 0; list-style: none; counter-reset: cav;
  display: grid; gap: 0; border-top: 1px solid var(--rule);
}
.caveats li {
  counter-increment: cav; position: relative;
  padding: 1rem 0 1.05rem 2.6rem; border-bottom: 1px solid var(--rule);
  font-size: .935rem; line-height: 1.62; color: var(--ink-2); max-width: 82ch;
}
.caveats li::before {
  content: counter(cav, decimal-leading-zero);
  position: absolute; left: 0; top: 1.15rem;
  font: 400 11px/1 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.caveats b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .led, .traps { grid-template-columns: 1fr; }
  .hb-head, .hb-row { grid-template-columns: 8.5rem 1fr; gap: .8rem; }
  .hb-bar { grid-template-columns: 3.6rem 1fr 3.2rem; gap: .4rem; }
}
@media (max-width: 560px) {
  .hb-head, .hb-row { grid-template-columns: 1fr; }
  .hb-axis { display: none; }
  .finds { grid-template-columns: 1fr; }
}


/* ---- home.css ---- */
/* home.css — Overview page only.
   The two closing sections that replaced the 879-row run index: four findings
   cards, then the read-next signposts. Type, hairlines and colour slots all come
   from editorial.css; nothing here introduces a hue. */

/* --------------------------------------------------------------- findings */
.finds-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.find-c {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.3rem 1.35rem 1.25rem; background: var(--surface);
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.find-c:hover { background: var(--wash); }
.find-v {
  font: 400 2.5rem/1 var(--serif); letter-spacing: -.022em; color: var(--ink);
}
.find-k {
  font: 400 10.5px/1.4 var(--mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .55rem;
}
.find-c p {
  margin: .8rem 0 0; font-size: .89rem; line-height: 1.58; color: var(--muted);
  flex: 1;
}
.find-c p b { color: var(--ink-2); font-weight: 500; }
.find-go {
  margin-top: 1.1rem; font: 400 11px/1 var(--mono); color: var(--muted);
  letter-spacing: .02em; transition: color .15s;
}
.find-c:hover .find-go { color: var(--s1); }

/* -------------------------------------------------------------- signposts */
.posts { border-top: 1px solid var(--rule); }
.post {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) 2rem;
  gap: 1.4rem; align-items: baseline;
  padding: 1.15rem .9rem 1.2rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; transition: background .15s;
}
.post:hover { background: var(--wash); }
.post-t { font: 400 1.32rem/1.2 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.post p { margin: 0; font-size: .93rem; line-height: 1.58; color: var(--ink-2); max-width: 70ch; }
.post-go {
  justify-self: end; font: 400 15px/1 var(--mono); color: var(--axis);
  transition: color .15s, transform .15s;
}
.post:hover .post-go { color: var(--s1); transform: translateX(3px); }

@media (max-width: 720px) {
  .post { grid-template-columns: 1fr 1.5rem; gap: .5rem 1rem; }
  .post-t { grid-column: 1 / -1; }
}


/* ---- methodology.css ---- */
/* Methodology — page-specific rules only.
   This page is almost entirely type, so the layout work is measure, hierarchy
   and hairlines. No new hues: the five class colours arrive via .chip s1–s5 and
   pass/fail state via .rw ok / .rw no from the shared sheet. */

/* ------------------------------------------------------------- opener + toc */
.m-open { grid-template-columns: 1.25fr .75fr; }
.m-open .lede { max-width: 52ch; margin-bottom: 1.9rem; }

.m-toc {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  padding-top: 1.3rem; border-top: 1px solid var(--rule);
}
.m-toc a {
  font: 400 11.5px/1 var(--mono); color: var(--ink-2); text-decoration: none;
  letter-spacing: .02em; padding: .5rem .6rem;
  border: 1px solid var(--rule); border-radius: 6px;
  transition: border-color .15s, color .15s, background .15s;
}
.m-toc a::before { content: "↓ "; color: var(--axis); }
.m-toc a:hover { border-color: var(--axis); color: var(--ink); background: var(--wash); }

/* --------------------------------------------------------------- the chain */
.m-steps {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
  counter-reset: none;
}
.m-step {
  display: grid; grid-template-columns: 3.5rem minmax(0, 66ch);
  gap: 1.4rem; padding: 1.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.m-step-n {
  font: 400 2.1rem/1 var(--serif); color: var(--axis);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  text-align: right;
}
.m-step-b h3 {
  font: 400 1.28rem/1.3 var(--serif); letter-spacing: -.012em;
  margin: .1rem 0 .6rem;
}
.m-step-b p { margin: 0; color: var(--ink-2); font-size: .975rem; line-height: 1.68; }
.m-step-note {
  margin-top: .85rem !important;
  padding-left: .95rem; border-left: 2px solid var(--rule);
  font-size: .915rem !important; color: var(--muted) !important;
}

/* small inline reference tables, used inside steps and rules */
.m-mini { margin-top: 1rem; font-size: .85rem; }
.m-mini td, .m-mini th { padding: .4rem 1.2rem .4rem 0; }
.m-mini tbody tr:last-child td { border-bottom: 0; }
.m-mini td:first-child { color: var(--ink-2); }

/* ------------------------------------------------------------ label table */
.m-labels-wrap { border-top: 1px solid var(--rule); overflow-x: auto; }
.m-labels { width: 100%; margin-top: 0; font-size: .9rem; }
.m-labels th { padding-top: .8rem; padding-bottom: .55rem; }
.m-labels td { padding: 1.15rem 1.3rem 1.15rem 0; vertical-align: top; }
.m-labels tr:target { background: var(--wash); }
.m-labels tr:target .m-code { color: var(--ink); }

.m-lab { white-space: nowrap; }
.m-lab .chip { display: block; margin-bottom: .45rem; }
.m-code {
  display: block; font-size: 10.5px; color: var(--muted);
  letter-spacing: .04em;
}
.m-st { white-space: nowrap; }
.m-mean { min-width: 26rem; }
.m-mean p { margin: 0; color: var(--ink-2); line-height: 1.62; max-width: 58ch; }
.m-seen {
  font: 400 11.5px/1.5 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Runs the full section width as one continuous paragraph rather than a narrow
   measure, so it reads as a closing note on the table above it. */
.m-after {
  max-width: none; margin: 1.8rem 0 0; color: var(--ink-2);
  font-size: .945rem; line-height: 1.72; text-wrap: pretty;
}
.m-after .chip { vertical-align: baseline; }

/* -------------------------------------------------------------- stat rules */
.m-rule {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr);
  gap: 1.4rem 2.4rem; align-items: start;
  padding: 1.7rem 0; border-top: 1px solid var(--rule);
}
.m-rule:last-of-type { border-bottom: 1px solid var(--rule); }
.m-rule-h {
  grid-column: 1; margin: 0;
  font: 400 1.16rem/1.32 var(--serif); letter-spacing: -.01em;
}
.m-expr {
  grid-column: 1; margin-top: -.7rem;
  font-size: 11.5px; line-height: 1.6; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding: .5rem .6rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 6px;
}
.m-rule-b { grid-column: 2; grid-row: 1 / span 2; }
.m-rule-b p { margin: 0 0 .8rem; color: var(--ink-2); font-size: .965rem; line-height: 1.68; max-width: 64ch; }
.m-rule-b p:last-child { margin-bottom: 0; }
.m-rule-b em { font-style: normal; font-weight: 500; color: var(--ink); }

.m-work { grid-column: 2; margin-top: .4rem; }
.m-work-h {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.m-work .m-mini { margin-top: .5rem; max-width: 34rem; }

.m-flag {
  margin: 1rem 0 0 !important; max-width: 64ch;
  padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--rule); border-left: 2px solid var(--ink);
  border-radius: 0 7px 7px 0;
  font-size: .93rem !important;
}
.m-flag b { font-weight: 600; color: var(--ink); }

.m-flips { margin: .3rem 0 0; padding-left: 1.1rem; max-width: 64ch; }
.m-flips li {
  color: var(--ink-2); font-size: .91rem; line-height: 2;
  margin-bottom: .2rem;
}
.m-flips .mono { color: var(--ink); }
.m-flips .chip { vertical-align: baseline; margin: 0 .1rem; }

/* ---------------------------------------------------------------- glossary */
.m-defs {
  margin: 0; border-top: 1px solid var(--rule);
  columns: 2; column-gap: 3.2rem;
}
.m-def {
  break-inside: avoid; padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.m-def dt {
  font: 500 13px/1.3 var(--mono); color: var(--ink);
  letter-spacing: .01em; margin-bottom: .4rem;
}
.m-def dd {
  margin: 0; color: var(--ink-2); font-size: .925rem; line-height: 1.65;
}
.m-def dd em { font-style: normal; font-weight: 500; color: var(--ink); }
.m-def:target { background: var(--wash); box-shadow: -.7rem 0 0 var(--wash), .7rem 0 0 var(--wash); }
.m-alias { display: block; height: 0; overflow: hidden; }

/* -------------------------------------------------------------- provenance */
.m-prov {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem 3.2rem; border-top: 1px solid var(--rule); padding-top: 1.6rem;
}
.m-meta { width: 100%; margin-top: 0; font-size: .89rem; }
.m-meta th {
  font: 400 11px/1.45 var(--sans); color: var(--ink-2);
  text-transform: none; letter-spacing: 0; font-size: .89rem;
  padding-right: 1.5rem; width: 60%;
}
.m-meta td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

.m-prov-r h3 {
  font: 400 11px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 .8rem;
}
.m-prov-r h3 + p, .m-prov-r h3 + ul { margin-top: 0; }
.m-prov-r p { color: var(--ink-2); font-size: .94rem; line-height: 1.68; max-width: 52ch; margin: 0; }
.m-prov-r p a { color: var(--s1); text-decoration: none; }
.m-prov-r p a:hover { text-decoration: underline; }
.m-prov-r > h3:nth-of-type(2) { margin-top: 2rem; }
.m-agents { list-style: none; margin: 0 0 0; padding: 0; }
.m-agents li {
  font-size: 12px; padding: .42rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.m-agents li:first-child { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------- limitations */
.m-limits {
  list-style: none; margin: 0; padding: 0;
  counter-reset: lim; border-top: 1px solid var(--rule);
}
.m-limits > li {
  counter-increment: lim;
  display: grid; grid-template-columns: 3.5rem minmax(0, 66ch);
  gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
}
.m-limits > li::before {
  content: counter(lim, decimal-leading-zero);
  font: 400 12px/1.9 var(--mono); color: var(--axis);
  font-variant-numeric: tabular-nums; text-align: right;
}
/* Pin both children to column 2. Without this the <p> auto-places into the next
   row's column 1 — the 3.5rem counter column — and wraps one word per line. */
.m-limits > li > * { grid-column: 2; }
.m-limits h3 {
  margin: 0 0 .45rem;
  font: 500 .995rem/1.4 var(--sans); color: var(--ink);
}
.m-limits p { margin: 0; color: var(--ink-2); font-size: .945rem; line-height: 1.68; }
.m-limits .mono { color: var(--ink); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .m-open { grid-template-columns: 1fr; }
  .m-rule { grid-template-columns: 1fr; gap: .8rem; }
  .m-rule-h, .m-expr, .m-rule-b, .m-work { grid-column: 1; }
  .m-rule-b { grid-row: auto; }
  .m-expr { margin-top: 0; }
  .m-defs { columns: 1; }
  .m-prov { grid-template-columns: 1fr; }
  .m-meta th { width: auto; }
  .m-step, .m-limits > li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .9rem; }
  .m-step-n { font-size: 1.5rem; }
  .m-mean { min-width: 20rem; }
}
@media print {
  .m-toc { display: none; }
  .m-defs { columns: 2; }
}


/* ---- results.css ---- */
/* Results — page-specific rules only.
   Shared type, colour slots, hairlines, .dp-track/.dp-ci/.dp-pt marks, .legend,
   .dt tables and .tableview all come from editorial.css and are not restated
   here. Everything below is prefixed rs- except three deliberate overrides of
   shared components used in a new context. */

/* ------------------------------------------------------------------- lede */
.rs-lede {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem;
  padding: clamp(2.4rem, 6vh, 4.5rem) 0 clamp(2rem, 4vh, 3rem);
  align-items: start;
}
.rs-lede-l { min-width: 0; }
.rs-lede h1 { max-width: 26ch; }
.rs-lede .lede { margin-bottom: 1.6rem; }

.rs-notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rs-notes li {
  font-size: .9rem; line-height: 1.55; color: var(--ink-2);
  padding: .8rem 0 .8rem 1.5rem; border-bottom: 1px solid var(--rule);
  max-width: 58ch; position: relative;
}
.rs-notes li::before {
  content: ""; position: absolute; left: 0; top: 1.28rem;
  width: 7px; height: 7px; border-radius: 2px; background: var(--axis);
}
.rs-notes b { color: var(--ink); font-weight: 500; }

/* Tiles in a 2x2 figure: the shared full-bleed first tile is not wanted here. */
.rs-tiles {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.rs-tiles .tile:first-child { grid-column: auto; }
.rs-tiles .tile:first-child .tile-v { font-size: 2.05rem; }

/* -------------------------------------------------------------- mark key */
.rs-key {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  padding-bottom: 1rem;
}
.rs-key-i {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 400 11.5px/1 var(--mono); color: var(--ink-2);
  letter-spacing: .02em;
}
.rs-key-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--s1);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ring); flex: none;
}
.rs-key-bar {
  width: 26px; height: 2px; border-radius: 2px; background: var(--axis); flex: none;
}
.rs-key-t { color: var(--muted); }

/* --------------------------------------------------------------- the board */
.rs-board { border-top: 1px solid var(--rule); }
.rs-bhead, .rs-row {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr) 6.5rem 5rem 6rem;
  gap: 1.25rem; align-items: center;
}
/* Match the dot plot: keep figures off the edge, inset the hover band. */
.rs-bhead { padding: .6rem .9rem; border-bottom: 1px solid var(--rule); }
.rs-hk {
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.rs-hk.rs-r { text-align: right; }

.rs-row { padding: 1.1rem .9rem 1rem; border-bottom: 1px solid var(--rule); }
.rs-row:hover { background: var(--wash); }

.rs-lab { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.rs-agent { font: 500 13.5px/1.2 var(--sans); }
.rs-model { font: 400 11.5px/1.2 var(--mono); color: var(--muted); }
.rs-tier {
  margin-top: .25rem; font: 500 9.5px/1 var(--mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .09em;
  background: var(--wash); border: 1px solid var(--rule);
  border-radius: 4px; padding: .32em .45em; white-space: nowrap; cursor: help;
}

.rs-track { min-width: 0; }
/* Held-back rows read as an unfilled dot: a shape difference, not a hue. */
.rs-row[data-tier="preview"] .dp-pt {
  background: var(--surface); border: 2.5px solid var(--s1);
}
.rs-row[data-tier="preview"] .dp-ci { opacity: .7; }

.rs-val { text-align: right; }
.rs-p1 { font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.rs-ci {
  display: block; margin-top: .22rem;
  font: 400 10.5px/1.3 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rs-n, .rs-tasks {
  text-align: right; font: 400 12.5px/1.3 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rs-n span, .rs-tasks span { color: var(--muted); }

/* --------------------------------------------------- outcome mix per row */
.rs-bar-cell { grid-column: 2 / -1; margin-top: .55rem; min-width: 0; }
.rs-obar { display: flex; gap: 2px; height: 18px; }
.rs-seg {
  position: relative; min-width: 3px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: help; transition: filter .15s;
}
.rs-seg:hover { filter: brightness(1.06); }
.rs-seg-in {
  font: 500 10px/1 var(--sans); font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); padding: 0 .2rem;
}
.rs-tags { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .5rem; }
.rs-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 400 11px/1.2 var(--sans); color: var(--ink-2);
}
.rs-tag i {
  width: 8px; height: 8px; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px var(--ring);
}
.rs-tag b {
  font: 500 11px/1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rs-legend-wrap { margin-top: 1.6rem; }
.rs-lg-h {
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .8rem;
}
.rs-legend .lg { cursor: help; }
.rs-fn {
  font-size: .84rem; line-height: 1.55; color: var(--muted);
  max-width: 74ch; margin: 1rem 0 0;
}

/* ------------------------------------------------------- category boards */
.rs-cats { border-top: 1px solid var(--rule); }
.rs-cat { border-bottom: 1px solid var(--rule); }
.rs-cat > summary {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .85rem 0; cursor: pointer; list-style: none;
}
.rs-cat > summary::-webkit-details-marker { display: none; }
.rs-cat > summary::before {
  content: "+"; font: 400 13px/1 var(--mono); color: var(--muted);
  width: 1ch; flex: none;
}
.rs-cat[open] > summary::before { content: "\2212"; color: var(--ink); }
.rs-cat > summary:hover { background: var(--wash); }
.rs-cat-n { font: 500 13.5px/1.25 var(--sans); }
.rs-cat-m {
  margin-left: auto; font: 400 11.5px/1 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rs-cat-m b { font-weight: 500; color: var(--ink); }
.rs-cat-body { padding: .2rem 0 1.6rem 1.7rem; }
.rs-cat-b {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  max-width: 76ch; margin: 0 0 1.1rem;
}

/* Compact variant: sub-boards carry fewer columns and thinner rows. */
.rs-board-c { border-top: 0; }
.rs-board-c .rs-bhead { padding-top: 0; }
.rs-board-c .rs-row { padding: .85rem .9rem .75rem; }
.rs-board-c .rs-row:last-child { border-bottom: 0; }
.rs-board-c .rs-obar { height: 12px; }
.rs-board-c .rs-tags { font-size: 10.5px; gap: .25rem .9rem; }

/* ---------------------------------------------------------- category matrix */
.rs-scroll {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); padding: .2rem 1rem .6rem;
}
.rs-cap {
  caption-side: top; text-align: left;
  font-size: .84rem; color: var(--muted); padding: .9rem .2rem .6rem;
  max-width: 70ch;
}
.rs-matrix { width: 100%; }
.rs-matrix th, .rs-matrix td { padding: .5rem .85rem .5rem 0; white-space: nowrap; }
.rs-matrix th:last-child, .rs-matrix td:last-child { padding-right: .9rem; }
.rs-matrix th:first-child, .rs-matrix td:first-child { padding-left: .9rem; }
.rs-matrix tbody tr:hover { background: var(--wash); }
.rs-matrix tfoot th, .rs-matrix tfoot td {
  border-top: 1px solid var(--axis); border-bottom: 0; padding-top: .7rem;
}
.rs-ath {
  text-align: right !important; vertical-align: bottom;
  padding-left: .6rem !important;
}
.rs-ath span {
  display: block; font: 400 9.5px/1.3 var(--mono); color: var(--muted);
  text-transform: none; letter-spacing: .02em;
}
.rs-ath b {
  font: 500 10.5px/1.3 var(--mono); color: var(--ink-2);
  text-transform: none; letter-spacing: 0;
}
.rs-mrow {
  font: 400 12.5px/1.3 var(--sans) !important; color: var(--ink);
  text-transform: none !important; letter-spacing: 0 !important;
  white-space: nowrap;
}
.rs-mrow .cat-st { margin-left: .5rem; }
.rs-mph { text-align: left !important; min-width: 9rem; }
.rs-mp { min-width: 9rem; }
.rs-meter {
  display: block; height: 4px; width: 5.5rem; background: var(--rule);
  border-radius: 4px; overflow: hidden; margin-bottom: .3rem;
}
.rs-meter i { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
.rs-mp-v {
  font: 500 12px/1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Every body/foot cell must share the headers' right alignment. Cells holding
   only an em-dash carry no .rs-cell class, so without this they fall back to
   left-aligned and the column reads crooked against its own header. */
.rs-matrix tbody td, .rs-matrix tfoot td { text-align: right; }
.rs-matrix .rs-mrow, .rs-matrix .rs-mph { text-align: left !important; }
.rs-cell { text-align: right; vertical-align: middle; }
.rs-cell-p {
  display: block; font: 500 12px/1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rs-cell-kn {
  display: block; margin-top: .2rem;
  font: 400 10px/1 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rs-none { color: var(--axis); font-family: var(--mono); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .rs-lede { grid-template-columns: 1fr; gap: 2.4rem; }
  .rs-bhead, .rs-row { grid-template-columns: 10rem minmax(0, 1fr) 5.5rem 4rem; }
  .rs-bhead .rs-hk:last-child, .rs-tasks { display: none; }
}
@media (max-width: 720px) {
  .rs-bhead { grid-template-columns: 1fr; }
  .rs-bhead .dp-axis, .rs-bhead .rs-hk.rs-r { display: none; }
  .rs-row { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .55rem 1rem; }
  .rs-lab { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
  .rs-track { grid-column: 1 / 2; }
  .rs-val { grid-column: 2 / 3; }
  .rs-bar-cell { grid-column: 1 / -1; }
  .rs-n { display: none; }
  .rs-cat-m { margin-left: 0; flex-basis: 100%; }
  .rs-cat-body { padding-left: 0; }
}
@media (max-width: 560px) {
  .rs-tiles { grid-template-columns: 1fr; }
}


/* ---- tasks.css ---- */
/* Tasks page — page-specific rules only.
   Everything structural (.band, .sec-head, .catgrid, .cat, .cat-bar, .cat-st,
   .tw, .runs, .chip, .filters, .tile) comes from editorial.css and is reused as
   is. What is added here is the anatomy grid, the category figure rail, the
   per-task pass@1 bar, the continuous-score treatment, and the sticky filter. */

/* ------------------------------------------------------- anatomy of a task */
.ts-anat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0 2rem; border-top: 1px solid var(--rule);
}
.ts-anat-i { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--rule); }
.ts-anat-k {
  font: 500 10.5px/1.4 var(--mono); color: var(--ink);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem;
}
.ts-anat-k::before { content: "— "; color: var(--axis); }
.ts-anat-i p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }

/* Footnote voice: used for the pass@1 definition and the continuous-score note. */
.ts-note {
  max-width: 68ch; margin: 1.4rem 0 0;
  font-size: .85rem; line-height: 1.6; color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: .85rem;
}
.ts-note b { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }

/* ------------------------------------------------------------- jump nav */
.catgrid.ts-jump { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.ts-jump .cat { padding-bottom: 1.05rem; }
.ts-jump .cat-meta { margin-top: .6rem; }
.ts-jump .cat:focus-visible { outline: 2px solid var(--s1); outline-offset: -2px; }

/* A track with no fill: the category is scored continuously, so a resolve-rate
   bar has nothing to draw. Never render an empty bar as if it meant zero. */
.ts-bar-na {
  background: transparent;
  border: 1px dashed var(--axis); height: 5px; box-sizing: border-box;
}

/* --------------------------------------------------------- filter (sticky) */
.ts-filter {
  position: sticky; top: 3.9rem; z-index: 25;
  margin-bottom: 0; padding: .7rem 0 .75rem;
  background: color-mix(in srgb, var(--plane) 90%, transparent);
  backdrop-filter: blur(8px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
}
.ts-filter input { flex: 1 1 20rem; max-width: 26rem; }
.ts-none { margin: 0; }

/* ----------------------------------------------------- category sections */
.ts-sec { scroll-margin-top: 8.5rem; }
.ts-sec .sec-head { margin-bottom: 1.5rem; max-width: 66ch; }
.ts-sec-h2 { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.ts-sec-h2 .cat-st { transform: translateY(-.18em); }
.ts-sec-f {
  font: 400 11px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
/* Filtered down to nothing: keep the heading as a place-marker, drop the bulk. */
.ts-sec.ts-thin .ts-tw, .ts-sec.ts-thin .ts-fig { display: none; }
.ts-sec.ts-thin { padding-bottom: 1.5rem; }

/* figure rail: counts on the left, one-hue resolve bar filling the rest */
.ts-fig {
  display: flex; align-items: center; gap: 1.9rem; flex-wrap: wrap;
  padding: .8rem 0 .95rem; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); margin-bottom: 1.25rem;
}
.ts-fig-i { display: flex; align-items: baseline; gap: .45rem; }
.ts-fig-v {
  font: 500 15px/1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ts-fig-k {
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.ts-fig-bar {
  flex: 1 1 15rem; display: flex; align-items: center; gap: .8rem; min-width: 12rem;
}
.ts-fig-bar .cat-bar { flex: 1 1 auto; }
.ts-fig-lab { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }

/* -------------------------------------------------------- per-task table */
/* An index, not a log: show every row instead of a 30rem scroll window. */
.ts-tw { max-height: none; }
.ts-t td { padding-top: .55rem; padding-bottom: .55rem; }
.ts-t .t-task { width: 40%; }
.ts-t th.num, .ts-t td.num { font-variant-numeric: tabular-nums; }
/* The task link is this page's primary affordance, so it is always visible. */
.ts-t .t-go { width: 1%; white-space: nowrap; }
.ts-t .t-go a { opacity: 1; color: var(--ink-2); }
.ts-t tbody tr:hover .t-go a, .ts-t .t-go a:focus-visible { color: var(--s1); }

/* pass@1: a single-hue magnitude bar with the number always spelled out */
.ts-p1 { display: inline-flex; align-items: center; gap: .6rem; justify-content: flex-end; }
.ts-p1bar {
  width: 68px; height: 4px; flex: none;
  background: var(--rule); border-radius: 3px; overflow: hidden;
}
.ts-p1bar > span { display: block; height: 100%; background: var(--s1); border-radius: 3px; }
.ts-p1n { font-size: .8rem; color: var(--ink); min-width: 3.4rem; text-align: right; }

/* continuous score: no bar, and the unit is stated in words next to it */
.ts-score { font-size: .85rem; font-weight: 500; color: var(--ink); }
.ts-unit {
  font: 400 9.5px/1 var(--mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .09em;
  background: var(--wash); border-radius: 4px; padding: .35em .45em;
}
.ts-flag {
  font: 400 9.5px/1 var(--mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .09em;
  border: 1px dashed var(--axis); border-radius: 4px;
  padding: .3em .4em; margin-left: .55rem; white-space: nowrap;
}
.ts-sec-empty { padding: 1rem 0 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {
  .ts-t .ts-runs-col, .ts-fig-lab { display: none; }
  .ts-t .t-task { width: auto; }
  .ts-fig { gap: 1.2rem; }
}
@media (max-width: 620px) {
  .ts-p1bar { display: none; }
  .ts-filter { top: 3.4rem; }
  .ts-sec { scroll-margin-top: 7rem; }
}