/* Recon — Copyright (c) 2026 Tedd Tony */
/* Recon — phone HUD.

   Soft and round on purpose: no outlines, no boxes inside boxes, red only for
   the one thing that is selected. Colours come from theme.css, so every rule
   here works in both the dark and the light theme. */

:root{
  /* safe box — worst case of iOS Dynamic Island (44) and Android nav bar (48) */
  --safe-l: max(env(safe-area-inset-left), 44px);
  --safe-r: max(env(safe-area-inset-right), 48px);
  --safe-b: 16px;
  --hdr-h: 52px;
  /* side columns hold thumb controls: a thumb does not grow with the phone */
  --col-l: 196px;
  --col-r: 196px;
  --gap: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:var(--panel);color:var(--t0);
  font-family:var(--f-body);font-weight:600;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- screen */
.screen{
  position:relative; height:100dvh; width:100%;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel);
}

/* header spans edge to edge; only its padding keeps text off the cutout */
.hdr{
  flex:none; height:var(--hdr-h);
  display:flex; align-items:center; gap:12px;
  padding:0 var(--safe-r) 0 var(--safe-l);
  font-size:14.5px; white-space:nowrap; min-width:0;
}
.hdr .k{font:800 15px var(--f-body);color:var(--red-alert)}
.hdr .k.amber{color:var(--amber)}
.hdr .m{font:600 14px var(--f-body);color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0}
.hdr .m.strong{color:var(--t0);font-weight:800}
.hdr .sp{flex:1}
.hdr .dot{width:9px;height:9px;border-radius:50%;background:var(--green-dot);display:block;flex:none}
.hdr .dot.amber{background:var(--amber)}
.hdr .dot.red{background:var(--red)}
.hdr .themebtn{padding:6px 12px;font-size:12.5px}

/* small round header buttons: undo, climb, simple mode */
.hbtn{
  flex:none; min-height:40px; padding:0 16px; border-radius:999px;
  background:var(--soft); color:var(--t1);
  display:flex; align-items:center; gap:6px;
  font:800 13.5px var(--f-body); touch-action:manipulation; cursor:pointer;
}
.hbtn .b{font-weight:600;color:var(--muted)}
.hbtn .b:empty{display:none}
.hbtn.on{background:var(--red);color:var(--on-red)}
.hbtn.on .b{color:var(--on-red);opacity:.85}

/* content sits inside the safe box */
.body{
  flex:1; min-height:0;
  padding:6px var(--safe-r) var(--safe-b) var(--safe-l);
  display:grid; gap:14px;
}
.body.split-260{grid-template-columns:1fr 260px;gap:var(--gap)}
.body.split-300{grid-template-columns:1fr 300px;gap:var(--gap)}
/* After the buzzer: three columns. The extra questions sit on a second page
   rather than a taller column, because nothing on this screen may scroll. */
.body.after{grid-template-columns:1fr 1fr 190px;gap:12px}
/* Page two is the one place a column here may scroll. It is optional, it is
   between matches, and losing a question off the bottom of a small phone would
   be worse than a scroll nobody usually sees. */
#afPage2a,#afPage2b{overflow-y:auto}
.body.seat{grid-template-columns:218px 1fr 190px;gap:var(--gap)}

.col{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.caption{font:700 13px var(--f-body);color:var(--muted);padding-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption.r{text-align:right;padding:0 6px 0 0}
.caption.plain{padding-left:2px;white-space:normal;line-height:1.35}
/* A row of choices has a 44px floor and a caption does not, so a column with
   one question too many squashes the labels to nothing. Keep the labels. */
.col .caption{flex-shrink:0}

/* ===================================================== LIVE MATCH
   Two layouts on one screen, picked by a class on .body:
   - pro:    left thumb picks how fast, right thumb holds, team and clock between
   - simple: one big hold button; how fast is asked after letting go
   The match details that used to crowd the middle (balls so far, runs, the
   timeline) are on the after-the-buzzer screen now. */
.body.live{grid-template-columns:var(--col-l) 1fr var(--col-r);gap:var(--gap)}
.body.live.simple{grid-template-columns:1fr 236px}
.body.live.simple .proonly,.body.live:not(.simple) .simpleonly{display:none !important}
.hdr .simpleonly{display:none}
.screen.simple .hdr .simpleonly{display:flex}
.screen.simple .hdr .proonly{display:none}

/* ------------------------------------------------------------ rate ladder */
.ladder{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}
.rate{
  flex:1; position:relative; border-radius:999px;
  background:var(--soft);
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  min-height:44px; touch-action:manipulation;
}
.rate .nm{font:800 15px var(--f-body);color:var(--t1)}
.rate .vl{font:700 22px var(--f-num);color:var(--t1);opacity:.75}
.rate.on{flex:1.3;background:var(--red);box-shadow:var(--shadow)}
.rate.on .nm,.rate.on .vl{color:var(--on-red);opacity:1}

/* the round buttons under a thumb column: feeding, defending */
.pair{display:flex;gap:8px;flex:none}
.ubtn{
  flex:1; min-height:50px; border-radius:22px;
  background:var(--soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  touch-action:manipulation;
}
.ubtn .a{font:800 13.5px var(--f-body);color:var(--t0)}
.ubtn .b{font:600 11.5px var(--f-body);color:var(--muted)}
.ubtn.on{background:var(--red)}
.ubtn.on .a,.ubtn.on .b{color:var(--on-red)}

/* ------------------------------------------------------------- hold pad */
.holdpad{
  flex:1; border-radius:36px; position:relative; overflow:hidden;
  background:var(--red-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:44px; touch-action:none; padding:0 18px;
}
.holdpad.on{background:var(--red);box-shadow:var(--shadow)}
.holdpad.off{background:var(--soft)}
.holdpad.idle{background:var(--soft)}
.holdpad .txt{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.holdpad .lb{font:800 15px/1.25 var(--f-body);color:var(--red-alert)}
.holdpad .big{font:700 56px/1 var(--f-num);letter-spacing:-.01em;color:var(--t0)}
.holdpad .un{font:600 13px/1.4 var(--f-body);color:var(--t1);max-width:30ch}
.holdpad.on .lb,.holdpad.on .big,.holdpad.on .un{color:var(--on-red)}
.holdpad.on .un{opacity:.85}
.holdpad.off .lb,.holdpad.idle .lb{color:var(--t1)}
.holdpad.off .big,.holdpad.idle .big{display:none}
/* simple mode: the pad is the whole screen, so its words do the explaining */
.simple .holdpad .lb{font-size:24px}
.simple .holdpad .un{font-size:14.5px}
.holdpad .big:empty{display:none}

/* ------------------------------------------------------------ centre HUD */
.centre{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;overflow:hidden;text-align:center}
.teamline{display:flex;flex-direction:column;align-items:center;gap:6px}
.teamno{font:700 76px/.85 var(--f-num);letter-spacing:-.01em}
.teammeta{display:flex;justify-content:center;flex-wrap:wrap}
.teammeta div{font:600 15px var(--f-body);color:var(--t1);white-space:nowrap}
.teammeta div:empty{display:none}
.teammeta div + div::before{content:'\00a0·\00a0';color:var(--muted)}
.clockbig{font:700 46px/1 var(--f-num);font-variant-numeric:tabular-nums}
.hdr .clockbig{font-size:30px}

/* whether shots count right now - a pill, green when the hub is on */
.shotstate{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font:700 13.5px var(--f-body);padding:6px 13px;border-radius:999px;
  color:var(--green);background:var(--green-bg);
}
.shotstate::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.shotstate.dead{color:var(--t1);background:var(--soft2)}
.shotstate.unknown{color:var(--t1);background:var(--soft)}
.shotstate.unknown::before{display:none}

/* ------------------------------------------------- simple-mode speed column */
.speed{display:flex;flex-direction:column;gap:8px;min-height:0;transition:opacity .15s}
.speed.dim .opts{opacity:.4}
.speed .q{font:700 13.5px var(--f-body);color:var(--muted);padding-left:6px}
.speed .opts{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}
.speed .o{
  flex:1;min-height:40px;border-radius:999px;background:var(--soft);
  display:flex;align-items:center;padding:0 20px;
  font:800 16px var(--f-body);color:var(--t1);touch-action:manipulation;
}
.speed .o.on{background:var(--red);color:var(--on-red)}
.speed .foot{font:600 12.5px/1.35 var(--f-body);color:var(--muted);padding-left:6px;min-height:17px}

/* --------------------------------------------- run timeline (after screen) */
.runbar{
  width:100%;height:22px;border-radius:11px;background:var(--soft2);
  position:relative;overflow:hidden;flex:none;
}
.runbar .r{position:absolute;top:4px;bottom:4px;border-radius:4px}
.runbar .r.trickle{background:var(--red-dim)}
.runbar .r.steady{background:var(--red)}
.runbar .r.dumping{background:var(--red-alert)}

/* ------------------------------------------------------------ seat screen */
.panel{border-radius:28px;background:var(--soft)}
.panel.pad{padding:22px 26px}

.initials{padding:14px 18px;border-radius:24px;background:var(--soft);cursor:pointer}
.initials .v{font:700 28px var(--f-num);color:var(--t0)}
.initials .h{font:600 13px var(--f-body);color:var(--muted)}

/* simple mode switch, on the seat and standby screens */
.modesw{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:24px;background:var(--soft);cursor:pointer;touch-action:manipulation}
.modesw .tg{width:44px;height:26px;border-radius:999px;background:var(--soft2);position:relative;flex:none;transition:background .15s}
.modesw .tg::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--t1);transition:transform .15s}
.modesw.on .tg{background:var(--red)}
.modesw.on .tg::after{transform:translateX(18px);background:var(--on-red)}
.modesw .w{display:flex;flex-direction:column;min-width:0}
.modesw .w b{font:800 14.5px var(--f-body)}
.modesw .w span{font:600 12.5px/1.35 var(--f-body);color:var(--muted)}

.stations{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:8px;flex:1;min-height:0}
.st{
  min-width:0;border-radius:24px;background:var(--soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px;
  position:relative;overflow:hidden;touch-action:manipulation;cursor:pointer;
}
.st .bar{display:none}
.st .al{font:800 13px var(--f-body)}
.st .nu{font:700 34px/1 var(--f-num)}
.st .wh{font:600 12px var(--f-body);white-space:nowrap;color:var(--muted)}
.st.red  .al,.st.red  .nu{color:var(--red-alert)}
.st.blue .al,.st.blue .nu{color:var(--blue-label)}
.st .wh.open{color:var(--green)}
.st.on{background:var(--red)}
.st.on .al,.st.on .nu,.st.on .wh{color:var(--on-red)}

.dashnote{padding:12px 16px;border-radius:22px;background:var(--soft);
  font:600 13px/1.45 var(--f-body);color:var(--body)}
.dashnote b{color:var(--t0);font-weight:800}
.dashfill{flex:1;padding:14px 16px;border-radius:22px;background:var(--soft);
  font:600 13px/1.5 var(--f-body);color:var(--body)}

.note{
  border-radius:22px;background:var(--soft);
  padding:14px 16px;font:600 13px/1.55 var(--f-body);color:var(--body);
}
.note b{color:var(--t0);font-weight:800}

.cta{
  border-radius:999px;background:var(--red);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:68px;touch-action:manipulation;cursor:pointer;padding:0 16px;text-align:center;
}
.cta .a{font:800 17px var(--f-body);color:var(--on-red)}
.cta .b{font:600 12.5px var(--f-body);color:var(--on-red);opacity:.85}
.cta.flat{background:var(--soft)}
.cta.flat .a{color:var(--t0);font-size:15px}
.cta.flat .b{color:var(--muted);opacity:1}

/* --------------------------------------------------------- lists / rows */
.list{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0}
.lrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px}
.lrow:nth-child(odd){background:var(--soft)}
.lrow .code{font:700 16px var(--f-num);min-width:40px}
.lrow .team{font:700 14px var(--f-body);min-width:48px}
.lrow .desc{flex:1;font:600 13px var(--f-body);color:var(--body);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .tag{font:700 12px var(--f-body);padding:3px 10px;border-radius:999px}
.lrow .tag.sent{color:var(--green);background:var(--green-bg)}
.lrow .tag.queued{color:var(--amber);background:var(--amber-bg)}

/* -------------------------------------------------------- standby / offline */
.bigpanel{border-radius:32px;background:var(--soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;min-height:0;padding:14px}
.bigpanel .glow{display:none}
.bigpanel > *{position:relative}
.eyebrow{font:700 14px var(--f-body);color:var(--muted)}
.countdown{font:700 88px/.9 var(--f-num);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.until{font:700 15px var(--f-body);color:var(--red-alert);text-align:center}
.pill{margin-top:12px;padding:8px 16px;border-radius:999px;background:var(--soft2);
  font:600 13px var(--f-body);color:var(--body)}

.offpanel{border-radius:32px;background:var(--amber-bg);
  padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.offpanel h2{font:800 28px/1.2 var(--f-body);margin:0;color:var(--t0)}
.offpanel p{font:600 15px/1.55 var(--f-body);color:var(--body);max-width:440px;margin:0}
.obtn{padding:13px 22px;border-radius:999px;background:var(--red);cursor:pointer;
  font:800 14px var(--f-body);color:var(--on-red)}
.obtn.ghost{background:var(--soft);color:var(--t1)}
.amberbox{padding:13px 16px;border-radius:22px;
  background:var(--amber-bg);font:600 13px/1.5 var(--f-body);color:var(--body)}
.amberbox b{color:var(--t0)}

/* --------------------------------------------------------- after the buzzer */
.steps{display:flex;gap:8px;align-items:flex-end;flex:1;min-height:0}
.step{
  flex:1;border-radius:18px;background:var(--soft);
  display:flex;align-items:flex-end;justify-content:center;padding:0 2px 10px;text-align:center;
  font:700 12.5px/1.2 var(--f-body);color:var(--t3);min-height:44px;touch-action:manipulation;
}
.step.on{background:var(--red);color:var(--on-red);font-weight:800}
.step.sel{color:var(--t0)}

.wrongs{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-height:0}
.wrong{
  border-radius:22px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  font:800 13.5px/1.25 var(--f-body);color:var(--t2);
  min-height:44px;touch-action:manipulation;
}
.wrong.on{background:var(--red);color:var(--on-red)}

/* A row of small choices — start zone, who they were blocking, preload. */
.picks{display:flex;gap:8px;flex-wrap:wrap}
.pick{
  border-radius:999px;background:var(--soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:6px 14px;min-width:58px;min-height:44px;flex:1;
  font:800 13.5px/1.2 var(--f-body);color:var(--t2);
  touch-action:manipulation;
}
.pick .sub{font:600 11.5px var(--f-body);color:var(--muted);margin-top:1px}
.pick.on{background:var(--red);color:var(--on-red)}
.pick.on .sub{color:var(--on-red);opacity:.85}

.notebox{border-radius:22px;background:var(--soft);
  padding:12px 16px;display:flex;gap:8px;align-items:flex-start;min-height:64px}
.notebox .lb{font:700 13px var(--f-body);color:var(--muted);padding-top:1px}
.notebox textarea{
  flex:1;background:transparent;border:none;outline:none;resize:none;color:var(--t0);
  font:600 13.5px/1.5 var(--f-body);min-height:40px;user-select:text;-webkit-user-select:text;
}
.notebox textarea::placeholder{color:var(--dim)}
.summary{border-radius:28px;background:var(--soft);
  padding:14px 18px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.summary .big{display:flex;align-items:flex-end;gap:8px}
.summary .big .n{font:700 44px/.9 var(--f-num)}
.summary .big .u{font:600 13px var(--f-body);color:var(--body);padding-bottom:5px}
/* the right column holds the summary and both buttons; the buttons give
   height before the summary does */
.body.after .cta{min-height:58px}
.body.after .cta.flat{min-height:48px}
.body.after .summary{padding:12px 16px;gap:4px}
.body.after .summary .big .n{font-size:38px}
.srow{display:flex;justify-content:space-between;font:600 13px var(--f-body);color:var(--body)}
.srow b{color:var(--red-alert);font-weight:800}
.srow span.w{color:var(--t0);font-weight:800}

/* ------------------------------------------------------------ responsive */
/* Side columns are fixed; the centre column is the only 1fr and absorbs
   every extra or missing pixel. Above 932 the centre caps and letterboxes. */
@media (min-width:933px){ .body.live:not(.simple){justify-content:center} .centre{max-width:640px;margin:0 auto;width:100%} }

/* A phone too small to hold the match HUD is too small to scout a match on.
   Scoped to .landscape-only so portrait screens (pit scouting) are unaffected. */
#toosmall{display:none}
@media (max-height:300px),(max-width:640px){
  body.landscape-only .screen{display:none}
  body.landscape-only #toosmall{display:flex;align-items:center;justify-content:center;
    height:100dvh;padding:24px;text-align:center;font:700 16px/1.5 var(--f-body);color:var(--body)}
}
.hide{display:none !important}

/* Narrow landscape. The side columns and gaps give first; every control stays
   far above the 44px floor. */
@media (max-width:779px){
  body.landscape-only{--col-l:172px;--col-r:172px;--gap:12px}
  .body.live.simple{grid-template-columns:1fr 206px}
  .body.seat{grid-template-columns:176px 1fr 168px}
  .hdr{gap:9px}
  .hbtn{padding:0 12px}
}
/* iPhone SE landscape. */
@media (max-width:700px){
  body.landscape-only{--col-l:146px;--col-r:146px;--gap:10px}
  .teamno{font-size:64px}
  .rate{padding:0 14px}
  .rate .nm{font-size:14px}
}
/* Short screens: a phone with its browser bar showing. */
@media (max-height:360px){
  .body.seat .dashfill{display:none}
  :root{--hdr-h:46px}
  .teamno{font-size:60px}
  .clockbig{font-size:38px}
  .hdr .clockbig{font-size:26px}
  .hbtn{min-height:36px}
}

/* Chrome-hiding affordance. Only rendered where it is actionable — it removes
   itself in standalone mode and on platforms with no Fullscreen API. */
.fshint{font:700 12px var(--f-body);color:var(--muted);
  background:var(--soft);border-radius:999px;padding:5px 11px;white-space:nowrap}
.fshint:empty{display:none}

/* Add-to-Home-Screen offer. Shown only on iPhone Safari (see fullscreen.js) and
   deliberately covering the seat screen: on iOS the home-screen app gets its own
   storage partition, so this has to be answered before any data is entered. */
.a2hs{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:16px max(env(safe-area-inset-right),16px) 16px max(env(safe-area-inset-left),16px);
  background:var(--scrim);backdrop-filter:blur(6px);overflow:auto}
.a2hscard{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start;
  width:100%;max-width:720px;padding:20px 22px;border-radius:28px;
  background:var(--panel);box-shadow:var(--shadow)}
.a2hscard h2{font:800 24px/1.15 var(--f-body);margin:0;color:var(--t0)}
.a2hssteps{margin:2px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:7px;
  font:600 14px/1.45 var(--f-body);color:var(--body)}
.a2hssteps b{color:var(--t0);font-weight:800}
.a2hs .obtn{text-align:center}
/* Portrait, and the shortest landscape phones: stack rather than squeeze. */
@media (max-width:700px), (orientation:portrait){
  .a2hscard{grid-template-columns:1fr;gap:12px;padding:16px}
  .a2hscard h2{font-size:20px}
}

/* ------------------------------------------------------------ idle standby
   The screen is deliberately held awake between matches: a scout has to see the
   HUD open by itself when the match takes the field, and once a phone sleeps the
   browser suspends the page and it can neither show that nor buzz about it.

   None of that requires the screen to be BRIGHT through a six-minute gap. After
   a minute with nobody touching it, hud.js sets .idle: the background goes to
   black (near-off on the OLED panels these phones have) and the panels lose
   their fill. The countdown and the robot stay legible - dim, not hidden. Any
   touch, the match arming, or the countdown coming inside a minute takes the
   class straight back off. Black in either theme: the point is the battery. */
#s-standby.idle{background:#000;color:#f3f3f5}
#s-standby.idle .hdr .k,#s-standby.idle .hdr .m{color:#9696a0}
#s-standby.idle .bigpanel,#s-standby.idle .lrow,#s-standby.idle .pick,
#s-standby.idle .pill,#s-standby.idle .cta.flat,#s-standby.idle .hbtn,#s-standby.idle .themebtn{background:rgba(255,255,255,.04);color:#9696a0}
#s-standby.idle .pick.on{background:rgba(229,50,61,.25);color:#f3f3f5}
#s-standby.idle .cta.flat .a{color:#c8c8cf}
#s-standby.idle .until{color:#ff7a82}
/* One transition, on opacity only, so coming back does not read as a glitch.
   It runs for 200ms on a tap and never again - nothing here animates on its own. */
#s-standby{transition:opacity .2s ease-out}
#s-standby.idle{opacity:.62}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }