/* ========================================
   FONT FACES
   ----------------------------------------
   Noto Sans (body) + JetBrains Mono (numbers), latin + latin-ext subsets.
   Variable axes mean one file covers weights 400→800 (Noto) / 400→600
   (JetBrains). Unicode-ranges let the browser skip the larger latin-ext
   file until an athlete name actually needs accented characters.
   ======================================== */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ========================================
   DESIGN TOKENS
   ----------------------------------------
   One source of truth. Change a token here → every page updates.
   Mobile values are the baseline; the @media block at the bottom of this
   section bumps the type scale on desktop in one place rather than per
   selector. Spacing/colour/radius/shadow tokens are viewport-invariant.
   ======================================== */
:root {
    /* ── Type scale ────────────────────────
       Modular-ish 1.18 ratio. Mobile values; desktop scales below. */
    --text-micro:   9px;    /* badge eyebrows, leg-num tags */
    --text-xs:     10px;    /* axis ticks, ap-rd, ap-of */
    --text-sm:     11px;    /* meta, captions */
    --text-base:   12px;    /* body in compact contexts (cards) */
    --text-md:     13px;    /* body, race-row titles */
    --text-lg:     15px;    /* section titles in cards */
    --text-xl:     18px;    /* page subhead, athlete name */
    --text-2xl:    22px;    /* stat val */
    --text-3xl:    28px;    /* big stat */
    --text-display: 36px;   /* hero number (h2h score) */

    /* Uppercase eyebrow used by every "section title" in the app —
       distinguishes structural headings from value labels. */
    --text-eyebrow:  10px;

    --line-tight: 1.25;
    --line-snug:  1.4;
    --line-body:  1.5;

    /* ── Type family ───────────────────────
       Noto Sans for body, JetBrains Mono for any tabular number. */
    --font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* Legacy aliases kept so old rules still work while we migrate. */
    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-md: var(--text-md);
    --font-size-lg: var(--text-lg);

    /* ── Greys (ink + surface) ──────────────
       7-step ink ramp roughly matches Tailwind's slate but named by use. */
    --ink-1: #0f172a;   /* near-black, only for the strongest headings */
    --ink-2: #1e293b;   /* primary body / strong headings */
    --ink-3: #334155;   /* dense body */
    --ink-4: #475569;   /* secondary text, sub-labels */
    --ink-5: #64748b;   /* meta / muted */
    --ink-6: #94a3b8;   /* axis ticks, placeholders */
    --ink-7: #cbd5e1;   /* dividers, disabled */

    --bg-app:        #f4f6f8;  /* page background */
    --bg-surface:    #ffffff;  /* cards, modals, table cells */
    --bg-soft:       #fafbfc;  /* recessed surface, section bg inside cards */
    --bg-hover:      #f8fafc;  /* row hover */
    --bg-tint:       #f1f5f9;  /* zebra / mute tint */

    --line-soft:     var(--bg-tint);  /* hairline */
    --line-base:     #e2e8f0;          /* default border */
    --line-strong:   var(--ink-7);     /* emphasised border */

    /* Back-compat aliases for existing rules */
    --background:        var(--bg-app);
    --surface:           var(--bg-surface);
    --surface-raised:    var(--bg-tint);
    --background-light:  var(--bg-tint);
    --foreground:        var(--ink-1);
    --muted-foreground:  var(--ink-4);
    --axis-color:        var(--ink-1);
    --label-color:       var(--ink-4);
    --border-color:      var(--line-base);
    --grid-color:        var(--line-base);

    /* ── Brand + semantic ──────────────────
       NOTE: --primary-color and its --primary-dark/-darker/-subtle variants are
       defined in saas-theme.css (indigo #4f46e5), which loads AFTER this file
       (see build.sh cascade). They are intentionally NOT set here — saas-theme is
       the single source of truth for the brand accent. Don't reintroduce a value
       here or you'll shadow-mismatch the live theme. Discipline colours (swim/bike/
       run = blue/green/red) live in CT.bands (js/config/chart-theme.js). */

    --success-color: #047857;
    --danger-color:  #dc2626;
    --warning-color: #f59e0b;

    /* Discipline colours — referenced from JS as well as CSS */
    --seg-swim: #3b82f6;
    --seg-bike: #16a34a;
    --seg-run:  #dc2626;

    /* Accent palettes for affordances */
    --amber-fg:     #b45309;
    --amber-strong: #9a3412;
    --amber-bg:     #fff7ed;
    --amber-bg-hover: #ffedd5;
    --amber-border: #fdba74;

    --indigo-fg:     #4338ca;
    --indigo-bg:     #eef2ff;
    --indigo-bg-hover: #e0e7ff;
    --indigo-border: #c7d2fe;

    --gold:   #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;

    /* ── Spacing (px) ──────────────────────
       Geometric-ish ladder. Existing rem-based --spacing-* kept as aliases. */
    --space-1:  2px;
    --space-2:  4px;
    --space-3:  6px;
    --space-4:  8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 14px;
    --space-8: 16px;
    --space-10: 20px;
    --space-12: 24px;
    --space-16: 32px;

    --spacing-xs: var(--space-2);
    --spacing-sm: var(--space-4);
    --spacing-md: var(--space-8);
    --spacing-lg: var(--space-12);
    --spacing-xl: var(--space-16);

    /* ── Radius ────────────────────────────  */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:  10px;
    --radius-pill: 999px;

    --border-radius: var(--radius-xl);
    --border-radius-lg: 16px;

    /* ── Chip primitive ──────────────────────
       One geometry for every toggle chip in the app (discipline readout,
       unit toggle, distance filter, country chip, preset chip, h2h toggle,
       gap mode). Padding sized so the chip clears the 28px finger-friendly
       floor without becoming a button. */
    --chip-py:     4px;
    --chip-px:    10px;
    --chip-radius: var(--radius-pill);
    --chip-text:  var(--text-sm);
    --chip-min-h: 28px;

    /* ── Shadow ────────────────────────────  */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-2: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-3: 0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-card: var(--shadow-1);

    /* ── Motion ────────────────────────────  */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;

    /* ── Layout ────────────────────────────  */
    --container-max-width: 1400px;
    --sidebar-width: 320px;
}

/* Desktop scale-up — bump the whole type ladder at one breakpoint. Spacing,
   colours, radii intentionally don't change here; if a specific layout
   needs to widen on desktop it does so in its own @media block. */
@media (min-width: 769px) {
    :root {
        --text-micro:   10px;
        --text-xs:      11px;
        --text-sm:      12px;
        --text-base:    13px;
        --text-md:      15px;
        --text-lg:      17px;
        --text-xl:      22px;
        --text-2xl:     28px;
        --text-3xl:     34px;
        --text-display: 44px;
        --text-eyebrow: 11px;
    }
}

/* Larger desktops get a final small bump. */
@media (min-width: 1200px) {
    :root {
        --text-lg:      18px;
        --text-xl:      24px;
        --text-2xl:     30px;
    }
}

/* ========================================
   RESET + BODY
   ======================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    /* Stop iOS Safari auto-inflating font sizes on some blocks (it made long
       race titles render huge on iPhone, but not in any desktop emulator). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: var(--font-family);
    font-size: var(--text-md);
    line-height: var(--line-body);
    color: var(--ink-1);
    background: var(--bg-app);
    min-height: 100vh;
    padding: var(--space-4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
    body { padding: var(--space-2); }
}

h1 { display: none; }                /* replaced by .app-brand */
.upload-section { display: none !important; }

/* Any node that opts into tabular numbers also opts into the mono face —
   keeps tables (sub-splits, leaderboards, time deltas) aligned cleanly. */
[style*="tabular-nums"],
.podium-time, .podium-paces, .ms-sub, .ms-val, .seg-time, .ap-rtot,
.h2h-row-pos, .h2h-row-gap,
[class*="time-cell"], [class*="pace-cell"] {
    font-family: var(--font-family-mono);
}

/* Discipline label tag — colored typography that pairs with chart legends. */
.disc-tag {
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.92em;
}

/* ========================================
   LAYOUT
   ======================================== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    background: var(--bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: var(--space-6);
}
@media (max-width: 768px) {
    .container { padding: var(--space-3); border-radius: var(--radius-lg); }
}

/* Top-level content sections share one centred max-width so on wide
   monitors header, tabs, and chart content stay aligned in a readable
   column instead of stretching edge-to-edge. */
#resultsSection,
#athleteProfileSection,
#raceHistorySection {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}

.page-content { padding: var(--space-4); background: var(--bg-surface); border-radius: var(--border-radius); }
@media (max-width: 768px) { .page-content { padding: var(--space-3); } }

/* ========================================
   LOADING / ERROR
   ======================================== */
.loading { display: none; text-align: center; padding: var(--spacing-lg); }
.loading.active { display: block; }
.spinner {
    border: 4px solid var(--bg-tint);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%; width: 40px; height: 40px;
    animation: spin 1s linear infinite; margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

.error-message {
    color: var(--danger-color);
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--danger-bg);
    border-radius: var(--border-radius);
    display: none;
    font-size: var(--text-md);
}

/* ========================================
   SHARED PRIMITIVES
   ----------------------------------------
   Reused across athlete-profile, race-history, head-to-head, summary.
   Namespace classes below (.ap-*, .rh-*, .h2h-*) inherit these via
   token references so they all look like the same component family.
   ======================================== */

/* ── Section card: recessed panel grouping related content ── */
.ap-section,
.rh-section {
    margin-bottom: var(--space-7);
    padding: var(--space-5);
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
}
@media (min-width: 769px) {
    .ap-section, .rh-section { padding: var(--space-8); }
}

/* ── Section title (eyebrow + optional sub) ── */
.ap-section-title,
.rh-section-title,
.summary-section-title,
.settings-section-title,
.bs-section-title {
    font-size: var(--text-eyebrow);
    font-weight: var(--font-weight-bold);
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: var(--space-3);
}
@media (min-width: 769px) {
    .ap-section-title, .rh-section-title,
    .summary-section-title, .settings-section-title { font-size: var(--text-sm); }
}
.ap-section-sub,
.rh-section-sub {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink-6);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Chart host inside a section card ── */
.ap-chart-host,
.rh-chart-host,
.xo-chart-host {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    border: 1px solid var(--line-soft);
    overflow: hidden;
}
.ap-chart-host svg,
.rh-chart-host svg,
.xo-chart-host svg { display: block; max-width: 100%; }

/* ── Empty state ── */
.ap-empty,
.rh-empty,
.spider-empty {
    padding: var(--space-10);
    text-align: center;
    color: var(--ink-6);
    font-size: var(--text-base);
}
@media (min-width: 769px) {
    .ap-empty, .rh-empty, .spider-empty { font-size: var(--text-md); }
}

/* ── Back control — ONE canonical style, used app-wide (.btn-back) ── */
.btn-back {
    background: transparent;
    border: 1px solid var(--line-base);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
    color: var(--ink-4);
    cursor: pointer;
    margin-bottom: var(--space-5);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-back:hover {
    background: var(--bg-tint);
    border-color: var(--ink-6);
}

/* ── Pill: outlined chip used for tags, filters, status ── */
.ap-pos, .cond-chip, .ab-badge,
.rh-leg, .ap-legend-chip, .rh-rec-year, .ap-readout-count {
    font-variant-numeric: tabular-nums;
}

/* ========================================
   APP HEADER
   ======================================== */
.app-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    /* Brand + the ⓘ/☰ control pair anchor the top line; the data-source (browse
       buttons + breadcrumb) wraps within its own column between them rather than
       pushing the pair onto a second row. The pair lives in .app-menu-wrap and
       sits flush in the top-right corner, so no right pad is reserved. */
    padding: var(--space-3) 0;
    flex-wrap: nowrap;
    margin-bottom: var(--space-2);
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.app-brand {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink-2);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.38em;
}
.app-brand-mark { height: 0.92em; width: auto; flex: 0 0 auto; }
@media (min-width: 769px) { .app-brand { font-size: var(--text-xl); } }
@media (min-width: 1200px) { .app-brand { font-size: var(--text-2xl); } }

.app-data-source {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}
.app-header.has-data .app-data-source { font-size: var(--text-xs); }
@media (min-width: 769px) {
    .app-data-source { font-size: var(--text-md); }
    .app-header.has-data .app-data-source { font-size: var(--text-sm); }
}

/* ── App menu (☰): always-accessible home for app-level prefs (theme, units)
   and the CSV utility. Race-specific config stays in the Setup tab. ── */
/* The ⓘ help + ☰ menu form one aligned control pair, flush top-right. The ☰
   stays put whether or not the ⓘ is showing (it's per-tab), so the corner
   anchor never shifts. */
.app-menu-wrap { position: relative; margin-left: auto; flex: 0 0 auto; margin-top: 2px;
    display: inline-flex; align-items: center; gap: var(--space-2); }
.app-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--ink-3); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.app-menu-btn:hover { background: var(--bg-hover); border-color: var(--ink-6); color: var(--ink-1); }
.app-menu-btn[aria-expanded="true"] { background: var(--bg-hover); border-color: var(--primary-color); color: var(--primary-color); }
.app-menu {
    position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 1300;
    min-width: 244px; max-width: min(300px, calc(100vw - 24px));
    background: var(--surface-raised); border: 1px solid var(--line-base);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
    padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5);
}
.app-menu[hidden] { display: none; }
.app-menu-sec { display: flex; flex-direction: column; gap: var(--space-3); }
.app-menu-sec + .app-menu-sec { border-top: 1px solid var(--line-soft); padding-top: var(--space-4); }
.app-menu-title {
    font-size: var(--text-xs); font-weight: var(--font-weight-bold);
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-5);
}
.app-menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.app-menu-label { font-size: var(--text-sm); color: var(--ink-3); font-weight: var(--font-weight-medium); }
.app-menu-item {
    display: block; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--ink-2);
    font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
    cursor: pointer; text-align: center;
}
.app-menu-item:hover { background: var(--bg-hover); border-color: var(--ink-6); }
.app-menu-sub {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: var(--text-xs); color: var(--primary-color); text-align: left;
    font-weight: var(--font-weight-medium);
}
.app-menu-sub:hover { text-decoration: underline; }
.app-menu-about { font-size: var(--text-xs); color: var(--ink-5); line-height: 1.5; margin: 0; }

.header-select {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--bg-surface);
    max-width: 180px;
    cursor: pointer;
}
@media (min-width: 769px) {
    .header-select { font-size: var(--text-md); padding: var(--space-3) var(--space-5); max-width: 280px; }
}

/* Quiet surface button: the bg/border/color/weight live in the shared
   .header-btn/.header-file-btn group below; the accent-filled modal-footer
   variant lives at .src-modal-foot .header-btn. Base = geometry only. */
.header-btn {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.header-btn:disabled { opacity: 0.4; cursor: default; }
@media (min-width: 769px) { .header-btn { font-size: var(--text-md); padding: var(--space-3) var(--space-7); } }

.header-sep { color: var(--ink-6); font-size: var(--text-xs); }
@media (min-width: 769px) { .header-sep { font-size: var(--text-md); } }

.header-file-btn {
    padding: var(--space-2) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    cursor: pointer;
}
.header-file-btn.has-file {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}
@media (min-width: 769px) { .header-file-btn { font-size: var(--text-md); padding: var(--space-3) var(--space-7); } }

.header-file-name {
    font-size: var(--text-xs);
    color: var(--ink-5);
}
@media (min-width: 769px) { .header-file-name { font-size: var(--text-md); } }

/* When the loaded race has a history bucket, the filename becomes the entry
   point: link-styled (dotted underline), accent colour, pointer cursor. */
.header-file-name.clickable {
    cursor: pointer;
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.header-file-name.clickable::after { content: ' ›'; font-weight: 700; text-decoration: none; }
.header-file-name.clickable:hover,
.header-file-name.clickable:focus {
    background: var(--accent-subtle);
    color: var(--accent-hover);
    outline: none;
}
.header-file-name.clickable:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }

/* "← Back to <athlete>" pill above the tab nav (athlete-profile entry path). */
@media (min-width: 769px) {
    }

/* ── CSV-format help (ⓘ next to "Upload CSV") ── */
/* Ghost circle icon button (ⓘ help/info). One source; size + hover-ring per instance. */
.btn--icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; padding: 0;
    background: transparent; border: 1px solid transparent; color: var(--ink-6);
    font-size: var(--text-sm); line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn--icon:hover { background: var(--bg-tint); color: var(--ink-3); }

.csv-help-btn:hover { border-color: var(--primary-color); }
.csv-help-btn.active {
    background: var(--indigo-bg); border-color: var(--primary-color); color: var(--primary-color);
}
.csv-help-tip {
    position: fixed; z-index: 10000;
    background: var(--bg-surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-6) var(--space-7);
    max-width: 380px; font-size: var(--text-base); color: var(--ink-3);
}
.csv-help-title { font-weight: var(--font-weight-bold); font-size: var(--text-md); color: var(--ink-2); margin-bottom: var(--space-3); }
.csv-help-body p { margin: var(--space-3) 0; }
.csv-help-body code {
    font-family: var(--font-family-mono);
    font-size: var(--text-sm); background: var(--bg-tint);
    padding: 1px var(--space-2); border-radius: var(--radius-sm);
}
.csv-help-body ul { margin: var(--space-3) 0 0 18px; padding: 0; }
.csv-help-body li { margin: 3px 0; }
.csv-help-note { color: var(--ink-5); }

/* ── App-level info button: the ⓘ half of the top-right control pair, sat
   just left of the ☰ menu inside .app-menu-wrap (not fixed) ── */
.app-info-btn {
    width: 34px; height: 34px; font-size: var(--text-md);
}
.app-info-btn:hover { border-color: var(--ink-6); }
.app-info-btn.active { background: var(--primary-color); color: var(--on-accent); border-color: var(--primary-color); }
.app-info-tip {
    position: fixed; z-index: 1100;
    background: #2d3748; color: white;
    padding: var(--space-6) var(--space-7); border-radius: var(--radius-lg);
    font-size: var(--text-base); line-height: 1.6;
    max-width: 320px; min-width: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.app-info-tip strong { color: var(--warning-color); display: block; margin-bottom: var(--space-2); }
.app-info-tip ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.app-info-tip li { margin-bottom: 3px; }
@media (min-width: 769px) {
    .app-info-tip { font-size: var(--text-md); max-width: 380px; }
}

/* ========================================
   TAB NAVIGATION
   ======================================== */
.tab-navigation {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--line-base);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tab-navigation::-webkit-scrollbar { display: none; }
.tab-btn {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-5);
    background: transparent;
    color: var(--ink-4);
    border: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    min-height: 36px;
}
.tab-btn:hover { background: var(--bg-tint); }
@media (min-width: 769px) {
    .tab-btn { font-size: var(--text-lg); padding: var(--space-5) var(--space-10); min-height: 42px; }
}
@media (max-width: 480px) {
    /* Tighten so the 7-tab bar fits a 390px viewport without crowding the edge;
       the 8th (Head-to-Head) tab still scrolls, with trailing room to hint it. */
    .tab-navigation { gap: 1px; padding-right: var(--space-3); scroll-padding-right: var(--space-3); }
    .tab-btn { padding: var(--space-2); font-size: var(--text-sm); min-height: 44px; }
}

/* ========================================
   CHART SECTIONS
   ======================================== */
.chart-section { display: none; }
.chart-section.active { display: block; }
.chart-container {
    margin: var(--space-2) 0; padding: var(--space-3);
    background: var(--bg-tint); border-radius: var(--border-radius);
    display: none; width: 100%; overflow: hidden;
}
.chart-container.active { display: block; }
.chart-container svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.chart-title {
    font-size: var(--text-md);
    color: var(--ink-1);
    padding: var(--space-3) var(--space-5);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--line-base);
}
@media (min-width: 769px) { .chart-title { font-size: var(--text-xl); padding: var(--space-4) var(--space-6); } }
@media (min-width: 1200px) { .chart-title { font-size: var(--text-2xl); } }
@media (max-width: 768px) {
    .chart-title { display: none; }
    .chart-container { padding: var(--space-1); margin: 0; }
}

/* Rank chart owns its scroll container — let it overflow its parent. */
#rankChart svg { max-width: none !important; }
#rankChart .scroll-container { -webkit-overflow-scrolling: touch; }
#rankChart foreignObject div { font-family: var(--font-family); }

/* SVG chart primitives (.axis/.grid/.athlete-*/.radar-*/spotlight) live in
   chart-theme.css — the single source. Don't re-add them here. */
.sel-dot { transition: background var(--transition-fast); }

/* ========================================
   TOOLTIP
   ======================================== */
.tooltip {
    position: absolute; text-align: left;
    padding: var(--space-5); font-size: var(--text-xs);
    background: rgba(0, 0, 0, 0.9); color: white;
    border-radius: var(--radius-md);
    pointer-events: none; opacity: 0; transition: opacity var(--transition-normal);
    z-index: 10000; max-width: 250px;
}
@media (min-width: 769px) {
    .tooltip { font-size: var(--text-md); padding: var(--space-6) var(--space-7); max-width: 320px; }
}
@media (max-width: 768px) {
    .tooltip { position: fixed !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); }
}

/* ========================================
   GENERIC BUTTON
   ======================================== */
.btn {
    padding: var(--space-3) var(--space-5);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
}
.btn:hover { background: var(--primary-dark); }
.btn.toggle-all { background: var(--success-color); }
/* Start-list → prediction CTA: shared .btn appearance, full-width block. */
.ap-sl-pred-cta { display: block; width: 100%; margin-top: 16px; font-weight: var(--font-weight-bold); }

/* ========================================
   INLINE FILTERS / CHIP STRIP / SEARCH
   ======================================== */
.inline-filters {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
    background: var(--bg-soft); border-radius: var(--radius-md);
}
@media (min-width: 769px) {
    .inline-filters { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
}

.filter-chip-row {
    display: flex; gap: 3px; align-items: center;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.filter-chip-row::-webkit-scrollbar { display: none; }

/* Filter/toggle chip — one geometry source (outline-quiet, dark-filled active). */
.chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--chip-py) var(--chip-px);
    border: 1px solid var(--line-base); border-radius: var(--chip-radius);
    background: var(--bg-surface); color: var(--ink-4);
    font-size: var(--chip-text); font-weight: 500;
    min-height: var(--chip-min-h); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.chip.active { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface); box-shadow: none; }
.chip:active { transform: scale(0.95); }

/* ⚙ Options button — collapses Quick-picks + Countries/Teams behind a panel.
   `.ctrl-pill` is the SHARED chart-control pill: any chart toggle (Field median,
   Pacing impact, …) uses it so every control reads as one component. Do not
   hand-roll button styling — add `.ctrl-pill` (+ `.on` when it's a toggle). */
.filter-options-btn, .ctrl-pill {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
    background: var(--bg-surface); cursor: pointer;
    font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
    color: var(--ink-3); -webkit-tap-highlight-color: transparent;
    transition: all var(--transition-fast);
}
.filter-options-btn .fo-icon { font-size: var(--text-md); line-height: 1; }
.filter-options-btn .fo-text { white-space: nowrap; }
.filter-options-btn .fo-summary {
    color: var(--primary-color); font-weight: var(--font-weight-bold);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-options-btn:hover, .ctrl-pill:hover { border-color: var(--ink-6); background: var(--bg-tint); }
.filter-options-btn.active {
    background: var(--primary-color); color: white; border-color: var(--primary-color);
}
.filter-options-btn.active .fo-summary { color: var(--surface); }
.filter-options-btn.has-selection:not(.active) { border-color: var(--primary-color); }

.filter-options-panel {
    display: none; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-3); padding: var(--space-4) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-lg);
}
.filter-options-panel.open { display: flex; }
.fop-section { display: flex; flex-direction: column; gap: var(--space-2); }
.fop-section-title {
    font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: var(--font-weight-bold); color: var(--ink-5);
}
.fop-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fop-chips.country-chip-row { display: flex; max-height: 120px; overflow-y: auto; }

/* .country-chip geometry from .chip; keeps nowrap + transition + hover, and a
   bold + ✓ active (the dark fill itself comes from .chip.active). */
.country-chip { white-space: nowrap; transition: all var(--transition-fast); }
.country-chip:hover { border-color: var(--ink-6); background: var(--bg-tint); }
.country-chip.active { font-weight: var(--font-weight-bold); }
.country-chip.active::before { content: '✓ '; font-weight: 900; }
/* flag / team-logo inside a filter chip (replaces the abbreviation text) */
.country-chip img, .country-chip .flag-img {
    width: 22px; height: 15px; object-fit: contain; border-radius: 2px; display: block;
}

/* Inline search (lives inside the Options panel) */
.fop-search-wrap { position: relative; }
.inline-search-input {
    width: 100%; padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    font-size: var(--text-md); background: var(--bg-surface);
    -webkit-appearance: none; box-sizing: border-box;
}
.inline-search-input:focus { outline: none; border-color: var(--primary-color); }
.inline-search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    background: var(--bg-surface); border: 1px solid var(--line-strong);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-3); max-height: 180px; overflow-y: auto; display: none;
}
.inline-search-results.open { display: block; }
@media (min-width: 769px) {
    .inline-search-input { font-size: var(--text-lg); padding: var(--space-4) var(--space-6); }
}

.sr-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); cursor: pointer;
    border-bottom: 1px solid var(--bg-tint); font-size: var(--text-sm);
}
.sr-row:active { background: var(--accent-subtle); }
.sr-rank { font-weight: var(--font-weight-bold); color: var(--primary-color); min-width: 22px; }
.sr-name { flex: 1; }
.sr-toggle { font-weight: var(--font-weight-bold); font-size: var(--text-md); }
.sr-toggle.on { color: var(--success-color); }
.sr-toggle.off { color: var(--ink-7); }
.sr-no-results { padding: var(--space-5); color: var(--ink-6); text-align: center; font-size: var(--text-sm); }
@media (min-width: 769px) {
    .sr-row { font-size: var(--text-md); padding: var(--space-5) var(--space-7); }
    .sr-rank { font-size: var(--text-md); min-width: 30px; }
}

/* Watch list slot — sits directly below the Options button, per chart. */
.filter-watch-slot { margin-top: var(--space-3); }
.filter-watch-slot:empty { display: none; }

/* Section filters / focus row (dev chart) */
.section-filters {
    margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); padding: var(--space-2) var(--space-3);
    background: var(--bg-tint); border-radius: var(--radius-sm);
}
@media (min-width: 769px) {
    .section-filters { font-size: var(--text-md); padding: var(--space-3) var(--space-6); gap: var(--space-4); }
}
.height-control-slider {
    margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--text-sm); padding: var(--space-2) var(--space-3);
    background: var(--bg-tint); border-radius: var(--radius-sm);
}
@media (min-width: 769px) { .height-control-slider { font-size: var(--text-md); padding: var(--space-3) var(--space-5); gap: var(--space-5); } }

.chart-controls-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2); background: var(--bg-tint);
    border-radius: var(--radius-sm); margin-bottom: var(--space-2);
}
.chart-controls-row .label { font-weight: var(--font-weight-semibold); color: var(--ink-4); white-space: nowrap; }
.spread-slider { flex: 1; min-width: 40px; height: 16px; margin: 0 var(--space-2); }
.spread-val { font-size: var(--text-micro); color: var(--ink-5); min-width: 28px; text-align: right; }
@media (min-width: 769px) {
    .chart-controls-row { font-size: var(--text-md); padding: var(--space-3) var(--space-5); gap: var(--space-4); }
    .spread-val { font-size: var(--text-base); min-width: 36px; }
}

/* Mobile collapsible controls (dev chart header reset button) */
.dev-header-row, .rank-header-row { position: relative; }
.dev-header-row .chart-header,
.rank-header-row .chart-header { display: block; }
.chart-reset {
    display: none;                     /* hidden until a segment is zoomed */
    position: absolute; left: 0; top: 4px;
    height: 26px; min-width: 30px; padding: 0 var(--space-2);
    background: var(--bg-hover); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs); font-weight: var(--font-weight-bold);
    color: var(--ink-4); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap; line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    z-index: 1;
}
.chart-reset.show {
    display: block; background: var(--ink-2); color: var(--bg-app); border-color: var(--ink-2);
}
.chart-reset.show:hover { background: var(--ink-1); border-color: var(--ink-1); }
@media (min-width: 769px) {
    .chart-reset { height: 30px; padding: 0 var(--space-5); font-size: var(--text-md); min-width: 40px; }
}

/* .x-section-rect styling lives in chart-theme.css (single source). */

/* Chart controls panel (mobile dev chart) */
.chart-controls-mobile { margin-bottom: var(--space-2); }
.chart-controls-panel {
    display: none; padding: var(--space-5);
    background: var(--bg-soft); border-radius: var(--radius-lg); margin-top: var(--space-2);
}
.chart-controls-panel.open { display: block; }

.bs-section-title {
    margin-bottom: var(--space-4);
}
.bs-slider-row { display: flex; align-items: center; gap: var(--space-5); }
.bs-slider-row input[type="range"] { flex: 1; min-height: 44px; cursor: pointer; }
.bs-slider-val {
    font-size: var(--text-md); font-weight: var(--font-weight-bold);
    color: var(--primary-color); min-width: 40px; text-align: right;
}

/* ========================================
   CHIP STRIP — global watched-athletes bar
   ======================================== */
.chip-strip {
    display: flex; align-items: center;
    gap: var(--space-2); padding: var(--space-2) var(--space-3);
    background: linear-gradient(135deg, var(--accent-subtle), var(--surface-tint));
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    min-height: 30px;
}
@media (min-width: 769px) {
    .chip-strip { padding: var(--space-3) var(--space-5); min-height: 36px; }
}
.cs-label {
    font-size: var(--text-micro);
    font-weight: var(--font-weight-bold); color: var(--ink-6);
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0;
}
@media (min-width: 769px) { .cs-label { font-size: var(--text-sm); } }
.cs-scroll {
    display: flex; gap: 3px; overflow-x: auto; flex: 1;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cs-scroll::-webkit-scrollbar { display: none; }
.cs-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    border: 1.5px solid var(--chip-color, var(--primary-color));
    border-radius: 12px;
    background: var(--bg-surface);
    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
    color: var(--chip-color, var(--ink-2));
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast);
    line-height: 1.4;
}
.cs-chip:hover { background: var(--bg-hover); }
.cs-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cs-x {
    font-size: var(--text-md); font-weight: var(--font-weight-normal);
    margin-left: 1px; color: var(--ink-6); cursor: pointer; line-height: 1;
}
.cs-x:hover { color: var(--danger); }
.cs-share {
    display: inline-flex; align-items: center; margin-left: var(--space-2);
    color: var(--ink-5); cursor: pointer; line-height: 1;
}
.cs-share:hover { color: var(--primary-color); }
.cs-clear {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--line-base); background: var(--bg-surface);
    color: var(--ink-6); font-size: var(--text-xs); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.cs-clear:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
@media (min-width: 769px) {
    .cs-chip { font-size: var(--text-md); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3); }
    .cs-x { font-size: var(--text-lg); }
    .cs-clear { width: 28px; height: 28px; font-size: var(--text-md); }
}

/* ========================================
   MODALS — source picker, dialog, athlete browser
   ======================================== */
.src-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: var(--space-8);
}
.src-modal {
    background: var(--bg-surface); border-radius: var(--radius-lg);
    width: min(420px, 100%); max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.src-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-7);
    border-bottom: 1px solid var(--line-base);
    background: var(--bg-hover);
}
.src-modal-title { font-weight: var(--font-weight-bold); font-size: var(--text-md); color: var(--ink-2); }
/* Clickable variant — the start-list modal uses this on its title so the
   user can jump from "who's racing" to "how has this race evolved". */
.src-modal-title-link {
    background: none; border: 0; padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer; color: var(--amber-fg);
    font-weight: var(--font-weight-bold); font-size: var(--text-md);
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.src-modal-title-link:hover,
.src-modal-title-link:focus-visible {
    background: var(--amber-bg); color: var(--amber-strong); outline: none;
}
.src-modal-sub { font-size: var(--text-sm); color: var(--ink-5); margin-left: var(--space-2); }
.src-modal-close {
    background: transparent; border: none;
    font-size: var(--text-xl); line-height: 1;
    color: var(--ink-5); cursor: pointer; padding: 0 var(--space-2);
}
.src-modal-close:hover { color: var(--ink-2); }
.src-modal-body {
    padding: var(--space-7);
    display: flex; flex-direction: column; gap: var(--space-5);
    overflow-y: auto;
}
.src-field { display: flex; flex-direction: column; gap: 3px; }
.src-field > span { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--ink-4); }
.src-field select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    background: var(--bg-surface); font-size: var(--text-md);
}
.src-field select:disabled { background: var(--bg-tint); color: var(--ink-6); }
.src-status { font-size: var(--text-sm); color: var(--ink-5); min-height: 14px; }
.src-modal-foot {
    padding: var(--space-5) var(--space-7); border-top: 1px solid var(--line-base);
    background: var(--bg-hover);
    display: flex; justify-content: flex-end;
}

/* Generic dialog (used by chart configuration etc.) */
.dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.dialog-content { background: var(--bg-surface); border-radius: var(--border-radius-lg); width: 90%; max-width: 800px; max-height: 90vh; overflow-y: auto; }
.dialog-header { padding: var(--space-12); border-bottom: 1px solid var(--line-base); display: flex; justify-content: space-between; align-items: center; }
.dialog-close { background: none; border: none; font-size: 30px; cursor: pointer; color: var(--ink-4); }
.dialog-body { padding: var(--space-12); }
.control-group { margin-bottom: var(--space-12); padding: var(--space-5); background: var(--bg-tint); border-radius: var(--border-radius); }
.control-group label { display: block; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); color: var(--ink-1); }

/* ========================================
   SUMMARY (relay & non-relay)
   ======================================== */
.summary-card {
    background: var(--bg-surface); border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-8); margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
}
.summary-card h3 {
    font-size: var(--text-md); font-weight: var(--font-weight-bold);
    color: var(--ink-1);
    margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-base);
    line-height: 1.3;
}
.summary-card h3:first-child { margin-top: 0; }

.summary-podium { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--space-4); }
.podium-card {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-surface); border-radius: var(--radius-md);
    border-left: 3px solid var(--line-strong);
    font-size: var(--text-base); line-height: 1.4;
}
.podium-1 { border-color: var(--gold); background: linear-gradient(to right, var(--warning-bg), var(--surface)); }
.podium-2 { border-color: var(--silver); }
.podium-3 { border-color: var(--bronze); }
.podium-medal { font-size: var(--text-md); margin-top: 1px; }
.podium-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.podium-row { display: flex; align-items: baseline; gap: var(--space-3); }
.podium-name { flex: 1; font-weight: var(--font-weight-semibold); }
.podium-time { font-weight: var(--font-weight-bold); color: var(--primary-color); font-size: var(--text-md); }
.podium-paces { font-size: var(--text-micro); color: var(--ink-5); }
@media (min-width: 769px) {
    .podium-card { font-size: var(--text-md); padding: var(--space-5) var(--space-7); gap: var(--space-5); }
    .podium-medal { font-size: var(--text-2xl); }
    .podium-time { font-size: var(--text-lg); }
}

.summary-share-row { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.summary-share-all {
    display: inline-flex; align-items: center; gap: 7px;
    padding: var(--space-4) var(--space-7); border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: transparent; color: var(--ink-3); cursor: pointer;
    font-size: var(--text-sm); font-weight: var(--font-weight-bold);
    transition: color .12s, border-color .12s, background .12s;
}
.summary-share-all:hover { color: var(--primary-color); border-color: var(--primary-color); background: var(--bg-surface); }
.summary-share-all svg { width: 14px; height: 14px; }

.share-btn {
    flex-shrink: 0; align-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: transparent; color: var(--ink-5); cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
.share-btn:hover { color: var(--primary-color); border-color: var(--primary-color); background: var(--bg-surface); }
.share-btn-sm { width: 24px; height: 24px; border-color: transparent; }
.seg-entry:hover .share-btn-sm { border-color: var(--line); }

.share-fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 900;
    display: inline-flex; align-items: center; gap: 7px;
    padding: var(--space-5) var(--space-8); border: 0; border-radius: var(--radius-pill);
    background: var(--primary-color); color: var(--on-accent); cursor: pointer;
    font-size: var(--text-md); font-weight: var(--font-weight-bold);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.share-fab:hover { filter: brightness(1.06); }
.share-fab[hidden] { display: none; }

.summary-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 3px; margin-bottom: var(--space-4);
}
.mini-stat { text-align: center; padding: var(--space-2) var(--space-1); background: var(--bg-surface); border-radius: var(--radius-md); }
.ms-val { display: block; font-weight: var(--font-weight-bold); font-size: var(--text-md); color: var(--primary-color); }
.ms-label { display: block; font-size: var(--text-micro); color: var(--ink-5); text-transform: uppercase; letter-spacing: 0.4px; }
.ms-sub { display: block; font-size: var(--text-micro); color: var(--ink-5); margin-top: 1px; }
@media (min-width: 769px) {
    .ms-val { font-size: var(--text-2xl); }
    .ms-label { font-size: var(--text-sm); letter-spacing: 0.6px; }
    .mini-stat { padding: var(--space-4) var(--space-1); }
}
@media (min-width: 1200px) {
    .ms-val { font-size: var(--text-3xl); }
}

.summary-segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
@media (max-width: 600px) {
    .summary-segments { grid-template-columns: 1fr; }
}
.seg-col { background: var(--bg-surface); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.seg-header {
    font-weight: var(--font-weight-bold); font-size: var(--text-sm); color: var(--ink-2);
    margin-bottom: 3px; padding-bottom: var(--space-1); border-bottom: 1px solid var(--bg-tint);
}
/* Gender group heading inside a fastest-sub-splits column (mixed relays) */
.seg-gender-label { font-weight: var(--font-weight-bold); color: var(--ink-4); font-size: var(--text-sm); line-height: 1.7; margin: var(--space-2) 0 1px; }
.seg-gender-label:first-of-type { margin-top: 1px; }
@media (min-width: 769px) {
    .seg-col { padding: var(--space-5); }
    .seg-header { font-size: var(--text-md); }
}

/* Single-row per-rank entry inside .seg-col */
.seg-entry {
    display: flex; flex-wrap: nowrap; align-items: baseline;
    gap: var(--space-2); padding: 3px 0;
    border-bottom: 1px solid var(--bg-tint);
    font-size: var(--text-sm);
}
.seg-entry .seg-rank { font-weight: var(--font-weight-bold); color: var(--primary-color); min-width: 14px; flex-shrink: 0; }
.seg-entry .seg-time { font-weight: var(--font-weight-semibold); flex-shrink: 0; }
.seg-entry .seg-pace { color: var(--ink-5); font-size: var(--text-micro); flex-shrink: 0; }
.seg-entry .seg-name {
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-weight: var(--font-weight-semibold);
}
@media (min-width: 769px) {
    .seg-entry { font-size: var(--text-md); gap: var(--space-2); padding: 3px 0; }
    .seg-entry .seg-rank { min-width: 18px; }
    .seg-entry .seg-pace { font-size: var(--text-sm); }
}
@media (min-width: 1200px) { .seg-entry { font-size: var(--text-lg); } }

.summary-section-title {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-sm);
}
@media (min-width: 769px) {
    .summary-section-title { font-size: var(--text-md); margin: var(--space-7) 0 var(--space-3); }
}

/* Relay member breakdown inside podium card */
.relay-members {
    display: flex; flex-direction: column; gap: 1px;
    margin-top: var(--space-2); padding: var(--space-2) 0 0 var(--space-3);
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.relay-member {
    display: flex; align-items: baseline; gap: var(--space-3);
    font-size: var(--text-sm); color: var(--ink-4); padding: 1px 0;
}
.relay-leg-num { font-weight: var(--font-weight-bold); color: var(--ink-5); min-width: 18px; font-size: var(--text-micro); text-transform: uppercase; }
.relay-gender { color: var(--ink-6); font-size: var(--text-xs); min-width: 10px; }
.relay-flag { font-size: var(--text-sm); line-height: 1; min-width: 14px; }
.relay-member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relay-member-time { font-size: var(--text-xs); color: var(--ink-5); }
@media (min-width: 769px) {
    .relay-member { font-size: var(--text-md); padding: var(--space-1) 0; gap: var(--space-4); }
    .relay-leg-num { font-size: var(--text-base); min-width: 22px; }
    .relay-gender { font-size: var(--text-md); min-width: 12px; }
    .relay-flag { font-size: var(--text-md); min-width: 16px; }
    .relay-member-time { font-size: var(--text-md); }
}

.summary-legs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
}
@media (min-width: 769px) { .summary-legs { gap: var(--space-3); } }

.summary-headbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-3); }
.summary-distances { font-size: var(--text-base); color: var(--ink-4); }
.summary-distances .dist-seg { white-space: nowrap; }
.summary-distances .dist-leg { color: var(--ink-6); font-weight: var(--font-weight-normal); }
.summary-distances .dist-km { color: var(--ink-3); font-weight: var(--font-weight-semibold); }
.summary-distances .dist-sep { color: var(--ink-6); margin: 0 var(--space-2); }
.summary-dist-note { color: var(--ink-6); font-weight: var(--font-weight-normal); }
.units-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; }
.units-btn { font-size: var(--text-sm); padding: var(--space-2) var(--space-5); background: var(--bg-surface); color: var(--ink-3); border: none; cursor: pointer; font-weight: var(--font-weight-semibold); }
.summary-conditions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); }
.cond-chip { font-size: var(--text-sm); background: var(--bg-tint); border: 1px solid var(--line-base); border-radius: var(--radius-xl); padding: 3px var(--space-4); color: var(--ink-3); }
.cond-chip small { color: var(--ink-6); }
.cond-chip.cond-duathlon { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-strong); }

/* ========================================
   SETTINGS
   ======================================== */
.settings-card { max-width: 560px; margin: 0 auto; padding: var(--space-5); }
.settings-section { margin-bottom: var(--space-8); }
.settings-section-title {
    letter-spacing: 0.08em;
    color: var(--ink-6);
    margin-bottom: var(--space-3); padding-left: var(--space-1);
}
.settings-appearance { display: flex; flex-direction: column; gap: var(--space-3); }
.settings-inline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.settings-inline .settings-label { font-size: var(--text-md); font-weight: 600; color: var(--ink-3); }
@media (min-width: 520px) {
    .settings-appearance { flex-direction: row; gap: var(--space-8); }
    .settings-appearance .settings-inline { flex: 1; }
}
.settings-presets {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
.settings-preset {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    background: var(--bg-surface); cursor: pointer; text-align: center;
    transition: all var(--transition-fast);
}
.settings-preset:hover { border-color: var(--line-strong); }
.settings-preset.active { border-color: var(--primary-color); background: var(--indigo-bg); }
.settings-preset-label { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--ink-3); }
.settings-preset-sub { font-size: var(--text-xs); color: var(--ink-6); }
.settings-preset.active .settings-preset-label { color: var(--primary-darker); }

.settings-row { margin-bottom: var(--space-4); }
.settings-row-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--space-2);
}
.settings-label { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--ink-3); }
.settings-value { font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--primary-color); }
.settings-num {
    width: 4.2em; text-align: right; font: inherit; color: var(--primary-color);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    padding: 1px var(--space-2); margin-right: var(--space-1); background: var(--bg-surface);
}
.settings-num:focus { outline: none; border-color: var(--primary-color); }
.settings-row-foot {
    display: flex; justify-content: space-between;
    font-size: var(--text-xs); color: var(--ink-6); margin-top: 3px;
}
/* ── Unified range slider (settings, prediction, replay — one look) ──
   The track is drawn by the runnable-track pseudo at a fixed 6px, so an input
   can keep a taller element height for a bigger touch target (e.g. the replay
   scrubber) without thickening the visible track. Accent = primary in both
   themes. Any per-component accent-color is a no-op once appearance is none. */
input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; margin: 0; background: transparent;
    cursor: pointer; outline: none; touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; border-radius: var(--radius-pill); background: var(--line-base);
}
input[type="range"]::-moz-range-track {
    height: 6px; border-radius: var(--radius-pill); background: var(--line-base);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -5px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--primary-color); border: 2px solid var(--bg-surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--primary-color); border: 2px solid var(--bg-surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28); cursor: pointer;
}
input[type="range"]:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.settings-save {
    width: 100%; padding: var(--space-6);
    font-size: var(--text-md); font-weight: var(--font-weight-semibold);
    margin-top: var(--space-4);
}
.settings-save.saved { background: var(--success); }
.settings-note { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--ink-6); text-align: center; }

/* ========================================
   TEAM RANKINGS
   ======================================== */
.team-rankings, .country-rankings { display: flex; flex-direction: column; gap: 3px; }
.team-division-group { margin-bottom: var(--space-5); }
.team-division-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-sm); font-weight: var(--font-weight-bold);
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4);
    padding-bottom: var(--space-1); border-bottom: 2px solid var(--indigo-border);
}
.team-row { background: var(--bg-surface); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.team-row.podium { background: linear-gradient(to right, var(--warning-bg), var(--surface)); }
/* Relay: a country's squads grouped under one heading */
.relay-country-group { background: var(--bg-surface); border-radius: var(--radius-sm); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); overflow: hidden; }
.relay-country-group .relay-country-header { font-weight: var(--font-weight-bold); font-size: var(--text-md); padding: var(--space-3) var(--space-5) 0; color: var(--ink-1); }
.relay-country-group .team-row { box-shadow: none; border-radius: 0; background: transparent; }
.relay-country-group .team-row + .team-row { border-top: 1px solid var(--bg-tint); }
.team-status-badge { font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--ink-4); letter-spacing: 0.03em; }
.team-summary { display: flex; align-items: center; padding: var(--space-4) var(--space-5); cursor: pointer; user-select: none; gap: var(--space-4); }
.team-summary:hover { background: var(--bg-hover); }
.team-rank { font-size: var(--text-md); font-weight: var(--font-weight-bold); min-width: 28px; color: var(--ink-2); }
.team-info { display: flex; flex-direction: column; min-width: 80px; }
.team-name { font-weight: var(--font-weight-bold); font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-2); }
.team-score { font-size: var(--text-sm); color: var(--ink-5); font-weight: var(--font-weight-medium); }
.team-averages { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-4); }
.avg { background: var(--bg-tint); padding: 1px var(--space-2); border-radius: 3px; white-space: nowrap; }
.avg.swim { border-left: 2px solid #0891b2; }
.avg.bike { border-left: 2px solid #059669; }
.avg.run  { border-left: 2px solid var(--seg-run); }
.scoring-positions { display: flex; gap: var(--space-1); flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.pos { padding: 1px var(--space-2); border-radius: 3px; font-size: var(--text-micro); font-weight: var(--font-weight-semibold); }
.pos.scoring, .pos.counting { color: white; }
.pos.displacer { background: var(--ink-7); color: var(--ink-4); }
.expand-icon { color: var(--ink-6); font-size: var(--text-xs); transition: transform var(--transition-normal); margin-left: var(--space-2); }
.team-row.expanded .expand-icon { transform: rotate(180deg); }
.team-details { display: none; padding: var(--space-3) var(--space-5) var(--space-5); background: var(--bg-soft); border-top: 1px solid var(--bg-tint); }
.team-row.expanded .team-details { display: block; }
@media (min-width: 769px) {
    .team-summary { padding: var(--space-5) var(--space-6); gap: var(--space-5); }
    .team-rank { font-size: var(--text-lg); min-width: 34px; }
    .team-name { font-size: var(--text-lg); gap: var(--space-3); }
    .team-score { font-size: var(--text-md); }
    .team-averages { font-size: var(--text-md); gap: var(--space-4); }
    .avg { padding: var(--space-1) var(--space-3); }
    .pos { font-size: var(--text-base); padding: 3px var(--space-4); }
    .expand-icon { font-size: var(--text-md); }
}
@media (min-width: 1200px) { .team-name { font-size: var(--text-xl); } }
@media (max-width: 768px) {
    .team-averages { display: none; }
    .team-summary { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
    .scoring-positions { width: 100%; justify-content: flex-start; }
}

.athletes-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.athletes-table th { text-align: left; padding: 3px var(--space-3); font-weight: var(--font-weight-semibold); color: var(--ink-5); border-bottom: 1px solid var(--line-base); font-size: var(--text-micro); text-transform: uppercase; }
.athletes-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--bg-tint); }
/* Cap the name column on phones so a long name wraps to ~2 lines instead of
   stealing width from the swim/bike/run pace columns (#6). overflow-wrap keeps
   even a long single token from forcing the cell wider. Lifted on desktop. */
.athletes-table .athlete-name-cell { font-weight: var(--font-weight-semibold); max-width: 8.5em; overflow-wrap: anywhere; line-height: 1.25; }
.athletes-table .time-cell { font-family: var(--font-family-mono); font-size: var(--text-xs); }
.athletes-table .pace-cell { font-size: var(--text-micro); color: var(--ink-5); }
.athletes-table tr.displacer { opacity: 0.7; background: var(--bg-tint); }
.divider-row td { font-size: var(--text-micro); font-weight: var(--font-weight-semibold); color: var(--ink-6); text-transform: uppercase; padding: var(--space-3); border-bottom: 1px dashed var(--line-base) !important; background: var(--bg-tint); }
.scoring-note { font-size: var(--text-xs); color: var(--ink-5); margin-top: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--warning-bg); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); }
.scoring-rules { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--bg-hover); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--ink-4); border: 1px solid var(--indigo-border); }
.scoring-rules strong { color: var(--primary-color); }
.country-info-box { background: var(--accent-subtle); border-left: 4px solid var(--primary-color); padding: var(--space-5); border-radius: var(--border-radius); margin-bottom: var(--space-5); }
.country-info-box h3 { margin: 0 0 var(--space-2); color: var(--primary-color); font-size: var(--text-md); }
.country-info-box p { margin: 0; color: var(--ink-4); font-size: var(--text-base); }
.other-athletes { margin-top: var(--space-3); font-size: var(--text-micro); color: var(--ink-5); font-style: italic; padding: var(--space-3); background: var(--bg-soft); border-radius: var(--radius-sm); }
@media (min-width: 769px) {
    .athletes-table { font-size: var(--text-md); }
    .athletes-table th { font-size: var(--text-base); padding: var(--space-3) var(--space-5); }
    .athletes-table td { padding: var(--space-3) var(--space-5); }
    .athletes-table .athlete-name-cell { max-width: none; }
    .athletes-table .time-cell { font-size: var(--text-md); }
    .athletes-table .pace-cell { font-size: var(--text-base); }
    .divider-row td { font-size: var(--text-base); padding: var(--space-4); }
    .scoring-note { font-size: var(--text-md); padding: var(--space-4) var(--space-7); }
    .scoring-rules { font-size: var(--text-md); padding: var(--space-5) var(--space-7); }
    .country-info-box h3 { font-size: var(--text-lg); }
    .country-info-box p { font-size: var(--text-md); }
    .other-athletes { font-size: var(--text-base); padding: var(--space-4); }
}

/* ========================================
   SPIDER TABLE (compact comparison)
   ======================================== */
.spider-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spider-table-container table { width: 100%; border-collapse: collapse; font-size: var(--text-base); min-width: 420px; }
.spider-table-container th { padding: var(--space-3); border: 1px solid var(--line-base); background: var(--bg-soft); text-align: center; font-size: var(--text-sm); position: sticky; top: 0; z-index: 5; }
.spider-table-container td { padding: var(--space-2) var(--space-3); border: 1px solid var(--line-base); text-align: center; }
.spider-table-container td:first-child, .spider-table-container th:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-surface); z-index: 2; }
.spider-table-container th:first-child { z-index: 10; background: var(--bg-soft); }

.spider-table-wrap {
    overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    background: var(--bg-surface); min-width: 0;
}
.spider-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 400px; }
.spider-tbl thead th {
    padding: var(--space-3) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--ink-4);
    background: var(--bg-hover); border-bottom: 2px solid var(--line-base); text-align: center;
    position: sticky; top: 0; z-index: 5; text-transform: uppercase; letter-spacing: 0.3px;
}
.spider-tbl thead th:first-child { text-align: left; z-index: 10; }
.spider-tbl tbody tr { border-bottom: 1px solid var(--bg-tint); }
.spider-tbl tbody tr:nth-child(even) { background: var(--bg-soft); }
.spider-tbl tbody tr:hover { background: var(--bg-hover); }
/* 44px minimum cell height on mobile so each row is a finger-friendly
   target (the per-row ✕ button and athlete cell both inherit this). */
.spider-tbl td { padding: var(--space-4) var(--space-2); vertical-align: middle; text-align: center; }
.spider-tbl td:first-child { text-align: left; position: sticky; left: 0; background: inherit; z-index: 2; min-width: 110px; }
.spider-tbl .ath-cell { display: flex; align-items: center; gap: var(--space-2); }
.spider-tbl .cdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.spider-tbl .aname { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.spider-tbl .acountry { font-size: var(--text-micro); color: var(--ink-5); }
/* White tile + hairline ring: most NCAA logos ship on a solid white background,
   so a bare <img> shows a white rectangle on coloured rows / dark mode. The tile
   normalises every logo (white-bg blends in, transparent gets a legible backing)
   into one cohesive badge. --logo-tile stays white in both themes (see tokens). */
.team-logo {
    height: 1.2em; width: auto; max-width: 2.5em; object-fit: contain; vertical-align: middle;
    background: var(--logo-tile); padding: 1.5px 2.5px; border-radius: 3px;
    box-shadow: 0 0 0 1px var(--logo-tile-ring);
}
/* Transfer athlete: one crest per school, sitting together with a hair of gap. */
.team-logos { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.spider-tbl .tval { font-weight: var(--font-weight-medium); }
.spider-tbl .rbadge {
    display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-lg);
    font-size: var(--text-micro); font-weight: var(--font-weight-bold); margin-top: 1px;
}
/* .rbadge tier colors live in chart-theme.css (single source). */
.spider-tbl .tpace { font-size: 8px; color: var(--accent-ink); margin-top: 1px; }
.spider-tbl .spider-remove-col { width: 24px; padding: 0; }
.spider-tbl .spider-remove-cell { padding: var(--space-1); width: 24px; }
.spider-remove-btn {
    background: transparent; border: none; padding: var(--space-1) var(--space-2); cursor: pointer;
    color: var(--ink-7); font-size: var(--text-sm); line-height: 1; border-radius: 3px;
    transition: background 0.12s, color 0.12s;
}
.spider-remove-btn:hover { background: var(--danger-bg); color: var(--danger); }
@media (min-width: 769px) {
    .spider-tbl { font-size: var(--text-md); }
    .spider-tbl thead th { font-size: var(--text-base); padding: var(--space-4); }
    .spider-tbl td { padding: var(--space-3); }
    .spider-tbl .aname { font-size: var(--text-md); max-width: 160px; }
    .spider-tbl .acountry { font-size: var(--text-base); }
    .spider-tbl .tval { font-size: var(--text-md); }
    .spider-tbl .rbadge { font-size: var(--text-sm); padding: 3px var(--space-4); }
    .spider-tbl .tpace { font-size: var(--text-sm); }
    .spider-tbl td:first-child { min-width: 140px; }
    .spider-tbl .spider-remove-col, .spider-tbl .spider-remove-cell { width: 32px; }
    .spider-remove-btn { font-size: var(--text-lg); padding: var(--space-3) var(--space-5); }
}
@media (min-width: 1200px) {
    .spider-tbl { font-size: var(--text-lg); }
    .spider-tbl .aname { font-size: var(--text-lg); }
}

/* ========================================
   CHECKPOINT NAV
   ======================================== */
.checkpoint-navigation { display: flex; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6); background: linear-gradient(135deg, var(--primary-color), var(--primary-darker)); border-radius: var(--radius-xl); margin-bottom: var(--space-5); }
.checkpoint-nav-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-surface); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.checkpoint-nav-btn.disabled { opacity: 0.3; cursor: not-allowed; }
.checkpoint-nav-btn .arrow { font-size: var(--text-lg); color: var(--primary-color); font-weight: bold; }
.checkpoint-info { text-align: center; color: white; min-width: 160px; }
.checkpoint-label { font-size: var(--text-xs); opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }
.checkpoint-name { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin: 3px 0; }
.checkpoint-indicator { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }
.checkpoint-indicator .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.checkpoint-indicator .dot.active { background: white; transform: scale(1.5); }
.checkpoint-indicator .dot.passed { background: rgba(255, 255, 255, 0.6); }
.position-changes { font-size: var(--text-xs); margin-top: var(--space-2); opacity: 0.9; font-style: italic; }
@media (min-width: 769px) {
    .checkpoint-label { font-size: var(--text-md); letter-spacing: 1.2px; }
    .checkpoint-name { font-size: var(--text-2xl); }
    .position-changes { font-size: var(--text-md); }
    .checkpoint-info { min-width: 200px; }
}
@media (max-width: 768px) {
    .checkpoint-navigation { padding: var(--space-5); gap: var(--space-4); }
    .checkpoint-name { font-size: var(--text-lg); }
    .checkpoint-info { min-width: 120px; }
}

/* ========================================
   SIDEBAR (legacy, mostly hidden)
   ======================================== */
.sidebar {
    position: fixed; left: calc(-1 * var(--sidebar-width)); top: 0;
    width: var(--sidebar-width); height: 100vh; background: var(--bg-surface);
    border-right: 1px solid var(--line-base); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: left var(--transition-normal); z-index: 1000; overflow-y: auto;
}
.sidebar.open { left: 0; }
.sidebar-toggle { display: none !important; }
.sidebar-header { padding: var(--space-12); border-bottom: 1px solid var(--line-base); background: var(--bg-tint); }
.sidebar-content { padding: var(--space-12); }

.athlete-list { max-height: 12.5rem; overflow-y: auto; border: 1px solid var(--line-base); border-radius: var(--border-radius); padding: var(--space-3); }
.country-list { max-height: 8rem; overflow-y: auto; border: 1px solid var(--line-base); border-radius: var(--border-radius); padding: var(--space-3); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

/* ========================================
   ATHLETE BROWSER (.ab-*)
   ======================================== */
.ab-results { display: flex; flex-direction: column; gap: 3px; max-height: 50vh; overflow-y: auto; }
.ab-section-title { font-size: var(--text-eyebrow); font-weight: var(--font-weight-bold); color: var(--ink-6); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--space-3) var(--space-2) var(--space-1); }
.ab-row {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base); border-radius: var(--radius-md);
    font-size: var(--text-md); text-align: left; cursor: pointer; min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.ab-row:active { background: var(--indigo-bg); }
.ab-name { flex: 1; font-weight: var(--font-weight-semibold); color: var(--ink-2); }
.ab-sub { font-size: var(--text-sm); color: var(--ink-5); }
.ab-badge {
    font-size: var(--text-micro); font-weight: var(--font-weight-bold);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-lg);
    letter-spacing: 0.4px; text-transform: uppercase;
}
.ab-badge.wt { background: var(--badge-blue-bg); color: var(--badge-blue-ink); }
.ab-badge.ncaa { background: var(--badge-amber-bg); color: var(--badge-amber-ink); }
.ab-races-head { font-size: var(--text-md); padding: var(--space-1) 0 var(--space-3); color: var(--ink-3); }
.ab-race {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-md); cursor: pointer; min-height: 44px; text-align: left;
    margin-bottom: 3px; font-size: var(--text-base);
}
.ab-race-date { color: var(--ink-5); }
.ab-race-title { font-weight: var(--font-weight-semibold); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-race-pos { font-weight: var(--font-weight-bold); color: var(--primary-color); }

.ab-star {
    font-size: var(--text-lg); color: var(--ink-7);
    padding: var(--space-2) var(--space-3); cursor: pointer; line-height: 1;
    flex-shrink: 0; border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.ab-star:hover { color: var(--warning-color); background: var(--bg-hover); }
.ab-star.on { color: #f59e0b; }
.ab-icon {
    flex-shrink: 0; min-width: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-lg);
    text-align: center;
}
.ab-icon img.team-logo { height: 1.3em; width: auto; max-width: 2.6em; object-fit: contain; }
.ab-yob { font-size: var(--text-sm); color: var(--ink-6); font-weight: var(--font-weight-normal); }

/* 2-line clamp for long race titles in the search-result + h2h lists,
   where horizontal real estate is tighter. Athlete-profile race rows are
   intentionally single-line (uniform row height across short and long
   titles); the JS sets a hover title for the full text. */
.ab-race-title,
.h2h-row-title,
.h2h-sr-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.3;
    word-break: break-word;
}

/* ========================================
   ATHLETE PROFILE (.ap-*)
   ======================================== */
#athleteProfileSection { display: none; }
#athleteProfileSection[style*="block"] { display: block !important; }
#athleteProfileContent { background: var(--bg-surface); border-radius: var(--radius-xl); padding: var(--space-4); }

.ap-header {
    display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-5);
    background: linear-gradient(135deg, var(--accent-subtle), var(--surface-tint));
    border-radius: var(--radius-xl); margin-bottom: var(--space-6);
}
.ap-photo {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover; border: 3px solid var(--bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0;
}
.ap-photo-blank {
    display: flex; align-items: center; justify-content: center;
    background: var(--line-base); font-size: 32px;
}
.ap-header-body { flex: 1; min-width: 0; }
.ap-name {
    font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--ink-2);
    margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-4);
    flex-wrap: wrap;
}
.ap-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ap-flag { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.ap-meta { font-size: var(--text-sm); color: var(--ink-5); margin-bottom: var(--space-4); }
.ap-meta span + span { margin-left: var(--space-1); }
.ap-ranks { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.ap-rank {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-surface); border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--line-base);
}
.ap-rank-val { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--primary-color); }
.ap-rank-lbl { font-size: var(--text-micro); color: var(--ink-6); text-transform: uppercase; letter-spacing: 0.5px; }
@media (min-width: 769px) {
    .ap-photo { width: 120px; height: 120px; }
    .ap-name { font-size: var(--text-3xl); }
    .ap-meta { font-size: var(--text-md); }
    .ap-rank-val { font-size: var(--text-2xl); }
    .ap-rank-lbl { font-size: var(--text-base); }
}

.ap-fav-btn {
    background: transparent; border: none; cursor: pointer;
    font-size: var(--text-2xl); color: var(--ink-7); padding: 0 var(--space-2);
    line-height: 1; flex-shrink: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.ap-fav-btn:hover { color: var(--warning-color); }
.ap-fav-btn:active { transform: scale(0.9); }
.ap-fav-btn.on { color: #f59e0b; text-shadow: 0 0 6px rgba(245, 158, 11, 0.25); }

.ap-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3); margin-bottom: var(--space-6);
}
.ap-stat {
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-2); text-align: center;
}
.ap-stat-val { display: block; font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--ink-3); }
.ap-stat-lbl { display: block; font-size: var(--text-micro); color: var(--ink-6); text-transform: uppercase; letter-spacing: 0.4px; margin-top: var(--space-1); }
@media (min-width: 769px) {
    .ap-stat-val { font-size: var(--text-3xl); }
    .ap-stat-lbl { font-size: var(--text-base); }
}

.ap-upcoming { display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ap-upcoming::-webkit-scrollbar { display: none; }
.ap-upcoming-card {
    flex: 0 0 auto; min-width: 180px; padding: var(--space-4) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base); border-radius: var(--radius-md);
}
.ap-up-date { font-size: var(--text-xs); color: var(--ink-5); }
.ap-up-title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--ink-2); margin: var(--space-1) 0; }
.ap-up-prog { font-size: var(--text-xs); color: var(--ink-6); }
.ap-up-startlist { font-size: var(--text-xs); color: var(--primary-color); font-weight: var(--font-weight-bold); margin-top: var(--space-2); }
.ap-upcoming-card.startlist-ready { border-color: var(--primary-color); cursor: pointer; }
.ap-upcoming-card.startlist-ready:hover { background: var(--bg-hover); }

.ap-pulse {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary-color);
    animation: ap-pulse-anim 1.2s infinite ease-in-out;
}
@keyframes ap-pulse-anim { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.ap-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding: 0 var(--space-2); }
.ap-legend-chip {
    font-size: var(--text-xs); padding: var(--space-1) var(--space-4);
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-lg); color: var(--ink-4);
    display: inline-flex; align-items: center; gap: var(--space-2);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.ap-legend-count { color: var(--ink-6); font-weight: var(--font-weight-bold); }

.ap-dist-filter { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
/* .ap-dist-btn geometry + active now come from .chip / .chip.active. */
.ap-dist-count { font-size: var(--text-micro); opacity: 0.7; }

/* Trend controls (chip-shaped colour-keyed readouts) */
.ap-trend-controls { display: inline-flex; gap: var(--space-5); align-items: center; margin-left: var(--space-4); flex-wrap: wrap; }
/* Unit toggle: a segmented control. Buttons share a single border ring so
   the individual chip radius collapses inside the group — but they keep
   the same min-height/font-size as standalone chips for visual rhythm. */
.ap-unit-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; min-height: var(--chip-min-h); }
.ap-unit-btn {
    background: var(--bg-surface); border: 0;
    padding: var(--chip-py) var(--chip-px);
    font-size: var(--chip-text); cursor: pointer; color: var(--ink-5);
    display: inline-flex; align-items: center; min-height: var(--chip-min-h);
}
.ap-unit-btn.on { background: var(--ink-2); color: var(--surface); }
.ap-unit-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.ap-readout { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.ap-readout-item {
    user-select: none; display: inline-flex; gap: var(--space-2); align-items: center;
    padding: var(--chip-py) var(--chip-px);
    border: 1px solid var(--line-base); border-radius: var(--chip-radius);
    cursor: pointer; transition: background 0.12s, border-color 0.12s, opacity 0.12s, box-shadow 0.12s;
    font-size: var(--chip-text); min-height: var(--chip-min-h);
}
.ap-readout-item:hover { background: var(--bg-tint); border-color: var(--line-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.ap-readout-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ap-readout-item.off { opacity: 0.4; }
.ap-readout-item.off:hover { opacity: 0.65; }
.ap-readout-item.off .ap-readout-val,
.ap-readout-item.off .ap-readout-lbl { text-decoration: line-through; }
.ap-readout-tgl { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid; align-self: center; }
.ap-readout-icon { font-size: var(--text-md); }
.ap-readout-val { font-weight: var(--font-weight-bold); color: var(--ink-3); }
.ap-readout-lbl { font-size: var(--text-sm); color: var(--ink-6); }
.ap-readout-unit { font-size: var(--text-xs); }
.ap-readout-count { font-size: var(--text-xs); color: var(--ink-6); }
.ap-readout-warn { font-size: var(--text-sm); }

.ap-readout-radio .ap-readout-tgl.radio { border-radius: 50%; }
.ap-readout-radio .ap-readout-item.off { opacity: 0.55; }
.ap-readout-radio .ap-readout-item.on { border-color: currentColor; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }

/* Best-of cards */
.ap-bests { display: flex; flex-direction: column; gap: var(--space-2); }
.ap-best-card {
    display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-4);
    align-items: center; padding: var(--space-4) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-md); cursor: pointer;
    text-align: left; min-height: 44px; min-width: 0;
}
.ap-best-card:hover, .ap-best-card:active { background: var(--bg-hover); }
.ap-best-tier {
    font-size: var(--text-micro); font-weight: var(--font-weight-bold);
    color: white; padding: 3px var(--space-4);
    border-radius: var(--radius-lg); text-transform: uppercase; letter-spacing: 0.5px;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-sizing: border-box;
}
.ap-best-pos { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--ink-4); min-width: 36px; }
.ap-best-pos.pod { color: var(--amber-fg); }
.ap-best-info { display: flex; flex-direction: column; min-width: 0; }
/* Match .ap-race-title sizing so the same race appears at the same font
   weight + size whether it's in the best-of-tier card or the race list. */
.ap-best-title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-best-sub { font-size: var(--text-xs); color: var(--ink-6); }
@media (min-width: 769px) {
    .ap-best-title { font-size: var(--text-md); }
}

/* Race list (groups + rows) */
.ap-race-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ap-race-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ap-race-group + .ap-race-group { margin-top: var(--space-5); }
.ap-race-group-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-2); margin-bottom: var(--space-1); min-width: 0; }
.ap-race-group-bar { width: 3px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.ap-race-group-label {
    font-size: var(--text-sm); font-weight: var(--font-weight-bold);
    text-transform: uppercase; letter-spacing: 0.4px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-race-group-count { font-size: var(--text-xs); color: var(--ink-6); font-weight: var(--font-weight-bold); margin-left: auto; }

.ap-race-row {
    display: flex; flex-direction: column;
    background: var(--bg-surface); border: 1px solid var(--line-base); border-radius: var(--radius-md);
    overflow: hidden;
}
.ap-race-row:hover, .ap-race-row:active { background: var(--bg-hover); border-color: var(--line-strong); }
.ap-race-strip { display: flex; align-items: stretch; }
.ap-race-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    background: transparent; border: 0; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent; font: inherit; color: inherit;
    line-height: 1.35;
}
.ap-race-toggle {
    flex-shrink: 0; padding: 0 var(--space-6);
    background: transparent; border: 0; border-left: 1px solid var(--line-base);
    font-size: var(--text-md); color: var(--ink-6); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--transition-fast), color var(--transition-fast);
}
.ap-race-toggle:hover { color: var(--ink-4); }
.ap-race-toggle[aria-expanded="true"] { color: var(--ink-3); transform: rotate(180deg); }
.ap-race-line1 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); min-width: 0; }
.ap-rd { color: var(--ink-5); }
.ap-pos {
    font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--ink-4);
    padding: 1px var(--space-2); border-radius: 3px; background: var(--bg-tint);
}
.ap-pos.pod { background: var(--badge-amber-bg); color: var(--badge-amber-ink); }
.ap-pos-dnf { font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--badge-red-ink); padding: 1px var(--space-2); background: var(--badge-red-bg); border-radius: 3px; }
.ap-of { font-size: var(--text-xs); color: var(--ink-6); }
.ap-rtot { margin-left: auto; font-weight: var(--font-weight-semibold); color: var(--ink-3); }
.ap-race-title {
    font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 769px) { .ap-race-title { font-size: var(--text-md); } }
.ap-relay-tog {
    margin-left: auto; font-size: 11px; font-weight: 400; color: var(--ink-6);
    display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
}
.ap-relay-tog input { margin: 0; }
.ap-rp { color: var(--ink-6); font-weight: var(--font-weight-normal); }
/* Race title reads differently by width: mobile shows only the venue (the group
   heading already names the tier), desktop shows the full cleaned title. */
.ap-rtt-place { display: none; }
@media (max-width: 768px) {
    .ap-rtt-full { display: none; }
    .ap-rtt-place { display: inline; }
}

.ap-race-segs {
    display: none; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--bg-tint);
}
.ap-race-row.expanded .ap-race-segs { display: flex; }
.ap-seg { display: inline-flex; align-items: baseline; gap: 3px; font-size: var(--text-xs); }
.ap-si { font-size: var(--text-sm); }
.ap-st { color: var(--ink-3); font-weight: var(--font-weight-semibold); }
.ap-sg { font-size: var(--text-micro); font-weight: var(--font-weight-bold); padding: 1px var(--space-2); border-radius: 3px; }
.ap-sg.good { background: var(--badge-green-bg); color: var(--badge-green-ink); }
.ap-sg.mid  { background: var(--badge-amber-bg); color: var(--badge-amber-ink); }
.ap-sg.low  { background: var(--badge-amber-bg); color: var(--badge-amber-ink); }
.ap-sg.verylow { background: var(--badge-red-bg); color: var(--badge-red-ink); }
.ap-sr { font-size: var(--text-micro); color: var(--ink-5); }
.ap-dash { color: var(--line-strong); }
@media (min-width: 769px) {
    .ap-st { font-size: var(--text-md); }
    .ap-sg { font-size: var(--text-sm); }
}

.ap-load-banner {
    padding: var(--space-4) var(--space-6); background: var(--indigo-bg); border: 1px solid var(--indigo-border);
    border-radius: var(--radius-md); font-size: var(--text-base); color: var(--indigo-fg); margin-bottom: var(--space-5);
}
.ap-load-banner.error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.ap-tooltip {
    position: absolute; z-index: 10000; background: rgba(15, 23, 42, 0.96);
    color: white; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    pointer-events: none; box-shadow: var(--shadow-3); max-width: 240px;
}
.ap-tt-date { font-size: var(--text-xs); color: var(--ink-6); }
.ap-tt-title { font-weight: var(--font-weight-bold); margin: var(--space-1) 0; }
.ap-tt-prog { font-size: var(--text-xs); color: var(--ink-7); }
.ap-tt-pos { font-size: var(--text-base); font-weight: var(--font-weight-bold); margin-top: var(--space-2); color: var(--warning-color); }
.ap-tt-hint { font-size: var(--text-micro); color: var(--ink-6); font-style: italic; margin-top: var(--space-2); }

.ap-toggle { margin-left: auto; font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--ink-5); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.ap-toggle input { margin: 0; }

@media (max-width: 480px) {
    .ap-best-tier { max-width: 100px; font-size: 8.5px; letter-spacing: 0.3px; padding: var(--space-1) var(--space-3); }
    .ap-race-group-label { font-size: var(--text-xs); letter-spacing: 0.3px; }
}

/* ========================================
   RACE HISTORY (.rh-*)
   ======================================== */
#raceHistorySection { display: none; }
#raceHistorySection[style*="block"] { display: block !important; }
#raceHistoryContent { background: var(--bg-surface); border-radius: var(--radius-xl); padding: var(--space-4); }

.rh-header {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--amber-bg), var(--surface));
    border-radius: var(--radius-xl); margin-bottom: var(--space-6);
}
.rh-title { font-size: var(--text-xl); font-weight: var(--font-weight-black); color: var(--ink-2); margin: 0 0 var(--space-1); }
.rh-sub { font-size: var(--text-base); color: var(--amber-fg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }
.rh-meta { font-size: var(--text-sm); color: var(--ink-5); }
.rh-divfilter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
/* .rh-divpill geometry + active now come from .chip / .chip.active. */
.rh-divpill { white-space: nowrap; }
/* Metric pills inside the trend section sit between title and chart. */
.rh-trendmodes { margin-top: 0; margin-bottom: var(--space-3); }
.rh-funnel-year {
    margin-left: auto; font-size: var(--text-sm); padding: var(--space-1) var(--space-4);
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--ink-2); cursor: pointer;
}
@media (min-width: 769px) {
    .rh-title { font-size: var(--text-3xl); }
    .rh-sub { font-size: var(--text-md); }
    .rh-meta { font-size: var(--text-md); }
}

/* Course-record cards. Discipline is signalled by:
   • a 3px left stripe in the discipline colour (.rh-record-card border-left)
   • the eyebrow label in the same colour (inline style on .rh-rec-label)
   No emoji — the time + colour + label do the work. */
.rh-records {
    /* 2×2 on phones so the four records don't stack into a tall column
       (punch-list #9); one row of four from tablet up. */
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-6);
}
.rh-record-card {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--line-base);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-lg);
}
.rh-rec-body { display: flex; flex-direction: column; min-width: 0; }
.rh-rec-time { font-size: var(--text-lg); font-weight: var(--font-weight-black); color: var(--ink-2); }
.rh-rec-label {
    font-size: var(--text-micro); color: var(--ink-6);
    text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px;
    font-weight: var(--font-weight-bold);
}
.rh-rec-who { font-size: var(--text-sm); color: var(--ink-4); margin-top: var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-rec-year { color: var(--ink-6); margin-left: var(--space-2); }
@media (min-width: 769px) {
    .rh-records { grid-template-columns: repeat(4, 1fr); }
    .rh-rec-time { font-size: var(--text-2xl); }
    .rh-rec-label { font-size: var(--text-sm); }
    .rh-rec-who { font-size: var(--text-md); }
}

/* Timeline drilldown card */
.rh-drilldown { margin-top: var(--space-4); }
.rh-dd-card {
    padding: var(--space-5) var(--space-6); background: var(--bg-surface);
    border: 1px solid var(--line-base); border-radius: var(--radius-lg);
}
.rh-dd-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); }
.rh-dd-year { font-size: var(--text-lg); font-weight: var(--font-weight-black); color: var(--danger-color); }
.rh-dd-venue { font-size: var(--text-base); color: var(--ink-4); }
.rh-dd-stats { display: flex; gap: var(--space-6); font-size: var(--text-sm); color: var(--ink-5); margin-bottom: var(--space-3); flex-wrap: wrap; }
.rh-dd-stats strong { color: var(--ink-2); }
/* The drilldown podium/splits reuse the .rh-yr-podium / .rh-yr-splits display
   so they always match the year-by-year expansion. */

/* .rh-load-btn = .btn + a smaller load pill (hover from .btn:hover). */
.rh-load-btn { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }

/* Legends — shared visual language with ap-legend */
.rh-legend {
    display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs); color: var(--ink-5);
}
.rh-leg { display: inline-flex; align-items: center; gap: var(--space-2); }
.rh-leg-line { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.rh-leg-line.rh-dashed {
    /* Dash colour comes from the swatch's own --lc (set inline) so each dashed
       legend entry matches its line — currentColor made every dashed swatch
       identical, so Top 10 vs Median couldn't be told apart. */
    background-image: linear-gradient(to right, var(--lc, currentColor) 50%, transparent 50%);
    background-size: 6px 100%;
    background-color: transparent;
}
.rh-leg-box { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.rh-dot-selected { stroke: var(--warning-color) !important; stroke-width: 2.5 !important; }

/* Per-discipline split rows (small multiples) */
.rh-split-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.rh-split-label {
    flex: 0 0 64px; font-size: var(--text-sm); font-weight: var(--font-weight-bold);
    color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.4px;
    display: flex; align-items: center; gap: var(--space-2);
}
.rh-split-chart { flex: 1; min-width: 0; background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: var(--space-1); }
.rh-split-chart svg { display: block; max-width: 100%; }
@media (min-width: 769px) { .rh-split-label { flex-basis: 80px; font-size: var(--text-md); } }

/* Podium-regulars rows */
.rh-podium-row {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: var(--space-5); align-items: center; padding: var(--space-3) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base); border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}
.rh-pr-medals { font-size: var(--text-md); line-height: 1; }
.rh-pr-name { font-size: var(--text-base); color: var(--ink-2); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-pr-years { font-size: var(--text-xs); color: var(--ink-6); }
@media (min-width: 769px) {
    .rh-pr-name { font-size: var(--text-md); }
    .rh-pr-years { font-size: var(--text-base); }
}

/* Repeat-starters heatmap — horizontally scrollable on phones */
.rh-grid-host {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg-surface); border-radius: var(--radius-md);
    padding: var(--space-2); border: 1px solid var(--line-soft);
}
.rh-grid { border-collapse: collapse; font-size: var(--text-sm); min-width: 100%; }
.rh-grid th {
    font-size: var(--text-micro); font-weight: var(--font-weight-bold); color: var(--ink-6);
    text-align: center; padding: var(--space-1) var(--space-2);
}
.rh-grid td { text-align: center; padding: 0; }
.rh-grid-name {
    text-align: left !important; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2) !important;
    color: var(--ink-3); font-weight: var(--font-weight-semibold); white-space: nowrap;
    position: sticky; left: 0; background: var(--bg-surface); z-index: 1;
    border-right: 1px solid var(--line-soft);
}
.rh-cell {
    width: 24px; height: 22px; font-size: var(--text-xs); font-weight: var(--font-weight-bold);
    color: var(--ink-2); cursor: pointer; border-radius: 2px;
}
.rh-cell:hover { outline: 2px solid var(--primary-color); }
.rh-cell-empty { cursor: default; background: transparent; }
.rh-cell-empty:hover { outline: none; }
/* Heat tiers — bg+ink pairs from tokens (see --heat-* in tokens.css) so both
   grids read in light AND dark; never inline hexes on cells. */
.rh-heat-gold   { background: var(--heat-gold-bg);   color: var(--heat-gold-ink); }
.rh-heat-silver { background: var(--heat-silver-bg); color: var(--heat-silver-ink); }
.rh-heat-bronze { background: var(--heat-bronze-bg); color: var(--heat-bronze-ink); }
.rh-heat-b2     { background: var(--heat-blue-2-bg); color: var(--heat-blue-2-ink); }
.rh-heat-b1     { background: var(--heat-blue-1-bg); color: var(--heat-blue-1-ink); }
.rh-heat-b0     { background: var(--heat-blue-0-bg); color: var(--heat-blue-0-ink); }
.rh-heat-pct0   { background: var(--heat-pct-0-bg);  color: var(--heat-pct-0-ink); }
.rh-heat-pct1   { background: var(--heat-pct-1-bg);  color: var(--heat-pct-1-ink); }
.rh-heat-pct2   { background: var(--heat-pct-2-bg);  color: var(--heat-pct-2-ink); }
.rh-heat-pct3   { background: var(--heat-pct-3-bg);  color: var(--heat-pct-3-ink); }
.rh-heat-pct4   { background: var(--heat-pct-4-bg);  color: var(--heat-pct-4-ink); }
.rh-heat-pct5   { background: var(--heat-pct-5-bg);  color: var(--heat-pct-5-ink); }
@media (min-width: 769px) {
    .rh-cell { width: 30px; height: 26px; font-size: var(--text-base); }
}

/* Year-by-year accordion */
.rh-year-row {
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-md); margin-bottom: var(--space-2); overflow: hidden;
}
/* Flex, not a fixed grid: the row carries a variable set of children (an
   optional distance tag, an optional major badge, one or two winner cells), and
   a fixed column count made the extras overflow — the chevron wrapped to a
   second row on the left and the stats got crushed into a sliver (punch-list
   #9). Flex lets the winner absorb the slack and pins the chevron on the right. */
.rh-yr-head {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rh-yr-head:hover { background: var(--bg-hover); }
.rh-yr-year { flex: none; font-size: var(--text-md); font-weight: var(--font-weight-black); color: var(--ink-2); min-width: 36px; }
.rh-yr-winner { flex: 1 1 0; min-width: 0; font-size: var(--text-sm); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-yr-stats { flex: none; margin-left: auto; font-size: var(--text-xs); color: var(--ink-6); white-space: nowrap; }
.rh-yr-chev { flex: none; font-size: var(--text-sm); color: var(--ink-6); }
.rh-yr-detail {
    display: none; padding: var(--space-4) var(--space-6) var(--space-6);
    border-top: 1px solid var(--bg-tint); background: var(--bg-soft);
}
.rh-year-row.expanded .rh-yr-detail { display: block; }
.rh-yr-podium { width: 100%; font-size: var(--text-base); border-collapse: collapse; margin-bottom: var(--space-3); }
.rh-yr-podium td { padding: 3px var(--space-2); }
/* NCAA: an extra winner cell for the champion team (flexes alongside the
   individual winner) + a team-standings table in the detail. */
.rh-yr-team { font-weight: var(--font-weight-semibold); color: var(--ink-3); }
.rh-yr-team-pts { color: var(--ink-6); font-weight: 400; font-variant-numeric: tabular-nums; }
.rh-yr-teams { width: 100%; font-size: var(--text-sm); border-collapse: collapse; margin-bottom: var(--space-3); }
.rh-yr-teams td { padding: 3px var(--space-2); }
.rh-yr-teams-cap { color: var(--ink-6); font-size: var(--text-xs); padding-bottom: var(--space-2); font-weight: var(--font-weight-semibold); }
.rh-yr-team-score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-3); }
.rh-yr-div-row td { padding-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-5); border-bottom: 1px solid var(--indigo-border); }
.rh-yr-div-tag { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-xs, 3px); background: var(--bg-hover); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--ink-5); }
.rh-yr-incomplete { color: var(--warning-color, #f97316); font-weight: 700; }
@media (max-width: 640px) {
    .rh-yr-team { display: none; }   /* shown in the expanded team-standings table */
}
.rh-yr-splits { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-3); }
.rh-yr-split {
    font-size: var(--text-sm); color: var(--ink-3);
    display: inline-flex; align-items: baseline; gap: var(--space-2);
}
.rh-yr-split-who { color: var(--ink-6); font-weight: var(--font-weight-normal); }
@media (min-width: 769px) {
    .rh-yr-winner { font-size: var(--text-md); }
    .rh-yr-stats { font-size: var(--text-base); }
}

/* ========================================
   HEAD-TO-HEAD (.h2h-*)
   ======================================== */
.h2h-page { padding: var(--space-4) var(--space-5) var(--space-16); display: flex; flex-direction: column; gap: var(--space-7); }

.h2h-duel {
    display: flex; align-items: stretch;
    background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-tint) 100%);
    border: 1px solid var(--line-base); border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4); position: relative;
}
.h2h-duelist { flex: 1; text-align: center; position: relative; padding: var(--space-2); }
.h2h-duelist.h2h-winner { background: rgba(79, 70, 229, 0.06); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.18); }
.h2h-crown {
    position: absolute; top: var(--space-2); right: var(--space-3);
    font-size: var(--text-micro); font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--primary-dark); background: rgba(79, 70, 229, 0.1);
    padding: 1px var(--space-3); border-radius: var(--radius-pill);
}
.h2h-flag { margin-bottom: var(--space-2); line-height: 0; }
.h2h-flag .flag-img { width: 34px; height: 25px; border-radius: 3px; vertical-align: 0; }
.h2h-duel-relay .h2h-flag .flag-img { width: 44px; height: 33px; }
.h2h-name { font-size: var(--text-md); font-weight: var(--font-weight-black); margin-bottom: var(--space-1); }
.h2h-country { font-size: var(--text-sm); color: var(--ink-5); margin-bottom: var(--space-2); }
.h2h-result { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.h2h-pos {
    display: inline-block; color: white; font-weight: var(--font-weight-black);
    font-size: var(--text-md); padding: var(--space-1) var(--space-4); border-radius: var(--radius-md);
}
.h2h-time { font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--ink-3); }
.h2h-vs-col { display: flex; align-items: center; justify-content: center; padding: 0 var(--space-5); flex-shrink: 0; }
.h2h-vs { font-size: var(--text-2xl); font-weight: var(--font-weight-black); color: var(--ink-7); letter-spacing: 2px; }
@media (min-width: 769px) {
    .h2h-flag { font-size: 36px; }
    .h2h-name { font-size: var(--text-lg); }
    .h2h-country { font-size: var(--text-md); }
    .h2h-pos { font-size: var(--text-lg); padding: 3px var(--space-5); }
    .h2h-time { font-size: var(--text-lg); }
    .h2h-vs { font-size: var(--text-3xl); }
}
@media (max-width: 480px) {
    .h2h-duel { flex-direction: column; gap: var(--space-4); }
    .h2h-vs-col { padding: var(--space-2) 0; }
    .h2h-vs { font-size: var(--text-lg); }
    .h2h-name { font-size: var(--text-md); }
}

.h2h-narrative {
    background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-7);
    font-size: var(--text-md); color: var(--warning); line-height: 1.6;
}
.h2h-narr-line { margin: 3px 0; }
@media (min-width: 769px) { .h2h-narrative { font-size: var(--text-md); padding: var(--space-7) var(--space-8); } }

.h2h-card { background: var(--bg-surface); border: 1px solid var(--line-base); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.h2h-card-title {
    font-size: var(--text-eyebrow); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-4);
    padding: var(--space-4) var(--space-6) var(--space-3);
    border-bottom: 1px solid var(--line-base); line-height: 1.3;
}
.h2h-card-body { padding: var(--space-5) var(--space-6) var(--space-6); }
@media (min-width: 769px) {
    .h2h-card-title { padding: var(--space-4) var(--space-8) var(--space-3); }
    .h2h-card-body { padding: var(--space-6) var(--space-8) var(--space-7); }
}

.h2h-pos-toggle { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
/* .h2h-toggle-btn geometry from .chip; accent .on active lives at the toggle group. */

.h2h-pace-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.h2h-pace-tbl th { font-size: var(--text-base); font-weight: var(--font-weight-bold); padding: var(--space-3) var(--space-2); text-align: center; }
.h2h-pace-tbl td { padding: var(--space-2); text-align: center; }
.h2h-pace-tbl tr:nth-child(even) { background: var(--bg-hover); }
.h2h-pace-seg { text-align: left !important; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.h2h-pace-val { font-size: var(--text-sm); color: var(--ink-5); }
.h2h-win { font-weight: var(--font-weight-bold); }
@media (min-width: 769px) {
    .h2h-pace-tbl { font-size: var(--text-md); }
    .h2h-pace-tbl th { font-size: var(--text-md); padding: var(--space-3); }
    .h2h-pace-tbl td { padding: var(--space-3); }
    .h2h-pace-val { font-size: var(--text-base); }
}

.h2h-scoreboard { display: flex; justify-content: center; align-items: center; gap: var(--space-10); padding: var(--space-8) 0 var(--space-6); }
.h2h-score-side { text-align: center; }
.h2h-score-num { font-size: var(--text-display); font-weight: var(--font-weight-black); line-height: 1; }
.h2h-score-lbl { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); margin-top: var(--space-1); }
.h2h-score-center { text-align: center; }
.h2h-score-dash { font-size: var(--text-2xl); font-weight: 300; color: var(--ink-7); }
.h2h-score-draws { font-size: var(--text-sm); color: var(--ink-6); }
.h2h-score-total { font-size: var(--text-sm); color: var(--ink-5); margin-top: var(--space-2); font-weight: var(--font-weight-semibold); }
.h2h-streak { text-align: center; font-size: var(--text-md); padding: var(--space-3) 0 var(--space-5); color: var(--ink-4); }
@media (min-width: 769px) {
    .h2h-score-num { font-size: 48px; }
    .h2h-score-lbl { font-size: var(--text-md); }
    .h2h-score-dash { font-size: var(--text-3xl); }
    .h2h-score-draws, .h2h-score-total { font-size: var(--text-md); }
    .h2h-streak { font-size: var(--text-md); }
}
@media (max-width: 480px) {
    .h2h-scoreboard { gap: var(--space-7); }
    .h2h-score-num { font-size: 32px; }
}

.h2h-shared-list { max-height: 400px; overflow-y: auto; }
.h2h-shared-row-wrap { border-bottom: 1px solid var(--bg-tint); }
.h2h-shared-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-2); font-size: var(--text-base); }
.h2h-shared-row.h2h-clickable { cursor: pointer; }
.h2h-shared-row.h2h-clickable:hover { background: var(--bg-hover); }
.h2h-sr-winner { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: var(--text-xs); font-weight: var(--font-weight-black); flex-shrink: 0; }
.h2h-sr-date { color: var(--ink-6); min-width: 70px; flex-shrink: 0; }
.h2h-sr-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-4); }
.h2h-sr-title small { color: var(--ink-6); }
.h2h-sr-result { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; }
.h2h-sr-gap { font-size: var(--text-xs); }
.h2h-sr-expand { color: var(--ink-6); font-size: var(--text-md); flex-shrink: 0; width: 20px; text-align: center; }
@media (max-width: 480px) {
    .h2h-shared-row { font-size: var(--text-sm); }
    .h2h-sr-date { min-width: 56px; }
}

.h2h-sr-detail { display: none; padding: var(--space-4) var(--space-6) var(--space-6); background: var(--bg-soft); border-top: 1px solid var(--bg-tint); }
.h2h-shared-row-wrap.expanded .h2h-sr-detail { display: block; }

.h2h-sr-splits-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.h2h-sr-splits-tbl th { font-size: var(--text-sm); font-weight: var(--font-weight-bold); padding: var(--space-2); text-align: center; }
.h2h-sr-splits-tbl td { padding: 3px var(--space-2); text-align: center; }
.h2h-srd-seg { text-align: left !important; font-weight: var(--font-weight-semibold); }
.h2h-srd-total td { border-top: 1px solid var(--line-base); font-weight: var(--font-weight-bold); }

.h2h-load-race-btn {
    margin-top: var(--space-4); padding: var(--space-2) var(--space-7);
    font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
    border: 1px solid var(--accent); border-radius: var(--radius-md);
    background: var(--accent-subtle); color: var(--accent-ink); cursor: pointer;
}
.h2h-load-race-btn:hover { background: var(--accent); color: var(--on-accent); }

.h2h-career-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-md); text-align: center; }
.h2h-career-tbl th { font-size: var(--text-base); font-weight: var(--font-weight-bold); padding: var(--space-3); }
.h2h-career-tbl td { padding: var(--space-2) var(--space-3); }
.h2h-stat-label { color: var(--ink-5); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }
.h2h-better { font-weight: var(--font-weight-black); }

.h2h-strengths-title { font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--ink-4); margin: var(--space-7) 0 var(--space-3); }
.h2h-strengths { display: flex; flex-direction: column; gap: var(--space-3); }
.h2h-strength-row { display: flex; align-items: center; gap: var(--space-4); }
.h2h-str-label { min-width: 70px; font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--ink-4); }
.h2h-str-bar { flex: 1; height: 14px; display: flex; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-tint); }
.h2h-str-fill-a, .h2h-str-fill-b { height: 100%; }
.h2h-str-fill-a { border-radius: var(--radius-sm) 0 0 var(--radius-sm); opacity: 0.7; }
.h2h-str-fill-b { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; opacity: 0.7; }
.h2h-str-nums { min-width: 36px; font-size: var(--text-base); font-weight: var(--font-weight-bold); text-align: center; }

.h2h-margin-host { margin: var(--space-4) 0; }

.h2h-history-divider {
    text-align: center;
    font-size: var(--text-sm); letter-spacing: 0.12em;
    color: var(--ink-6); font-weight: var(--font-weight-bold);
    margin: var(--space-10) 0 var(--space-2);
    border-top: 1px solid var(--line-base);
    padding-top: var(--space-5);
}

#h2hRivalry .h2h-card-body,
#h2hEdge .h2h-card-body { padding: var(--space-4) var(--space-5) var(--space-5); }

/* Dumbbell list (compact race-by-race chronology with expandable splits) */
.h2h-dumbbell { display: flex; flex-direction: column; gap: var(--space-2); }
.h2h-row-wrap {
    border: 1px solid var(--line-base); border-radius: var(--radius-lg);
    background: var(--bg-surface); overflow: hidden;
}
.h2h-row-wrap.has-detail .h2h-row-head { cursor: pointer; }
.h2h-row-wrap.has-detail:hover .h2h-row-head { background: var(--bg-hover); }

.h2h-row-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1.6fr) auto auto;
    align-items: center;
    gap: var(--space-5); padding: var(--space-5) var(--space-6);
}
.h2h-row-info { display: flex; flex-direction: column; min-width: 0; }
.h2h-row-date { font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--ink-4); }
.h2h-row-title { font-size: var(--text-base); color: var(--ink-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-row-mid { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.h2h-row-dumbbell { flex: 1; min-width: 60px; height: 16px; display: block; }
.h2h-row-pos { font-size: var(--text-sm); white-space: nowrap; }
.h2h-row-pos-vs { color: var(--ink-7); margin: 0 var(--space-1); }
.h2h-row-gap { font-size: var(--text-sm); font-weight: var(--font-weight-bold); min-width: 48px; text-align: right; }
.h2h-row-chev { color: var(--ink-6); font-size: var(--text-sm); width: 14px; text-align: center; transition: transform var(--transition-fast); }
.h2h-row-chev.empty { visibility: hidden; }

.h2h-row-detail {
    display: none; padding: var(--space-2) var(--space-6) var(--space-6);
    border-top: 1px solid var(--bg-tint); background: var(--bg-soft);
}
.h2h-row-wrap.expanded .h2h-row-detail { display: block; }

@media (max-width: 540px) {
    .h2h-row-head {
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "info pos gap" "mid mid chev";
        row-gap: var(--space-2);
    }
    .h2h-row-info { grid-area: info; }
    .h2h-row-pos  { grid-area: pos; }
    .h2h-row-gap  { grid-area: gap; }
    .h2h-row-mid  { grid-area: mid; }
    .h2h-row-chev { grid-area: chev; }
}

.h2h-never-met, .h2h-empty { text-align: center; padding: var(--space-16) var(--space-10); }
.h2h-never-icon, .h2h-empty-icon { font-size: 40px; margin-bottom: var(--space-4); }
.h2h-empty h2 { font-size: var(--text-xl); color: var(--ink-3); margin: var(--space-4) 0; }
.h2h-empty p { font-size: var(--text-md); color: var(--ink-5); margin: var(--space-2) 0; }
.h2h-hint { font-size: var(--text-base); color: var(--ink-6); font-style: italic; }
.h2h-muted { color: var(--ink-6); font-size: var(--text-base); padding: var(--space-4) 0; text-align: center; }
.h2h-loading { color: var(--ink-5); font-size: var(--text-md); padding: var(--space-10); text-align: center; }
.h2h-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: h2h-pulse-k 1s ease infinite; }
@keyframes h2h-pulse-k { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* Relay duel header */
.h2h-duel-relay .h2h-duelist { text-align: center; }
.h2h-roster {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5);
    font-size: var(--text-sm); margin-top: var(--space-3); justify-content: center;
    opacity: 0.85;
}
.h2h-rm { white-space: nowrap; }
.h2h-rm-leg {
    display: inline-block; font-weight: var(--font-weight-bold); font-size: var(--text-micro);
    background: var(--surface-tint); border-radius: 3px;
    padding: 0 3px; margin-right: var(--space-1); letter-spacing: 0.04em;
}

.h2h-relay-details { margin-top: var(--space-6); }
.h2h-leg-panel {
    border: 1px solid var(--line-base); border-radius: var(--radius-lg);
    margin-bottom: var(--space-3); overflow: hidden;
}
.h2h-leg-head {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-6); cursor: pointer;
    background: var(--bg-hover); transition: background var(--transition-fast);
}
.h2h-leg-head:hover { background: var(--bg-tint); }
.h2h-leg-label { font-weight: var(--font-weight-bold); font-size: var(--text-md); min-width: 80px; }
.h2h-leg-athletes { flex: 1; font-size: var(--text-base); }
.h2h-leg-vs-txt { color: var(--ink-6); margin: 0 var(--space-2); font-size: var(--text-xs); }
.h2h-leg-delta { font-weight: var(--font-weight-bold); font-size: var(--text-base); }
.h2h-leg-chev { font-size: var(--text-md); color: var(--ink-6); transition: transform 0.2s; user-select: none; }
.h2h-leg-body { display: none; padding: var(--space-4) var(--space-6) var(--space-6); }
.h2h-leg-panel.expanded .h2h-leg-body { display: block; }

.h2h-relay-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
@media (max-width: 480px) { .h2h-relay-rosters { grid-template-columns: 1fr; } }
.h2h-relay-roster { padding: var(--space-4) var(--space-5); background: var(--bg-hover); border-radius: var(--radius-md); }
.h2h-relay-roster-title { font-weight: var(--font-weight-bold); font-size: var(--text-md); margin-bottom: var(--space-2); }
.h2h-relay-member { font-size: var(--text-base); padding: var(--space-1) 0; }
.h2h-relay-leg-num {
    display: inline-block; font-weight: var(--font-weight-bold); font-size: var(--text-micro);
    background: var(--surface-tint); border-radius: 3px;
    padding: 0 var(--space-2); margin-right: var(--space-2); letter-spacing: 0.04em;
}
.h2h-relay-gender { opacity: 0.6; }

.h2h-history-footer {
    display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
    margin-top: var(--space-6); padding-top: var(--space-5);
    border-top: 1px solid var(--bg-tint);
}
.h2h-more-btn {
    padding: var(--space-3) var(--space-6); font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-4); background: var(--bg-hover);
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    cursor: pointer; transition: all var(--transition-fast);
}
.h2h-more-btn:hover:not(:disabled) { background: var(--bg-tint); border-color: var(--line-strong); }
.h2h-more-btn:disabled { opacity: 0.55; cursor: default; }
.h2h-earlier-btn { font-style: italic; }
.h2h-history-summary { margin-left: auto; font-size: var(--text-sm); color: var(--ink-6); }
.h2h-search-status { font-size: var(--text-sm); color: var(--ink-5); padding: var(--space-2) 0 var(--space-4); }

/* Cross-source link suggestions inside the Shared-Races section. Shown
   per athlete when a same-name candidate exists in the other registry
   but no confirmed link is on file yet. */
.h2h-link-suggestions {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.h2h-link-suggest {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--indigo-bg);
    border: 1px dashed var(--indigo-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm); color: var(--ink-3);
}
.h2h-link-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.h2h-link-text { flex: 1; min-width: 0; }
.h2h-link-text strong { color: var(--ink-2); }
.h2h-link-text em { font-style: normal; font-weight: var(--font-weight-semibold); color: var(--indigo-fg); }
/* .h2h-link-confirm = .btn + compact inline pill; hover unified to accent-dark. */
.h2h-link-confirm {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    transition: background var(--transition-fast);
}
.h2h-link-confirm:hover:not(:disabled) { background: var(--primary-dark); }
.h2h-link-confirm:disabled { opacity: 0.6; cursor: default; }
@media (min-width: 769px) {
    .h2h-link-suggest { font-size: var(--text-md); padding: var(--space-4) var(--space-6); }
    .h2h-link-confirm { font-size: var(--text-md); padding: var(--space-3) var(--space-6); }
}
@media (min-width: 769px) {
    .h2h-history-summary { font-size: var(--text-base); }
    .h2h-search-status { font-size: var(--text-base); }
}

/* ========================================
   NCAA → WT CROSSOVER (.xo-*)
   ======================================== */
.xo-banner {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
    font-size: var(--text-base); margin-bottom: var(--space-5); line-height: 1.5;
}
.xo-suggested {
    background: var(--warning-bg);
    border: 1px solid var(--warning); color: var(--warning);
}
.xo-confirmed {
    background: var(--success-bg);
    border: 1px solid var(--success); color: var(--success);
}
.xo-icon { font-size: var(--text-xl); flex-shrink: 0; }
.xo-team { color: inherit; opacity: 0.7; }
.xo-yob { font-size: var(--text-sm); color: inherit; opacity: 0.6; }
.xo-banner .team-logo { height: 16px; vertical-align: text-bottom; }
@media (min-width: 769px) { .xo-banner { font-size: var(--text-md); padding: var(--space-6) var(--space-8); } }

.xo-stats { display: flex; gap: var(--space-7); margin-bottom: var(--space-4); flex-wrap: wrap; }
.xo-stat { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-4); }
.xo-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.xo-stat-val { font-weight: var(--font-weight-bold); font-size: var(--text-base); }
.xo-stat-lbl { color: var(--ink-6); }
@media (min-width: 769px) {
    .xo-stat { font-size: var(--text-md); }
    .xo-stat-val { font-size: var(--text-lg); }
}

.xo-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.xo-btn {
    padding: var(--space-4) var(--space-8); border-radius: var(--radius-lg);
    border: 1px solid; font-size: var(--text-base); font-weight: var(--font-weight-semibold);
    cursor: pointer; min-height: 40px;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.xo-confirm { background: #059669; color: white; border-color: #059669; }
.xo-confirm:hover { background: #047857; }
.xo-confirm:active { background: #065f46; }
.xo-dismiss { background: var(--bg-surface); color: var(--ink-5); border-color: var(--line-strong); }
.xo-dismiss:hover { background: var(--bg-hover); border-color: var(--ink-6); }
.xo-unlink {
    background: var(--bg-surface); color: var(--ink-6); border-color: var(--line-base);
    font-size: var(--text-sm); padding: var(--space-2) var(--space-6); min-height: 32px;
}
.xo-unlink:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
@media (min-width: 769px) { .xo-btn { font-size: var(--text-md); padding: var(--space-5) var(--space-10); } }

.xo-legend {
    display: flex; gap: var(--space-7); align-items: center;
    padding: var(--space-3) var(--space-4); font-size: var(--text-xs);
    color: var(--ink-5); flex-wrap: wrap;
}
.xo-leg { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); }
.xo-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.xo-leg-note { margin-left: auto; font-weight: var(--font-weight-normal); font-style: italic; color: var(--ink-6); }
@media (min-width: 769px) { .xo-legend { font-size: var(--text-base); } }

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .athlete-path, .athlete-circle { transition: none !important; }
}

/* ========================================
   T100 STANDINGS (.t100-*)
   ----------------------------------------
   Purple/violet season-story theme. The page is visualization-first:
   the only table-shaped element is the calendar. Everything else is a
   d3 chart or a click-to-drill card.
   ======================================== */
.t100-header {
    background: linear-gradient(135deg, var(--accent-subtle), var(--surface-tint));
}
.t100-header .rh-title { color: var(--ink-2); }
.t100-header .rh-sub   { color: var(--badge-violet-ink); }
.t100-header .rh-meta  { color: var(--badge-violet-ink); font-weight: var(--font-weight-semibold); }

/* ── Lead-story narrative ── */
.t100-narrative {
    background: var(--accent-subtle); border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-7);
    margin-bottom: var(--space-5);
    font-size: var(--text-md); color: var(--primary-dark); line-height: 1.5;
}
.t100-narrative.t100-final {
    background: linear-gradient(135deg, var(--warning-bg), var(--accent-subtle));
    border-color: var(--amber-border);
}
.t100-narr-line { margin: 3px 0; display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.t100-narr-tag {
    display: inline-block; font-weight: var(--font-weight-bold);
    background: #7c3aed; color: white; border-radius: var(--radius-sm);
    padding: 1px var(--space-3); font-size: var(--text-sm);
}

/* ── Gender toggle ── */
.t100-gender-toggle {
    display: inline-flex; gap: 0;
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    overflow: hidden; margin-bottom: var(--space-5);
}
.t100-gt-btn {
    padding: var(--space-3) var(--space-7);
    border: 0; background: var(--bg-surface);
    font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
    color: var(--ink-4); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.t100-gt-btn:hover { background: var(--bg-hover); }
.t100-gt-btn.on { background: var(--primary-color); color: var(--on-accent); border-color: var(--primary-color); }

/* ── Hero chart hover / selection states ── */
.t100-athlete-line:hover path[stroke]:not([stroke="transparent"]) { stroke-width: 3.5; }
.t100-athlete-line:hover text { font-weight: 800; }
.t100-others path { transition: opacity var(--transition-fast); }

/* ── Top-3 podium strip (idle state of the drill area) ── */
.t100-podium-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3); margin-top: var(--space-4);
}
.t100-podium-card {
    background: var(--bg-surface);
    border: 1px solid var(--line-base); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.t100-podium-card:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.t100-podium-card:active { transform: scale(0.98); }
.t100-pos-1 { border-left: 3px solid var(--gold);   background: linear-gradient(to right, var(--warning-bg), var(--bg-surface)); }
.t100-pos-2 { border-left: 3px solid var(--silver); }
.t100-pos-3 { border-left: 3px solid var(--bronze); }
.t100-pp-medal { font-size: var(--text-xl); }
.t100-pp-name { font-weight: var(--font-weight-semibold); color: var(--ink-2); margin-top: var(--space-1); font-size: var(--text-md); }
.t100-pp-pts {
    font-family: var(--font-family-mono);
    font-size: var(--text-sm); color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}
.t100-hint {
    margin-top: var(--space-4); text-align: center;
    font-size: var(--text-sm); color: var(--ink-6); font-style: italic;
}
@media (max-width: 540px) {
    .t100-podium-strip { grid-template-columns: 1fr; }
}

/* ── Athlete drill-down panel ── */
.t100-drill { margin-top: var(--space-5); }
.t100-drill-card {
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-lg); overflow: hidden;
}
.t100-drill-head {
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-5) var(--space-7);
    background: linear-gradient(135deg, var(--accent-subtle), var(--surface-tint));
    border-bottom: 1px solid var(--line-base);
    position: relative;
}
.t100-drill-close {
    position: absolute; top: var(--space-3); right: var(--space-4);
    background: transparent; border: 0; font-size: var(--text-xl);
    color: var(--ink-5); cursor: pointer; line-height: 1;
    padding: var(--space-2);
}
.t100-drill-close:hover { color: var(--ink-2); }
.t100-drill-rank {
    font-family: var(--font-family-mono);
    font-size: var(--text-2xl); font-weight: var(--font-weight-black);
    color: var(--badge-violet-ink);
}
.t100-drill-info { flex: 1; min-width: 0; }
.t100-drill-name {
    font-size: var(--text-lg); font-weight: var(--font-weight-bold);
    color: var(--ink-2); margin-bottom: var(--space-1);
}
.t100-drill-sub { font-size: var(--text-sm); color: var(--ink-5); }
.t100-drill-sub strong { color: var(--primary-color); }

.t100-drill-races {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--space-3); padding: var(--space-5) var(--space-6);
}
.t100-drill-race {
    background: var(--bg-surface);
    border: 1px solid var(--line-base); border-left: 3px solid var(--ink-6);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    cursor: pointer; text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    display: flex; flex-direction: column; gap: var(--space-1);
    font: inherit; color: inherit;
}
.t100-drill-race:hover { background: var(--bg-hover); }
.t100-r-counting { border-left-color: var(--primary-color); }
.t100-r-counting:hover { background: var(--accent-subtle); }
.t100-r-gf       { border-left-color: var(--warning-color); background: var(--warning-bg); }
.t100-r-gf:hover { background: var(--badge-amber-bg); }
.t100-r-dropped  { border-left-color: var(--ink-7); opacity: 0.75; }
.t100-r-line {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-3);
}
.t100-r-date {
    font-family: var(--font-family-mono);
    font-size: var(--text-xs); color: var(--ink-5);
}
.t100-r-tag {
    font-size: var(--text-micro); color: var(--ink-6);
    text-transform: uppercase; letter-spacing: 0.4px;
    font-weight: var(--font-weight-bold);
}
.t100-r-gf       .t100-r-tag { color: var(--amber-strong); }
.t100-r-counting .t100-r-tag { color: var(--primary-dark); }
.t100-r-venue {
    font-size: var(--text-base); font-weight: var(--font-weight-semibold);
    color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t100-r-pos {
    font-family: var(--font-family-mono);
    font-size: var(--text-md); font-weight: var(--font-weight-bold);
    color: var(--ink-3);
}
.t100-r-pts {
    font-family: var(--font-family-mono);
    font-size: var(--text-sm); color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
}

.t100-drill-footer {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    align-items: center; padding: var(--space-4) var(--space-7);
    border-top: 1px solid var(--bg-tint); background: var(--bg-soft);
    font-size: var(--text-xs);
}
.t100-leg-chip {
    display: inline-block; padding: 1px var(--space-3);
    border-radius: var(--radius-sm); font-weight: var(--font-weight-bold);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.t100-leg-counting { background: var(--badge-violet-bg); color: var(--badge-violet-ink); }
.t100-leg-gf       { background: var(--badge-amber-bg); color: var(--badge-amber-ink); }
.t100-leg-dropped  { background: var(--bg-tint); color: var(--ink-6); }
.t100-drill-hint { margin-left: auto; color: var(--ink-6); font-style: italic; }

/* ── Calendar ── */
.t100-calendar { display: flex; flex-direction: column; gap: var(--space-2); }
.t100-race-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-5); align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.t100-race-row.complete { cursor: pointer; }
.t100-race-row.complete:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.t100-race-row.cancelled { opacity: 0.55; text-decoration: line-through; }
.t100-race-row.grand-final { border-left: 4px solid var(--warning-color); background: var(--warning-bg); }
.t100-race-date {
    font-family: var(--font-family-mono); font-size: var(--text-sm);
    color: var(--ink-5); white-space: nowrap;
}
.t100-race-info { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.t100-race-venue { font-weight: var(--font-weight-semibold); color: var(--ink-2); font-size: var(--text-md); }
.t100-gf-tag {
    margin-left: var(--space-3); font-size: var(--text-micro); font-weight: var(--font-weight-bold);
    color: var(--amber-strong); background: var(--badge-amber-bg);
    padding: 1px var(--space-3); border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}
.t100-race-winners {
    font-size: var(--text-sm); color: var(--ink-4);
    display: flex; gap: var(--space-5); flex-wrap: wrap;
}
.t100-race-status {
    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
    color: var(--ink-5); white-space: nowrap;
}
.t100-race-row.complete  .t100-race-status { color: var(--success-color); }
.t100-race-row.pending   .t100-race-status { color: var(--warning-color); }
.t100-race-row.upcoming  .t100-race-status { color: var(--ink-6); }
.t100-race-row.cancelled .t100-race-status { color: var(--danger-color); }

/* ── Points-curve viz ── */
.t100-pc-host { position: relative; }
.t100-pc-tip {
    position: absolute; display: none;
    background: rgba(15, 23, 42, 0.95); color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm); font-size: var(--text-xs);
    pointer-events: none; z-index: 100;
    white-space: nowrap;
}

/* ── Tie-breakers ── */
.t100-tiebreak {
    margin: 0; padding-left: var(--space-10);
    color: var(--ink-3); font-size: var(--text-base); line-height: 1.7;
}
.t100-tiebreak li { margin-bottom: var(--space-1); }

/* ── Race-band drill-down (tap a completed band on the chart) ── */
.t100-rdrill-head {
    display: flex; align-items: baseline; gap: var(--space-4);
    flex-wrap: wrap; padding: var(--space-5) var(--space-7);
    background: linear-gradient(135deg, var(--accent-subtle), var(--surface-tint));
    border-bottom: 1px solid var(--line-base);
    position: relative;
}
.t100-rdrill-venue { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--ink-2); }
.t100-rdrill-date {
    font-family: var(--font-family-mono); font-size: var(--text-sm); color: var(--ink-5);
}
.t100-rdrill-results { padding: var(--space-3) var(--space-6); }
.t100-rdrill-row {
    display: grid; grid-template-columns: auto auto 1fr auto;
    gap: var(--space-4); align-items: center;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--bg-tint);
}
.t100-rdrill-row:last-child { border-bottom: 0; }
.t100-rdrill-pos {
    font-family: var(--font-family-mono); font-weight: var(--font-weight-bold);
    font-size: var(--text-md); color: var(--ink-5);
    width: 1.6em; text-align: right;
}
.t100-rdrill-pos.pod { color: var(--badge-violet-ink); }
.t100-rdrill-name { font-weight: var(--font-weight-semibold); color: var(--ink-2); font-size: var(--text-md); min-width: 0; }
.t100-rdrill-pts {
    font-family: var(--font-family-mono); font-weight: var(--font-weight-bold);
    font-size: var(--text-md); color: var(--primary-dark);
}
.t100-rdrill-pts.gf { color: var(--amber-strong); }
/* .t100-rdrill-load = .btn + a smaller load pill (hover from .btn:hover). */
.t100-rdrill-load {
    padding: var(--space-3) var(--space-6); font-size: var(--text-sm);
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast);
}

/* ── Full standings (split reg/GF bars, expandable) ── */
#t100Standings { display: flex; flex-direction: column; gap: var(--space-2); }
.t100-stand-row {
    display: grid; grid-template-columns: auto auto 1fr auto;
    gap: var(--space-4); align-items: center;
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface); border: 1px solid var(--line-base);
    border-radius: var(--radius-md); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.t100-stand-row:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.t100-stand-row.podium { border-left: 3px solid var(--primary-color); }
.t100-sr-rank {
    font-family: var(--font-family-mono); font-size: var(--text-md);
    font-weight: var(--font-weight-bold); color: var(--ink-5);
    width: 1.8em; text-align: center;
}
.t100-stand-row.podium .t100-sr-rank { color: var(--primary-dark); }
.t100-sr-body { min-width: 0; }
.t100-sr-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-4); margin-bottom: 3px;
}
.t100-sr-name {
    font-weight: var(--font-weight-semibold); color: var(--ink-2);
    font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t100-sr-total {
    font-family: var(--font-family-mono); font-weight: var(--font-weight-bold);
    font-size: var(--text-lg); color: var(--badge-violet-ink);
}
.t100-sr-bar-track { background: var(--bg-tint); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
.t100-sr-bar { display: flex; height: 100%; border-radius: var(--radius-pill); overflow: hidden; min-width: 4px; }
.t100-bar-reg { background: var(--primary-color); }
.t100-bar-gf  { background: var(--major-accent); }
.t100-sr-chev { color: var(--ink-6); font-size: var(--text-sm); }
.t100-sr-detail {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3); padding-top: var(--space-3);
    border-top: 1px dashed var(--line-base);
}
/* Author `display:flex` outranks the UA [hidden]{display:none}, so collapse
   needs its own (higher-specificity) author rule to actually hide the row. */
.t100-sr-detail[hidden] { display: none; }
.t100-det-row {
    display: flex; align-items: baseline; gap: var(--space-3);
    font-size: var(--text-xs); color: var(--ink-4);
}
.t100-det-row.dropped { opacity: 0.6; }
.t100-det-venue { color: var(--ink-3); font-weight: var(--font-weight-semibold); }
.t100-det-pos { font-family: var(--font-family-mono); color: var(--ink-5); }
.t100-det-pts { font-family: var(--font-family-mono); font-weight: var(--font-weight-bold); color: var(--ink-4); }
.t100-det-pts.counting { color: var(--badge-violet-ink); }
.t100-det-pts.gf { color: var(--amber-strong); }
.t100-det-drop { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-6); }

/* ── Scoring reference table (behind a <details>) ── */
.t100-scoring-details { margin-top: var(--space-4); }
.t100-scoring-summary {
    cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
    color: var(--badge-violet-ink); padding: var(--space-2) 0;
}
.t100-rules-blurb { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.5; margin: var(--space-3) 0; }
.t100-points-tbl {
    border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-3);
}
.t100-points-tbl th, .t100-points-tbl td {
    padding: var(--space-1) var(--space-5); text-align: right; font-variant-numeric: tabular-nums;
}
.t100-points-tbl th { color: var(--ink-5); font-weight: var(--font-weight-bold); border-bottom: 1px solid var(--line-base); }
.t100-points-tbl td { color: var(--ink-3); }
.t100-points-tbl .t100-gf-cell { color: var(--amber-strong); font-weight: var(--font-weight-semibold); }
.t100-points-tbl .t100-overflow td { border-top: 1px solid var(--line-base); color: var(--ink-5); }
/* ── Athlete headshots + flags ──
   Circular photo with a monogram underneath; the <img> removes itself on a
   404 (see _avatar) so the monogram shows through. */
.t100-avatar {
    position: relative; display: inline-flex; flex: none;
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--accent-subtle), var(--surface-tint));
    align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.t100-avatar img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}
.t100-avatar-mono {
    font-size: 13px; font-weight: var(--font-weight-bold);
    color: var(--primary-dark); letter-spacing: 0.5px; user-select: none;
}
.t100-flag {
    width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
    vertical-align: -3px; flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.t100-flag-emoji { font-size: var(--text-md); }

/* Context-specific sizes */
.t100-pp-avatar    { width: 56px; height: 56px; margin: var(--space-1) 0 var(--space-2); }
.t100-pp-avatar    .t100-avatar-mono { font-size: 19px; }
.t100-drill-avatar { width: 44px; height: 44px; }
.t100-drill-avatar .t100-avatar-mono { font-size: 16px; }
.t100-sr-avatar    { width: 30px; height: 30px; }
.t100-sr-avatar    .t100-avatar-mono { font-size: 11px; }
.t100-rdrill-avatar { width: 28px; height: 28px; }
.t100-rdrill-avatar .t100-avatar-mono { font-size: 11px; }

/* Ability development tracks (career strength-of-field rating per discipline) */
.abt-bar { display:flex; gap: var(--space-5); align-items:center; flex-wrap:wrap; margin-bottom: var(--space-5); }
.abt-tog { font-size:12px; color:var(--ink-3); display:inline-flex; align-items:center; gap: 5px; cursor:pointer; }
.abt-reset { font:inherit; font-size:12px; padding: 5px 11px; border:1px solid var(--line-base); border-radius: 8px; background:var(--bg-surface); color:var(--ink-3); cursor:pointer; }
.abt-reset:hover { border-color:var(--border-strong); }
.abt-hint { font-size:11px; color:var(--ink-6); }
/* No horizontal padding so the chart SVG spans the full card width and its year
   ticks line up with the career arc; the header keeps its own inset instead. */
.abt-lane { background:var(--bg-surface); border:1px solid var(--line-base); border-radius: 12px; padding: var(--space-4) 0 var(--space-2); margin-bottom: var(--space-5); }
.abt-lane-head { display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-4); padding: 0 var(--space-5); }
.abt-lane-name { font-weight:800; font-size:13px; letter-spacing:.02em; }
.abt-lane-read { font-size:12px; color:var(--ink-5); text-align:right; }
.abt-lane-read b { color:var(--ink-1); font-variant-numeric:tabular-nums; }
.abt-lanes svg { display:block; width:100%; height:auto; }
/* Dual short/long athletes: two side-by-side columns on wide screens. */
.abt-lanes.abt-split { display:flex; gap: var(--space-8); align-items:flex-start; }
.abt-lanes.abt-split .abt-col { flex:1 1 0; min-width:0; }
.abt-col-head { font-weight:800; font-size:12px; color:var(--ink-4); letter-spacing:.04em; text-transform:uppercase; margin: 0 var(--space-1) var(--space-3); }
/* Phones: stack the Short / Long sections instead of side-by-side (too narrow). */
@media (max-width:620px){ .abt-lanes.abt-split { flex-direction:column; gap: var(--space-2); } .abt-lanes.abt-split .abt-col { width:100%; } }
.abt-brush .selection { fill:#1e3a8a; fill-opacity:.08; stroke:#3b82f6; stroke-opacity:.5; }
.abt-legend { color:var(--ink-5); font-size:11px; margin-top: var(--space-4); line-height:1.9; }
.abt-legend .abt-leg-item { display:inline-flex; align-items:center; white-space:nowrap; margin-left: var(--space-6); }
.abt-legend .abt-chip { display:inline-block; width:22px; border-top:3px solid; margin-right: var(--space-2); }
.abt-legend .abt-band { display:inline-block; width:14px; height:11px; background:var(--badge-amber-bg); border:1px solid var(--badge-amber-ink); margin-right: var(--space-2); }
.abt-legend .abt-shade { display:inline-block; width:14px; height:11px; background:rgba(37,99,235,.18); margin-right: var(--space-2); }
.abt-legend .abt-xk { display:inline-block; margin-right: var(--space-2); color:var(--ink-5); font-weight:800; }

/* ============================================================
   SaaS chrome layer (folded in from the former saas-theme.css).
   Loads after the base rules above, so it keeps overriding them —
   same cascade as when it was a separate file. Dedupe incrementally.
   ============================================================ */
/* ============================================================
   SaaS theme layer — chrome only.
   Athlete/team identity colors are inline (colorScale) and are
   deliberately untouched: comparison-by-color is preserved.
   ============================================================ */

body { background: var(--bg-app); }

/* Page shell: hairline border instead of floating card */
.container {
    box-shadow: none;
    border: 1px solid var(--line-base);
    border-radius: var(--border-radius-lg);
}

/* ── Header: quiet toolbar ─────────────────────────────── */
.app-brand { font-weight: 700; letter-spacing: -0.01em; }
.header-sep { display: none; }
.app-data-source { gap: var(--space-3); }

.header-btn,
.header-file-btn {
    background: var(--bg-surface);
    color: var(--ink-3);
    border: 1px solid var(--line-base);
    font-weight: 500;
    box-shadow: var(--shadow-1);
}
/* Action labels: full text by default, compact on phones (no hamburger —
   the buttons stay one tap away, just shorter). */
.lbl-short { display: none; }
@media (max-width: 640px) {
    .header-btn .lbl-full, .header-file-btn .lbl-full { display: none; }
    .header-btn .lbl-short, .header-file-btn .lbl-short { display: inline; }
}
.header-btn:hover:not(:disabled),
.header-file-btn:hover {
    background: var(--bg-hover);
    border-color: var(--line-strong);
    color: var(--ink-1);
}
/* Modal-footer "Load race" stays the one primary action */
.src-modal-foot .header-btn {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--on-accent);
}
.src-modal-foot .header-btn:hover:not(:disabled) { background: var(--primary-dark); }
.header-file-btn.has-file { background: var(--badge-green-bg); color: var(--badge-green-ink); border-color: var(--badge-green-ink); }

/* ── Tabs: underline style ─────────────────────────────── */
.tab-navigation { border-bottom: 1px solid var(--line-base); padding: 0; gap: var(--space-2); }
.tab-btn {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-5);
    font-weight: 500;
    background: transparent;
}
.tab-btn:hover { background: transparent; color: var(--ink-2); }
.tab-btn.active {
    background: transparent;
    color: var(--ink-1);
    font-weight: 600;
    border-bottom-color: var(--primary-color);
}
/* Tabs gated by state (e.g. Head-to-Head needs exactly 2 athletes selected). */
.tab-btn.hidden { display: none; }

/* ── Surfaces: flatten, border-define ──────────────────── */
/* .chart-container visual lives in chart-theme.css (single source). */
.ap-section, .rh-section {
    background: var(--bg-surface);
    border: 1px solid var(--line-base);
}
.summary-card, .h2h-card { box-shadow: none; border: 1px solid var(--line-base); }

/* Kill the candy gradients — neutral panels with an accent rule */
.ap-header, .rh-header, .t100-header,
.t100-drill-head, .t100-rdrill-head {
    background: var(--bg-soft);
    border: 1px solid var(--line-base);
    border-left: 3px solid var(--primary-color);
}
.chip-strip {
    background: var(--bg-soft);
    border: 1px solid var(--line-base);
}
.h2h-duel { background: var(--bg-soft); }
.h2h-narrative, .t100-narrative {
    background: var(--bg-soft);
    border: 1px solid var(--line-base);
    border-left: 3px solid var(--primary-color);
    color: var(--ink-3);
}

/* Checkpoint nav (Teams): gradient hero → toolbar. Always-dark chrome so its
   white-text children stay legible in both themes (--ink-2 would flip light). */
.checkpoint-navigation {
    background: var(--surface-inverse);
    border-radius: var(--radius-lg);
}

/* ── Chips & filters: outline-quiet, filled-active ─────── */
.filter-options-btn, .t100-gt-btn, .ctrl-pill {
    border-color: var(--line-base);
    color: var(--ink-4);
    font-weight: 500;
}
.filter-options-btn.active, .t100-gt-btn.on, .ctrl-pill.on {
    background: var(--ink-1);            /* dark-fill active = neutral, lets data colors pop */
    border-color: var(--ink-1);
    color: var(--surface);               /* inverse of --ink-1 so it flips in dark */
    box-shadow: none;
}
/* Active pill = inverted: ink-1 fill with bg-app text. Was color:#fff, which
   went white-on-white in dark mode (ink-1 is near-white there). */
.h2h-toggle-btn.on, .units-btn.on { background: var(--primary-color); color: var(--on-accent); border-color: var(--primary-color); }

/* Watched-athlete chips: keep --chip-color (the data color!) but quiet the frame */
.cs-chip { border-width: 1px; background: var(--bg-surface); }
.cs-label { color: var(--ink-5); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    background: var(--primary-color);
    border-radius: var(--radius-md);
    font-weight: 600;
}
.xo-confirm { background: var(--primary-color); border-color: var(--primary-color); }
.xo-confirm:hover { background: var(--primary-dark); }

/* ── Modals: crisper ───────────────────────────────────── */
.src-overlay { background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(2px); }
.src-modal { border-radius: var(--radius-xl); box-shadow: var(--shadow-3); border: 1px solid var(--line-base); }
.src-modal-head, .src-modal-foot { background: var(--bg-surface); }

/* ── Podium: number badges, not gold bars ──────────────── */
.podium-1, .team-row.podium, .t100-pos-1 { background: var(--bg-surface); }
.podium-card { border-left-width: 2px; }
.podium-1 { border-color: #eab308; }   /* keep medal hue only as a thin rule */

/* T100: fold the purple sub-theme into the app accent */
.t100-header .rh-sub, .t100-header .rh-meta { color: var(--primary-dark); }
.t100-narr-tag { background: var(--primary-color); }
.t100-bar-reg { background: var(--primary-color); }
.t100-sr-total, .t100-drill-rank, .t100-rdrill-pos.pod,
.t100-det-pts.counting, .t100-scoring-summary { color: var(--primary-dark); }

/* ── Country flags: real images, not emoji ─────────────── */
.flag-img {
    width: 16px; height: 12px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -2px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
    flex: none;
}
/* Fallback chip for codes with no national flag (clubs, mixed relay…) */
.flag-code {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: 3px;
    background: var(--bg-tint);
    color: var(--ink-5);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: 1px;
    font-variant-numeric: tabular-nums;
}
/* Initials crest for an NCAA team with no logo (replaces 🎓) */
.team-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: var(--radius-sm);
    background: var(--ink-1);
    color: var(--surface);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: -4px;
    flex: none;
}

/* ── Rank badges: numeric, not medals ──────────────────── */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.42em;
    border-radius: var(--radius-sm);
    background: var(--bg-tint);
    color: var(--ink-2);
    border: 1px solid var(--line-base);
    font-weight: 700;
    font-size: 0.82em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* Medal hues kept only as thin chips so the podium still reads at a glance */
.rank-badge-1 { background: var(--badge-amber-bg); color: var(--badge-amber-ink); border-color: var(--badge-amber-ink); }
.rank-badge-2 { background: var(--badge-neutral-bg); color: var(--badge-neutral-ink); border-color: var(--badge-neutral-ink); }
.rank-badge-3 { background: var(--badge-red-bg); color: var(--badge-red-ink); border-color: var(--badge-red-ink); }

/* Right-size the containers that used to hold emoji (badges bring own size) */
.podium-medal, .t100-pp-medal { font-size: var(--text-base); margin-top: 0; }
@media (min-width: 769px) { .podium-medal { font-size: var(--text-md); } }
.rh-pr-medals { display: inline-flex; gap: 3px; align-items: center; font-size: var(--text-sm); }
.xo-icon { display: inline-flex; align-items: center; }
.h2h-empty-icon, .h2h-never-icon { color: var(--ink-6); line-height: 0; }
/* ── Landing / welcome (no race loaded) ────────────────── */
.landing { padding: clamp(var(--space-8), 8vh, var(--space-16)) var(--space-4); }
.landing-hero { max-width: 660px; margin: 0 auto; text-align: center; }
.landing-title {
    display: block;                    /* override global `h1 { display:none }` */
    font-size: var(--text-display);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink-1);
    margin: 0 0 var(--space-3);
}
.landing-tagline {
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--ink-4);
    margin: 0 auto var(--space-8);
    max-width: 34em;
}
.landing-cta { margin-bottom: var(--space-10); }
.landing-primary {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    background: var(--primary-color);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.landing-primary:hover { background: var(--primary-dark); }
.landing-primary:active { transform: translateY(1px); }

.landing-featured { border-top: 1px solid var(--line-base); padding-top: var(--space-6); text-align: left; }
.lf-label {
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-6);
    font-weight: 700;
    margin-bottom: var(--space-3);
}
/* Sub-heading inside the races list (e.g. "Juniors & U23") — like .lf-label but
   spaced above so it separates the junior block from the elite tiles. */
.lf-sublabel {
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-6);
    font-weight: 700;
    margin: var(--space-5) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}
/* Reserve the loaded height so async content fills it instead of pushing the
   page down on slow loads (CLS). Sized to the rendered 5-row lists. */
.lf-list { display: flex; flex-direction: column; gap: var(--space-2); min-height: 220px; }
.lf-item {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--line-base);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.lf-item:hover { border-color: var(--primary-color); background: var(--primary-subtle); }
.lf-name { font-weight: 600; color: var(--ink-2); }
.lf-meta { font-size: var(--text-sm); color: var(--ink-6); }
.lf-item::after { content: '→'; margin-left: auto; align-self: center; color: var(--primary-color); font-weight: 700; }
/* Latest races: the race name on its own line (full width, no truncation), with
   the Women + Men buttons stacked underneath it. */
.lf-race {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface); border: 1px solid var(--line-base); border-radius: var(--radius-md);
}
.lf-race-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lf-race-genders { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lf-race-gender, .lf-race-round {
    flex: 1 1 calc(50% - var(--space-2)); text-align: center;
    font-size: var(--text-sm); font-weight: 600; color: var(--primary-color);
    padding: var(--space-5) var(--space-6); border: 1px solid var(--primary-color); border-radius: var(--radius-md);
    background: var(--bg-surface); cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
}
.lf-race-gender:hover { background: var(--primary-color); color: var(--on-accent); }
.lf-race-gender.lf-loading, .lf-race-round.lf-loading { opacity: .5; pointer-events: none; }
/* Mixed relay: a team race, not a gender split → full-width row of its own. */
.lf-race-relay { flex-basis: 100%; }
/* Ghost: the gender is scheduled but not yet scored. Muted + dashed so it reads
   as a placeholder holding its half-width slot, not a clickable button. */
.lf-race-gender.lf-ghost {
    color: var(--ink-6); border: 1px dashed var(--line-base);
    background: transparent; cursor: default;
}
.lf-race-gender.lf-ghost:hover { background: transparent; color: var(--ink-6); }
/* Dropdown variant (multi-round / para-class genders): a caret hints it opens,
   and text-align-last centres the closed-state gender label like the buttons. */
.lf-race-round {
    -webkit-appearance: none; appearance: none; text-align-last: center;
    background-image: linear-gradient(45deg, transparent 50%, var(--primary-color) 50%),
                      linear-gradient(135deg, var(--primary-color) 50%, transparent 50%);
    background-position: calc(100% - 14px) 1.05em, calc(100% - 9px) 1.05em;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    padding-right: 26px;
}
.lf-race-round:hover { background-color: var(--primary-color); color: var(--on-accent); }
.lf-race-round option { color: var(--text-primary); background: var(--bg-surface); }

@media (max-width: 520px) {
    .lf-meta { display: none; }
}

/* ── Predictions dropdown (landing) ───── */
.lf-pred-select {
    width: 100%; padding: var(--space-5) var(--space-6); font-size: var(--text-sm); font-weight: 600;
    color: var(--primary-color); background: var(--bg-surface);
    border: 1px solid var(--primary-color); border-radius: var(--radius-md); cursor: pointer;
}
.lf-pred-select option { color: var(--text-primary); font-weight: 500; }

/* ── Prediction "form guide" view ───── */
.pred-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-3); }
.pred-head { border-bottom: 1px solid var(--line-base); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
.pred-title { font-size: var(--text-lg); font-weight: 800; color: var(--text-primary); }
.pred-meta { font-size: var(--text-sm); color: var(--ink-6); margin-top: 3px; }
.pred-est { color: var(--warning); font-weight: 600; }
.pred-disclaimer { font-size: var(--text-xs); color: var(--ink-6); margin-top: var(--space-3); font-style: italic; }
.pred-hype { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); background: var(--primary-subtle); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-3); }
.pred-pack { font-size: var(--text-sm); color: var(--ink-6); margin-bottom: var(--space-3); }
.pred-pack-label { font-weight: 700; color: var(--text-primary); }
.pred-collabel { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-6); text-transform: uppercase; letter-spacing: .04em; padding: 0 var(--space-1) var(--space-2); }
.pred-row { display: flex; align-items: center; gap: var(--space-5); padding: 7px var(--space-1); border-bottom: 1px solid var(--line-soft, #f1f5f9); }
.pred-row.pred-podium .pred-name { font-weight: 700; }
.pred-rank { width: 22px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-6); font-size: var(--text-sm); flex-shrink: 0; }
.pred-row.pred-podium .pred-rank { color: var(--primary-color); font-weight: 700; }
.pred-ath { flex: 1 1 auto; min-width: 0; }
.pred-name { display: block; font-size: var(--text-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pred-thin { color: var(--ink-6); margin-left: var(--space-2); }
.pred-bar { display: block; height: 5px; border-radius: 3px; background: var(--line-soft, #eef2f7); margin-top: var(--space-2); overflow: hidden; }
.pred-bar-fill { display: block; height: 100%; background: var(--primary-color); border-radius: 3px; }
.pred-nums { text-align: right; flex-shrink: 0; }
.pred-pod { display: block; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); font-size: var(--text-sm); }
.pred-sub { display: block; font-size: var(--text-xs); color: var(--ink-6); white-space: nowrap; }
.pred-foot { font-size: var(--text-xs); color: var(--ink-6); margin-top: var(--space-3); }

/* ── Landing dynamic sections: rankings grid + tiles ───── */
.lf-empty { padding: var(--space-2) var(--space-1); color: var(--ink-6); font-size: var(--text-sm); }
.lf-loading { opacity: 0.55; pointer-events: none; }
/* Shared-rank rows: rank · man · woman — rank on the left, both names left-aligned. */
.lf-rankings { display: flex; flex-direction: column; gap: var(--space-1); min-height: 240px; }
.lf-rank-headrow, .lf-rank-row {
    display: grid; grid-template-columns: 1.5em 1fr 1fr; align-items: center; gap: var(--space-2);
}
.lf-rank-headrow { margin-bottom: var(--space-1); padding: 0 var(--space-1); }
.lf-rank-headrow span {
    font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 700; color: var(--ink-6);
}
.lf-rank { align-items: center; gap: var(--space-2); min-width: 0; justify-content: flex-start; text-align: left; }
.lf-rank::after { content: none; }
.lf-rk {
    font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--ink-5); text-align: left; min-width: 1.2em;
}
.lf-flag {
    width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.lf-rank .lf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   PREDICTION VIEW (prediction-view.js) — .pvx-*
   ============================================================ */
.pvx { max-width:920px; margin:0 auto; padding:0 12px 40px; font-family:var(--font-family); position:relative; color:var(--ink-1); }
.pvx-title { font-size:var(--text-xl); font-weight:var(--font-weight-black); line-height:var(--line-tight); color:var(--ink-1); }
.pvx-meta { font-size:var(--text-base); color:var(--ink-5); margin:3px 0; }
.pvx-asof { font-size:var(--text-sm); color:var(--ink-6); margin:2px 0 6px; }
.pvx-asof b { color:var(--ink-5); font-weight:var(--font-weight-semibold); }
.pvx-row { display:flex; gap:var(--space-5); flex-wrap:wrap; align-items:center; margin-bottom:var(--space-3); }
.pvx select { padding:var(--space-3) var(--space-4); border:1px solid var(--line-base); border-radius:var(--radius-md); background:var(--bg-surface); font-size:var(--text-base); color:var(--ink-2); }
.pvx-tabs { display:flex; gap:var(--space-2); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:var(--space-3) 0 var(--space-2); border-bottom:1px solid var(--line-base); }
.pvx-tabs::-webkit-scrollbar { display:none; }
.pvx-cap { font-size:var(--text-sm); color:var(--ink-5); margin:var(--space-2) 0 0; }
.pvx-adj { display:none; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:center; padding:8px 2px; margin:2px 0; }
.pvx-adj.show { display:flex; }
.pvx-adj .adj { display:flex; flex-direction:column; gap:3px; flex:1 1 40%; max-width:220px; min-width:132px; }
.pvx-adj .adj-top { display:flex; align-items:baseline; justify-content:space-between; gap:6px; line-height:1; }
.pvx-adj .adj-lbl { font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--ink-6,#94a3b8); }
.pvx-adj .adj-v { font-family:var(--font-family-mono); font-size:12px; font-weight:700; color:var(--primary-color,#2563eb); white-space:nowrap; }
.pvx-adj .adj-v.changed { color:var(--danger); }
.pvx-adj .adj-range { width:100%; margin:0; cursor:pointer; accent-color:var(--primary-color,#2563eb); }
.pvx-adj .adj-reset { width:28px; height:28px; border:1px solid var(--line-base,#e2e8f0); border-radius:var(--radius-full,50%); background:var(--bg-surface,#fff); cursor:pointer; font-size:14px; color:var(--ink-5,#64748b); display:flex; align-items:center; justify-content:center; flex:none; }
.pvx-adj .adj-reset:hover { color:var(--primary-color,#2563eb); border-color:var(--primary-color,#2563eb); }
.pvx-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:var(--space-3); font-size:var(--text-sm); color:var(--ink-5); }
.pvx-legend .lg { display:inline-flex; align-items:center; gap:5px; }
.pvx-legend .lg-sw { width:14px; height:8px; border-radius:2px; display:inline-block; flex:none; }
.pvx-legend .lg-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; background:var(--ink-4); }
.pvx-stage { min-height:320px; position:relative; }
.pvx-note { display:flex; gap:var(--space-7); flex-wrap:wrap; font-size:var(--text-sm); color:var(--ink-5); margin-top:var(--space-3); }
.pvx-note i { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:var(--space-2); }
.pvx-alts { margin-top:var(--space-5); font-size:var(--text-base); }
.pvx-alt { display:flex; justify-content:space-between; max-width:360px; padding:4px var(--space-3); border-bottom:1px solid var(--line-soft); }
.pvx-alt.foc { background:var(--primary-subtle); font-weight:var(--font-weight-bold); border-radius:var(--radius-sm); }
.pvx-alt span:last-child { font-family:var(--font-family-mono); }
.pvx-alt-link { cursor:pointer; }
.pvx-alt-link:hover { text-decoration:underline; color:var(--primary-color,#2563eb); }
.pvx details { font-size:var(--text-base); margin-top:var(--space-4); }
.pvx details > summary { cursor:pointer; color:var(--primary-color); font-weight:var(--font-weight-bold); padding:var(--space-2) 0; }
.pvx-tip { position:absolute; pointer-events:none; background:var(--bg-surface); color:var(--ink-2); border:1px solid var(--line-base); box-shadow:0 4px 16px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.04); font-size:var(--text-base); padding:6px 10px; border-radius:var(--radius-lg); white-space:nowrap; opacity:0; transition:opacity .08s; z-index:20; }
.pvx svg text { font-family:var(--font-family); }
.pvx svg text.pvx-name { cursor:pointer; }
.pvx svg text.pvx-name:hover { text-decoration:underline; }
.pvx-field-note { font-size:var(--text-sm); color:var(--ink-6); margin-top:var(--space-4); text-align:center; font-style:italic; }
@media (max-width:520px){
  .pvx { padding:0 10px 32px; }
  .pvx-title { font-size:var(--text-lg); }
}

/* ============================================================
   DEVELOPMENT-CHART WHAT-IF PANEL (development-chart.js) — .whatif-*
   ============================================================ */
.whatif-wrap { margin:4px 0 2px; }
/* Pacing-impact toggle uses the shared `.ctrl-pill` (+ `.on`) — no bespoke style. */
.whatif-ctrls { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:center; padding:6px 0; margin-top:4px; }
.whatif-adj { display:flex; flex-direction:column; gap:3px; flex:1 1 40%; max-width:200px; min-width:120px; }
.whatif-adj-top { display:flex; align-items:baseline; justify-content:space-between; gap:6px; line-height:1; }
.whatif-adj-lbl { font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--ink-6,#94a3b8); }
.whatif-adj-v { font-family:var(--font-family-mono); font-size:12px; font-weight:700; color:var(--ink-5,#64748b); white-space:nowrap; }
.whatif-adj-v.faster { color:var(--success); }
.whatif-adj-v.slower { color:var(--danger); }
.whatif-adj-range { width:100%; margin:0; cursor:pointer; accent-color:var(--primary-color,#2563eb); }
.whatif-adj-sub { font-family:var(--font-family-mono); font-size:10px; color:var(--ink-6,#94a3b8); letter-spacing:-.01em; white-space:nowrap; margin-top:1px; }
.whatif-reset { width:28px; height:28px; border:1px solid var(--line-base,#e2e8f0); border-radius:50%; background:var(--bg-surface,#fff); cursor:pointer; font-size:14px; color:var(--ink-5,#64748b); display:flex; align-items:center; justify-content:center; flex:none; }
.whatif-reset:hover { color:var(--primary-color,#2563eb); border-color:var(--primary-color,#2563eb); }
.whatif-pack { flex:1 1 100%; text-align:center; font-size:11px; color:var(--ink-5,#64748b); padding-top:2px; border-top:1px solid var(--line-base,#e2e8f0); margin-top:2px; }
.whatif-pack b { font-weight:700; color:var(--ink-4); }
/* ============================================================
   CHART THEME OVERRIDES
   ============================================================ */

/* ── Axes: token-driven so they adapt to dark and aren't silently overriding
   the charts' own .attr() calls. Domain lines shown (the axis rule), tokenized. */
.axis path.domain { stroke: var(--chart-axis-line); }
.axis line { stroke: var(--chart-axis-line); }
/* One size for every large chart's tick labels (rank, development, …). Charts
   must NOT re-set font-size inline on axis text — let this own it so they stay
   standardized across charts and adapt at the mobile breakpoint. */
.axis text {
    font-family: var(--font-family);
    fill: var(--chart-axis);
    font-size: 9px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 769px) {
    .axis text { font-size: 12px; }
}
.axis-label {
    font-family: var(--font-family);
    fill: var(--chart-label);
    font-size: 12px;
    font-weight: 500;
}
/* Development chart end-of-line name labels. Sizes live here (not inline JS) so
   watched names track the rank chart's name size; fill stays inline (watched =
   the athlete's own colour, field = muted). */
.dev-end-label { font-size: 10px; font-weight: 400; }
.dev-end-label.spot { font-size: 12px; font-weight: 700; }
@media (min-width: 769px) {
    .dev-end-label { font-size: 11px; }
    .dev-end-label.spot { font-size: 13px; }
}

/* ── Grid lines: whisper-quiet (the faintest layer) ── */
.grid line {
    stroke: var(--chart-grid);
    stroke-opacity: 1;
    stroke-width: 0.5;
    shape-rendering: crispEdges;
}
.grid path.domain { display: none; }

/* ── Athlete paths ── */
/* Base opacity comes from --data-line-op (CSS wins over the SVG opacity
   *attribute*, so this is the real control). The token is boosted in dark
   (tokens.css) so the data doesn't go faint against the dark surface. */
.athlete-path {
    fill: none;
    stroke-width: 1.5;
    opacity: var(--data-line-op);
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: opacity 0.2s, stroke-width 0.2s;
}
.athlete-path.hidden { display: none; }
.athlete-path-hitarea { pointer-events: stroke; stroke: transparent; stroke-width: 12; fill: none; }
.athlete-path-hitarea.hidden { display: none; pointer-events: none; }
.athlete-path.spotlighted {
    opacity: 1 !important;
    stroke-width: 2.8 !important;
}
.athlete-path.spotlight-dimmed { opacity: 0.06 !important; }
/* On the dark surface 0.06 is invisible — keep a faint trace of the field. */
:root[data-theme="dark"] .athlete-path.spotlight-dimmed { opacity: 0.14 !important; }
.athlete-path.filtered-out { opacity: 0.05 !important; stroke-width: 0.75 !important; }

.athlete-circle {
    opacity: 0.65;
    stroke: var(--chart-halo);
    stroke-width: 1.2;
    transition: all 0.2s;
}
.athlete-circle.hidden { display: none; }
.athlete-circle.spotlighted { opacity: 1 !important; }
.athlete-circle.spotlight-dimmed { opacity: 0.04 !important; }
.athlete-circle.filtered-out { opacity: 0.03 !important; }

/* ── Radar / Spider ── */
.radar-area {
    fill-opacity: 0.08;
    stroke-width: 1.8;
    transition: all 0.2s;
}
.radar-area:hover {
    fill-opacity: 0.18;
    stroke-width: 2.2;
}
.radar-area.hidden { display: none; }
.radar-dots { fill-opacity: 0.8; }
.radar-dots.hidden { display: none; }

/* ── Tooltip card (theme-aware) ── */
.tooltip {
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--line-base);
    border-radius: 8px;
    box-shadow: var(--shadow-2);
    padding: var(--space-5) var(--space-6);
    font-size: 12px;
    line-height: 1.5;
}
@media (min-width: 769px) {
    .tooltip { padding: var(--space-6) var(--space-7); font-size: 13px; }
}

/* ── Chart containers: no tinted background ── */
.chart-container {
    background: var(--bg-surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
}
.chart-container.active { border-color: var(--line-base); }

.chart-title {
    background: transparent;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    color: var(--ink-2);
}

/* ── Segment header bands (rank + dev charts) ── */
.x-section-rect { rx: 2; ry: 2; transition: fill var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.x-section-rect:hover { filter: brightness(0.94); }
.x-section-rect.active {
    stroke: var(--ink-3);
    stroke-width: 1.5;
}

/* ── Inline filter bar ── */
.inline-filters {
    background: var(--bg-surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
}

/* ── Dev chart scroll container ── */
.scroll-container {
    border-color: var(--line-soft) !important;
    background: var(--bg-surface) !important;
}

/* Spotlight labels */
.spotlight-name, .spotlight-label, .wlabel {
    pointer-events: none;
    text-shadow: 0 0 4px var(--chart-halo), 0 0 8px var(--chart-halo), 0 0 12px var(--chart-halo);
    font-weight: 600;
}

.rbadge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px var(--space-3);
    border-radius: var(--radius-sm);
}
.rbadge.top { background: var(--badge-green-bg); color: var(--badge-green-ink); }
.rbadge.mid { background: var(--badge-amber-bg); color: var(--badge-amber-ink); }
.rbadge.low { background: var(--badge-red-bg); color: var(--badge-red-ink); }

/* ── Replay controls ── */
.replay-controls {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--line-base);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}
.replay-filter { margin-bottom: var(--space-1); }
/* Row 1: Course/Timeline segmented toggle + Focus, speed stepper at the right
   edge — keeping it out of the transport row saves a wrap line on phones. */
.rc-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.rc-toolbar .rc-speed { margin-left: auto; }
.rc-view-btn, .rc-focus-btn, .rc-step-btn {
    font-size: 12px; padding: var(--space-2) var(--space-5);
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--ink-3);
    cursor: pointer; font-weight: 600; white-space: nowrap;
}
.rc-segmented { display: inline-flex; flex: none; }
.rc-segmented .rc-view-btn { border-radius: 0; border-right-width: 0; }
.rc-segmented .rc-view-btn:first-child {
    border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md);
}
.rc-segmented .rc-view-btn:last-child {
    border-right-width: 1px;
    border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
}
.rc-view-btn.active, .rc-focus-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Row 2: one media bar — play · restart · ±30s · scrubber · time. */
.rc-transport { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.rc-play-btn, .rc-pause-btn {
    width: 38px; height: 38px; border: none; border-radius: 50%; flex: none;
    background: var(--accent); color: var(--on-accent); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.rc-reset-btn {
    width: 34px; height: 34px; flex: none; cursor: pointer;
    border: 1px solid var(--line-base); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--ink-3);
    display: inline-flex; align-items: center; justify-content: center;
}
.rc-step-btn { height: 34px; }
.rc-time {
    font-size: 14px; font-weight: 700; color: var(--ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rc-time .rc-sep { color: var(--ink-7); font-weight: 500; }
/* Scrubber = a real media slider: rounded track, accent-filled elapsed portion
   (--rc-pct set from JS), clean thumb. touch-action: pan-y so a vertical scroll
   gesture starting on it scrolls the page instead of scrubbing. */
.rc-timeline {
    -webkit-appearance: none; appearance: none;
    flex: 1 1 200px; min-width: 120px; height: 6px; border-radius: 999px;
    background: linear-gradient(to right, var(--accent) 0 var(--rc-pct, 0%), var(--line-strong) var(--rc-pct, 0%) 100%);
    cursor: pointer; touch-action: pan-y;
}
.rc-timeline::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--bg-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer;
}
.rc-timeline::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--bg-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer;
}
/* Speed = a compact stepper through preset multipliers (no raw slider). */
.rc-speed {
    display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 2px;
    border: 1px solid var(--line-base); border-radius: var(--radius-md); background: var(--bg-surface);
}
.rc-speed-dn, .rc-speed-up {
    width: 26px; height: 28px; border: none; background: transparent; color: var(--ink-3);
    font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; border-radius: var(--radius-sm, 5px);
}
.rc-speed-dn:hover, .rc-speed-up:hover { background: var(--bg-tint); }
.rc-speed-value {
    font-size: 13px; font-weight: 800; color: var(--accent-ink);
    min-width: 40px; text-align: center; font-variant-numeric: tabular-nums;
}

/* Replay map labels (leg names, START/FINISH, leg-leaders) sit over the course
   route, so they were unreadable where they crossed a leg line. A white halo
   behind the text keeps them legible without moving them; non-scaling-stroke so
   the halo stays a crisp constant thickness as the map zooms. */
.map-annot {
    paint-order: stroke;
    stroke: var(--chart-halo);
    stroke-width: 3.5px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
@media (min-width: 769px) {
    .rc-view-btn, .rc-focus-btn, .rc-step-btn { font-size: 13px; }
    .rc-time { font-size: 15px; }
}
/* Phone: the transport must hold one line (toolbar + transport = 2 rows total),
   so buttons tighten and the time readout stacks current-over-total instead of
   spending ~110px on the inline "cur / max" form. */
@media (max-width: 768px) {
    .rc-transport { gap: var(--space-2); }
    .rc-play-btn, .rc-pause-btn { width: 34px; height: 34px; }
    .rc-reset-btn { width: 30px; height: 30px; }
    .rc-step-btn { padding: var(--space-2) var(--space-3); height: 30px; }
    .rc-timeline { min-width: 90px; flex-basis: 120px; }
    .rc-time { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: 12px; }
    .rc-time .rc-sep { display: none; }
    .rc-time .rc-max { font-size: 10px; font-weight: 600; color: var(--ink-5); }
}

/* ── Replay ticker ── */
.replay-ticker {
    background: var(--bg-surface) !important;
    border-color: var(--line-soft) !important;
    font-size: 12px;
}
.replay-ticker-header {
    font-size: 11px !important;
    color: var(--ink-5) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-color: var(--line-soft) !important;
}
/* ── Rank chart: position-trajectory overview strip (additive) ──
   The whole field's rank-over-race compressed into a short band so a dramatic
   mover's full arc shows without scrolling the per-row chart. */
.rank-overview-host { width: 100%; }
.rank-overview {
    background: var(--bg-surface); border: 1px solid var(--line-base); border-radius: var(--radius-md);
    padding: 5px var(--space-4) var(--space-2); margin-bottom: var(--space-3);
}
.rank-overview-title {
    font-size: 10.5px; font-weight: 600; color: var(--chart-label);
    letter-spacing: .02em; margin-bottom: 1px;
}
.rank-overview-svg { display: block; overflow: visible; width: 100%; height: auto; }
.rank-ov-field { fill: none; stroke: var(--chart-ref); stroke-width: 1; opacity: .3; }
.rank-ov-sel { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rank-ov-guide { stroke: var(--chart-grid); stroke-width: 1; }
.rank-ov-axis { font-size: 9px; fill: var(--chart-axis); }
.rank-overview-caps { display: flex; flex-wrap: wrap; gap: 3px var(--space-6); margin-top: var(--space-1); }
.rank-ov-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.rank-ov-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
/* Minimap "you are here" viewport band — marks the slice of the field the
   scrollable chart is currently showing; the strip is draggable to scroll. */
.rank-ov-viewport { fill: rgba(99,102,241,0.10); stroke: rgba(99,102,241,0.55); stroke-width: 1; pointer-events: none; }
.rank-overview-svg { touch-action: none; }
/* Race History — "road to the title", athlete links, and the tier ladder.
   (The mixed-distance view is gone: multi-distance venues always lock onto
   one distance via the pills, so its note/panel/badge classes went with it.) */

/* "Where this race sits" — the tier ladder */
.rh-ladder-section { overflow: hidden; }
.rh-ladder { width: 100%; overflow-x: auto; }
.rh-ladder svg { display: block; }
.rh-ladder-legend {
    display: flex; flex-wrap: wrap; gap: var(--space-6);
    margin-top: var(--space-4); font-size: 11px; color: var(--text-muted);
}
.rh-ladder-legend .rh-leg { display: inline-flex; align-items: center; gap: 5px; }
.rh-leg-diamond {
    width: 9px; height: 9px; display: inline-block;
    transform: rotate(45deg); border: 1px solid var(--chart-halo);
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.rh-leg-ring {
    width: 12px; height: 12px; display: inline-block; border-radius: 50%;
    border: 2px dashed var(--major-accent);
}

/* NCAA records as a division matrix */
.rh-records--table { display: block; }
.rh-rec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rh-rec-table th, .rh-rec-table td {
    padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.rh-rec-table thead th { font-size: 12px; font-weight: 700; }
.rh-rect-label { font-weight: 600; white-space: nowrap; }
.rh-rect-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rh-rect-who { font-size: 11px; color: var(--text-muted); margin-top: var(--space-1); }
.rh-rect-empty { color: var(--border-strong); }

/* Heat switcher in the loaded race view (a championship runs in heats) */
.heat-strip {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5);
    background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.heat-strip-label {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted);
}
.heat-pill {
    border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
    border-radius: var(--radius-pill); padding: 5px var(--space-6); font-size: 13px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3);
}
.heat-pill:hover { border-color: var(--border-strong); }
.heat-pill.active { background: var(--text); border-color: var(--text); color: var(--bg-app); }
.heat-pill-n {
    font-size: 11px; font-weight: 700; opacity: .7;
    background: rgba(0,0,0,.06); border-radius: var(--radius-pill); padding: 0 var(--space-3);
}
.heat-pill.active .heat-pill-n { background: rgba(255,255,255,.22); opacity: .9; }

/* Division rotation control above the grids */
.rh-heatdiv { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* Achievement / team grids — ranked rows, cells = finishing place.
   Capped height + scroll: the leaders sit in view, the long tail is a scroll
   away for the curious. Header row stays pinned while you scroll. */
.rh-grid-block { margin-bottom: var(--space-8); }
.rh-grid-head { font-size: 12px; font-weight: 700; margin-bottom: var(--space-2); }
.rh-grid-block .rh-grid-host,
.rh-grid-host--capped {
    max-height: 300px; overflow: auto;
    border: 1px solid var(--line); border-radius: 8px;
}
.rh-grid-block thead th,
.rh-grid-host--capped thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface); box-shadow: 0 1px 0 var(--line);
}
.rh-grid--ach { font-variant-numeric: tabular-nums; }
.rh-grid-rank { width: 30px; text-align: center; padding-right: 0; }
.rh-ach-pod { font-size: 10px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.rh-cell-ach {
    text-align: center; font-size: 11px; font-weight: 600; cursor: pointer;
    min-width: 26px;
}
.rh-cell-win { font-weight: 800; box-shadow: inset 0 0 0 2px var(--major-accent); }
.rh-major-card {
    flex: 1 1 180px; min-width: 160px;
    border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
    cursor: pointer; transition: transform .12s ease;
    border: 1px solid transparent;
}
.rh-major-card:hover { transform: translateY(-2px); }
/* Border wears the same ink token as the badge inside the card. */
.rh-major-card.rh-major-olympic { background: var(--surface-sunken); border-color: var(--badge-amber-ink); }
.rh-major-card.rh-major-gf      { background: var(--surface-sunken); border-color: var(--badge-violet-ink); }
.rh-major-card.rh-major-worlds  { background: var(--surface-sunken); border-color: var(--badge-blue-ink); }
.rh-major-card.rh-major-olyqual { background: var(--surface-sunken); border-color: var(--badge-cyan-ink); }
.rh-major-head { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: 13px; }
.rh-major-icon { font-size: 16px; }
.rh-major-title { flex: 1; }
.rh-major-year { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.rh-major-winner { margin-top: var(--space-3); font-size: 12px; color: var(--text-2); }

.rh-major-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; border-radius: var(--radius-pill);
    padding: 1px 7px; margin-left: var(--space-3); vertical-align: middle;
}
.rh-major-badge.rh-major-olympic { background: var(--badge-amber-bg);  color: var(--badge-amber-ink); }
.rh-major-badge.rh-major-gf      { background: var(--badge-violet-bg); color: var(--badge-violet-ink); }
.rh-major-badge.rh-major-worlds  { background: var(--badge-blue-bg);   color: var(--badge-blue-ink); }
.rh-major-badge.rh-major-olyqual { background: var(--badge-cyan-bg);   color: var(--badge-cyan-ink); }

/* Distance filter pills pick up their accent color when active */
.rh-divpill.active[style*="--pill-color"] {
    background: var(--pill-color);
    border-color: var(--pill-color);
    color: #fff;
}

/* Athlete name → profile links, used throughout race history */
.rh-athlete-link {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: var(--accent-ink); cursor: pointer;
    text-decoration: none; font-weight: 600;
}
.rh-athlete-link:hover { text-decoration: underline; }

/* T100 — link to an athlete's full profile from the season drill-down.
   Geometry/hover come from the shared .chip; only the ink is accent. */
.t100-profile-link { color: var(--accent-ink); font-weight: 600; }/* ============================================================================
   SplitLab Design System — "Lab Slate"  (see design/SYSTEM.md)
   Single source of truth for design tokens, light AND dark.
   Loaded LAST so it consolidates the drifted per-file tokens: the new semantic
   roles are defined here, and every legacy token name is re-pointed at them as
   a live `var()` alias — so the existing CSS (3.9k lines) adapts to the system
   and to dark mode without rewriting each rule. Only hardcoded hex values (and
   d3-inlined chart chrome) still need hand-migration.
   Type scale, spacing, weights, chip/discipline/medal tokens are left to their
   original files (unchanged by the redesign).
   ============================================================================ */

:root {
    color-scheme: light;

    /* ── Semantic surfaces ───────────────────────────────────────────────── */
    --bg-app: #f8fafc;
    --surface: #ffffff;
    --surface-raised: #ffffff;   /* tooltips, dropdowns, popovers, sticky bars */
    --surface-sunken: #fafbfc;   /* recessed panels inside cards */
    --surface-hover: #f1f5f9;
    --surface-tint: #eef2f6;     /* zebra, muted chips, rank-badge bg */
    /* Always-dark chrome (hero toolbars, dark tooltips): NOT re-defined in dark,
       so it stays dark in both themes. Pair with white/near-white text. */
    --surface-inverse: #1e293b;
    --on-surface-inverse: #f8fafc;
    /* Always-white tile behind NCAA team logos: most logos are authored on a
       solid white background, so they need a white backing in BOTH themes to sit
       cleanly on coloured rows / selection tints / dark mode. NOT re-defined in
       dark. The ring is a translucent hairline so it reads on light backgrounds
       and disappears against dark ones (where the white tile already contrasts). */
    --logo-tile: #ffffff;
    --logo-tile-ring: rgba(15, 23, 42, .12);

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --border: #e2e8f0;
    --border-soft: #eef2f6;
    --border-strong: #cbd5e1;

    /* ── Text ────────────────────────────────────────────────────────────── */
    --text: #0f172a;
    --text-2: #334155;
    --text-muted: #64748b;
    --text-faint: #94a3b8;

    /* ── Accent (one brand: indigo) ──────────────────────────────────────── */
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-ink: #4f46e5;       /* accent-colored TEXT/links on a surface */
    --accent-subtle: rgba(79, 70, 229, .08);
    --on-accent: #ffffff;

    /* ── State ───────────────────────────────────────────────────────────── */
    --success: #047857;
    --success-bg: #ecfdf5;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --warning: #b45309;
    --warning-bg: #fffbeb;
    --focus-ring: rgba(79, 70, 229, .30);

    /* ── Soft status badges (one canonical tint per hue; adapts to dark) ──────
       Replaces a scatter of one-off pastel hexes on rank/position/ability/T100
       pills so they share a look and don't glare on dark. */
    --badge-green-bg:   rgba(16, 185, 129, .12);  --badge-green-ink:  #047857;
    --badge-amber-bg:   rgba(245, 158, 11, .15);  --badge-amber-ink:  #b45309;
    --badge-red-bg:     rgba(239, 68, 68, .12);   --badge-red-ink:    #b91c1c;
    --badge-blue-bg:    rgba(59, 130, 246, .12);  --badge-blue-ink:   #1d4ed8;
    --badge-violet-bg:  rgba(139, 92, 246, .12);  --badge-violet-ink: #6d28d9;
    --badge-cyan-bg:    rgba(6, 182, 212, .12);   --badge-cyan-ink:   #0e7490;
    --badge-neutral-bg: rgba(100, 116, 139, .14); --badge-neutral-ink: #475569;

    /* ── Heat cells (race-history place grids; the number sits ON the fill) ──
       Two scales: finish POSITION (medals + blue depth) and PLACE-IN-FIELD
       percentile (green→red). Dark-mode values are selected tints over the
       dark surface, not flips of these — light pastels glare there and the
       light ink vanishes on them. */
    --heat-gold-bg: #FFD700;      --heat-gold-ink: #1e293b;
    --heat-silver-bg: #C0C0C0;    --heat-silver-ink: #1e293b;
    --heat-bronze-bg: #CD7F32;    --heat-bronze-ink: #1e293b;
    --heat-blue-2-bg: #bfdbfe;    --heat-blue-2-ink: #1e293b;
    --heat-blue-1-bg: #dbeafe;    --heat-blue-1-ink: #1e293b;
    --heat-blue-0-bg: #eff6ff;    --heat-blue-0-ink: #334155;
    --heat-pct-0-bg: #15803d;     --heat-pct-0-ink: #ffffff;
    --heat-pct-1-bg: #22c55e;     --heat-pct-1-ink: #1e293b;
    --heat-pct-2-bg: #86efac;     --heat-pct-2-ink: #1e293b;
    --heat-pct-3-bg: #fde68a;     --heat-pct-3-ink: #1e293b;
    --heat-pct-4-bg: #fdba74;     --heat-pct-4-ink: #1e293b;
    --heat-pct-5-bg: #fecaca;     --heat-pct-5-ink: #1e293b;

    /* ── Chart chrome (frames only; series/discipline colors untouched) ───── */
    --major-accent: #f59e0b;     /* major-championship / Grand-Final marker (rings, win cells, FINAL tags) */
    --chart-axis: #94a3b8;       /* tick text */
    --chart-axis-line: #e2e8f0;  /* tick marks / axis rules */
    --chart-grid: #f1f5f9;       /* gridlines */
    --chart-label: #64748b;      /* axis titles, in-SVG captions */
    --chart-halo: #ffffff;       /* label halos, dot outlines, "white" strokes */
    --chart-ref: #cbd5e1;        /* neutral reference lines (VS midline, medians) */
    --data-line-op: 0.5;         /* unselected athlete-line opacity (boosted in dark) */

    /* ── Radii (consolidated) ────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;           /* cards, sections, chart frames */
    --radius-xl: 14px;           /* modals, page shell */
    --radius-pill: 999px;

    /* ── Elevation (borders first; shadows mean "floats") ────────────────── */
    --shadow-1: 0 1px 2px rgba(2, 6, 23, .06);
    --shadow-2: 0 4px 12px rgba(2, 6, 23, .10);
    --shadow-3: 0 12px 32px rgba(2, 6, 23, .16);

    /* ── Legacy aliases → new roles (live refs; adapt to dark automatically) ─ */
    --background: var(--bg-app);
    --background-light: var(--surface-tint);
    --bg-surface: var(--surface);
    --bg-soft: var(--surface-sunken);
    --bg-hover: var(--surface-hover);
    --bg-tint: var(--surface-tint);
    --border-color: var(--border);
    --line: var(--border);
    --line-soft: var(--border-soft);
    --line-base: var(--border);
    --line-strong: var(--border-strong);
    --foreground: var(--text);
    --muted-foreground: var(--text-muted);
    --ink-1: var(--text);
    --ink-2: var(--text-2);
    --ink-3: var(--text-2);
    --ink-4: var(--text-muted);
    --ink-5: var(--text-muted);
    --ink-6: var(--text-faint);
    --ink-7: var(--border-strong);
    --primary-color: var(--accent);
    --primary-dark: var(--accent-hover);
    --primary-darker: var(--accent-hover);
    --primary-subtle: var(--accent-subtle);
    --indigo-fg: var(--accent-ink);
    --indigo-bg: var(--accent-subtle);
    --indigo-bg-hover: var(--accent-subtle);
    --indigo-border: var(--accent);
    --amber-fg: var(--warning);
    --amber-strong: var(--warning);
    --amber-bg: var(--warning-bg);
    --amber-bg-hover: var(--warning-bg);
    --amber-border: var(--warning);
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --axis-color: var(--chart-axis-line);
    --grid-color: var(--chart-grid);
    --label-color: var(--chart-label);
    --shadow-card: none;
    --border-radius: var(--radius-lg);
    --border-radius-lg: var(--radius-xl);
}

/* ── Dark theme ──────────────────────────────────────────────────────────
   data-theme is resolved to "light" | "dark" by the FOUC-free head script
   (auto → the OS preference, kept live via a matchMedia listener), so only
   the semantic roles need dark values here; every alias above follows. ──── */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-app: #0b1220;
    --surface: #131c2e;
    --surface-raised: #1b2740;
    --surface-sunken: #0e1626;
    --surface-hover: #1a2539;
    --surface-tint: #162135;

    --border: #243349;
    --border-soft: #1c2940;
    --border-strong: #33445f;

    --text: #e8edf6;
    --text-2: #c3cee0;
    --text-muted: #8ea0b8;
    --text-faint: #5d7089;

    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-ink: #a5b4fc;
    --accent-subtle: rgba(99, 102, 241, .16);
    --on-accent: #ffffff;

    --success: #34d399;
    --success-bg: rgba(52, 211, 153, .12);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, .12);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, .12);
    --focus-ring: rgba(129, 140, 248, .40);

    --badge-green-bg:   rgba(16, 185, 129, .18);  --badge-green-ink:  #6ee7b7;
    --badge-amber-bg:   rgba(245, 158, 11, .18);  --badge-amber-ink:  #fcd34d;
    --badge-red-bg:     rgba(239, 68, 68, .20);   --badge-red-ink:    #fca5a5;
    --badge-blue-bg:    rgba(59, 130, 246, .20);  --badge-blue-ink:   #93c5fd;
    --badge-violet-bg:  rgba(139, 92, 246, .20);  --badge-violet-ink: #c4b5fd;
    --badge-cyan-bg:    rgba(34, 211, 238, .16);  --badge-cyan-ink:   #67e8f9;
    --badge-neutral-bg: rgba(148, 163, 184, .18); --badge-neutral-ink: #cbd5e1;

    /* Heat cells — same-hue tints selected for the dark surface (ink:bg ≥ 6:1,
       checked over --surface). Faintest tiers stay deliberately recessive. */
    --heat-gold-bg: rgba(250, 204, 21, .25);    --heat-gold-ink: #fcd34d;
    --heat-silver-bg: rgba(203, 213, 225, .22); --heat-silver-ink: #e2e8f0;
    --heat-bronze-bg: rgba(205, 127, 50, .30);  --heat-bronze-ink: #fdba74;
    --heat-blue-2-bg: rgba(96, 165, 250, .32);  --heat-blue-2-ink: #dbeafe;
    --heat-blue-1-bg: rgba(96, 165, 250, .18);  --heat-blue-1-ink: #bfdbfe;
    --heat-blue-0-bg: rgba(96, 165, 250, .09);  --heat-blue-0-ink: #93c5fd;
    --heat-pct-0-bg: #15803d;                   --heat-pct-0-ink: #ffffff;
    --heat-pct-1-bg: rgba(34, 197, 94, .42);    --heat-pct-1-ink: #dcfce7;
    --heat-pct-2-bg: rgba(34, 197, 94, .20);    --heat-pct-2-ink: #86efac;
    --heat-pct-3-bg: rgba(250, 204, 21, .18);   --heat-pct-3-ink: #fde047;
    --heat-pct-4-bg: rgba(249, 115, 22, .20);   --heat-pct-4-ink: #fdba74;
    --heat-pct-5-bg: rgba(239, 68, 68, .18);    --heat-pct-5-ink: #fca5a5;

    --chart-axis: #7c90ac;       /* tick text — clearly readable */
    --chart-axis-line: #3a5279;  /* axis rules / transitions — a clear step above grid */
    --chart-grid: #182339;       /* gridlines — the faintest layer */
    --chart-label: #93a5be;
    --chart-halo: #131c2e;
    --chart-ref: #33445f;
    --data-line-op: 0.8;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .5);
    --shadow-3: 0 12px 36px rgba(0, 0, 0, .6);
}