/* Layout: scoreboard-style tabbed bench tool — sticky scarlet header, tab bar,
     card sections, players x shifts matrix. Carlisle Wildcats scarlet and gold:
     scarlet marks time on court, a gold ring marks the ball-handler, so the two
     school colors each carry one piece of information rather than decorating. */
  :root{
    --bg:#f7f4f3; --surface:#ffffff; --surface-2:#f1eceb;
    --fg:#1c1617; --muted:#6d6160; --line:#e4dbda;
    /* Sampled from the Carlisle crest: red #fd0014, gold #eea500. */
    --brand:#fd0014; --brand-ink:#ffffff;
    /* White on #fd0014 is 4.05:1 — fine for the 25px wordmark, short of the
       4.5:1 small text needs. Fills that carry small labels use this deeper
       red instead (5.5:1); the two sit far apart and read as one color. */
    --accent:#d6000f; --accent-ink:#ffffff; --accent-soft:#fde7e8;
    --gold:#eea500; --gold-mark:#b87d00; --gold-soft:#fdf0d4;
    --good:#2f7d52; --good-soft:#e2f0e7;
    --warn:#8a4b00; --warn-bg:#fdf1dd; --warn-line:#e8c178;
    --shadow:0 1px 2px rgba(40,18,20,.06),0 4px 14px rgba(40,18,20,.05);
    --r:14px;
    --fdisp:"Big Shoulders Display","Barlow Semi Condensed",system-ui,sans-serif;
    --fbody:"Barlow",system-ui,-apple-system,sans-serif;
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --bg:#15100f; --surface:#211a19; --surface-2:#2b2221;
    --fg:#f4efed; --muted:#a39390; --line:#372b29;
    /* The crest red lifted for a dark ground; the deep fill red is unchanged
       because a fill carries its own contrast with its label. */
    --brand:#ff3a46; --brand-ink:#ffffff;
    --accent:#d6000f; --accent-ink:#ffffff; --accent-soft:#3c171a;
    --gold:#f2b32a; --gold-mark:#f2b32a; --gold-soft:#36260f;
    --good:#4fae77; --good-soft:#1d3127;
    --warn:#f2c478; --warn-bg:#36260f; --warn-line:#6b5223;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
    color-scheme:dark;
  }}
  :root[data-theme="dark"]{
    --bg:#15100f; --surface:#211a19; --surface-2:#2b2221;
    --fg:#f4efed; --muted:#a39390; --line:#372b29;
    /* The crest red lifted for a dark ground; the deep fill red is unchanged
       because a fill carries its own contrast with its label. */
    --brand:#ff3a46; --brand-ink:#ffffff;
    --accent:#d6000f; --accent-ink:#ffffff; --accent-soft:#3c171a;
    --gold:#f2b32a; --gold-mark:#f2b32a; --gold-soft:#36260f;
    --good:#4fae77; --good-soft:#1d3127;
    --warn:#f2c478; --warn-bg:#36260f; --warn-line:#6b5223;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
    color-scheme:dark;
  }

  *{box-sizing:border-box}
  body{background:var(--bg);color:var(--fg);font-family:var(--fbody);line-height:1.45;-webkit-text-size-adjust:100%}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--brand);z-index:30}
  h1,h2,h3{font-family:var(--fdisp);text-wrap:balance;margin:0;font-weight:700;letter-spacing:.2px}
  .tnum{font-variant-numeric:tabular-nums}
  button{font-family:var(--fbody);cursor:pointer}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

  /* header */
  header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--brand);color:var(--brand-ink);
    box-shadow:inset 0 -3px 0 var(--gold)}
  .hwrap{display:flex;align-items:center;gap:10px;padding-block:12px;
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .logo{display:flex;align-items:center;gap:9px;min-width:0}
  .logotext{display:flex;flex-direction:column;min-width:0}
  .brand{font-family:var(--fdisp);font-weight:800;font-size:25px;letter-spacing:.8px;text-transform:uppercase;line-height:1}
  .teamline{font-family:var(--fbody);font-size:12.5px;font-weight:600;letter-spacing:.3px;line-height:1.2;margin-top:3px;
    opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .logo svg{width:23px;height:23px;display:block;color:var(--gold)}
  .hspace{flex:1}
  .iconbtn{background:rgba(255,255,255,.16);color:var(--brand-ink);border:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px}
  .iconbtn:hover{background:rgba(255,255,255,.26)}

  /* tab bar */
  /* The tab bar pins directly under the header. Its height is not fixed — the
     team name adds a line — so bench.js measures the header and sets
     --headerH; the fallback only applies before that first measurement. */
  nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--headerH, 52px));z-index:19;background:var(--bg);border-bottom:1px solid var(--line)}
  .tabs{display:flex;gap:2px;
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .tab{flex:1;background:none;border:none;padding:11px 4px 9px;color:var(--muted);font-weight:600;font-size:15px;
    border-bottom:2.5px solid transparent;font-family:var(--fdisp);letter-spacing:.6px;text-transform:uppercase}
  .tab[aria-selected="true"]{color:var(--brand);border-color:var(--brand)}

  main{max-width:640px;margin:0 auto;
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
    padding-block:18px 40px}

  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
  .card h2{font-size:16px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:12px;font-weight:600;font-family:var(--fdisp)}

  label.field{display:block;margin-bottom:12px}
  label.field > span{display:block;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;font-weight:600}
  input[type=text],input[type=number],select{width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--surface-2);
    color:var(--fg);border-radius:10px;font-size:16px;font-family:var(--fbody)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  .addrow{display:flex;gap:8px}
  .addrow input{flex:1;min-width:0}
  .btn{background:var(--accent);color:var(--accent-ink);border:none;padding:10px 16px;border-radius:10px;font-weight:600;font-size:15px}
  .btn:hover{filter:brightness(1.07)}
  .btn.ghost{background:var(--surface-2);color:var(--fg);border:1px solid var(--line)}
  .btn.sm{padding:7px 12px;font-size:13.5px}

  .roster{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
    border-radius:999px;padding:6px 8px 6px 14px;font-weight:500}
  .pill .x{border:none;background:none;color:var(--muted);font-size:18px;line-height:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
  .pill .x:hover{background:var(--line);color:var(--fg)}
  .empty{color:var(--muted);font-size:14px}

  /* game nav */
  .gamenav{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .gamenav .nbtn{background:var(--surface);border:1px solid var(--line);width:40px;height:40px;border-radius:11px;font-size:20px;color:var(--fg);box-shadow:var(--shadow)}
  .gamenav .nbtn:disabled{opacity:.35}
  .gamenav .gtitle{flex:1;text-align:center;min-width:0}
  .gamenav .gtitle .g{font-family:var(--fdisp);font-size:30px;font-weight:800;line-height:1;letter-spacing:.5px;text-transform:uppercase}
  .gamenav .gtitle .of{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:600}

  .hint{font-size:13px;color:var(--muted);margin:2px 0 10px}

  /* coverage warning — the engine cannot guarantee a handler every shift */
  .warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:4px solid var(--gold);
    border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:14px;color:var(--fg)}
  .warn .wh{font-family:var(--fdisp);font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:14.5px;color:var(--warn);
    display:flex;align-items:center;gap:7px}
  .warn .wh svg{width:17px;height:17px;flex:none}
  .warn p{margin:5px 0 0}
  .warn code{font-family:var(--fbody);font-weight:700;background:var(--gold-soft);color:var(--fg);padding:1px 6px;border-radius:5px}
  .okbar{background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 32%,transparent);
    border-radius:12px;padding:9px 14px;margin-bottom:14px;font-size:13.5px;color:var(--fg);display:flex;align-items:center;gap:8px}
  .okbar svg{width:16px;height:16px;flex:none;color:var(--good)}

  /* handler chips */
  .hchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .hchip{border:1.5px solid var(--line);background:var(--surface-2);color:var(--fg);border-radius:999px;padding:7px 13px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
  .hchip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--brand);color:var(--fg);font-weight:600}
  .hchip .star{color:var(--line);font-size:13px}
  .hchip[aria-pressed="true"] .star{color:var(--gold-mark)}

  /* matrix */
  .matrixwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
  table.matrix{border-collapse:collapse;width:100%;min-width:max-content}
  table.matrix th,table.matrix td{border-bottom:1px solid var(--line);padding:0}
  table.matrix thead th{position:sticky;top:0;background:var(--surface-2);z-index:2}
  .colhead{padding:7px 6px 6px;text-align:center;min-width:48px}
  .colhead .bk{font-family:var(--fdisp);font-weight:700;font-size:14px;display:block;letter-spacing:.3px}
  .colhead .tm{font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .colhead.gap .bk{color:var(--warn)}
  .namecol{position:sticky;left:0;z-index:3;background:var(--surface);min-width:94px;text-align:left;padding:8px 10px;border-right:1px solid var(--line)}
  thead .namecol{background:var(--surface-2);z-index:4}
  .nm{font-weight:600;display:flex;align-items:center;gap:5px;line-height:1.1}
  .nm .star{color:var(--gold-mark);font-size:12px}
  .nm.bench{color:var(--muted);font-weight:500}
  .mincol{position:sticky;right:0;z-index:3;background:var(--surface);min-width:60px;text-align:right;padding:8px 10px;border-left:1px solid var(--line)}
  thead .mincol{background:var(--surface-2);z-index:4}
  .cell{text-align:center;padding:9px 6px;font-size:12px;font-weight:700;font-family:var(--fdisp);letter-spacing:.6px}
  .cell.in{background:var(--accent);color:var(--accent-ink)}
  .cell.in.h{box-shadow:inset 0 0 0 2.5px var(--gold)}
  .cell.out{color:var(--line)}
  tbody tr:last-child td{border-bottom:none}
  .min{font-weight:700;font-family:var(--fdisp);font-size:17px;font-variant-numeric:tabular-nums}
  .min .bk{display:block;font-size:10.5px;color:var(--muted);font-weight:500;font-family:var(--fbody)}

  .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12.5px;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .sw{width:16px;height:16px;border-radius:5px;display:inline-block;flex:none}
  .sw.in{background:var(--accent)}
  .sw.h{background:var(--accent);box-shadow:inset 0 0 0 2.5px var(--gold)}
  .legend .gstar{color:var(--gold-mark)}

  .starters{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
  .starters .s{background:var(--good-soft);color:var(--fg);border:1px solid color-mix(in srgb,var(--good) 35%,transparent);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600}
  .starters .s .star{color:var(--gold-mark)}

  .row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

  /* season table */
  table.season{width:100%;border-collapse:collapse}
  table.season th,table.season td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);font-size:14px}
  table.season th{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
  table.season td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
  table.season tr:last-child td{border-bottom:none}
  .bar{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:4px}
  .bar > i{display:block;height:100%;background:var(--brand);border-radius:4px}
  .nextup{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);
    border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:14px}
  .nextup b{font-weight:700}

  .toast{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(20px + env(safe-area-inset-bottom,0px));
    background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;z-index:50;
    box-shadow:var(--shadow);opacity:0;transition:opacity .2s;pointer-events:none}
  .toast.show{opacity:1}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- added for the hosted app (not in the single-file prototype) ---- */

/* create / join */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:22px 18px;margin-bottom:14px}
.hero h1{font-size:30px;line-height:1.05;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.hero p{color:var(--muted);font-size:14.5px;margin:0 0 16px;max-width:52ch}

/* share bar */
.sharebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px;padding:9px 10px 9px 14px;margin-bottom:14px}
.sharebar .lbl{font-family:var(--fdisp);font-size:12.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600}
.sharebar code{flex:1;min-width:140px;font-family:var(--fbody);font-size:13.5px;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}

/* sync state */
.synced{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:0 0 14px;flex-wrap:wrap}
.synced .dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.synced.stale .dot{background:var(--gold)}
.synced.error .dot{background:var(--brand)}
.synced button{background:none;border:none;color:var(--brand);font-weight:600;font-size:12.5px;padding:0;text-decoration:underline}
.teamname{font-family:var(--fdisp);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;flex:1;min-width:0}

.busy{opacity:.55;pointer-events:none}

/* schedule editor */
.fixtures{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:11px;overflow:hidden;margin-bottom:12px}
.fx{display:flex;align-items:center;gap:10px;background:var(--surface);padding:9px 10px 9px 12px}
.fxn{font-family:var(--fdisp);font-weight:700;font-size:13px;color:var(--brand-ink);background:var(--accent);
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.fxmain{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fxmain b{font-weight:600;font-size:14.5px}
.fxwhen{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.addgame{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.addgame input{min-width:0}
@media (max-width:460px){.addgame{grid-template-columns:1fr}}