/* Variant C — "Load plan". A dark, data-led page that opens with the van-loading race
   from chapter 7. Loaded after site.css; everything is scoped to body.v-c.
   The dark theme is done by redefining the design system's semantic tokens, so the
   sections shared with variant A follow without restyling each one. */

.v-c {
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-400);
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.32);
  --surface-page: var(--gray-900);
  --surface-subtle: var(--blue-900);
  --surface-card: rgba(255, 255, 255, 0.04);
  --color-primary-subtle: rgba(39, 153, 209, 0.16);
  color-scheme: dark;
  background: var(--gray-900);
}

/* ---------- Chrome ---------- */
.v-c .site-header { background: rgba(4, 22, 44, 0.86); }
.v-c .lang-switch button[aria-pressed="true"] { background: var(--gray-50); color: var(--gray-900); }
.v-c .menu-btn { color: var(--gray-50); }
.v-c .site-nav { background: var(--gray-900); }
.v-c .skip { background: var(--gray-800); }
.v-c .variant-switch { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), var(--shadow-lg); }

/* ---------- Hero: the race ---------- */
.race-hero {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 72px); align-items: center;
  padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 104px);
}
.race-hero .booxit-overline { font-size: 12px; color: var(--blue-300); }
.race-hero__title {
  margin-top: 18px;
  font-size: clamp(38px, 4.6vw, 72px); line-height: 0.98; letter-spacing: -0.015em;
  text-wrap: balance;
}
.race-hero__title em { font-style: normal; color: var(--blue-400); }
.race-hero .hero__lede { margin-top: 24px; max-width: 560px; }
.race-hero .hero__lede em { color: var(--text-primary); }
.race-hero .hero__cta { margin-top: 32px; }

.race { margin: 0; display: grid; gap: 12px; }
.race__lane {
  padding: 16px 20px 14px;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
}
.race__lane--bx { border-color: rgba(39, 153, 209, 0.5); }
.race__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.race__name {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-secondary);
}
.race__lane--bx .race__name { color: var(--blue-300); }
.race__clock {
  font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1; color: var(--text-primary);
}
.race__clock::after { content: " min"; font-size: 13px; color: var(--text-muted); }
.race__lane--bx .race__clock { color: var(--blue-300); }

.race__van { display: block; width: 100%; height: clamp(120px, 12.5vw, 184px); margin-top: 10px; overflow: hidden; }
.race__body { fill: none; stroke: var(--gray-500); stroke-width: 2; stroke-linejoin: round; }
.race__carton { fill: var(--gray-300); stroke: var(--gray-900); stroke-width: 0.8; }
.js .race__carton { opacity: 0; transition: opacity 0.12s; }
.js .race__carton.on { opacity: 0.92; }
.race__shelf { fill: rgba(39, 153, 209, 0.14); stroke: var(--blue-300); stroke-width: 1.4; }
.race__module { fill: var(--blue-500); }

.race__stats { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 13px; }
.race__stats div { display: flex; gap: 8px; align-items: baseline; }
.race__stats dt { color: var(--text-muted); }
.race__stats dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.race__eaws .status { margin-left: 0; }
.js .race__eaws { opacity: 0; transition: opacity 0.3s; }
.js .is-done .race__eaws { opacity: 1; }

.race__caption {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.race__replay {
  flex: none; appearance: none; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: none; color: var(--text-primary); font: 500 12px var(--font-mono);
}
.race__replay:hover { border-color: var(--blue-300); }

/* ---------- Shared sections, dark ---------- */
.v-c .why { background: var(--blue-900); }
.v-c .obstacles li, .v-c .fields { border-top-color: var(--blue-400); }
.v-c .loop__num { color: var(--blue-300); border-color: var(--blue-400); }
.v-c .loop__step .loop__part, .v-c .founder__role, .v-c .timeline__year { color: var(--blue-300); }
.v-c .loop__again > span { background: var(--gray-900); color: var(--blue-300); }
.v-c .loop__again { border-color: rgba(39, 153, 209, 0.45); }
.v-c .results { background: var(--blue-900); }
.results__grid--one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.v-c .story { border-top: 0; }
.v-c .book { background: var(--blue-600); }
.v-c .contact__mail:hover { color: var(--blue-300); }

@media (max-width: 960px) {
  .race-hero { grid-template-columns: minmax(0, 1fr); }
}