/* Brain Spa app theme. --bg to --font-micro are copied from apps/web/src/styles/tactical.css; a test keeps them equal. */
:root {
  --bg: #0a0a0a;
  --fg: #eaeaea;
  --muted: #8a8a8a;
  --accent: #e61919;
  --grid: rgba(234, 234, 234, 0.12);
  --panel: #0f0f0f;
  --font-macro: "Inter", "Archivo", system-ui, sans-serif;
  --font-micro: "JetBrains Mono", ui-monospace, monospace;
  --amber: #f0a500;
  --model1: #f0a500;
  --model2: #eaeaea;
  --model3: #5ad1c8;
  --model4: #b48cff;
  --model5: #ff7a7a;
  --model6: #7fd36b;
  --model7: #6aa8ff;
  --model8: #40f040;
  --model9: #91985e;
  --model10: #fcace8;
  --model11: #df55b4;
  --model12: #f4e151;
  --model13: #24af32;
  --model14: #66ffbd;
  --model15: #b97e95;
  --model16: #539fb1;
  --model17: #f485fe;
  --model18: #f7bb9d;
  --model19: #db7213;
  --model20: #a5cffe;
  --model21: #b040f0;
  --model22: #f040f0;
  --model23: #6070f0;
  --model24: #c0f0ff;
  --body: #c4c4c4;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --s1: 8px;
  --s2: 16px;
  --s3: 32px;
  --s4: 64px;
  --sec: clamp(72px, 9vw, 128px);
  --gutter: clamp(16px, 4vw, 48px);
  --gap: clamp(12px, 2vw, 32px);
  --label: clamp(11rem, 24vw, 19rem);
  --t-small: .8125rem;
  --t-row: .9375rem;
  --t-body: 1rem;
  --t-read: 1.0625rem;
  --t-h3: 1.1875rem;
  --t-h2: clamp(1.5rem, 2.4vw, 2rem);
  --t-h1: clamp(2rem, 4.4vw, 3.25rem);
  --t-num: clamp(1.375rem, 2.2vw, 1.75rem);
  --lab-title: 600 var(--t-body)/1.35 var(--font-macro);
  --lab-col: 600 var(--t-small)/1.3 var(--font-macro);
  --lab-row: 400 var(--t-row)/1.35 var(--font-macro);
  --lab-val: 500 var(--t-body)/1.3 var(--font-micro);
  --lab-headline: 500 var(--t-num)/1.1 var(--font-micro);
}

/* ===== Base. One type system on every page: h1 page title, h2 section heading, h3 group heading, figcaption figure
   title, --lab-col column header, --lab-row row label, --lab-val value, --lab-headline the number a row leads with,
   p paragraph, .note and .dir small notes. ===== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--fg); background: var(--bg); font-family: var(--font-macro); font-size: var(--t-read); line-height: 1.55; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 9999; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, .35) 2px, rgba(255, 255, 255, .35) 3px); }
button, input { font: inherit; }
h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
h1 { font-size: var(--t-h1); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; max-width: 22ch; }
h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; max-width: 30ch; }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
p { color: var(--body); }
small { color: var(--muted); font-size: var(--t-small); }
figcaption { font: var(--lab-title); color: var(--fg); margin-bottom: var(--s2); }
.plate { background: none; border: 0; padding: 0; }
.pv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.sw { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.desc { color: var(--body); margin-top: var(--s2); max-width: 62ch; }
.note { margin-top: var(--s3); font-size: var(--t-small); color: var(--muted); max-width: 72ch; }
.dir { font-size: var(--t-small); color: var(--muted); text-align: right; }
.legend, .fkey { display: flex; flex-wrap: wrap; gap: 6px var(--s2); margin-bottom: var(--s2); font: var(--lab-row); font-size: var(--t-small); color: var(--body); }
html:not(.js) .js-only { display: none; }

/* Links: prose links underlined; links inside figures quiet until hover. Every link changes on hover and focus. */
a { color: inherit; text-underline-offset: 3px; }
a.xl, main p a, .note a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--muted); transition: text-decoration-color .15s; }
a.xl:hover, main p a:hover, .note a:hover, a.xl:focus-visible { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
a.quiet { color: var(--fg); text-decoration: none; }
a.quiet:hover, a.quiet:focus-visible, .srow:hover .lname, .srow:focus-visible .lname { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
small a.xl { color: var(--body); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Page frame: one centred column at every width ===== */
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main { padding-top: var(--s3); padding-bottom: var(--sec); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); padding-top: var(--s2); }
.brand { font-family: var(--font-micro); font-size: var(--t-small); letter-spacing: .08em; color: var(--accent); }
.brand em { font-style: normal; color: var(--muted); letter-spacing: 0; margin-left: 12px; }
.topnav { display: flex; border: 1px solid var(--grid); background: var(--panel); }
.nav-link { font-family: var(--font-micro); font-size: var(--t-small); padding: 0 12px; display: flex; align-items: center; min-height: 44px; border-right: 1px solid var(--grid); color: var(--muted); text-decoration: none; }
.nav-link:last-child { border-right: none; }
.nav-link:hover { color: var(--fg); background: rgba(230, 25, 25, .08); }
.nav-link[aria-current] { color: var(--fg); background: rgba(230, 25, 25, .14); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-link:focus-visible { outline-offset: -2px; }
header .nav-link { justify-content: center; padding: 0 var(--s2); }
.sec { margin-top: var(--sec); scroll-margin-top: var(--s3); }
.shead { margin-bottom: var(--s3); }
.shead p { margin-top: var(--s2); max-width: 62ch; }
.hero { padding-top: var(--s2); }
.hero .lead { margin-top: var(--s3); }

/* ===== Row charts. Every one uses the same grid: a label column, then its value columns (--cols). Below 560 px the
   label takes its own line above the values, and nothing else changes. ===== */
.grow, .crow, .srow, .mrow { display: grid; grid-template-columns: var(--label) repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); row-gap: 6px; align-items: center; }
.grow { --cols: 2; }
.crow { --cols: 3; }
.srow { --cols: 1; }
.mrow { --cols: 3; }
.lname { min-width: 0; font: var(--lab-row); color: var(--fg); }
.lname > a, .lname .mtitle { font-weight: 600; font-size: var(--t-body); }
.lname small { display: block; margin-top: 2px; font-size: var(--t-small); line-height: 1.35; }
.ghead, .chead, .mhead { font: var(--lab-col); color: var(--muted); padding-bottom: var(--s1); align-items: end; }
.gaxis, .caxis, .saxis { padding-top: 0; }
.gaxis .ticks, .caxis .ticks, .saxis .ticks { margin-top: 0; }
.gcue { padding-top: 2px; }
.gname { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s1); margin: var(--s3) 0 var(--s1); font-size: var(--t-h3); }
.gname small { font-weight: 400; font-size: var(--t-small); }
.ggroup:first-of-type .gname { margin-top: var(--s2); }

/* A track with one filled part. Values sit beside it, never on it. */
.bar { position: relative; display: block; height: 12px; background: rgba(234, 234, 234, .05); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 2px; background: var(--c); transform-origin: left; }
.ticks { position: relative; height: 20px; margin-top: var(--s1); font-family: var(--font-micro); font-size: var(--t-small); color: var(--muted); }
.ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }

/* Home, first screen: every focus model, facts right (white) and the CCP line (red) */
.grow:not(.ghead):not(.gaxis):not(.gcue) { padding: 10px 0; border-top: 1px solid var(--grid); }
.gcell { display: grid; gap: 6px; min-width: 0; }
.sv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s1); }
.sv b { font: var(--lab-headline); color: var(--fg); }
.sv small { font-family: var(--font-micro); }
.gcell .bar { height: 14px; }

/* Home: what each change did. A hollow mark is the model it came from, the filled mark the build. */
.change .crow:not(.chead):not(.caxis):not(.gcue) { padding: var(--s2) 0; border-top: 1px solid var(--grid); }
.ccell { display: grid; gap: 6px; min-width: 0; }
.ccell small { display: none; font: var(--lab-col); color: var(--muted); }
.ccell b { font: var(--lab-val); color: var(--fg); white-space: nowrap; }
.ctrack { position: relative; display: block; height: 24px; background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 25% 100%; border-right: 1px solid var(--grid); }
.ctrack i { position: absolute; top: 50%; }
.cjoin { height: 2px; margin-top: -1px; background: var(--muted); transform-origin: left; }
.cfrom, .kfrom { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--muted); background: var(--bg); }
.ctrack.close .cfrom { margin-top: -12px; }
.ctrack.close .cto { margin-top: -2px; }
.cto, .kto { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--c, var(--fg)); }
.kfrom, .kto { position: static; display: inline-block; margin: 0 6px 0 0; vertical-align: -2px; }
.kto { background: var(--fg); }
.cticks, .cuenote { display: none; }
.cuenote { margin-top: var(--s2); text-align: left; }

/* Home: the CCP line by subject, one bar per model on one shared axis */
.srow { text-decoration: none; color: var(--fg); }
.subjects .srow:not(.saxis) { padding: var(--s2) 0; border-top: 1px solid var(--grid); }
.sbars { display: grid; gap: 4px; }
.sbar { display: grid; grid-template-columns: minmax(0, 1fr) 6ch; gap: var(--s1); align-items: center; }
.sbar .bar { height: 10px; background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: calc(100% / var(--steps, 4)) 100%; background-color: transparent; }
.sbar b { font: var(--lab-val); font-size: var(--t-small); color: var(--fg); text-align: right; }
.saxis .ticks { margin-right: calc(6ch + var(--s1)); }

/* Home: how the test works */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s3); }
.steps li { position: relative; padding-top: var(--s3); border-top: 2px solid var(--grid); }
.steps .sn { position: absolute; left: 0; top: -15px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--fg); font-family: var(--font-micro); font-size: var(--t-small); color: var(--fg); }
.steps li:last-child .sn { border-color: var(--accent); }
.steps p { margin-top: 4px; max-width: 40ch; }

/* ===== Models page ===== */
.jump { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); font: var(--lab-row); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--grid); color: var(--fg); text-decoration: none; }
.jump a:hover { border-color: var(--fg); }
.msec { margin-top: var(--s4); scroll-margin-top: var(--s3); }
.msec h2 small { font-size: var(--t-small); font-weight: 400; letter-spacing: 0; margin-left: var(--s1); }
.mtable { margin-top: var(--s2); }
.mrow:not(.mhead):not(.gcue) { padding: var(--s2) 0; border-top: 1px solid var(--grid); scroll-margin-top: var(--s3); }
.mrow:target { background: rgba(230, 25, 25, .06); }
.mtitle { display: block; color: var(--fg); }
.mrole, .mdetail { display: block; }
.mlinks { display: flex; flex-wrap: wrap; gap: 0 var(--s2); margin-top: 4px; font-size: var(--t-small); }
.mdata { color: var(--muted); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.mdata:hover, .mdata:focus-visible { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }
.mcell { display: grid; gap: 4px; min-width: 0; }
.mcell small { display: none; font: var(--lab-col); color: var(--muted); }
.mcell b { font: var(--lab-val); color: var(--fg); }
.mcell .bar { height: 8px; }
.mtable .gname { margin: var(--s3) 0 0; }

/* ===== Findings: each band a heading, one line and its figure, stacked at every width ===== */
.band .bfig { max-width: 100%; }
.b-table .bfig, .b-split .bfig, .b-waffle .bfig { width: 100%; }
.viz { display: grid; gap: var(--s2); }
.vtable { border-collapse: collapse; width: 100%; }
.vtable th, .vtable td { padding: 10px var(--s1) 10px 0; border-bottom: 1px solid var(--grid); text-align: right; }
.vtable thead td, .vtable thead th { font: var(--lab-col); color: var(--muted); vertical-align: bottom; }
.vtable tbody th { font: var(--lab-row); color: var(--body); text-align: left; }
.vtable td { font: var(--lab-val); color: var(--fg); width: 24%; }
.vgroups { display: grid; gap: var(--s2); }
.vgroup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s2); align-items: baseline; }
.vglabel { font: var(--lab-row); color: var(--fg); }
.vnums { display: flex; gap: var(--s2); }
.vnums b { font: var(--lab-val); color: var(--fg); }
.vsplit { grid-column: 1 / -1; display: flex; gap: 2px; height: 24px; }
.vsplit i { display: block; transform-origin: left; }
.vwafs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.vwafs > div { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-width: 0; }
.vwafs .vglabel { display: block; min-height: 2.7em; font-size: var(--t-small); color: var(--body); overflow-wrap: anywhere; }
.waffle { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; margin-bottom: var(--s1); }
.waffle i { aspect-ratio: 1; background: rgba(234, 234, 234, .08); }
.big { display: block; font: var(--lab-headline); letter-spacing: -.02em; }
.vfig .dir { margin-top: var(--s1); }

/* Findings: every reply. Filters beside the list from 900 px, behind a button below. */
.replies .shead { margin-bottom: var(--s2); }
.a-layout { display: grid; gap: var(--s2); }
.a-toggle { width: 100%; }
#fpanel { display: none; margin-top: var(--s1); }
#fpanel.open { display: block; }
input[type="search"] { width: 100%; padding: 10px 12px; min-height: 44px; border: 1px solid var(--grid); background: #080808; color: var(--fg); border-radius: 0; }
input:focus { outline: 1px solid var(--accent); }
.chip { font-family: var(--font-micro); font-size: var(--t-small); padding: 0 var(--s2); min-height: 44px; border: 1px solid var(--grid); background: transparent; color: var(--muted); cursor: pointer; margin: 0 -1px -1px 0; }
.chip[aria-pressed="true"] { color: var(--fg); background: rgba(230, 25, 25, .14); }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; margin-top: var(--s2); }
.fg { margin-top: var(--s2); }
.fg legend { font: var(--lab-col); color: var(--muted); padding: 0; margin-bottom: 4px; }
.fchip { font-size: var(--t-small); padding: 4px 10px; min-height: 36px; margin: 0 4px 4px 0; border: 1px solid var(--grid); background: transparent; color: var(--body); cursor: pointer; text-align: left; }
.fchip:hover { border-color: var(--fg); }
.fchip[aria-pressed="true"] { background: var(--fg); color: #0a0a0a; border-color: var(--fg); }
.more { margin-top: var(--s2); }
.more summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--grid); font-size: var(--t-small); color: var(--fg); cursor: pointer; }
.more summary::after { content: "\00a0\25BE"; }
.more[open] summary::after { content: "\00a0\25B4"; }
.active { display: flex; flex-wrap: wrap; gap: var(--s1); }
.active:empty { display: none; }
.activechip, .activeclear { font-size: var(--t-small); min-height: 44px; padding: 0 12px; cursor: pointer; background: transparent; color: var(--fg); border: 1px solid var(--fg); }
.activeclear { border-color: var(--grid); color: var(--muted); }
.chip:hover, .activechip:hover, .activeclear:hover, .jump a:hover { border-color: var(--fg); color: var(--fg); }
.status { font-family: var(--font-micro); font-size: var(--t-small); color: var(--muted); margin: var(--s2) 0 var(--s1); }
.row { border-top: 1px solid var(--grid); }
.rowhead { display: grid; gap: var(--s1); width: 100%; text-align: left; padding: var(--s2) 0; background: transparent; border: 0; color: var(--fg); cursor: pointer; }
.rowhead.static { cursor: default; }
.rowmeta, .pills { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-small); color: var(--muted); }
.rowprompt { overflow-wrap: anywhere; font-size: var(--t-h3); line-height: 1.3; }
.pills .none { opacity: .55; }
.detail { padding: 0 0 var(--s3); display: grid; gap: var(--s2); min-width: 0; }
.side { display: grid; gap: var(--s2); min-width: 0; }
.side[data-focus] .col { display: none; }
.side[data-focus] .col.on { display: block; }
.col { min-width: 0; }
.col h2, .col h3 { font-size: var(--t-h3); }
.scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); margin: var(--s1) 0 var(--s2); font-size: var(--t-small); color: var(--muted); }
.scores b { display: block; font-weight: 500; color: var(--fg); }
.body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--body); }
.body p { margin: 0 0 var(--s1); }
.body table { border-collapse: collapse; margin: var(--s1) 0; font-size: var(--t-small); }
.body td { border: 1px solid var(--grid); padding: 4px 8px; vertical-align: top; }
.body hr { border: 0; border-top: 1px solid var(--grid); margin: var(--s2) 0; }
.body em { font-style: italic; }
.body blockquote { margin: 0 0 var(--s1); padding-left: var(--s2); border-left: 2px solid var(--grid); color: var(--muted); }
.col details { margin-top: var(--s1); }
.col summary, details.ssr summary { cursor: pointer; font-size: var(--t-small); color: var(--fg); min-height: 44px; display: inline-flex; align-items: center; }
details.ssr summary { padding: 0 var(--s2); border: 1px solid var(--grid); }
details.ssr[open] summary { margin-bottom: var(--s2); }
.pager { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s2); font-family: var(--font-micro); font-size: var(--t-small); color: var(--muted); border-top: 1px solid var(--grid); }
html:not(.js) .a-layout { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .a-layout .a-main { grid-column: 1 / -1; }
html:not(.js) .a-toggle, html:not(.js) #fpanel { display: none; }

/* ===== Method ===== */
.m-open p { margin-top: var(--s3); font-size: var(--t-h3); line-height: 1.45; max-width: 52ch; color: var(--body); }
.m-run, .m-grade, .m-example, .m-levels, .m-rate, .m-limits { margin-top: var(--sec); }
.m-run { display: grid; gap: var(--s3); }
.m-run p, .m-rate p { margin-top: var(--s2); max-width: 52ch; }
.lengths figcaption { margin-bottom: var(--s2); }
.wrow { display: grid; gap: 4px; margin-bottom: var(--s2); }
.wname { display: flex; justify-content: space-between; gap: var(--s2); font: var(--lab-row); font-size: var(--t-small); color: var(--body); }
.wname b { font: var(--lab-val); font-size: var(--t-small); color: var(--fg); white-space: nowrap; }
.wname b .dot { margin-left: var(--s1); }
.wbar { display: flex; gap: 2px; height: 24px; }
.wbar i { display: block; min-width: 0; transform-origin: left; }
.think, .dot.think { background: var(--muted); }
.say, .dot.say { background: var(--fg); }
.m-grade h2 { margin-bottom: var(--s3); }
.gflow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-items: stretch; }
.gnode { border: 1px solid var(--muted); padding: var(--s2); }
.gnode b { display: block; font-weight: 600; }
.gnode small { display: block; margin-top: 4px; }
.gnode.judge { border-color: var(--fg); }
.garrow { display: none; }
.gout { display: contents; }
.m-example { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s3); align-items: start; }
.m-example h2 { grid-column: 1 / -1; }
.exq, .exr, .exv { border-top: 1px solid var(--grid); padding-top: var(--s2); }
.exq small, .exr small, .exv small { display: block; margin-bottom: 4px; font: var(--lab-col); color: var(--muted); }
.exprompt { font-size: var(--t-h3); color: var(--fg); line-height: 1.3; margin-bottom: var(--s2); }
.exq ul { list-style: disc; padding-left: var(--s2); color: var(--body); }
.exc { display: flex; gap: var(--s3); flex-wrap: wrap; }
.exlevelbox { margin-top: var(--s2); }
.exlv { display: block; font: var(--lab-val); font-size: var(--t-h3); color: var(--fg); margin-top: 4px; }
.exfull summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--fg); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.exfull summary:hover { text-decoration-color: var(--accent); }
.exr:has(.exfull[open]) > .exreply { display: none; }
.m-levels h2 { margin-bottom: var(--s3); }
.lcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.lcol p { margin-top: 4px; }
.lquote { margin: var(--s2) 0 0; padding-left: var(--s2); border-left: 2px solid var(--grid); }
.lquote small { display: block; margin-bottom: 4px; }
.lreply, .lquote .body { color: var(--body); font-size: var(--t-small); line-height: 1.5; }
.levelsplit { margin-top: var(--s4); }
.lsrow { display: grid; grid-template-columns: var(--label) minmax(0, 1fr) 6ch; gap: var(--s1) var(--gap); align-items: center; padding: var(--s1) 0; border-top: 1px solid var(--grid); }
.lsrow .lname { font: var(--lab-row); color: var(--fg); }
.lsrow b { grid-column: 3; grid-row: 1; font: var(--lab-val); color: var(--fg); text-align: right; }
.lsrow .lsbar { grid-column: 2; grid-row: 1; }
.lsbar { display: flex; height: 14px; background: rgba(234, 234, 234, .05); transform-origin: left; }
.lsbar i { display: block; }
.lsbar .l2, .sw.l2 { background: var(--accent); }
.lsbar .l1, .sw.l1 { background: #e68a8a; }
.m-rate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s3) var(--s4); align-items: center; }
.m-rate p + p { margin-top: var(--s1); }
.scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.scale li { display: grid; gap: 4px; justify-items: center; padding: var(--s2) 2px; text-align: center; font-size: var(--t-small); color: var(--fg); background: rgba(234, 234, 234, .05); }
.scale li b { font: var(--lab-val); font-size: var(--t-h3); }
.scale li span { font-size: var(--t-small); line-height: 1.25; }
.scale li.on { background: #e8f3e8; color: #0a0a0a; }
.scalecut { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s1); font-size: var(--t-small); color: var(--body); }
.scalecut span:last-child { border-left: 2px solid var(--fg); padding-left: var(--s1); color: var(--fg); font-weight: 600; }
.m-limits ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2) var(--s3); margin: var(--s3) 0 var(--s2); }
.m-limits li { border-top: 1px solid var(--grid); padding-top: var(--s1); color: var(--body); }
.m-limits li b { display: block; color: var(--fg); font-weight: 600; }

/* ===== Narrow screens: the label takes its own line; each value cell names its measure. Same parts, same order. ===== */
@media (max-width: 559px) {
  .grow, .crow, .srow, .mrow, .lsrow { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .lsrow { --cols: 2; grid-template-columns: minmax(0, 1fr) 6ch; }
  .lsrow .lsbar { grid-column: 1 / -1; grid-row: 2; }
  .lsrow b { grid-column: 2; }
  .lsrow .lname { grid-column: 1; }
  .lname { grid-column: 1 / -1; }
  .ghead > span:first-child, .chead > span:first-child, .mhead > span:first-child, .gaxis > span:first-child, .caxis > span:first-child, .saxis > span:first-child, .gcue > span:first-child { display: none; }
  .chead, .mhead { display: none; }
  .ccell small, .mcell small { display: block; }
  .topnav { width: 100%; }
  header .nav-link { flex: 1; padding: 0 6px; }
  .scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The change chart has three axes per row: below 900 px each measure takes its own line with its own axis. */
@media (max-width: 899px) {
  .crow { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); }
  .change .chead, .change .caxis, .change .gcue { display: none; }
  .ccell small { display: block; }
  .cticks, .cuenote { display: block; }
  .cticks .ticks { margin-top: 4px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .change .crow:not(.chead):not(.caxis):not(.gcue) { grid-template-columns: var(--label) minmax(0, 1fr); }
  .change .crow .lname { grid-row: 1 / span 3; align-self: start; }
  .change .ccell { grid-column: 2; }
}
/* Wider screens: more columns, the same parts in the same order. */
@media (min-width: 560px) {
  .vwafs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .gflow, .m-limits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lcols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .shead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s4); align-items: start; }
  .shead p { margin-top: 0; }
  .shead h2 + p + p, .shead p + p { grid-column: 2; margin-top: var(--s1); }
}
@media (min-width: 900px) {
  .a-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s4); }
  .a-toggle { display: none; }
  #fpanel { display: block; margin-top: 0; }
}

/* ===== Motion, the same on every page and every visit (owner, 2026-11-14). The first screen's bars grow right after
   load; every block below rises and fills the first time it scrolls into view. A waiting block (.pend) keeps its text
   visible: it only sits lower and its marks are empty. A block the reader jumps past is shown finished (.now). ===== */
.rv { transition: transform .7s var(--ease) calc(var(--i, 0) * 50ms), opacity .7s var(--ease) calc(var(--i, 0) * 50ms); }
.rv .bar i, .rv .vsplit i, .rv .wbar i, .rv .lsbar, .rv .cjoin, .lead .bar i { transition: transform .9s var(--ease) calc(var(--i, 0) * 50ms + 150ms); transform-origin: left; }
.rv .cto, .rv .cfrom, .rv .waffle i { transition: transform .5s var(--ease) calc(var(--i, 0) * 50ms + 350ms), opacity .5s ease calc(var(--i, 0) * 50ms + 350ms); }
.rv.pend { transform: translateY(32px); }
.rv.pend .bar i, .rv.pend .vsplit i, .rv.pend .wbar i, .rv.pend .lsbar, .rv.pend .cjoin { transform: scaleX(0); }
.rv.pend .cto, .rv.pend .cfrom, .rv.pend .waffle i { transform: scale(0); }
.rv.now, .rv.now * { transition: none !important; }
.lead .grow { transition: transform .7s var(--ease) calc(var(--i, 0) * 40ms); }
.intro .lead .bar i { transform: scaleX(0); transition: none; }
.intro .lead .grow { transform: translateY(16px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv *, .lead .grow, .lead .bar i { transition: none !important; }
  .rv.pend, .intro .lead .grow { transform: none; }
  .rv.pend .bar i, .rv.pend .vsplit i, .rv.pend .wbar i, .rv.pend .lsbar, .rv.pend .cjoin, .rv.pend .cto, .rv.pend .cfrom, .rv.pend .waffle i, .intro .lead .bar i { transform: none; }
}