:root{
  --ground:#07090B; --panel:#10141A; --panel2:#151A21; --edge:#1E242B;
  --ink:#EDF1F4; --dim:#7E8894; --faint:#4B545E;
  --cyan:#00E5FF; --live:#2BE08B; --yellow:#FFD23D; --red:#FF4438; --purple:#B36BFF;
  --soft:#FF3B30; --medium:#FFD23D; --hard:#F2F4F6; --inter:#3DDC6B; --wet:#2D9CFF;
  --row:46px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--ground);color:var(--ink);overflow-x:hidden;max-width:100%}
body{
  font-family:"Barlow Condensed",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.25;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:none;
}
.mono,.c-gap,.c-lap,#session-clock,#scrub-time{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:30;background:rgba(7,9,11,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge);padding:calc(env(safe-area-inset-top) + 8px) 12px 0;
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.id{display:flex;align-items:center;gap:7px;min-width:0}
.mark{font-weight:700;letter-spacing:.16em;font-size:11px;color:var(--cyan)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.dot.on{background:var(--live);box-shadow:0 0 0 0 rgba(43,224,139,.6);animation:pulse 2s infinite}
.dot.replay{background:var(--yellow)}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(43,224,139,0)}100%{box-shadow:0 0 0 0 rgba(43,224,139,0)}}
#live-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.clock{font-size:14px;color:var(--dim);font-weight:500}
h1{margin:4px 0 0;font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.05}
.sub{display:flex;gap:10px;align-items:baseline;color:var(--dim);font-size:13px;margin:1px 0 8px;letter-spacing:.04em;text-transform:uppercase}
#lap-count{margin-left:auto;color:var(--ink);font-weight:600}

.flag{margin:0 0 8px;max-width:100%;box-sizing:border-box;padding:6px 10px;border-radius:7px;text-align:center;
  font-weight:700;letter-spacing:.14em;font-size:12px;text-transform:uppercase}
.flag.yellow{background:rgba(255,210,61,.14);color:var(--yellow);border:1px solid rgba(255,210,61,.35)}
.flag.red{background:rgba(255,68,56,.16);color:var(--red);border:1px solid rgba(255,68,56,.4)}
.flag.sc{background:rgba(255,210,61,.14);color:var(--yellow);border:1px solid rgba(255,210,61,.35)}
.flag.green{background:rgba(43,224,139,.13);color:var(--live);border:1px solid rgba(43,224,139,.3)}

.tabs{display:flex;gap:2px}
.tab{
  flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);
  font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  padding:9px 0 8px;cursor:pointer;white-space:nowrap
}
.tab.on{color:var(--ink);border-bottom-color:var(--cyan)}

/* ---------- timing ---------- */
main{padding:0 0 70px}
.view{display:none}
.view.on{display:block}
.legend{display:flex;gap:12px;padding:7px 12px 6px;font-size:10.5px;color:var(--dim);
  letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:5px;border-radius:2px;margin-right:4px;vertical-align:middle}
.sw.purple{background:var(--purple)}.sw.green{background:var(--live)}
.sw.yellow{background:var(--yellow)}.sw.grey{background:#39414A}

.trow{
  display:grid;align-items:center;
  grid-template-columns:17px 44px 52px 58px minmax(28px,1fr) 46px;
  gap:5px;padding:0 8px;height:var(--row);overflow:hidden;
  border-bottom:1px solid rgba(30,36,43,.75)
}
.thead{height:26px;font-size:9.5px;letter-spacing:.14em;color:var(--faint);
  border-bottom:1px solid var(--edge);position:sticky;top:0;background:var(--ground);z-index:5}
#timing .trow{cursor:pointer}
#timing .trow:active{background:var(--panel2)}
.trow.out{opacity:.42}
.trow.pit .c-drv::after{content:"PIT";margin-left:5px;font-size:9px;letter-spacing:.1em;
  color:#06202E;background:var(--cyan);padding:1px 4px;border-radius:3px;vertical-align:1px}
.c-pos{font-size:15px;font-weight:700;color:var(--dim);text-align:right}
.c-drv{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.tc{width:3px;height:22px;border-radius:2px;flex:none}
.tla{font-size:16px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.c-gap,.c-lap{font-size:12px;text-align:right;white-space:nowrap;overflow:hidden}
.c-gap{color:var(--dim)}
.c-lap.pb{color:var(--live)}
.c-lap.ob{color:var(--purple)}
.c-sec{display:flex;gap:3px;align-items:center;min-width:0;overflow:hidden}
.sec{flex:1;height:7px;border-radius:2px;background:#39414A}
.sec.y{background:var(--yellow)}.sec.g{background:var(--live)}.sec.p{background:var(--purple)}
.mini{display:flex;gap:1px;height:6px;margin-top:3px;min-width:0;overflow:hidden}
.mini i{flex:1 1 0;min-width:0;background:#2B323A;border-radius:1px}
.mini i.y{background:rgba(255,210,61,.85)}.mini i.g{background:rgba(43,224,139,.9)}
.mini i.p{background:rgba(179,107,255,.9)}.mini i.b{background:var(--wet)}
.c-tyr{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.comp{width:19px;height:19px;border-radius:50%;border:2px solid var(--faint);
  display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.comp.SOFT{border-color:var(--soft);color:var(--soft)}
.comp.MEDIUM{border-color:var(--medium);color:var(--medium)}
.comp.HARD{border-color:var(--hard);color:var(--hard)}
.comp.INTERMEDIATE{border-color:var(--inter);color:var(--inter)}
.comp.WET{border-color:var(--wet);color:var(--wet)}
.age{font-size:11px;color:var(--dim);font-family:"JetBrains Mono",monospace}
.note{color:var(--faint);font-size:11.5px;padding:10px 12px;margin:0;line-height:1.45}

/* ---------- map ---------- */
#track{width:100%;display:block;touch-action:none}

/* ---------- race control ---------- */
#control{padding:4px 0}
.msg{display:grid;grid-template-columns:52px 1fr;gap:9px;padding:9px 12px;
  border-bottom:1px solid rgba(30,36,43,.7);font-size:14px;align-items:start}
.msg time{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--faint);padding-top:2px}
.msg.y span{color:var(--yellow)}.msg.r span{color:var(--red)}
.msg.g span{color:var(--live)}.msg.b span{color:var(--wet)}

/* ---------- driver sheet ---------- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--panel);
  border-top:1px solid var(--edge);border-radius:16px 16px 0 0;
  padding:8px 14px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 40px rgba(0,0,0,.6);animation:rise .2s ease
}
@keyframes rise{from{transform:translateY(16px);opacity:0}}
.sheet-grab{width:34px;height:4px;border-radius:3px;background:#2B323A;margin:0 auto 10px}
.sheet-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ds-num{font-size:30px;font-weight:700;line-height:1;min-width:46px}
.ds-name{font-size:19px;font-weight:600;line-height:1.1}
.ds-team{font-size:12px;color:var(--dim);letter-spacing:.07em;text-transform:uppercase}
.sheet-head button{margin-left:auto;background:none;border:0;color:var(--dim);font-size:30px;line-height:1;padding:0 4px}
.tele-row{display:flex;align-items:baseline;gap:7px;font-size:11px;letter-spacing:.12em;color:var(--dim);margin-top:9px}
.tele-row b{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:17px;color:var(--ink);font-weight:700}
.tele-row small{color:var(--faint);font-size:10px;width:30px;text-align:right}
.bar-track{height:6px;background:#1B2128;border-radius:3px;overflow:hidden;margin-top:4px}
.bar-track i{display:block;height:100%;width:0;background:var(--cyan);transition:width .12s linear}
.bar-track i.thr{background:var(--live)}
.bar-track i.brk{background:var(--red)}
.chips{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.chip{background:var(--panel2);border:1px solid var(--edge);border-radius:6px;
  padding:5px 9px;font-size:11px;letter-spacing:.1em;color:var(--dim)}
.chip b{color:var(--ink);font-family:"JetBrains Mono",monospace;margin-left:4px}
.chip.drs-on{background:rgba(43,224,139,.16);border-color:rgba(43,224,139,.45);color:var(--live)}
.f1tv{display:block;margin-top:14px;padding:12px;text-align:center;border-radius:9px;
  background:var(--cyan);color:#05222B;font-weight:700;font-size:14px;letter-spacing:.04em;text-decoration:none}
.tiny{color:var(--faint);font-size:10.5px;margin:9px 0 0;line-height:1.5;text-align:center}

/* ---------- replay bar ---------- */
footer{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(7,9,11,.95);backdrop-filter:blur(14px);border-top:1px solid var(--edge)
}
footer button{background:var(--panel2);border:1px solid var(--edge);color:var(--ink);
  width:38px;height:34px;border-radius:7px;font-size:13px;flex:none}
#scrub{flex:1;accent-color:var(--cyan);background:transparent}
#scrub-time{font-size:11.5px;color:var(--dim);width:58px;text-align:right}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:90;background:var(--ground);display:grid;
  place-content:center;justify-items:center;gap:16px;color:var(--dim);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
#boot.gone{display:none}
.spin{width:26px;height:26px;border:2px solid var(--edge);border-top-color:var(--cyan);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:620px){
  .trow{grid-template-columns:30px minmax(110px,1fr) 80px 86px 120px 86px;max-width:760px;margin:0 auto}
  main{max-width:860px;margin:0 auto}
  h1{font-size:32px}
}

/* ---------- video ---------- */
.tube{position:relative;width:100%;padding-top:56.25%;background:#000;border-bottom:1px solid var(--edge)}
.tube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.upnext{margin:0 -12px;padding:7px 12px;border-top:1px solid var(--edge);
  background:rgba(0,229,255,.07);color:var(--dim);font-size:12px;letter-spacing:.05em}
.upnext b{color:var(--cyan);letter-spacing:.14em;margin-right:5px}
.upnext i{font-style:normal;color:var(--faint)}

/* ---------- hard width containment ----------
   Flex and grid children default to min-width:auto, so a single long run of
   text or a wide strip of mini-sectors can push the whole page wider than the
   phone. Everything below pins that shut. */
html{overflow-x:hidden}
body{width:100%;max-width:100%}
header,main,footer,.view,.legend,.trow,.tabs,.sub,.bar,.id,#control,.msg{max-width:100%}
.trow > *{min-width:0;overflow:hidden}
.tabs .tab{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:clip}
.bar > *,.sub > *,.id > *,.msg > *{min-width:0}
h1{overflow-wrap:anywhere}
.c-sec > div{min-width:0;flex:1 1 0}
.flag{width:auto}

/* ---------- session picker ---------- */
.meeting-btn{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:4px 0 0;
  font-family:inherit;font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.05;
  color:var(--ink);cursor:pointer;overflow-wrap:anywhere
}
.meeting-btn .caret{font-size:14px;color:var(--cyan);vertical-align:4px;margin-left:5px}
.picker{position:fixed;inset:0;z-index:80;background:var(--ground);display:flex;flex-direction:column}
.picker-top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 10px;
  border-bottom:1px solid var(--edge)}
.picker-top strong{font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.picker-top button{margin-left:auto;background:none;border:0;color:var(--dim);font-size:30px;line-height:1}
.years{display:flex;gap:7px;padding:10px 14px;border-bottom:1px solid var(--edge);overflow-x:auto}
.years button{flex:none;background:var(--panel2);border:1px solid var(--edge);color:var(--dim);
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;padding:6px 13px;border-radius:999px}
.years button.on{background:var(--cyan);border-color:var(--cyan);color:#05222B}
.picker-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:40px}
.pmeet{padding:13px 14px 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.psess{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid rgba(30,36,43,.7);color:var(--ink);font-family:inherit;
  font-size:16px;padding:12px 14px;cursor:pointer}
.psess:active{background:var(--panel2)}
.psess .pt{font-size:11px;color:var(--faint);margin-left:auto;font-family:"JetBrains Mono",monospace}
.psess.now{color:var(--live)}
.psess.now::after{content:"NOW";font-size:9px;letter-spacing:.12em;background:var(--live);
  color:#05240F;padding:2px 5px;border-radius:3px}
.picker-msg{padding:22px 14px;color:var(--faint);font-size:13px}