/* ============================================================
   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; }