/* ============================================================
   Direction B "The Instrument" — design tokens (August 2026).
   Light + dark palettes from the design handoff, followed by a
   legacy-alias block mapping the pre-redesign token names (used
   throughout this file and in scripts.js' generated markup) onto
   the new set, so every existing rule resolves in both themes.
   ============================================================ */
:root {
  /* ground + ink */
  --bg: #fafaf7;
  --bg2: #f0f0ea;          /* secondary ground: cards, quote plates */
  --ink: #141412;
  --muted: #5b5b53;        /* secondary text */
  --faint: #8d8d83;        /* tertiary: captions, footers */
  --hair: #dcdcd3;         /* hairline rules, card borders */
  --rule: #141412;         /* strong structural rules (2px section tops) */

  /* accents — reserved for wayfinding, active nav, endpoints */
  --acc: #e86f00;          /* pumpkin, brand carry-over */
  --link: #b35400;         /* link resting color (AA on --bg) */

  /* semantic grades: pill bg / pill ink / chart fill
     Order is fixed: Pass → Pass-adjacent → Verbose → Fail.
     Never encode grade by color alone — pills keep text labels. */
  --pass-bg: #dcead0;     --pass-ink: #2e5527;     --pass-fill: #7fb45f;
  --padj-bg: #d6e6e1;     --padj-ink: #24544a;     --padj-fill: #5fa896;
  --verbose-bg: #f1e3b2;  --verbose-ink: #6e5510;  --verbose-fill: #d9b13c;
  --fail-bg: #f3d3cd;     --fail-ink: #8f2f26;     --fail-fill: #d97b6f;

  /* type */
  --font-display: 'Archivo', sans-serif;                    /* 700–900, caps for H1/nav */
  --font-body: 'IBM Plex Sans', 'Noto Sans SC', 'PingFang SC',
               'Hiragino Sans GB', sans-serif;              /* body, all five languages */
  --font-mono: 'IBM Plex Mono', monospace;                  /* data, labels, prompt lines */

  /* type scale (px): 11 / 12 / 13.5 / 16 / 20 / 26 / 34 / 44 / 64
     spacing scale: 4-base — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 56 */
}

/* Dark palette. Three states: an explicit choice stamps data-theme on the
   root element and wins in both directions; with no attribute set, the
   system preference decides. The dark block appears twice by necessity —
   once guarded for system-dark, once for the explicit override. Keep the
   two lists identical when editing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151513;
    --bg2: #1d1d1a;
    --ink: #e9e7df;
    --muted: #a3a196;
    --faint: #6e6d64;
    --hair: #2e2e29;
    --rule: #e9e7df;
    --acc: #ff8b2b;
    --link: #ff9d4d;
    --pass-bg: #24361f;     --pass-ink: #a8d694;     --pass-fill: #6f9e53;
    --padj-bg: #1c332e;     --padj-ink: #8fcfbf;     --padj-fill: #549586;
    --verbose-bg: #3a2f10;  --verbose-ink: #e3c05e;  --verbose-fill: #bd9a34;
    --fail-bg: #3c1b17;     --fail-ink: #f09a8f;     --fail-fill: #bd6a60;
  }
}
:root[data-theme="dark"] {
  --bg: #151513;
  --bg2: #1d1d1a;
  --ink: #e9e7df;
  --muted: #a3a196;
  --faint: #6e6d64;
  --hair: #2e2e29;
  --rule: #e9e7df;
  --acc: #ff8b2b;
  --link: #ff9d4d;
  --pass-bg: #24361f;     --pass-ink: #a8d694;     --pass-fill: #6f9e53;
  --padj-bg: #1c332e;     --padj-ink: #8fcfbf;     --padj-fill: #549586;
  --verbose-bg: #3a2f10;  --verbose-ink: #e3c05e;  --verbose-fill: #bd9a34;
  --fail-bg: #3c1b17;     --fail-ink: #f09a8f;     --fail-fill: #bd6a60;
}

/* Legacy aliases — pre-redesign names still referenced below and in
   scripts.js generated markup. Aliases resolve through the new tokens,
   so dark mode propagates without touching a single downstream rule. */
:root {
  --bg-alt: var(--bg2);
  --light: var(--hair);
  --pumpkin: var(--acc);
  --olive: var(--muted);        /* old secondary accent roles collapse to muted… */
  --olive-dark: var(--ink);     /* …and their hover/active states to ink */
  --steel: var(--muted);

  --pass-text: var(--pass-ink);
  --passadj-bg: var(--padj-bg);   --passadj-text: var(--padj-ink);
  --verbose-text: var(--verbose-ink);
  --fail-text: var(--fail-ink);

  --serif: var(--font-display);
  --sans: var(--font-body);
  --mono: var(--font-mono);
}

/* ---- companion rules (handoff tokens.css) ---- */

/* tabular figures everywhere numbers columnize */
table, .tally-row, .transcript-meta, .transcript-id, .chart-tick { font-variant-numeric: tabular-nums; }

/* reduced-motion guard — in place before any motion is introduced */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}
/* Vendor transcript pages are deliberately narrower — a different silhouette. */
body:has(#vendor-rail) main { max-width: 880px; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover, a:focus { color: var(--acc); }

:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  text-decoration: none;
  font-family: var(--sans);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; color: var(--bg); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-header-top {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.site-header-titles { flex: 1 1 auto; min-width: 0; }
.site-header-graphic {
  flex: 0 0 auto;
  width: 36%;
  max-width: 380px;
  min-width: 230px;
  border: 1px solid var(--hair);
  padding: 10px;
  background: #f5f0e8; /* the original cream, retained deliberately in both themes */
}
.header-graphic-img { width: 100%; height: auto; display: block; }
/* The parenthetical stays together only while it fits. Under the display
   face a long one (e.g. "(Qwen, open-weight)") is wider than the title
   column, so it must be allowed to wrap rather than run under the plate.
   The non-breaking hyphen still keeps "open-weight" itself intact. */
.site-title .title-paren { white-space: normal; }
@media (max-width: 720px) {
  .site-header-top { flex-direction: column; align-items: stretch; gap: 4px; }
  .site-header-graphic {
    width: 100%;
    max-width: 460px;
    min-width: 0;
    margin: 4px 0 8px;
  }
}

h1.site-title {
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
  overflow-wrap: break-word;
  hyphens: auto;
}
body:has(#vendor-rail) h1.site-title { font-size: clamp(26px, 3.4vw, 44px); }
h1.site-title .title-logo {
  display: inline-block;
  width: 44px;
  height: 44px;
  margin-right: 18px;
  vertical-align: -6px;
  background-color: var(--ink);
  -webkit-mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--logo-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
@media (max-width: 640px) {
  h1.site-title .title-logo {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    vertical-align: -4px;
  }
}

.site-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0 0 24px;
}

footer strong { color: var(--ink); font-weight: 700; }

.site-rule {
  border: 0;
  border-top: 1px solid var(--light);
  margin: 24px 0 20px;
}

.prompt-line {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--bg-alt);
  border-left: 2px solid var(--ink);
  padding: 14px 18px;
  margin: 0 0 24px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--hair);
  padding: 12px 0;
  margin-bottom: 8px;
}
.site-nav a {
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 2px;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.active {
  color: var(--ink);
  box-shadow: 0 3px 0 var(--acc);
}

section { margin: 48px 0; }

h2 { font-size: 26px; margin: 0 0 16px; }
h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 32px 0 12px;
}

p { margin: 0 0 16px; }

blockquote, .methodology-block {
  margin: 0 0 20px;
  padding: 20px 24px;
  background: var(--bg-alt);
  border-left: 2px solid var(--ink);
}
blockquote p:last-child, .methodology-block p:last-child { margin-bottom: 0; }

ul { padding-left: 22px; }
li { margin-bottom: 6px; }

/* Tally row */
.tally-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 32px;
}
.tally-card {
  background: var(--bg-alt);
  border: 1px solid var(--light);
  padding: 16px;
  text-align: center;
}
.tally-card .count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.tally-card .label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tally-card .desc {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.85;
}
.tally-card.tally-pass         { background: var(--pass-bg);    border-color: var(--pass-text); }
.tally-card.tally-pass .count,
.tally-card.tally-pass .label,
.tally-card.tally-pass .desc   { color: var(--pass-text); }
.tally-card.tally-pass-adjacent        { background: var(--passadj-bg); border-color: var(--passadj-text); }
.tally-card.tally-pass-adjacent .count,
.tally-card.tally-pass-adjacent .label,
.tally-card.tally-pass-adjacent .desc  { color: var(--passadj-text); }
.tally-card.tally-verbose         { background: var(--verbose-bg); border-color: var(--verbose-text); }
.tally-card.tally-verbose .count,
.tally-card.tally-verbose .label,
.tally-card.tally-verbose .desc   { color: var(--verbose-text); }
.tally-card.tally-fail         { background: var(--fail-bg);    border-color: var(--fail-text); }
.tally-card.tally-fail .count,
.tally-card.tally-fail .label,
.tally-card.tally-fail .desc   { color: var(--fail-text); }

/* Download CSV button */
.csv-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--light);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.csv-btn:hover {
  border-color: var(--ink);
  color: var(--bg);
  background: var(--ink);
}
.csv-btn:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 2px;
}

/* Results table */
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.results-table th, .results-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--light);
  vertical-align: top;
}
.results-table th {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
.results-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 22px;
}
.results-table th.sortable::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  opacity: 0.35;
  background-image: linear-gradient(transparent 3px, currentColor 3px, currentColor 5px, transparent 5px);
}
.results-table th.sortable:hover { color: var(--ink); }
.results-table th.sortable:hover::after { opacity: 0.65; }
.results-table th.sort-asc, .results-table th.sort-desc { color: var(--ink); }
.results-table th.sort-asc::after {
  background-image: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  width: 0; height: 0;
  opacity: 1;
}
.results-table th.sort-desc::after {
  background-image: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  width: 0; height: 0;
  opacity: 1;
}
.results-table td.col-id { font-family: var(--mono); color: var(--muted); width: 40px; }
.results-table tr:hover td { background: var(--bg-alt); }
.results-table a { text-decoration: none; }
.results-table a:hover { text-decoration: underline; }

/* Legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
.legend-item { display: flex; align-items: center; gap: 8px; }

/* Tally charts */
.charts-row {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.chart-card {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
}
.chart-card figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  text-align: center;
}
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-value {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
}
.chart-axis { stroke: var(--light); stroke-width: 1; }
.chart-card-wide {
  margin-top: 20px;
  margin-bottom: 36px;
}
.chart-callout {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  text-align: left;
  font-style: italic;
}
.chart-note {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  text-align: left;
}
.chart-ratio-callout {
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
  margin: 12px 0 2px;
  text-align: center;
}
.chart-ratio-callout strong { color: var(--pumpkin); font-weight: 700; }
.chart-ratio-sub {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.chart-annotation {
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  fill: var(--ink);
}
.chart-tick { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); }
.chart-rowlabel { font-family: var(--font-mono); font-size: 11px; fill: var(--ink); }
.chart-endlabel { font-family: var(--sans); font-weight: 700; font-size: 12px; }
.chart-more {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin: 10px 0 0;
}
.chart-legend-list {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 6px 0 0;
  padding-left: 20px;
}
.chart-legend-list strong { color: var(--ink); }

/* Per-vendor language subsections (transcript pages) */
.lang-runs-section {
  margin-top: 44px;
  border-top: 2px solid var(--light);
  padding-top: 8px;
}
.reasoning-trace summary { color: var(--faint); }

/* ── Multilingual corpora (metrics page) ─────────────────────────────── */
.corpus-divider { border: 0; border-top: 2px solid var(--light); margin: 48px 0 0; }
.corpus-prompt {
  background: var(--bg-alt);
  border-left: 3px solid var(--olive);
  padding: 16px 20px;
  margin: 10px 0 14px;
}
.corpus-prompt-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 8px;
}
.corpus-prompt blockquote {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.translation, .methodology-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.corpus-tokennote { text-align: left; }
.corpus-summary { margin-top: 16px; }
.corpus-summary p { margin: 0 0 12px; line-height: 1.6; }
.corpus-summary p[lang] { color: var(--muted); }
.corpus-note {
  font-size: 13.5px;
  color: var(--ink);
  border-left: 2px solid var(--pumpkin);
  padding-left: 14px;
}
.findings-list { font-size: 14px; line-height: 1.55; margin: 14px 0 0; padding-left: 20px; }
.findings-list li { margin-bottom: 8px; }
.findings-list strong { color: var(--ink); }
.cross-lang-table td, .cross-lang-table th { text-align: left; }
.cross-lang-table .na { color: var(--muted); text-align: center; }

/* ── Methodology page polish ─────────────────────────────────────────── */
.methodology-lede {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  max-width: 46em;
  margin: 4px 0 0;
}
.methodology-page section > h2 {
  position: relative;
  padding-bottom: 9px;
}
.methodology-page section > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--acc);
}

/* Rubric cards */
.rubric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}
.rubric-card {
  border: 1px solid var(--light);
  border-left-width: 4px;
  padding: 16px 18px;
}
.rubric-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.rubric-label {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
}
.rubric-gloss {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
}
.rubric-card.r-pass    { background: var(--pass-bg);    border-color: var(--pass-text); }
.rubric-card.r-passadj { background: var(--passadj-bg); border-color: var(--passadj-text); }
.rubric-card.r-verbose { background: var(--verbose-bg); border-color: var(--verbose-text); }
.rubric-card.r-fail    { background: var(--fail-bg);    border-color: var(--fail-text); }
.rubric-card.r-pass .rubric-label, .rubric-card.r-pass .rubric-gloss { color: var(--pass-text); }
.rubric-card.r-passadj .rubric-label, .rubric-card.r-passadj .rubric-gloss { color: var(--passadj-text); }
.rubric-card.r-verbose .rubric-label, .rubric-card.r-verbose .rubric-gloss { color: var(--verbose-text); }
.rubric-card.r-fail .rubric-label, .rubric-card.r-fail .rubric-gloss { color: var(--fail-text); }

/* Paired prompt cards */
.prompt-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 8px;
}
.prompt-card {
  margin: 0;
  background: var(--bg-alt);
  border: 1px solid var(--light);
  border-left: 3px solid var(--ink);
  padding: 16px 18px;
}
.prompt-card-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}
.prompt-card-use {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 10px;
}
.prompt-card-text {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 640px) { .prompt-cards { grid-template-columns: 1fr; } }

/* Field-note callouts */
.callout {
  background: var(--bg-alt);
  border: 1px solid var(--light);
  border-left: 3px solid var(--pumpkin);
  padding: 16px 20px;
  margin: 12px 0 16px;
}
.callout p { margin: 0; }
.callout-tag {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--pumpkin);
  padding: 2px 8px;
  margin-bottom: 10px;
}
.callout-specimen { border-left-color: var(--olive); }
.callout-specimen .callout-tag { background: var(--olive); }
.callout-specimen p { font-family: var(--mono); font-size: 14px; line-height: 1.55; }
@media (max-width: 560px) {
  .charts-row { gap: 20px; }
}

/* Grade pills — square corners; grade is never encoded by color alone,
   every pill keeps its text label and the four-step order is fixed. */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid currentColor;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  text-align: center;
  white-space: nowrap;
}
.badge.pass         { background: var(--pass-bg);    color: var(--pass-text); }
.badge.pass-adjacent{ background: var(--passadj-bg); color: var(--passadj-text); }
.badge.verbose      { background: var(--verbose-bg); color: var(--verbose-text); }
.badge.fail         { background: var(--fail-bg);    color: var(--fail-text); }
/* Result-pill cells: center the fixed-width pill so it sits consistently in
   both the tight results tables and the wider cross-corpus tables. */
td:has(> .badge) { text-align: center; }

/* Family card grid */
.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.family-card {
  display: block;
  text-decoration: none;
  background: var(--bg-alt);
  border: 1px solid var(--light);
  padding: 20px;
  color: var(--ink);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.family-card:hover { border-color: var(--ink); color: var(--ink); }
.family-card:hover .family-logo { background-color: var(--pumpkin); }
.family-logo {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  background-color: var(--ink);
  -webkit-mask: var(--logo-url) no-repeat center / contain;
          mask: var(--logo-url) no-repeat center / contain;
  transition: background-color 0.15s ease;
}
.family-card .family-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  display: block;
  margin-bottom: 6px;
  line-height: 1.15;
}
.family-card .family-count {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Purpose-optimized category grouping */
.family-group-divider {
  border: 0;
  border-top: 1px solid var(--light);
  margin: 36px 0 0;
}
.family-group-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
  margin: 24px 0 4px;
}
.family-group-heading .family-group-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--pumpkin);
  align-self: center;
}
.family-group-heading .family-group-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.family-group-heading h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0;
}
.family-group-heading p {
  flex: 1 1 100%;
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
}
.family-grid-purpose-optimized { margin-top: 16px; }

.category-intro {
  font-size: 17px;
  line-height: 1.6;
  border-left: 2px solid var(--pumpkin);
  padding-left: 18px;
  color: var(--ink);
  margin: 8px 0 0;
}

/* Purpose-optimized rail pill */
.vendor-rail-sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: var(--light);
  margin: 0 4px;
}
.vendor-pill-purpose-optimized {
  border-style: dashed;
  border-color: var(--pumpkin);
  color: var(--pumpkin);
}
.vendor-pill-purpose-optimized:hover {
  color: var(--bg);
  background: var(--pumpkin);
  border-color: var(--pumpkin);
}
.vendor-pill-purpose-optimized.active {
  color: var(--bg);
  background: var(--pumpkin);
  border-color: var(--pumpkin);
}
/* Open-weight rail pill (distinct olive accent vs. the pumpkin purpose-optimized) */
.family-grid-open-weight { margin-top: 16px; }
.vendor-pill-open-weight {
  border-style: dashed;
  border-color: var(--olive);
  color: var(--olive);
}
.vendor-pill-open-weight:hover,
.vendor-pill-open-weight.active {
  color: var(--bg);
  background: var(--olive);
  border-color: var(--olive);
}
.vendor-pill .pill-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.vendor-pill .pill-icon svg { width: 14px; height: 14px; display: block; }

/* Title icon (purpose-optimized page header) */
h1.site-title .title-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  vertical-align: -6px;
  color: var(--pumpkin);
}
h1.site-title .title-icon svg { width: 40px; height: 40px; display: block; }
@media (max-width: 640px) {
  h1.site-title .title-icon { width: 30px; height: 30px; margin-right: 12px; }
  h1.site-title .title-icon svg { width: 30px; height: 30px; }
}

/* Static methodology tables */
.methodology-table { margin: 16px 0 8px; }
.methodology-table td { vertical-align: top; }

/* Results table caption */
.results-table caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 8px;
}

/* Transcript entries */
.transcript-entry {
  border-top: 1px solid var(--light);
  padding: 24px 0;
}
.transcript-entry:first-of-type { border-top: 1px solid var(--ink); }
.transcript-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.transcript-id {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}
.transcript-model {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.transcript-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}
.transcript-meta > span { display: inline-flex; align-items: center; }

details {
  border: 1px dashed var(--hair);
  background: var(--bg2);
  padding: 0;
  margin-top: 8px;
}
details summary {
  cursor: pointer;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}
details[open] summary { border-bottom: 1px solid var(--light); }
details > div {
  padding: 16px 18px;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
}

.transcript-notes {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 2px solid var(--muted);
  background: transparent;
  font-size: 14px;
  color: var(--ink);
  font-style: italic;
}

.transcript-attachment {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 2px solid var(--pumpkin);
  background: var(--bg-alt);
  font-size: 14px;
}
.transcript-attachment a { text-decoration: none; }
.transcript-attachment a::before {
  content: "↓ ";
  color: var(--pumpkin);
  font-weight: 700;
  margin-right: 4px;
}
.transcript-attachment .attachment-label {
  font-style: italic;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.transcript-attachment a:hover .attachment-label {
  color: var(--pumpkin);
  border-bottom-color: var(--pumpkin);
}
.transcript-attachment .attachment-desc {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

/* Change log timeline */
.change-log {
  border-left: 1px solid var(--light);
  padding-left: 24px;
  margin-top: 16px;
}
.change-log-entry {
  position: relative;
  padding-bottom: 20px;
}
.change-log-entry::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.change-log-date {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.change-log-summary { font-size: 14px; color: var(--ink); }

/* Footer */
footer {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  font-size: 13px;
  color: var(--muted);
}
footer p { margin-bottom: 10px; }
footer .disclaimer { font-size: 12px; line-height: 1.5; }
footer .copyright { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
footer .related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding: 16px 0;
  border-top: 1px solid var(--light);
  border-bottom: 1px solid var(--light);
}
footer .related-links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
footer .related-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Errors */
.load-error {
  padding: 16px;
  background: var(--fail-bg);
  color: var(--fail-text);
  border: 1px solid var(--fail-text);
}

@media (max-width: 640px) {
  main { padding: 32px 18px 64px; }
  h1.site-title { font-size: 40px; }
  h2 { font-size: 26px; }
  .tally-row { grid-template-columns: repeat(2, 1fr); }
  .results-table th.col-thinking,
  .results-table td.col-thinking,
  .results-table th.col-effort,
  .results-table td.col-effort,
  .results-table th.col-date,
  .results-table td.col-date { display: none; }
  .transcript-meta { margin-left: 0; }
  .transcript-header { gap: 8px; }
}

/* ── Cross-site Virtual Intelligence series header ──
   Sits at the very top of every page, above the site-specific masthead.
   Visual style matches the footer's related-links strip: uppercase,
   letter-spaced, muted, framed with top + bottom rules. */
.page-header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 32px 0;
  font-family: var(--sans);
  color: var(--muted);
}
.page-header-series { display: none; } /* footer-style strip carries no inline label */
.page-header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--light);
  border-bottom: 1px solid var(--light);
}
.page-header-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
.page-header-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
@media (max-width: 720px) {
  .page-header { padding: 20px 16px 0; }
  .page-header-nav { gap: 12px; font-size: 11px; }
}

/* ── Per-vendor transcript navigation ──
   On every transcripts/<slug>.html page: a non-sticky pill rail at the
   top (back-link + all-vendors-as-pills) and a wrap-around prev/next
   pair at the bottom. Pills wrap to multiple rows on narrow screens. */
/* The rail sits inside the main column, directly beneath the site nav, so
   it shares the page margins and reads as part of the page rather than as
   chrome floating above the masthead. */
.vendor-rail {
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--hair);
  margin: 0 0 8px;
}
.vendor-rail-inner {
  max-width: none;
  margin: 0;
}
.vendor-rail-back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 10px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
.vendor-rail-back:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.vendor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
}
.vendor-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--light);
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.vendor-pill:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.vendor-pill.active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
  cursor: default;
}
.vendor-pill .pill-logo {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--logo-url) no-repeat center / contain;
          mask: var(--logo-url) no-repeat center / contain;
  flex: 0 0 auto;
}
.vendor-pill .pill-name { letter-spacing: 0.02em; }
.vendor-pill .pill-count {
  font-size: 10px;
  opacity: 0.65;
  margin-left: 2px;
}
.vendor-pill.active .pill-count { opacity: 0.7; }

/* Bottom prev/next pair */
.vendor-pagination {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 48px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--light);
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vendor-pagination a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  flex: 1 1 0;
  max-width: 50%;
}
.vendor-pagination a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.vendor-pagination .pag-next { text-align: right; }

@media (max-width: 720px) {
  .vendor-rail { padding: 12px 0 14px; }
  .vendor-pill { padding: 4px 8px 4px 6px; font-size: 11px; }
  .vendor-pill .pill-logo { width: 12px; height: 12px; }
  .vendor-pagination { font-size: 11px; gap: 12px; margin-top: 32px; }
}

/* Vendor pages: rails match the narrower main column */
body:has(#vendor-rail) footer,
body:has(#vendor-rail) .page-header { max-width: 880px; }

/* Figure cards and quote plates: hairline borders, square, no shadows */
.chart-card-wide { border: 1px solid var(--hair); padding: 20px 22px; }

/* ── Phase 2: instrument chart furniture ─────────────────────────────── */
.chart-axis { stroke: var(--ink); stroke-width: 1.5; }
.chart-gridline {
  stroke: var(--hair);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.chart-catlabel {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--muted);
}
.chart-donut-n {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--muted);
}
.chart-donut-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  fill: var(--ink);
}

/* ── Phase 2: results-table treatment ────────────────────────────────────
   Desktop: sticky column headers (the wrapper must NOT scroll, or it would
   become the sticky confining box). Phones: the wrapper takes over as a
   full-width horizontal scroller and stickiness yields to reachability. */
.results-table thead th,
.results-table thead th.sortable {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
}
/* Below the desktop column width a data table cannot fit, so its wrapper
   becomes a horizontal scroller. That wrapper is a scroll container, which
   would confine the sticky header — so sticky is traded away exactly where
   the scroller takes over, and the page itself never scrolls sideways. */
@media (max-width: 1023px) {
  .table-scroll { overflow-x: auto; }
  .table-scroll .results-table { min-width: 640px; }
  .results-table thead th,
  .results-table thead th.sortable { position: relative; top: auto; }
}

/* ── Phase 2: transcript ledger ──────────────────────────────────────── */
.transcript-entry {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 28px;
  padding: 26px 0;
}
.run-rail {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.run-rail-id { color: var(--ink); font-weight: 600; font-size: 14px; }
.run-rail-date { font-variant-numeric: tabular-nums; }
.run-rail-cfg { line-height: 1.5; }
.run-rail-lang {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.run-main { min-width: 0; }
.run-main .transcript-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.run-main .transcript-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  margin: 0 0 12px;
}
.run-quote {
  margin: 12px 0 0;
  padding: 14px 18px;
  background: var(--bg2);
  border-left: 2px solid var(--ink);
  font-size: 16px;
  line-height: 1.65;
  white-space: pre-wrap;
}
@media (max-width: 720px) {
  .transcript-entry { grid-template-columns: 1fr; gap: 10px; }
  .run-rail { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
}

/* ── Phase 2: numbered section rails (Metrics spine) ─────────────────── */
section:has(> .sec-rail) {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 32px;
  padding-top: 48px;
  border-top: 1px solid var(--hair);
  margin: 48px 0 0;
}
section:has(> .sec-rail) > * { grid-column: 2; min-width: 0; }
section:has(> .sec-rail) > .sec-rail {
  grid-column: 1;
  grid-row: 1 / span 200;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sec-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}
.sec-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1023px) {
  section:has(> .sec-rail) { display: block; }
  section:has(> .sec-rail) > .sec-rail { flex-direction: row; gap: 10px; margin-bottom: 6px; }
}

/* ── Phase 2: stat strip ─────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 2px solid var(--rule);
  margin: 8px 0 24px;
}
.stat-cell {
  padding: 14px 16px 14px 0;
  border-left: 1px solid var(--hair);
  padding-left: 16px;
}
.stat-cell:first-child { border-left: 0; padding-left: 0; }
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { border-left: 0; padding-left: 0; }
}

/* Donut percent labels: sized to sit inside the 30px band, and lettered in
   a fixed near-black — the fill bands are mid-tones in BOTH themes, so dark
   lettering carries the contrast where the theme-flipped grade inks cannot. */
.chart-donut-pct {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  fill: #1a1a17;
}

/* ── Theme toggle (top rail, right-aligned) ──────────────────────────── */
.theme-toggle {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--hair);
  padding: 3px 9px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* Language marker column (tables that mix corpora) */
.results-table .col-lang {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Long unbreakable strings — bare URLs in prose, model identifiers, GGUF
   filenames — must wrap rather than push the column open on narrow screens. */
p, li, blockquote, dd, figcaption, caption,
.chart-note, .transcript-notes, .run-quote, .methodology-lede {
  overflow-wrap: break-word;
}
code { overflow-wrap: anywhere; }

/* Bottom rail: the same index repeated after the last transcript, so a
   reader who has scrolled through the runs can move to another vendor
   without climbing back to the top. Opens with a rule instead of closing
   with one, and drops the back-link's top gap. */
.vendor-rail-bottom {
  border-bottom: 0;
  border-top: 2px solid var(--rule);
  margin: 40px 0 0;
  padding: 18px 0 0;
}