/* 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;
  --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: #cfcecb; }
.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; }

/* 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;
}

.m-toc { position: sticky; top: 24px; }
.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: 7px 0 7px 12px; min-height: 34px;
  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); }

.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 {
  margin: 0; max-width: 34ch;
  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: #cfcecb; 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: #cfcecb; 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 inside a protocol inset — same marker as the intro question list */
.m-protocol ul.m-dash { margin: 8px 0 0; max-width: 70ch; list-style: none; }
.m-protocol 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);
}
.m-protocol 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: #cfcecb; 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: #cfcecb; }
.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); }

/* 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); }
/* 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);
}
.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; }
.m-mini h3 {
  font-size: 13px; font-weight: 600; color: #cfcecb; 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: #cfcecb;
  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; }
.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; }

/* 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 2.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: #cfcecb;
  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: #cfcecb; 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: wide pills × 5 columns — let it scroll in its box
   instead of crushing the proposition column */
/* Short SD/D/A/SA pills keep this inside the page width — no scrolling on
   desktop (Zapador 2026-07-30); the min-width only bites on narrow phones. */
.m-tablebox--contrast table.m-table { min-width: 620px; }
.m-tablebox--contrast table.m-table td:first-child { min-width: 260px; }
.m-tablebox--contrast table.m-table th:not(:first-child),
.m-tablebox--contrast table.m-table td:not(:first-child) { text-align: center; }
.m-tablebox--contrast table.m-table td:not(:first-child) .m-pos { justify-content: center; }
.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 (style.css) and CONS_COLORS (app.js). */
.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 row has 7 tiles, not section 00's weighted 6 */
  .m-stats.m-stats-cc { grid-template-columns: repeat(auto-fit, minmax(150px, 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: 3px;
  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: 8px; }

/* ---- 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; }
.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: #cfcecb; 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 3.2) -------------------------------------
   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 0.1) --------------------------------------
   Same anatomy as Fig 3.2 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 0.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;
}
.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; }
.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); }

@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);
  }
  .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; }
  .m-sec { 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-colophon { margin-top: 72px; }
  .m-colophon h2 { font-size: 20px; }
  .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;
  }
}