/* GENERATED by preview-replay-k9x2/build-core.js from ../live.html (2026-10-12 05:12 UTC). */

  :root {
    color-scheme: light;
    --cream: #FAFAF6;
    --cream-soft: #F4F2EC;
    --cream-deep: #ECE9DF;
    --ink: #1c1c1a;
    --ink-soft: #5F5E5A;
    --ink-mid: #888780;
    --olive: #556B2F;
    --olive-soft: #6B7B3A;
    --olive-fade: rgba(85,107,47,0.08);
    --olive-fade-strong: rgba(85,107,47,0.16);
    --olive-strong: rgba(85,107,47,0.32);
    --mustard: #D4A017;
    --mustard-fade: rgba(212,160,23,0.10);
    --best-bg: #C0DD97;
    --best-text: #27500A;
    --behind: #D85A30;
    --live: #185FA5;
    --live-fade: rgba(24,95,165,0.08);
    --live-fade-strong: rgba(24,95,165,0.14);
    --live-soft: rgba(24,95,165,0.45);
    --border: rgba(0,0,0,0.08);
    --border-strong: rgba(0,0,0,0.18);
    --serif: 'Playfair Display', 'Didot', 'Bodoni 72', serif;
    --mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--cream);
    color: var(--ink);
    font: 14px/1.55 var(--sans);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 16px 16px;
    overflow-x: clip;
  }

  .window-bar {
    background: var(--cream);
    border-bottom: 0.5px solid var(--border);
    padding: 10px 18px;
    font: 500 12px/1 var(--mono);
    color: var(--ink-soft);
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 10;
    letter-spacing: 0.02em;
  }
  .window-bar .crumb { color: var(--ink-mid); }
  .window-bar .crumb-sep { color: var(--ink-mid); margin: 0 4px; }
  .window-bar .crumb-active { color: var(--olive); }

  /* Outer wrapper matches the other Gravity Lab pages: centred grid with
     the left nav rail in the first column and the main content beside it. */
  .layout {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--cream);
    border-left: 0.5px solid var(--border);
    border-right: 0.5px solid var(--border);
    min-height: calc(100vh - 40px);
  }
  .layout-inner {
    padding: 36px 40px 60px;
    min-width: 0;
  }

  /* Left nav rail, inside the centred grid container so it lines up with
     the rest of the site rather than sitting at the viewport edge. */
  .left-nav {
    border-right: 0.5px solid var(--border);
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 0 20px;
    gap: 56px;
  }
  .nav-item {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 500 11px/1 var(--mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.18em;
    color: var(--ink-mid, #888780);
    text-decoration: none;
    text-transform: uppercase;
    padding: 4px 0;
    position: relative;
    transition: color 0.12s;
  }
  .nav-item:hover { color: var(--ink, #1c1c1a); }
  .nav-item.active { color: var(--olive, #556B2F); }
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: -8px; top: 0; bottom: 0;
    width: 3px;
    background: var(--olive, #556B2F);
    border-radius: 1.5px;
  }
  @media (max-width: 800px) {
    .left-nav { display: none; }
  }

  .ref-header {
    font: 500 11px/1 var(--mono);
    color: var(--olive);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
  }
  h1.session-title {
    font: 600 32px/1.1 var(--serif);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  /* ---- Live controls: sound toggle + starred riders ---------------- */
  .live-controls {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 14px;
  }
  .live-controls .ctl-btn {
    font: 500 12px/1 var(--sans); letter-spacing: .02em;
    padding: 7px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--cream);
    color: var(--ink-soft);
  }
  .live-controls .ctl-btn.is-on {
    background: var(--olive); border-color: var(--olive); color: #fff;
  }
  .live-controls .ctl-hint { font: 12px/1.3 var(--sans); color: var(--ink-mid); }
  .star-strip {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin: 0 0 14px;
  }
  .star-strip:empty { display: none; }
  .star-chip {
    display: inline-flex; align-items: baseline; gap: 6px;
    font: 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px;
    background: var(--mustard-fade); border: 1px solid rgba(212,160,23,0.35);
    color: var(--ink);
  }
  .star-chip .sc-name { font-weight: 600; }
  .star-chip .sc-state { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
  .star-chip.live { background: var(--live-fade-strong); border-color: var(--live-soft); }
  .star-chip.live .sc-state { color: var(--live); }
  .star-chip .sc-state.ahead { color: var(--best-text); }
  .star-chip .sc-state.behind { color: var(--behind); }
  .star-btn {
    appearance: none; background: none; border: 0; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0 6px 0 0; color: var(--border-strong);
    vertical-align: -1px;
  }
  .star-btn:hover { color: var(--mustard); }
  .star-btn[aria-pressed="true"] { color: var(--mustard); }
  .row.starred { box-shadow: inset 3px 0 0 var(--mustard); }
  @media (max-width: 680px) {
    .star-btn { font-size: 17px; padding: 0 8px 0 0; }
  }

  .session-sub {
    font: 500 12px/1.4 var(--mono);
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 26px;
  }
  .live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 2px;
    background: #c4452b;
    color: white;
    font: 600 10px/1 var(--mono);
    letter-spacing: 0.14em;
  }
  .live-badge::before {
    content: '';
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse-live 1.6s ease-in-out infinite;
  }
  @keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
  }
  .mock-note {
    font: 500 10px/1 var(--mono);
    color: var(--ink-mid);
    letter-spacing: 0.04em;
  }

  /* ===== LEADERBOARD WITH SECTOR SPLITS ============================ */
  /* Grid: pos, rider+meta, S1, S2, S3, S4, S5, finish, gap */
  .lb-grid-tpl {
    grid-template-columns: 32px minmax(180px, 1fr) repeat(5, 56px) 70px 60px;
  }
  .leaderboard {
    background: var(--cream);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 28px;
  }
  .leaderboard-head {
    display: grid;
    gap: 6px;
    padding: 10px 14px;
    font: 500 10px/1.3 var(--mono);
    color: var(--ink-mid);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-bottom: 0.5px solid var(--border);
  }
  .leaderboard-head .col-sec,
  .leaderboard-head .col-time,
  .leaderboard-head .col-gap { text-align: center; }
  .leaderboard-head .col-sec.column-active {
    color: var(--olive);
    font-weight: 600;
  }
  .row {
    display: grid;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--border);
    align-items: center;
    transition: background 0.18s ease, border-left-color 0.18s ease;
    border-left: 3px solid transparent;
    position: relative;
  }
  .row:last-child { border-bottom: none; }
  .row .pos {
    font: 500 13px/1 var(--mono);
    color: var(--ink-soft);
  }
  .row .name {
    font: 500 14px/1.25 var(--sans);
    color: var(--ink);
  }
  .row .meta {
    font: 400 11px/1.3 var(--mono);
    color: var(--ink-mid);
    margin-top: 2px;
    letter-spacing: 0.02em;
  }
  .row .sec {
    font: 500 12px/1 var(--mono);
    color: var(--ink-soft);
    text-align: center;
    padding: 4px 0;
    border-radius: 2px;
    /* Heatmap tint, set per cell as --heat inline; a class rule (best,
       column-active) is more specific and still wins over this. */
    background: var(--heat, transparent);
    transition: background 0.18s ease, color 0.18s ease;
  }
  .row .sec.best {
    background: var(--best-bg);
    color: var(--best-text);
    font-weight: 600;
  }
  .row .sec.column-active {
    background: var(--olive-fade-strong);
  }
  .row .sec.best.column-active {
    background: var(--best-bg);
    box-shadow: inset 0 0 0 2px var(--olive);
  }
  .row .sec.dns { color: var(--ink-mid); opacity: 0.4; }
  .row .time {
    font: 500 12px/1 var(--mono);
    color: var(--ink-soft);
    text-align: center;
  }
  .row .gap {
    font: 500 12px/1 var(--mono);
    color: var(--ink-soft);
    text-align: center;
  }
  .row.dns { opacity: 0.5; }
  .row.dns .gap { color: var(--ink-mid); }

  .row.active {
    background: var(--olive-fade);
    border-left-color: var(--olive);
  }
  .row.active .pos { color: var(--olive); }
  .row.active .name { color: var(--ink); font-weight: 600; }

  /* Live treatment — for riders who are still mid-run at the current moment.
     Mirrors the v5/v6/v7 prototype: blue inset bar, blue tint, italic blue
     position / time / gap, pulsing dot beside the position number. */
  .row.live {
    border-left-color: var(--live);
    background: var(--live-fade);
  }
  .row.live .pos {
    color: var(--live);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .row.live .pos::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--live);
    animation: pulse-live 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  .row.live .time,
  .row.live .gap {
    color: var(--live);
    font-style: italic;
  }
  .row.live .meta .live-status {
    color: var(--live);
    font-weight: 500;
  }
  .row.live.active {
    background: var(--live-fade-strong);
    border-left-color: var(--live);
  }
  .row.live.active .name { color: var(--ink); font-weight: 600; }
  .row.live .sec.dns { opacity: 0.35; }
  /* Sector cells carry no live treatment: a fastest sector reads plain
     green whether the rider is finished or still on track. The row-level
     blue (bar, dot, italic pos/time) already says "mid-run". */
  /* Small uppercase pill next to the rider name on live rows. */
  .live-pill {
    display: inline-block;
    background: var(--live);
    color: #fff;
    font: 600 9px/1 var(--mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    margin-right: 6px;
    vertical-align: middle;
  }
  /* Small country flag tucked into the rider meta row. */
  .rider-flag {
    width: 18px;
    height: 13px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    border-radius: 1px;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1);
    object-fit: cover;
  }

  /* To-come — rider has not started their run yet at the current frame.
     Sits at the bottom of the leaderboard, dim. */
  .row.to-come { opacity: 0.45; }
  .row.to-come .pos { color: var(--ink-mid); }

  /* Row reorder transitions. transform is set inline by the FLIP step. */
  .row { will-change: transform; }

  /* Cut-line divider between cut and the rest */
  .cut-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--cream-soft);
    border-top: 1px solid var(--mustard);
    border-bottom: 1px solid var(--mustard);
    font: 500 9px/1 var(--mono);
    color: var(--mustard);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .cut-divider::before,
  .cut-divider::after {
    content: '';
    flex: 1; height: 1px;
    background: var(--mustard);
    opacity: 0.4;
  }

  /* ===== TOP ROW: COMMENTARY + TLDR ================================ */
  .top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 28px;
  }

  /* TLDR — the session-so-far digest */
  .tldr-card {
    background: var(--cream);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    padding: 22px;
    display: flex; flex-direction: column;
  }
  .tldr-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--border);
  }
  .tldr-title {
    font: 500 11px/1 var(--mono);
    color: var(--olive);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .tldr-stamp {
    font: 500 10px/1 var(--mono);
    color: var(--ink-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .tldr-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 14px;
  }
  .tldr-item {
    display: grid;
    grid-template-columns: 6px 1fr;
    gap: 12px;
    align-items: flex-start;
  }
  .tldr-item::before {
    content: '';
    margin-top: 5px;
    width: 6px; height: 6px;
    background: var(--olive);
    border-radius: 50%;
  }
  .tldr-headline {
    font: 600 14px/1.3 var(--sans);
    color: var(--ink);
    margin: 0 0 2px;
  }
  .tldr-detail {
    font: 400 12px/1.4 var(--sans);
    color: var(--ink-soft);
    margin: 0;
  }

  /* ===== CHART (full width below leaderboard) ====================== */
  .chart-row {
    margin-top: 4px;
  }

  /* Gap chart */
  .chart-card {
    background: var(--cream);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    padding: 18px 18px 14px;
  }
  .chart-card h2 {
    font: 600 16px/1.2 var(--serif);
    margin: 0 0 4px;
    letter-spacing: -0.005em;
  }
  .chart-card .chart-sub {
    font: 500 10px/1 var(--mono);
    color: var(--ink-mid);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 12px;
  }
  .chart-svg {
    display: block;
    width: 100%;
    height: 240px;
  }
  .chart-svg .axis-line {
    stroke: var(--border);
    stroke-width: 0.5;
  }
  .chart-svg .gridline {
    stroke: var(--border);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
  }
  .chart-svg .axis-label {
    font: 500 10px/1 var(--mono);
    fill: var(--ink-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .chart-svg .y-tick-label {
    font: 400 10px/1 var(--mono);
    fill: var(--ink-mid);
  }
  .chart-svg .rider-line {
    fill: none;
    stroke: var(--ink-mid);
    stroke-width: 1;
    opacity: 0.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.18s, stroke 0.18s, stroke-width 0.18s;
  }
  .chart-svg .rider-line.live {
    stroke: var(--live);
    opacity: 0.85;
    stroke-width: 1.5;
  }
  .chart-svg .rider-line.hidden { opacity: 0; }
  .chart-svg .rider-dot.hidden { opacity: 0; }
  .chart-svg .rider-dot.live-end {
    fill: var(--live);
    opacity: 1;
    animation: pulse-live 1.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .chart-svg .rider-line.in-cut {
    stroke: var(--olive);
    opacity: 0.55;
    stroke-width: 1.5;
  }
  .chart-svg .rider-line.active {
    stroke: var(--olive);
    opacity: 1;
    stroke-width: 2.5;
  }
  .chart-svg .rider-dot {
    fill: var(--ink-mid);
    opacity: 0.4;
    transition: fill 0.18s, opacity 0.18s, r 0.18s;
  }
  .chart-svg .rider-dot.in-cut {
    fill: var(--olive);
    opacity: 0.7;
  }
  .chart-svg .rider-dot.active {
    fill: var(--olive);
    opacity: 1;
  }
  .chart-svg .rider-label {
    font: 500 10px/1 var(--mono);
    fill: var(--ink-soft);
    opacity: 0;
    transition: opacity 0.18s;
  }
  .chart-svg .rider-label.active {
    opacity: 1;
    fill: var(--olive);
    font-weight: 600;
  }
  .chart-svg .active-sector-band {
    fill: var(--olive-fade-strong);
    opacity: 0;
    transition: opacity 0.18s, x 0.3s ease;
  }
  .chart-svg .active-sector-band.visible { opacity: 1; }

  /* Live commentary panel */
  .panel {
    background: var(--cream-soft);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    padding: 22px;
    display: flex; flex-direction: column;
    height: 100%;
  }
  .panel-label {
    font: 500 10px/1 var(--mono);
    color: var(--olive);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
  }
  .live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ink-mid);
    transition: background 0.18s, box-shadow 0.18s;
  }
  .live-dot.playing {
    background: #c4452b;
    box-shadow: 0 0 0 4px rgba(196,69,43,0.18);
    animation: pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% {
      box-shadow: 0 0 0 4px rgba(196,69,43,0.20);
      opacity: 1;
    }
    50% {
      box-shadow: 0 0 0 8px rgba(196,69,43,0.04);
      opacity: 0.55;
    }
  }
  .sector-badge {
    display: inline-block;
    font: 500 11px/1 var(--mono);
    color: var(--ink);
    background: var(--cream-deep);
    padding: 5px 10px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
    transition: opacity 0.2s;
  }
  .caption {
    font: 500 17px/1.4 var(--serif);
    color: var(--ink);
    margin: 0 0 18px;
    min-height: 4.5em;
    transition: opacity 0.18s ease;
  }
  .caption.fading { opacity: 0; }
  .tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 18px;
  }
  .tag {
    font: 500 9px/1 var(--mono);
    padding: 4px 8px;
    background: var(--cream);
    border: 0.5px solid var(--border-strong);
    border-radius: 2px;
    color: var(--ink-soft);
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .audio-bar {
    display: flex; align-items: center; gap: 12px;
    padding-top: 16px;
    border-top: 0.5px solid var(--border);
  }
  html.live-mode .audio-bar { display: none; }
  /* Hide the offline-mode static content until JS has rewritten it. */
  html.live-mode main.layout-inner { opacity: 0; transition: opacity 0.15s; }
  html.live-mode main.layout-inner.live-ready { opacity: 1; }
  .play-btn {
    background: var(--ink); color: var(--cream);
    border: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.12s, background 0.12s;
  }
  .play-btn:hover { background: var(--olive); transform: scale(1.05); }
  .play-btn:active { transform: scale(0.95); }
  .play-btn svg { width: 14px; height: 14px; }
  .progress-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .progress {
    width: 100%; height: 4px;
    background: var(--cream-deep);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--olive);
    transition: width 0.05s linear;
    border-radius: 2px;
  }
  .progress-tick {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 1px;
    background: var(--ink-mid);
    opacity: 0.3;
  }
  .timecode {
    font: 500 11px/1 var(--mono);
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    display: flex; justify-content: space-between;
  }

  .status {
    padding: 30px;
    text-align: center;
    color: var(--ink-mid);
    font: 400 13px/1.5 var(--sans);
  }
  .status.error { color: #b54a3a; }
  .status code {
    background: var(--cream-deep);
    padding: 2px 6px;
    border-radius: 2px;
    font: 500 12px/1 var(--mono);
  }

  @media (max-width: 900px) {
    .layout-inner { padding: 24px 16px 40px; }
    .layout { grid-template-columns: 1fr; }
    h1.session-title { font-size: 26px; }
    .lb-grid-tpl {
      grid-template-columns: 28px minmax(120px, 1fr) repeat(5, 40px) 60px 50px;
    }
    .row .sec, .row .time, .row .gap { font-size: 11px; }
    .top-grid { grid-template-columns: 1fr; }
    .chart-svg { height: 200px; }
  }

  @media (max-width: 800px) {
    /* The nav rail is hidden at this width; reclaim its grid column. */
    .layout { grid-template-columns: 1fr; }
  }

  @media (max-width: 680px) {
    .ontrack-card { padding: 12px 10px 8px; }
    /* Leaderboard needs ~540px for the sector columns: scroll, don't clip. */
    .leaderboard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .lb-grid-tpl { min-width: 540px; }
  }

  /* ===== LIVE OVERALL (finals only) ===============================
     Overall standings as they would stand if the final ended now:
     points coming into the round + points for each rider's current
     place in the final. Riders still to run keep their pre-round
     points. Own card class so it shows in the pips view too. */
  .overall-card {
    background: var(--cream); border: 0.5px solid var(--border); border-radius: 4px;
    padding: 18px 18px 10px; margin-bottom: 28px;
  }
  .overall-card h2 { font: 600 16px/1.2 var(--serif); margin: 0 0 4px; }
  .overall-card .chart-sub {
    font: 500 10px/1.4 var(--mono); color: var(--ink-mid); letter-spacing: 0.10em;
    text-transform: uppercase; margin: 0 0 10px;
  }
  .ov-lead { font: 500 13px/1.4 var(--sans); color: var(--ink); margin: 0 0 10px; }
  .ov-row {
    display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) 96px 58px 52px;
    gap: 6px; align-items: center; padding: 6px 0;
    border-top: 0.5px solid var(--border); font: 400 13px/1.3 var(--sans);
  }
  .ov-row.ov-head { font: 500 10px/1.3 var(--mono); color: var(--ink-mid); letter-spacing: 0.10em; text-transform: uppercase; border-top: 0; }
  .ov-row .ov-pos { font: 600 13px/1 var(--mono); }
  .ov-row .ov-move { font: 500 11px/1 var(--mono); color: var(--ink-mid); }
  .ov-row .ov-move.up { color: var(--olive); }
  .ov-row .ov-move.down { color: var(--behind); }
  .ov-row .ov-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ov-row .ov-name .rider-flag { margin-right: 6px; vertical-align: -2px; }
  .ov-row .ov-short { display: none; }
  .ov-row .ov-round { font: 500 11px/1.2 var(--mono); color: var(--ink-soft); }
  .ov-row .ov-round.fin { color: var(--olive); }
  .ov-row .ov-round.run { color: var(--live); }
  .ov-row .ov-round.out { color: var(--ink-mid); }
  .ov-row .ov-total { font: 600 13px/1 var(--mono); text-align: right; }
  .ov-row .ov-gap { font: 400 11px/1 var(--mono); color: var(--ink-mid); text-align: right; }
  .ov-row.is-racing { background: var(--olive-fade); }
  .ov-row.is-live { background: var(--live-fade); }
  .ov-more {
    margin: 10px 0 4px; font: 500 12px/1 var(--sans); padding: 7px 12px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--cream); color: var(--ink-soft); border-radius: 999px;
  }
  /* Desktop: slim rail beside the leaderboard, phone dimensions. Only
     when the panel is showing (JS sets .has-overall) and the leaderboard
     is visible; the pips view hides the leaderboard, so it stacks. */
  @media (min-width: 1000px) {
    .lb-split.has-overall { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
    #live-content.view-pips .lb-split.has-overall { display: block; }
    .lb-split.has-overall .overall-card { padding: 14px 14px 8px; }
    .lb-split.has-overall .ov-lead { font-size: 12px; }
    .lb-split.has-overall .ov-row { grid-template-columns: 24px 30px minmax(0, 1fr) 70px 44px; gap: 5px; font-size: 12px; }
    .lb-split.has-overall .ov-row .ov-gap { display: none; }
    #live-content:not(.view-pips) .lb-split.has-overall .ov-full { display: none; }
    #live-content:not(.view-pips) .lb-split.has-overall .ov-short { display: inline; }
    .lb-split.has-overall .ov-row .ov-pos,
    .lb-split.has-overall .ov-row .ov-total { font-size: 12px; }
    .lb-split.has-overall .ov-row .ov-round { font-size: 10px; }
    #live-content:not(.view-pips) .lb-split.has-overall .overall-card .chart-sub { letter-spacing: 0.06em; }
  }
  @media (max-width: 680px) {
    .overall-card { padding: 12px 10px 8px; }
    .ov-row { grid-template-columns: 28px 30px minmax(0, 1fr) 76px 46px; }
    .ov-row .ov-gap { display: none; }
  }

  /* ===== SECTOR PIPS VIEW ==========================================
     Phone-first live view: one row per rider, five circles per run.
     Each circle compares that sector with the hot seat's same sector
     (exact, to the thousandth). Default on phones, toggle on desktop. */
  .view-toggle { display: inline-flex; margin-left: auto; }
  .view-toggle button {
    font: 500 12px/1 var(--sans); padding: 7px 12px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--cream); color: var(--ink-soft);
    margin-left: -1px;
  }
  .view-toggle button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
  .view-toggle button:last-child { border-radius: 0 999px 999px 0; }
  .view-toggle button.is-on { background: var(--olive); border-color: var(--olive); color: #fff; position: relative; }
  #pips-view { display: none; }
  #live-content.view-pips #pips-view { display: block; }
  #live-content.view-pips .ontrack-card:not(.ticker-card) { display: none; }
  #live-content.view-pips .leaderboard .leaderboard-head { display: none; }
  #live-content.view-pips .leaderboard:not(:has(#lb-status)) { display: none; }
  body.gl-pips .mobile-notice { display: none; }
  .pips-card {
    background: var(--cream); border: 0.5px solid var(--border); border-radius: 6px;
    padding: 12px 14px 8px; margin: 0 0 14px; max-width: 560px;
  }
  /* Hot seat: the one time everything on screen reads against, so it
     carries the chart's gold leader colour and full-weight text. */
  .pv-hs {
    font: 400 14px/1.4 var(--sans); color: var(--ink); margin: 0 0 2px;
    padding: 8px 10px; border-left: 3px solid #BA7517; border-radius: 0;
    background: rgba(186,117,23,0.08);
  }
  .pv-hs .pv-hs-label {
    font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: #854F0B; margin-right: 6px;
  }
  .pv-hs strong { color: var(--ink); font-weight: 700; }
  .pv-hs .pv-hs-time { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
  .pv-hs.is-none { border-left-color: var(--border-strong); background: var(--cream-soft); color: var(--ink-soft); font-size: 13px; }
  .pv-sec {
    display: flex; justify-content: space-between; gap: 8px;
    font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink); margin: 16px 0 4px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border-strong);
  }
  .pv-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 66px;
    align-items: center; gap: 8px; padding: 7px 0;
    border-top: 0.5px solid var(--border); cursor: pointer;
  }
  .pv-row.is-open { background: var(--cream-soft); }
  .pv-name { font: 600 13px/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-pos { display: inline-block; min-width: 18px; font-weight: 400; color: var(--ink-mid); }
  .pv-bib { font: 400 11px/1 var(--mono); color: var(--ink-mid); margin-right: 4px; }
  .pv-team { font: 400 11px/1.3 var(--sans); color: var(--ink-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-pips { display: flex; gap: 4px; }
  .pv-p { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; display: block; }
  .pv-p.fast { background: #534AB7; }
  .pv-p.gain { background: #639922; }
  .pv-p.lose { border: 2px solid #D85A30; }
  .pv-p.par  { background: rgba(0,0,0,0.22); }
  .pv-p.todo { border: 1px dashed rgba(0,0,0,0.35); }
  .pv-p.now  { border: 2px solid var(--ink); animation: pv-blink 1s infinite; }
  @keyframes pv-blink { 50% { opacity: .2; } }
  @media (prefers-reduced-motion: reduce) { .pv-p.now { animation: none; } }
  .pv-gap { font: 600 12px/1 var(--sans); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
  .pv-gap.up { color: #639922; }
  .pv-gap.dn { color: #D85A30; }
  .pv-deltas-wrap { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto 66px; gap: 8px; }
  .pv-deltas-wrap .pv-list { grid-column: 1 / -1; font: 400 11px/1.4 var(--mono); color: var(--ink-mid); }
  .pv-cut { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #D85A30; margin: 3px 0; }
  .pv-cut::before, .pv-cut::after { content: ''; flex: 1; border-top: 1px dashed #D85A30; }
  .pv-more { display: block; width: 100%; background: none; border: 0; border-top: 0.5px solid var(--border); padding: 6px 0; font: 500 11px/1 var(--mono); color: var(--ink-mid); cursor: pointer; }
  .pv-empty { font: 400 12px/1.4 var(--sans); color: var(--ink-mid); padding: 8px 0; border-top: 0.5px solid var(--border); }
  .pv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 2px; font: 400 11px/1.3 var(--sans); color: var(--ink-mid); }
  .pv-legend span { display: inline-flex; align-items: center; gap: 6px; }

  /* ===== ARCHIVE MODE ============================================ */
  #archive-nav {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px;
  }
  #archive-nav button {
    background: var(--cream);
    border: 0.5px solid var(--border-strong);
    color: var(--ink-soft);
    padding: 7px 14px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: 2px; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  #archive-nav button:hover { background: var(--cream-soft); }
  /* Elite qualifying results: Q1 / Q2 / Final field switcher reuses the
     category-tab look, as links between the three results views. */
  #archive-nav a.q-switch {
    background: var(--cream); border: 0.5px solid var(--border-strong); color: var(--ink-soft);
    padding: 7px 14px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em;
    text-transform: uppercase; border-radius: 2px; text-decoration: none;
  }
  #archive-nav a.q-switch:hover { background: var(--cream-soft); }
  #archive-nav a.q-switch.active { background: var(--olive-fade); border-color: var(--olive); color: var(--olive); }
  #archive-nav button.active {
    background: var(--olive-fade);
    border-color: var(--olive);
    color: var(--olive);
  }
  /* "All riders" view: filter bar above the podium. */
  .archive-filters {
    display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end;
    margin: 0 0 14px; padding: 12px 16px;
    background: var(--cream); border: 0.5px solid var(--border); border-radius: 4px;
  }
  .af-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .af-label {
    font: 500 10px/1 var(--mono); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-mid);
  }
  .af-seg { display: flex; }
  .af-seg button {
    background: var(--cream); border: 0.5px solid var(--border-strong);
    color: var(--ink-soft); padding: 7px 12px; margin-left: -0.5px;
    font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer;
  }
  .af-seg button:first-child { margin-left: 0; border-radius: 2px 0 0 2px; }
  .af-seg button:last-child { border-radius: 0 2px 2px 0; }
  .af-seg button:hover { background: var(--cream-soft); }
  .af-seg button.active {
    position: relative; background: var(--olive-fade);
    border-color: var(--olive); color: var(--olive);
  }
  .archive-filters select {
    font: 400 12px/1.2 var(--sans); color: var(--ink);
    background: var(--cream); border: 0.5px solid var(--border-strong);
    border-radius: 2px; padding: 6px 8px; max-width: 260px;
  }
  .archive-filters select.is-set { border-color: var(--olive); color: var(--olive); }
  .af-reset {
    background: none; border: none; padding: 7px 0; cursor: pointer;
    font: 500 11px/1 var(--mono); color: var(--ink-mid); text-decoration: underline;
  }
  .archive-empty {
    padding: 28px 18px; text-align: center;
    font: 400 13px/1.5 var(--sans); color: var(--ink-mid);
  }
  @media (max-width: 680px) {
    .archive-filters select { max-width: 100%; }
    .af-group.af-select { flex: 1 1 100%; }
  }
  .archive-card {
    background: var(--cream);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    margin-bottom: 20px; overflow: hidden;
  }
  .archive-card-header { padding: 14px 18px 6px; }
  .archive-card-header h3 {
    margin: 0; font: 600 16px/1.2 var(--serif); letter-spacing: -0.005em;
  }
  .archive-card-header .meta {
    font: 400 12px/1.4 var(--sans); color: var(--ink-mid); margin-top: 4px;
  }
  .archive-scroll { overflow-x: auto; }
  table.archive-table {
    width: 100%; border-collapse: collapse; table-layout: fixed;
  }
  table.archive-table th, table.archive-table td {
    padding: 7px 2px; font-size: 12px; text-align: center;
    border-bottom: 0.5px solid var(--border);
    font-variant-numeric: tabular-nums;
  }
  table.archive-table thead th {
    background: var(--cream-soft); color: var(--ink-mid);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  }
  table.archive-table col.col-pos   { width: 26px; }
  table.archive-table col.col-rider { width: auto; }
  table.archive-table col.col-split { width: 38px; }
  table.archive-table col.col-spark { width: 50px; }
  table.archive-table col.col-time  { width: 64px; }
  table.archive-table td.lhs  { text-align: left; padding-left: 8px; }
  table.archive-table td.pos  { text-align: left; padding-left: 8px; font-weight: 500; }
  table.archive-table td.rider { text-align: left; padding-left: 8px; min-width: 0; overflow: hidden; }
  table.archive-table td.rider .name {
    font-weight: 500; font-size: 12px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  table.archive-table td.rider .team {
    font-size: 10px; color: var(--ink-mid); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* Rider cell: name/team on the left, country flag tucked into the spare
     space on the right, just before the split columns. */
  table.archive-table td.rider .rider-cell {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  table.archive-table td.rider .rider-id { min-width: 0; }
  .archive-flag {
    width: 18px; height: 13px; flex: none; border-radius: 1px;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.12);
  }
  table.archive-table td.time { text-align: right; padding-right: 10px; line-height: 1.25; }
  table.archive-table td.time .t { display: block; font-weight: 500; font-size: 12px; }
  table.archive-table td.time .g { display: block; font-size: 10px; color: var(--ink-soft); margin-top: 1px; }
  table.archive-table td.time .g.ahead  { color: #639922; }
  table.archive-table td.time .g.behind { color: #D85A30; }
  table.archive-table td.time .g.winner { color: #BA7517; font-weight: 500; }
  @media (max-width: 680px) { table.archive-table { min-width: 720px; } }
  table.archive-table tr.perfect-row { background: rgba(99,153,34,0.08); }
  table.archive-table tr.perfect-row td.pos,
  table.archive-table tr.perfect-row td.rider .name,
  table.archive-table tr.perfect-row td.time { color: #27500A; }
  table.archive-table tbody tr:hover { background: rgba(0,0,0,0.025); cursor: pointer; }
  table.archive-table tbody tr.is-selected td.pos {
    color: var(--row-color, var(--ink)); position: relative;
  }
  table.archive-table tbody tr.is-selected td.pos::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--row-color, var(--olive));
  }
  .archive-sector-cell {
    display: block; padding: 2px 2px; border-radius: 3px;
    text-align: center; box-sizing: border-box;
  }
  .archive-sector-cell.best { background: #C0DD97; color: #27500A; }
  /* "Rank by" a sector in the all-riders view: outline that column. */
  table.archive-table thead th.rank-col { color: var(--olive); font-weight: 600; }
  table.archive-table td.rank-col { background: var(--olive-fade); }
  .archive-sector-cell .t { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; }
  .archive-sector-cell .d {
    display: block; font-size: 9px; line-height: 1.2; color: var(--ink-mid);
    margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .archive-sector-cell.best .d { color: #3B6D11; }
  .archive-sector-cell .d.ahead  { color: #639922; }
  .archive-sector-cell .d.behind { color: #D85A30; }
  .archive-row-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    margin-right: 5px; vertical-align: middle;
    background: var(--cream-deep); color: var(--ink-mid);
    font-size: 10px; font-weight: 600; line-height: 1;
  }
  table.archive-table tbody tr.is-selected .archive-row-toggle {
    background: var(--row-color, var(--olive)); color: white;
  }
  .archive-podium-row {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 8px; padding: 14px 8px 34px; flex-wrap: nowrap;
  }
  .archive-podium-card {
    flex: 1 1 0; min-width: 0; max-width: 230px;
    padding: 10px; border-radius: 4px;
    border: 0.5px solid var(--border);
    background: var(--cream);
    text-align: center; cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
  }
  .archive-podium-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
  .archive-podium-card.is-selected { border-color: var(--olive); box-shadow: 0 0 0 1px var(--olive); }
  .archive-podium-card .ap-pos { font-size: 22px; font-weight: 600; line-height: 1; margin-bottom: 6px; }
  .archive-podium-card.p1 { position: relative; top: 0;    border-top: 3px solid #BA7517; padding-top: 14px; background: rgba(250,238,218,0.55); }
  .archive-podium-card.p1 .ap-pos { color: #BA7517; }
  .archive-podium-card.p2 { position: relative; top: 16px; border-top: 3px solid #5F5E5A; padding-top: 14px; background: rgba(241,239,232,0.55); }
  .archive-podium-card.p2 .ap-pos { color: #444441; }
  .archive-podium-card.p3 { position: relative; top: 28px; border-top: 3px solid #993C1D; padding-top: 14px; background: rgba(250,236,231,0.55); }
  .archive-podium-card.p3 .ap-pos { color: #993C1D; }
  .archive-podium-card.p4 { position: relative; top: 26px; padding-bottom: 14px; }
  .archive-podium-card.p5 { position: relative; top: 34px; padding-bottom: 14px; }
  .archive-podium-card .ap-name {
    font-size: 13px; font-weight: 600; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .archive-podium-card .ap-given { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
  .archive-podium-card .ap-team {
    font-size: 10px; color: var(--ink-mid); margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .archive-podium-card .ap-time {
    font-size: 14px; font-weight: 500; margin-top: 8px; font-variant-numeric: tabular-nums;
  }
  .archive-podium-card .ap-gap {
    font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 2px;
  }
  .archive-podium-card.p1 .ap-gap { color: #BA7517; font-weight: 500; }


  /* Conventional top header: inline links on desktop, in-flow drop menu on phones. */
  .window-bar { position: sticky; top: 0; z-index: 30; }
  .wb-home { color: inherit; text-decoration: none; }
  .wb-home:hover { color: var(--olive); }
  .window-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .wb-brand { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
  .wb-brand .crumb, .wb-brand .crumb-active { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gl-nav { justify-self: center; display: flex; align-items: center; gap: 22px; }
  .gl-burger { justify-self: end; }
  .gl-link {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-mid); text-decoration: none;
    padding: 4px 0; transition: color 0.12s;
  }
  .gl-link:hover { color: var(--ink); }
  .gl-link.is-active { color: var(--olive); }
  .gl-burger {
    display: none; background: none; border: 0; padding: 4px;
    color: var(--ink); cursor: pointer; line-height: 0;
  }
  @media (max-width: 720px) {
    /* The menu flows in-line under the bar (no absolute positioning), so it
       works regardless of whether a page pins the bar sticky or static. */
    .window-bar { display: flex; flex-wrap: wrap; }
    .gl-burger { display: inline-flex; order: 2; margin-left: auto; }
    .gl-nav {
      order: 3; flex-basis: 100%; width: 100%; position: static; transform: none;
      margin-left: 0; flex-direction: column; align-items: stretch; gap: 0;
      max-height: 0; overflow: hidden; transition: max-height 0.24s ease;
    }
    .gl-nav.open { max-height: 75vh; }
    .gl-link {
      padding: 14px 2px; letter-spacing: 0.18em;
      border-top: 0.5px solid var(--border);
    }
  }


  /* Mobile-only notice — the live timing tables are too dense to scale
     down; phones genuinely read better in landscape here. */
  .mobile-notice {
    display: none;
    background: var(--mustard-fade);
    border-bottom: 0.5px solid var(--mustard);
    color: var(--mustard);
    padding: 8px 14px;
    font: 500 10px/1.3 var(--mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
  }
  @media (max-width: 760px) {
    .mobile-notice { display: block; }
    /* On phones the breadcrumb bar must not stay pinned: an opaque sticky
       bar leaves the big serif title half-cut beneath it as you scroll.
       Let it scroll away with the page instead. */
    .window-bar { position: static; }
    /* The archive ref line ("Round 3 · Saalfelden-Leogang · …") is long;
       allow it to wrap rather than overflow on a narrow screen. */
    .ref-header { flex-wrap: wrap; gap: 6px 10px; }
    h1.session-title { font-size: 24px; }
  }

  /* ===== SESSION LANDING (sub home) ================================ */
  .session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    margin: 24px 0 40px;
  }
  .session-divider {
    grid-column: 1 / -1;
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid);
    padding-bottom: 9px;
    margin: 10px 0 -2px;
    border-bottom: 0.5px solid var(--border);
  }
  .session-divider:first-child { margin-top: 0; }
  .session-card {
    display: block;
    background: var(--cream);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    padding: 20px 22px;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s, transform 0.12s;
  }
  .session-card:hover {
    border-color: var(--olive);
    transform: translateY(-1px);
  }
  .session-card .sc-cat {
    font: 600 16px/1.3 var(--serif);
    margin-bottom: 2px;
  }
  .session-card .sc-round {
    font: 500 10px/1.4 var(--mono);
    color: var(--ink-mid);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .session-card .sc-status {
    display: inline-block;
    font: 600 9px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 2px;
    background: var(--cream-deep);
    color: var(--ink-soft);
  }
  .session-card .sc-status.live {
    background: #c4452b;
    color: #fff;
  }
  .session-card .sc-status.done {
    background: var(--olive-fade-strong);
    color: var(--olive);
  }
  .session-card .sc-status.progress {
    background: var(--mustard-fade);
    color: var(--mustard);
  }
  .session-card .sc-detail {
    font: 400 11px/1.5 var(--mono);
    color: var(--ink-mid);
    margin-top: 10px;
  }

  /* ===== ON-TRACK CHART ============================================ */
  .ontrack-card {
    background: var(--cream);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    padding: 18px 18px 12px;
    margin-bottom: 28px;
  }
  .ontrack-card h2 {
    font: 600 16px/1.2 var(--serif);
    margin: 0 0 4px;
  }
  .ontrack-card .chart-sub {
    font: 500 10px/1 var(--mono);
    color: var(--ink-mid);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  .ontrack-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 980 / 380; /* JS updates this alongside the viewBox */
  }

  /* ===== MOMENTS TICKER ============================================ */
  /* Same card chrome as the chart; rows are a time / tag / text grid. */
  .ticker-card { margin-top: -8px; }
  .ticker-feed {
    list-style: none;
    margin: 0; padding: 0;
    /* Four rows visible (7+7 padding + ~19px text per row), then scroll */
    max-height: 132px;
    overflow-y: auto;
  }
  .ticker-row {
    display: grid;
    grid-template-columns: 58px 70px 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 7px 2px;
    border-top: 0.5px solid var(--border);
    animation: tickerIn 1.4s ease-out;
  }
  .ticker-row:first-child { border-top: 0; }
  @keyframes tickerIn {
    from { background: var(--olive-fade-strong); }
    to   { background: transparent; }
  }
  .tk-time {
    font: 500 10px/1.5 var(--mono);
    color: var(--ink-mid);
    letter-spacing: 0.04em;
  }
  .tk-tag {
    font: 600 8.5px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 3px;
    justify-self: start;
    white-space: nowrap;
  }
  .tk-lead   { background: var(--behind); color: var(--cream); }
  .tk-fast   { background: var(--best-bg); color: var(--best-text); }
  .tk-cut    { background: var(--mustard-fade); color: #8A6A0E; box-shadow: inset 0 0 0 0.5px rgba(212,160,23,0.45); }
  .tk-move   { background: var(--olive-fade-strong); color: var(--olive); }
  .tk-off    { background: rgba(216,90,48,0.12); color: var(--behind); }
  .tk-finish { background: var(--cream-deep); color: var(--ink-soft); }
  .tk-text {
    font: 400 13px/1.45 var(--sans);
    color: var(--ink);
  }
  .tk-text strong { font-weight: 600; }
  .tk-score {
    font: 500 9.5px/1.5 var(--mono);
    color: var(--ink-mid);
    opacity: 0.7;
  }
  .ticker-empty {
    font: 400 12px/1.5 var(--sans);
    color: var(--ink-mid);
    padding: 10px 2px;
  }
  @media (max-width: 680px) {
    .ticker-row { grid-template-columns: 48px 62px 1fr; }
    .tk-score { display: none; }
    /* Rows wrap to two lines on phones, so the four-row window needs
       roughly twice the height (4 x ~52px + top row without border). */
    .ticker-feed { max-height: 214px; }
  }
  /* Frame: explicit x/y axis lines so the plot doesn't float on the grid */
  .ontrack-svg .axis-line {
    stroke: var(--ink-soft);
    stroke-width: 1;
  }
  .ontrack-svg .gridline {
    stroke: var(--border);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
  }
  /* Vertical split guides: a touch stronger than the y-gridlines so the
     split positions read, still clearly secondary to data lines. */
  .ontrack-svg .split-gridline {
    stroke: var(--border-strong);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
  }
  .ontrack-svg .axis-label {
    font: 500 11px/1 var(--mono);
    fill: var(--ink-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ontrack-svg .y-tick-label {
    font: 400 11px/1 var(--mono);
    fill: var(--ink-mid);
  }
  .ontrack-svg .leader-line {
    stroke: var(--ink);
    stroke-width: 1.5;
  }
  .ontrack-svg .cut-line {
    stroke: var(--mustard);
    stroke-width: 1.2;
    stroke-dasharray: 6 4;
  }
  .ontrack-svg .ref-label {
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.04em;
  }
  .ontrack-svg .podium-line {
    stroke: var(--olive);
    stroke-width: 1.2;
    stroke-dasharray: 2 4;
  }
  .ontrack-svg .ref-label.leader { fill: var(--ink); }
  .ontrack-svg .ref-label.cut    { fill: var(--mustard); }
  .ontrack-svg .ref-label.podium { fill: var(--olive); }
  .ontrack-svg .ot-line {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
  }
  .ontrack-svg .q1-line {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1.2;
    stroke-dasharray: 1 4;
    opacity: 0.45;
  }
  .ontrack-svg .q1-label {
    font: 500 10px/1 var(--mono);
    fill: var(--ink-soft);
    opacity: 0.75;
    letter-spacing: 0.04em;
  }
  /* Line/dot/chip colour is per rider (inline, from OT_PALETTE) so the
     legend can identify who is who; +/- in the chip says ahead/behind. */
  .ontrack-svg .ot-dot {
    animation: pulse-live 1.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  /* Chart hover: tooltip, invisible hit targets, dim-the-rest state. */
  .ontrack-card { position: relative; }
  .ot-tip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: var(--ink);
    color: var(--cream);
    font: 500 11px/1.4 var(--mono);
    padding: 5px 9px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 5;
  }
  .ontrack-svg .ot-hit {
    stroke: rgba(0,0,0,0);
    stroke-width: 14;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
  }
  .ontrack-svg .ot-hit-dot {
    fill: rgba(0,0,0,0);
    pointer-events: all;
    cursor: pointer;
  }
  .ontrack-svg.hover-dim .ot-line:not(.hover-on),
  .ontrack-svg.hover-dim .ot-dot:not(.hover-on) { opacity: 0.22; }
  .ontrack-svg .ot-line.hover-on { stroke-width: 2.5; }
  .ontrack-legend .lg.hover-on { font-weight: 700; }

  /* On-track legend: rider identification lives under the chart at all
     widths. Inline point labels collided whenever riders bunched. */
  .ontrack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 2px;
    font: 500 11px/1.4 var(--mono);
  }
  .ontrack-legend .lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .ontrack-legend .lg::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .ontrack-legend .lg { color: var(--lgc, var(--ink-soft)); }
  .ontrack-legend .lg::before { background: var(--lgc, var(--ink-soft)); }
  .ontrack-svg .ot-label {
    font: 600 13px/1 var(--mono);
  }
  .ontrack-svg .ot-label.ahead { fill: #2F7D32; }
  .ontrack-svg .ot-label.behind { fill: var(--behind); }
  .ontrack-svg .ot-gap {
    font: 500 11px/1 var(--mono);
  }
  .ontrack-empty {
    padding: 40px 0 50px;
    text-align: center;
    font: 400 13px/1.5 var(--sans);
    color: var(--ink-mid);
  }

  /* ===== LEADERBOARD SECTION DIVIDERS ============================== */
  .section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--cream-soft);
    border-top: 1px solid var(--border-strong);
    border-bottom: 0.5px solid var(--border);
    font: 600 9px/1 var(--mono);
    color: var(--ink-soft);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .section-divider.ontrack { color: var(--live); border-top-color: var(--live-soft); }
  /* Waiting room: a firmer break between racing and those still in the queue. */
  .section-divider.upcoming {
    color: var(--ink-mid);
    border-top: 2px solid var(--border-strong);
    margin-top: 6px;
  }
  .section-divider::after {
    content: '';
    flex: 1; height: 1px;
    background: var(--border-strong);
    opacity: 0.5;
  }
  .row .sec.splitgap { font-weight: 600; background: transparent; }
  .row .sec.splitgap.ahead { color: #2F7D32; background: rgba(133,166,77,0.16); }
  .row .sec.splitgap.behind { color: var(--behind); background: rgba(216,90,48,0.12); }
  .row .sec.splitgap.level { color: var(--ink-soft); background: var(--cream-deep); }
  .row .sec.splitgap { letter-spacing: -0.01em; padding: 3px 0; line-height: 1.15; }
  .row .sec.splitgap small { display: block; font-size: 0.7em; font-weight: 500; opacity: 0.7; margin: 1px 0 0; }

  .row .gap.ahead { color: #2F7D32; font-weight: 600; }
  .row .gap.behind { color: var(--behind); font-weight: 600; }


  .gl-site-footer { border-top: 0.5px solid var(--border, rgba(0,0,0,0.08)); background: var(--cream, #FAFAF6); }
  .gl-site-footer .gl-foot-inner { max-width: 1180px; margin: 0 auto; padding: 20px 32px; display: flex; gap: 24px; font: 400 11px/1 var(--mono, 'IBM Plex Mono', monospace); color: var(--ink-mid, #888780); }
  .gl-site-footer a { color: var(--ink-mid, #888780); text-decoration: none; }
  .gl-site-footer a:hover { color: var(--olive, #556B2F); }