/* docs/REDESIGN.md §4 — green-biased neutrals, emerald identity.
   --accent is the text/glow accent; --mark is the (palette-validated) data-ink
   for chart marks, meter fills and score bars — on dark, the brand #34d399 is
   too light to sit on the surface as a mark, so the two are separate tokens. */
:root{
  color-scheme:dark;
  --bg:#0a0f0d; --panel:#121a16; --fg:#e9f1ec; --dim:#93a69c; --muted:#66786f;
  --border:rgba(233,241,236,.09); --border-strong:rgba(233,241,236,.2);
  --accent:#34d399; --accent-weak:rgba(27,175,122,.13);
  --mark:#1baf7a; --track:#1c352a;
  --code:#0e1511; --danger:#e05252; --warn:#fab219;
  --btn-ink:#04231a; --radius:12px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* The theme script always sets data-theme, so the light palette hangs off the
   attribute; the media query only covers the no-JS fallback. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f8f5; --panel:#ffffff; --fg:#14201a; --dim:#5c6f65; --muted:#84958b;
  --border:rgba(20,32,26,.11); --border-strong:rgba(20,32,26,.2);
  --accent:#0b7a56; --accent-weak:rgba(13,138,96,.10);
  --mark:#0d8a60; --track:#cde9dc;
  --code:#eef4ef; --danger:#b52f2f; --warn:#a36a00;
  --btn-ink:#ffffff;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f4f8f5; --panel:#ffffff; --fg:#14201a; --dim:#5c6f65; --muted:#84958b;
    --border:rgba(20,32,26,.11); --border-strong:rgba(20,32,26,.2);
    --accent:#0b7a56; --accent-weak:rgba(13,138,96,.10);
    --mark:#0d8a60; --track:#cde9dc;
    --code:#eef4ef; --danger:#b52f2f; --warn:#a36a00;
    --btn-ink:#ffffff;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15.5px/1.65 var(--sans);
  display:flex;flex-direction:column;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
code,pre,kbd{font-family:var(--mono)}
h1,h2,h3{line-height:1.2;font-weight:700;text-wrap:balance}
h1{font-size:1.8rem;margin:.2rem 0 1rem;letter-spacing:-.015em}
h2{font-size:1.25rem;margin:2.2rem 0 .7rem;padding-bottom:.35rem;border-bottom:1px solid var(--border)}
h3{font-size:1rem;margin:1.4rem 0 .4rem;color:var(--fg)}
p{margin:.6rem 0}
.muted,.dim{color:var(--dim)}
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* top bar */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1.4rem;
  padding:.75rem 1.25rem;background:color-mix(in srgb,var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--fg);font-weight:700;
  letter-spacing:.01em;font-size:1.08rem}
.brand svg{color:var(--dim)}
.brand:hover{text-decoration:none}
.mainnav{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
.mainnav a{color:var(--dim);padding:.4rem .8rem;border-radius:8px;font-size:.9rem;font-weight:550}
.mainnav a:hover{color:var(--fg);background:var(--panel);text-decoration:none}
.mainnav a.on{color:var(--accent);background:var(--accent-weak)}
/* who-am-I corner (M28-1) */
.mainnav .signin{color:var(--accent);font-weight:600}
.whoami{display:inline-flex;align-items:center;gap:.5rem;margin-left:.4rem;
  border:1px solid var(--border);border-radius:999px;padding:.2rem .3rem .2rem .8rem;font-size:.82rem;color:var(--dim)}
.whoami .who-email{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);font-weight:600}
.whoami .who-dot{display:none;color:var(--mark)}
.whoami form{display:inline;margin:0}
.whoami .signout{background:transparent;border:1px solid var(--border);color:var(--dim);
  border-radius:999px;padding:.2rem .7rem;font:inherit;font-size:.8rem;cursor:pointer}
.whoami .signout:hover{color:var(--fg);border-color:var(--mark);filter:none}
@media(max-width:640px){.whoami .who-email{display:none}.whoami .who-dot{display:inline}}
.theme-toggle{background:none;border:1px solid var(--border-strong);color:var(--dim);
  width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:1rem;line-height:1;
  padding:0;margin-left:.4rem;flex:none}
.theme-toggle:hover{color:var(--fg);border-color:var(--muted);filter:none;background:var(--panel)}

/* main containers */
main{flex:1;width:100%;margin:0 auto;padding:1.75rem 1.25rem}
main.narrow{max-width:62rem}
main.wide{max-width:78rem}

/* tables */
table{border-collapse:collapse;width:100%;margin:.4rem 0;font-size:.92rem}
th,td{text-align:left;padding:.6rem .9rem;border-bottom:1px solid var(--border);
  white-space:nowrap}
thead th{color:var(--muted);font:600 10.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:color-mix(in srgb,var(--panel) 55%, transparent)}
.rank-1 td{font-weight:650}
tr.me td{background:var(--accent-weak)}
td.num,th.num{font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.scroll table{margin:0}
.scorebar{display:inline-flex;align-items:center;gap:.6rem}
.scorebar .bt{width:120px;height:8px;border-radius:4px;background:var(--track);overflow:hidden;flex:none}
.scorebar .bt i{display:block;height:100%;background:var(--mark);border-radius:4px}
.scorebar.fall .bt i{background:var(--warn)}

/* cards / panels */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem 1.25rem;margin:1rem 0}
.lede{color:var(--dim);font-size:1.05rem;max-width:44rem}

/* one-paste panel + icon copy button (src/web/paste.ts) */
.panel{position:relative;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem 3.2rem 1rem 1.1rem;margin:1rem 0}
.panel pre{margin:0;white-space:pre-wrap;background:none;border:0;padding:0}
.copybtn{position:absolute;top:.55rem;right:.55rem;width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer}
.copybtn:hover{color:var(--fg);border-color:var(--border-strong);background:var(--bg)}
.copybtn.ok{color:var(--mark);border-color:var(--mark)}

/* copy-hero paste card (M20-2): dashed data-ink border, enlarged corner button */
.copycard{border:1px dashed var(--mark);margin-top:1.15rem}
.copybtn.hero{width:auto;height:auto;top:-1.05rem;right:1rem;display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1.25rem;font:inherit;font-weight:700;font-size:.95rem;color:var(--btn-ink);
  background:var(--accent);border:1px solid transparent;border-radius:10px;
  box-shadow:0 6px 18px var(--accent-weak)}
.copybtn.hero:hover{filter:brightness(1.07);color:var(--btn-ink);background:var(--accent)}
.copybtn.hero.ok{color:var(--btn-ink);border-color:transparent}

/* CSS-only radio tabs (src/web/tabs.ts, M17-1) — panels selected purely by
   :checked; keyboard = arrow keys on the hidden radios, ring on the label */
.tabs{margin:1rem 0}
.tabs>input{position:absolute;opacity:0;pointer-events:none}
.tabs .tabbar{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:1px solid var(--border)}
.tabs .tabbar label{padding:.45rem .9rem;border:1px solid transparent;border-bottom:0;
  border-radius:8px 8px 0 0;color:var(--muted);cursor:pointer;font-weight:600;font-size:.9rem}
.tabs .tabbar label:hover{color:var(--fg)}
.tabs .tabpanel{display:none;padding-top:.9rem}
.tabs>input:nth-of-type(1):checked~.tabbar .tl1{color:var(--accent);background:var(--panel);border-color:var(--border)}
.tabs>input:nth-of-type(1):checked~.tp1{display:block}
.tabs>input:nth-of-type(1):focus-visible~.tabbar .tl1{outline:2px solid var(--accent);outline-offset:2px}
.tabs>input:nth-of-type(2):checked~.tabbar .tl2{color:var(--accent);background:var(--panel);border-color:var(--border)}
.tabs>input:nth-of-type(2):checked~.tp2{display:block}
.tabs>input:nth-of-type(2):focus-visible~.tabbar .tl2{outline:2px solid var(--accent);outline-offset:2px}
.tabs>input:nth-of-type(3):checked~.tabbar .tl3{color:var(--accent);background:var(--panel);border-color:var(--border)}
.tabs>input:nth-of-type(3):checked~.tp3{display:block}
.tabs>input:nth-of-type(3):focus-visible~.tabbar .tl3{outline:2px solid var(--accent);outline-offset:2px}
.tabs>input:nth-of-type(4):checked~.tabbar .tl4{color:var(--accent);background:var(--panel);border-color:var(--border)}
.tabs>input:nth-of-type(4):checked~.tp4{display:block}
.tabs>input:nth-of-type(4):focus-visible~.tabbar .tl4{outline:2px solid var(--accent);outline-offset:2px}
.tabs>input:nth-of-type(5):checked~.tabbar .tl5{color:var(--accent);background:var(--panel);border-color:var(--border)}
.tabs>input:nth-of-type(5):checked~.tp5{display:block}
.tabs>input:nth-of-type(5):focus-visible~.tabbar .tl5{outline:2px solid var(--accent);outline-offset:2px}
.tabs>input:nth-of-type(6):checked~.tabbar .tl6{color:var(--accent);background:var(--panel);border-color:var(--border)}
.tabs>input:nth-of-type(6):checked~.tp6{display:block}
.tabs>input:nth-of-type(6):focus-visible~.tabbar .tl6{outline:2px solid var(--accent);outline-offset:2px}

/* methodology sample-figure row (src/web/methodology.ts, M17-3) */
.figrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;align-items:start;margin:1rem 0}
.figrow figure{margin:0}
.figrow figcaption{color:var(--dim);font-size:.88rem;margin-top:.4rem}
.figmeters{display:grid;gap:.55rem}
.figmeters .tile{padding:.55rem .8rem}
.figmeters .tile-value{font-size:1.15rem;margin:.1rem 0}

/* numbered guide steps + transcript figure (src/web/guide.ts, M17-2) —
   roomy vertical bands: big step badge, no h2 rule, generous rhythm */
section.step{margin:0;padding:2.6rem 0;border-bottom:1px solid var(--border)}
section.step:last-of-type{border-bottom:0}
section.step>h2{border-bottom:0;display:flex;align-items:center;gap:.9rem;
  font-size:1.4rem;margin:0 0 .6rem;padding-bottom:0}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:var(--accent-weak);color:var(--accent);border:1px solid var(--border-strong);
  font:650 17px var(--mono);flex:none}
.section-desc{color:var(--dim);font-size:1rem;margin:.4rem 0 1.2rem}
.flow{background:var(--code);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.5rem;margin:1.2rem 0;font:12.5px/1.9 var(--mono);overflow-x:auto}
.flow .req{color:var(--fg)}
.flow .res{color:var(--accent)}
.flow .dim{color:var(--muted)}
.flow .note{color:var(--dim);font-style:italic;margin-top:.3rem}

/* "?" info icon with a CSS-only tooltip (hover or keyboard focus — no JS) */
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;border:1px solid var(--border-strong);
  color:var(--muted);font:600 11px/1 var(--mono);cursor:help;vertical-align:.15em;
  -webkit-user-select:none;user-select:none}
.info>.tip{visibility:hidden;opacity:0;position:absolute;bottom:135%;left:50%;
  transform:translateX(-50%);width:min(340px,78vw);background:var(--panel);
  border:1px solid var(--border-strong);border-radius:var(--radius);padding:.6rem .85rem;
  font:400 .85rem/1.55 var(--sans);color:var(--fg);text-align:left;z-index:6;
  box-shadow:0 6px 24px rgba(0,0,0,.25);transition:opacity .12s;pointer-events:none}
.info:hover>.tip,.info:focus>.tip,.info:focus-within>.tip{visibility:visible;opacity:1;pointer-events:auto}

/* stat tiles (agent scorecard) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;margin:1.1rem 0}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.tile-label{color:var(--muted);font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tile-value{font-size:1.7rem;font-weight:650;margin:.3rem 0 .1rem}
.tile-sub{color:var(--dim);font-size:.85rem}

/* meters (axis tiles with a fill bar — docs/REDESIGN.md §3) */
.meter .bar{height:6px;border-radius:4px;background:var(--track);margin:.55rem 0 .45rem;overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:4px;background:var(--mark)}
.tile-value .unit{font-size:.95rem;color:var(--dim);font-weight:550}

/* capability chips (icon + label, never color alone) */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.32em .75em;border-radius:999px;
  font-size:.85rem;font-weight:550;border:1px solid var(--border);background:var(--panel)}
.chip .k{font-weight:800}
.chip.ok .k{color:var(--accent)}
.chip.na{color:var(--muted)}
.chip.na .k{color:var(--muted)}
.chip.fail{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%, transparent)}
.chip.fail .k{color:var(--warn)}

/* journey strip (M20-1): Paste → Run → Read funnel indicator */
.journey{display:flex;align-items:flex-start;justify-content:center;margin:.4rem 0 1.4rem}
.jstep{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:6.4rem}
.jdot{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:.95rem;border:2px solid var(--border);color:var(--dim);background:var(--panel)}
.jlbl{font-size:.75rem;letter-spacing:.05em;color:var(--dim)}
.jstep.on .jdot{border-color:var(--accent);color:var(--btn-ink);background:var(--accent)}
.jstep.on .jlbl{color:var(--fg);font-weight:600}
.jstep.done .jdot{border-color:var(--mark);color:var(--mark)}
.jbar{height:2px;width:4.2rem;background:var(--border);margin-top:1.15rem}
.jbar.done{background:var(--mark)}

/* in-progress picture (M20-3): dimmed dial + compact task-progress chips */
.gdial.pending{opacity:.7}
.chips.prog{justify-content:center}
.chips.prog .chip{width:2.1rem;justify-content:center;padding:.32em 0;border-radius:8px}
.chip.cur .k{color:var(--accent);animation:gprog-pulse 1.2s ease-in-out infinite}
@keyframes gprog-pulse{50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.chip.cur .k{animation:none}}

/* roster mini-dial cards (M20-6) */
.agentgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.9rem;margin:1rem 0}
.agentcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem;text-align:center;display:flex;flex-direction:column;justify-content:center}
.agentcard:hover{border-color:var(--mark)}
.agentcard .body{display:block;color:var(--fg);text-decoration:none}
.agentcard .nm{display:block;font-weight:700;margin-top:.4rem}
.agentcard .sub{display:block;color:var(--dim);font-size:.85rem}
.agentcard .foot{margin-top:.5rem;font-size:.85rem}
.agentcard.new{border-style:dashed;color:var(--dim);text-decoration:none;min-height:9rem}
.agentcard.new .plus{font-size:2.4rem;line-height:1.1}
.agentcard.new .nm{color:var(--dim)}
.gdial.mini{max-width:120px;margin:0 auto;display:block}

/* launcher (M27-1): agent chip + suite-picker cards */
.agchip{display:inline-flex;align-items:center;gap:.45rem;background:var(--panel);
  border:1px solid var(--border);border-radius:999px;padding:.3rem .9rem;font-size:.88rem;color:var(--dim)}
.agchip strong{color:var(--fg)}
.scards{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;text-align:left;margin:.6rem 0}
.scard{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:.85rem 1rem;display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;position:relative}
.scard.wide{grid-column:1/-1}
.scard input{width:auto;margin:.2rem 0 0;flex:none}
.scard .tx{flex:1}
.scard b{display:block;font-size:.95rem}
.scard small{color:var(--dim);font-size:.84rem;line-height:1.45;display:block;margin-top:.1rem}
.scard .cnt{margin-left:auto;flex:none;font:600 11px/1.7 var(--mono);color:var(--dim);
  border:1px solid var(--border);border-radius:999px;padding:.1em .7em;white-space:nowrap}
.scard:has(input:checked){border-color:var(--accent);background:var(--accent-weak)}
/* launcher sections (M29-2) */
.scardgroup{margin:1.1rem 0 0}
.scardgroup h3{margin:0;font-size:.95rem}
.scardgroup .glede{margin:.1rem 0 .4rem;color:var(--dim);font-size:.85rem}
.scardsub{margin:.6rem 0 .3rem;font:600 11px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.scards{grid-template-columns:1fr}}
.liverun{margin:1rem 0 1.4rem}
/* speed-test time hero (M29-4) */
.timehero{display:flex;align-items:baseline;justify-content:center;gap:.9rem;margin:.6rem 0 0}
.timehero .t{font:800 3.2rem/1.1 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}

/* leaderboard hub suite cards with top-3 medal bars (M20-6) */
.suitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.9rem;margin:1rem 0}
.suitecard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.suitecard .sid{display:block;font-weight:700;margin-bottom:.55rem}
.suitecard .more{display:block;font-size:.85rem;margin-top:.55rem}
.top3row{display:flex;align-items:center;gap:.5rem;margin:.3rem 0;font-size:.88rem}
.top3row .tname{flex:0 0 7.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top3row .tbar{flex:1;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.top3row .tbar i{display:block;height:100%;background:var(--mark);border-radius:4px}
.top3row .tnum{flex:none;font-weight:650;font-variant-numeric:tabular-nums}

/* readiness hub cards: keyword-first, dimmed question tail (M22-1) */
.check .qtail{color:var(--dim);font-weight:500}

/* verdict-first done readout (M20-4) */
.herostack{text-align:center}
.herostack .gdial{max-width:300px}
.verdict{text-align:center;font-size:1.3rem;margin:.2rem 0 .4rem}
.verdict em{color:var(--accent);font-style:normal;font-weight:750}
.claimrow{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;align-items:center;margin:1.2rem 0 .3rem}
.claimnote{text-align:center;max-width:46rem;margin:.2rem auto 1rem}

/* code */
pre{background:var(--code);border:1px solid var(--border);border-radius:var(--radius);
  padding:.9rem 1rem;overflow-x:auto;font-size:.86rem;line-height:1.5}
:not(pre)>code{background:var(--accent-weak);color:var(--accent);
  padding:.08em .38em;border-radius:5px;font-size:.88em}
pre code{background:none;color:inherit;padding:0}
blockquote{margin:.8rem 0;padding:.5rem 1rem;border-left:3px solid var(--accent);
  background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;color:var(--dim)}

/* pills */
.pill{display:inline-block;padding:.18em .7em;border-radius:999px;font:600 11px/1.7 var(--mono);
  letter-spacing:.06em;border:1px solid var(--border);color:var(--dim);background:var(--panel)}
.pill.accent,.pill.ok{color:var(--accent);border-color:transparent;background:var(--accent-weak)}

/* forms (register) */
form label{display:block;margin:.9rem 0;font-weight:550}
input,textarea,select{width:100%;margin-top:.3rem;padding:.55rem .7rem;font:inherit;
  color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:8px}
input:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
fieldset{margin:1.1rem 0;border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1rem}
legend{padding:0 .4rem;color:var(--muted);font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.12em}
.chk{display:inline-flex;align-items:center;gap:.4rem;width:auto;margin:.3rem 1rem .3rem 0;font-weight:400}
.chk input{width:auto;margin:0}
/* picker tables (M18): tick column stays narrow, descriptions may wrap */
.picker td.tick{width:1%;padding-right:.2rem}
.picker input{width:auto;margin:0;vertical-align:middle}
.picker label{cursor:pointer;margin:0;display:inline}
.picker td.dim{white-space:normal;min-width:16rem}
button,.btn{display:inline-block;padding:.65rem 1.2rem;font:inherit;font-weight:650;font-size:.95rem;
  color:var(--btn-ink);background:var(--accent);border:1px solid transparent;border-radius:10px;cursor:pointer}
button:hover,.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn.ghost{color:var(--fg);background:transparent;border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--panel);filter:none}
.err{color:var(--danger)}
.key{background:var(--code);border:1px dashed var(--accent);color:var(--accent);
  padding:1rem;border-radius:var(--radius);word-break:break-all;font-size:.95rem}

/* guide: sidebar + content */
.doc{display:grid;grid-template-columns:15rem 1fr;gap:2.5rem;align-items:start}
.toc{position:sticky;top:4.2rem;font-size:.88rem;max-height:calc(100vh - 6rem);overflow:auto}
.toc a{display:block;color:var(--dim);padding:.2rem 0;border-left:2px solid transparent;padding-left:.7rem}
.toc a:hover{color:var(--fg);text-decoration:none}
.toc a.h3{padding-left:1.5rem;font-size:.85rem}
.content{min-width:0}
.content h2{scroll-margin-top:4.5rem}
.content h3{scroll-margin-top:4.5rem}
.content table{display:block;overflow-x:auto}
@media (max-width:820px){
  .doc{grid-template-columns:1fr}
  .toc{position:static;max-height:none;margin-bottom:1rem;
    border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .9rem}
}

/* leaderboard: vertical group navigator (Overall + one page per category) */
.lb{display:grid;grid-template-columns:13rem 1fr;gap:2.2rem;align-items:start}
.lbnav{position:sticky;top:4.2rem;display:flex;flex-direction:column;gap:.15rem}
.lbnav a{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;color:var(--dim);
  padding:.42rem .75rem;border-radius:8px;font-size:.92rem;font-weight:550}
.lbnav a:hover{color:var(--fg);background:var(--panel);text-decoration:none}
.lbnav a.on{color:var(--accent);background:var(--accent-weak)}
.lbnav .cnt{font:600 10.5px var(--mono);color:var(--muted)}
.lbnav a.on .cnt{color:var(--accent)}
.lbnav .navhead{margin:.7rem 0 .1rem;padding:0 .75rem;font:600 10px var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* M33-4 vocabulary: raw suite id demoted to a mono chip beside the title */
.idchip{font:600 11px var(--mono);color:var(--muted);background:var(--panel);
  border:1px solid var(--border);border-radius:6px;padding:.2rem .5rem;
  vertical-align:middle;margin-left:.45rem}
/* M33-4 fold idiom: at most one open table per page — extras start folded */
details.fold{margin:1.4rem 0;border:1px solid var(--border);border-radius:var(--radius);
  padding:.2rem .9rem}
details.fold>summary{cursor:pointer;font-weight:650;padding:.55rem 0;color:var(--dim)}
details.fold>summary:hover,details.fold[open]>summary{color:var(--fg)}
/* M41 §1: the summary line carries the fold's own outcome, so a section of
   closed folds still reads as a report (and a finding above can cite it). */
details.fold>summary .s{color:var(--muted);font-weight:400;font-size:.87rem}
details.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* M41 §1: numbered section headings carrying the owner question they answer */
h2.qsec{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-size:1.3rem;margin:2.6rem 0 .5rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--border)}
h2.qsec .qnum{flex:none;display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;
  border-radius:8px;background:var(--accent-weak);border:1px solid var(--border-strong);
  color:var(--accent);font:650 .9rem var(--mono)}
h2.qsec .qhint{font:400 .95rem var(--sans);color:var(--dim);margin-left:auto}
@media(max-width:640px){h2.qsec .qhint{margin-left:0;flex-basis:100%}}
/* M41-2b: the page header — identity left, actions right. Wraps to stacked
   on narrow screens, where the actions belong under the name, not beside it. */
.agenthead{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap;margin:0 0 .6rem}
.agenthead .ahid{min-width:0;flex:1 1 20rem}
.agenthead .ahid h1{margin:0}
.agenthead .ahact{display:flex;gap:.5rem;flex-wrap:wrap;flex:none;padding-top:.35rem}
@media(max-width:640px){.agenthead .ahact{width:100%}}
/* M41 §1.1: the verdict — the whole page in one glance. Since the 2026-08-04
   merge it is the HEAD of §1 rather than a block above it, so it sits tight
   under the section heading and hands off to the pictures below. */
.verdictbar{border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);background:var(--surface);padding:1.1rem 1.3rem;margin:.9rem 0 1.4rem}
/* The lead takes display weight only when short; when it is absent .vsent
   keeps this primary styling, which IS the long-phrase fallback. */
.vlead{font:750 1.42rem/1.25 var(--sans);margin:0 0 .35rem;letter-spacing:-.01em}
.vsent{font-size:1.05rem;margin:0}
.vlead + .vsent{font-size:.95rem;color:var(--dim)}
.vsent em{font-style:normal;font-weight:700;color:var(--fg)}
/* The fact rows stand alone since the merge — they replace the four axis
   meters, so they carry a panel of their own rather than riding inside the
   verdict block. Same rhythm as .coverage, which is the other row-table on
   the page. */
.vfacts{border:1px solid var(--border);border-radius:var(--radius);
  padding:.9rem 1.1rem;margin:1.2rem 0;display:grid;gap:.1rem}
.vfacts .eyebrow{margin-bottom:.2rem}
.vrow{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 6rem 12rem;gap:.8rem;
  align-items:center;padding:.42rem 0;border-top:1px solid var(--border)}
.vrow .vdim{font-weight:650;font-size:.92rem}
.vrow .vfact{font-size:.92rem;color:var(--dim);min-width:0}
.vrow .vbar{height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.vrow .vbar[data-empty="1"]{opacity:.45}
.vrow .vbar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.vrow .vpct{font-size:.86rem;color:var(--dim);text-align:right}
@media(max-width:760px){
  .vrow{grid-template-columns:1fr auto;gap:.2rem .8rem}
  .vrow .vbar{grid-column:1/-1;order:3}
  .vrow .vpct{text-align:right;order:2}
}
/* M41 §1.3: the speed strip, under the meters whose Execution number
   speed half-produces */
.speedstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin:1.1rem 0 .4rem}
.speedstrip .scell{background:var(--surface);padding:.75rem .9rem}
.speedstrip .tile-value{font:650 1.25rem/1.15 var(--mono);margin:.15rem 0}
/* M41 §1.5: "where it lost points" — inside a scored suite's fold, ordered
   by how unusual the failure is rather than by task order */
.losses{margin:.6rem 0 1rem}
.losses ol{margin:.4rem 0;padding-left:1.4rem;display:grid;gap:.3rem}
.losses li{font-size:.9rem}
.losses code{font-size:.86rem}
.losses .lgrader{color:var(--dim);font-size:.85rem;margin-left:.35rem}
.losses .lrate{display:block;color:var(--muted);font-size:.82rem}
/* A defect the field mostly passes is the one worth fixing — named, not
   colour alone (the severity rule in §5). */
.losses .lhot{color:var(--warn);font-weight:650}
/* M41 §2: a §3 finding — severity carried by a WORD as well as a rail
   colour, never colour alone */
.finding{border:1px solid var(--border);border-left:3px solid var(--border-strong);
  border-radius:var(--radius);background:var(--surface);padding:.8rem 1rem;margin:.7rem 0}
.finding.f-fix{border-left-color:var(--danger)}
.finding.f-blind{border-left-color:var(--warn)}
.finding.f-watch{border-left-color:var(--dim)}
.finding.f-good{border-left-color:var(--accent)}
.finding .fhead{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.finding .fsev{flex:none;font:650 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--border);border-radius:999px;padding:.18em .6em;color:var(--dim)}
.finding.f-fix .fsev{color:var(--danger);border-color:var(--danger)}
.finding.f-blind .fsev{color:var(--warn);border-color:var(--warn)}
.finding.f-good .fsev{color:var(--accent);border-color:var(--accent)}
.finding .fline{font-size:.95rem;min-width:0}
.finding .gainchip{flex:none;font:650 10.5px var(--mono);color:var(--accent);
  background:var(--accent-weak);border-radius:999px;padding:.18em .6em}
.finding .fev{margin:.45rem 0 0;padding-left:1.1rem;display:grid;gap:.15rem}
.finding .fev li{font-size:.85rem;color:var(--dim)}
/* What the cited suite is designed to test (operator 2026-08-04) — printed
   once per suite, so a fall rate quoted above it can be read for what it is. */
.finding .fwhat{margin:.45rem 0 0;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--border);padding-top:.4rem}
.finding .fwhat strong{color:var(--dim);font-weight:650}
/* M41 §1.4: coverage pips — the partial composite made legible */
.coverage{border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.1rem;margin:1.2rem 0}
.covrow{display:grid;grid-template-columns:9.5rem 1fr auto;gap:.8rem;align-items:center;
  padding:.32rem 0;border-top:1px solid var(--border)}
.covrow:first-of-type{border-top:0}
.coverage .cvlabel{font-size:.9rem;font-weight:650}
.coverage .cvpips{display:flex;gap:.28rem;flex-wrap:wrap}
.coverage .pip{width:.62rem;height:.62rem;border-radius:50%;border:1px solid var(--border-strong);
  background:transparent}
.coverage .pip.on{background:var(--accent);border-color:var(--accent)}
.coverage .cvnum{font:650 .85rem var(--mono);color:var(--dim)}
@media(max-width:640px){.covrow{grid-template-columns:1fr auto}.coverage .cvpips{grid-column:1/-1;order:3}}
/* M41 §3: the waiting panel — what the page says INSTEAD of findings when
   there is not enough behind it to advise (never a page-wide suppression) */
.waitpanel{border:1px dashed var(--border-strong);border-radius:var(--radius);
  background:var(--surface);padding:1.1rem 1.3rem;margin:1rem 0}
.waitpanel .wtitle{font-weight:700;font-size:1.05rem;margin:0 0 .4rem}
.waitpanel p{margin:.4rem 0}
/* M41 §4: configuration cards — how the thing was run, in one place */
.cfgcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;
  margin:1rem 0}
.cfgcard{margin:0}
.cfgcard p{margin:.4rem 0}
.cfgcard .tile-value{font:650 1.5rem/1.1 var(--mono);margin:.2rem 0}
/* M41 §2: what a group of boards is a group OF */
.arena{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:2rem 0 .2rem;
  font-size:1rem}
.arena .acount{font:600 10.5px var(--mono);color:var(--muted);border:1px solid var(--border);
  border-radius:999px;padding:.15em .6em}
.arena .anote{font-weight:400;font-size:.85rem}
.lbmain{min-width:0}
@media (max-width:820px){
  .lb{grid-template-columns:1fr;gap:1rem}
  .lbnav{position:static;flex-direction:row;flex-wrap:wrap;gap:.3rem;
    border:1px solid var(--border);border-radius:var(--radius);padding:.5rem}
  .lbnav .navhead{flex-basis:100%;margin:.2rem 0 0}
}

/* dashboard readout (dial + field comparison + radar) */
.readout{display:grid;grid-template-columns:minmax(260px,1fr) 1.2fr minmax(260px,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);align-items:center;background:var(--panel);
  border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.1rem,3vw,2rem);margin:1rem 0 1.3rem}
.readout .gdial{max-width:320px}
.readout .gradar{max-width:340px}
.radar-cell{text-align:center}
.compare .big{font-size:1.4rem;font-weight:750;letter-spacing:-.01em}
.compare .big em{color:var(--accent);font-style:normal}
.dist-wrap{margin-top:.9rem}
@media (max-width:1100px){
  .readout{grid-template-columns:minmax(260px,1fr) 1.2fr}
  .radar-cell{grid-column:1 / -1}
}
@media (max-width:840px){
  .readout{grid-template-columns:1fr}
  .radar-cell{grid-column:auto}
}

/* landing hero (docs/REDESIGN.md §3) */
/* single-funnel hero (M20-5): one centered column, one CTA */
.hero.funnel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.hero.funnel .lede{margin-top:.4rem}
.hero.funnel .cta-row{justify-content:center;margin-top:.9rem}
.hero.funnel .muted{margin-top:.9rem}
.btn.big{font-size:1.1rem;padding:.9rem 2rem;border-radius:12px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding:clamp(1.5rem,4vw,3rem) 0 1rem}
.hero h1{font-size:clamp(2rem,4.2vw,2.9rem);font-weight:750;margin:.5rem 0 0}
.hero .lede{margin-top:.9rem;font-size:1.06rem;max-width:36rem}
.cta-row{display:flex;gap:.7rem;margin-top:1.5rem;flex-wrap:wrap;align-items:center}
/* The mint page's next step (operator 2026-08-05: it was being read as a
   section header). Centred and alone between the paste panel and the manual
   fallback, so the one link on the page cannot be mistaken for a label on
   what follows it. */
.cta-row.nextstep{justify-content:center;margin-top:1.8rem}
.nextnote{margin:.6rem 0 0;font-size:.88rem}
.hero-dial{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.dial-caption{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qcard h3{font-size:1.02rem;font-weight:700;margin:0 0 .35rem}
.qcard p{color:var(--dim);font-size:.92rem;margin:0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.2rem 0}
.steps .step{display:flex;gap:.85rem;align-items:flex-start}
.steps .step .n{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;
  font:700 .95rem var(--mono);color:var(--accent);background:var(--accent-weak);border:1px solid var(--border)}
.steps .step p{margin:.1rem 0 0;color:var(--dim);font-size:.92rem}
.steps .step strong{color:var(--fg)}
@media (max-width:840px){
  .hero{grid-template-columns:1fr}
  .hero-dial{order:-1}
}

/* landing sample screenshots — equal-height pair; the readiness shot crops
   2/3 off the top so the report line sits at the top edge */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.2rem 0}
.shots figure{margin:0}
.shots img{width:100%;height:250px;object-fit:cover;object-position:top;
  border:1px solid var(--border-strong);border-radius:var(--radius);display:block}
.shots figure:nth-child(2) img{object-position:50% 66.7%}
.shots figcaption{color:var(--dim);font-size:.88rem;margin-top:.4rem}
@media (max-width:700px){.shots{grid-template-columns:1fr}.shots img{height:auto}}

/* methodology page: axes, check cards, callout */
.prose{max-width:65ch}
.axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1.2rem 0}
.axis{border-left:3px solid var(--mark);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;
  padding:.9rem 1.1rem}
.axis h3{font-size:.98rem;font-weight:700;margin:0}
.axis p{font-size:.9rem;color:var(--dim);margin:.3rem 0 0}
.cat-h{font-size:1.05rem;font-weight:700;margin:1.8rem 0 0}
.cat-q{margin:.15rem 0 0;font-size:.92rem}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.1rem;margin:1.1rem 0 1.5rem}
.check{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.3rem}
.check h3{font-size:.97rem;font-weight:700;margin:0;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.check h3 code{font:600 11px var(--mono);color:var(--accent);background:var(--accent-weak);
  padding:.15em .5em;border-radius:6px}
.check p{font-size:.9rem;color:var(--dim);margin:.4rem 0 0}
.check .tags{margin-top:.6rem;display:flex;gap:.4rem;flex-wrap:wrap}
.tag{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--border);border-radius:5px;padding:.2em .5em}
.callout{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.3rem;margin:1rem 0;max-width:65ch}

/* gauge dial (src/web/readout.ts) — CSS-only sweep-in */
.gdial{width:100%;max-width:420px;display:block;margin:0 auto}
.gdial .track{stroke:var(--track)}
.gdial .fill{stroke:var(--mark);animation:gsweep 1.2s cubic-bezier(.33,1,.68,1) both}
.gdial .tick{stroke:var(--border-strong)}
.gdial .tick.major{stroke:var(--muted)}
.gdial .tlabel{fill:var(--muted);font:600 10px var(--mono)}
.gdial .tlabel.off{fill:var(--dim)}
.gdial .gverdict{fill:var(--fg);font:650 24px var(--sans)}
.gdial .needleg{transform-box:view-box;transform-origin:50% 59.5%;
  animation:gneedle 1.2s cubic-bezier(.33,1,.68,1) both}
.gdial .needle{stroke:var(--fg)}
.gdial .hub{fill:var(--fg)}
.gdial .gval{fill:var(--fg);font:650 52px var(--sans)}
.gdial .gpartial{fill:var(--dim);font-size:26px}
.gdial .gunit{fill:var(--dim);font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase}
@keyframes gsweep{from{stroke-dashoffset:var(--gd-len)}to{stroke-dashoffset:0}}
@keyframes gneedle{from{transform:rotate(var(--gd-nrot))}to{transform:rotate(0deg)}}

/* tier ladder (src/web/readout.ts renderTierLadder, M16-6) */
.gladder{width:100%;max-width:460px;display:block}
.gladder .step{fill:var(--accent-weak)}
.gladder .cap{stroke:var(--mark);stroke-width:3}
.gladder .tlabel{fill:var(--fg);font:600 11px var(--mono)}
.gladder .tsub{fill:var(--dim);font:500 10px var(--mono)}
.gladder.mini{width:66px;display:inline-block;vertical-align:middle}
.gladder.mini .step{fill:var(--mark);opacity:.75}

/* radar figure (src/web/readout.ts renderRadar) */
.gradar{width:100%;max-width:400px;display:block;margin:0 auto}
.gradar .ring{fill:none;stroke:var(--border);stroke-width:1}
.gradar .spoke{stroke:var(--border);stroke-width:1}
.gradar .series{transform-box:view-box;transform-origin:50% 48.1%;
  animation:gradar-in .9s cubic-bezier(.33,1,.68,1) both}
.gradar .area{fill:var(--accent-weak);stroke:var(--mark);stroke-width:2;stroke-linejoin:round}
.gradar .vertex{fill:var(--mark);stroke:var(--panel);stroke-width:2}
.gradar .rl{fill:var(--fg);font:600 12px var(--sans)}
.gradar .rl.off{fill:var(--muted)}
.gradar .rv{fill:var(--dim);font:600 10.5px var(--mono)}
@keyframes gradar-in{from{transform:scale(0)}to{transform:scale(1)}}

/* field-distribution strip */
.gdist{width:100%;max-width:460px;display:block}
.gdist .dbase{stroke:var(--border-strong);stroke-width:1}
.gdist .dbin{fill:var(--mark);opacity:.18}
.gdist .dbin.below{opacity:.55}
.gdist .dmark{stroke:var(--fg);stroke-width:2}
.gdist .dmarkdot{fill:var(--mark);stroke:var(--panel);stroke-width:2}
.gdist .dlabel{fill:var(--fg);font:700 11px var(--sans)}
.gdist .daxis{fill:var(--muted);font:600 9.5px var(--mono)}

@media (prefers-reduced-motion: reduce){
  .gdial .fill,.gdial .needleg,.gradar .series{animation:none}
}

/* the circuit (src/web/circuit.ts + track.ts, M23) */
.center{text-align:center}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.trackcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem;margin:1.4rem 0}
.trackcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.2rem 1.3rem;text-align:center}
.trackcard.soon{opacity:.45}
.trackcard h3{margin:0 0 .3rem;font-size:1.05rem}
.trackcard p{margin:.15rem 0;font-size:.88rem}
.trackcard .tags{margin-top:.7rem;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.trackmap{max-width:100%;height:auto}
.record{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--mark);border-radius:var(--radius);
  padding:.8rem 1.4rem;margin:1.2rem auto;max-width:36rem}
.record .rectime{font:800 1.6rem var(--mono);color:var(--accent)}
.record small{font-size:.8rem}
.sc{display:inline-block;min-width:1.9em;text-align:center;font:700 10.5px var(--mono);
  border:1px solid var(--border);border-radius:5px;padding:.2em .2em;margin-right:.2em;color:var(--dim)}
.sc.purple{border-color:#a78bfa;color:#a78bfa}
.sc.pen{border-color:#fbbf24;color:#b8860b}
tr.dnfrow td{color:var(--muted)}
.runit{padding:1.4rem;margin:1.6rem auto;max-width:36rem}
.runit .btn{margin:.2rem .3rem}
/* lap readout: hero + sector splits (track.ts) */
.laphero{text-align:center;margin:.8rem 0}
.laphero .laptime{font:800 3.2rem/1.1 var(--mono);color:var(--accent)}
.laphero .laptime.dnf{color:var(--bad,#f87171)}
.laphero .verdict{font-size:1.05rem;margin:.5rem 0 .1rem}
.splits{max-width:38rem;margin:1.4rem auto}
.split{display:grid;grid-template-columns:9rem 1fr 6.5rem;gap:.8rem;align-items:center;margin:.5rem 0}
.split .slabel{color:var(--dim);font:600 11px var(--mono)}
.split .bar{position:relative;height:.7rem;border-radius:.35rem;background:var(--panel);
  border:1px solid var(--border);overflow:hidden}
.split .bar .you{position:absolute;left:0;top:0;bottom:0;border-radius:.35rem;background:var(--mark)}
.split .bar .best{position:absolute;top:0;bottom:0;width:2px;background:#a78bfa}
.split.pen .bar .you{background:#fbbf24}
.split.off .bar .you{background:#f87171}
.split .t{font:700 12.5px var(--mono);text-align:right}
.split .t small{display:block;font-weight:400;color:var(--dim)}

/* the reference scatter (src/web/scatter.ts): lap time × tokens per task, log
   axes crossing a tick below the data. Chart colours are literals — the same
   in both themes, like the sector palette — everything else rides tokens. */
.bubble{display:block;width:100%;max-width:46rem;height:auto;margin:.6rem auto .2rem}
.bubble .grid{stroke:var(--border);stroke-width:1}
.bubble .axis{stroke:var(--border-strong);stroke-width:1}
.bubble .tick{fill:var(--muted);font:500 10.5px var(--mono)}
.bubble .alab{fill:var(--dim);font:650 10.5px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.bubble .alab.dimmer{fill:var(--muted)}
.bubble .alab.acc,.bubble .plab.acc{fill:var(--accent)}
.bubble .plab{fill:var(--dim);font:600 11px var(--mono)}
.bubble .psub{fill:var(--muted);font:500 10px var(--mono)}
.bubble .wash{fill:var(--accent-weak)}
.bubble .you{stroke:var(--accent);stroke-width:2}
.bubble .youlab{fill:var(--accent);font:700 11.5px var(--mono)}
.bubble .band{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}
.bubble .assumed{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:3.5 2.5}
.bubble .youdot,.bubble .youlanedot{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.bubble .lane{fill:none;stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 3}
.bubble .lanelab{fill:var(--muted);font:500 10px var(--mono)}
/* the breed legend (operator 2026-08-05): the figure has always coloured by
   breed and never named the colours. Its swatches reuse .dot, so a new breed
   colour is defined once and both the plot and the legend follow it. */
.bubble .legend text{fill:var(--dim);font:500 10.5px var(--mono)}
/* Categorical slots for the figure's breeds, assigned by the renderer rather
   than named per breed (operator 2026-08-05: a third breed inherited the
   default fill and came out the same colour as the second).
   Steps are the validated categorical order's first three, chosen per mode
   for its own surface — the dark set is not a flip of the light one. This is
   a SCATTER, so every pair is adjacent: these three clear the all-pairs CVD
   and normal-vision floors in both modes, and a fourth breed folds into the
   neutral slot instead of taking a hue that would not. Light-mode aqua sits just under
   3:1, which the legend and the exact-numbers table below the figure relieve. */
:root{--viz-1:#3987e5; --viz-2:#d95926; --viz-3:#199e70; --viz-x:#8a9a92}
:root[data-theme="light"]{--viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; --viz-x:#6b7c73}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; --viz-x:#6b7c73}
}
/* Token-efficiency grid (M45-4): a SEQUENTIAL tint, cheap → dear, over each
   suite's own range. One hue with monotone lightness (validated: L 0.965 →
   0.761 light, 0.239 → 0.383 dark; the printed number keeps 7.9:1 or better
   against the ink on every step, so colour is never the only carrier).

   The hue is deliberately the neutral blue and NOT green or red. Green is
   this site's "good", and red-for-expensive would condemn exactly the
   harnesses that solve every task at higher cost — which is the misreading
   docs/M45-DESIGN.md §1.2 exists to prevent. Magnitude here carries no
   verdict. Dark steps are chosen against the dark surface, not flipped. */
.grid td.h1{background:#eef4fc}
.grid td.h2{background:#dbe8f8}
.grid td.h3{background:#c3d9f3}
.grid td.h4{background:#a8c8ee}
.grid td.h5{background:#8ab5e8}
:root[data-theme="dark"] .grid td.h1{background:#16202a}
:root[data-theme="dark"] .grid td.h2{background:#17283a}
:root[data-theme="dark"] .grid td.h3{background:#18314b}
:root[data-theme="dark"] .grid td.h4{background:#193b5d}
:root[data-theme="dark"] .grid td.h5{background:#1a4570}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .grid td.h1{background:#16202a}
  :root:not([data-theme="light"]) .grid td.h2{background:#17283a}
  :root:not([data-theme="light"]) .grid td.h3{background:#18314b}
  :root:not([data-theme="light"]) .grid td.h4{background:#193b5d}
  :root:not([data-theme="light"]) .grid td.h5{background:#1a4570}
}
/* A run that did not solve every task is held back: no tint (its cost is not
   comparable), and the figures recede. It is still printed — the grid is the
   record. */
.grid td.part{color:var(--muted);font-style:italic}
.grid td .s{font-size:.82em;color:var(--muted)}
.grid th{font-weight:600}
.grid td:first-child{white-space:nowrap}
.bubble .dot,.bubble .lanedot{fill:var(--viz-1);stroke:var(--bg);stroke-width:1.5}
/* A run that did not solve every task (M45-1): hollow, so a cheap-and-wrong
   cell cannot be mistaken for a cheap-and-right one. The ring keeps the
   breed's hue — form carries completeness, colour still carries breed — and
   the SVG title says it in words, since form alone is not a label.
   (No backticks in here: APP_CSS is a template literal.) */
.bubble .dot.partial{fill:var(--bg);stroke:currentColor;stroke-width:2.5}
.bubble .dot.partial.b1{color:var(--viz-1)}
.bubble .dot.partial.b2{color:var(--viz-2)}
.bubble .dot.partial.b3{color:var(--viz-3)}
.bubble .dot.partial.bx{color:var(--viz-x)}
.bubble .b2,.bubble text.b2{fill:var(--viz-2)}
.bubble .b3,.bubble text.b3{fill:var(--viz-3)}
.bubble .bx,.bubble text.bx{fill:var(--viz-x)}
.bubble text.b1{fill:var(--viz-1)}
.figlede,.figcaption{max-width:46rem;margin:.2rem auto;font-size:.88rem}
.figcaption em{color:var(--fg);font-style:normal;font-weight:650}

/* compact lap result card (M31-2, docs/M31-DESIGN.md §2.3): dial + time +
   verdict + field strip in ONE glance — the 3-second answer. */
.lapcard{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:.2rem 1.6rem;
  align-items:center;max-width:46rem;margin:.9rem auto .4rem;padding:1.1rem 1.5rem;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.lapcard .gdial{max-width:250px;margin:0}
.lapcard-main{display:flex;flex-direction:column;gap:.35rem;min-width:0;text-align:left}
.lapcard-main .laptime{font:800 2.7rem/1.05 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}
.lapcard-main .laptime.dnf{color:var(--bad,#f87171)}
.lapcard-main .verdict{text-align:left;font-size:1.12rem;margin:0}
.lapcard-main .gdist{max-width:26rem}
.lapcard-main .dim{margin:.1rem 0;font-size:.86rem}
.lapcard.solo{grid-template-columns:1fr}
.lapcard.solo .lapcard-main{align-items:center;text-align:center}
.lapcard.solo .lapcard-main .verdict{text-align:center}
.lapcard-note{max-width:46rem;margin:0 auto 1rem;text-align:center;font-size:.86rem}
/* the lap time, shown but never the focus (operator 2026-08-04): caption
   weight on the card's status line, mono + tabular so it still reads as a
   clock. The dial's percentile keeps the first look. */
.lapcard-main .lapline{color:var(--dim)}
.lapt{font:700 .95rem var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
@media (max-width:680px){.lapcard{grid-template-columns:1fr;justify-items:center}
  .lapcard .gdial{max-width:210px}
  .lapcard-main{align-items:center;text-align:center}
  .lapcard-main .verdict{text-align:center}}

/* results-page blocks (src/try/app.ts, operator 2026-08-04): one question per
   block — your lap, how it compares, what's next. Only the middle one is a
   drawn panel; the first is already carried by .lapcard and the last needs a
   rule, not a third box. Three stacked frames would be its own kind of noise. */
.block{max-width:46rem;margin:1.8rem auto}
.block>h2{margin:0 0 .3rem}
.block.result>.lapcard{margin-top:0}
.block.compare{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.1rem 1.3rem}
.block.compare .figlede,.block.compare .figcaption{max-width:none;margin-left:0;margin-right:0}
/* the block's rule IS its separation — since the "warm-up" heading came off
   (operator 2026-08-04) the buttons ride the section's own padding. */
/* The page's last block, MERGED 2026-08-05: heading + what else gauge
   measures, then the claim row, the note, and the shots. One rule separates
   it; the heading sits tight under that and the buttons follow. */
.block.next{border-top:1px solid var(--border);padding-top:1.4rem;text-align:center}
.block.next>h2{margin:0 0 .2rem}
.block.next .shots{margin:1.4rem 0 0;text-align:left}
.block.next .claimrow{margin-top:1.4rem}
.block.next .claimnote{margin:.5rem 0 0}
/* the caveat that used to ride the figure caption: a quiet line under it,
   below its own rule. The input it once sat beside is gone; the caveat stays,
   because it describes what the picture drew. */
.tokenblock{margin-top:1rem;border-top:1px solid var(--border);padding-top:.8rem}
.fine{color:var(--muted);font-size:.8rem;line-height:1.5}
.fine em{color:var(--dim);font-style:normal;font-weight:650}
.formnote{margin:0}
.reload{text-align:center;margin:.9rem 0 0}
/* the section's own appendix, not its sibling: the fold rides the panel's
   bottom edge instead of drawing a second border inside the first. */
.block.compare>details.fold.sub{border:0;border-top:1px solid var(--border);border-radius:0;
  margin:1.1rem -1.3rem -1.1rem;padding:0 1.3rem}
.block.compare>details.fold.sub[open]{padding-bottom:.9rem}

/* footer */
.foot{border-top:1px solid var(--border);color:var(--dim);font-size:.85rem;
  padding:1.2rem 1.25rem;text-align:center}