/* One set of controls for the whole app.
 *
 * Every page used to carry its own copy of the button rules, and they had
 * drifted: 9px 13px on watch, 10px 14px on fleet, 14px 16px on operate, three
 * different radii, and a `.go` that existed on two pages out of three. Nothing
 * was broken, so nothing forced them back together, and the app looked like
 * three apps.
 *
 * So the controls live here and the pages carry only what is theirs. A page
 * that wants a bigger button says `big`; it does not restate what a button is.
 *
 * THIS FILE IS LOADED BEFORE EACH PAGE'S OWN <style>, which means a page can
 * still override a rule when it genuinely needs to. That is deliberate and it
 * is also the thing to be suspicious of: an override here usually means the
 * shared rule is wrong for everybody, not that this page is special.
 */

:root{
  --bg:#0d1210; --panel:#151d1a; --line:#24322d; --ink:#e8efec;
  --dim:#93a49e; --accent:#57d08a; --warn:#e0a33c; --bad:#e05a5a;
  --r:12px;
  --pad:12px;
  /* The bar's own height, and the space a page has to leave under itself for
     it. Kept as variables because three pages need the second one and getting
     it wrong hides the last row of a card behind the bar. */
  --tabh:56px;
  --tabspace:calc(56px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box}

/* html as well as body. A body background propagates to the canvas only while
   html has none of its own, which is true here, but the app shipped a build
   with a white strip along the bottom edge and the cheapest way to make that
   whole class of thing impossible is to paint both. */
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);
     font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     -webkit-tap-highlight-color:transparent}

/* ---- the button ---------------------------------------------------------
   One definition. 44px minimum because that is the smallest thing a thumb
   hits reliably, and every one of these is pressed standing up, outdoors,
   with one hand. */
button{
  font:inherit; font-weight:550; line-height:1.25;
  color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r);
  padding:12px 15px; min-height:44px;
  cursor:pointer; touch-action:manipulation; text-align:center;
  -webkit-appearance:none; appearance:none;
}
button:hover:not(:disabled){border-color:#3a4d46}
button:active:not(:disabled){transform:scale(.98)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.45;cursor:default;transform:none}

/* The four things a button can be. Nothing else. */
button.go{background:var(--accent);color:#08110c;border-color:var(--accent);
          font-weight:650}
button.stop{background:var(--warn);color:#1a1206;border-color:var(--warn);
            font-weight:650}
button.ghost{background:transparent;color:var(--dim)}
button.danger{background:transparent;color:var(--bad);border-color:#4a2b2b}

/* And the three sizes. */
button.big{font-size:19px;font-weight:650;padding:18px 16px;width:100%}
button.tiny{padding:7px 11px;min-height:0;font-size:13px}
button.wide{width:100%}

/* A toggle, not a size: Full field / Action / Player, Draw, the player chips.
   Pressed is the accent, the same accent `go` uses, because "this is the one
   that is on" and "this is the one that does the thing" are the same idea. */
button[aria-pressed="true"]{background:var(--accent);color:#08110c;
  border-color:var(--accent);font-weight:650}

/* ---- the sign-in button -------------------------------------------------
   Google and Apple publish how their buttons look, and Apple's review
   guidelines are specific about theirs. index.html had them right and the
   three app screens had a generic green button that said "Continue with
   Google" with nothing of Google on it: the same drift as everything else in
   this file, and this one is also a review risk.

   The colours are hex rather than the page's variables on purpose. They are
   the dark variants Google and Apple publish, and they are not ours to
   re-theme. */
.pbtn{display:flex;align-items:center;justify-content:center;gap:10px;
      width:100%;min-height:48px;padding:0 16px;cursor:pointer;
      border-radius:12px;font:500 15px/1 system-ui,-apple-system,"Segoe UI",
      Roboto,sans-serif;letter-spacing:.01em;
      background:#131314;color:#e3e3e3;border:1px solid #8e918f;
      -webkit-appearance:none;appearance:none;touch-action:manipulation}
.pbtn:hover:not(:disabled){background:#1e1f20;border-color:#8e918f}
.pbtn:active:not(:disabled){background:#2a2b2c;transform:none}
.pbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pbtn svg{width:18px;height:18px;flex:0 0 auto}
.pbtn + .pbtn{margin-top:10px}

/* The wordmark, drawn rather than loaded, so the front door needs no image
   before it can paint. */
.mark{width:34px;height:34px;border-radius:9px;background:var(--accent);
      flex:0 0 auto;position:relative}
.mark::after{content:"";position:absolute;left:50%;top:5px;bottom:5px;
      width:2px;background:#08110c;transform:translateX(-50%)}

input,select,textarea{
  font:inherit; color:var(--ink); background:#0a0f0d;
  border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; width:100%; -webkit-appearance:none; appearance:none;
}
select{background-image:none}
input:focus-visible,select:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px}

/* ---- shared furniture ---------------------------------------------------- */
.card{background:var(--panel);border:1px solid var(--line);
      border-radius:14px;padding:14px 16px;margin:12px 0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.muted{color:var(--dim)}
.small{font-size:13px}
.hide{display:none}

/* ---- the bar ------------------------------------------------------------
   Fixed to the bottom because that is where a thumb is, and because this app
   is used one-handed at the side of a pitch. It replaces the row of coloured
   text that used to sit in the header on watch.html: a link in a native app
   looks like a web page someone forgot to finish, and there was no way to
   reach the operator or fleet screens from anywhere else at all.

   It is built by ui.js, not written into each page, so the tabs a role can see
   are decided in one place. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;
  /* Opaque. It was rgba(18,25,22,.94) over a saturate+blur backdrop filter,
     which is six per cent of a blur behind a bar nobody looks through, in
     exchange for a promoted layer on every screen. Removed while chasing the
     iPad ghost below; it was not the cause, and it is not coming back. */
  background:#121916;
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar[hidden]{display:none}
/* A KNOWN DEFECT ON iPad, which is why the app ships iPhone only.
   On an iPad sized WKWebView this fixed bar is composited a SECOND time
   across the top of the page: a ghost row of tab icons over the header, on
   every screen and every cold start. It is one element, at the right place:
   document.querySelectorAll(".tabbar").length is 1 and its rect is
   top=1294 h=82 in a 1376 high viewport. Ruled out, in this order: a
   duplicate mount, the backdrop filter, and promoting the bar to its own
   layer with translateZ. Hiding the bar removes the ghost, so it is this
   element and nothing else.
   The fix is to stop positioning it with `fixed` at all and make the page a
   flex column with the bar as a footer, which is a layout change across four
   pages and is not worth doing blind. Until then TARGETED_DEVICE_FAMILY is
   "1": the app still installs on an iPad and runs the iPhone layout, which
   is the layout that works. */
.tabbar > button{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  background:none;border:0;border-radius:0;
  padding:7px 4px 8px;min-height:var(--tabh);
  color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.02em;
}
.tabbar > button:hover:not(:disabled){border:0;background:rgba(255,255,255,.03)}
.tabbar > button:active:not(:disabled){transform:none;
  background:rgba(255,255,255,.07)}
.tabbar > button svg{width:23px;height:23px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* The tab you are on. Written with enough specificity to beat the
   aria-pressed rule above, because a tab is not a toggle and must never come
   out as a solid green block. */
.tabbar > button[aria-current="page"]{color:var(--accent);background:none;
  font-weight:700}

/* The page leaves room for the bar. Added by ui.js only when the bar is
   actually on screen, so a signed-out page keeps its whole height. */
body.has-tabs{padding-bottom:var(--tabspace)}

/* Full screen, which on a phone is a class and not the Fullscreen API.
   iOS does not implement requestFullscreen on anything but a <video>, and the
   picture here is a <canvas> being blitted from an off-screen video, so there
   is no video element to hand over. A fixed box over the whole viewport is
   what actually works, and it works the same on Android and in a browser. */
body.full{overflow:hidden;padding-bottom:0}
body.full .tabbar{display:none}