/*
 * Race Intelligence page. Tokens only: the build scans every built stylesheet
 * against the site palette, and --accent is the one permitted hue. Following
 * the site spec (§5), the accent marks actions only, plus the course trace as
 * the page's one graphic; hover, focus and error states are built from weight
 * and contrast. Labels are sentence case, never all caps. Motion is slow and
 * scroll-driven, CSS only, and absent under reduced motion.
 */

.race-page { max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(100px, 13vh, 136px) var(--gutter) clamp(64px, 10vh, 120px); }
.race-page p { margin: 0; }
.race-page :where(h1, h2, h3, h4) { margin: 0; font-weight: 700; }
.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; }

/* Shared type roles */
.eyebrow, .section-label { color: var(--text-quiet); font-size: 13px; font-weight: 500; }
.section-index { color: var(--text-dim); font-family: var(--font-body), Georgia, serif; font-variant-numeric: tabular-nums; margin-right: 10px; }
.race-section { border-top: 1px solid var(--surface-5); padding-block: clamp(72px, 12vh, 136px); }
.race-section h2, .race-model-panel h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -.035em; margin-top: 16px; max-width: 15ch; text-wrap: balance; }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vh, 64px); }
.section-head__aside { display: grid; gap: 20px; justify-items: start; }
.section-head__aside p { color: var(--text-soft); font-family: var(--font-body), Georgia, serif; font-size: 17px; line-height: 1.65; max-width: 56ch; }
.section-head__aside strong { color: var(--type); font-weight: 600; }
.reader-details { margin-top: 32px; border-top: 1px solid var(--surface-5); padding-top: 18px; color: var(--text-soft); font-family: var(--font-body), Georgia, serif; line-height: 1.65; }
.reader-details > :not(summary) { max-width: 72ch; }
.reader-details summary { cursor: pointer; color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 10px; }
.reader-details summary::-webkit-details-marker { display: none; }
.reader-details summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--surface-6); color: var(--text-muted); font-size: 14px; }
.reader-details[open] summary::before { content: "−"; }
.reader-details p, .reader-details ul { margin: 14px 0 0; }
.reader-details li + li { margin-top: 6px; }

/* ---------- Opening: hero and route ---------- */
.race-opening { display: grid; gap: clamp(48px, 8vh, 88px); padding-bottom: 0; }
#course { border-top: 0; }
.race-opening__hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.race-hero { display: grid; gap: 0; }
.race-hero h1 { font-size: clamp(44px, 6vw, 92px); line-height: .92; letter-spacing: var(--tracking-display); margin: 16px 0 24px; max-width: 13ch; }
.race-hero__lead { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.race-hero__summary { color: var(--text-soft); font-family: var(--font-body), Georgia, serif; font-size: 17px; line-height: 1.65; max-width: 50ch; margin-top: 12px !important; }
.race-facts { display: grid; grid-template-columns: repeat(4, auto) minmax(0, 1fr); gap: 0; margin: 28px 0 0; border-top: 1px solid var(--surface-5); }
.race-facts > div { padding: 14px 24px 0 0; }
.race-facts > div + div { padding-left: 24px; border-left: 1px solid var(--surface-5); }
.race-facts dt { color: var(--text-quiet); font-size: 12px; }
.race-facts dd { margin: 6px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.race-facts dd { white-space: nowrap; }
.eyebrow span + span::before { content: "·"; margin: 0 10px; }
.verification { color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-size: 13px; margin-top: 18px !important; }

.course-map { margin: 0; display: grid; place-items: center; }
.course-map svg { width: 100%; height: auto; max-height: 300px; overflow: visible; }
.course-map-line { fill: none; stroke-width: .7; stroke-linejoin: round; stroke-linecap: round; }
.course-map-line--bike { stroke: var(--accent); }
.course-map-line--swim { stroke: var(--type); stroke-dasharray: 3 3; }
.course-map-line--run { stroke: var(--text-dim); stroke-dasharray: 1 2.5; }

/* ---------- Race Card workspace ---------- */
.race-card-workspace { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); border: 1px solid var(--surface-5); }
.race-card-inputs { padding: clamp(24px, 3.4vw, 48px); min-width: 0; }
.race-card-output { background: var(--surface-1); border-left: 1px solid var(--surface-5); min-width: 0; container: race-output / inline-size; }
.race-card-output__inner { position: sticky; top: 76px; padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.race-opening .race-card-heading { max-width: 54ch; }
.race-opening .race-card-heading h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.03em; margin: 12px 0 12px; }
.race-card-heading > p:last-child { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 15px; line-height: 1.6; }

.race-card-form { display: grid; gap: 28px; margin-top: 36px; }
.race-card-group { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
.race-card-group legend { padding: 0; margin-bottom: 16px; color: var(--text-muted); font-size: 13px; }
.race-card-basics, .race-card-preferences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Unit toggles sit on the "Your numbers" legend row: they change what the
   fields beneath them mean, and stay in sync with the course toggle. */
.race-card-group--numbers { display: flow-root; }
.race-card-group--numbers > legend { float: left; margin: 8px 0 0; }
.race-card-units { float: right; display: flex; gap: 10px; margin-bottom: 16px; }
.race-card-bike-type { grid-column: 1 / -1; }
.race-card-group--numbers > .race-card-basics { clear: both; }
.unit-switch { display: flex; margin: 0; padding: 0; border: 0; min-width: 0; }
.unit-switch label { position: relative; display: block; cursor: pointer; }
.unit-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.unit-switch span { display: grid; place-items: center; height: 32px; min-width: 42px; padding: 0 10px; border: 1px solid var(--surface-6); color: var(--text-muted); font-size: 13px; transition: color .15s ease, background-color .15s ease; }
.unit-switch label + label span { border-left: 0; }
.unit-switch input:hover + span { color: var(--type); }
.unit-switch input:checked + span { background: var(--type); border-color: var(--type); color: var(--ground); }
.unit-switch input:focus-visible + span { outline: 2px solid var(--type); outline-offset: 2px; }
/* Each field spans two rows of its parent grid (label, control) through
   subgrid, so a label that wraps pushes its whole row down together and the
   controls beside it stay level. */
.race-card-form label:not(.unit-switch label) { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; color: var(--type); font-size: 14px; }
.field-label { align-self: end; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.field-label small { color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-size: 12px; }
.race-card-form input:not([type="checkbox"], [type="radio"]), .race-card-form select { width: 100%; height: 52px; border: 1px solid var(--surface-6); border-radius: 0; background: var(--ground); color: var(--type); padding: 0 14px; font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; transition: border-color .15s ease; }
.race-card-form input::placeholder { color: var(--surface-6); }
.race-card-form input:hover, .race-card-form select:hover { border-color: var(--text-quiet); }
.race-card-form input:focus, .race-card-form select:focus { border-color: var(--type); outline: none; }
.race-card-form input:focus-visible, .race-card-form select:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-card-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.race-card-form input[aria-invalid="true"], .race-card-form select[aria-invalid="true"] { border-color: var(--type); box-shadow: inset 0 0 0 1px var(--type); }

/* The optional detail panel reads as a second action, not a footnote: a full
   panel with its own call to action, so it is hard to scroll past. */
.advanced-prediction-inputs { border: 1px solid var(--surface-6); background: var(--surface-1); transition: border-color .15s ease; }
.advanced-prediction-inputs:hover, .advanced-prediction-inputs[open] { border-color: var(--text-quiet); }
.advanced-prediction-inputs summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; cursor: pointer; list-style: none; }
.advanced-prediction-inputs summary::-webkit-details-marker { display: none; }
.advanced-summary__icon { position: relative; width: 36px; height: 36px; border: 1px solid var(--type); }
.advanced-summary__icon::before, .advanced-summary__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--type); translate: -50% -50%; transition: rotate .2s ease; }
.advanced-summary__icon::after { rotate: 90deg; }
.advanced-prediction-inputs[open] .advanced-summary__icon::after { rotate: 0deg; }
.advanced-summary__text { display: grid; gap: 4px; }
.advanced-summary__text strong { color: var(--type); font-size: 16px; font-weight: 700; }
.advanced-summary__text small { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 13px; line-height: 1.45; }
.advanced-summary__cta { color: var(--type); font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--type); padding-bottom: 2px; white-space: nowrap; }
.advanced-summary__close, .advanced-prediction-inputs[open] .advanced-summary__open { display: none; }
.advanced-prediction-inputs[open] .advanced-summary__close { display: inline; }
.advanced-prediction-inputs > p { padding: 0 20px; }
.advanced-prediction-inputs > p { padding: 0 18px; }
.advanced-prediction-inputs > p, .advanced-input-group > p { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 14px; line-height: 1.55; max-width: 62ch; }
.advanced-input-groups { display: grid; margin-top: 18px; border-top: 1px solid var(--surface-5); }
.advanced-input-group { min-width: 0; margin: 0; padding: 22px 18px; border: 0; border-bottom: 1px solid var(--surface-5); display: grid; gap: 12px; }
.advanced-input-group:last-child { border-bottom: 0; }
.advanced-input-group legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; color: var(--type); font-size: 14px; font-weight: 700; }
.advanced-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.advanced-fields--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advanced-fields label { font-size: 13px; }
.advanced-fields input:not([type="checkbox"]), .advanced-fields select { height: 46px !important; font-size: 15px !important; }
.advanced-fields .check-field { display: flex; grid-row: span 2; gap: 10px; align-items: center; align-self: end; min-height: 46px; color: var(--text-soft); }
.advanced-fields .check-field input { width: 18px; height: 18px; accent-color: var(--type); }
.advanced-input-group > small { display: block; color: var(--type); font-size: 13px; font-weight: 700; }
.advanced-input-group > small:empty { display: none; }
.advanced-feedback { color: var(--type) !important; font-size: 13px !important; }
.advanced-feedback::before { content: "↳"; margin-right: 8px; color: var(--text-quiet); }

.race-card-submit { height: 58px; border: 0; border-radius: 0; background: var(--type); color: var(--ground); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; transition: background-color .15s ease; }
.race-card-submit:hover { background: var(--text-dim); }
.race-card-errors { color: var(--type); font-weight: 700; font-size: 14px; min-height: 1.5em; margin-top: -12px !important; }

/* Result */
.race-card-result { display: grid; gap: 0; scroll-margin-top: 80px; }
.prediction-placeholder { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 15px; line-height: 1.55; margin-top: 10px !important; }
.prediction-result { display: grid; gap: 0; }
.prediction-range-plot { margin: 12px 0 0; }
.range-band--total { padding-bottom: 22px; }
.range-band--total .range-band__value { display: block; font-size: clamp(30px, 10.5cqi, 52px); line-height: 1; letter-spacing: -.035em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prediction-range-plot--empty .range-band--total { display: none; }
.prediction-range-plot--empty { margin-top: 28px; }
.range-bands__head, .range-bands .range-band { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.range-bands__head { padding-bottom: 10px; border-bottom: 1px solid var(--surface-6); color: var(--text-quiet); font-size: 12px; }
.range-bands__head span:last-child { text-align: right; }
.range-bands { list-style: none; margin: 0; padding: 0; }
.range-bands .range-band { padding: 15px 0; border-bottom: 1px solid var(--surface-5); }
.range-bands .range-band__label { color: var(--text-muted); font-size: 14px; }
.range-bands .range-band__value { color: var(--type); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-band__effort { color: var(--type); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.range-band--transitions .range-band__label, .range-band--transitions .range-band__value { color: var(--text-muted); font-size: 14px; }
.prediction-range-plot--empty .range-bands .range-band__value, .prediction-range-plot--empty .range-band__effort { color: var(--surface-6); font-weight: 500; }
.prediction-result__context { color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-size: 13px; line-height: 1.55; margin-top: 16px !important; }

.next-input { margin-top: 24px; padding: 14px 16px; border-left: 2px solid var(--type); background: var(--surface-3); display: grid; gap: 4px; }
.next-input > span { color: var(--text-muted); font-size: 12px; }
.next-input strong { font-size: 15px; }
.next-input p { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 13px; line-height: 1.5; }
.next-input__action { justify-self: start; margin-top: 8px; border: 0; border-bottom: 1px solid var(--type); background: none; color: var(--type); padding: 0 0 2px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.next-input__action i { display: inline-block; font-style: normal; transition: translate .15s ease; }
.next-input__action:hover i { translate: 3px 0; }

.prediction-explanation, .prediction-assumptions { margin-top: 16px; border-top: 1px solid var(--surface-5); padding-top: 14px; color: var(--text-soft); font-family: var(--font-body), Georgia, serif; font-size: 14px; line-height: 1.55; }
.prediction-explanation + .prediction-assumptions { margin-top: 0; }
.prediction-explanation summary, .prediction-assumptions summary { cursor: pointer; color: var(--text-dim); font-family: var(--font-display), system-ui, sans-serif; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.prediction-explanation summary::-webkit-details-marker, .prediction-assumptions summary::-webkit-details-marker { display: none; }
.prediction-explanation summary::after, .prediction-assumptions summary::after { content: "+"; color: var(--text-quiet); }
.prediction-explanation[open] summary::after, .prediction-assumptions[open] summary::after { content: "−"; }
.prediction-explanation ul, .prediction-assumptions ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 14px; }
.prediction-explanation li { display: grid; gap: 3px; }
.prediction-explanation li > span { color: var(--text-quiet); font-family: var(--font-display), system-ui, sans-serif; font-size: 12px; text-transform: capitalize; }
.prediction-explanation li > strong { color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-size: 15px; }
.prediction-explanation li small { color: var(--text-quiet); font-size: 12px; }
.prediction-assumptions li { padding-left: 14px; position: relative; }
.prediction-assumptions li::before { content: "·"; position: absolute; left: 0; color: var(--text-quiet); }

.race-card-offer { border-top: 1px solid var(--surface-6); padding-top: 24px; display: grid; gap: 14px; }
.race-card-offer__title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.race-card-offer__links { display: grid; gap: 10px; }
.race-card-offer__link { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--surface-6); background: var(--ground); text-decoration: none; transition: border-color .15s ease; }
.race-card-offer__link > span { grid-column: 1; color: var(--text-quiet); font-size: 12px; }
.race-card-offer__link > strong { grid-column: 1; font-size: 16px; line-height: 1.3; }
.race-card-offer__link > small { grid-column: 2; grid-row: 1 / span 2; color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.race-card-offer__link i { display: inline-block; font-style: normal; transition: translate .15s ease; }
.race-card-offer__link:hover { border-color: var(--type); }
.race-card-offer__link:hover i { translate: 3px 0; }
.race-card-offer__link--coaching { border-color: var(--accent); }
.race-card-result:not([data-has-prediction]) ~ .race-card-offer,
.race-card-result:not([data-has-prediction]) ~ .print-button { display: none; }
.print-button { justify-self: start; border: 0; border-bottom: 1px solid var(--surface-6); background: none; color: var(--text-muted); padding: 4px 0; font: inherit; font-size: 13px; cursor: pointer; }
.print-button:hover { color: var(--type); border-bottom-color: var(--type); }

/* The result column's width depends on the page, not the viewport, so the
   leg table and offer links adapt to the column itself. Below this width the
   target moves under the time instead of spilling out of the panel. */
@container race-output (max-width: 480px) {
  .range-bands__head { display: none; }
  .range-bands { border-top: 1px solid var(--surface-6); }
  .range-bands .range-band { grid-template-columns: 5.5rem minmax(0, 1fr); row-gap: 4px; }
  .range-band__effort { grid-column: 2; text-align: left; font-size: 15px; }
  .range-band__effort .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: var(--text-quiet); font-weight: 500; }
  .race-card-offer__link { grid-template-columns: 1fr; }
  .race-card-offer__link > small { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* ---------- Continue band ----------
   The Race Card fills the first screens, so this says plainly that the page
   carries on, and where to. */
.race-continue { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 40px; margin-top: calc(-1 * clamp(24px, 4vh, 48px)); padding: 22px 0; border-top: 1px solid var(--surface-5); border-bottom: 1px solid var(--surface-5); }
.race-continue__cue { display: inline-flex; align-items: center; gap: 12px; color: var(--type); font-size: 15px; font-weight: 700; text-decoration: none; }
.race-continue__cue i { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--type); font-style: normal; }
.race-continue ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; }
.race-continue ol a { color: var(--text-muted); font-size: 14px; text-decoration: none; transition: color .15s ease; }
.race-continue ol a span { margin-right: 8px; color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-variant-numeric: tabular-nums; }
.race-continue ol a:hover, .race-continue__cue:hover { color: var(--type); }

/* ---------- The course ---------- */
.unit-toggle { display: inline-flex; align-items: center; gap: 12px; color: var(--text-quiet); font-size: 13px; }
.unit-toggle > span { font-family: var(--font-body), Georgia, serif; }
.unit-toggle button { border: 1px solid var(--surface-6); background: none; color: var(--text-muted); height: 32px; min-width: 44px; padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer; }
.unit-toggle button + button { margin-left: -13px; border-left: 0; }
.unit-toggle button[aria-pressed="true"] { background: var(--type); border-color: var(--type); color: var(--ground); }
.course-visual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--surface-5); border: 1px solid var(--surface-5); }
.course-visual-card { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: clamp(24px, 2.8vw, 40px); background: var(--ground); }
.course-visual-card__leg { color: var(--text-muted); font-size: 13px; }
.course-visual-card__distance { font-size: clamp(44px, 4.8vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 14px !important; }
.course-visual-card h3 { font-size: 19px; line-height: 1.25; margin-top: 12px; }
.course-specs { margin: 22px 0 0; border-top: 1px solid var(--surface-5); }
.course-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--surface-5); font-size: 14px; }
.course-specs dt { color: var(--text-quiet); }
.course-specs dd { margin: 0; color: var(--text-soft); text-align: right; }
.elevation-fact dd small { display: block; color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-size: 11px; margin-top: 2px; }
.course-visual-card__note { color: var(--text-soft); font-family: var(--font-body), Georgia, serif; font-size: 15px; line-height: 1.62; margin-top: 20px !important; }
.evidence-label { margin-top: auto; padding-top: 22px; color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-size: 12px; }
.evidence-label a { color: inherit; text-underline-offset: 3px; }
.evidence-label a:hover { color: var(--type); }

/* ---------- Race plan ---------- */
.decision-chapters { display: grid; border-top: 1px solid var(--surface-5); }
.decision-chapter { display: grid; gap: clamp(24px, 3.4vh, 36px); padding-block: clamp(40px, 6vh, 64px); border-bottom: 1px solid var(--surface-5); }
.decision-chapter:last-child { border-bottom: 0; padding-bottom: 0; }
.decision-chapter__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.decision-label { color: var(--text-quiet); font-size: 13px; min-width: 3.5rem; }
.decision-chapter h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.12; letter-spacing: -.02em; }
.decision-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.decision-phase { display: flex; flex-direction: column; min-width: 0; }
.decision-phase:only-child { grid-column: span 2; }
.decision-meta__range { color: var(--type); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.decision-meta__label { color: var(--text-quiet); font-size: 13px; margin-bottom: 4px !important; }
.decision-track { position: relative; display: block; height: 3px; margin: 10px 0 18px; background: var(--surface-4); }
.decision-track i { position: absolute; top: 0; bottom: 0; left: var(--start); width: var(--span); background: var(--text-dim); }
.decision-phase h4 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.decision-phase > p:not([class]) { color: var(--text-soft); font-family: var(--font-body), Georgia, serif; font-size: 15px; line-height: 1.62; margin-top: 10px !important; }
.coach-cues { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.coach-cues li { border: 1px solid var(--surface-6); padding: 5px 10px; color: var(--text-dim); font-size: 12px; line-height: 1.3; }
.decision-phase > .warning { display: flex; gap: 10px; align-items: baseline; color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-size: 14px; margin-top: 14px !important; }
.decision-phase > .warning::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--type); translate: 0 -4px; }

/* ---------- Reading rail ----------
   The article template's device, carried onto this page: the mark lights one
   chevron per third of the scroll, and each numeral brightens while its
   section is on screen. Wide screens only; it lives in the left gutter. */
.race-rail { display: none; }
@media (min-width: 1280px) {
  .race-rail { position: fixed; z-index: 30; left: clamp(20px, 2.2vw, 40px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 16px; }
  .race-rail__mark { width: 22px; height: auto; color: var(--type); }
  .race-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .race-rail a { position: relative; display: flex; align-items: center; gap: 12px; padding-left: 9px; border-left: 1px solid var(--surface-3); color: var(--surface-6); font-family: var(--font-body), Georgia, serif; font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
  .race-rail em { position: absolute; left: calc(100% + 10px); padding: 3px 8px; background: var(--ground); color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-style: normal; font-size: 12px; white-space: nowrap; opacity: 0; translate: -4px 0; pointer-events: none; transition: opacity .2s ease, translate .2s ease; }
  .race-rail a:hover, .race-rail a:focus-visible { color: var(--type); border-left-color: var(--type); }
  .race-rail a:hover em, .race-rail a:focus-visible em { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: scroll()) {
  @media (min-width: 1280px) {
    .race-rail__mark polygon { color: var(--grey); animation: rail-light linear both; animation-timeline: scroll(root block); }
    .race-rail__mark polygon:nth-of-type(1) { animation-range: 0% 33%; }
    .race-rail__mark polygon:nth-of-type(2) { animation-range: 33% 66%; }
    .race-rail__mark polygon:nth-of-type(3) { animation-range: 66% 100%; }
    @keyframes rail-light { from { color: var(--grey); } to { color: var(--type); } }

    .race-page { timeline-scope: --rail-race-card, --rail-course, --rail-plan, --rail-race-week, --rail-method, --rail-next-steps; }
    #race-card { view-timeline: --rail-race-card block; }
    #course { view-timeline: --rail-course block; }
    #plan { view-timeline: --rail-plan block; }
    #race-week { view-timeline: --rail-race-week block; }
    #method { view-timeline: --rail-method block; }
    #next-steps { view-timeline: --rail-next-steps block; }
    .race-rail a { animation: rail-current linear both; animation-range: cover 0% cover 100%; }
    .race-rail a[data-rail="race-card"] { animation-timeline: --rail-race-card; }
    .race-rail a[data-rail="course"] { animation-timeline: --rail-course; }
    .race-rail a[data-rail="plan"] { animation-timeline: --rail-plan; }
    .race-rail a[data-rail="race-week"] { animation-timeline: --rail-race-week; }
    .race-rail a[data-rail="method"] { animation-timeline: --rail-method; }
    .race-rail a[data-rail="next-steps"] { animation-timeline: --rail-next-steps; }
    @keyframes rail-current {
      0%, 100% { color: var(--surface-6); border-left-color: var(--surface-3); }
      25%, 75% { color: var(--type); border-left-color: var(--type); }
    }
  }
}

/* ---------- Pull-quote ----------
   The homepage register: one real published sentence, linked to its source,
   given a screen of its own between the plan and the race week. */
.race-quote { display: grid; align-items: center; min-height: 72vh; padding-block: clamp(72px, 14vh, 160px); border-top: 1px solid var(--surface-5); }
.race-quote .pq.long { max-width: none; }
.race-quote .pq.long p { font-size: clamp(30px, 4.2vw, 60px); max-width: 24ch; }

/* ---------- Race week ---------- */
.weather-briefing { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 12fr); gap: 1px; background: var(--surface-5); border: 1px solid var(--surface-5); }
.weather-status-line { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.8vw, 36px); background: var(--surface-1); }
.status-kicker { color: var(--text-quiet); font-size: 12px; }
.weather-status-line strong { font-size: 22px; letter-spacing: -.015em; }
.weather-status-line p { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 15px; line-height: 1.6; }
.conditions { display: grid; background: var(--ground); }
.conditions-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.conditions-strip > div { display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(24px, 2.8vw, 36px); }
.conditions-strip > div + div { border-left: 1px solid var(--surface-5); }
.conditions-strip dt { color: var(--text-quiet); font-size: 12px; }
.conditions-strip dd { margin: 0; display: grid; gap: 6px; }
.conditions-strip strong { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conditions-strip small { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 13px; }
.conditions-provenance { border-top: 1px solid var(--surface-5); padding: 16px clamp(24px, 2.8vw, 36px); color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-size: 13px; line-height: 1.6; }
.conditions-provenance strong { display: block; color: var(--text-soft); font-weight: 400; margin-top: 2px; }

/* ---------- Method ---------- */
.race-method { padding-bottom: clamp(56px, 9vh, 104px); }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; counter-reset: model; background: var(--surface-5); border: 1px solid var(--surface-5); }
.model-grid li { counter-increment: model; display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); background: var(--ground); position: relative; }
.model-grid li::before { content: "0" counter(model); color: var(--text-quiet); font-size: 12px; font-variant-numeric: tabular-nums; }
.model-grid strong { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.model-grid span { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.model-grid li:last-child { background: var(--surface-1); }
.confidence-preview { margin-top: clamp(40px, 6vh, 56px); }
.confidence-preview__title { color: var(--text-muted); font-size: 13px; margin-bottom: 18px !important; }
.confidence-preview dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; }
.confidence-preview dl > div { border-top: 1px solid var(--surface-6); padding-top: 14px; display: grid; gap: 6px; }
.confidence-preview dt { font-size: 15px; font-weight: 700; }
.confidence-preview dd { margin: 0; color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 14px; line-height: 1.5; }

/* ---------- Next steps ---------- */
.next-steps-preparation__label, .next-steps-reading > .section-label { margin-bottom: 18px !important; }
.next-step-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.next-step-action { display: flex; flex-direction: column; gap: 12px; min-height: 280px; padding: clamp(24px, 3vw, 44px); border: 1px solid var(--surface-6); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.next-step-action > span { color: var(--text-muted); font-size: 13px; }
.next-step-action > strong { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.025em; max-width: 16ch; }
.next-step-action > small { color: var(--text-soft); font-family: var(--font-body), Georgia, serif; font-size: 16px; line-height: 1.6; max-width: 40ch; }
.next-step-action > em { margin-top: auto; padding-top: 20px; font-style: normal; font-size: 15px; font-weight: 700; }
.next-step-action > em i { display: inline-block; font-style: normal; transition: translate .15s ease; }
.next-step-action:hover { border-color: var(--type); }
.next-step-action:hover > em i { translate: 4px 0; }
.next-step-action--coaching { background: var(--surface-1); border-color: var(--accent); }
.next-step-action--coaching:hover { border-color: var(--accent); background: var(--surface-3); }
.next-steps-reading { margin-top: clamp(48px, 7vh, 72px); }
.next-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--surface-5); }
.next-step { position: relative; display: grid; gap: 6px; padding: 20px 40px 22px 0; border-bottom: 1px solid var(--surface-5); text-decoration: none; }
.next-step > span { color: var(--text-quiet); font-size: 12px; }
.next-step > strong { font-size: 18px; line-height: 1.3; }
.next-step > small { color: var(--text-muted); font-family: var(--font-body), Georgia, serif; font-size: 14px; line-height: 1.5; }
.next-step > i { position: absolute; right: 4px; top: 22px; color: var(--text-quiet); font-style: normal; transition: translate .15s ease, color .15s ease; }
.next-step:hover > strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.next-step:hover > i { color: var(--type); translate: 2px -2px; }

/* ---------- Sources ---------- */
.race-sources h2 { font-size: clamp(24px, 2.4vw, 32px); }
.sources { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--surface-5); }
.sources li { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--surface-5); font-size: 15px; }
.sources a { color: var(--type); text-underline-offset: 4px; text-decoration-color: var(--surface-6); }
.sources a:hover { text-decoration-color: var(--type); }
.sources span { color: var(--text-quiet); font-family: var(--font-body), Georgia, serif; font-size: 13px; }

/* ---------- Motion ----------
   Slow change, not no change (spec §6). The trace draws itself once; content
   settles into place as it reaches the viewport, and each phase's track fills
   as it is read. Nothing moves under reduced motion or without timelines. */
@media (prefers-reduced-motion: no-preference) {
  .race-continue__cue i { animation: nudge 2.4s ease-in-out 3.5s infinite; }
  @keyframes nudge { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 4px; } 90% { translate: 0 0; } }
  .course-map-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace-draw 2.8s cubic-bezier(.65, 0, .35, 1) .35s forwards; }
  @keyframes trace-draw { to { stroke-dashoffset: 0; } }
  .race-hero > * { animation: hero-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .race-hero > :nth-child(2) { animation-delay: .06s; }
  .race-hero > :nth-child(3) { animation-delay: .14s; }
  .race-hero > :nth-child(n+4) { animation-delay: .22s; }
  @keyframes hero-in { from { opacity: 0; translate: 0 14px; } }

  @supports (animation-timeline: view()) {
    .section-head, .course-visual-grid, .decision-chapter, .weather-briefing, .model-grid, .confidence-preview, .next-step-actions, .next-steps-reading, .sources {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    @keyframes settle { from { opacity: 0; translate: 0 32px; } }
    .decision-track i { transform-origin: left center; animation: track-fill linear both; animation-timeline: view(); animation-range: entry 80% cover 42%; }
    @keyframes track-fill { from { scale: 0 1; } }
    .race-quote .pq p { animation: quote-in linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    @keyframes quote-in { from { opacity: .12; } }
  }
}

/* ---------- Print: the generated Race Card only ---------- */
@media print {
  body > *:not(main), .race-page > :not(.race-opening), .race-rail, .race-opening > :not(.race-card-builder), .race-card-inputs, .race-card-offer, .print-button, .prediction-explanation, .prediction-assumptions { display: none !important; }
  .race-page, .race-opening, .race-card-builder, .race-card-workspace, .race-card-output, .race-card-output__inner { display: block; position: static; border: 0; padding: 0; background: none; }
  .race-card-result, .race-card-result * { color: #000 !important; background: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .decision-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-phase:only-child { grid-column: span 2; }
  .confidence-preview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-briefing { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .race-opening .race-card-builder { padding-top: 0; }
  .race-card-workspace { grid-template-columns: 1fr; }
  .race-card-output { border-left: 0; border-top: 1px solid var(--surface-5); }
  .race-card-output__inner { position: static; }
}
@media (max-width: 760px) {
  .race-opening__hero { grid-template-columns: 1fr; align-items: start; }
  .race-opening__route { order: -1; justify-self: start; width: min(200px, 55%); }
  .race-opening__route .course-map svg { max-height: 120px; }
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .race-facts { grid-template-columns: repeat(3, auto) minmax(0, 1fr); }
  .race-facts > div:first-child { grid-column: 1 / -1; padding: 14px 0; border-bottom: 1px solid var(--surface-5); }
  .race-facts > div { padding: 14px 16px 0 0; }
  .race-facts > div + div { padding-left: 16px; }
  .race-facts > div:nth-child(2) { padding-left: 0; border-left: 0; }
  .course-visual-grid, .model-grid, .next-step-actions, .next-step-grid { grid-template-columns: 1fr; }
  .conditions-strip { grid-template-columns: 1fr; }
  .conditions-strip > div + div { border-left: 0; border-top: 1px solid var(--surface-5); }
  .decision-chapter__head { flex-direction: column; gap: 8px; }
  .decision-phases { grid-template-columns: 1fr; gap: 32px; }
  .decision-phase:only-child { grid-column: auto; }
  .next-step-action { min-height: 0; }
  .race-quote { min-height: 0; }
  .race-continue { grid-template-columns: 1fr; }
  .race-continue ol { justify-content: flex-start; }
  .advanced-prediction-inputs summary { grid-template-columns: auto minmax(0, 1fr); }
  .advanced-summary__cta { grid-column: 2; justify-self: start; }
}
@media (max-width: 520px) {
  .race-card-inputs, .race-card-output__inner { padding: 22px 18px; }
  .race-card-basics, .race-card-preferences { gap: 14px 12px; }
  .advanced-fields, .advanced-fields--three { grid-template-columns: 1fr; }
  .confidence-preview dl { grid-template-columns: 1fr; }
}