/* live.css — native motorsport live-timing page (see live.js). Uses the app's tokens from
   index.html: --amber --hot --bg --bg2 --card --line --fg --muted --dim --ok --bad --head --mono */

/* the page body becomes a fixed column: header on top, the table scrolls on its own */
.pg .body:has(> .lv) { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lv { display: flex; flex-direction: column; height: 100%; min-height: 100%; background: var(--bg); }

/* ── header strip ── */
.lv-head { flex: none; background: var(--bg2); border-bottom: 1px solid var(--line); }
.lv-flag { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font: 800 12px/1 var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: rgba(139,152,165,.08); border-bottom: 1px solid var(--line); }
.lv-fdot { width: 12px; height: 12px; border-radius: 3px; background: var(--dim); flex: none; }
.lv-ftxt { flex: none; }
.flag-green .lv-flag { color: var(--ok); background: rgba(46,204,113,.14); }
.flag-green .lv-fdot { background: var(--ok); }
.flag-yellow .lv-flag { color: var(--amber); background: rgba(255,176,32,.16); }
.flag-yellow .lv-fdot { background: var(--amber); }
.flag-red .lv-flag { color: #ff6b6b; background: rgba(255,77,77,.18); }
.flag-red .lv-fdot { background: var(--bad); animation: lv-blink 1s infinite; }
.flag-warmup .lv-flag { color: #b48cff; background: rgba(155,107,255,.14); }
.flag-warmup .lv-fdot { background: #9b6bff; }
.flag-finish .lv-flag { color: var(--fg); background: rgba(242,244,246,.08); }
.flag-finish .lv-fdot, .lv-chk { background: repeating-conic-gradient(#f2f4f6 0 25%, #0e1318 0 50%) 0 0 / 6px 6px; border: 1px solid var(--line); }
.lv-clock { margin-left: auto; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.lv-clock small { font: 700 10px var(--head); letter-spacing: .8px; color: var(--muted); white-space: nowrap; }
.lv-clock b { font: 700 18px/1 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.lv-conn { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); flex: none; margin-left: 4px; }
.lv-conn.live { background: var(--ok); box-shadow: 0 0 0 3px rgba(46,204,113,.18); }
.lv-conn.connecting { background: var(--amber); animation: lv-blink 1s infinite; }
.lv-conn.off { background: var(--bad); }
@keyframes lv-blink { 50% { opacity: .25; } }
.lv-info { padding: 9px 14px 10px; min-width: 0; }
.lv-ev { font: 800 16px/1.2 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-sess { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-sess:empty { display: none; }
.lv-ann { flex: none; background: rgba(255,176,32,.12); border-bottom: 1px solid rgba(255,176,32,.3); padding: 7px 14px; font-size: 13px; }

/* ── class filter chips ── */
.lv-chips { flex: none; display: flex; gap: 8px; padding: 8px 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.lv-chips::-webkit-scrollbar { display: none; }
.lv-chips button { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lv-chips button.on { background: var(--amber); border-color: var(--amber); color: #1a1200; }

/* ── standings table ── */
.lv-wrap { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: var(--sab); }
.lv-tbl { border-collapse: separate; border-spacing: 0; min-width: 100%; white-space: nowrap; font-size: 13px; }
.lv-tbl th, .lv-tbl td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
.lv-tbl thead th { position: sticky; top: 0; z-index: 3; background: var(--bg); font: 800 10.5px var(--head); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); padding-top: 9px; padding-bottom: 7px; }
/* Pos | No. | Driver stay pinned while the timing columns scroll sideways.
   One divider only, after Pos; No. sits tight against the name. */
.lv-tbl .c-pos, .lv-tbl .c-no, .lv-tbl .c-drv { position: sticky; background: var(--bg); z-index: 2; }
.lv-tbl thead .c-pos, .lv-tbl thead .c-no, .lv-tbl thead .c-drv { z-index: 4; }
.lv-tbl .c-pos, .lv-tbl .c-no { font: 700 14px var(--mono); vertical-align: middle; }
.lv-tbl .c-pos { left: 0; min-width: 44px; padding-left: 12px; padding-right: 8px; text-align: right; color: var(--muted); border-right: 1px solid var(--line); }   /* real border: a box-shadow gets painted over by the next sticky cell */
.lv-tbl .c-no { left: 44px; min-width: 44px; padding-left: 10px; padding-right: 4px; text-align: left; color: var(--amber); }
.lv-tbl .c-drv { left: 88px; text-align: left; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.lv-tbl .c-drv .nm { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lv-tbl .c-drv .nm .fl { width: 18px; height: 13px; margin-right: 6px; vertical-align: -1px; }
.lv-tbl .c-drv small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.lv-tbl .c-laps { font: 700 13px var(--mono); }
.lv-tbl .c-t { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.lv-tbl td.sb { color: var(--amber); font-weight: 700; }
.lv-tbl td.s-sb { color: #c07bff; font-weight: 700; }
.lv-tbl td.s-pb { color: var(--ok); }
.lv-nosec .c-sec { display: none; }
.lv-tbl tr.lead td { background: rgba(255,176,32,.06); }
.lv-tbl tr.lead .c-pos { color: var(--amber); }
.lv-tbl tr.pit .c-drv .nm { color: var(--muted); }
.lv-pit { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(255,106,24,.18); color: var(--hot); font: 800 9.5px/1.4 var(--head); letter-spacing: .6px; text-transform: uppercase; vertical-align: 1px; }
.lv-chk { display: inline-block; width: 12px; height: 9px; margin-right: 5px; vertical-align: 0; border-radius: 1px; }
/* gained / lost places — small triangle before the position, no column header */
.lv-mv { display: inline-block; width: 0; height: 0; margin-right: 5px; vertical-align: 1px; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.lv-mv.up { border-bottom: 7px solid var(--ok); }
.lv-mv.down { border-top: 7px solid var(--bad); }

/* ── empty / error state ── */
.lv-state { padding: 46px 24px; text-align: center; color: var(--muted); font-size: 14px; }
.lv-state strong { display: block; color: var(--fg); font: 800 16px var(--head); margin-bottom: 6px; }
.lv-state.err strong { color: var(--bad); }
.lv-state span:empty { display: none; }

/* wider phones / tablets: let the driver column breathe */
@media (min-width: 560px) { .lv-tbl .c-drv { max-width: none; } .lv-tbl { font-size: 14px; } }