/* MST-TRACKDAY - light, bright, compact race-day look (docs/DESIGN.md) */
:root {
  --card: #fff; --page: #F5F8FF; --panel: #EEF3FF; --line: #DCE4F5;
  --ink: #14213D; --muted: #5A6785;
  --blue: #0066FF; --blue-d: #0052CC; --blue-t: #E6F0FF;
  --pink: #FF2D87; --sun: #FFD60A; --cyan: #00C2FF; --kerb: #E10600;
  --fast: #7B2FF7; --fast-t: #F1E9FF; --pb: #006E33; --pb-t: #DFF7E8; --slow: #A35200; --slow-t: #FFF3D6;
  --r: 10px; --display: "Barlow Condensed", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.35 Inter, system-ui, "Segoe UI", sans-serif; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; margin: 0; line-height: 1.05; }
h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.num, td.t, .t { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms { color: var(--muted); font-weight: 400; }

/* header: white bar, speed stripes, chequered bottom edge */
.top { background: var(--card); position: sticky; top: 0; z-index: 10; }
.top .in { max-width: 1180px; margin: auto; display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.brand b { color: var(--blue); }
.stripes { display: inline-flex; gap: 3px; } .stripes i { width: 7px; height: 20px; transform: skewX(-14deg); border-radius: 2px; }
.stripes i:nth-child(1) { background: var(--blue); } .stripes i:nth-child(2) { background: var(--pink); } .stripes i:nth-child(3) { background: var(--cyan); }
.top .in nav { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.top .in nav a { padding: 6px 10px; border-radius: 999px; color: var(--ink); font-weight: 500; font-size: 14px; }
.top .in nav a:hover, .top .in nav a.on { background: var(--blue-t); color: var(--blue); text-decoration: none; }
.chequer { height: 8px; background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 8px 8px; opacity: .18; }

main { max-width: 1180px; margin: auto; padding: 12px; }
@media (min-width: 400px) { main { padding: 16px; } }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; } .grow { flex: 1; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cols { display: grid; gap: 12px; } @media (min-width: 900px) { .cols { grid-template-columns: 340px 1fr; } }

/* hero: bright gradient, slanted bottom, speed stripes */
.hero { position: relative; overflow: hidden; border-radius: var(--r); padding: 22px 16px 34px; color: #fff;
  background: linear-gradient(115deg, #0066FF 0%, #2B7BFF 45%, #00C2FF 100%); clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.hero h1 { font-size: 34px; } @media (min-width: 700px) { .hero h1 { font-size: 46px; } .hero { padding: 30px 28px 44px; } }
.hero p { margin: 6px 0 0; font-size: 16px; opacity: .95; max-width: 560px; }
.hero .bigstripes { position: absolute; right: -10px; top: 0; bottom: 0; display: flex; gap: 10px; opacity: .9; }
.hero .bigstripes i { width: 26px; transform: skewX(-14deg); } .hero .bigstripes i:nth-child(1) { background: var(--sun); } .hero .bigstripes i:nth-child(2) { background: var(--pink); } .hero .bigstripes i:nth-child(3) { background: #fff; opacity: .5; }
.hero .flag { position: absolute; right: 110px; top: 14px; width: 64px; height: 40px; opacity: .25; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 16px 16px; transform: skewX(-14deg); }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.card.tight { padding: 0; overflow: hidden; } .card > h2:first-child, .card > h3:first-child { margin-bottom: 8px; }
.card.kerb { border-top: 0; position: relative; padding-top: 16px; }
.card.kerb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--r) var(--r) 0 0; background: repeating-linear-gradient(90deg, var(--kerb) 0 12px, #fff 12px 24px); }
.card.link { display: block; color: var(--ink); transition: transform .08s, box-shadow .08s; } .card.link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,102,255,.12); border-color: #B9CCF2; }
.tile { display: flex; flex-direction: column; gap: 2px; } .tile .big { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; }

/* forms + buttons: 40px, no oversizing */
label { display: block; font-size: 13px; font-weight: 600; margin: 8px 0 3px; }
input, select, textarea { width: 100%; height: 40px; padding: 6px 10px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
textarea { height: auto; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: transparent; }
input[type=checkbox], input[type=radio] { width: auto; height: auto; accent-color: var(--blue); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14px; margin: 8px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 0; border-radius: 8px; font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; background: var(--blue); color: #fff; position: relative; overflow: hidden; white-space: nowrap; }
.btn:hover { background: var(--blue-d); text-decoration: none; }
.btn.go::after { content: ""; position: absolute; right: -6px; top: 0; bottom: 0; width: 14px; background: var(--sun); transform: skewX(-14deg); }
.btn.go { padding-right: 24px; }
.btn.alt { background: var(--blue-t); color: var(--blue); } .btn.alt:hover { background: #D6E6FF; }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--line); }
.btn.warn { background: #FFE8E8; color: var(--kerb); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.chip.on, .chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--muted); }
.pill.ok { background: var(--pb-t); color: var(--pb); } .pill.bad { background: #FFE8E8; color: var(--kerb); } .pill.warn { background: var(--slow-t); color: var(--slow); } .pill.blue { background: var(--blue-t); color: var(--blue); }
.alert { padding: 8px 12px; border-radius: 8px; background: var(--blue-t); color: var(--blue-d); font-size: 14px; } .alert.bad { background: #FFE8E8; color: var(--kerb); } .alert.ok { background: var(--pb-t); color: var(--pb); }

/* tables: dense, light */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; }
.tbl td { padding: 6px 8px; border-bottom: 1px solid #EEF2FA; height: 36px; }
.tbl tr:nth-child(even) td { background: #FAFCFF; } .tbl td.r, .tbl th.r { text-align: right; }
.tbl tr.me td { background: var(--blue-t) !important; } .tbl tr.me td:first-child { box-shadow: inset 3px 0 var(--blue); }
.tbl tr.dim td { color: var(--muted); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tc { display: inline-block; padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.tc.fast { background: var(--fast-t); color: var(--fast); font-weight: 700; } .tc.fast::before { content: "◆ "; font-size: 9px; }
.tc.pb { background: var(--pb-t); color: var(--pb); font-weight: 600; } .tc.pb::before { content: "▲ "; font-size: 9px; }
.tc.slow { background: var(--slow-t); color: var(--slow); }
.lapbar { height: 3px; background: var(--blue); border-radius: 2px; opacity: .55; margin-top: 2px; }

/* roundel */
.rd { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 15px; }
.rd.p1 { background: #FFD60A; border-color: #C9A400; } .rd.p2 { background: #E3E8F2; border-color: #9AA6BD; } .rd.p3 { background: #F4C9A0; border-color: #B97A43; }

/* heat map */
.heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.heat th { font-size: 10px; font-weight: 600; color: var(--muted); padding: 2px 4px; text-transform: uppercase; white-space: nowrap; }
.heat td { padding: 3px 5px; border-radius: 4px; text-align: right; font-variant-numeric: tabular-nums; min-width: 46px; white-space: nowrap; }
.heat td.lap { background: transparent; text-align: left; font-weight: 700; min-width: 24px; }
.heat td.tot { font-weight: 700; } .heat td.na { background: #F1F4FA; color: #B3BDD1; }
.heat td.fastest { outline: 2px solid var(--fast); outline-offset: -2px; font-weight: 700; }
.heat tr.pit td { opacity: .45; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend .ramp { width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #00C853, #9BE15D, #FFE45C, #FFA43B, #FF5A4E); }

/* start lights (waiting / loading) */
.lights { display: inline-flex; gap: 6px; } .lights i { width: 14px; height: 14px; border-radius: 50%; background: #E3E8F2; animation: light 3s infinite; }
.lights i:nth-child(2) { animation-delay: .4s; } .lights i:nth-child(3) { animation-delay: .8s; } .lights i:nth-child(4) { animation-delay: 1.2s; } .lights i:nth-child(5) { animation-delay: 1.6s; }
@keyframes light { 0%, 10% { background: #E3E8F2; } 15%, 70% { background: var(--kerb); } 75%, 100% { background: #00C853; } }

/* dot plot: whole field on one line */
.dots { position: relative; height: 34px; margin: 6px 4px 0; } .dots::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--line); }
.dots i { position: absolute; top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #B9C6E0; border: 2px solid #fff; }
.dots i.me { background: var(--blue); width: 16px; height: 16px; top: 9px; margin-left: -8px; z-index: 2; } .dots i.fast { background: #A855F7; }
.dots span { position: absolute; top: -2px; font-size: 10px; color: var(--muted); transform: translateX(-50%); }

/* track outline */
.trackmap { width: 100%; max-height: 220px; } .trackmap path { fill: none; stroke: var(--blue); stroke-width: 3; opacity: .35; stroke-linejoin: round; }

.qr { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: var(--r); border: 1px solid var(--line); }
.ref { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 40px; letter-spacing: .08em; color: var(--blue); }
.foot { max-width: 1180px; margin: 24px auto 0; padding: 12px; color: var(--muted); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.hide-sm { } @media (max-width: 599px) { .hide-sm { display: none; } }
.only-sm { } @media (min-width: 600px) { .only-sm { display: none; } }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 10px; overflow-x: auto; }
.tabs a { padding: 8px 12px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--blue); border-bottom-color: var(--blue); } .tabs a:hover { text-decoration: none; color: var(--blue); }

/* fixes after first screenshots */
.heat td.best { background: var(--pb-t); color: var(--pb); font-weight: 600; }
.heat td.lap { position: sticky; left: 0; background: #fff; z-index: 1; }
.heat th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
@media (max-width: 599px) {
  .top .in { padding: 6px 10px; gap: 6px; }
  .brand { font-size: 18px; } .stripes i { width: 5px; height: 16px; }
  .top .in nav { flex-wrap: nowrap; gap: 0; } .top .in nav a { padding: 5px 7px; font-size: 13px; }
  .hero .bigstripes { right: -30px; gap: 6px; } .hero .bigstripes i { width: 14px; } .hero .flag { display: none; }
  .hero p { max-width: 82%; }
  .tbl { font-size: 13px; } .tbl td { padding: 5px 6px; } .tbl th { padding: 5px 6px; }
}

.tiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 599px) { .tiles .card { padding: 10px; } .tile .big { font-size: 26px; } .tiles .small { font-size: 12px; } }

.tbl input, .tbl select { font-size: 14px; padding: 2px 6px; }

/* RaceDay phase 1: group colours, race pill, compact organiser tables */
.gdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); vertical-align: -1px; margin-right: 5px; flex: none; }
.pill.race { background: #FFE8E8; color: var(--kerb); }
.tbl select.inline, .tbl input.inline { height: 30px; padding: 0 6px; font-size: 13px; width: auto; }
.gcard { border-left: 5px solid var(--line); }

/* admin latency meter (bottom-right) */
#lat { position: fixed; right: 8px; bottom: 8px; z-index: 50; display: flex; align-items: center; gap: 6px; font-size: 12px; }
#lat button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#lat span:empty { display: none; }
#lat span { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--muted); border-radius: 8px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); font-variant-numeric: tabular-nums; max-width: 260px; }
#lat span small { display: block; color: var(--muted); font-size: 11px; }
#lat[data-s=ok] span { border-left-color: #16A34A; } #lat[data-s=warn] span { border-left-color: #F59E0B; } #lat[data-s=bad] span { border-left-color: var(--kerb); }
#lat.on button { background: var(--blue); color: #fff; border-color: var(--blue); }

/* live stream: the LIVE pill greys out when the stream drops (it reconnects + catches up by itself) */
.livepill.stale { background: var(--panel); color: var(--muted); }
td.eta { color: var(--muted); font-size: 12px; } td.eta.due { color: var(--pb); font-weight: 700; }

/* track map */
.mapcard { padding: 6px; }
#tmap { width: 100%; height: auto; display: block; max-height: 60vh; }
#tmap .trk { fill: none; stroke: #14213D; stroke-width: 22; stroke-linejoin: round; stroke-linecap: round; }
#tmap .trk-c { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 8 10; opacity: .6; }
#tmap .tl circle { fill: #fff; stroke: var(--blue); stroke-width: 2; } #tmap .tl.main circle { fill: var(--kerb); stroke: #fff; }
#tmap .tl text { font: 600 10px Inter, sans-serif; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: #F5F8FF; stroke-width: 3px; }
/* LOOP-timed dot = plain white ball with the number; GPS dot = a RING (Dan 2026-11-12): blue moving, orange slow, red slower,
   red / white flashing when stopped but still sending */
#tmap .car circle { fill: #fff; stroke: #14213D; stroke-width: 1.5; }
#tmap .car.gps circle { stroke: #0066FF; stroke-width: 4.5; }
#tmap .car text { font: 800 italic 10px "Barlow Condensed", sans-serif; fill: #14213D; text-anchor: middle; dominant-baseline: central; }
#tmap .car.me circle { fill: var(--blue); stroke: #fff; } #tmap .car.me text { fill: #fff; }
body.rally #tmap .trk { stroke: #0B0B0F; } body.rally #tmap .car circle { stroke: #E10600; }

/* the three front doors: /trackday (blue), /raceday (kerb red + chequer), /rallyday (rally.css) */
.hero.race { background: linear-gradient(120deg, #14213D 0%, #1F2F57 55%, #E10600 55.2%, #B30500 100%); }
.hero.race .bigstripes i:nth-child(1) { background: #fff; } .hero.race .bigstripes i:nth-child(2) { background: #E10600; }
.hero.race .flag { opacity: .45; }
.modeswitch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; }
.modes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mode { display: block; position: relative; overflow: hidden; border-radius: var(--r); padding: 14px 14px 16px; color: #fff; min-height: 120px; }
.mode:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.mode b { display: block; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; text-transform: uppercase; }
.mode span { display: block; font-size: 14px; margin-top: 6px; opacity: .95; max-width: 85%; }
.mode i { position: absolute; right: -12px; top: 0; bottom: 0; width: 60px; transform: skewX(-14deg); }
.mode.m-td { background: linear-gradient(120deg, #0066FF, #00C2FF); } .mode.m-td i { background: repeating-linear-gradient(90deg, #FFD60A 0 14px, transparent 14px 20px, #FF2D87 20px 34px, transparent 34px 40px); opacity: .9; }
.mode.m-rd { background: linear-gradient(120deg, #14213D, #1F2F57 70%, #E10600 70.2%); } .mode.m-rd i { background: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 0 / 12px 12px; opacity: .8; }
.mode.m-ry { background: linear-gradient(105deg, #E10600 0 65%, #0B0B0F 65%); } .mode.m-ry i { background: repeating-linear-gradient(90deg, #fff 0 12px, transparent 12px 18px, #0B0B0F 18px 34px, transparent 34px 40px); }

/* entry type pills + card edge: track = blue, race = kerb red, rally = black/red */
.pill.kind { font-size: 11px; letter-spacing: .06em; }
.pill.k-track { background: var(--blue-t); color: var(--blue); } .pill.k-race { background: #FFE8E8; color: var(--kerb); } .pill.k-rally { background: #0B0B0F; color: #fff; }
.card.entry { border-left: 5px solid var(--blue); } .card.entry.k-race { border-left-color: var(--kerb); } .card.entry.k-rally { border-left: 5px solid #0B0B0F; box-shadow: inset 4px 0 0 #E10600; }

/* /me: one panel per kind - coloured header = the kind's own page, body = today / entered / not entered + history */
.kpanel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kpanel .khead { border-radius: 0; min-height: 0; padding: 10px 14px; display: flex; align-items: baseline; gap: 10px; }
.kpanel .khead b { font-size: 26px; } .kpanel .khead span { margin: 0; font-size: 13px; opacity: .9; }
.kpanel .khead:hover { transform: none; box-shadow: none; filter: brightness(1.05); }
.kbody { padding: 10px 14px 12px; }
.kon { background: var(--pb-t); border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; }
.kyeh { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--pb); }
.krow { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.krow:hover { text-decoration: none; background: var(--panel); } .krow .t { width: 92px; font-weight: 600; }
.kbody .tbl td { padding-top: 5px; padding-bottom: 5px; }

/* show / hide password eye (pw.js) */
.pwwrap { position: relative; display: inline-block; width: 100%; vertical-align: middle; }
.pwwrap > input { width: 100%; padding-right: 38px; }
.pweye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 34px; height: 30px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pweye:hover { color: var(--blue); }
.foot .stafflink { color: var(--muted); font-size: 12px; margin-right: 12px; } .foot .stafflink:hover { color: var(--blue); }

/* transponder type tiles (stock page): click on/off, ALL toggles back to the previous selection - like MST's loop tiles */
.typetiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ttile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 104px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; font: inherit; text-align: left; }
.ttile b { font-size: 12.5px; font-weight: 700; } .ttile span { font: 800 italic 20px/1 var(--display); }
.ttile.on { border-color: var(--blue); background: var(--blue-t); color: var(--blue); }
.ttile.all { min-width: 64px; } .ttile.all.on { background: var(--blue); color: #fff; }
.pill.src-0 { background: #E6F0FF; color: #0052CC; } .pill.src-1 { background: #EEF0F4; color: #3A4660; } .pill.src-2 { background: #FFF3D6; color: #A35200; }
.pill.src-3 { background: #DFF7E8; color: #006E33; } .pill.src-4 { background: #F1E9FF; color: #7B2FF7; } .pill.src-5 { background: #E1F7FD; color: #0B7FA3; }
.editrow td { background: var(--panel); }

/* admin pages are only used on a 1920x1080 screen (Dan 2026-11-10): 20% wider than the public pages */
body.adminpg main, body.adminpg .top .in, body.adminpg .foot { max-width: 1420px; }

/* stock page: RENTAL / STOCK vs COMPETITORS - one view at a time */
.viewswitch { display: flex; border: 2px solid var(--blue); border-radius: 10px; overflow: hidden; }
.viewswitch button { border: 0; background: #fff; color: var(--blue); padding: 8px 16px; font: 800 italic 17px/1 var(--display); letter-spacing: .02em; cursor: pointer; }
.viewswitch button span { font: 600 12px Inter, sans-serif; opacity: .8; margin-left: 4px; }
.viewswitch button.on { background: var(--blue); color: #fff; }
#stocktbl.v-rental .col-c, #stocktbl.v-comp .col-r { display: none; }

/* type tiles + tags coloured by group (Dan): rental / stock amber, subscribed green, owned outright blue */
.ttile.g-rent { border-color: #F2D49B; color: #A35200; } .ttile.g-rent.on { background: #FFF3D6; border-color: #F59E0B; color: #A35200; }
.ttile.g-sub { border-color: #B7E6C8; color: #006E33; } .ttile.g-sub.on { background: #DFF7E8; border-color: #16A34A; color: #006E33; }
.ttile.g-own { border-color: #BFD3F5; color: #0052CC; } .ttile.g-own.on { background: #E6F0FF; border-color: #0066FF; color: #0052CC; }
.pill.g-rent { background: #FFF3D6; color: #A35200; } .pill.g-sub { background: #DFF7E8; color: #006E33; } .pill.g-own { background: #E6F0FF; color: #0052CC; }
[hidden] { display: none !important; }   /* hidden always wins over display:flex/grid */
#stocktbl.tinted tr.g-rent > td { background: #FFFAEE; } #stocktbl.tinted tr.g-rent > td:first-child { box-shadow: inset 4px 0 0 #F59E0B; }
#stocktbl.tinted tr.g-sub > td { background: #F1FBF4; } #stocktbl.tinted tr.g-sub > td:first-child { box-shadow: inset 4px 0 0 #16A34A; }
#stocktbl.tinted tr.g-own > td { background: #F2F7FF; } #stocktbl.tinted tr.g-own > td:first-child { box-shadow: inset 4px 0 0 #0066FF; }

/* admin: wider side column on the 1920 screen */
body.adminpg .cols { grid-template-columns: 460px 1fr; }

/* Days board: striped racing header, zebra rows, coloured edge per kind */
.daysboard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dbhead { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(100deg, #14213D 0 62%, #1F2F57 62%); color: #fff; overflow: hidden; }
.dbhead h2 { color: #fff; font-size: 22px; }
.dbcount { font: 800 italic 16px/1 var(--display); background: #fff; color: #14213D; padding: 3px 9px; border-radius: 999px; }
.dbstripes { position: absolute; right: 18px; top: -10px; bottom: -10px; display: flex; gap: 8px; transform: skewX(-24deg); }
.dbstripes b { display: block; width: 18px; background: var(--blue); } .dbstripes b:nth-child(2) { background: var(--pink); width: 10px; } .dbstripes b:nth-child(3) { background: var(--sun); width: 26px; }
.daysboard.past .dbhead { background: #EEF3FF; color: var(--ink); } .daysboard.past .dbhead h2 { color: var(--ink); } .daysboard.past .dbcount { background: #14213D; color: #fff; }
.daytbl { margin: 0; } .daytbl thead th { background: #F7F9FE; }
.daytbl tbody tr:nth-child(even) > td { background: #F7F9FE; }
.daytbl tbody tr > td:first-child { box-shadow: inset 5px 0 0 var(--blue); padding-left: 14px; }
.daytbl tbody tr.k-race > td:first-child { box-shadow: inset 5px 0 0 var(--kerb); }
.daytbl tbody tr.k-rally > td:first-child { box-shadow: inset 5px 0 0 #0B0B0F, inset 9px 0 0 #E10600; }
.daytbl tbody tr:hover > td { background: #EEF3FF; }
.daytbl td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.daytbl .dcell { width: 150px; }

/* segmented type picker (add a day) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 40px; }
.seg label { margin: 0; display: flex; } .seg input { display: none; }
.seg span { display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-right: 1px solid var(--line); background: #fff; }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--blue); color: #fff; }
.addday label { white-space: nowrap; }

/* raceway setup: view-only for track logins (fieldset disabled) - no edit buttons, plain-looking fields */
fieldset.setupfs { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
fieldset.setupfs[disabled] .btn, fieldset.setupfs[disabled] button, fieldset.setupfs[disabled] tr:last-child:has(input[placeholder="new"]) { display: none; }
fieldset.setupfs[disabled] input, fieldset.setupfs[disabled] select { background: var(--panel); color: var(--ink); border-color: transparent; opacity: 1; }
fieldset.setupfs[disabled] label.check, fieldset.setupfs[disabled] form[action*="handler=Box"] { display: none; }

/* the day's page in steps: STEP 1 Day -> STEP 2 Groups -> STEP 3 Run sheet -> STEP 4 Entrants */
.stephead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.stepno { font: 800 italic 13px/1 var(--display); letter-spacing: .06em; color: #fff; background: #14213D; padding: 5px 10px 4px; transform: skewX(-12deg); box-shadow: 3px 3px 0 var(--blue); }
.stepcard { border-top: 3px solid #14213D; }
.groupgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gcard2 { border: 1px solid var(--line); border-top: 6px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; }
.gcard2.add { border-style: dashed; border-top-width: 1px; background: var(--panel); }
.gname { height: 32px; font-weight: 700; font-size: 15px; border-color: transparent; padding: 0 4px; background: transparent; }
.gname:hover, .gname:focus { border-color: var(--line); background: #fff; }
.genline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 12px; padding: 10px 12px; background: var(--panel); border-radius: 8px; font-size: 14px; }
.genline input, .genline select { height: 34px; }
#runs .daytbl tbody tr > td:first-child { box-shadow: inset 5px 0 0 var(--gc, #DCE4F5); }
#runs .daytbl tbody tr.editrow > td { box-shadow: none; background: var(--panel); }
#timestbl tr.bandcut > td { border-top: 2px dashed #14213D; }

/* setup: .trk track map - live rotate / zoom preview in the standard 600 x 280 box */
.mapedit { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.mapbox { position: relative; background: #F7F9FE; border-radius: 8px; }
#mapprev { width: 100%; height: auto; display: block; }
#mapprev .boxline { fill: none; stroke: #B9C6E0; stroke-dasharray: 6 5; }
#mapprev .trk { fill: none; stroke: #14213D; stroke-width: 14; stroke-linejoin: round; stroke-linecap: round; }
#mapprev .pit { fill: none; stroke: #9CA3AF; stroke-width: 6; stroke-dasharray: 2 4; stroke-linecap: round; }
#mapprev .ln circle { fill: #fff; stroke: var(--blue); stroke-width: 2; } #mapprev .ln.finish circle { fill: var(--kerb); stroke: #fff; }
#mapprev .ln text { font: 600 10px Inter, sans-serif; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: #F7F9FE; stroke-width: 3px; }
.mapbox .nomap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
input[type=range] { padding: 0; border: 0; background: transparent; }
#tmap .pit { fill: none; stroke: #9CA3AF; stroke-width: 7; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; }

/* race control flag banner (live pages on race days) */
.flagbar { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 8px; font: 800 italic 26px/1 var(--display); letter-spacing: .04em; color: #fff; }
.flagbar span { font: 600 12px Inter, sans-serif; opacity: .85; letter-spacing: 0; }
.flagbar.f-green { background: #16A34A; } .flagbar.f-red { background: #E10600; }
.flagbar.f-yellow, .flagbar.f-fcy, .flagbar.f-sc { background: #FACC15; color: #14213D; animation: flagpulse 0.9s steps(2) infinite; }
.flagbar.f-final { background: #fff; color: #14213D; border: 2px solid #14213D; }
.flagbar.f-cheq { background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 22px 22px; color: #fff; text-shadow: 0 0 6px #000, 0 0 2px #000; }
@keyframes flagpulse { 50% { filter: brightness(1.15); box-shadow: 0 0 0 4px rgba(250,204,21,.45); } }

/* results reports: PRELIMINARY / FINAL splashed across the page (the PDF has it on every page) */
.report { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; overflow: hidden; }
.report::before { content: attr(data-mark); position: absolute; left: 50%; top: 320px; transform: translate(-50%, -50%) rotate(-24deg); font: 800 italic 120px/1 var(--display); color: rgba(20,33,61,.06); white-space: nowrap; pointer-events: none; z-index: 0; }
.report.final::before { color: rgba(0,110,51,.07); }
.report > * { position: relative; z-index: 1; }
.rephead { margin: 16px 0 4px; font-size: 18px; }
.reptbl thead th { background: #14213D; color: #fff; }
.reptbl tbody tr:nth-child(even) td { background: rgba(244,247,253,.85); }
.reptbl tr.out td { color: var(--muted); }
@media print { .top, .foot, .repbar, #lat { display: none !important; } .report { border: 0; } }

/* track map coloured by the race control flag */
#tmap .trk-o { fill: none; stroke: #0B0B0F; stroke-width: 26; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
#tmap .trk-f { fill: none; stroke: transparent; stroke-width: 22; stroke-linejoin: round; stroke-dasharray: 16 16; }
#tmap.flag-9 .trk { stroke: #1E88FF; }                                   /* recon lap */
#tmap.flag-1 .trk { stroke: #16A34A; }                                   /* green */
#tmap.flag-2 .trk, #tmap.flag-3 .trk { stroke: #FACC15; }                /* yellow / full course yellow: all yellow */
#tmap.flag-4 .trk, #tmap.flag-7 .trk { stroke: #0B0B0F; } #tmap.flag-4 .trk-f, #tmap.flag-7 .trk-f { stroke: #FACC15; }   /* safety car / VSC: yellow-black 50/50 */
#tmap.flag-5 .trk { stroke: #E10600; }                                   /* red */
#tmap.flag-6 .trk { stroke: #0B0B0F; } #tmap.flag-6 .trk-f { stroke: #FFFFFF; }   /* chequered: black-white 50/50 */
#tmap.flag-8 .trk { stroke: #FFFFFF; }                                   /* final lap: white */
#tmap.flag-2 .trk-c, #tmap.flag-3 .trk-c, #tmap.flag-4 .trk-c, #tmap.flag-6 .trk-c, #tmap.flag-7 .trk-c, #tmap.flag-8 .trk-c { opacity: 0; }
#tmap.flag-3 .trk, #tmap.flag-4 .trk-f, #tmap.flag-7 .trk-f { animation: trkpulse 1s ease-in-out infinite; }
@keyframes trkpulse { 50% { opacity: .75; } }
.flagbar.f-recon { background: #1E88FF; }
.flagbar.f-sc { background: repeating-linear-gradient(-45deg, #FACC15 0 22px, #0B0B0F 22px 44px); color: #fff; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.flagbar.f-cheq b, .flagbar.f-cheq span, .flagbar.f-sc b, .flagbar.f-sc span { background: #0B0B0F; padding: 3px 10px; border-radius: 4px; text-shadow: none; }

/* GPS premium on the track map: speeds + warnings (admins only) */
#tmap .car .spd { font: 700 9px Inter, sans-serif; fill: #14213D; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
#tmap .car.gps.warn1 circle { stroke: #F97316; }
#tmap .car.gps.warn2 circle { stroke: #E10600; }
#tmap .car.warn3 circle { animation: carx .5s steps(1, end) infinite; } #tmap .car.warn3 text { fill: #E10600; }
@keyframes carx { 0% { fill: #E10600; stroke: #fff; } 50% { fill: #fff; stroke: #E10600; } }
#tmap .car.warn2, #tmap .car.warn3 { filter: drop-shadow(0 0 6px rgba(225,6,0,.8)); }
.gpsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; }
.gpsbar label { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 4px; } .gpsbar input { width: 64px; height: 30px; }
#gpswarn { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.gw { font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; color: #fff; }
.gw.l1 { background: #F97316; } .gw.l2 { background: #E10600; } .gw.l3 { background: #E10600; animation: gwx .5s steps(1, end) infinite; }
@keyframes gwx { 50% { background: #fff; color: #E10600; box-shadow: inset 0 0 0 2px #E10600; } }

/* admin language picker (flag in the header) */
.langpick{position:relative;display:inline-block}
.langpick summary{list-style:none;cursor:pointer;padding:2px 6px;border-radius:6px}
.langpick summary::-webkit-details-marker{display:none}
.langtiles{position:absolute;right:0;top:110%;z-index:50;background:#fff;border:1px solid #dde3ee;border-radius:8px;box-shadow:0 6px 24px rgba(0,30,80,.15);padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:300px}
.langtiles button{font:inherit;font-size:13px;color:#123;background:#f3f6fb;border:1px solid #dde3ee;border-radius:6px;padding:4px 6px;text-align:left;cursor:pointer}
.langtiles button.on{background:#0066FF;color:#fff;border-color:#0066FF}
.langtiles button.alt{grid-column:1/-1;text-align:center;background:#fff}
.langradio{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
.langradio label{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:13px;font-weight:500;padding:3px 8px;border:1px solid #dde3ee;border-radius:6px;background:#f3f6fb;cursor:pointer}
.langradio label.on{background:#0066FF;color:#fff;border-color:#0066FF}
.langradio input{display:none}

/* KARTDAY signage (Dan 2026-11-11): same stripes, plus the occasional kart */
.kart-brand { width: 34px; height: 17px; margin: 0 4px 0 2px; vertical-align: -2px; }
/* square bottom (no slant) so the karts drive along a grey track strip with a chequered kerb */
.hero.kart { background: linear-gradient(120deg, #FF5A00 0%, #FF7A1A 50%, #FFB000 100%); padding-bottom: 76px; clip-path: none; }
.hero.kart::before { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 30px; background: #4B5563;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 26px, transparent 26px 60px);
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 50%; }
.hero.kart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-conic-gradient(#E10600 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.kartpack { position: absolute; left: 0; right: 0; bottom: 12px; height: 46px; pointer-events: none; }
.kartpack .kartsvg { position: absolute; bottom: 0; width: 84px; height: 42px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); animation: kartrun 14s linear infinite; }
.kartpack .k2 { animation-delay: -4.5s; width: 74px; height: 37px; }
.kartpack .k3 { animation-delay: -9s; width: 66px; height: 33px; }
@keyframes kartrun { from { left: -100px; } to { left: 105%; } }
@media (prefers-reduced-motion: reduce) { .kartpack .kartsvg { animation: none; } .kartpack .k1 { left: 8%; } .kartpack .k2 { left: 30%; } .kartpack .k3 { left: 52%; } }
@media (max-width: 600px) { .kartpack .kartsvg { width: 60px; height: 30px; } }

/* KARTDAY's OWN COLOURS (Dan 2026-11-11: "its own color scheme to make it obviously different" - BIKEDAY will get another).
   Vivid racing orange instead of electric blue, sun-yellow + lime accents; still light, bright, happy. */
/* RED + BLUE (Dan 2026-11-12 "blue" - karting's bright cartoon colours, our own style): racing red, royal blue, sunny yellow */
body.kartsite { --blue: #E10600; --blue-d: #B00500; --blue-t: #FFE8E7; --pink: #1F4FE0; --cyan: #FFC400;
  --page: #FFF8F8; --panel: #FFEFEE; --line: #F4D9D8; }
body.kartsite .hero.kart { background: linear-gradient(120deg, #E10600 0%, #C4122F 48%, #1F4FE0 100%); }
body.kartsite .hero .bigstripes i:nth-child(1) { background: #fff; } body.kartsite .hero .bigstripes i:nth-child(2) { background: #FFC400; }
body.kartsite .hero .bigstripes i:nth-child(3) { background: #1F4FE0; opacity: 1; }
body.kartsite .langtiles button.on, body.kartsite .langradio label.on { background: var(--blue); border-color: var(--blue); }
body.kartsite .hero.kart .btn.go { color: var(--blue) !important; }
body.kartsite .mode.m-td { background: linear-gradient(120deg, #E10600, #1F4FE0); }
body.kartsite .mode.m-td i { background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 20px, #FFC400 20px 34px, transparent 34px 40px); }

/* BIKEDAY's OWN COLOURS (Dan 2026-11-11: a completely separate system for motorcycles, its own colour scheme):
   deep purple + teal, sun-yellow accent; still light, bright, happy. Same banner shape as KARTDAY (bikes on the track strip). */
body.bikesite { --blue: #6D28D9; --blue-d: #5B21B6; --blue-t: #F1EAFE; --pink: #2DD4BF; --cyan: #FACC15;
  --page: #F8F5FF; --panel: #F1EAFE; --line: #E2D8F7; }
body.bikesite .hero.bike { background: linear-gradient(120deg, #5B21B6 0%, #7C3AED 45%, #14B8A6 100%); }
body.bikesite .hero .bigstripes i:nth-child(1) { background: #fff; } body.bikesite .hero .bigstripes i:nth-child(2) { background: #2DD4BF; }
body.bikesite .hero .bigstripes i:nth-child(3) { background: #FACC15; opacity: .9; }
body.bikesite .langtiles button.on, body.bikesite .langradio label.on { background: var(--blue); border-color: var(--blue); }
body.bikesite .hero.kart .btn.go { color: var(--blue) !important; }
body.bikesite .mode.m-td { background: linear-gradient(120deg, #6D28D9, #14B8A6); }
body.bikesite .mode.m-td i { background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 20px, #FACC15 20px 34px, transparent 34px 40px); }

/* DOUBLE YELLOW: two triangles, yellow alternating (flag bars, the track map pulses yellow) */
.flagbar.f-dyellow { color: #14213D; background: linear-gradient(to top right, #FACC15 0 50%, #14213D 50% 100%); animation: dyswapbar 1s steps(1, end) infinite; }
.flagbar.f-dyellow b, .flagbar.f-dyellow span { background: #FACC15; padding: 3px 10px; border-radius: 4px; }
@keyframes dyswapbar { 50% { background: linear-gradient(to top right, #14213D 0 50%, #FACC15 50% 100%); } }
#tmap.flag-10 .trk { stroke: #FACC15; animation: trkpulse .6s ease-in-out infinite; } #tmap.flag-10 .trk-c { opacity: 0; }

/* TIMING BOARD (a TV at the track): no header / footer / menus, everything big, readable from across the pit */
body.screenpg header.top, body.screenpg footer.foot, body.screenpg .stafflink, body.screenpg #latency, body.screenpg .fieldhead .btn { display: none !important; }
body.screenpg main { max-width: none; padding: 1vh 1.5vw; }
body.screenpg .fieldhead h1 { font-size: 3.4vw; } body.screenpg .fieldhead .label { font-size: 1.4vw; }
body.screenpg .flagbar { font-size: 3vw; padding: 1.2vh 1.5vw; } body.screenpg .flagbar span { font-size: 1.2vw; }
body.screenpg .tbl { font-size: 1.9vw; } body.screenpg .tbl th { font-size: 1vw; } body.screenpg .tbl td { padding: .7vh .8vw; }
body.screenpg .tbl .tiny, body.screenpg .tbl .small { font-size: 1.1vw; }
#tapfs { position: fixed; right: 1.5vw; bottom: 1.5vh; font: 600 1vw Inter, sans-serif; color: var(--muted); cursor: pointer; display: none; }
body.screenpg #tapfs { display: block; }

#tmap .car.gps.warn3 circle { animation: ringx .5s steps(1, end) infinite; stroke-width: 5; }
@keyframes ringx { 0% { stroke: #E10600; fill: #fff; } 50% { stroke: #fff; fill: #E10600; } }
#tmap .car.me circle { fill: var(--blue); } #tmap .car.me.gps circle { stroke: #fff; }

/* ---------------------------------------------------------------- THE ADMIN BAR (Dan 2026-11-13): the same tiles on every admin
   page for a track, on the top line, always in the same place. The page you're on = filled in its own colour; the others white
   with their colour underneath. FLAGS = the flag right now. Flashing RED = something wrong there, ORANGE = something outstanding. */
.abar { background: #fff; border-top: 1px solid var(--line); }
.abin { max-width: 1420px; margin: auto; display: flex; align-items: stretch; gap: 4px; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; }
.abin::-webkit-scrollbar { display: none; }
.atrack { align-self: center; font: 800 italic 17px/1 var(--display); letter-spacing: .02em; margin-right: 6px; white-space: nowrap; }
.atile { --c: var(--blue); display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 4px 10px; border-radius: 7px;
  background: #fff; border: 1px solid var(--line); box-shadow: inset 0 -3px 0 var(--c); color: var(--c); white-space: nowrap; text-decoration: none !important; line-height: 1.05; }
.atile b { font: 800 italic 16px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.atile small { font: 700 10px/1.1 Inter, sans-serif; letter-spacing: .04em; margin-top: 2px; }
.atile:hover { background: color-mix(in srgb, var(--c) 10%, #fff); }
.atile.on { background: var(--c); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 45%, transparent); border-color: var(--c); }
.atile.back { --c: #14213D; }
.atile.mute { --c: #94A3B8; cursor: not-allowed; min-width: 50px; }   /* ANNOUNCE on a non-Premium day: muted speaker, does nothing */
.atile.mute:hover { background: #fff; }
.t-counter { --c: #16A34A; } .t-live { --c: #0066FF; } .t-map { --c: #0891B2; } .t-flags { --c: #E10600; } .t-days { --c: #7C3AED; }
.t-import { --c: #475569; } .t-setup { --c: #64748B; } .t-account { --c: #D97706; } .t-announce { --c: #14213D; }
/* FLAGS tile = the flag right now (yellows flash, red solid - same rule as the dash); the page you're on gets a thick ink edge */
.t-flags[class*="af-"] { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: none; }
.t-flags.on[class*="af-"] { outline: 3px solid #14213D; outline-offset: 1px; }
.af-green { background: #16A34A !important; } .af-red { background: #E10600 !important; } .af-recon { background: #1E88FF !important; }
.af-yellow, .af-fcy { background: #FACC15 !important; color: #14213D !important; text-shadow: none !important; }
.af-sc { background: repeating-linear-gradient(135deg, #FACC15 0 10px, #111 10px 20px) !important; }
.af-vsc { background: repeating-linear-gradient(135deg, #FACC15 0 10px, #fff 10px 20px) !important; color: #14213D !important; text-shadow: 0 0 3px #fff !important; }
.af-final { background: #fff !important; color: #14213D !important; text-shadow: none !important; border: 2px solid #14213D; }
.af-cheq { background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 12px 12px !important; text-shadow: 0 0 4px #000, 0 0 2px #000 !important; }
.af-dyellow { background: linear-gradient(to top right, #FACC15 0 50%, #111 50% 100%) !important; text-shadow: 0 0 3px #000 !important; }
.af-yellow, .af-fcy, .af-sc, .af-vsc { animation: aflash 1s steps(1, end) infinite; }
@keyframes aflash { 50% { filter: brightness(.55) saturate(.4); } }
/* warnings: flashing tile - red = wrong now, orange = outstanding (hover / long-press for why) */
.atile.w-red:not(.t-flags), .atile.w-orange:not(.t-flags) { color: #fff; box-shadow: none; }
.atile.w-red:not(.t-flags) { animation: wred .8s steps(1, end) infinite; }
.atile.w-orange:not(.t-flags) { animation: worange 1.2s steps(1, end) infinite; }
.t-flags.w-orange { outline: 3px solid #F97316; outline-offset: 1px; animation: woutline 1.2s steps(1, end) infinite; }
.t-flags.w-red { outline: 3px solid #E10600; outline-offset: 1px; animation: woutline .8s steps(1, end) infinite; }
@keyframes wred { 0% { background: #E10600; border-color: #E10600; } 50% { background: #fff; color: #E10600; border-color: #E10600; } }
@keyframes worange { 0% { background: #F97316; border-color: #F97316; } 50% { background: #fff; color: #F97316; border-color: #F97316; } }
@keyframes woutline { 50% { outline-color: transparent; } }
@media (max-width: 700px) { .abin { padding: 3px 6px; gap: 3px; } .atile { min-width: 0; flex: 1; padding: 3px 5px; } .atile b { font-size: 14px; } .atrack { display: none; }
  /* PHONE (Dan 2026-11-13): just what you need at the track - TRACKS, LIVE, MAP, FLAGS, ANNOUNCE; the rest via TRACKS */
  .atile.nophone { display: none; } }

/* the site's own header links as tiles too, the page you're on filled (Dan 2026-11-13: same nav bar look everywhere) */
.top .in nav > a { border-radius: 7px; border: 1px solid var(--line); background: #fff; box-shadow: inset 0 -3px 0 var(--blue-t); font-weight: 600; }
.top .in nav a.on { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: none; }
.top .in nav a:hover:not(.on) { background: var(--blue-t); }

#entrant, #entcard { scroll-margin-top: 120px; }   /* the counter's entrant card opens below the sticky header + tile bar */

/* counter: available rental stock as tiles - click one to add / swap it in (Dan 2026-11-13) */
.stiles { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.stile { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; font: inherit; box-shadow: inset 0 -3px 0 var(--pb-t); }
.stile b { font: 800 italic 16px/1 var(--display); letter-spacing: .03em; } .stile small { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stile:hover { background: var(--blue-t); } .stile.on { background: var(--blue); border-color: var(--blue); color: #fff; } .stile.on small { color: #fff; }

.btn:disabled { opacity: .4; cursor: not-allowed; }   /* e.g. Swap / Add before a transponder is picked */
/* who you're logged in as, beside "YOUR LAPS" (Dan 2026-11-13) */
.whoami { margin-left: 10px; font-family: Inter, system-ui, "Segoe UI", sans-serif; font-style: normal; text-transform: none; font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--muted); background: #eef4ff; border-radius: 999px; padding: 2px 9px; vertical-align: middle; white-space: nowrap; }

/* heat map split into outings (Dan 2026-11-13) */
table.heat tr.outhd td { text-align: left; background: var(--panel); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 5px 6px 3px; }

/* took the chequered flag (Dan 2026-11-13, as MST) */
.cheqd { margin-left: 6px; font-size: 14px; }
.brow .bfin { font-size: 18px; line-height: 1; margin: 0 2px; }

/* ON TRACK / UP NEXT strip on the live pages (Dan 2026-11-13) */
.upnext { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; background: #fff; border: 1px solid #E3E9F3; border-radius: 10px; padding: 6px 12px; font-size: 14px; margin-bottom: 8px; }
.upnext b { font-size: 11px; letter-spacing: .08em; color: #fff; background: #0066FF; border-radius: 4px; padding: 2px 6px; margin-right: 4px; }
.upnext .on b { background: #16A34A; }
.upnext .gdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }