/* Drunkiokart racer archive · Night Circuit reading surface.
   Shared by the racer pages (racers.html), the 2026 dashboard (2026/, which
   adds dashboard.css) and the local operator page (racer-control.html,
   body.operator). Sections: tokens · base · header · page heading · source ·
   tables · directory · profile hero · placement graph · ledger & side ·
   operator · responsive.
   Calm rules: one surface level for panels, quiet 1px rules, gold only for
   first place / points / active controls, cyan for links. Mario Kart World
   art (img/) carries the colour. Slot colours identify racers within a race. */

:root{
  color-scheme:dark;
  --bg:#07051a;--surface:#100e27;--surface-2:#191736;--ink:#f7f5ff;--muted:#bdb8d8;--line:#332e4f;--line-soft:#211d3b;
  --pink:#ff5679;--cyan:#45e4ff;--gold:#ffca28;--purple:#d39bff;
  --display:Bahnschrift,"Arial Narrow","Segoe UI",sans-serif;
  --radius:10px;--gutter:2rem;--measure:1180px;
  font-family:Bahnschrift,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;
}

/* Base */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55}
::selection{background:var(--gold);color:var(--bg)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a{color:var(--cyan);text-underline-offset:.25em}
a:hover{color:var(--ink)}
button,input,select{font:inherit;caret-color:var(--gold)}
button,select,input{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:.55rem .85rem;border-radius:6px;min-height:44px}
select{cursor:pointer}
button{cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
button:hover{background:var(--surface-2);border-color:var(--cyan)}
button:disabled{cursor:not-allowed;opacity:.5}
button:disabled:hover{background:var(--surface);border-color:var(--line)}
button.quiet{background:transparent;color:var(--muted);font-weight:500;min-height:36px;padding:.3rem .75rem}
button.quiet:hover{color:var(--ink)}
button svg,.step-link svg,.scroll-hint svg,.held-back svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
input::placeholder{color:var(--muted)}
html{scrollbar-color:var(--line) var(--bg)}
h1,h2,h3{font-family:var(--display);text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;margin:0;font-weight:700;font-style:italic;letter-spacing:-.02em;font-stretch:condensed;font-variation-settings:"wdth" 80;overflow-wrap:anywhere}
h2{font-size:1.45rem;line-height:1.2;margin:0;font-weight:650;letter-spacing:-.005em}
h3{font-size:1.05rem;margin:0 0 .4rem;font-weight:650}
p{max-width:70ch;margin:.5rem 0 1rem}
.muted,.note{color:var(--muted)}
.note{font-size:14px}
.number{text-align:right}
.gold{color:var(--gold)}
.purple{color:var(--purple)}
[hidden]{display:none!important}
.skip{position:absolute;top:-80px;left:1rem;background:var(--bg);padding:1rem;z-index:2}
.skip:focus{top:1rem}
img{max-width:100%}
.place{display:block;height:26px;width:auto}

/* Header */
.site-header{max-width:var(--measure);margin:auto;padding:1rem var(--gutter);display:flex;align-items:center;gap:.6rem 2rem;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.brand{color:var(--pink);text-decoration:none;font-family:var(--display);font-size:26px;font-weight:700;font-style:italic;letter-spacing:.01em;font-stretch:condensed;font-variation-settings:"wdth" 80}
.brand:hover{color:var(--pink)}
.brand span{font-size:15px;color:var(--muted);font-weight:500;font-style:normal;letter-spacing:.04em;font-variation-settings:normal;margin-left:.6rem}
.primary-nav{display:flex;gap:1.4rem;font-size:15px;font-weight:600}
.primary-nav a{color:var(--muted);text-decoration:none;padding:.45rem 0;border-bottom:2px solid transparent}
.primary-nav a:hover{color:var(--ink)}
.primary-nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--gold)}
.header-tools{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.status{color:var(--muted);font-size:13px;margin:0;min-height:1.4em}
.status.error{color:var(--gold)}
main{max-width:var(--measure);margin:auto;padding:1.6rem var(--gutter) 2.5rem}

/* Page heading and toolbar */
.crumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:0 0 .8rem}
.crumbs a{font-weight:600}
.page-heading{margin-bottom:1.4rem}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
#intro{color:var(--muted);margin:.65rem 0 0;font-size:17px}
.toolbar{display:flex;gap:.8rem 1rem;align-items:end;flex-wrap:wrap;margin:0 0 2rem}
label{display:flex;flex-direction:column;gap:.35rem;min-width:160px;font-size:14px;color:var(--muted)}
label select,label input{color:var(--ink)}
.toolbar input{width:min(300px,100%)}
.racer-nav{display:flex;align-items:end;gap:.5rem;flex-wrap:wrap}
.racer-nav label{min-width:180px}
.step-link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.55rem .85rem;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.step-link:hover{border-color:var(--cyan);color:var(--ink);background:var(--surface-2)}
.step-link[aria-disabled=true]{opacity:.4;pointer-events:none}

/* Source line: one quiet row; notes behind a disclosure. */
.source{display:flex;align-items:center;gap:.4rem .8rem;flex-wrap:wrap;margin-left:auto;align-self:center;max-width:none;font-size:13px}
.source-tag{font-family:var(--display);font-weight:700;font-style:italic;font-size:13px;letter-spacing:.05em;color:var(--pink);white-space:nowrap}
.source-facts{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin:0;padding:0;list-style:none;color:var(--muted)}
.source-facts li::before{content:"· ";color:var(--line)}
.source-notes summary{cursor:pointer;color:var(--cyan);font-weight:600;list-style-position:inside}
.source-notes[open]{flex-basis:100%}
.source-notes p{margin:.4rem 0 0;color:var(--muted);max-width:90ch}

/* Tables */
.scroll-table{overflow-x:auto;scrollbar-color:var(--line) var(--bg);scrollbar-width:thin}
.scroll-hint{display:none;align-items:center;gap:.4rem;color:var(--muted);font-size:13px;margin:0 0 .5rem}
.scroll-table.overflowing .scroll-hint{display:flex}
table{width:100%;border-collapse:collapse;text-align:left;font-size:15px}
th{color:var(--muted);font-weight:500;font-size:13px;letter-spacing:.02em;padding:.7rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.8rem .8rem;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{padding-right:0}
td a{font-weight:650}
th.number,td.number{text-align:right}

/* Directory */
.promo{display:flex;align-items:center;gap:1.2rem;padding:.9rem 1.2rem;margin:0 0 1.8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none}
.promo:hover{border-color:var(--gold);color:var(--ink)}
.promo-art{width:92px;height:70px;object-fit:contain;flex:none}
.promo strong{display:block;font-family:var(--display);font-size:1.3rem;font-style:italic}
.promo span span{color:var(--cyan);font-weight:600;font-size:15px}
.directory td.rank-cell,.directory th.rank-col{width:3.5ch;color:var(--muted);font-family:var(--display);font-weight:700;font-size:1.1rem}
.directory .who-line{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.directory td.racer-cell a{font-family:var(--display);font-size:1.25rem;font-weight:650;font-style:italic;text-decoration:none;color:var(--ink)}
.directory td.racer-cell a:hover{color:var(--cyan);text-decoration:underline}
.directory tbody tr:hover{background:var(--surface)}
.directory .points{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--gold)}
.tag{display:inline-block;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:.05rem .45rem;font-family:Bahnschrift,"Segoe UI",sans-serif;font-style:normal;font-weight:500}
.tag.champion{color:var(--gold);border-color:#6b5412}
.pending{display:block;width:100%;font-size:13px;color:var(--gold);font-weight:500}
.empty{border-top:1px solid var(--line);padding:2rem 0}
.empty h2{max-width:25ch}

/* Profile hero: stat strip + finishes by place */
.result-band{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:0 0 1rem}
.summary{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));margin:0;padding:1.4rem 0;align-content:center}
.summary div{padding:0 1.2rem;border-left:1px solid var(--line-soft);min-width:0}
.summary div:first-child{border-left:0}
dt{font-size:13px;color:var(--muted);letter-spacing:.02em}
dd{margin:.15rem 0 0;font-family:var(--display);font-size:2.5rem;font-weight:700;line-height:1.05;font-stretch:condensed;font-variation-settings:"wdth" 85}
.summary .stat-points dd{color:var(--gold)}
.summary small{display:block;font-size:13px;color:var(--muted);margin-top:.2rem}
.places{border-left:1px solid var(--line);padding:1.1rem 1.3rem .9rem;min-width:0}
.places h2{font-size:13px;font-family:inherit;font-weight:500;color:var(--muted);letter-spacing:.02em;margin:0 0 .5rem}
.place-bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.4rem;margin:0;padding:0;list-style:none}
.place-bars li{display:flex;flex-direction:column;align-items:center;min-width:0}
.place-bars b{font-size:14px;font-weight:650;margin-bottom:.15rem}
.place-bars .bar-slot{display:flex;align-items:flex-end;justify-content:center;width:100%;height:64px}
.place-bars .bar{width:100%;max-width:30px;background:var(--cyan);border-radius:3px 3px 0 0;min-height:2px}
.place-bars .bar.zero{background:var(--line)}
.place-bars li:first-child .bar:not(.zero){background:var(--gold)}
.bar-place{height:19px;width:auto;margin-top:.35rem;max-width:100%;object-fit:contain}
.held-back{display:flex;gap:.6rem;align-items:flex-start;font-size:14px;color:var(--ink);background:#2a2208;border:1px solid #6b5412;border-radius:6px;padding:.65rem .85rem;margin:0 0 1rem;max-width:none}
.held-back svg{width:18px;height:18px;margin-top:.15rem;stroke:var(--gold)}

/* Placement graph */
.placement-section{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:1.3rem 1.4rem 1.2rem;margin:2rem 0 2.8rem;min-width:0;scroll-margin-top:1rem}
.graph-head{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap}
.graph-art{flex:none;line-height:0}
.graph-course{width:76px;height:60px;object-fit:contain}
.graph-title{min-width:0;flex:1}
.graph-head h2{margin:0;font-style:italic;font-size:1.6rem}
.graph-sub{margin:.15rem 0 0;font-size:14px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:.15rem .65rem;color:var(--ink);white-space:nowrap}
.chip.estimated{border-color:#6b5412;color:var(--gold)}
.chip.detected{border-color:#1f5f6b;color:var(--cyan)}
.graph-controls{display:grid;grid-template-columns:auto minmax(0,2fr) auto minmax(0,1fr) auto;gap:.6rem;align-items:end;margin:1.1rem 0 .3rem}
.graph-controls label{min-width:0}
.graph-controls select{width:100%;min-width:0}
.graph-controls .step{padding:.55rem .7rem}
.legend-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;margin:1rem 0 .5rem}
.graph-legend{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem;min-width:0;flex:1 1 560px}
.graph-legend legend{color:var(--muted);font-size:13px;margin-bottom:.4rem;padding:0}
.graph-legend label{flex-direction:row;align-items:center;gap:.45rem;min-width:0;min-height:36px;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:.25rem .7rem .25rem .5rem;cursor:pointer;background:var(--bg);max-width:100%}
.graph-legend label:hover{border-color:var(--muted)}
.graph-legend label.off{color:var(--muted);background:transparent}
.graph-legend label.off .swatch{opacity:.35}
.graph-legend label.is-highlight{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.graph-legend input{min-height:0;width:16px;height:16px;margin:0;padding:0;accent-color:var(--cyan)}
.legend-text{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem;min-width:0}
.graph-legend .who{color:var(--ink);overflow-wrap:anywhere}
.graph-legend .finish{font-size:12px;color:var(--muted)}
.swatch{display:inline-block;width:18px;height:4px;border-radius:2px;background:currentColor;flex:none}
.legend-actions{display:flex;gap:.4rem;flex:none}
.legend-actions button{min-height:36px;padding:.3rem .75rem;font-size:13px;font-weight:600}
.graph-scroll{overflow-x:auto;scrollbar-color:var(--line) var(--bg);margin:.4rem 0 0;border-radius:4px}
.placement-plot{display:block;width:100%;min-width:720px;height:auto;touch-action:pan-x pan-y;cursor:crosshair;user-select:none}
.graph-grid{stroke:var(--line-soft);stroke-width:1}
.graph-grid.p1{stroke:#4a3f16}
.graph-axis{fill:var(--muted);font:15px Bahnschrift,"Segoe UI",sans-serif}
.graph-axis.p1{fill:var(--gold);font-weight:700}
.graph-axis-title{fill:var(--muted);font:14px Bahnschrift,"Segoe UI",sans-serif}
.placement-trace{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;opacity:.92}
.placement-plot.focused .placement-trace{opacity:.24}
.placement-plot.focused .placement-trace.active{opacity:1;stroke-width:4.5}
.placement-dot{stroke:var(--bg);stroke-width:1.5}
.placement-plot.focused .placement-dot{opacity:.3}
.placement-plot.focused .placement-dot.active{opacity:1}
.end-label{font:600 15px Bahnschrift,"Segoe UI",sans-serif;stroke:none}
.placement-plot.focused .end-label{opacity:.45}
.placement-plot.focused .end-label.active{opacity:1;font-weight:700}
.graph-cursor{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.graph-marker{stroke:var(--bg);stroke-width:2}
.graph-key{font-size:13px;color:var(--muted);margin:.5rem 0 1rem;max-width:none}
.time-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center}
.time-row label{min-width:0}
.time-now{font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--gold);min-width:4ch;text-align:right}
.placement-section input[type=range]{padding:0;accent-color:var(--gold);width:100%;cursor:ew-resize;background:transparent;border:0}
.graph-reading{max-width:none;margin:.8rem 0 0}
.graph-reading ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem 1.2rem;margin:0;padding:0;list-style:none}
.graph-reading li{display:grid;grid-template-columns:18px minmax(0,1fr) auto 2.6em;align-items:center;gap:.5rem;font-size:14px;min-width:0;padding:.3rem 0;border-bottom:1px solid var(--line-soft)}
.graph-reading li span:nth-child(2){overflow-wrap:anywhere}
.graph-reading li.unseen{color:var(--muted)}
.graph-reading li small{font-size:11px;color:var(--muted);text-align:right}
.graph-reading b{font-family:var(--display);font-weight:700;min-width:2.2ch}
.state-note{font-size:13px;color:var(--muted);margin:.4rem 0 0;max-width:95ch}
.placement-section details{margin-top:1rem}
.placement-section summary{cursor:pointer;color:var(--cyan);font-weight:600;min-height:32px}
.placement-section details .scroll-table{max-height:300px;margin-top:.8rem}
.slot-0{stroke:#ff4d5e;fill:#ff4d5e;color:#ff4d5e}
.slot-1{stroke:#ff9f1c;fill:#ff9f1c;color:#ff9f1c}
.slot-2{stroke:#ffd23f;fill:#ffd23f;color:#ffd23f}
.slot-3{stroke:#3ddc84;fill:#3ddc84;color:#3ddc84}
.slot-4{stroke:#2ec4ff;fill:#2ec4ff;color:#2ec4ff}
.slot-5{stroke:#839cff;fill:#839cff;color:#839cff}
.slot-6{stroke:#c86bff;fill:#c86bff;color:#c86bff}
.slot-7{stroke:#ff6bcb;fill:#ff6bcb;color:#ff6bcb}
.placement-trace{fill:none}
.end-label{stroke:none}
.placement-dot.slot-0,.placement-dot.slot-1,.placement-dot.slot-2,.placement-dot.slot-3,.placement-dot.slot-4,.placement-dot.slot-5,.placement-dot.slot-6,.placement-dot.slot-7{stroke:var(--bg)}

/* Ledger and side sections */
.profile-columns{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:3rem}
.profile-section{margin:0 0 2.6rem;min-width:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.section-lede{margin:0 0 .8rem;color:var(--ink)}
.race-ledger th{border-bottom:0;padding-top:0}
.race-ledger td{white-space:normal;padding-top:.55rem;padding-bottom:.55rem}
.race-ledger td.race-cell{white-space:nowrap}
.race-ledger .race-cell strong{display:block;font-weight:650}
.race-ledger .race-cell span{display:block;font-size:13px;color:var(--muted)}
.course-line{display:flex;align-items:center;gap:.6rem;min-width:11rem}
.course-ico{width:46px;height:36px;object-fit:contain;flex:none}
.finish-art{display:inline-flex;align-items:center;min-height:26px}
.race-ledger .finish{font-family:var(--display);font-size:1.25rem;font-weight:700}
.race-ledger tr.current td{background:var(--surface-2)}
.race-ledger tr.current td:first-child{box-shadow:inset 3px 0 0 var(--gold);padding-left:.7rem}
.race-ledger .view-graph{white-space:nowrap;min-height:36px;padding:.3rem .65rem;font-size:13px;background:transparent}
.race-ledger .view-graph[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.result{font-size:12px;display:inline-block;padding:.15rem .5rem;border:1px solid var(--line);border-radius:3px;color:var(--muted);white-space:normal;line-height:1.35}
.result.confirmed{color:var(--cyan);border-color:#1f5f6b}
.result.provisional{color:var(--gold);border-color:#6b5412;border-style:dashed}
#load-older{margin-top:.8rem}
.item-tiles{list-style:none;margin:0 0 .6rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0 1.2rem}
.item-tiles li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:.6rem;align-items:center;padding:.3rem 0;border-bottom:1px solid var(--line-soft)}
.item-tiles .icon{width:34px;height:34px;object-fit:contain}
.item-tiles b{font-family:var(--display);font-size:1.2rem;line-height:1;order:3}
.item-tiles span{font-size:14px;color:var(--ink);line-height:1.25;overflow-wrap:anywhere}
.course-list{list-style:none;margin:0 0 .4rem;padding:0}
.course-list li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.45rem 0;border-bottom:1px solid var(--line-soft)}
.course-list .course-ico{width:52px;height:40px}
.course-text strong{display:block;font-weight:600;font-size:15px}
.course-text span{display:block;font-size:13px;color:var(--muted)}
.course-list .place{height:22px}
.unknown{border:1px dashed var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.unknown p{margin:0;font-size:14px;color:var(--muted)}
.unknown strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.25rem}
.observations{list-style:none;margin:0 0 .6rem;padding:0}
.observations li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft)}
.observations strong{font-size:15px;font-weight:650}
.observations .count{font-family:var(--display);font-size:1.2rem;font-weight:700;text-align:right}
.observations span:not(.count){grid-column:1/-1;font-size:13px;color:var(--muted)}
.about{border-top:1px solid var(--line);padding-top:.8rem}
.about summary{cursor:pointer;color:var(--cyan);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem 1rem;margin:.8rem 0}
.facts dd{font-size:1.5rem}
meter{width:100%;min-width:100px;height:16px;accent-color:var(--cyan)}
footer{border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem;color:var(--muted);font-size:13px}
footer p{margin:.2rem 0;max-width:none}

/* Operator controls (racer-control.html) */
.operator main{max-width:1420px}
.operator .site-header{max-width:1420px}
.operator .page-heading h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.operator .page-heading p{color:var(--muted)}
.operator-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.operator section{min-width:0;margin-bottom:2.5rem}
.operator h2{margin:0 0 .8rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid input,.form-grid select{width:100%;min-width:0}
.form-grid label{min-width:0}
.full{grid-column:1/-1}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.actions button[type=submit]{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.actions button[type=submit]:hover{background:#ffdc70}
.actions button[type=submit]:disabled:hover{background:var(--gold)}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.5rem 0}
.slots label,.confirm-slots label{min-width:0}
.slots select{width:100%;min-width:0}
.race-summary{margin:1rem 0}
.confirm-slots{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.confirm-slots input{width:100%}
.nav-links{display:flex;gap:1rem;flex-wrap:wrap;font-size:14px;margin-left:auto}
.roster-list{margin-top:1rem;padding-left:1.2rem}
.roster-list small{color:var(--muted)}
.operator form{margin-top:1rem}
.operator details{border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem}
.operator summary{cursor:pointer}
.operator .status{font-size:15px;margin:0 0 1.5rem}
button.danger{color:var(--pink)}

@media(prefers-reduced-motion:no-preference){
  button,.step-link,.graph-legend label,.promo{transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out}
  .placement-trace,.end-label,.placement-dot{transition:opacity .2s ease-out}
}

/* Responsive */
@media(max-width:1100px){
  .result-band{grid-template-columns:minmax(0,1fr)}
  .places{border-left:0;border-top:1px solid var(--line)}
  .graph-controls{grid-template-columns:auto minmax(0,1fr) auto}
  .graph-controls .highlight-field{grid-column:1/-1}
  .graph-controls .older{grid-column:1/-1;justify-self:start}
  .graph-reading ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The ledger needs full width so every column stays on screen. */
  .profile-columns{grid-template-columns:minmax(0,1fr);gap:0}
}
@media(max-width:800px){
  :root{--gutter:1rem}
  .operator-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .site-header{padding:.8rem var(--gutter);gap:.4rem 1.2rem}
  .brand{font-size:22px}
  .header-tools{width:100%;justify-content:space-between;margin-left:0}
  main{padding:1.2rem var(--gutter) 2rem}
  .toolbar label{flex:1 1 200px}
  .toolbar input{width:100%}
  .source{margin-left:0}
  .racer-nav{width:100%}
  .racer-nav label{flex:1 1 100%;order:-1}
  .racer-nav .step-link{flex:1}
  .summary{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.1rem;padding:1.1rem 0}
  .summary div:nth-child(4){border-left:0}
  dd{font-size:2.1rem}
  .placement-section{padding:1rem 1rem .9rem;margin-left:calc(-1 * var(--gutter) + 4px);margin-right:calc(-1 * var(--gutter) + 4px)}
  .graph-course{width:58px;height:46px}
  .graph-head h2{font-size:1.3rem}
  .graph-legend label{min-height:44px;flex:1 1 calc(50% - .4rem)}
  .graph-legend label.qualified{flex-basis:100%}
  .legend-actions{width:100%}
  .legend-actions button{flex:1;min-height:44px}
  .graph-reading ol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .scroll-hint.always{display:flex}
  th,td{padding:.7rem .55rem}
  .promo{padding:.75rem .9rem;gap:.9rem}
  .promo-art{width:70px;height:54px}
  /* Directory rows become stacked entries instead of a sideways-scrolling table. */
  .directory thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .directory table,.directory tbody{display:block}
  .directory tr{display:grid;grid-template-columns:2.2em repeat(4,minmax(0,1fr));gap:.35rem .6rem;padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
  .directory td{display:flex;flex-direction:column;padding:0;border:0;white-space:normal}
  .directory td::before{content:attr(data-short);font-size:12px;color:var(--muted)}
  .directory td.rank-cell{grid-row:1;grid-column:1;justify-content:center}
  .directory td.racer-cell{grid-row:1;grid-column:2/5}
  .directory td.points-cell{grid-row:1;grid-column:5;text-align:right;align-items:flex-end;justify-content:center}
  .directory td.points-cell::before,.directory td.racer-cell::before,.directory td.rank-cell::before{content:none}
  .directory td.number{text-align:left}
  .directory td:nth-child(3){grid-column:2}
  .directory .scroll-table{overflow:visible}
  /* Ledger rows stack; every value stays labelled. */
  .race-ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .race-ledger table,.race-ledger tbody{display:block}
  .race-ledger tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.35rem .9rem;padding:.75rem .2rem;border-bottom:1px solid var(--line-soft);align-items:center}
  .race-ledger td{padding:0;border:0;background:transparent!important}
  .race-ledger td.event-cell{grid-column:1/2}
  .race-ledger td.race-cell{grid-column:1/-1}
  .race-ledger td.result-cell{grid-column:1/3}
  .race-ledger td.points-cell::after{content:" pts";font-size:13px;color:var(--muted)}
  .race-ledger tr.current td:first-child{box-shadow:none;padding-left:0}
  .race-ledger tr.current{box-shadow:inset 3px 0 0 var(--gold);padding-left:.7rem;background:var(--surface-2)}
  .race-ledger .scroll-table{overflow:visible}
  .race-ledger td.graph-cell{grid-column:1/-1}
  .race-ledger .view-graph{min-height:44px;padding:.4rem 0;border:0;color:var(--cyan);justify-self:start;font-size:14px}
  .race-ledger .view-graph::after{content:" →"}
  .race-ledger .view-graph[aria-pressed=true]{color:var(--gold)}
  .facts dd{font-size:1.4rem}
}
@media(max-width:420px){
  .summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary div:nth-child(3),.summary div:nth-child(5){border-left:0}
  .summary div:nth-child(4){border-left:1px solid var(--line-soft)}
  .graph-controls{grid-template-columns:auto minmax(0,1fr) auto;gap:.45rem}
}
.graph-method{font-size:12px;color:var(--muted);margin:.8rem 0 0;max-width:none}
.state-note:empty{display:none}

/* Racecraft (rerun stats) */
.craft{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.2rem;margin:0 0 .6rem}
.craft dd{font-size:1.9rem}
.craft small{display:block;font-size:12px;color:var(--muted);margin-top:.15rem}
.race-ledger .race-cell .drink-note{color:var(--purple)}