/* ============================================================
   Which AI Actually? — prototype stylesheet
   Palette: dataviz reference instance. Series 1 = blue (Anthropic),
   series 2 = orange (OpenAI). Both modes validated all-pairs:
   CVD dE 24.7 light / 26.8 dark, normal 33.6 / 31.8. Do not
   re-pick these by eye.
   ============================================================ */

/* ---------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --surface-1:      #fcfcfb;   /* cards, chart surface */
  --surface-2:      #f2f1ed;   /* insets, table stripes */
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --grid:           #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);
  --border-strong:  rgba(11, 11, 11, 0.18);

  --series-1:       #2a78d6;   /* Anthropic */
  --series-2:       #eb6834;   /* OpenAI */
  --series-1-wash:  rgba(42, 120, 214, 0.10);
  --series-2-wash:  rgba(235, 104, 52, 0.10);

  --good:           #0ca30c;
  --warning:        #fab219;
  --serious:        #ec835a;
  --critical:       #d03b3b;
  --good-text:      #006300;

  --brand:          #4a3aa7;   /* violet — deliberately neither series hue */
  --money:          #008300;   /* categorical green, NOT the status green */
  --brand-wash:     rgba(74, 58, 167, 0.09);

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(11,11,11,.05), 0 6px 20px -8px rgba(11,11,11,.10);
  --shadow-lg: 0 2px 4px rgba(11,11,11,.05), 0 20px 50px -18px rgba(11,11,11,.22);

  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --surface-2:      #232322;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --grid:           #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.20);
    --series-1:       #3987e5;
    --series-2:       #d95926;
    --series-1-wash:  rgba(57, 135, 229, 0.16);
    --series-2-wash:  rgba(217, 89, 38, 0.16);
    --good-text:      #0ca30c;
    --brand:          #9085e9;
    --brand-wash:     rgba(144, 133, 233, 0.14);
    --money:          #2fa32f;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 20px 50px -18px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --surface-2:      #232322;
  --page:           #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --grid:           #2c2c2a;
  --baseline:       #383835;
  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --series-1:       #3987e5;
  --series-2:       #d95926;
  --series-1-wash:  rgba(57, 135, 229, 0.16);
  --series-2-wash:  rgba(217, 89, 38, 0.16);
  --good-text:      #0ca30c;
  --brand:          #9085e9;
  --brand-wash:     rgba(144, 133, 233, 0.14);
  --money:          #2fa32f;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 20px 50px -18px rgba(0,0,0,.7);
}

/* ---------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 3px; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 40px, 760px); margin-inline: auto; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }

section { padding: 76px 0; }
section + section { border-top: 1px solid var(--border); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--grid);
}

.sec-head { margin-bottom: 34px; }
.sec-head h2 { font-size: clamp(28px, 4vw, 40px); }
.sec-head .lede {
  color: var(--text-secondary);
  font-size: 18px;
  max-width: 62ch;
  margin-top: 12px;
}

/* ---------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .bar {
  display: flex; align-items: center; gap: 18px;
  height: 66px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px; letter-spacing: -0.03em;
  text-decoration: none; color: var(--text-primary);
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
}
.wordmark .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-wash);
}
.wordmark em { font-style: normal; color: var(--brand); }

.nav-links { display: flex; gap: 22px; margin-left: 12px; }
.nav-links a {
  color: var(--text-secondary); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
}
.nav-links a:hover { color: var(--text-primary); }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------- simple/nerd toggle */
.mode-toggle {
  display: inline-flex; align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  position: relative;
}
.mode-toggle button {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 15px; border-radius: 999px;
  cursor: pointer; position: relative; z-index: 1;
  transition: color .18s ease;
  white-space: nowrap;
}
.mode-toggle button[aria-pressed="true"] { color: #fff; }
.mode-toggle .thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  border-radius: 999px; background: var(--brand);
  transition: transform .26s cubic-bezier(.4,1.3,.5,1), width .26s cubic-bezier(.4,1.3,.5,1);
  z-index: 0;
}

.icon-btn {
  appearance: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* ------------------------------------------- nerd/simple visibility */
body[data-mode="simple"] .nerd-only { display: none !important; }
body[data-mode="nerd"]   .simple-only { display: none !important; }

.nerd-only {
  animation: reveal .3s ease both;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.nerd-box {
  margin-top: 16px; padding: 15px 17px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-secondary);
}
.nerd-box strong { color: var(--text-primary); }
.nerd-box .tag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); display: block; margin-bottom: 7px;
}

/* ---------------------------------------------------- hero */
.hero {
  padding: 64px 0 72px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -40% 40% 40% -20%;
  background: radial-gradient(closest-side, var(--brand-wash), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.25fr .85fr;
  gap: 52px; align-items: center; position: relative;
}
.hero h1 {
  font-size: clamp(38px, 6.2vw, 66px);
  letter-spacing: -0.035em;
}
.hero h1 em { font-style: normal; color: var(--brand); }
/* The site name asks the question; the strapline answers it. This is also
   the second domain, so it earns its place rather than being decoration. */
.answer-strap {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.7vw, 29px);
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  color: var(--brand);
  display: inline-flex; align-items: center; gap: 13px;
}
.answer-strap::before {
  content: ""; width: 34px; height: 3px; border-radius: 2px;
  background: var(--brand); flex: none;
}

.hero .sub {
  font-size: clamp(18px, 2.1vw, 21px);
  color: var(--text-secondary);
  margin-top: 22px; max-width: 54ch;
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-wash); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px; padding: 6px 15px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  margin-bottom: 24px;
}

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px;
}
.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px; min-width: 116px;
  box-shadow: var(--shadow);
}
.stat-tile .v {
  font-size: 27px; font-weight: 700; line-height: 1;
  font-family: var(--font-display);
  display: block;
}
.stat-tile .k {
  font-size: 11.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .09em;
  margin-top: 7px; display: block;
  font-family: var(--font-mono);
}

/* ---------------------------------------------------- artwork
   The illustrations carry their own baked-in background, so they sit in a
   rounded frame rather than floating on the page -- floating would show a
   hard rectangle edge against the cream surface in light mode. */
.hero-art, .section-art { margin: 0; }
.hero-art picture, .section-art picture { display: block; }
.hero-art img, .section-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.section-art { margin-top: 26px; }
.hero-art figcaption, .section-art figcaption {
  margin-top: 13px;
  font-size: 14px; line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
.hero-art figcaption em, .section-art figcaption em {
  font-style: normal; font-weight: 600; color: var(--text-secondary);
}

/* ---------------------------------------------------- images */
.img-slot {
  position: relative; width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  display: grid; place-items: center;
  text-align: center; padding: 26px;
  min-height: 210px;
  color: var(--text-muted);
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-slot .slot-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); font-weight: 700;
}
.img-slot .slot-desc {
  font-size: 13.5px; margin-top: 10px; max-width: 34ch; line-height: 1.5;
}
.img-slot .slot-dims {
  font-family: var(--font-mono); font-size: 11px;
  margin-top: 10px; color: var(--text-muted);
}
.img-slot.tall { min-height: 320px; }

/* ---------------------------------------------------- honesty strip */
.honesty {
  background: var(--surface-1);
  border-block: 1px solid var(--border);
  padding: 42px 0;
}
.honesty-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 14px;
}
.honesty-card {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 19px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--text-secondary);
  position: relative;
}
.honesty-card .q {
  font-family: var(--font-display); font-weight: 700;
  color: var(--text-primary); font-size: 15.5px;
  display: block; margin-bottom: 7px;
}
.honesty-card .mark {
  position: absolute; top: 13px; right: 15px;
  font-size: 17px; opacity: .5;
}

/* ---------------------------------------------------- answer cards */
.answers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}
.answer-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 27px 27px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.answer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.answer-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--rail, var(--baseline));
}
.answer-card.win-a { --rail: var(--series-1); }
.answer-card.win-b { --rail: var(--series-2); }
.answer-card.win-tie { --rail: linear-gradient(90deg, var(--series-1) 0 50%, var(--series-2) 50% 100%); }
.answer-card.win-none { --rail: var(--critical); }
.answer-card.win-too-close {
  --rail: repeating-linear-gradient(90deg,
    var(--baseline) 0 8px, transparent 8px 14px);
}
.win-too-close .verdict .swatch {
  background: repeating-linear-gradient(45deg,
    var(--series-1) 0 3px, var(--series-2) 3px 6px);
}
.win-too-close .verdict .name { color: var(--text-secondary); }
.too-close-note {
  margin: 0 0 15px; padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
}
.too-close-note b { color: var(--text-primary); }

.answer-card.is-exclusive {
  border-color: color-mix(in srgb, var(--brand) 36%, transparent);
  box-shadow: var(--shadow-lg);
}
.excl-badge {
  position: absolute; top: 0; left: 0;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  padding: 5px 13px 5px 27px;
  border-radius: 0 0 var(--r) 0;
  z-index: 2;
}
.is-exclusive .ask { margin-top: 16px; }

.answer-card .ask {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20.5px; letter-spacing: -.02em;
  margin-bottom: 16px; padding-right: 34px;
}
.answer-card .icon {
  position: absolute; top: 24px; right: 24px;
  font-size: 21px; opacity: .55;
}

.verdict {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 15px;
}
.verdict .swatch {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
  background: var(--baseline);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.win-a .verdict .swatch { background: var(--series-1); }
.win-b .verdict .swatch { background: var(--series-2); }
.win-tie .verdict .swatch { background: linear-gradient(135deg, var(--series-1) 0 50%, var(--series-2) 50% 100%); }
.win-none .verdict .swatch { background: var(--critical); }
.verdict .name {
  font-weight: 700; font-size: 16px;
  font-family: var(--font-display); letter-spacing: -.015em;
}
.verdict .margin {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.answer-card .because {
  color: var(--text-secondary); font-size: 15.5px; line-height: 1.6;
}
.answer-card .because b { color: var(--text-primary); font-weight: 600; }

/* ---------------------------------------------------- chart */
.chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 30px 24px;
  box-shadow: var(--shadow);
}
.chart-head {
  display: flex; align-items: flex-start; gap: 20px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.chart-head h3 { font-size: 20px; }
.chart-head .hint { font-size: 14px; color: var(--text-muted); margin-top: 5px; }

.legend { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.legend .item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-secondary); font-weight: 500;
}
.legend .key { width: 11px; height: 11px; border-radius: 3px; }
.legend .key.a { background: var(--series-1); }
.legend .key.b { background: var(--series-2); }

.view-switch {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--grid);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.view-switch .mode-toggle { flex: none; }
.view-note {
  margin: 0; font-size: 13.5px; color: var(--text-muted);
  max-width: 56ch; line-height: 1.5;
}
.view-note b { color: var(--text-secondary); }

.bars { margin-top: 22px; }
.bar-row { padding: 13px 0; border-bottom: 1px solid var(--grid); }
.bar-row:last-child { border-bottom: 0; }
.bar-row .label {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 9px; flex-wrap: wrap;
}
.bar-row .label .cat {
  font-weight: 600; font-size: 15.5px;
}
.bar-row .label .plain {
  font-size: 13.5px; color: var(--text-muted);
}
.bar-row .label .flag {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap;
}
.bar-row .label .flag.a { color: var(--series-1); border-color: color-mix(in srgb, var(--series-1) 40%, transparent); background: var(--series-1-wash); }
.bar-row .label .flag.b { color: var(--series-2); border-color: color-mix(in srgb, var(--series-2) 40%, transparent); background: var(--series-2-wash); }

.track-pair { display: grid; gap: 2px; }  /* 2px surface gap between adjacent bars */
.track {
  position: relative; height: 17px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.track .fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 0 4px 4px 0;   /* 4px rounded data-end, anchored to baseline */
  width: 0; transition: width .9s cubic-bezier(.2,.8,.2,1);
}
.track.a .fill { background: var(--series-1); }
.track.b .fill { background: var(--series-2); }
/* Borrowed third-party data: one sequential hue, visually distinct from the
   two-series look of our own head-to-head charts. */
.track.eff { height: 21px; }
.track.eff .fill { background: var(--brand); }

.src-line {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--grid);
  font-size: 13px; line-height: 1.55; color: var(--text-muted);
}
.src-line b { color: var(--text-secondary); }

#stepBox > div {
  padding: 5px 0; border-bottom: 1px solid var(--border);
}
#stepBox > div:last-child { border-bottom: 0; }
#stepBox code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--surface-1); padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border);
}
.track .val {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-primary);
  transition: left .9s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}

/* ---------------------------------------------------- awards */
.awards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 16px;
}
.award {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 23px;
  position: relative; overflow: hidden;
}
.award .trophy { font-size: 25px; display: block; margin-bottom: 12px; }
.award .title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15.5px; letter-spacing: -.015em;
  margin-bottom: 9px;
}
.award .winner {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; margin-bottom: 9px;
}
.award .winner .swatch { width: 10px; height: 10px; border-radius: 3px; }
.award.a .winner .swatch { background: var(--series-1); }
.award.b .winner .swatch { background: var(--series-2); }
.award.none .winner { color: var(--critical); }
.award .why { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* ---------------------------------------------------- failure block */
.failure {
  background: linear-gradient(160deg, color-mix(in srgb, var(--critical) 9%, var(--surface-1)), var(--surface-1) 62%);
  border: 1px solid color-mix(in srgb, var(--critical) 30%, transparent);
  border-radius: var(--r-lg);
  padding: 34px 36px;
}
.failure h3 { font-size: 25px; margin-bottom: 14px; }
.failure .zero-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: 24px;
}
.zero-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 17px 19px;
}
.zero-card .tid {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--critical); font-weight: 700; letter-spacing: .1em;
}
.zero-card .tname {
  font-weight: 700; font-size: 15.5px; margin: 6px 0 10px;
  font-family: var(--font-display);
}
.zero-card .sc {
  display: flex; gap: 16px; font-family: var(--font-mono);
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.zero-card .sc b { color: var(--critical); }

/* ---------------------------------------------------- receipts table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow);
}
table.receipts {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; min-width: 660px;
}
table.receipts th {
  text-align: left; padding: 13px 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  position: sticky; top: 0;
}
table.receipts td {
  padding: 12px 16px; border-bottom: 1px solid var(--grid);
  vertical-align: top;
}
table.receipts tr:last-child td { border-bottom: 0; }
table.receipts tbody tr:hover { background: var(--surface-2); }
table.receipts .tid {
  font-family: var(--font-mono); font-weight: 700; font-size: 12.5px;
  color: var(--text-muted);
}
table.receipts .sc { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
table.receipts .sc.win { color: var(--good-text); }
table.receipts .sc.lose { color: var(--text-muted); }
table.receipts .sc.zero { color: var(--critical); }
table.receipts .note { font-size: 13px; color: var(--text-secondary); max-width: 46ch; }

.cat-chip {
  display: inline-block; font-size: 11.5px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-secondary); white-space: nowrap;
}

/* ---------------------------------------------------- ladder */
.ladder-controls {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.filter-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  appearance: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary);
  transition: all .15s ease;
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.chk {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-secondary); cursor: pointer;
}
.chk input { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }

.ladder-table th.sortable { cursor: pointer; user-select: none; }
.ladder-table th.sortable:hover { color: var(--text-primary); }
.ladder-table th.num-col, .ladder-table td.num-col { text-align: right; }
.ladder-table tr.tied td.tid { color: var(--text-muted); font-weight: 400; }
.ladder-table td { vertical-align: middle; }

.vendor-chip {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.vendor-chip.v-a { background: var(--series-1-wash); color: var(--series-1); }
.vendor-chip.v-b { background: var(--series-2-wash); color: var(--series-2); }

.cell-bar {
  position: relative; height: 20px; min-width: 108px;
  background: var(--surface-2); border-radius: 4px;
  display: inline-block; width: 100%; max-width: 160px;
}
.cb-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--brand); border-radius: 4px 0 0 4px; opacity: .28;
}
.cb-val {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: flex-end;
  padding-right: 8px;
  font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700;
}
.mini-warn {
  font-size: 10.5px; font-family: var(--font-mono);
  color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}

/* ---------------------------------------------------- scatter */
#scatterWrap { margin-top: 20px; position: relative; }
#scatter { width: 100%; height: auto; display: block; overflow: visible; }
.grid-l { stroke: var(--grid); stroke-width: 1; }
.ax-l { fill: var(--text-muted); font-size: 11.5px; font-family: var(--font-body);
        font-variant-numeric: tabular-nums; }
.ax-t { fill: var(--text-secondary); font-size: 12.5px; font-weight: 600;
        font-family: var(--font-body); }
.sweet-label { fill: var(--good-text); font-size: 11.5px; font-weight: 600;
               font-family: var(--font-body); opacity: .85; }
.pt { stroke: var(--surface-1); stroke-width: 2; cursor: pointer;
      transition: r .12s ease; }
.pt-a { fill: var(--series-1); }
.pt-b { fill: var(--series-2); }
.pt:hover { r: 10; }
.scatter-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 9px 12px;
  font-size: 13px; line-height: 1.45; box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
.t-dim { color: var(--text-muted); font-size: 12px; }

/* ---------------------------------------------------- price panel */
.price-table input.price-input {
  width: 88px; text-align: right;
  font: inherit; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--page); color: var(--text-primary);
}
.price-table input.price-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.price-table input.price-input.edited {
  border-color: var(--brand); background: var(--brand-wash);
  font-weight: 700;
}
.price-actions {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 16px;
}
.price-status { font-size: 13.5px; color: var(--text-secondary); }
.price-status b { color: var(--text-primary); }

/* ---------------------------------------------------- anecdote */
.anecdote {
  border-left: 4px solid var(--brand);
  background: var(--surface-1);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 30px 34px;
  box-shadow: var(--shadow);
}
.anecdote h3 { font-size: 23px; margin-bottom: 14px; }
.anecdote p { color: var(--text-secondary); font-size: 16.5px; }
.anecdote p:last-child { color: var(--text-primary); font-weight: 500; }

/* ---------------------------------------------------- method */
.method-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}
.method-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r); padding: 21px 22px;
}
.method-card h4 {
  font-size: 15.5px; margin-bottom: 9px;
  display: flex; align-items: center; gap: 9px;
}
.method-card p { font-size: 14.5px; color: var(--text-secondary); }

.warnbox {
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-1));
  border-radius: var(--r); padding: 19px 21px;
  font-size: 14.5px; color: var(--text-secondary);
  display: flex; gap: 13px; align-items: flex-start;
  margin-top: 18px;
}
.warnbox .ico { font-size: 18px; flex: none; }
.warnbox b { color: var(--text-primary); }

/* ---------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 60px;
  color: var(--text-muted); font-size: 14px;
  background: var(--surface-1);
}
.site-footer .cols {
  display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.site-footer a { color: var(--text-secondary); }

/* ---------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .nav-links { display: none; }
  section { padding: 56px 0; }
  body { font-size: 16px; }
}
@media (max-width: 560px) {
  /* The wordmark + both toggles overflowed 375px. Shrink the chrome
     rather than let the whole page scroll sideways. */
  .wrap, .narrow { width: calc(100% - 28px); }
  .site-header .bar { height: 58px; gap: 8px; }
  .wordmark { font-size: 15px; gap: 7px; }
  .wordmark .dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px var(--brand-wash); }
  .header-tools { gap: 6px; }
  .mode-toggle button { padding: 6px 10px; font-size: 11.5px; }
  .mode-toggle button[data-mode="nerd"] { font-size: 0; }
  .mode-toggle button[data-mode="nerd"]::after {
    content: "Nerd"; font-size: 11.5px;
  }
  .icon-btn { width: 32px; height: 32px; font-size: 14px; }
  .hero-stats .stat-tile { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .answer-card { padding: 22px 21px; }
  .failure, .anecdote { padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================== multi-page shell */
.nav-links a.on { color: var(--brand); font-weight: 600; }
.site-footer .cols > div { min-width: 150px; }
.site-footer strong { color: var(--text-secondary); }

/* ---------------------------------------------------- separates / solved */
.split-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.split-col {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px 24px 12px;
}
#solved { background: var(--surface-2); }
.split-h {
  font-size: 17px; margin: 0 0 4px;
  display: flex; align-items: center; gap: 9px;
}
.split-h.good { color: var(--good-text); }
.split-h.dim { color: var(--text-muted); }
.split-note {
  font-size: 13.5px; color: var(--text-muted); margin: 0 0 14px;
}
.sep-list { display: flex; flex-direction: column; }
.sep-row {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--grid);
  text-decoration: none; color: inherit;
}
.sep-row:hover { background: var(--surface-2); margin-inline: -10px; padding-inline: 10px; border-radius: var(--r-sm); }
#solved .sep-row:hover { background: var(--surface-1); }
.sep-main { flex: 1; min-width: 0; }
.sep-name { display: block; font-weight: 700; font-size: 15.5px; }
.sep-plain { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.sep-verdict {
  text-align: right; font-size: 14px; white-space: nowrap;
  color: var(--text-secondary);
}
.sep-verdict b { color: var(--text-primary); }
.sep-pct {
  display: block; font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.is-solved .sep-name { color: var(--text-secondary); font-weight: 600; }
.excl-dot {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--brand); color: #fff;
  padding: 2px 7px; border-radius: 999px; vertical-align: 2px;
}

/* ---------------------------------------------------- link cards */
.award.link-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.award.link-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}
.card-link {
  margin-top: auto; padding-top: 16px;
  font-size: 14px; font-weight: 600; color: var(--brand);
  text-decoration: none; display: inline-block;
}
.card-link:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .split-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- the shock chart */
.shock-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 30px 8px;
  box-shadow: var(--shadow-lg);
}
.shock-legend {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--grid);
  font-size: 13.5px; color: var(--text-secondary); font-weight: 500;
}
.sl-item { display: flex; align-items: center; gap: 9px; }
.sl-key { width: 22px; height: 11px; border-radius: 3px; }
.sl-key.score { background: var(--series-1); }
.sl-key.cost  { background: var(--series-2); }

.shock-row {
  display: grid; grid-template-columns: 210px 1fr;
  gap: 20px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--grid);
}
.sr-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -.015em; line-height: 1.25;
}
.sr-vendor {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: 11.5px; color: var(--text-muted); margin-top: 3px;
}
.sr-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sr-side { display: flex; align-items: center; gap: 12px; }
.sr-track {
  position: relative; flex: 1; height: 26px;
  background: var(--surface-2); border-radius: 5px; overflow: hidden;
}
.sr-track span {
  position: absolute; inset: 0 auto 0 0; border-radius: 5px 0 0 5px;
  animation: growbar .8s cubic-bezier(.2,.8,.2,1) both;
}
.sr-track.score span { background: var(--series-1); }
.sr-track.cost  span { background: var(--series-2); }
@keyframes growbar { from { width: 0 !important; } }
.sr-val {
  min-width: 62px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px;
}
.sr-val.money { color: var(--series-2); }

.shock-punch {
  padding: 22px 0 24px; font-size: 19px; line-height: 1.5;
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: -.015em;
}
.shock-punch b { font-weight: 700; }

@media (max-width: 760px) {
  .shock-row { grid-template-columns: 1fr; gap: 10px; }
  .sr-bars { grid-template-columns: 1fr; gap: 8px; }
  .shock-card { padding: 20px 18px 8px; }
  .shock-punch { font-size: 17px; }
}

/* ==================================================== page heroes */
.page-hero { padding: 60px 0 44px; }
.page-hero h1 {
  font-size: clamp(34px, 5.4vw, 56px); letter-spacing: -.035em; margin-top: 6px;
}
.page-lede {
  font-size: clamp(17px, 2vw, 20px); color: var(--text-secondary);
  max-width: 62ch; margin-top: 16px;
}
.back-link {
  display: inline-block; margin-bottom: 14px; font-size: 14px;
  color: var(--text-muted); text-decoration: none; font-weight: 500;
}
.back-link:hover { color: var(--brand); }

/* third vendor colour: self-hosted. Deliberately the violet brand hue,
   which is neither series colour, so it can never be confused with a
   vendor bar. Validated as slot 7 of the reference palette. */
.legend .key.c { background: var(--brand); }
.track.c .fill { background: var(--brand); }
.flag.c { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent);
          background: var(--brand-wash); }
.vendor-chip.v-c { background: var(--brand-wash); color: var(--brand); }
.pt-c { fill: var(--brand); }

/* ==================================================== frontier chart */
#frontierWrap { margin-top: 20px; position: relative; }
#frontier { width: 100%; height: auto; display: block; overflow: visible; }
.frontier-line {
  fill: none; stroke: var(--good); stroke-width: 2.5;
  stroke-dasharray: 6 5; opacity: .75;
}
.pt.on-front { stroke: var(--good); stroke-width: 2.5; }
.t-good { color: var(--good-text); font-weight: 600; }

/* ==================================================== mini table */
.mini-table {
  width: 100%; border-collapse: collapse; margin-top: 18px;
  font-size: 15px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.mini-table th, .mini-table td {
  padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}
.mini-table th:first-child, .mini-table td:first-child {
  text-align: left; font-weight: 500; color: var(--text-secondary);
  font-variant-numeric: normal;
}
.mini-table thead th {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  background: var(--surface-2); color: var(--text-primary);
}
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table td.hot { color: var(--series-2); font-weight: 700; }

/* ==================================================== effort curves */
.effort-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px; margin-top: 20px;
}
.ec-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 16px 12px;
}
.ec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px; font-size: 15.5px;
}
.ec-head > b { white-space: nowrap; }   /* was wrapping to "Opus / 5" */
.ec-verdict {
  font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);
  text-align: right;
}
.ec-verdict.flat { color: var(--warning); font-weight: 700; }
.ec-svg { width: 100%; height: auto; display: block; }
/* Money green -- the palette's CATEGORICAL green (slot 6), deliberately
   NOT the status green. Status colours are reserved for good/warning/
   critical, and a rising "good-green" line meaning rising cost reads
   backwards. Validated against the score blue: normal-vision dE 29.0,
   protan 26.5. Tritan comes in at 7.6, inside the warn band, so both
   lines carry a direct end label rather than relying on colour alone. */
.ec-score { fill: none; stroke: var(--series-1); stroke-width: 2.5; }
.ec-cost  { fill: none; stroke: var(--money); stroke-width: 2.5; }
.ec-dot { fill: var(--series-1); stroke: var(--surface-2); stroke-width: 2; }
.ec-cdot { fill: var(--money); stroke: var(--surface-2); stroke-width: 2; }
.ec-tag {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em;
}
.ec-tag.s { fill: var(--series-1); }
.ec-tag.c { fill: var(--money); }
.ec-foot {
  font-size: 12.5px; color: var(--text-secondary);
  border-top: 1px solid var(--grid); padding-top: 9px; margin-top: 4px;
}

/* ==================================================== heatmap */
.heat { border-collapse: collapse; font-size: 13px; width: 100%; }
.heat th, .heat td { border: 1px solid var(--surface-1); }
.heat .hcorner {
  text-align: left; padding: 10px 14px; background: var(--surface-2);
  position: sticky; left: 0; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.heat .hcol {
  padding: 10px 8px; background: var(--surface-2); font-size: 12px;
  font-weight: 600; vertical-align: bottom; min-width: 74px; line-height: 1.25;
}
.heat .hrow {
  text-align: left; padding: 7px 14px; background: var(--surface-1);
  white-space: nowrap; position: sticky; left: 0; z-index: 1;
  font-weight: 500;
}
.heat .hrow a { color: inherit; text-decoration: none; }
.heat .hrow a:hover { color: var(--brand); text-decoration: underline; }
.heat .hcell {
  text-align: center; padding: 7px 6px;
  font-variant-numeric: tabular-nums; font-weight: 600;
  background: color-mix(in srgb, var(--series-1) calc(var(--t) * 78%), var(--surface-1));
  /* Text flips to white only once the fill is dark enough to carry it.
     A smooth colour-mix put mid-grey text on mid-blue cells, which was
     unreadable in exactly the middle of the range where most values sit. */
  color: var(--text-primary);
}
.heat .hcell[style*="--t:0.6"], .heat .hcell[style*="--t:0.7"],
.heat .hcell[style*="--t:0.8"], .heat .hcell[style*="--t:0.9"],
.heat .hcell[style*="--t:1"] { color: #fff; }
.heat .hcell.na { background: var(--surface-2); color: var(--text-muted); }

/* ==================================================== compare + items */
.compare-controls {
  display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
  font-size: 14.5px; color: var(--text-secondary);
}
.compare-controls select {
  font: inherit; font-size: 14px; padding: 7px 11px; margin-left: 7px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary);
}
tr.split-row td { background: color-mix(in srgb, var(--warning) 7%, transparent); }
.row-link { color: inherit; text-decoration: none; font-weight: 700; }
.row-link:hover { color: var(--brand); text-decoration: underline; }

@media (max-width: 760px) {
  .effort-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 40px 0 30px; }
}

/* ==================================================== the C3 code story */
.code-story {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 28px 24px;
  box-shadow: var(--shadow-lg);
}
.cs-panes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.cs-pane { margin: 0; }
.cs-pane figcaption {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-bottom: 0;
}
.cs-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cs-dot.r { background: #ec6a5e; } .cs-dot.y { background: #f4bf4f; }
.cs-dot.g { background: #61c554; }
.cs-title {
  margin-left: 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.cs-code {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  background: #14141c; color: #d8d8e4;
  border: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75;
  min-height: 178px;
}
.cs-code code { white-space: pre; }
.cs-code .k  { color: #c792ea; }
.cs-code .fn { color: #82aaff; }
.cs-code .s  { color: #c3e88d; }
.cs-code .hl {
  color: #ff6d6d; font-weight: 700;
  background: rgba(255,109,109,.14); border-radius: 3px; padding: 0 3px;
}
.cs-ghost { color: #565672; font-style: italic; }
.cs-missing {
  display: block; position: relative; cursor: help;
  border-left: 3px solid var(--critical);
  margin-left: -18px; padding-left: 15px;
  background: rgba(208,59,59,.12);
}
.cs-missing::after {
  content: attr(data-tip);
  position: absolute; left: 12px; top: calc(100% + 8px); z-index: 6;
  width: 280px; padding: 10px 13px;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  white-space: normal; opacity: 0; pointer-events: none;
  transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease;
}
.cs-missing:hover::after, .cs-missing:focus::after {
  opacity: 1; transform: translateY(0);
}
.cs-prompt { color: #61c554; }
.cs-fail   { color: #ff6d6d; font-weight: 700; }
.cs-pass   { color: #61c554; font-weight: 700; }
.cs-dim    { color: #565672; }
.cs-score  { color: #ff6d6d; font-weight: 700; }
.cs-foot {
  margin-top: 9px; font-size: 12.5px; color: var(--text-muted);
  font-style: italic;
}
.cs-verdict {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--grid);
  font-size: 17px; line-height: 1.6; color: var(--text-secondary);
  max-width: 78ch;
}
.cs-verdict b { color: var(--text-primary); }
.cs-verdict code {
  font-family: var(--font-mono); font-size: 14px;
  background: var(--surface-2); padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--text-primary);
}

@media (max-width: 820px) {
  .cs-panes { grid-template-columns: 1fr; }
  .code-story { padding: 20px 16px; }
  .cs-missing::after { width: min(260px, 70vw); }
}

/* ==================================================== story cell + modal */
.heat .hcell.has-story {
  cursor: pointer; position: relative;
  outline: 2px dashed var(--critical); outline-offset: -3px;
}
.heat .hcell.has-story::after {
  content: "?"; position: absolute; top: 1px; right: 3px;
  font-size: 9px; font-weight: 800; line-height: 1;
  color: var(--critical);
}
.heat .hcell.has-story:hover, .heat .hcell.has-story:focus-visible {
  outline-style: solid; outline-offset: -2px;
}

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 11, 11, .62);
  backdrop-filter: blur(3px);
  animation: fadein .16s ease both;
}
.modal-box {
  position: relative; z-index: 1;
  width: min(1080px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--page); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 30px 32px 34px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.55);
  animation: popin .2s cubic-bezier(.2,.9,.3,1) both;
}
.modal-title {
  font-size: clamp(22px, 3vw, 30px); margin: 0 0 20px; padding-right: 46px;
}
.modal-x {
  position: absolute; top: 16px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary); font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.modal-x:hover { color: var(--text-primary); border-color: var(--border-strong); }
.modal-box .code-story { box-shadow: none; border: 0; padding: 0; background: none; }

@keyframes fadein { from { opacity: 0; } }
@keyframes popin  { from { opacity: 0; transform: translateY(10px) scale(.985); } }

@media (max-width: 700px) {
  .modal { padding: 12px; }
  .modal-box { padding: 22px 16px 26px; max-height: 92vh; }
}

/* ---------------------------------------------- electricity / self-hosted
   Self-hosted configs are costed in watts, not tokens. The estimate must
   never read as a metered figure, hence the badge and the violet hue that
   already marks self-hosted everywhere else on the site. */
.watt-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px 2px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: 1px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  cursor: help;
}

.power-panel {
  margin-top: 28px;
  padding: 22px 24px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--card));
}
.power-panel h3 { margin: 0 0 8px; font-size: 19px; }
.power-panel .lede { margin: 0 0 16px; font-size: 15px; }
.power-panel .src-line { margin-top: 14px; }

.power-grid { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; }
.power-field { display: flex; flex-direction: column; gap: 4px; max-width: 260px; }
.power-field label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.power-field .price-input { width: 130px; }
.power-field .t-dim { font-size: 12px; line-height: 1.45; }
.power-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.power-presets .chip.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
  font-weight: 700;
}

/* ------------------------------------------- both graders, in the score cell
   The headline score is the mean of two rival AI graders. Showing only the
   mean hid the fact that two models produced it, which is the single most
   attackable thing about this site -- so both numbers are always visible,
   in Simple mode too, not tucked behind Nerd. */
.th-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  opacity: .62;
  margin-top: 2px;
}
.gsplit {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.gsplit-i i {
  font-style: normal;
  opacity: .6;
  margin-right: 3px;
}

/* ============================================================== hit counter
   Deliberately, unapologetically 1996. Stays green-on-black in both themes,
   because a period hit counter that respects your color scheme is not a
   period hit counter. The rest of the site is modern; this is the one bit
   allowed to be a fossil. */
.hitcounter {
  margin: 46px auto 4px;
  padding-top: 30px;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.hc-plate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 18px;
  background: #1b1b1b;
  border: 2px outset #7d7d7d;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.hc-lab {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b9b9b9;
}
.hc-odo { display: inline-flex; gap: 3px; }
.hc-d {
  display: inline-block;
  min-width: 22px;
  padding: 5px 0 4px;
  font-family: "Courier New", Courier, monospace;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #33ff5b;
  text-shadow: 0 0 7px rgba(51, 255, 91, .55);
  background: linear-gradient(#050505 0%, #161616 48%, #050505 52%, #101010 100%);
  border: 1px solid #000;
  border-radius: 2px;
}
.hc-d[data-roll] { animation: hcRoll .5s cubic-bezier(.3, 1.6, .5, 1) 1; }
@keyframes hcRoll {
  0%   { transform: translateY(-60%); opacity: 0; }
  60%  { transform: translateY(6%);   opacity: 1; }
  100% { transform: translateY(0); }
}

.hc-fine {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.hc-fine b { color: var(--ink); }

.hc-retro {
  margin: 16px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.hc-badge {
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px 4px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.hc-badge b { color: var(--ink); }
.hc-blink { animation: hcBlink 1.4s steps(1, end) infinite; }
@keyframes hcBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .28; } }

/* Nobody in 1996 asked, but somebody in 2026 will. */
@media (prefers-reduced-motion: reduce) {
  .hc-d[data-roll], .hc-blink { animation: none; }
}

/* ================================================================== share
   Ordinary links styled as buttons. Brand hues are hand-set per network
   and used only as a left edge + hover wash, so seven of them in a row
   read as one control group rather than a ransom note. */
.sharebar {
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.sh-head { margin-bottom: 14px; }
.sh-head strong { display: block; font-size: 16px; color: var(--ink); }
.sh-head span { font-size: 13px; color: var(--text-secondary); }

.sh-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.sh-btn {
  --sh: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sh);
  border-radius: 7px;
  transition: background .14s, border-color .14s, transform .14s;
}
.sh-btn:hover {
  background: color-mix(in srgb, var(--sh) 12%, var(--card));
  border-color: color-mix(in srgb, var(--sh) 45%, var(--line));
  border-left-color: var(--sh);
  transform: translateY(-1px);
}
.sh-btn:active { transform: none; }
.sh-btn:focus-visible { outline: 2px solid var(--sh); outline-offset: 2px; }

.sh-native { --sh: var(--brand); }
.sh-copy   { --sh: #6b7280; }
.sh-x      { --sh: #0f0f0f; }
.sh-bsky   { --sh: #1185fe; }
.sh-rdt    { --sh: #ff4500; }
.sh-hn     { --sh: #ff6600; }
.sh-li     { --sh: #0a66c2; }
.sh-mail   { --sh: #16a34a; }
:root[data-theme="dark"] .sh-x { --sh: #e7e7e7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sh-x { --sh: #e7e7e7; }
}

.sh-copy.ok {
  --sh: #16a34a;
  background: color-mix(in srgb, #16a34a 16%, var(--card));
  border-color: #16a34a;
}
.sh-note {
  margin: 12px auto 0;
  max-width: 64ch;
  font-size: 12px;
  color: var(--text-secondary);
}
.sh-note code {
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
@media (prefers-reduced-motion: reduce) { .sh-btn { transition: none; } }
.sh-note code.sh-selected {
  background: color-mix(in srgb, var(--brand) 25%, transparent);
  outline: 1px solid var(--brand);
}

/* ============================================================== findings
   Long-form page: numbered discoveries, each with a confidence tag. The
   tag colours are deliberately NOT the vendor series -- these grade our
   own certainty, not anybody's model. */
.tagkey {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.tagkey-lede { margin: 0 0 18px; font-size: 15.5px; color: var(--text-secondary); }
.tagkey-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tk {
  padding: 14px 16px 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--tc, var(--line));
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.tk b { display: block; color: var(--ink); margin: 7px 0 3px; }

.tag-pill {
  display: inline-block;
  padding: 3px 10px 4px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tc, #6b7280);
  white-space: nowrap;
}
.tk-m { --tc: #0f7b3f; }
.tk-d { --tc: #2a78d6; }
.tk-o { --tc: #b26a00; }
.tk-i { --tc: #8a3ffc; }
.tk.tk-m .tag-pill, .tk.tk-d .tag-pill, .tk.tk-o .tag-pill, .tk.tk-i .tag-pill { background: var(--tc); }

/* ---- one finding ------------------------------------------------------ */
.find {
  margin: 30px 0 0;
  padding: 26px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.find > header { margin-bottom: 14px; }
.find > header h3 {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -.01em;
}
.find p { font-size: 16px; line-height: 1.68; max-width: 74ch; }
.find ul { margin: 8px 0 0 18px; }
.find li { font-size: 15.5px; line-height: 1.6; margin-bottom: 6px; }

.find .punch {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  font-size: 17.5px;
  line-height: 1.5;
  border-radius: 0 8px 8px 0;
}
.takeaway {
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.62;
}
.caveat {
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #b26a00 40%, var(--line));
  background: color-mix(in srgb, #b26a00 7%, transparent);
  font-size: 14.5px;
  line-height: 1.6;
}
.term-block {
  margin: 16px 0;
  overflow-x: auto;
  border-radius: 10px;
  background: #14161a;
  border: 1px solid #23262c;
}
.term-block pre { margin: 0; padding: 16px 18px; }
.term-block code {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #cfd6e0;
  white-space: pre;
}
.quote-block {
  margin: 16px 0;
  padding: 14px 20px;
  border-left: 4px solid var(--line);
  color: var(--text-secondary);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.62;
}
.quote-block code { font-style: normal; }
table.compact td, table.compact th { padding: 8px 12px; font-size: 14px; }
table.receipts tr.hl td { background: color-mix(in srgb, var(--brand) 8%, transparent); }

/* ---- flaky cards ------------------------------------------------------ */
#flakyCards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 18px 0 0; }
.flaky-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.flaky-card .fk-n { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: 6px; }
.flaky-card .fk-l { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; }
.fk-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); }
.fk-seg { height: 100%; }
.fk-seg.ok  { background: #0f7b3f; }
/* 'never passed' must be visibly distinct from the empty track behind it --
   at 25%% ink on a --line track the two were indistinguishable and the bar
   read as if those items simply did not exist. */
.fk-seg.bad { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.fk-seg.wob { background: #eb6834; }
.fk-k { margin-top: 9px; font-size: 12px; color: var(--text-secondary); }

.zero-card.wide { grid-column: 1 / -1; }
#findBias { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 18px 0; }

.unknown-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.unk {
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.unk b { display: block; color: var(--ink); margin-bottom: 5px; }

@media (max-width: 640px) {
  .find { padding: 20px 18px; }
  .find > header h3 { font-size: 20px; }
}

/* --------------------------------------------- findings: who it applies to
   Vendor hues match the rest of the site (blue = Anthropic, orange = OpenAI,
   violet = self-hosted). "Both" gets a two-tone edge rather than a third
   colour, because inventing a colour for "both" is how a legend stops
   being readable. */
.scopekey { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.scope-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-chip { display: inline-flex; align-items: center; gap: 7px; }
.scope-chip .sc-n {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.scope-chip.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-weight: 700;
}
.scope-chip.on .sc-n { background: color-mix(in srgb, var(--brand) 22%, transparent); }

.scope-pill {
  display: inline-block;
  margin-left: 7px;
  padding: 3px 10px 4px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sp, var(--ink));
  background: color-mix(in srgb, var(--sp, var(--ink)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp, var(--ink)) 38%, transparent);
}
.scope-pill.s-a    { --sp: #2a78d6; }
.scope-pill.s-b    { --sp: #eb6834; }
.scope-pill.s-loc  { --sp: #4a3aa7; }
.scope-pill.s-m    { --sp: #6b7280; }
.scope-pill.s-both {
  --sp: #6b7280;
  color: var(--ink);
  border: 0;
  padding: 4px 11px 5px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, #2a78d6, #eb6834) border-box;
  border: 1px solid transparent;
}
:root[data-theme="dark"] .scope-pill.s-a { --sp: #6ea8f0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scope-pill.s-a { --sp: #6ea8f0; }
}

.spread-gap {
  text-align: center;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  margin: 2px 0 6px;
}
#inputSpread { margin: 16px 0; }

/* A filtered-out finding must not leave its section heading stranded. */
section[hidden], .find[hidden] { display: none !important; }