[hidden] { display: none !important; }
:root {
  --bg: #101114; --card: #191b20; --card2: #20232a; --line: #2c3038; --ink: #e9ebef; --ink2: #a3a9b5; --ink3: #6e7582;
  --purple: #b36bff; --green: #2fd36b; --yellow: #f3c623; --red: #ff4b4b; --blue: #4aa8ff; --orange: #ff9f2e;
  --soft: #ff3b3b; --medium: #f6c844; --hard: #eeeeee; --inter: #3bbf4a; --wet: #2f8cff;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding-bottom: env(safe-area-inset-bottom); }
button, select, input { font: inherit; color: inherit; background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
button { cursor: pointer; }
button:hover { border-color: var(--ink3); }
button:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.num, td.t { font-family: var(--mono); font-variant-numeric: tabular-nums; }

header.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.title { display: flex; gap: 10px; align-items: center; min-width: 0; }
#sessName { font-weight: 700; font-size: 16px; }
.sub { color: var(--ink2); font-size: 12px; }
.mode { background: var(--red); color: #fff; font-weight: 800; font-size: 11px; padding: 2px 6px; border-radius: 4px; letter-spacing: .05em; }
.mode.replay { background: var(--blue); }
.mode.off { background: var(--ink3); }
.status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill { padding: 3px 10px; border-radius: 99px; font-weight: 700; font-size: 12px; background: var(--card2); }
.pill.GREEN { background: #12361f; color: var(--green); }
.pill.YELLOW, .pill.VSC, .pill.VSC_ENDING, .pill.SC, .pill.SC_ENDING { background: #3b3210; color: var(--yellow); }
.pill.RED { background: #4a1414; color: var(--red); }
.pill.CHEQUERED { background: #eee; color: #111; }
.clock { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.delay { color: var(--ink2); font-size: 12px; }
.delay input { width: 56px; }
.alerts { position: relative; }
.help { width: min(340px, 92vw) !important; }
.help p { margin: 0; color: var(--ink2); }
.alerts summary { list-style: none; cursor: pointer; padding: 2px 4px; }
.alerts summary::-webkit-details-marker { display: none; }
.alerts .pop { position: absolute; right: 0; top: 30px; z-index: 5; width: min(280px, 90vw); display: grid; gap: 8px; font-size: 13px; }
button.small { font-size: 12px; padding: 2px 8px; }
#next { margin-bottom: 12px; }
#next .when { font-size: 20px; font-weight: 800; }
#next ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink2); }
#next li.past { text-decoration: line-through; opacity: .6; }

nav.tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
nav.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 10px; color: var(--ink2); white-space: nowrap; }
nav.tabs button.on { color: var(--ink); border-bottom-color: var(--red); }

.replaybar { display: flex; gap: 8px; align-items: center; padding: 8px 16px; background: #14202e; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.replaybar input[type=range] { flex: 1; min-width: 160px; }
#rpInfo { font-family: var(--mono); color: var(--ink2); font-size: 12px; }

main { padding: 12px 16px; }
.tab { display: none; }
.tab.on { display: block; }
main.guarded .tab.on:not(#tab-replay) { display: none; }
.guard { max-width: 560px; margin: 24px auto; text-align: center; }
.guard .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.summary dl.kv dd { white-space: normal; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.stack { display: grid; gap: 12px; }
.grid2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.scroll { overflow-x: auto; }
.hint { color: var(--ink3); font-size: 12px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.muted { color: var(--ink3); }

.dash { display: grid; gap: 12px; grid-template-columns: minmax(420px, 1.1fr) minmax(320px, 1.3fr) minmax(280px, .9fr); align-items: start; }
@media (max-width: 1200px) { .dash { grid-template-columns: minmax(380px, 1fr) minmax(300px, 1fr); } .side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } }
@media (max-width: 760px) { .dash { grid-template-columns: 1fr; } main { padding: 8px; } input, select { font-size: 16px; } header.top, nav.tabs { padding-left: 8px; padding-right: 8px; } }
.side { display: grid; gap: 12px; align-content: start; }
.tower, #board { overflow-x: auto; }
@media (max-width: 760px) {
  #tower tr[data-n] td:last-child, #tower th:last-child { display: none; }
  table.dense td, table.dense th, #tower td, #tower th { padding: 3px 4px; font-size: 12px; }
  .dash { grid-template-columns: minmax(0, 1fr); }
}

table { border-collapse: collapse; width: 100%; }
th { text-align: left; color: var(--ink3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 4px 6px; border-bottom: 1px solid #22252c; white-space: nowrap; }
tr.sel td { background: #24303f; }
tr[aria-expanded="true"] td { border-bottom-color: transparent; }
.drawer-row > td { white-space: normal; background: #1d2530; padding: 0; }
.drawer { overflow: hidden; padding: 10px 12px 12px; display: grid; gap: 10px; animation: drawer .25s ease-out; }
@keyframes drawer { from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 600px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none !important; } }
tr.out td { opacity: .45; }
tr[data-n] { cursor: pointer; }
table.dense td, table.dense th { padding: 3px 5px; font-size: 13px; }
.drv { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.drv i { width: 4px; height: 16px; border-radius: 2px; display: inline-block; }
.pos { font-weight: 800; text-align: right; width: 24px; }
.cut td { border-bottom: 2px dashed var(--red); }
.c-purple { color: var(--purple); } .c-green { color: var(--green); } .c-yellow { color: var(--yellow); } .c-red { color: var(--red); } .c-blue { color: var(--blue); }
.bg-purple { background: var(--purple); } .bg-green { background: var(--green); } .bg-yellow { background: var(--yellow); } .bg-pit { background: var(--blue); } .bg-none { background: #33363e; }
.tyre { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); }
.tyre b { width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; display: inline-grid; place-items: center; font-size: 10px; color: var(--ink3); }
.tyre .SOFT { color: var(--soft); } .tyre .MEDIUM { color: var(--medium); } .tyre .HARD { color: var(--hard); } .tyre .INTERMEDIATE { color: var(--inter); } .tyre .WET { color: var(--wet); }
.badge { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: var(--card2); color: var(--ink2); }
.badge.pit { background: var(--blue); color: #fff; }
.badge.del { background: var(--red); color: #fff; }
.segs { display: inline-flex; gap: 1px; vertical-align: middle; }
.segs span { width: 5px; height: 12px; border-radius: 1px; }
.msbar { display: flex; gap: 1px; height: 6px; margin-top: 2px; }
.msbar span { flex: 1; border-radius: 1px; }

.mapcard { position: relative; }
#map { width: 100%; height: min(62vh, 620px); display: block; }
@media (max-width: 760px) { #map { height: 52vh; } }
.maptools { display: flex; gap: 12px; font-size: 12px; color: var(--ink2); flex-wrap: wrap; }
.flaglegend { font-size: 12px; color: var(--ink2); min-height: 18px; }
#map .trk { fill: none; stroke: #3a3f4a; stroke-width: 140; stroke-linejoin: round; stroke-linecap: round; }
#map .trk-in { fill: none; stroke: #23262d; stroke-width: 90; stroke-linejoin: round; stroke-linecap: round; }
#map .ms { fill: none; stroke-width: 90; stroke-linecap: butt; opacity: .85; }
#map .marshal { fill: none; stroke: transparent; stroke-width: 150; stroke-linecap: butt; }
#map .marshal.YELLOW { stroke: var(--yellow); }
#map .marshal.DOUBLE.YELLOW, #map .marshal.DOUBLE { stroke: var(--orange); }
#map.RED .trk { stroke: var(--red); }
#map.SC .trk, #map.VSC .trk, #map.SC_ENDING .trk, #map.VSC_ENDING .trk { stroke: #7a6512; }
#map .corner { fill: var(--ink3); font-size: 260px; text-anchor: middle; dominant-baseline: middle; }
#map .sf { stroke: #fff; stroke-width: 60; }
#map .car circle { stroke: #111; stroke-width: 40; }
#map .car text { font-size: 300px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 60px; }
#map .car.sel circle { stroke: #fff; stroke-width: 70; }
#map .car.pit { opacity: .45; }
#map .ghost { transition: transform 1s linear; }
@media (prefers-reduced-motion: reduce) { #map .ghost { transition: none; } }
#map .ghost circle { fill: none; stroke: #fff; stroke-width: 50; stroke-dasharray: 80 60; }
#map .ghost text { font-size: 240px; fill: #fff; }

.focus-head { display: flex; gap: 10px; align-items: center; }
.focus-head img { width: 56px; height: 56px; border-radius: 50%; background: var(--card2); object-fit: cover; }
.focus-head .nm { font-weight: 800; font-size: 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 8px; font-size: 13px; }
.kv dt { color: var(--ink3); } .kv dd { margin: 0; font-family: var(--mono); }
.gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.gauge { background: var(--card2); border-radius: 6px; padding: 4px 6px; }
.gauge .v { font-family: var(--mono); font-weight: 800; font-size: 16px; }
.gauge .l { color: var(--ink3); font-size: 10px; text-transform: uppercase; }
.bar { height: 5px; background: #2a2d35; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; }
.callout { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #1f2a1f; border: 1px solid #2c4a33; }
.callout.warn { background: #2f2812; border-color: #5a4a1a; }
.callout b { font-size: 15px; }

.rc { font-size: 12px; display: grid; gap: 4px; }
.rc div { display: grid; grid-template-columns: 58px 1fr; gap: 6px; }
.rc time { color: var(--ink3); font-family: var(--mono); }
.flag-YELLOW, .flag-DOUBLE { color: var(--yellow); } .flag-RED { color: var(--red); } .flag-GREEN, .flag-CLEAR { color: var(--green); } .flag-BLUE { color: var(--blue); }

.chart { position: relative; }
.chart svg { width: 100%; display: block; overflow: visible; }
.chart .axis text { fill: var(--ink3); font-size: 11px; }
.chart .grid line { stroke: #262a31; }
.chart .tip { position: absolute; pointer-events: none; background: #0c0d10ee; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; white-space: nowrap; z-index: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--card2); font-size: 12px; cursor: pointer; }
.chip.off { opacity: .4; }
.chip i { width: 10px; height: 3px; display: inline-block; border-radius: 2px; }

.stint { position: relative; height: 18px; background: #22252c; border-radius: 3px; }
.stint span { position: absolute; top: 0; bottom: 0; border-radius: 3px; font-size: 10px; color: #111; font-weight: 800; padding-left: 4px; overflow: hidden; border-right: 2px solid var(--card); }
.radio audio { height: 30px; width: 220px; }

.login { position: fixed; inset: 0; background: #000c; display: grid; place-items: center; z-index: 10; padding: 16px; }
.login form { display: grid; gap: 8px; width: min(320px, 100%); }
.login h2 { margin: 0 0 8px; }
.err { color: var(--red); min-height: 1em; margin: 0; }
.sessions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sessions .card div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* predict and fantasy */
.pr-head { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.pr-head h2 { margin: 2px 0; font-size: 22px; }
.tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.tile { background: var(--card2); border-radius: 8px; padding: 6px 12px; min-width: 84px; display: grid; }
.tile b { font-size: 20px; font-family: var(--mono); } .tile b small { font-size: 12px; color: var(--ink3); }
.tile span { font-size: 11px; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }
h3.section { margin: 8px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.qhead { display: flex; gap: 8px; align-items: baseline; }
.picks { margin: 8px 0; padding-left: 22px; } .picks.single { list-style: none; padding-left: 0; }
.picks li { margin: 3px 0; white-space: normal; } .pv { font-weight: 700; }
.conf.high { color: var(--green); } .conf.medium { color: var(--yellow); } .conf.low { color: var(--ink2); }
.answer { margin-top: 6px; font-size: 13px; color: var(--ink2); }
details { margin-top: 6px; } summary { cursor: pointer; color: var(--blue); font-size: 13px; }
details p, details li { font-size: 13px; color: var(--ink2); white-space: normal; }
.toolbar button.on { border-color: var(--blue); color: var(--blue); }
code { font-family: var(--mono); background: var(--card2); padding: 1px 4px; border-radius: 4px; }
tr[data-n]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* phones: popovers fit the screen */
@media (max-width: 760px) {
  .alerts .pop { position: fixed; left: 8px; right: 8px; top: 64px; width: auto !important; }
}