/* Run-detail page styles. Variables come from colors_and_type.css. */

.run-hero { padding: clamp(90px, 14vw, 150px) 0 40px; }
.run-hero .display { margin: 10px 0 14px; }
.run-score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.run-score .rs-val { font-family: var(--font-heading); font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 600; letter-spacing: -0.03em; color: var(--skl-blue-bright, #5b9dff); font-variant-numeric: tabular-nums; }
.run-score .rs-of { font-family: var(--font-mono); font-size: 14px; color: var(--muted-foreground); }

/* Detail-page hero timelapse: show the whole frame (including the burned-in
   HUD strip) instead of cropping it to 16:9. */
.run-hero .media-stage { aspect-ratio: auto; min-height: 220px; }
.run-hero .media-stage video { height: auto; object-fit: contain; }

.chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 40px; }
@media (max-width: 900px) { .chips { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .chips { grid-template-columns: repeat(2, 1fr); } }
.chip { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); }
.chip-v { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-l { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }

.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card { margin: 0; padding: 18px 20px 20px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent); }
.chart-card figcaption { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; margin-bottom: 12px; }
.chart-svg { width: 100%; height: auto; overflow: visible; }

/* SVG element classes (styled here so the inline SVG stays data-only) */
.c-base { fill: color-mix(in oklab, var(--foreground) 28%, transparent); }
.c-final { fill: var(--skl-blue-bright, #5b9dff); }
.c-line-base { fill: none; stroke: color-mix(in oklab, var(--foreground) 30%, transparent); stroke-width: 2; }
.c-line-final { fill: none; stroke: var(--skl-blue-bright, #5b9dff); stroke-width: 2.5; }
.c-axis { fill: var(--muted-foreground); font-family: var(--font-mono); font-size: 11px; }
.c-val { fill: var(--muted-foreground); font-family: var(--font-mono); font-size: 10.5px; }
.c-val-final { fill: var(--foreground); }

.timeline { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: beat; }
.beat { position: relative; padding: 0 0 26px 36px; border-left: 2px solid var(--border); }
.beat:last-child { border-left-color: transparent; }
.beat::before { counter-increment: beat; content: counter(beat); position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: 0 0 0 1px var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); }
.beat h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
.beat p { color: var(--muted-foreground); margin: 0 0 8px; }