/* Methodology page — "Graphite" research-report system (Claude Design
   redesign, adopted 2026-07-30). Colour budget goes to the plots; the chrome
   is neutral graphite. Chart surface stays #212121 (palette validation
   input — do not change without re-validating every series palette). */

:root {
  --bg: #101010;
  --surface: #161616;
  --surface-head: #191919;
  --surface-sunken: #131313;
  --chart: #212121;            /* unchanged — validation input */
  --control: #262626;
  --control-active: #3d3d3d;
  --rule-faint: #1f1f1f;
  --rule: #262626;
  --rule-strong: #333333;
  --border-control: #4a4a4a;
  --ink-hi: #f2f1ef;
  --ink: #e7e7e6;
  --ink-2: #b4b3b0;
  --ink-3: #8a8987;
  --ink-4: #6b6a68;
  --ink-body: #cfcecb;         /* body/secondary prose, between --ink and --ink-2 */
  --accent: #cbbfa8;           /* state only: active nav, focus, hover rules */
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-text: system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  --r-sm: 3px;
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  padding: 40px 24px 120px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #3b3731; color: #fff; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(231, 231, 230, 0.3);
}
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 2px;
}

.m-wrap { max-width: 1240px; margin: 0 auto; }

/* ---- masthead -------------------------------------------------------- */
.m-head { margin-bottom: 34px; }
.m-backlink {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  text-decoration-color: rgba(138, 137, 135, 0.35);
}
.m-head h1,
.m-head .m-head-title {
  margin: 22px 0 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 38px; line-height: 1.14; letter-spacing: -0.01em;
  color: var(--ink-hi);
}
.m-deck {
  margin: 16px 0 0; max-width: 64ch;
  font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty;
}
.m-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 24px 0 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--ink-4);
}
.m-meta a { color: var(--ink-body); }
.m-meta .sep { color: #333; }
.m-head-rule { height: 1px; background: #242424; margin-top: 28px; }

/* Site header at the very top of the merged page (no backlink above the
   title) and the methodology header where the reading part begins (inside
   the content column, below the compass section). */
.m-head--site { margin-bottom: 20px; }
.m-head--site h1 { margin-top: 0; }
.m-head--site .m-deck { margin-top: 10px; font-size: 16.5px; }
.m-head--site .m-head-rule { margin-top: 16px; }
.m-head--inner { margin-bottom: 56px; }
.m-head--inner .m-head-title { margin-top: 0; }

/* TL;DR box between the methodology header and section 01 (TODO 37) */
.m-tldr {
  margin: 0 0 72px; max-width: 74ch;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface-sunken);
  padding: 20px 26px 24px;
}
.m-tldr-label {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.m-tldr p {
  margin: 12px 0 0; max-width: 70ch;
  font-size: 16px; line-height: 1.64; color: var(--ink-body); text-wrap: pretty;
}

/* Compass section: the section head is just the eyebrow row (the page
   title directly above already names it) */
.m-sec-compass .m-sec-head { margin-bottom: 14px; }

/* ---- layout: sticky index + content ---------------------------------- */
.m-layout {
  display: grid; grid-template-columns: 212px minmax(0, 1fr);
  gap: 0 56px; align-items: start;
}

/* max-height + overflow: safety net for very short viewports — the column
   scrolls instead of clipping its bottom entries. Reset on mobile, where
   overflow would clip the absolutely-positioned jump-menu dropdown. */
.m-toc { position: sticky; top: 24px; max-height: calc(100vh - 24px); overflow-y: auto; }
.m-toc-cur { display: none; }
.m-toc-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-4); padding: 0 0 12px 13px;
}
.m-toc-list { display: flex; flex-direction: column; gap: 2px; }
.m-toc-list a {
  display: flex; gap: 11px; align-items: center;
  padding: 5px 0 5px 12px; min-height: 31px; line-height: 1.35;
  border-left: 1px solid #242424;
  font-size: 13.5px; color: var(--ink-3); text-decoration: none;
}
.m-toc-list a .num {
  font-family: var(--font-mono); font-size: 11px; color: #4f4e4c;
}
.m-toc-list a:hover { color: var(--ink); }
.m-toc-list a.active {
  border-left: 2px solid var(--accent); padding-left: 11px;
  color: var(--ink-hi); font-weight: 600; background: #151515;
}
.m-toc-list a.active .num { color: var(--accent); }
/* Appendix entries (A1/A2) sit below a thin separator, slightly dimmed —
   they are outside the 00–11 methodology numbering. */
.m-toc-sep { height: 1px; background: #242424; margin: 8px 0 6px 12px; }
.m-toc-list a.appx { color: var(--ink-4); }
.m-toc-list a.appx:hover { color: var(--ink); }
.m-toc-list a.appx.active { color: var(--ink-hi); }

/* Colorblind-mode toggle (TODO #19): sits under the section links on
   desktop, inside the jump-menu dropdown on mobile. Off by default. */
.m-cb-btn {
  display: flex; gap: 8px; align-items: center;
  margin-top: 14px; padding: 5px 0 5px 12px; min-height: 31px; line-height: 1.35;
  background: none; border: none; border-left: 1px solid #242424;
  border-top: 1px solid #242424; cursor: pointer; text-align: left;
  font-family: var(--font-text); font-size: 13.5px; color: var(--ink-3);
}
.m-cb-btn:hover { color: var(--ink); }
.m-cb-state {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #4f4e4c;
  border: 1px solid #333333; border-radius: 3px; padding: 1px 6px;
}
.m-cb-btn[aria-pressed="true"] { color: var(--ink-hi); }
.m-cb-btn[aria-pressed="true"] .m-cb-state { color: var(--accent); border-color: var(--accent); }
/* The light-theme toggle (TODO 64) reuses the chrome and stacks directly
   under the colorblind button — no second gap/rule between the pair. */
.m-cb-btn + .m-cb-btn { margin-top: 0; border-top: none; }

.m-content { min-width: 0; }

/* ---- sections -------------------------------------------------------- */
.m-sec { margin: 0 0 72px; scroll-margin-top: 24px; }
.m-sec:last-child { margin-bottom: 0; }
.m-sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.m-eyebrow-row { display: flex; align-items: baseline; gap: 12px; }
.m-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.m-eyebrow-row::after { content: ""; flex: 1; height: 1px; background: #242424; }
.m-sec h2 {
  /* Wide enough that every current heading stays on one line on desktop
     (note #164: "…one corner?" broke onto its own line at 34ch); narrow
     screens still wrap naturally. Headings only — body copy keeps 70ch. */
  margin: 0; max-width: 60ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1.22; letter-spacing: -0.008em;
  color: var(--ink-hi);
}

.m-sec p {
  margin: 14px 0; max-width: 70ch;
  font-size: 16.5px; line-height: 1.66; color: var(--ink-body); text-wrap: pretty;
}
.m-sec ul { margin: 14px 0; max-width: 70ch; list-style: none; }
.m-sec ul li {
  margin: 0; padding: 10px 0;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 15.5px; line-height: 1.62; color: var(--ink-body); text-wrap: pretty;
}
.m-sec ul li:last-child { border-bottom: none; }
/* Question list in the intro: tighter than the hairline-separated lists,
   with a mono marker so it reads as a set of questions, not findings. */
.m-sec ul.m-qs { margin: 10px 0 18px; }
.m-sec ul.m-qs li {
  padding: 5px 0 5px 22px; border-bottom: none; position: relative;
  color: var(--ink-2);
}
.m-sec ul.m-qs li::before {
  content: "–"; position: absolute; left: 2px; top: 5px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-4);
}
.m-sec li strong { color: var(--ink); }
p.m-note {
  font-size: 14px; line-height: 1.62; color: var(--ink-3);
  border-left: 1px solid var(--rule-strong); padding-left: 16px;
}

/* protocol inset */
.m-protocol {
  border-left: 1px solid #3a3a3a; padding: 2px 0 2px 18px;
  margin: 22px 0; max-width: 72ch;
}
.m-protocol-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px;
}
.m-protocol p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--ink-2); }
/* dash list — protocol insets and section prose (generalized 2026-08-28) */
ul.m-dash { margin: 8px 0 0; max-width: 70ch; list-style: none; }
ul.m-dash li {
  position: relative; padding: 3px 0 3px 22px; border-bottom: none;
  font-size: 16px; line-height: 1.62; color: var(--ink-2);
}
ul.m-dash li::before {
  content: "–"; position: absolute; left: 2px; top: 3px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-4);
}

/* ---- <details> prompt viewer ----------------------------------------- */
details.m-prompt {
  margin: 22px 0; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
details.m-prompt summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 44px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-2); background: var(--surface-head);
}
details.m-prompt summary::-webkit-details-marker { display: none; }
details.m-prompt summary::marker { content: ""; }
.m-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  border: 1px solid var(--border-control); border-radius: var(--r-sm);
  background: var(--control); color: var(--ink-body); font-size: 12px; line-height: 1;
}
.m-toggle::before { content: "+"; }
details.m-prompt[open] .m-toggle { border-color: var(--accent); color: var(--accent); }
details.m-prompt[open] .m-toggle::before { content: "−"; }
.m-plabel { text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-4); }
.m-pdesc { color: var(--ink-body); }
.m-psize { margin-left: auto; color: #4f4e4c; }
details.m-prompt[open] summary { background: #1d1d1d; border-bottom: 1px solid var(--rule-strong); }
details.m-prompt pre {
  margin: 0; padding: 16px 18px; background: var(--surface-sunken);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--ink-2); white-space: pre-wrap; max-height: 340px; overflow-y: auto;
}
.m-ph { font-style: normal; color: var(--accent); }
/* Body wrapper for details blocks that hold tables/lists instead of a pre
   (section 11, review note #70). */
details.m-prompt .m-dbody {
  padding: 4px 18px 14px; background: var(--surface-sunken);
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
}
details.m-prompt .m-dbody code {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-hi);
}
/* The 62-proposition verdict list (section 12, review note #107).
   Capped a bit under the viewport with its own scrollbar (review note #238)
   so the open box doesn't stretch the page by 62 entries. */
details.m-prompt .m-dbody.m-p62 {
  max-height: 75vh; overflow-y: auto; overscroll-behavior: contain;
}
.m-p62 h4 {
  /* Group headings easy to miss in the long list (review note #233):
     a rule above plus extra breathing room sets the three groups apart.
     Gap above the rule widened 30 → 56px (review note #237). */
  margin: 56px 0 14px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.m-p62 .m-p62-row { margin: 12px 0; scroll-margin-top: 12px; }
/* Verdict deep links (TODO 98): the essay's proposition references are real
   links into the box — keep the m-term dotted underline, but a link cursor. */
a.m-vlink { cursor: pointer; }
@media (max-width: 1100px) {
  /* clear the sticky jump bar when a verdict link scrolls the page */
  .m-p62 .m-p62-row { scroll-margin-top: 64px; }
}
.m-p62 .m-p62-row strong { color: var(--ink-hi); }
/* Answer pill on its own line between proposition and explanation (Zapador
   2026-08-02) — otherwise it jumps between lines with the title's wrapping. */
.m-p62 .m-p62-ans { display: block; margin: 4px 0 3px; }
/* Per-proposition "More details" (TODO 53): a lighter nested details under
   each summary row, collapsed by default so the 62-row list stays scannable. */
.m-p62 .m-p62-sum { margin: 0; }
.m-p62 details.m-p62-more { margin: 6px 0 0; }
.m-p62 details.m-p62-more > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 9px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
/* The parent Details box is itself an open details.m-prompt, so its
   [open] .m-toggle rules match these nested toggles too — re-assert the
   closed state ("+" and default colors) for a closed More-details. */
.m-p62 details.m-p62-more:not([open]) > summary .m-toggle {
  border-color: var(--border-control); color: var(--ink-body);
}
.m-p62 details.m-p62-more:not([open]) > summary .m-toggle::before { content: "+"; }
.m-p62 details.m-p62-more > summary::-webkit-details-marker { display: none; }
.m-p62 details.m-p62-more > summary::marker { content: ""; }
.m-p62 details.m-p62-more > summary .m-toggle { width: 15px; height: 15px; font-size: 11px; }
.m-p62 details.m-p62-more[open] > summary { color: var(--accent); }
.m-p62 details.m-p62-more[open] .m-toggle { border-color: var(--accent); color: var(--accent); }
.m-p62 details.m-p62-more[open] .m-toggle::before { content: "−"; }
.m-p62 .m-p62-detail {
  margin: 8px 0 18px; padding: 2px 16px 12px;
  border-left: 2px solid var(--rule);
}
.m-p62 .m-p62-detail h5 {
  margin: 16px 0 5px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4);
}
.m-p62 .m-p62-detail p { margin: 0 0 10px; }
.m-p62 .m-p62-treat { font-style: italic; color: var(--ink-3); }
.m-p62 ul.m-p62-cites { margin: 4px 0 0; padding-left: 18px; }
.m-p62 ul.m-p62-cites li { margin: 6px 0; }

/* "Part one"/"Part two" labels in the section-12 essay (review note #92):
   own line above the bold lead sentence, eyebrow-style mono. */
.m-partlab {
  display: block; margin-bottom: 5px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}

/* Static prompt cards (prompt-variation section): the four formulations side
   by side, same chrome as the collapsible viewers but always open. */
.m-pgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 22px 0;
}
.m-pcard {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.m-pcard-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 44px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-2); background: var(--surface-head);
  border-bottom: 1px solid var(--rule-strong);
}
.m-pcard-bar .m-plabel { text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
/* Prompt-variant names in running text and card labels take the variant's
   plot color (notes #203/#222); .cb-mode rows mirror CB_VARIANT in the JS —
   keep both maps in sync with index.php's VARIANT_COLORS/CB_VARIANT. */
.m-vname--original,   .m-sec li strong.m-vname--original,   .m-pcard-bar .m-plabel.m-vname--original   { color: #3987e5; }
.m-vname--medium,     .m-sec li strong.m-vname--medium,     .m-pcard-bar .m-plabel.m-vname--medium     { color: #d95926; }
.m-vname--minimal,    .m-sec li strong.m-vname--minimal,    .m-pcard-bar .m-plabel.m-vname--minimal    { color: #199e70; }
.m-vname--noreasoner, .m-sec li strong.m-vname--noreasoner, .m-pcard-bar .m-plabel.m-vname--noreasoner { color: #c93bad; }
.cb-mode .m-vname--original,   .cb-mode .m-sec li strong.m-vname--original,   .cb-mode .m-pcard-bar .m-plabel.m-vname--original   { color: #858ae9; }
.cb-mode .m-vname--medium,     .cb-mode .m-sec li strong.m-vname--medium,     .cb-mode .m-pcard-bar .m-plabel.m-vname--medium     { color: #de7515; }
.cb-mode .m-vname--minimal,    .cb-mode .m-sec li strong.m-vname--minimal,    .cb-mode .m-pcard-bar .m-plabel.m-vname--minimal    { color: #c53443; }
.cb-mode .m-vname--noreasoner, .cb-mode .m-sec li strong.m-vname--noreasoner, .cb-mode .m-pcard-bar .m-plabel.m-vname--noreasoner { color: #7c3efe; }
/* Colorblind swap for server-rendered fills (TODO 54): elements carrying
   class m-cbc paint with var(--bc) and declare --bc (normal) + --cbc
   (replacement) inline — see cbStyle() in index.php. While the toggle is on,
   --cbc wins; !important lets the stylesheet override the inline --bc. */
.cb-mode .m-cbc { --bc: var(--cbc) !important; }
/* Standalone card (the persona scaffold): .m-pgrid carries the margin for the
   four side-by-side cards, so a lone card supplies its own. */
.m-pcard--wide { margin: 22px 0; }
/* No height cap: these show each formulation in full (minus the shared
   propositions block), which is the point of the side-by-side. */
.m-pcard pre {
  margin: 0; padding: 16px 18px; background: var(--surface-sunken); flex: 1;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
  color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---- figures ---------------------------------------------------------- */
.m-fig {
  margin: 26px 0; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.m-fig-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule);
  background: var(--surface-head);
}
.m-fig-no {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
.m-fig-title { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.m-fig-scale {
  margin-left: auto; text-align: right;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
}
/* Unit toggle in a figure bar (Fig 3.1 characters/words, note #161) */
.m-fig-toggle { display: inline-flex; }
.m-fig-tbtn {
  background: none; border: 1px solid #333333; cursor: pointer;
  padding: 3px 9px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4);
}
.m-fig-tbtn + .m-fig-tbtn { margin-left: -1px; }
.m-fig-tbtn:first-child { border-radius: 3px 0 0 3px; }
.m-fig-tbtn:last-child { border-radius: 0 3px 3px 0; }
.m-fig-tbtn:hover { color: var(--ink); }
/* Compare-models toggle on the persona figures (TODO 52): a lone m-fig-tbtn
   pushed to the bar's right edge (these figures have no scale note). */
.m-cmp-btn { margin-left: auto; border-radius: 3px; }
.m-fig-tbtn[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent); position: relative;
}
.m-fig-plot { background: var(--chart); }
/* Small-multiple grids are fixed at two columns (Zapador 2026-07-30): wider
   panels beat a 3+1 row, and an odd panel count stays balanced. */
.m-fig-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
}
.m-mini { background: var(--surface); padding: 14px 14px 10px; min-width: 0; }
/* Filler cell appended when a small-multiple grid has an odd panel count —
   darker than the panels so the empty slot reads as background, not as a
   missing plot (review note #76). */
.m-mini--empty { background: #101010; }
.m-mini h3 {
  font-size: 13px; font-weight: 600; color: var(--ink-body); margin-bottom: 8px;
}
.m-fig-foot {
  padding: 13px 14px; border-top: 1px solid var(--rule); background: #181818;
}
.m-fig figcaption {
  padding: 13px 14px; border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 88ch;
}

.m-compass { width: 100%; height: auto; display: block; }
.m-compass.m-zoomable { cursor: zoom-in; }
.m-compass.m-zoomed { cursor: zoom-out; }
.m-cap { fill: #7a7a78; font-size: 10px; }
.m-lbl { fill: var(--ink); font-size: 11px; font-weight: 600;
  paint-order: stroke; stroke: #212121; stroke-width: 3px; }
/* Axis tick numbers on zoomed plots. The halo keeps them legible where a
   gridline or a quadrant edge runs underneath; dots are drawn after them, so
   data still wins if the two ever land on the same pixels. */
.m-tick { fill: #6f6f6d; font-size: 10px; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: #212121; stroke-width: 2.5px; }
.m-compass--lg .m-cap { font-size: 12px; }
.m-compass--lg .m-lbl { font-size: 13px; }
.m-compass--lg .m-tick { font-size: 11.5px; }

/* legend (inside .m-fig-foot) */
.m-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.m-legend-item {
  font-size: 13px; color: var(--ink-body);
  display: inline-flex; align-items: center; gap: 8px;
}
.m-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.m-swatch-ring { background: none; border: 2px solid; width: 11px; height: 11px; }
.m-swatch-x { font-weight: 700; font-style: normal; width: auto; height: auto; border-radius: 0; }
/* Colorblind mode: shape swatches matching the plot's marker shapes */
.m-swatch-svg { width: 13px; height: 13px; border-radius: 0; background: none; }
.m-legend-key {
  margin-left: auto; display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
}
.m-legend-key .m-legend-item { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); gap: 6px; }

/* Term tooltips (TODO 48): a dotted underline marks a word that explains
   itself on hover/tap — the web's usual "definition available" convention. */
.m-term {
  text-decoration: underline dotted #7a7a77;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}

/* hover tooltip */
#m-tip {
  display: none; position: fixed; z-index: 50; pointer-events: none;
  background: #0d0d0d; border: 1px solid #3a3a3a;
  border-radius: var(--r); padding: 11px 13px; max-width: 300px;
  font-size: 13px; line-height: 1.4; color: var(--ink-hi);
}
/* Lead line on plots whose dot colour IS the model colour (Fig 3.1): the
   model name, in that model's colour, so a hover answers "which model?"
   before anything else. The run label sits under it, demoted. */
#m-tip .m-tip-model {
  font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em;
}
#m-tip .m-tip-sub {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  margin-top: 3px; overflow-wrap: anywhere;
}
#m-tip .m-tip-co {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-body);
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
#m-tip .m-tip-desc {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid #2a2a2a;
  color: var(--ink-3); font-size: 12px;
}
#m-tip .m-tip-hint {
  font-family: var(--font-mono); font-size: 10.5px; color: #5a5a58;
  margin-top: 7px; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---- tables ----------------------------------------------------------- */
.m-tablebox {
  margin: 22px 0; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); overflow-x: auto;
}
table.m-table { border-collapse: collapse; width: 100%; font-size: 14px; }
table.m-table th {
  text-align: left; padding: 10px 14px;
  background: var(--surface-head); border-bottom: 1px solid #2f2f2f;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
}
table.m-table td {
  padding: 11px 14px; border-bottom: 1px solid #222;
  color: var(--ink-body); line-height: 1.55; vertical-align: top;
}
table.m-table tr:last-child td { border-bottom: none; }
table.m-table th.num, table.m-table td.num { text-align: right; }
table.m-table td.num {
  font-family: var(--font-mono); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* persona contrast table: short SD/D/A/SA pills × 7 persona columns keep it
   inside the page width — no scrolling on desktop (Zapador 2026-07-30); the
   min-widths only bite on narrow phones. The width hint keeps the proposition
   column narrow so long propositions wrap to two lines instead of forcing a
   horizontal scroll (note #204). */
.m-tablebox--contrast table.m-table { min-width: 620px; }
.m-tablebox--contrast table.m-table td:first-child { min-width: 200px; width: 30%; }
.m-tablebox--contrast table.m-table th:not(:first-child),
.m-tablebox--contrast table.m-table td:not(:first-child) { text-align: center; padding-left: 8px; padding-right: 8px; }
.m-tablebox--contrast table.m-table td:not(:first-child) .m-pos { justify-content: center; }
/* Sortable column headers (stability table, review note #38): the filled
   triangle marks the active sort column and its direction; the hollow one
   marks the other sortable columns. */
table.m-table th.m-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.m-table th.m-sortable:hover { color: var(--ink); }
table.m-table th.m-sortable::after {
  content: "△"; margin-left: 6px; font-size: 9px; color: var(--ink-4);
}
table.m-table th.m-sortable[data-dir="asc"]::after { content: "▲"; color: var(--accent); }
table.m-table th.m-sortable[data-dir="desc"]::after { content: "▼"; color: var(--accent); }
.m-table-note {
  padding: 10px 14px; background: var(--surface-sunken);
  border-top: 1px solid #222;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  color: var(--ink-4);
}

/* ---- answer pills ----------------------------------------------------- */
/* Direction: cool graphite = disagree, warm graphite = agree (per Zapador
   ~10% more saturated than the design's near-neutrals, and the mild levels
   get a background too). Strength: glyph −− − + ++ plus stronger bg/border.
   Three redundant channels — legible in greyscale and CVD.
   2026-08-01 (Zapador): the strong ink colours got +10 pts saturation and
   the mild inks −5 pts lightness, so adjacent strong/mild pairs read as
   distinct when side by side (e.g. the consensus bar on the main page);
   the same four values live in .pos-N and .cons-p0..3 (style.css). */
.m-pos {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 24px; padding: 3px 9px;
  border-radius: var(--r-sm); border: 1px solid;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.m-pos::before { width: 16px; text-align: center; flex: none; }
/* Short form (SD / D / A / SA) for dense tables: glyph flush against the
   abbreviation, so a 7-column contrast table fits without scrolling. */
.m-pos--short { gap: 0; padding: 3px 7px; }
.m-pos--short::before { width: auto; }
.m-pos-0 { border-color: #4b5a66; background: #28323b; color: #cfdde9; }
.m-pos-0::before { content: "−−"; letter-spacing: 0; }
.m-pos-1 { border-color: #3b464e; background: #20272c; color: #9aacb7; }
.m-pos-1::before { content: "−"; }
.m-pos-2 { border-color: #4c4234; background: #2a251d; color: #b29f7f; }
.m-pos-2::before { content: "+"; }
.m-pos-3 { border-color: #5e5138; background: #3a3122; color: #e6d3ac; }
.m-pos-3::before { content: "++"; letter-spacing: 0; }

/* ---- headline stats --------------------------------------------------- */
.m-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: #242424; border: 1px solid #242424;
  border-radius: var(--r); overflow: hidden; margin: 22px 0;
}
/* Wide viewports: give the two wordy tiles (reasons chars, models tested)
   extra width taken from the four short ones, so their labels wrap less
   and the row stays shorter. */
@media (min-width: 900px) {
  .m-stats { grid-template-columns: 1fr 1fr 1fr 1.4fr 1.4fr 1fr; }
  /* the colophon's 8 tiles: two clean rows of 4 at content width, not
     section 00's weighted 6 (auto-fit would wrap them 6+2) */
  .m-stats.m-stats-cc { grid-template-columns: repeat(4, 1fr); }
  /* the verdicts box's 4 tiles (TODO 98): one clean row of 4 */
  .m-stats.m-stats-v62 { grid-template-columns: repeat(4, 1fr); }
}
.m-stat {
  background: var(--surface-sunken); padding: 14px 16px;
  font-size: 13px; line-height: 1.45; color: var(--ink-3);
}
.m-stat-n {
  display: block; margin-bottom: 2px;
  font-family: var(--font-mono); font-size: 20px; color: var(--ink-hi);
  font-variant-numeric: tabular-nums;
}
/* second number/label pair stacked in the same tile */
.m-stat-n.m-stat-n2 { margin-top: 10px; }

/* ---- persona lists ---------------------------------------------------- */
.m-sec ul.m-personas { max-width: 76ch; }
ul.m-personas li {
  display: grid; grid-template-columns: 14px 1fr; gap: 12px;
  align-items: start; padding: 11px 0;
  border-bottom: 1px solid var(--rule-faint);
}
.m-pswatch { width: 10px; height: 10px; border-radius: 2px; margin-top: 7px; }
.m-pname { font-weight: 600; color: var(--ink); }
ul.m-personas .m-pdescr {
  display: block; color: var(--ink-2); font-size: 15px; line-height: 1.55;
}

/* ---- click-a-dot run modal -------------------------------------------- */
.m-hit--link { cursor: pointer; }
#m-run-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 6, 6, 0.76);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#m-run-overlay[hidden] { display: none; }
.mro-panel {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 5px; width: min(760px, 100%);
  max-height: min(86vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
}
.mro-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 16px; border-bottom: 1px solid #2a2a2a;
  background: #1a1a1a;
}
.mro-swatch {
  width: 14px; height: 14px; border-radius: var(--r-sm); flex: none;
  margin-top: 7px;
}
.mro-swatch[hidden] { display: none; }
.mro-head-main { flex: 1; min-width: 0; }
.mro-head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 21px; line-height: 1.2; color: var(--ink-hi);
}
.mro-head .mro-sub {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.02em; margin-top: 6px;
}
#mro-close {
  width: 44px; height: 44px; flex: none; margin: -6px -8px 0 0;
  border: 1px solid #3a3a3a; border-radius: var(--r-sm);
  background: var(--control); color: var(--ink-2);
  font-size: 15px; line-height: 1; cursor: pointer;
}
#mro-close:hover { background: var(--control-active); color: var(--ink); }
.mro-dist {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 20px; border-bottom: 1px solid #242424; background: #141414;
}
.mro-dist[hidden] { display: none; }
.mro-dist-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4); margin-right: 6px;
}
.mro-dist-total {
  margin-left: auto; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-4);
}
.mro-body { overflow-y: auto; flex: 1; min-height: 0; }
/* The original prompt shown in the overlay shell (review note #20) — same
   look as the .m-pcard pre prompt cards, slightly roomier. */
.mro-body .m-modal-prompt {
  margin: 0; padding: 18px 20px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere;
}
.mro-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 4px 14px; align-items: start;
  padding: 12px 20px; border-bottom: 1px solid var(--rule-faint);
}
.mro-row:last-child { border-bottom: none; }
.mro-num {
  font-family: var(--font-mono); font-size: 12px; color: #5a5a58;
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.mro-q { font-size: 14.5px; color: var(--ink-body); line-height: 1.5; text-wrap: pretty; }
.mro-row .m-pos { justify-self: end; }
.mro-why {
  grid-column: 2 / -1; font-size: 13px; color: var(--ink-3); line-height: 1.55;
}
.mro-note { padding: 14px 20px; font-size: 14px; color: var(--ink-3); }
.mro-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 20px; border-top: 1px solid #2a2a2a; background: #141414;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4);
}
.mro-foot[hidden] { display: none; }

/* ---- responsive ------------------------------------------------------- */
/* ---- variation bar charts (Fig 7.2/7.3) -------------------------------------
   Both bars are a RANGE in compass units and share one domain across the
   economic and social charts, so the social chart reads as the stubs it
   should. Solid fill = run-to-run; hatched = prompt-to-prompt. */
.m-bars {
  background: var(--chart);
  padding: 18px 20px 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.m-bar-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.m-bar-name {
  font-size: 12.5px; color: var(--ink); font-weight: 600;
  text-align: right; line-height: 1.25;
}
.m-bar-pair { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m-bar-line { display: grid; grid-template-columns: 1fr 46px; gap: 10px; align-items: center; }
.m-bar-track { height: 11px; background: #191919; border-radius: 2px; overflow: hidden; }
.m-bar { height: 100%; border-radius: 2px; }
.m-bar-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-2); text-align: right;
  font-variant-numeric: tabular-nums;
}
.m-bar-val--na { color: #6d6d6a; font-size: 10.5px; }
.m-bar-key {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 10px 20px 0; font-size: 11.5px; color: var(--ink-2);
}
.m-bar-key span { display: inline-flex; align-items: center; gap: 7px; }
.m-bar-key i { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }
.m-bar-axis {
  display: flex; justify-content: space-between;
  padding: 8px 20px 0; margin-left: 164px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: #6d6d6a;
}

/* ---- response-length bars (Fig 3.1) --------------------------------------
   Same anatomy as Fig 7.2/7.3 but one bar per row and ~50 rows, so the vertical
   rhythm is tightened. Bar hue = company group color (identity sits in the
   row label, so same-company bars sharing a hue is intended grouping). */
.m-bars--dense { gap: 6px; }

/* ---- refusal bars (Fig 3.2) ---------------------------------------------
   One stacked bar per model × prompt × route cell: bar length = attempts,
   the full-strength model color = refusals, the dimmed step = answered runs.
   The loud step is the refusals deliberately — that is what the figure is
   about — and every row carries its counts, because the denominators are
   small enough that a bare proportion would overstate the precision. */
.m-rfz {
  background: var(--chart);
  padding: 18px 20px 6px;
  display: flex; flex-direction: column; gap: 16px;
}
/* Prompt-section heading over a run of model groups (note #218); sized about
   30% above the 10.5px label scale per note #227. */
.m-rfz-sec {
  font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  padding-bottom: 2px; border-bottom: 1px solid #242424;
}
.m-rfz-sec:not(:first-child) { margin-top: 6px; }
.m-rfz-group { display: flex; flex-direction: column; gap: 5px; }
.m-rfz-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.m-rfz-head i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.m-rfz-head span { font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.m-rfz-line {
  display: grid; grid-template-columns: 132px 1fr 94px;
  gap: 12px; align-items: center;
}
.m-rfz-route {
  font-size: 11.5px; color: var(--ink-2); text-align: right;
  overflow-wrap: anywhere;
}
.m-rfz-track { height: 11px; background: #191919; border-radius: 2px; }
.m-rfz-fill { height: 100%; display: flex; gap: 2px; }
.m-rfz-fill span:first-child { border-radius: 2px 0 0 2px; }
.m-rfz-fill span:last-child  { border-radius: 0 2px 2px 0; }
.m-rfz-fill span:only-child  { border-radius: 2px; }
.m-rfz-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.m-rfz-val span { color: #6d6d6a; }
.m-rfz-val--zero { color: #6d6d6a; }
.m-rfz-val--na { font-family: inherit; font-size: 10.5px; color: #6d6d6a; white-space: nowrap; }
.m-rfz-key {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 4px 20px 14px; font-size: 11.5px; color: var(--ink-2);
  background: var(--chart);
}
.m-rfz-key span { display: inline-flex; align-items: center; gap: 7px; }
.m-rfz-key i { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }
.m-rfz-sw-ref  { background: #b4b3b0; }
.m-rfz-sw-done { background: #6a6968; }
.m-rfz-key-note { color: #6d6d6a; }

/* ---- production colophon ----------------------------------------------
   Appendix under the last section: deliberately muted (grey eyebrow, dim
   serif heading, ink-3 prose) so it reads as trivia, not as a section of
   the methodology itself. */
.m-colophon { margin-top: 110px; scroll-margin-top: 24px; }
.m-colophon .m-eyebrow { color: var(--ink-4); }
.m-colophon h2 {
  margin: 16px 0 0; max-width: 34ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 1.22; letter-spacing: -0.008em;
  color: var(--ink-2);
}
.m-colophon p {
  margin: 14px 0; max-width: 74ch;
  font-size: 15px; line-height: 1.64; color: var(--ink-3); text-wrap: pretty;
}
.m-colophon a { color: var(--ink-2); }

/* ---- caricature appendix A3 (TODO 81) ---------------------------------
   A2 appendix: a regular m-sec (it carries a full figure + persona list) with the same
   muted appendix chrome as the colophon/music: dimmed eyebrow, headline in
   the quieter appendix voice. */
.m-appx { margin-top: 72px; }
.m-appx .m-eyebrow { color: var(--ink-4); }
.m-appx .m-sec-head h2 {
  font-weight: 400; font-size: 24px; letter-spacing: -0.008em;
  color: var(--ink-2); max-width: 34ch;
}

/* ---- music appendix (TODO 43) -----------------------------------------
   "Pick your poison": one song, six Suno renders, the lyric sheet and the
   prompt that produced it. Same muted appendix chrome as the colophon. */
.m-music { margin-top: 72px; scroll-margin-top: 24px; }
.m-music .m-eyebrow { color: var(--ink-4); }
.m-music h2 {
  margin: 16px 0 0; max-width: 34ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 1.22; letter-spacing: -0.008em;
  color: var(--ink-2);
}
.m-music p {
  margin: 14px 0; max-width: 74ch;
  font-size: 15px; line-height: 1.64; color: var(--ink-3); text-wrap: pretty;
}
.m-music a { color: var(--ink-2); }
.m-music h3 { margin: 34px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.m-music .m-music-credit { margin-top: 4px; font-size: 13px; }
.m-music-pick {
  margin: 24px 0 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-4);
}
.m-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.m-track {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.m-track-bar {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px; background: var(--surface-head);
  border-bottom: 1px solid var(--rule);
}
.m-track-name {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2);
}
.m-playing .m-track-name { color: var(--accent); }
.m-track-time {
  margin-left: auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.m-track-body { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.m-track-play {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-control); border-radius: var(--r-sm);
  background: var(--control); color: var(--ink-body); cursor: pointer;
}
.m-track-play:hover { background: var(--control-active); color: var(--ink); }
.m-playing .m-track-play { border-color: var(--accent); color: var(--accent); }
.m-track-play .m-tp-pause { display: none; }
.m-playing .m-track-play .m-tp-play { display: none; }
.m-playing .m-track-play .m-tp-pause { display: block; }
.m-track-seek {
  flex: 1; display: flex; align-items: center; min-height: 40px;
  cursor: pointer; touch-action: none;
}
.m-track-rail { height: 6px; width: 100%; background: #191919; border-radius: 2px; overflow: hidden; }
.m-track-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; }
.m-track-style {
  padding: 0 14px 12px; margin-top: auto;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
}
.m-track-style span {
  display: block; margin-bottom: 2px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4);
}
/* "Listen on Spotify" pill — only rendered on tracks with a streaming link */
.m-track-spotify {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start; margin: 0 14px 12px; padding: 6px 13px;
  border: 1px solid rgba(30, 215, 96, 0.4); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #1ed760; text-decoration: none;
}
.m-track-spotify:hover { background: rgba(30, 215, 96, 0.12); }
.m-track-spotify svg { flex: none; }
/* lyric sheet: always visible, two columns on desktop, stanza tags in mono */
.m-lyrics { margin: 14px 0 22px; max-width: 76ch; columns: 2; column-gap: 56px; }
.m-lyrics p {
  margin: 0 0 16px; max-width: none; break-inside: avoid;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}
.m-lyrics .m-ltag {
  display: block; margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}
/* ---- postscript (Zapador's closing note, after the music) --------------
   His personal sign-off, so the prose sits a step brighter than the muted
   appendices above it. */
.m-postscript { margin-top: 72px; }
.m-postscript .m-eyebrow { color: var(--ink-4); }
.m-postscript p {
  margin: 14px 0; max-width: 74ch;
  font-size: 15.5px; line-height: 1.66; color: var(--ink-2); text-wrap: pretty;
}

/* ---- changelog (TODO 93) ----------------------------------------------
   The very last block on the page: a thin rule, then a default-collapsed,
   deliberately quiet <details>. Dates only, oldest first. Tokens only, so
   the light theme needs no override. */
.m-changelog {
  margin-top: 84px; padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.m-changelog > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}
.m-changelog > summary::-webkit-details-marker { display: none; }
.m-changelog > summary::marker { content: ""; }
.m-changelog > summary::before { content: "+ "; }
.m-changelog[open] > summary::before { content: "− "; }
.m-changelog > summary:hover { color: var(--ink-2); }
.m-changelog ul { margin: 12px 0 0; list-style: none; max-width: 74ch; }
.m-changelog li {
  display: grid; grid-template-columns: 92px 1fr; gap: 0 12px;
  margin: 6px 0; font-size: 13px; line-height: 1.55; color: var(--ink-3);
}
.m-cl-d { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); padding-top: 1px; }
.m-changelog a { color: var(--ink-3); }

@media (max-width: 1100px) {
  .m-layout { display: block; }
  .m-toc {
    position: sticky; top: 0; z-index: 40;
    margin: 0 -24px 28px; padding: 0 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    /* undo the desktop short-viewport safety net — overflow here would
       clip the absolutely-positioned dropdown */
    max-height: none; overflow-y: visible;
  }
  .m-toc-label { display: none; }
  .m-toc-cur {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 44px; padding: 10px 0;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-text); text-align: left;
  }
  .m-toc-cur .num {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent); white-space: nowrap;
  }
  .m-toc-cur .cur { font-size: 13.5px; color: var(--ink-2); flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-toc-cur .arrow { color: var(--ink-4); font-size: 11px; }
  .m-toc-list {
    display: none; position: absolute; left: 12px; right: 12px; top: 100%;
    background: var(--surface); border: 1px solid var(--rule-strong);
    border-radius: var(--r); padding: 6px; z-index: 41;
  }
  .m-toc.open .m-toc-list { display: flex; }
  /* keep the denser desktop spacing off the touch dropdown — 34px targets */
  .m-toc-list a { min-height: 34px; padding-top: 7px; padding-bottom: 7px; }
  .m-cb-btn { min-height: 34px; padding-top: 7px; padding-bottom: 7px; }
  .m-sec, .m-colophon, .m-music { scroll-margin-top: 78px; }
}

@media (max-width: 640px) {
  body { padding: 18px 20px 80px; }
  .m-toc { margin: 0 -20px 24px; padding: 0 20px; }
  .m-head h1 { font-size: 29px; }
  .m-deck { font-size: 16.5px; }
  .m-sec { margin-bottom: 56px; }
  .m-sec h2 { font-size: 23px; }
  .m-tldr { margin-bottom: 56px; padding: 16px 18px 20px; }
  .m-colophon { margin-top: 72px; }
  .m-colophon h2 { font-size: 20px; }
  .m-music { margin-top: 56px; }
  .m-music h2 { font-size: 20px; }
  .m-postscript { margin-top: 56px; }
  .m-changelog { margin-top: 56px; }
  .m-tracks { grid-template-columns: 1fr; }
  .m-lyrics { columns: 1; }
  .m-fig-grid { grid-template-columns: 1fr; }
  .m-pgrid { grid-template-columns: 1fr; }
  /* stability table: keep the model column readable while scrolling */
  .m-tablebox--sticky1 table.m-table th:first-child,
  .m-tablebox--sticky1 table.m-table td:first-child {
    position: sticky; left: 0; background: var(--surface);
  }
  .m-tablebox--sticky1 table.m-table th:first-child { background: var(--surface-head); }
  .m-tablebox--sticky1 table.m-table { min-width: 560px; }
  .m-bar-row { grid-template-columns: 1fr; gap: 5px; }
  .m-bar-name { text-align: left; }
  .m-bar-axis { margin-left: 0; }
  .m-bars { padding: 14px 14px 12px; }
  /* dense chart, stacked rows: keep each name visually paired with its bar */
  .m-bars--dense { gap: 12px; }
  .m-bars--dense .m-bar-row { gap: 3px; }
  .m-rfz { padding: 14px 14px 6px; }
  .m-rfz-line { grid-template-columns: 106px 1fr 66px; gap: 8px; }
  .m-rfz-route { font-size: 10.5px; }
  .m-rfz-val--na { white-space: normal; font-size: 9.5px; line-height: 1.25; }
  .m-rfz-key { padding: 4px 14px 14px; gap: 12px; }
  #m-run-overlay { padding: 0; }
  .mro-panel {
    width: 100%; height: 100dvh; max-height: none;
    border: none; border-radius: 0;
  }
}

/* ════ Light theme (TODO 64) ═══════════════════════════════════════════════
   Toggled by the "Light theme" button under the colorblind toggle (method.js
   owns the state; a pre-paint inline script in index.php's <head> applies the
   class before first render). Everything below is scoped to html.light-mode,
   so the default dark rendering is byte-identical to before.

   Design rule: the PAGE SHELL flips to warm paper; every CHART SURFACE stays
   dark exactly as today — the company/series palettes are contrast-validated
   against #212121 and are not re-derived. Chart containers therefore re-pin
   the ink tokens to their dark values ("the shield" below). Colored marks
   that sit on the page background keep their fills but get a thin dark
   border/ring instead of the white hairlines (Zapador 2026-08-08). */

html.light-mode {
  color-scheme: light;               /* UA scrollbars + form widgets */
  --bg: #f4f2ee;
  --surface: #faf9f6;
  --surface-head: #eeece6;
  --surface-sunken: #edeae4;
  /* --chart is deliberately NOT overridden */
  --control: #e7e4dd;
  --control-active: #d6d2c9;
  --rule-faint: #e7e4de;
  --rule: #dcd8d1;
  --rule-strong: #c7c3bb;
  --border-control: #a09c93;
  --ink-hi: #191813;
  --ink: #2a2925;
  --ink-2: #504e48;
  --ink-3: #6c6a63;
  --ink-4: #8a877f;
  --ink-body: #3a3934;
  --accent: #8a7645;                 /* darkened sand: holds contrast on paper */
}

/* The shield: chart surfaces and their attached legends/tooltips keep the
   dark-theme ink ramp (chart text must stay light-on-#212121). Hardcoded
   dark backgrounds inside these containers (#181818 foot, #101010 empty
   panel, #0d0d0d tooltip) are untouched by the theme anyway. */
html.light-mode .m-fig-plot,
html.light-mode .m-fig-foot,
html.light-mode .m-fig-grid,
html.light-mode .m-mini,
html.light-mode .m-bars,
html.light-mode .m-rfz,
html.light-mode .m-rfz-key,
html.light-mode #m-tip {
  --surface: #161616;
  --rule: #262626;               /* .m-fig-foot border-top, .m-fig-grid seams */
  --ink-hi: #f2f1ef;
  --ink: #e7e7e6;
  --ink-2: #b4b3b0;
  --ink-3: #8a8987;
  --ink-4: #6b6a68;
  --ink-body: #cfcecb;
  --accent: #cbbfa8;
}

/* Persona/lens colors as TEXT on the page background: index.php sets the
   palette color via --pc (was an inline color:), the theme decides how to
   paint it — verbatim on dark, darkened via color-mix on paper so pale
   personas (Charles #5ccadf, Dora #f2a883) stay legible. These rules are the
   only consumers of --pc outside #compass-app. */
table.m-table th.m-pth { color: var(--pc); }  /* outranks table.m-table th's --ink-3 */
.m-lens { color: var(--pc); }
html.light-mode table.m-table th.m-pth,
html.light-mode .m-lens { color: color-mix(in srgb, var(--pc) 62%, #1c1b17); }

/* ---- shell: hardcoded darks that tokens don't cover ------------------- */
html.light-mode ::selection { background: #d9d2c2; color: #191813; }
html.light-mode a { text-decoration-color: rgba(26, 25, 20, 0.28); }
html.light-mode .m-backlink { text-decoration-color: rgba(80, 78, 72, 0.4); }
html.light-mode .m-meta .sep { color: #c7c3bb; }
html.light-mode .m-head-rule,
html.light-mode .m-eyebrow-row::after { background: #d9d5cd; }
html.light-mode .m-toc-list a { border-left-color: #d9d5cd; }
html.light-mode .m-toc-sep { background: #d9d5cd; }
html.light-mode .m-toc-list a .num { color: #aca89f; }
html.light-mode .m-toc-list a.active { background: #e9e6df; }
html.light-mode .m-cb-btn { border-left-color: #d9d5cd; border-top-color: #d9d5cd; }
html.light-mode .m-cb-state { color: #aca89f; border-color: #c7c3bb; }
html.light-mode .m-cb-btn[aria-pressed="true"] .m-cb-state {
  color: var(--accent); border-color: var(--accent);
}
html.light-mode .m-psize { color: #aca89f; }
html.light-mode .m-protocol { border-left-color: #c6c2ba; }
html.light-mode details.m-prompt[open] summary { background: #e4e0d8; }
html.light-mode .m-fig-tbtn { border-color: #c7c3bb; }
html.light-mode table.m-table th { border-bottom-color: #c9c5bd; }
html.light-mode table.m-table td { border-bottom-color: #e2dfd8; }
html.light-mode .m-table-note { border-top-color: #e2dfd8; }
html.light-mode .m-stats { background: #d9d5cd; border-color: #d9d5cd; }
html.light-mode .mro-head { background: #eeece6; border-bottom-color: #dcd8d1; }
html.light-mode #mro-close { border-color: #c6c2ba; }
html.light-mode .mro-dist { background: #f0ede7; border-bottom-color: #dfdbd4; }
html.light-mode .mro-foot { background: #f0ede7; border-top-color: #dfdbd4; }
html.light-mode .mro-num { color: #a6a29a; }
html.light-mode .m-track-rail { background: #dbd7cf; }
/* Spotify green needs a darker shade for contrast on the light surface */
html.light-mode .m-track-spotify { color: #12873f; border-color: rgba(18, 135, 63, 0.45); }
html.light-mode .m-track-spotify:hover { background: rgba(18, 135, 63, 0.08); }

/* Colored swatches on light shell surfaces: thin dark ring so pale company/
   persona colors keep an edge (Zapador 2026-08-08). */
html.light-mode .m-pswatch,
html.light-mode .mro-swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }

/* ---- answer pills: light triads --------------------------------------- */
/* Same system as the dark set: cool = disagree, warm = agree; strong level
   = more saturated bg + darker border. Derived for the paper background —
   the dark values above are untouched. */
html.light-mode .m-pos-0 { border-color: #9db4c4; background: #dfe8ee; color: #33556c; }
html.light-mode .m-pos-1 { border-color: #bcc7cf; background: #e9edf0; color: #4d6270; }
html.light-mode .m-pos-2 { border-color: #ccc0a9; background: #efe9dd; color: #6a5836; }
html.light-mode .m-pos-3 { border-color: #c2ab7d; background: #ecdfc2; color: #5d4716; }

/* ---- prompt-variant names: darkened for paper -------------------------- */
/* Text-on-paper variants of VARIANT_COLORS/CB_VARIANT; the plots keep the
   originals (validated on #212121). Each override repeats the dark rules'
   full selector list — the li-strong and pcard forms carry extra specificity
   that a bare html.light-mode .m-vname--* would lose to. */
html.light-mode .m-vname--original,   html.light-mode .m-sec li strong.m-vname--original,   html.light-mode .m-pcard-bar .m-plabel.m-vname--original   { color: #2266c2; }
html.light-mode .m-vname--medium,     html.light-mode .m-sec li strong.m-vname--medium,     html.light-mode .m-pcard-bar .m-plabel.m-vname--medium     { color: #b34115; }
html.light-mode .m-vname--minimal,    html.light-mode .m-sec li strong.m-vname--minimal,    html.light-mode .m-pcard-bar .m-plabel.m-vname--minimal    { color: #0d7a52; }
html.light-mode .m-vname--noreasoner, html.light-mode .m-sec li strong.m-vname--noreasoner, html.light-mode .m-pcard-bar .m-plabel.m-vname--noreasoner { color: #a62b8d; }
html.light-mode.cb-mode .m-vname--original,   html.light-mode.cb-mode .m-sec li strong.m-vname--original,   html.light-mode.cb-mode .m-pcard-bar .m-plabel.m-vname--original   { color: #5a5fc7; }
html.light-mode.cb-mode .m-vname--medium,     html.light-mode.cb-mode .m-sec li strong.m-vname--medium,     html.light-mode.cb-mode .m-pcard-bar .m-plabel.m-vname--medium     { color: #a85508; }
html.light-mode.cb-mode .m-vname--minimal,    html.light-mode.cb-mode .m-sec li strong.m-vname--minimal,    html.light-mode.cb-mode .m-pcard-bar .m-plabel.m-vname--minimal    { color: #b02a38; }
html.light-mode.cb-mode .m-vname--noreasoner, html.light-mode.cb-mode .m-sec li strong.m-vname--noreasoner, html.light-mode.cb-mode .m-pcard-bar .m-plabel.m-vname--noreasoner { color: #6a2fe0; }

/* Run-modal scrim: same softening as the compass overlays in style.css. */
html.light-mode #m-run-overlay { background: rgba(30, 28, 24, 0.45); }

/* Zapador 2026-08-08, light-mode contrast round: figure-bar text near-black,
   footnote-tier text (m-note, figcaptions) one step darker, section eyebrows
   darker. The appendix eyebrows (colophon/music/postscript) stay muted. */
html.light-mode .m-fig-no,
html.light-mode .m-fig-title,
html.light-mode .m-fig-scale { color: #2a2925; }
html.light-mode p.m-note,
html.light-mode .m-fig figcaption { color: #4a4843; }
html.light-mode .m-eyebrow { color: #6b5930; }
html.light-mode .m-colophon .m-eyebrow,
html.light-mode .m-music .m-eyebrow,
html.light-mode .m-postscript .m-eyebrow { color: var(--ink-4); }

/* Scoring-weight section (TODO 69, staged on /weights2 -> future section 02).
   The chart SVG paints its own dark surface with explicit fills, so it needs
   no shield entry; the key sits on the page background and uses tokens. */
.m-wtsvg { display: block; width: 100%; height: auto; }
.m-wt-opt { cursor: help; }
.m-wtchart { padding: 12px 6px 4px; }
.m-wtkey { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 6px 2px;
           font-size: 12.5px; color: var(--ink-2); }
.m-wtkey span { display: inline-flex; align-items: center; gap: 7px; }
.m-wtkey i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.m-wtkey .m-wtnotch { width: 2px; height: 11px; border-radius: 1px; background: var(--ink-3); }

/* ---- FAQ (section 13): visible per-question permalink ------------------- */
.m-faq-link {
  margin-left: 8px;
  color: var(--ink-4);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.85em;
}
.m-faq-link:hover, .m-faq-link:focus-visible { color: var(--accent); }

/* Question-order section (section 08, TODO 74 port): server-rendered SVG
   panels sit on their own dark surface, so no theme-shield entry needed. */
.m-odsvg { display: block; width: 100%; height: auto; }
.m-odpanels { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 12px 6px 4px; }
.m-odpanels > div { flex: 1 1 380px; min-width: 300px; }
.m-odpanels h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-hi); }
.m-odpanels .m-odsub { margin: 0 0 6px; font-size: 12px; color: var(--ink-3); }
.m-odkey { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 6px 2px; font-size: 12.5px; }
.m-odkey span { display: inline-flex; align-items: center; gap: 7px; }
.m-odkey i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }