/* ============================================================
   Dugout — visual system, ported from docs/dugout-v3.html.

   Login gate, app shell, Roster and Game. Pitching and Rules are not
   built yet, so their styles are not here either.

   The --team / --teamwash / --teamink triple is overridden per team on
   the .wrap element (see TeamTheme), so the same stylesheet renders
   Cardinals red and Tigers orange.
   ============================================================ */

:root{
  --paper:#F2ECD8;--paper2:#E8E0C4;--rule:#CDC29C;--rule2:#DED4B2;
  --ink:#17233D;--ink2:#4A5673;
  --blue:#2C4C8C;--bluewash:#DFE5F2;--blueink:#1B3570;
  --greenwash:#E1E7D6;--greenink:#3B5029;
  --red:#B33A2B;--redwash:#F2DED9;
  --gold:#8A6A1F;--goldwash:#F0E6C6;
  --grass:#1E4A2B;--grass2:#2C6B3C;--chalk:#F4F1E4;
  --team:#A5232E;--teamwash:#F7DFDD;--teamink:#7C1922;
  --disp:"Oswald","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/* ================= LOGIN ================= */

/* The gate is fixed to the viewport, so the page behind it must not
   scroll or show paper-coloured edges under the grass. */
body.gatebody{background:var(--grass);overflow:hidden}

#gate{
  position:fixed;inset:0;z-index:99;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:
    repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.035) 46px 92px),
    radial-gradient(ellipse at 50% 22%,var(--grass2) 0%,var(--grass) 62%,#143520 100%);
  overflow-y:auto;
}

.gatebox{width:100%;max-width:340px;text-align:center}

.crest{
  background:none;border:0;padding:0;cursor:pointer;
  display:block;margin:0 auto 16px;width:94px;
}
.crest svg{display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.35))}
.crest:focus-visible{outline:2px solid var(--chalk);outline-offset:5px}

.gatebox h1{
  font-family:var(--disp);font-weight:700;font-size:30px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--chalk);
  margin:0 0 3px;line-height:1;
}
.gatebox .gsub{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(244,241,228,.6);margin-bottom:24px;
}

.gfield{margin-bottom:9px;text-align:left}
.gfield label{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(244,241,228,.65);margin-bottom:4px;
}
.gfield input{
  width:100%;padding:13px 12px;
  border:2px solid rgba(244,241,228,.3);background:rgba(0,0,0,.22);
  font-family:var(--body);
  /* 16px is not a style choice — below it, iOS Safari zooms the page on
     focus and the coach has to pinch back out. See CLAUDE.md. */
  font-size:16px;
  color:var(--chalk);
  border-radius:0;appearance:none;
}
.gfield input:focus{outline:none;border-color:var(--chalk);background:rgba(0,0,0,.34)}
.gfield input::placeholder{color:rgba(244,241,228,.35)}

#gologin{
  width:100%;margin-top:8px;appearance:none;
  border:2px solid var(--chalk);background:var(--chalk);color:var(--grass);
  font-family:var(--disp);font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;padding:13px;cursor:pointer;
  /* Comfortably past the 44px tap target the brief asks for. */
  min-height:48px;border-radius:0;
}
#gologin:active{transform:translateY(1px)}
#gologin:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}

#gerr{
  color:#F3B7AE;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  min-height:17px;margin-top:9px;
}
#gerr span{display:block}

.gnote{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  color:rgba(244,241,228,.42);margin-top:20px;line-height:1.7;
}