/* ==========================================================================
   AutoResearchEval / ARFT site
   Palette lifted from the paper (main.tex / teaser.tex) so the site and the
   PDF read as one artifact.
   ========================================================================== */

:root {
  /* heat ramp — teaser.tex h0..h5 */
  --h0:#ffffff; --h1:#fcdbcb; --h2:#f8b48f; --h3:#f1875c; --h4:#e15631; --h5:#c22e14;

  /* root-cause pillars — main.tex */
  --grounding-bg:#e0f2fe; --grounding-bd:#7dd3fc; --grounding-tx:#0369a1;
  --depth-bg:#d1fae5;     --depth-bd:#6ee7b7;     --depth-tx:#047857;
  --integrity-bg:#f3e8ff; --integrity-bd:#c084fc; --integrity-tx:#6b21a8;
  --engineering-bg:#fef3c7;--engineering-bd:#fcd34d;--engineering-tx:#b45309;

  /* structure */
  --ink:#1a1e28;
  --ink-2:#4a5266;
  --ink-3:#6f7789;
  --navy:#1f2a44;
  --navy-2:#2b3653;
  --paper:#ffffff;
  --paper-2:#f5f7fb;
  --paper-3:#eef1f7;
  --grid:#d3d9e4;
  --grid-2:#e4e8f0;
  --accent:#c6371a;
  --accent-soft:#fdece6;
  --ok:#2e7d32; --warn:#f9a825; --bad:#c62828;

  --radius:10px;
  --radius-s:6px;
  --shadow:0 1px 2px rgba(26,30,40,.06), 0 8px 24px -12px rgba(26,30,40,.18);
  --wrap:1200px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --h0:#20242e; --h1:#4a2a20; --h2:#6d3a26; --h3:#9a4a2b; --h4:#c04d29; --h5:#e05a30;
    --grounding-bg:#0b2d42; --grounding-bd:#1e6b96; --grounding-tx:#7dd3fc;
    --depth-bg:#0c3227;     --depth-bd:#1d7a5b;     --depth-tx:#6ee7b7;
    --integrity-bg:#2a1a3d; --integrity-bd:#7b46b8; --integrity-tx:#d8b4fe;
    --engineering-bg:#3a2b0c;--engineering-bd:#9a7a1e;--engineering-tx:#fcd34d;
    --ink:#e8ecf4; --ink-2:#b3bccf; --ink-3:#8d97ad;
    --navy:#141926; --navy-2:#1c2334;
    --paper:#0f131c; --paper-2:#151b27; --paper-3:#1b2230;
    --grid:#2b3446; --grid-2:#232b3a;
    --accent:#ff7a52; --accent-soft:#33201a;
    --ok:#6ee7b7; --warn:#fcd34d; --bad:#fca5a5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --h0:#20242e; --h1:#4a2a20; --h2:#6d3a26; --h3:#9a4a2b; --h4:#c04d29; --h5:#e05a30;
  --grounding-bg:#0b2d42; --grounding-bd:#1e6b96; --grounding-tx:#7dd3fc;
  --depth-bg:#0c3227;     --depth-bd:#1d7a5b;     --depth-tx:#6ee7b7;
  --integrity-bg:#2a1a3d; --integrity-bd:#7b46b8; --integrity-tx:#d8b4fe;
  --engineering-bg:#3a2b0c;--engineering-bd:#9a7a1e;--engineering-tx:#fcd34d;
  --ink:#e8ecf4; --ink-2:#b3bccf; --ink-3:#8d97ad;
  --navy:#141926; --navy-2:#1c2334;
  --paper:#0f131c; --paper-2:#151b27; --paper-3:#1b2230;
  --grid:#2b3446; --grid-2:#232b3a;
  --accent:#ff7a52; --accent-soft:#33201a;
  --ok:#6ee7b7; --warn:#fcd34d; --bad:#fca5a5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
h1,h2,h3,h4 { line-height:1.2; margin:0; letter-spacing:-.015em; font-weight:680; }
p { margin:0 0 1em; }
a { color:inherit; }
em { font-style:italic; }
code, pre, .num { font-variant-numeric:tabular-nums; }
code { font-family:var(--mono); font-size:.88em; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.muted { color:var(--ink-3); }

/* ───────────────────────────── nav ──────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--grid-2);
}
.nav-in { max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:20px; height:56px; }
.brand { font-weight:760; letter-spacing:-.03em; text-decoration:none; font-size:17px; white-space:nowrap; }
.brand span { color:var(--accent); }
.nav-links { display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a {
  text-decoration:none; color:var(--ink-2); font-size:13.5px; font-weight:520;
  padding:6px 10px; border-radius:var(--radius-s); white-space:nowrap;
}
.nav-links a:hover { background:var(--paper-2); color:var(--ink); }
.nav-links a.on { color:var(--accent); background:var(--accent-soft); }
.theme-toggle {
  background:none; border:1px solid var(--grid); border-radius:var(--radius-s);
  width:32px; height:32px; cursor:pointer; color:var(--ink-2); font-size:15px; flex:none;
}
.theme-toggle:hover { border-color:var(--ink-3); color:var(--ink); }

/* ───────────────────────────── hero ─────────────────────────────────── */
.hero {
  background:
    radial-gradient(1100px 480px at 12% -18%, rgba(226,86,49,.20), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#eef1f7; padding:72px 0 0;
}
.hero-in { padding-bottom:0; }
.eyebrow {
  font-size:12px; font-weight:640; letter-spacing:.13em; text-transform:uppercase;
  color:#f8b48f; margin:0 0 16px;
}
.hero-title { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.hero-mark { font-size:clamp(38px, 6.2vw, 66px); font-weight:780; letter-spacing:-.035em; color:#fff; }
.hero-q {
  font-size:clamp(19px, 2.6vw, 28px); font-weight:450; color:#f8b48f;
  letter-spacing:-.02em; font-style:italic;
}
.hero-sub { max-width:66ch; font-size:17px; color:#c3cbdb; margin-bottom:18px; }
.hero-paper {
  max-width:70ch; font-size:13.5px; line-height:1.5; color:#8d97ad;
  margin-bottom:8px; font-style:italic;
}
.hero-authors { max-width:74ch; font-size:14px; line-height:1.6; color:#c3cbdb; margin-bottom:6px; }
.hero-authors sup { font-size:9.5px; color:#8d97ad; margin-left:1px; vertical-align:super; }
.hero-affils { max-width:74ch; font-size:12.5px; line-height:1.6; color:#8d97ad; margin-bottom:4px; }
.hero-affils sup { font-size:9.5px; margin-right:2px; vertical-align:super; }
.hero-authnote { max-width:74ch; font-size:11.5px; line-height:1.6; color:#7f8899; margin-bottom:26px; }
.hero-links { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.hero-links a {
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:9px 16px; border-radius:var(--radius-s);
  font-size:14px; font-weight:560;
}
.hero-links a:hover { background:rgba(255,255,255,.18); }
.hero-links a.is-ph { opacity:.5; }
.hero-links a.is-ph::after { content:"soon"; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; opacity:.8; }

.hero-scale {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(148px,1fr));
  gap:0; margin:0; border-top:1px solid rgba(255,255,255,.14);
}
.hero-scale > div {
  padding:20px 20px 26px; border-right:1px solid rgba(255,255,255,.10);
}
.hero-scale > div:last-child { border-right:0; }
.hero-scale dt { font-size:28px; font-weight:720; color:#fff; letter-spacing:-.03em; }
.hero-scale dd { margin:2px 0 0; font-size:13px; color:#c3cbdb; font-weight:560; }
.hero-scale .n2 { display:block; font-size:11.5px; color:#8d97ad; font-weight:400; margin-top:2px; }

/* ───────────────────────────── sections ─────────────────────────────── */
.section { padding:64px 0; border-bottom:1px solid var(--grid-2); }
.section.alt { background:var(--paper-2); }
.kicker {
  font-size:11.5px; font-weight:680; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;
}
.section h2 { font-size:clamp(24px,3.2vw,33px); max-width:26ch; margin-bottom:14px; }
.section h2 em { color:var(--accent); font-style:normal; }
.sub { font-size:17px; font-weight:680; margin:40px 0 14px; letter-spacing:-.01em; }
.lede { max-width:72ch; color:var(--ink-2); font-size:15.5px; }
.note { font-size:13px; color:var(--ink-3); max-width:80ch; margin-top:10px; }
.count { font-size:13px; color:var(--ink-3); margin:14px 0 12px; }

/* ───────────────────────────── findings ─────────────────────────────── */
.findings {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;
  align-items:start;   /* each card sizes to its own content, so opening one
                          card's Detail fold does not resize its neighbours */
}
.finding {
  background:var(--paper); border:1px solid var(--grid); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.finding h3 { font-size:15.5px; margin-bottom:16px; }
.finding .fstats { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.finding .fstat { display:flex; gap:10px; align-items:baseline; }
.finding .fv {
  font-size:23px; font-weight:740; color:var(--accent); letter-spacing:-.02em;
  min-width:62px; flex:none;
}
.finding .fl { font-size:13px; color:var(--ink-2); line-height:1.35; }
.finding .fstat:only-child { display:block; }
.finding .fstat:only-child .fv { display:block; font-size:38px; line-height:1.05; margin-bottom:6px; }
.finding .fstat:only-child .fl { display:block; font-size:13.5px; }
.finding p { font-size:13.5px; color:var(--ink-2); margin:0; }
.finding .fmore { margin-top:14px; border-top:1px solid var(--grid-2); padding-top:10px; }
.finding .fmore summary {
  cursor:pointer; font-size:11.5px; font-weight:660; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); list-style:none;
}
.finding .fmore summary::-webkit-details-marker { display:none; }
.finding .fmore summary::after { content:" +"; }
.finding .fmore[open] summary::after { content:" –"; }
.finding .fmore summary:hover { color:var(--accent); }
.finding .fmore p { margin-top:10px; }

/* ───────────────────────── process vs outcome ───────────────────────── */
.vs { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin:26px 0; }
.vs-card { border:1px solid var(--grid); border-radius:var(--radius); padding:22px; background:var(--paper); }
.vs-card.bad { border-left:4px solid var(--bad); }
.vs-card.good { border-left:4px solid var(--ok); }
.vs-card h3 { font-size:15.5px; margin-bottom:12px; }
.vs-card ul { margin:0; padding-left:18px; }
.vs-card li { font-size:14px; color:var(--ink-2); margin-bottom:8px; }
.vignette {
  margin:0; border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:16px 20px; border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:14.5px; color:var(--ink); max-width:82ch;
}

/* ───────────────────────────── tables ───────────────────────────────── */
.tbl { border-collapse:collapse; width:100%; font-size:13.5px; min-width:560px; }
.tbl thead th {
  background:var(--navy); color:#fff; font-weight:620; text-align:left;
  padding:10px 12px; white-space:nowrap; font-size:12.5px;
  position:sticky; top:0;
}
.tbl thead th.num, .tbl td.num { text-align:right; }
.tbl thead th.ctr, .tbl td.ctr { text-align:center; }
.tbl td { padding:9px 12px; border-bottom:1px solid var(--grid-2); }
.tbl tbody tr:nth-child(even) { background:var(--paper-2); }
.section.alt .tbl tbody tr:nth-child(even) { background:var(--paper-3); }
.tbl tbody tr:hover { background:var(--accent-soft); }
.tbl .grouprow td {
  background:var(--paper-3); font-style:italic; font-weight:620;
  font-size:12.5px; color:var(--ink-2);
}
.tbl .ours td { background:var(--accent-soft) !important; font-weight:640; }
.tbl .rank { color:var(--ink-3); width:1%; }
.mark-yes { color:var(--ok); font-weight:700; }
.mark-partial { color:var(--warn); font-weight:700; }
.mark-no { color:var(--bad); font-weight:700; }

/* ───────────────────────── heatmap ──────────────────────────────────── */
.heat-wrap { margin-top:26px; }
.heat {
  display:grid; grid-template-columns:minmax(190px,1.5fr) repeat(4,minmax(120px,1fr)) minmax(74px,.6fr);
  border:1px solid var(--grid); border-radius:var(--radius); overflow:hidden; min-width:760px;
  background:var(--grid);
  gap:1px;
}
.heat > * { background:var(--paper); }
.hh {
  background:var(--navy); color:#fff; padding:12px; font-size:12.5px; font-weight:640; line-height:1.25;
}
.hh small { display:block; font-weight:400; color:#bfc7d8; font-size:11px; margin-top:2px; }
.hstage { padding:14px 12px; font-size:13.5px; font-weight:620; display:flex; flex-direction:column; justify-content:center; }
.hstage small { font-weight:400; color:var(--ink-3); font-size:11.5px; }
.hcell {
  border:0; padding:14px 12px; font:inherit; cursor:pointer; text-align:center;
  font-weight:700; font-size:16px; color:var(--ink); position:relative;
  transition:transform .08s ease;
}
.hcell.dark { color:#fff; }
.hcell:hover { z-index:2; outline:2px solid var(--accent); outline-offset:-2px; }
.hcell:focus-visible { z-index:2; outline:2px solid var(--accent); outline-offset:-2px; }
.hcell[disabled] { cursor:default; color:var(--ink-3); font-weight:400; }
.hcell .hc-n { display:block; font-size:10.5px; font-weight:520; opacity:.72; margin-top:2px; }
.htot { padding:14px 12px; text-align:right; font-weight:700; font-size:14px; background:var(--paper-2); }
.hlabel-tot { background:var(--navy-2); color:#fff; padding:12px; font-size:12px; font-weight:620; text-align:right; }
.heat-legend { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12px; color:var(--ink-3); flex-wrap:wrap; }
.heat-legend i { width:30px; height:14px; display:inline-block; border:1px solid var(--grid); }

/* ───────────────────────── callout ──────────────────────────────────── */
.callout {
  margin-top:32px; border:1px solid var(--grounding-bd); background:var(--grounding-bg);
  border-radius:var(--radius); padding:20px 22px; max-width:88ch;
}
.callout-t { font-size:15px; margin-bottom:8px; color:var(--grounding-tx); }
.callout p:last-child { margin:0; font-size:14px; color:var(--ink-2); }

/* ───────────────────────── filters ──────────────────────────────────── */
.filters {
  display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; margin-top:24px;
  padding:16px; background:var(--paper); border:1px solid var(--grid); border-radius:var(--radius);
}
.section.alt .filters { background:var(--paper); }
.fgroup { display:flex; flex-direction:column; gap:6px; }
.fgroup.grow { flex:1; min-width:190px; }
.flabel { font-size:11px; font-weight:660; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip {
  border:1px solid var(--grid); background:var(--paper); color:var(--ink-2);
  padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:560; cursor:pointer;
  font-family:inherit;
}
.chip:hover { border-color:var(--ink-3); color:var(--ink); }
.chip.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.chip.on.p-grounding   { background:var(--grounding-tx);   border-color:var(--grounding-tx); }
.chip.on.p-depth       { background:var(--depth-tx);       border-color:var(--depth-tx); }
.chip.on.p-integrity   { background:var(--integrity-tx);   border-color:var(--integrity-tx); }
.chip.on.p-engineering { background:var(--engineering-tx); border-color:var(--engineering-tx); }
.search, select {
  border:1px solid var(--grid); border-radius:var(--radius-s); padding:7px 10px;
  font-size:13.5px; font-family:inherit; background:var(--paper); color:var(--ink); width:100%;
}
.search:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.btn-ghost {
  border:1px solid var(--grid); background:var(--paper); color:var(--ink-2);
  padding:7px 14px; border-radius:var(--radius-s); font-size:13px; font-weight:560;
  cursor:pointer; font-family:inherit;
}
.btn-ghost:hover { border-color:var(--ink-3); color:var(--ink); }

/* ───────────────────────── pattern cards ────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px; }
.pcard {
  text-align:left; font-family:inherit; cursor:pointer;
  background:var(--paper); border:1px solid var(--grid); border-left-width:4px;
  border-radius:var(--radius); padding:15px 16px; display:flex; flex-direction:column; gap:9px;
}
.pcard:hover { box-shadow:var(--shadow); border-color:var(--ink-3); }
.pcard:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pcard.p-grounding   { border-left-color:var(--grounding-bd); }
.pcard.p-depth       { border-left-color:var(--depth-bd); }
.pcard.p-integrity   { border-left-color:var(--integrity-bd); }
.pcard.p-engineering { border-left-color:var(--engineering-bd); }
.pc-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pc-code { font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--accent); }
.pc-hits { font-size:12px; color:var(--ink-3); font-weight:600; }
.pc-hits b { color:var(--ink); font-size:14px; }
.pc-hits small { display:block; font-weight:500; font-size:11px; color:var(--ink-3); }
.pc-name { font-size:14px; font-weight:640; line-height:1.3; }
.pc-def { font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.pill {
  display:inline-block; font-size:10.5px; font-weight:660; padding:2px 8px; border-radius:999px;
  border:1px solid; letter-spacing:.02em; white-space:nowrap;
}
.p-grounding   > .pill, .pill.p-grounding   { background:var(--grounding-bg);   border-color:var(--grounding-bd);   color:var(--grounding-tx); }
.p-depth       > .pill, .pill.p-depth       { background:var(--depth-bg);       border-color:var(--depth-bd);       color:var(--depth-tx); }
.p-integrity   > .pill, .pill.p-integrity   { background:var(--integrity-bg);   border-color:var(--integrity-bd);   color:var(--integrity-tx); }
.p-engineering > .pill, .pill.p-engineering { background:var(--engineering-bg); border-color:var(--engineering-bd); color:var(--engineering-tx); }

.spark { display:flex; align-items:flex-end; gap:3px; height:26px; }
.spark i {
  flex:1; background:var(--h3); border-radius:1px 1px 0 0; min-height:1px; display:block;
  opacity:.85;
}
.spark-x { display:flex; gap:3px; font-size:8.5px; color:var(--ink-3); letter-spacing:-.02em; }
.spark-x span { flex:1; text-align:center; overflow:hidden; }

/* ───────────────────────── pillar bars ──────────────────────────────── */
.pillar-bars { display:flex; flex-direction:column; gap:9px; }
.pbar-row { display:grid; grid-template-columns:minmax(120px,150px) 1fr auto; gap:12px; align-items:center; }
.pbar-name { font-size:13px; font-weight:600; }
.pbar-name small { display:block; color:var(--ink-3); font-weight:400; font-size:11px; }
/* the track spans the column; the bar inside is scaled by the model's total hits,
   so bar length reads as magnitude and the segments read as composition */
.pbar-track { background:var(--paper-3); border-radius:4px; }
.pbar { display:flex; height:20px; border-radius:4px; overflow:hidden; }
.pbar i { display:block; height:100%; }
.pbar i.s-grounding   { background:var(--grounding-tx); }
.pbar i.s-depth       { background:var(--depth-tx); }
.pbar i.s-integrity   { background:var(--integrity-tx); }
.pbar i.s-engineering { background:var(--engineering-tx); }
.pbar-tot { font-size:12px; color:var(--ink-3); font-weight:600; min-width:44px; text-align:right; }
.legend-row { display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 0; font-size:12px; color:var(--ink-2); }
.legend-row span { display:inline-flex; align-items:center; gap:6px; }
.legend-row i { width:11px; height:11px; border-radius:2px; display:inline-block; }

/* ───────────────────────── hit matrix ───────────────────────────────── */
.matrix { min-width:820px; font-size:12.5px; }
.matrix th.mcol { cursor:pointer; text-align:center; user-select:none; }
.matrix th.mcol:hover { background:var(--navy-2); }
.matrix th.mcol.sorted::after { content:" ▾"; color:#f8b48f; }
.matrix td.mlab { white-space:nowrap; }
.matrix td.mlab button {
  background:none; border:0; padding:0; font:inherit; cursor:pointer; color:inherit; text-align:left;
}
.matrix td.mlab button:hover { color:var(--accent); text-decoration:underline; }
.matrix td.mlab .pc-code { font-size:11.5px; }
.matrix td.mv { text-align:center; font-weight:620; width:52px; }
.matrix td.mv.z { color:var(--ink-3); font-weight:400; opacity:.5; }

/* ─────────────────── task construction (funnel + fields) ────────────── */
.funnel { display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; margin:4px 0 14px; }
.fstep {
  display:flex; align-items:baseline; gap:10px; flex:1 1 240px;
  background:var(--paper-2); border:1px solid var(--grid-2); border-radius:var(--radius-s);
  padding:12px 14px;
}
.fstep b { font-size:22px; font-weight:740; color:var(--accent); flex:none; }
.fstep span { font-size:13px; color:var(--ink-2); }
.fstep small { display:block; font-size:11.5px; color:var(--ink-3); }
.farrow { align-self:center; color:var(--ink-3); font-size:18px; }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:14px 0; }
.fld-t { display:block; font-size:11.5px; font-weight:660; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.fld {
  display:inline-block; font-family:var(--mono); font-size:12px;
  padding:3px 8px; margin:0 5px 5px 0; border-radius:var(--radius-s);
  border:1px solid var(--grid); background:var(--paper-2); color:var(--ink-3);
}
.fld.ok { border-color:var(--depth-bd); background:var(--depth-bg); color:var(--depth-tx); }

.two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:32px; }

/* ───────────────────────── cases ────────────────────────────────────── */
.case-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; margin-top:26px; }
.case {
  text-align:left; font-family:inherit; cursor:pointer;
  background:var(--paper); border:1px solid var(--grid); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.case:hover { box-shadow:var(--shadow); border-color:var(--ink-3); }
.case:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.case-hd { padding:16px 18px 0; }
.verdict {
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; margin-bottom:10px;
  /* not a pill: these labels can wrap, and 999px on two lines reads as a blob */
  border-radius:5px;
}
.verdict.v-invalid   { background:#fde8e8; color:#c62828; border:1px solid #f5b5b5; }
.verdict.v-valid     { background:var(--engineering-bg); color:var(--engineering-tx); border:1px solid var(--engineering-bd); }
.verdict.v-discovery { background:var(--depth-bg); color:var(--depth-tx); border:1px solid var(--depth-bd); }
.verdict.v-search    { background:var(--grounding-bg); color:var(--grounding-tx); border:1px solid var(--grounding-bd); }
.case h3 { font-size:16px; margin-bottom:8px; letter-spacing:-.015em; }
.case-task { font-size:12.5px; color:var(--ink-3); margin-bottom:12px; line-height:1.45; }
.case-codes { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
.code-chip {
  font-family:var(--mono); font-size:11px; font-weight:700; padding:2px 7px; border-radius:4px;
  background:var(--paper-3); color:var(--accent); border:1px solid var(--grid);
}
.case pre {
  margin:0; background:var(--navy); color:#e8ecf4; padding:14px 18px;
  font-size:11.5px; line-height:1.5; overflow-x:auto; font-family:var(--mono);
  flex:1; border-top:1px solid var(--grid);
}
.case-more { padding:11px 18px; font-size:12px; color:var(--accent); font-weight:620;
  border-top:1px solid var(--grid-2); background:var(--paper-2); }

/* ───────────────────────── chart cards ──────────────────────────────── */
.statgrid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:18px; margin-top:26px; align-items:start;
}
.statgrid.two { margin-top:32px; }
.statgrid.one { grid-template-columns:1fr; }
@media (min-width:760px) {
  .statgrid.one .dist { grid-template-columns:minmax(150px,210px) 1fr auto; gap:16px; }
  .statgrid.one .dist .dtrack { height:22px; }
  .statgrid.one .dist .dname { font-size:13.5px; }
}
.chartcard {
  border:1px solid var(--grid); border-radius:var(--radius); background:var(--paper);
  padding:20px 22px; box-shadow:var(--shadow);
}
.section.alt .chartcard { background:var(--paper); }
.chartcard h3 {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:14px; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--grid-2);
}
.chartcard .cc-n {
  font-size:11.5px; font-weight:620; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.chartcard .note { margin-top:14px; }

.distbars { display:flex; flex-direction:column; gap:7px; }
.dist { display:grid; grid-template-columns:minmax(112px,1fr) 2fr auto; gap:10px; align-items:center; font-size:13px; }
.dist .dname small { color:var(--ink-3); display:block; font-size:11px; }
.dist .dtrack { background:var(--paper-3); border-radius:3px; height:16px; overflow:hidden; }
.dist .dtrack i { display:block; height:100%; background:var(--h3); border-radius:3px; }
.dist .dtrack.split { display:flex; }
.dist .dtrack.split i { border-radius:0; flex:none; }
.dist .dtrack i.ty-open,     .legend-row i.ty-open     { background:var(--grounding-tx); }
.dist .dtrack i.ty-anchored, .legend-row i.ty-anchored { background:var(--accent); }
.dist .dtrack i.t-search { background:var(--grounding-tx); }
.dist .dtrack i.t-discovery { background:var(--depth-tx); }
.dist .dtrack i.pl-grounding   { background:var(--grounding-tx); }
.dist .dtrack i.pl-depth       { background:var(--depth-tx); }
.dist .dtrack i.pl-integrity   { background:var(--integrity-tx); }
.dist .dtrack i.pl-engineering { background:var(--engineering-tx); }
.dist .dval { font-size:12px; color:var(--ink-2); font-weight:620; min-width:74px; text-align:right; }

.det { margin-top:18px; border:1px solid var(--grid); border-radius:var(--radius); background:var(--paper); }
.det summary { padding:12px 16px; cursor:pointer; font-size:13.5px; font-weight:600; }
.det summary:hover { color:var(--accent); }
.det > div, .det > .scroll-x { padding:0 16px 16px; }
.det .tbl { min-width:640px; }

/* ───────────────────────── corpus / spec grid ───────────────────────── */
.specgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin:26px 0; }
.spec { background:var(--paper); border:1px solid var(--grid); border-radius:var(--radius); padding:18px 20px; }
.section.alt .spec { background:var(--paper); }
.spec-v {
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-size:30px; font-weight:740; letter-spacing:-.03em; color:var(--accent); line-height:1.05;
}
.spec-v span { font-size:13.5px; font-weight:640; color:var(--ink); letter-spacing:-.01em; }
.spec p { margin:10px 0 0; font-size:13px; color:var(--ink-2); }


.provlist { margin:6px 0 0; padding-left:20px; }
.provlist li { font-size:13px; color:var(--ink-2); margin-bottom:8px; line-height:1.55; }

/* ───────────────────────── preview notice ──────────────────────────── */
.ph-note {
  border:1px dashed var(--accent); background:var(--accent-soft); border-radius:var(--radius);
  padding:12px 16px; font-size:13px; margin:18px 0 0; color:var(--ink-2);
}
.ph-note strong { color:var(--accent); }

/* ───────────────────────── cite / footer ────────────────────────────── */
/* The BibTeX block is the footer's whole job, so it gets the full column width
   and the copy button sits in a header row rather than floating over the code —
   absolute positioning there forced a padding-right reservation that broke as
   soon as the entry wrapped. */
.foot { background:var(--navy); color:#c3cbdb; padding:44px 0 36px; }
.foot-in { display:flex; flex-direction:column; gap:24px; }
.foot strong { color:#fff; }
.foot-tag {
  margin:0; padding-top:20px; font-size:13px;
  border-top:1px solid rgba(255,255,255,.1); color:#8d97ad;
}

.cite-box { max-width:760px; }
.cite-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
.cite-head h2 {
  margin:0; font-size:13px; font-weight:640; letter-spacing:.08em;
  text-transform:uppercase; color:#8d97ad;
}
.cite-box pre {
  margin:0; padding:18px 20px; border-radius:var(--radius);
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1);
  color:#e8ecf4; font-family:var(--mono); font-size:12.5px; line-height:1.65;
  overflow-x:auto; white-space:pre;
}
.cite-box .copy {
  flex:none; background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25); color:#fff;
}
.cite-box .copy:hover { background:rgba(255,255,255,.22); color:#fff; }

/* ───────────────────────── drawer ───────────────────────────────────── */
.drawer-scrim { position:fixed; inset:0; background:rgba(20,25,38,.5); z-index:50; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(560px,100%); z-index:51;
  background:var(--paper); border-left:1px solid var(--grid);
  overflow-y:auto; box-shadow:-16px 0 48px -24px rgba(0,0,0,.5);
}
.drawer-x {
  position:absolute; top:14px; right:16px; background:var(--paper-2); border:1px solid var(--grid);
  width:32px; height:32px; border-radius:var(--radius-s); font-size:20px; line-height:1;
  cursor:pointer; color:var(--ink-2); z-index:2;
}
.drawer-x:hover { color:var(--ink); border-color:var(--ink-3); }
.drawer-body { padding:28px 28px 48px; }
.drawer-body h2 { font-size:21px; margin-bottom:6px; max-width:none; }
.drawer-body h3 { font-size:14px; margin:24px 0 8px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); }

/* near-absent pattern chips (taxonomy rarity fold) */
.rare-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:4px; }
.rare {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit;
  font-size:12.5px; padding:7px 12px; border-radius:var(--radius-s);
  background:var(--paper); border:1px solid var(--grid); color:var(--ink-2);
}
.rare:hover { border-color:var(--ink-3); color:var(--ink); }
.rare b { color:var(--accent); font-variant-numeric:tabular-nums; }

/* per-pattern case study, in the pattern drawer */
.pcase {
  background:var(--paper-2); border:1px solid var(--grid-2);
  border-left:3px solid var(--grid); border-radius:var(--radius-s); padding:14px 16px;
}
.pcase-hd { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin-bottom:8px; font-size:12px; }
.pcase-hd span:first-child { font-weight:660; color:var(--ink); }
.pcase-hd code { margin-left:auto; font-size:11px; color:var(--ink-3); }
.pcase p { margin:0; font-size:13px; line-height:1.6; color:var(--ink-2); }
.pcase code { font-family:var(--mono); font-size:12px; }
.drawer-body p { font-size:14px; color:var(--ink-2); }
.drawer-body pre {
  background:var(--navy); color:#e8ecf4; padding:14px 16px; border-radius:var(--radius-s);
  overflow-x:auto; font-size:11.5px; line-height:1.55; font-family:var(--mono);
}
.drawer-body blockquote {
  margin:0; border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:12px 16px; font-size:13.5px; font-style:italic; border-radius:0 var(--radius-s) var(--radius-s) 0;
}
.drawer-body img { max-width:100%; height:auto; border-radius:var(--radius-s); border:1px solid var(--grid); }
.drawer-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.dstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; margin:14px 0; }
.dstat { background:var(--paper-2); border:1px solid var(--grid); border-radius:var(--radius-s); padding:10px 12px; }
.dstat b { display:block; font-size:19px; font-weight:720; letter-spacing:-.02em; }
.dstat span { font-size:11px; color:var(--ink-3); }
.mbars { display:flex; flex-direction:column; gap:6px; }
.mbar { display:grid; grid-template-columns:minmax(118px,1.2fr) 1fr 38px; gap:9px; align-items:center; font-size:12.5px; }
/* the top-10 lists sit in narrow columns; give the label more room there */
.top10 .mbar { grid-template-columns:minmax(150px,1.4fr) 1fr 30px; font-size:12px; }
.mbar .mb-track { background:var(--paper-3); height:14px; border-radius:3px; overflow:hidden; }
.mbar .mb-track i { display:block; height:100%; background:var(--h3); }
.mbar .mb-n { text-align:right; font-weight:620; }

/* ───────────────────────── responsive ───────────────────────────────── */
@media (max-width:820px) {
  .section { padding:48px 0; }
  .hero { padding-top:52px; }
  .hero-scale > div { border-right:0; border-bottom:1px solid rgba(255,255,255,.10); padding:16px 0; }
  .wrap { padding:0 18px; }
  .drawer-body { padding:24px 20px 40px; }
  .nav-in { gap:12px; }
  .two-col { gap:24px; }
}
@media (max-width:560px) {
  .cards { grid-template-columns:1fr; }
  .case-grid { grid-template-columns:1fr; }
  .pbar-row { grid-template-columns:1fr; gap:4px; }
  .pbar-tot { text-align:left; }
  .dist { grid-template-columns:1fr; gap:3px; }
  .dist .dval { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}