.race-controls{grid-column:1/-1;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px;align-items:start;margin:0;padding-bottom:20px;border-bottom:1px solid var(--line)}#race-panel{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(160px,1fr);align-items:center;gap:6px 20px;min-width:0}.race-mode{align-self:start}.race-controls #race-note{grid-column:1/-1;height:30px}.race-controls .race-transport{margin:0}.race-controls #race-unavailable{grid-column:1/-1}.race-mode{display:flex;gap:4px;border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:4px;width:fit-content}.race-mode button{border-radius:8px;padding:7px 12px;font-size:11px;font-weight:600}.race-mode button[aria-pressed=true]{background:var(--surface);color:var(--accent);box-shadow:0 1px 5px #0001}.race-mode button:disabled{opacity:.45;cursor:not-allowed}.race-transport{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 7px}.race-transport>button{padding:7px 12px;background:var(--accent);color:white;border-radius:8px;font-size:11px;font-weight:600}.race-transport label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}.race-transport select{font-size:11px;padding:5px;max-width:90px}.race-transport output{font-size:11px;font-variant-numeric:tabular-nums;margin-left:auto;color:var(--text)}#race-scrub{width:100%;accent-color:var(--accent);margin:5px 0;cursor:pointer}#race-note{font-size:10px;color:var(--muted);line-height:1.5;margin:6px 0 0}.ranking-chart.race-track{display:block;max-height:340px;height:340px;position:relative;overflow:auto;padding-right:8px;scrollbar-gutter:stable}.race-row{height:34px;box-sizing:border-box;display:grid;grid-template-columns:20px minmax(80px,1.3fr) minmax(50px,1fr) 55px;gap:7px;align-items:center;padding:0;border-bottom:1px solid var(--line);position:relative}.race-place{font:11px Figtree,sans-serif;color:var(--muted);font-variant-numeric:tabular-nums;}.race-name{font:500 11px Figtree,sans-serif;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}.race-name:hover{color:var(--accent)}.race-value{grid-column:4;grid-row:1;text-align:right;font:600 11px Figtree,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}.race-lane{grid-column:3;grid-row:1;height:7px;position:relative;border-radius:4px;background:repeating-linear-gradient(90deg,var(--line) 0,var(--line) 1px,transparent 1px,transparent 10%),var(--soft);margin-right:4px}.race-lane:after{content:'';position:absolute;right:0;top:-3px;width:5px;height:13px;background:repeating-linear-gradient(0deg,var(--muted) 0,var(--muted) 3px,var(--surface) 3px,var(--surface) 6px);opacity:.7}.race-fill{position:relative;height:100%;border-radius:4px;background:var(--racer);max-width:100%;transition:width var(--race-duration,250ms) linear}.race-fill:after{content:'';position:absolute;right:-4px;top:-2px;width:11px;height:11px;border-radius:50%;background:var(--racer);box-shadow:0 0 0 2px var(--surface)}.race-fill[style*='width: 0%']:after{opacity:.35}.race-controls [hidden]{display:none!important}html:not(.motion-enabled) .race-fill{transition:none}@media(prefers-reduced-motion:reduce){.race-fill{transition:none}}@media(max-width:640px){.race-transport{gap:8px}.race-transport output{font-size:10px}.race-name,.race-value{font-size:10px}.race-mode button{font-size:10px}}

/* Reserve transport space so switching views never changes page height. */
#race-panel[hidden]{display:grid!important;visibility:hidden}.race-name{grid-column:2;grid-row:1}.race-place{grid-column:1;grid-row:1}#race-note{height:60px;overflow:auto}.visual-caption{min-height:45px}

@media(max-width:1000px){.race-controls{grid-template-columns:1fr}}@media(max-width:640px){#race-panel,#race-panel[hidden]{display:block!important}.race-controls #race-note{height:60px}.race-controls .race-transport{margin-bottom:10px}}