/* Race timing first. Existing NW dark field, lime accent and display type. */
.live-stage { min-height: 100vh; padding: 3vh 3vw; }
.live-header { display: flex; align-items: end; justify-content: space-between; gap: 2vw; padding-bottom: 2.2vh; border-bottom: 1px solid var(--edge); }
.live-title { font-family: var(--font-display); font-size: clamp(24px, 4.4vh, 54px); font-weight: 700; line-height: 1.1; margin: .6vh 0; }
.live-header .kiosk-sub { font-size: clamp(13px, 1.9vh, 24px); }
.live-status { display: flex; flex-direction: column; align-items: end; gap: 1vh; white-space: nowrap; }
.live-clock { font-family: var(--font-display); font-size: clamp(20px, 3.5vh, 42px); font-weight: 600; font-variant-numeric: tabular-nums; }
.live-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 2.5vw; margin-top: 2.5vh; min-height: 70vh; }
.live-tower { min-width: 0; max-height: 73vh; overflow: auto; scrollbar-width: thin; }
.live-section-heading { display: flex; justify-content: space-between; font: 600 clamp(10px, 1.4vh, 17px) var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 1.5vh; }
.live-section-heading > span + span { letter-spacing: .03em; text-transform: none; }
.live-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.live-table th { text-align: right; font-size: clamp(10px, 1.5vh, 17px); color: var(--ink-faint); font-weight: 500; padding: 0 .7vw 1vh; }
.live-table th:first-child, .live-table th:nth-child(2) { text-align: left; }
.live-table td { padding: 1.1vh .7vw; border-bottom: 1px solid rgba(128,128,128,.15); font-size: clamp(13px, 2.25vh, 27px); line-height: 1.25; }
.live-pos { width: 3vw; font-family: var(--font-display); font-weight: 700; }
.live-driver { max-width: 23vw; position: relative; padding-right: 2.2em !important; }
.live-driver-line { display: flex; align-items: baseline; gap: .8vw; }
.live-driver-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.live-no { color: var(--ink-faint); font: 600 .8em var(--font-display); min-width: 1.6em; }
.live-driver-detail { position: absolute; right: .6em; top: 50%; transform: translateY(-50%); font-size: .65em; }
.live-number, .live-laps { text-align: right; white-space: nowrap; color: var(--ink-muted); }
.live-table td.live-number { font-size: clamp(11px, 1.95vh, 24px); }
.live-table tr.live-row-p1 { background: var(--accent-soft); }
.live-row-p1 td:first-child { box-shadow: inset 3px 0 var(--accent); color: var(--accent); }
.live-table .live-fastest { color: #dba8ff; }
.live-gain { color: var(--accent); }
.live-loss { color: var(--warm); }
.live-pit-chip { color: var(--warm); border: 1px solid currentColor; padding: 0 .35em; letter-spacing: .08em; }
.live-context { min-width: 0; display: flex; flex-direction: column; gap: 2.2vh; border-left: 1px solid var(--edge); padding-left: 2.5vw; }
.live-context .kiosk-eyebrow { font-size: clamp(11px, 1.6vh, 18px); letter-spacing: .13em; }
.live-context .live-featured-battle { margin: 0; padding: 1.6vh 1vw; }
.live-battle-names { font: 600 clamp(20px, 3.2vh, 38px)/1.12 var(--font-display); margin-top: 1vh; }
.live-context-note { font-size: clamp(12px, 1.65vh, 20px); color: var(--ink-muted); margin-top: .7vh; }
.live-moments ol { list-style: none; padding: 0; }
.live-moments li { padding: 1vh 0; border-top: 1px solid var(--edge); font-size: clamp(13px, 1.8vh, 22px); }
.live-event-age { float: right; font-size: .75em; color: var(--ink-faint); }
.live-event-driver { display: block; color: var(--ink-muted); font-size: .85em; }
.live-map { margin: auto 0 0; }
.live-map svg { width: 100%; height: 20vh; display: block; }
.live-map-credit { text-align: center; font-size: clamp(9px, 1.2vh, 13px); color: var(--ink-faint); }
.live-director-status { padding-top: 1vh; border-top: 1px solid var(--edge); }
.live-director-status strong { font-size: clamp(13px, 1.8vh, 22px); }
.live-director-status .live-section-heading { margin-bottom: .5vh; }
.live-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2vh; font-size: clamp(10px, 1.3vh, 16px); color: var(--ink-faint); }
.live-stage-empty { display: grid; place-items: center; text-align: center; }
.live-empty-title { font: 700 clamp(28px, 6vh, 70px) var(--font-display); margin-top: 2vh; }
.live-empty-sub { font-size: clamp(16px, 3vh, 32px); color: var(--ink-muted); margin-top: 1vh; }
.live-empty-detail { margin-top: 4vh; font-size: clamp(12px, 1.8vh, 22px); color: var(--ink-faint); }
@media (max-width: 760px) {
  body.kiosk:has(.live-stage) { overflow: auto; cursor: auto; }
  .live-stage { padding: 24px 16px; }
  .live-header { display: block; }
  .live-header .kiosk-eyebrow { font-size: 11px; letter-spacing: .16em; }
  .live-status { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 15px; }
  .live-clock { font-size: 25px; }
  .live-grid { grid-template-columns: 1fr; gap: 28px; }
  .live-tower { max-height: none; }
  .live-context { border-left: 0; padding-left: 0; border-top: 1px solid var(--edge); padding-top: 20px; }
  .live-lap-column { display: none; }
  .live-driver { max-width: 42vw; }
  .live-section-heading > span + span { display: none; }
  .live-footer { flex-direction: column; }
  .live-title { font-size: 27px; }
}

/* Live timing is interactive, even when it shares the TV layout. */
body.kiosk:has(.live-stage) { cursor: auto; overflow: auto; }
.live-stage { box-sizing: border-box; max-width: 2400px; margin-inline: auto; padding-top: 2vh; }
.live-connection { display: flex; align-items: center; gap: .5em; min-height: 1.5em; margin-bottom: 1vh; font-size: 12px; color: var(--ink-muted); }
.live-connection::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
.live-connection[data-stale="true"] { color: var(--warm); }
.live-connection[data-stale="true"]::before { background: var(--warm); box-shadow: none; }
.live-empty { display: grid; align-content: center; min-height: 80vh; text-align: center; }
.live-table th { position: sticky; top: 0; background: var(--bg); z-index: 1; padding-top: 1vh; }
.live-tower { scrollbar-color: var(--ink-faint) var(--bg); scrollbar-gutter: stable; overflow-anchor: none; }
.live-tower:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
button.live-driver-name { appearance: none; border: 1px solid var(--edge-strong); border-radius: 3px; padding: .2rem .45rem; min-height: 32px; background: var(--surface-2); color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
@media (pointer: coarse) { button.live-driver-name { min-height: 44px; } }
button.live-driver-name:hover { color: var(--accent); }
button.live-driver-name:focus-visible, .live-follow button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.live-table tr.live-row-following { background: rgba(255,255,255,.06); }
.live-row-following .live-driver-name { color: var(--accent); }
.live-row-following td:first-child { box-shadow: inset 3px 0 var(--ink); }
.live-context { gap: 1.8vh; }
.live-featured-battle { border: 1px solid var(--edge); border-left: 2px solid var(--accent); background: var(--accent-soft); }
.live-battle-gap { font: 600 clamp(24px, 3.8vh, 44px) var(--font-display); color: var(--accent); margin-top: 1vh; font-variant-numeric: tabular-nums; }
.live-battle-gap span { margin-left: .4em; font-size: 13px; color: var(--ink-muted); }
.live-follow { border: 1px solid var(--accent); padding: 1.5vh 1vw; }
.live-follow[hidden] { display: none; }
.live-follow button { cursor: pointer; }
.live-follow .live-section-heading { margin-bottom: .5vh; }
.live-follow-stats { display: flex; gap: 1.5vw; margin-top: 1.3vh; }
.live-follow-stats dt { font-size: 11px; color: var(--ink-muted); }
.live-follow-stats dd { font-variant-numeric: tabular-nums; font-size: clamp(14px, 2vh, 22px); }
.live-race-story { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; border-block: 1px solid var(--edge); padding-block: 1.5vh; }
.live-story-item { min-width: 0; }
.live-story-item .live-section-heading { margin-bottom: .7vh; font-size: 11px; }
.live-story-item strong { font: 600 clamp(20px, 2.8vh, 30px) var(--font-display); font-variant-numeric: tabular-nums; }
.live-story-item strong span { font-size: .6em; color: var(--ink-muted); }
.live-story-item .live-context-note { font-size: 12px; }
.live-fastest { color: #dba8ff; }
.live-map { margin: 0; }
.live-map svg { height: 23vh; min-height: 150px; }
.live-is-stale .live-map svg { opacity: .5; }
.live-map svg circle { cursor: help; }
.live-title { overflow-wrap: anywhere; }
@media (min-width: 761px) and (max-width: 1100px) {
  .live-grid { grid-template-columns: minmax(0, 2.4fr) minmax(210px, 1fr); }
  .live-table td { font-size: 16px; }
  .live-table td.live-number { font-size: 13px; }
  .live-driver { max-width: 20vw; }
  .live-battle-names { font-size: 24px; }
}
@media (max-width: 760px) {
  .live-map svg { height: 32vh; }
  .live-follow { padding: 16px; }
  .live-follow-stats { gap: 24px; }
  .live-driver-name { max-width: 32vw; }
  .live-table td { padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-connection::before { box-shadow: none; }
}
@media (max-width: 760px) {
  .live-follow { position: fixed; inset: auto 12px 12px; z-index: 5; background: var(--bg); box-shadow: 0 4px 30px #0009; padding: 12px 16px; }
  .live-follow .live-battle-names { font-size: 22px; }
  .live-follow .live-context-note { font-size: 12px; }
  .live-follow-stats { margin-top: 8px; }
}