/* components/race.css — scoped under .ve-race */
.ve-race .ve-race__intro p { margin: 0; max-width: var(--measure); font-size: var(--fs-m); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.ve-race .ve-race__intro { margin-bottom: var(--s3); }
.ve-race .ve-race__win { background: color-mix(in srgb, var(--ink-3) 18%, transparent); padding-inline: 0.2em; border-radius: var(--r1); }
.ve-race .ve-key__mark[data-mark="wash"]::before { background: color-mix(in srgb, var(--ink-3) 22%, transparent); }
.ve-race .ve-key { white-space: normal; min-width: 0; }
.ve-race .ve-race__noise { color: var(--ink-2); text-decoration: underline 3px var(--noise); text-underline-offset: 4px; }
.ve-race .ve-canvas canvas { cursor: ew-resize; }
.ve-race .ve-figure__stage > .ve-legend { margin-top: 0; }
.ve-race .ve-race__legendnote { margin: var(--s1) 0 var(--s2); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-3); }
.ve-race sup { font-size: max(11px, 0.72em); line-height: 0; }

/* timeline: the track spans exactly the plot's time axis (insets set from the canvas geometry) */
.ve-race .ve-race__playrow { margin-top: var(--s1); }
.ve-race .ve-race__playrow .ve-player {
  grid-template-columns: var(--race-l, 41px) minmax(0, 1fr) var(--race-r, 87px);
  column-gap: 0;
}
.ve-race .ve-race__playrow .ve-player > .ve-btn { grid-column: 1; grid-row: 1; justify-self: start; }
.ve-race .ve-race__playrow .ve-player__track { grid-column: 2; grid-row: 1; }
.ve-race .ve-race__playrow .ve-player__meta { grid-column: 2; grid-row: 2; }
.ve-race .ve-race__playrow .ve-player__time { display: none; }
.ve-race .ve-race__nowline { margin: var(--s1) 0 var(--s4); padding-left: var(--race-l, 41px); font-size: var(--fs-s); line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.ve-race .ve-race__now { display: block; font: 500 var(--fs-xs)/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3); }

/* sliders right under the timeline, then the buttons */
.ve-race .ve-race__sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.ve-race .ve-race__btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.ve-race.is-running .ve-race__btns .ve-btn:first-child { opacity: 0.6; }

/* the result: end sentence, strip */
.ve-race .ve-race__result { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.ve-race .ve-race__end { margin: 0 0 var(--s3); max-width: var(--measure); font-size: var(--fs-m); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.ve-race .ve-race__end .ve-label { color: var(--ink-3); margin-right: var(--s2); }
.ve-race.is-stale .ve-race__strip { opacity: 0.85; }
.ve-race .ve-race__strip {
  display: grid; gap: var(--s2); align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  grid-template-areas:
    "h1   h1 h1     h1 h1  h1 h1"
    "push o1 spread o2 x   .  ."
    "h2   h2 h2     h2 h2  h2 h2"
    "law  .  sim    o3 eq  o4 c";
}
.ve-race .ve-race__rowlab { font: 500 var(--fs-xs)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--s1); }
.ve-race .ve-race__box {
  display: grid; gap: 2px; align-content: start; min-width: 0;
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border-radius: var(--r1);
  border-top: 3px solid var(--tone, var(--rule-strong));
}
.ve-race .ve-race__lab { font: 500 var(--fs-xs)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ve-race .ve-race__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-l); font-weight: 500; line-height: 1.15; color: var(--ink); }
.ve-race .ve-race__sub { font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--ink-3); }
.ve-race .ve-race__nw { white-space: nowrap; display: inline-block; }
.ve-race .ve-race__op { align-self: center; justify-self: center; font-family: var(--font-mono); font-size: var(--fs-m); color: var(--ink-3); }

@media (max-width: 760px) {
  .ve-race .ve-race__sliders { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}
@media (max-width: 560px) {
  .ve-race .ve-race__intro p { font-size: var(--fs-s); }
  .ve-race .ve-race__end { font-size: var(--fs-s); }
  .ve-race .ve-race__box { padding: var(--s2); }
  .ve-race .ve-race__v { font-size: var(--fs-m); }
  /* phone timeline: track over the plot axis; play button and chapter name on the row below */
  .ve-race .ve-race__playrow .ve-player > .ve-btn { grid-column: 2; grid-row: 2; }
  .ve-race .ve-race__playrow .ve-player__meta { grid-column: 2 / 4; grid-row: 2; padding-left: 52px; align-self: center; }
  /* the narration's padding box overlaps the play button: let taps pass through to it */
  .ve-race .ve-race__playrow .ve-player__meta { pointer-events: none; }
  .ve-race .ve-race__playrow .ve-player > .ve-btn { position: relative; z-index: 1; }
  .ve-race .ve-race__nowline { padding-left: 0; }
  /* push | spread, then the ratio, then law | simulated, then model | c */
  .ve-race .ve-race__strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "h1 h1"
      "push spread"
      "x x"
      "h2 h2"
      "law sim"
      "eq c";
  }
  .ve-race .ve-race__op { display: none; }
}
/* one header height for all three sliders, so the tracks and hints line up */
.ve-race .ve-race__sliders .ve-slider { align-content: start; }
.ve-race .ve-race__sliders .ve-slider__top { height: 30px; align-items: center; }
/* the reasoning step from push ÷ spread to the share Φ(x) */
.ve-race .ve-race__why { margin: 0 0 var(--s3); max-width: var(--measure); font-size: var(--fs-s); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ve-race .ve-race__why .ve-label { color: var(--ink-3); margin-right: var(--s2); }
@media (max-width: 560px) {
  .ve-race .ve-race__btns .ve-btn { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 40px; }
}

/* the answer, above the figure: share in A, the model's share, and c (c in its own colour) */
.ve-race .ve-race__headline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s2); }
.ve-race .ve-race__hl { display: grid; gap: 2px; align-content: start; padding: var(--s2) var(--s3); border-left: 3px solid var(--rule-strong); min-width: 0; }
.ve-race .ve-race__hl.is-c { border-left-color: var(--highlight); background: var(--highlight-wash); }
.ve-race .ve-race__hlab { font: 500 var(--fs-xs)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ve-race .ve-race__hv { font: 600 var(--fs-xl)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ve-race .ve-race__hl.is-c .ve-race__hv { color: var(--highlight-ink); }
.ve-race .ve-race__hsub { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); }
.ve-race .ve-race__headwhy { margin: 0 0 var(--s3); max-width: var(--measure); font-size: var(--fs-m); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ve-race .ve-race__box.is-c .ve-race__v { color: var(--highlight-ink); }
.ve-race .ve-race__legendnote { font-family: var(--font-text); }
/* the explore fold */
.ve-race .ve-race__explore { margin-top: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.ve-race .ve-race__explore > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 2px var(--s3); align-items: baseline; font: 600 var(--fs-s)/1.4 var(--font-text); color: var(--ink); padding-block: var(--s1); }
.ve-race .ve-race__explore > summary em { font: 400 var(--fs-xs)/1.4 var(--font-mono); font-style: normal; color: var(--ink-3); }
.ve-race .ve-race__explore > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ve-race .ve-race__explore[open] > summary { margin-bottom: var(--s3); }
/* phone: the chapter name may wrap to two lines */
.ve-race .ve-race__playrow .ve-player__meta, .ve-race .ve-race__playrow .ve-player__meta * { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 560px) {
  .ve-race .ve-race__headline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ve-race .ve-race__hl.is-c { grid-column: 1 / -1; }
  .ve-race .ve-race__hv { font-size: var(--fs-l); }
  .ve-race .ve-race__headwhy { font-size: var(--fs-s); }
}

/* ==========================================================================
   Plate rules (.is-v2: set by race.js). The plate keeps
   the figure; long labels live in the chapter's reading card (.ve-race__readp).
   Selectors carry .is-v2 so they win over lib/shell.css, which loads later.
   ========================================================================== */
.ve-race .ve-race__reading { display: none; }

/* a one-line key: the prose names the colours, the key only confirms them */
.ve-race.is-v2 .ve-figure__stage > .ve-legend {
  display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 2px 0 0;
  font: 450 0.8125rem/1.3 var(--font-ui); color: var(--ink-3);
}
.ve-race.is-v2 .ve-key { gap: 8px; color: var(--ink-3); }

/* the playhead: a live position line in mono; the player's chapter label names the phase */
.ve-race.is-v2 .ve-race__nowline { min-height: 0; margin: 2px 0 18px; }
.ve-race.is-v2 .ve-race__now { display: inline; font: 450 0.75rem/1.5 var(--font-num); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0; color: var(--ink-3); }
.ve-race.is-v2 .ve-player__meta { font: 450 0.8125rem/1.3 var(--font-ui); color: var(--ink-2); }

/* Explore, opened: sliders, then the result as instruments on hairlines */
.ve-race.is-v2 .ve-slider__hint { font: 400 0.8125rem/1.5 var(--font-ui); color: var(--ink-3); text-wrap: pretty; }
.ve-race.is-v2 .ve-race__result { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.ve-race.is-v2 .ve-race__end { font: 400 1.0625rem/1.6 var(--font-text); font-variant-numeric: oldstyle-nums proportional-nums; color: var(--ink); max-width: 40rem; }
.ve-race.is-v2 .ve-race__end .ve-label { font: 560 0.875rem/1 var(--font-text); font-variant-caps: all-small-caps; letter-spacing: .09em; color: var(--ink-3); margin-right: 10px; }
.ve-race.is-v2 .ve-race__why { margin: 0 0 22px; max-width: 40rem; font: 400 0.9375rem/1.55 var(--font-text); color: var(--ink-2); text-wrap: pretty; }
.ve-race.is-v2 .ve-race__why .ve-label { font: 560 0.875rem/1 var(--font-text); font-variant-caps: all-small-caps; letter-spacing: .09em; color: var(--ink-3); margin-right: 8px; }
.ve-race.is-v2 .ve-race__strip { gap: 0 14px; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); }
.ve-race.is-v2 .ve-race__rowlab {
  font: 560 0.875rem/1 var(--font-text); font-variant-caps: all-small-caps; letter-spacing: .09em; text-transform: none;
  color: var(--ink-3); margin: 18px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.ve-race.is-v2 .ve-race__rowlab:first-child { margin-top: 0; }
.ve-race.is-v2 .ve-race__box { position: relative; background: none; border: 0; border-radius: 0; padding: 12px 0 4px; gap: 4px; }
.ve-race.is-v2 .ve-race__lab { display: flex; align-items: center; gap: 7px; font: 450 0.8125rem/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ve-race.is-v2 .ve-race__lab::before { content: ""; flex: none; width: 10px; height: 2px; background: var(--tone, var(--rule-strong)); }
.ve-race.is-v2 .ve-race__v { font: 300 1.75rem/1.05 var(--font-display); font-variation-settings: "opsz" 60; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; color: var(--ink); }
.ve-race.is-v2 .ve-race__sub { font: 450 0.75rem/1.45 var(--font-ui); color: var(--ink-3); }
.ve-race.is-v2 .ve-race__op { font: 300 1.25rem/1 var(--font-display); color: var(--ink-3); }
.ve-race.is-v2 .ve-race__box.is-c .ve-race__v { color: var(--highlight-ink); }
.ve-race.is-v2 .ve-race__box.is-c::after {
  content: ""; position: absolute; left: -8px; right: -8px; top: 4px; bottom: -4px; pointer-events: none;
  background:
    linear-gradient(var(--highlight), var(--highlight)) left top / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) left top / 1px 8px no-repeat,
    linear-gradient(var(--highlight), var(--highlight)) right top / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) right top / 1px 8px no-repeat,
    linear-gradient(var(--highlight), var(--highlight)) left bottom / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) left bottom / 1px 8px no-repeat,
    linear-gradient(var(--highlight), var(--highlight)) right bottom / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) right bottom / 1px 8px no-repeat;
}
.ve-race.is-v2 .ve-race__btns { margin-top: 18px; }
@media (max-width: 560px) {
  .ve-race.is-v2 .ve-race__strip { gap: 0 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ve-race.is-v2 .ve-race__box { padding: 10px 0 4px; }
  .ve-race.is-v2 .ve-race__v { font-size: 1.5rem; }
  .ve-race.is-v2 .ve-race__box.is-c::after { left: -6px; right: -6px; }
  .ve-race.is-v2 .ve-race__end { font-size: 1rem; }
}
.ve-race.is-v2 .ve-race__sub .ve-race__nw { display: block; }

/* phone polish */
/* a slider with tick labels keeps the same air above its hint as the others */
.ve-race.is-v2 .ve-slider:has(.ve-slider__marklabel) .ve-slider__hint { margin-top: 12px; }
@media (max-width: 560px) {
  /* the mono playhead line starts where the chapter name above it starts */
  .ve-race.is-v2 .ve-race__nowline { padding-left: calc(var(--race-l, 41px) + 52px); }
  /* c on its own row: numeral and its sub-line side by side, so the tile is no taller than the two above */
  .ve-race.is-v2 .ve-race__hl.is-c { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .ve-race.is-v2 .ve-race__hl.is-c .ve-race__hlab { grid-column: 1 / -1; }
}

/* The 'Reading the figure' card scrolls; while text remains below the cut, a sticky veil
   fades the last lines and says "more below" (class set in race.js; same idiom as odds.css) */
.v2-card#race-read.ve-race-card--more::after {
  content: "more below \2193"; position: sticky; bottom: -18px; display: block; height: 58px; margin: -58px -18px -18px;
  padding: 36px 18px 0; box-sizing: border-box; text-align: right; pointer-events: none;
  font: 500 0.75rem/1 var(--font-ui); letter-spacing: .02em; color: var(--ink-3);
  background: linear-gradient(transparent, var(--card) 55%);
}
/* a glossary term that holds a subscript (c_CW) keeps a real line box, so its focus ring is a ring */
#ch-race .v2-caveat .ve-term { display: inline-block; line-height: 1.25; }
#ch-race sub .ve-term, #ch-race sup .ve-term { display: inline-block; line-height: 1.1; }