:root{
  --brand:#7b3f21; --brand-deep:#5a2c15; --ink:#1f2933; --muted:#6b7280;
  --line:#e2e6ea; --line-strong:#aab1ba;
  --gold:#e0c24e; --gold-ink:#6b4e07; --gold-pale:#fdf1c4;
  --green:#2e9e68; --green-deep:#145b36; --green-pale:#d9f2e3;
  --red:#b42318; --accent:#2563eb; --paper:#f7f8fa; --white:#ffffff;
  --board-bg:#121619; --board-card:#1b2229; --board-card-2:#232c35;
  --board-text:#f3f5f7; --board-dim:#9aa5b1;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* theme tokens - dark values are today's look; #app.theme-light overrides them */
  --ct-shadow:none; --ct-rule:#6e7986;
  --st-paused-bg:#39434d; --st-paused-fg:#c6ced6;
  --glow-c:rgba(46,158,104,.55); --glow-big:rgba(46,158,104,.6);
  --tile-a-bg:rgba(123,63,33,.35); --tile-a-bd:rgba(123,63,33,.6);
  --tile-b-bg:rgba(46,158,104,.35); --tile-b-bd:rgba(46,158,104,.6);
  --tile-idle-bg:rgba(255,255,255,.05); --tile-idle-bd:rgba(255,255,255,.14);
  --idle-fg:var(--board-dim); --board-strong:#fff; --strip-bg:rgba(0,0,0,.42);
  --tm-warn:var(--red);
  --chip-bg:var(--board-card-2); --chip-shadow:none;
  --cw-fg:var(--gold); --cg-fg:var(--board-dim);
  --streaktag-bg:var(--board-card-2); --streaktag-fg:var(--board-text);
  --green-chip-bg:var(--green-pale); --green-chip-fg:var(--green-deep);
  --brand-label:#8a95a1; --count-fg:#6e7986; --dim-2:#5c6874;
  --tbtn-bd:rgba(255,255,255,.18); --tbtn-fg:var(--board-dim);
  --up-bg:#fffdf5; --tagup-bg:var(--gold-pale); --playrow-bg:var(--green-pale);
  --slot-over-bg:var(--green-pale); --bench-bd:var(--line);
  --apill-paused-bg:#e6e9ec; --apill-paused-fg:#4b5563;
  --ateam-a-bg:rgba(123,63,33,.07); --ateam-a-bd:rgba(123,63,33,.22);
  --ateam-b-bg:rgba(46,158,104,.08); --ateam-b-bd:rgba(46,158,104,.25);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font)}
button,input,select,textarea{font-family:inherit}
#app{font-family:var(--font);min-height:100vh}
.view-board #admin,.view-admin #board{display:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;font-weight:900}

/* ---------- wordmark ---------- */
.wm{display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap}
.wm-a{font-weight:900;color:var(--brand)}
.wm-b{font-weight:700;letter-spacing:.18em;color:var(--green);font-size:.52em}
.wm.dark .wm-b{color:#94d3b3}

/* ================= BOARD (dark only) ================= */
#board{background:var(--board-bg);color:var(--board-text);min-height:100vh;
  display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:1.6vh;padding:1.6vh 1.8vw 6vh}
.bd-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw}
.bd-title{font-size:1.9vw;line-height:1.1;display:flex;align-items:center;gap:.9vw}
.bd-title small{font-size:1.05vw;font-weight:500;color:var(--board-dim);letter-spacing:.01em}
.wm-logo{height:6vh;width:auto;display:block}
.wm-logo.dark{background:#fff;border-radius:10px;padding:.5vh .4vw}
.bd-title .sess{font-weight:900;color:var(--board-text)}
.bd-sub{color:var(--board-dim);font-weight:500;font-size:1.05vw;margin-top:.5vh;letter-spacing:.01em}
.bd-right{display:flex;align-items:center;gap:1.6vw}
.bd-live{display:inline-flex;align-items:center;gap:.6vw;font-size:.85vw;font-weight:700;
  letter-spacing:.16em;color:#b9e6cd;background:rgba(46,158,104,.16);
  border:1px solid rgba(46,158,104,.45);border-radius:999px;padding:.7vh 1vw}
.dot{width:.55vw;height:.55vw;min-width:7px;min-height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(46,158,104,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 .7vw rgba(46,158,104,0)}100%{box-shadow:0 0 0 0 rgba(46,158,104,0)}}
.bd-clock .mer{text-transform:lowercase}

.bd-courts{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:1.2vw;min-height:0}
.ct{background:var(--board-card);box-shadow:var(--ct-shadow);border-radius:24px;padding:1.6vh 1.1vw 1.8vh;
  display:flex;flex-direction:column;min-width:0}
.ct-h{display:flex;align-items:center;justify-content:space-between;gap:1vw;
  padding-bottom:1.1vh;border-bottom:2px solid var(--ct-rule)}
.ct-name{font-size:calc(2.6vw / var(--cols,2) + .7vw);font-weight:900;letter-spacing:-.01em}
.ct-label{display:flex;justify-content:center;align-items:center;gap:.8vw;text-transform:uppercase;letter-spacing:.18em;font-size:calc(1vw / var(--cols,2) + .5vw);font-weight:900;color:var(--board-text);padding-bottom:1.2vh}
.st{font-size:calc(.8vw / var(--cols,2) + .35vw);font-weight:900;letter-spacing:.14em;
  border-radius:999px;padding:.65vh .9vw;white-space:nowrap}
.st-playing{background:var(--gold);color:var(--gold-ink)}
.st-open{background:var(--green-chip-bg);color:var(--green-chip-fg)}
.st-paused{background:var(--st-paused-bg);color:var(--st-paused-fg)}
.st-changeover{background:var(--green);color:var(--white);
  box-shadow:0 0 0 0 rgba(46,158,104,.7);animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 .8vw .25vw var(--glow-c)}}
.ct-body{display:flex;flex-direction:column;gap:1.2vh;min-height:0}
.teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.7vw;height:38vh}
.tile{border-radius:16px;transition:opacity .3s;padding:1.4vh 1vw;display:flex;flex-direction:column;gap:.8vh;
  justify-content:center;align-items:center;text-align:center;min-width:0}
.tile-a{background:var(--tile-a-bg);border:1px solid var(--tile-a-bd)}
.tile-b{background:var(--tile-b-bg);border:1px solid var(--tile-b-bd)}
.tile.win{box-shadow:inset 0 0 0 3px var(--gold)}
.ct.idle .tile{background:var(--tile-idle-bg);border-color:var(--tile-idle-bd)}
.ct.idle .tm{color:var(--idle-fg)}
.ct.idle .sc{color:var(--idle-fg)}
.eyebrow{font-size:calc(1.1vw / var(--cols,2) + .45vw);font-weight:700;letter-spacing:.2em;color:var(--board-dim)}
.eyebrow .gametag{margin-left:.6em;color:var(--gold-ink);background:var(--gold);border-radius:4px;padding:.15em .5em;letter-spacing:.12em}
.eyebrow .streaktag{margin-left:.6em;color:var(--streaktag-fg);background:var(--streaktag-bg);border-radius:4px;padding:.15em .5em;letter-spacing:.12em}
.pname{font-size:calc(5.2vw / var(--cols,2));font-weight:900;line-height:1.06;color:var(--board-strong);text-transform:uppercase;
  letter-spacing:-.015em;overflow-wrap:anywhere}
.pname.empty{color:var(--dim-2);font-weight:700}
.vs{align-self:center;color:var(--board-dim);font-weight:900;font-size:calc(1.6vw / var(--cols,2) + .5vw);
  letter-spacing:.08em}
.strip{background:var(--strip-bg);border-radius:16px;padding:1.1vh 1.4vw;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1vw}
.sc{font-size:calc(10vw / var(--cols,2));line-height:1;color:#fff;font-variant-numeric:tabular-nums;font-weight:900}
.sc,.sc.b{text-align:center} /* scores sit centred over their team tiles */
.tm{font-size:calc(12vw / var(--cols,2));line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.02em;text-align:center}
.tm.warn{color:var(--tm-warn);animation:breathe 1.4s ease-in-out infinite}
.tm.over{color:var(--tm-warn);letter-spacing:.02em}
@keyframes breathe{50%{opacity:.42}}

.bd-bottom{display:grid;grid-template-columns:1fr;gap:1.2vw;min-height:0}
.wt{background:var(--board-card);box-shadow:var(--ct-shadow);border-radius:24px;padding:1.8vh 1.4vw;display:flex;flex-direction:column;gap:1.4vh;min-height:0}
.wt-h{display:flex;align-items:baseline;justify-content:space-between;gap:1vw}
.wt-h h2{margin:0;font-size:1.3vw;font-weight:900;letter-spacing:.04em}
#app.theme-light .wt-h h2{color:var(--brand)}
.wt-h .cnt{color:var(--board-dim);font-size:1.3vw;font-weight:500;font-variant-numeric:tabular-nums}
/* the next batch on: the brown 2x2 box, now a column inside the waiting panel */
.wt-body{display:grid;grid-template-columns:38fr 62fr;gap:1.2vw;align-items:start;min-height:0}
.nxbox{background:var(--brand);border-radius:16px;padding:1vh 1vw;
  display:flex;flex-direction:column;gap:.8vh}
.nxbox h3{margin:0;font-size:.8vw;font-weight:900;line-height:1;letter-spacing:.18em;
  color:#e7c3ab;text-transform:uppercase;text-align:center} /* small centred heading over the tiles */
.nxbox-grid{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;
  grid-template-columns:1fr 1fr;gap:.7vh .7vw}
.nxbox-tile{background:rgba(0,0,0,.26);border-radius:12px;padding:.9vh 1vw;min-height:5.6vh;
  display:flex;align-items:center;gap:.7vw;min-width:0}
.nxbox-tile .n{color:#e7c3ab;font-size:.9vw;font-weight:900;font-variant-numeric:tabular-nums}
.nxbox-tile .p{color:#fff;font-size:1.2vw;font-weight:900;overflow-wrap:anywhere;
  line-height:1.1;text-transform:uppercase}
.nxbox.glow{box-shadow:0 0 0 0 rgba(46,158,104,.7);animation:nxglow 1.6s ease-in-out infinite;
  outline:2px solid var(--green)}
@keyframes nxglow{50%{box-shadow:0 0 1.6vw .5vw var(--glow-big)}}
/* a changeover is running: dim the finished names and the rest of the line, not what's next */
#board.focus-next .ct.ended .tile,
#board.focus-next .chips .chip:not(.on-deck){opacity:.7}
.chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.7vh .7vw;overflow:hidden;padding:1vw;margin:-1vw} /* padding = room for the chip glow inside the clip */
.chip{background:var(--chip-bg);box-shadow:var(--chip-shadow);transition:opacity .3s;border-radius:999px;padding:.45vh .95vw;min-height:4.2vh;
  display:inline-flex;align-items:center;gap:.55vw} /* sized by content: the whole pill always shows */
.chip .cq{font-size:.9vw;font-weight:900;color:var(--board-dim);font-variant-numeric:tabular-nums}
.chip .cn{font-size:.89vw;font-weight:900;color:var(--board-strong);text-transform:uppercase;white-space:nowrap}
.chip .cw{font-size:.95vw;font-weight:900;color:var(--cw-fg);font-variant-numeric:tabular-nums}
.chip .cg{display:none} /* games count stays on the admin rows; the board chip is name + wait */
.chip .cg-unused{font-size:.72vw;font-weight:500;color:var(--cg-fg)}
/* the next four in line (the next Up next batch): ringed green (dark) / mahogany (light) */
.chip.first{box-shadow:0 0 .2vw .15vw rgba(46,158,104,.65)}
#app.theme-light .chip.first{box-shadow:0 0 .2vw .15vw rgba(123,63,33,.5)}
.chip.on-deck{box-shadow:0 0 0 2px var(--green);animation:chipglow 1.6s ease-in-out infinite}
@keyframes chipglow{50%{box-shadow:0 0 0 2px var(--green),0 0 .7vw .2vw var(--glow-c)}}
#app.theme-light .chip.on-deck{background:#d9f2e3;box-shadow:0 0 0 3px var(--forest);animation:chipglow-light 1.6s ease-in-out infinite}
@keyframes chipglow-light{50%{box-shadow:0 0 0 3px var(--forest),0 0 .9vw .3vw rgba(47,93,42,.7)}}
.bd-brand{display:flex;justify-content:center;align-items:center;gap:.6vw;color:var(--brand-label);font-size:1vw;font-weight:700;letter-spacing:.02em;font-family:inherit;background:none;border:0;cursor:pointer;justify-self:center;padding:0}
.bd-brand .wm-logo{height:3.4vh;padding:.25vh .2vw;border-radius:6px}
.bd-end{justify-self:end;display:flex;align-items:center;gap:12px}
.bd-count{justify-self:end;color:var(--count-fg);font-size:.85vw;font-weight:500;font-variant-numeric:tabular-nums}
.bd-foot{position:fixed;right:1.8vw;bottom:1.6vh;color:var(--dim-2);font-size:.78vw;font-weight:500;pointer-events:none}

/* ---------- board on a phone ---------- */
@media (max-width:899px){
  #board{height:auto;min-height:100vh;grid-template-rows:none;display:block;padding:16px 14px 72px}
  .bd-top{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
  .bd-top>span:first-child{display:none}
  .bd-count{justify-self:auto;font-size:12px}
  .bd-title{font-size:clamp(19px,5.4vw,26px);gap:6px}
  .bd-sub{font-size:13px;margin-top:4px}
  .bd-right{margin-top:12px;justify-content:space-between;gap:12px}
  .bd-live{font-size:10px;gap:7px;padding:6px 10px}
  .bd-courts{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  .ct{padding:14px 14px 16px;border-radius:18px}
  .ct-name{font-size:20px}.ct-label{font-size:11px;padding-bottom:8px}.st{font-size:10px;padding:5px 9px}
  .ct-body{gap:10px;padding-top:12px}
  .teams{gap:8px;height:auto}
  .tile{padding:10px 12px;gap:6px}
  .eyebrow{font-size:10px}
  .pname{font-size:clamp(16px,5.2vw,24px)}
  .vs{font-size:13px}
  .strip{padding:10px 14px;border-radius:12px}
  .sc{font-size:clamp(26px,9vw,40px)}
  .tm{font-size:clamp(34px,12vw,54px)}
  .bd-bottom{grid-template-columns:1fr;gap:12px}
  .wt-body{grid-template-columns:1fr;gap:12px}
  .nxbox{padding:14px;border-radius:12px}
  .nxbox h3{font-size:16px}
  .nxbox-tile{padding:8px 10px;gap:8px}
  .nxbox-tile .n{font-size:12px}.nxbox-tile .p{font-size:14px}
  .wt{padding:14px;border-radius:18px}
  .wt-h h2{font-size:16px}.wt-h .cnt{font-size:16px}
  .chips{grid-auto-flow:row;grid-template-rows:auto;grid-template-columns:1fr;gap:8px;overflow:visible}
  .chip{padding:7px 10px;gap:7px;min-height:auto}
  .chip .cq{font-size:12px}
  .chip .cn{font-size:12px}.chip .cw{font-size:13px}.chip .cg{font-size:10px}
  .bd-foot{position:static;margin-top:14px;font-size:11px;text-align:right}
  .bd-brand{font-size:13px}
  .bd-brand .wm-logo{height:24px}
}

/* ================= ADMIN (light only) ================= */
#admin{background:var(--paper);color:var(--ink);min-height:100vh}
.only-desktop{display:none}
@media (max-width:899px){
  #admin .ad-nav,#admin .ad-body{display:none}
  .only-desktop{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px}
  .only-desktop div{background:var(--white);border:1px solid var(--line);border-radius:16px;
    padding:28px 24px;max-width:22rem;text-align:center}
  .only-desktop h2{margin:0 0 8px;font-size:18px;font-weight:900}
  .only-desktop p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
}
.ad-nav{background:var(--white);border-bottom:1px solid var(--line);padding:12px 22px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;position:sticky;top:0;z-index:5}
.ad-nav .wm-logo{height:40px}
.ad-nav-c{text-align:center;font-weight:700;font-size:14px;color:var(--ink)}
.ad-nav-r{display:flex;gap:10px;justify-content:flex-end}
.ad-body{display:grid;grid-template-columns:2fr 1fr;gap:18px;padding:20px 22px 40px;align-items:start}
.ad-right{display:flex;flex-direction:column;gap:18px;min-width:0}
.ad-left{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:18px;align-items:start;min-width:0}

.btn{font:inherit;font-weight:700;font-size:14px;min-height:40px;padding:0 14px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;background:var(--white);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{filter:brightness(.97)}
.btn-brand{background:var(--brand);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-outline{border-color:var(--line-strong);background:var(--white)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-danger-outline{color:var(--red);border-color:var(--red);background:var(--white)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:#eceff2;color:var(--ink)}
.btn-sm{min-height:34px;font-size:13px;padding:0 10px;border-radius:8px}
.btn-icon{min-height:34px;min-width:34px;padding:0;border:1px solid var(--line);background:var(--white);
  color:var(--muted);font-size:13px;border-radius:8px}
.btn-icon:hover{color:var(--ink);border-color:var(--line-strong)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tbtn{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;flex:0 0 auto}
.bd-end .tbtn{background:none;border-color:var(--tbtn-bd);color:var(--tbtn-fg)}

.card{background:var(--white);border:1px solid var(--line);border-radius:16px}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h h2{margin:0;font-size:16px;font-weight:900;letter-spacing:-.01em}
.card-h .count{color:var(--muted);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.spacer{margin-left:auto}

.acourt{box-shadow:0 1px 2px rgba(31,41,51,.05)}
.acourt .card-h{border-bottom:2px solid var(--brand)}
.apill{font-size:11px;font-weight:900;letter-spacing:.12em;border-radius:999px;padding:4px 9px}
.apill.playing{background:var(--gold);color:var(--gold-ink)}
.apill.open{background:var(--green-chip-bg);color:var(--green-chip-fg)}
.apill.paused{background:var(--apill-paused-bg);color:var(--apill-paused-fg)}
.apill.changeover{background:var(--green);color:var(--white);
  box-shadow:0 0 0 0 rgba(46,158,104,.7);animation:aglow 1.6s ease-in-out infinite}
@keyframes aglow{50%{box-shadow:0 0 14px 4px var(--glow-c)}}
.tchip{background:var(--gold-pale);color:var(--gold-ink);border-radius:8px;padding:5px 10px;
  font-size:17px;font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.01em}
.tchip.warn,.tchip.over{background:#fdecea;color:var(--red)}
.tchip.changeover{background:var(--green-chip-bg);color:var(--green-chip-fg)}
.tbtns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto}
.ateams{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}
.ateam{border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.ateam-a{background:var(--ateam-a-bg);border:1px solid var(--ateam-a-bd)}
.ateam-b{background:var(--ateam-b-bg);border:1px solid var(--ateam-b-bd)}
.ateam h3{margin:0;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--muted)}
.slot{width:100%;min-height:44px;padding:4px;border-radius:8px;background:var(--paper);
  border:1px dashed var(--line-strong);display:flex;flex-direction:column;
  justify-content:center;gap:6px}
.slot.filled{background:var(--white);border:1px solid var(--line)}
.slot.is-over{border:1px solid var(--green);background:var(--slot-over-bg)}
.slot-empty{font-size:12px;font-weight:500;color:var(--muted);padding:0 6px}
.pchip{display:flex;align-items:center;gap:6px;width:100%;min-width:0;font-size:14px;
  font-weight:700;padding:4px 6px;border-radius:6px;cursor:grab;background:var(--white)}
.pchip:active{cursor:grabbing}
.slot.done .pchip{cursor:default}
.pchip .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chipx{border:0;background:none;cursor:pointer;color:var(--line-strong);font-size:16px;
  line-height:1;min-height:28px;min-width:28px;border-radius:6px;padding:0}
.chipx:hover{color:var(--red);background:#fdecea}
/* A row dragged over a slot is only a preview: show the name, drop everything else. */
.slot .qrow,.slot .prow{display:block;width:100%;min-width:0;min-height:44px;padding:4px 6px;
  border-radius:6px;background:var(--white);border-left:0;opacity:1;font-weight:700}
.slot .grip,.slot .qpos,.slot .qmeta,.slot .qacts,.slot .psub,.slot .pn>*{display:none}
.slot .pn{display:block;font-size:14px;font-weight:700;line-height:36px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ...and a chip dragged into the line loses its × the same way. */
[data-linelist] .pchip{min-height:44px;border-radius:8px;background:var(--white)}
[data-linelist] .chipx{display:none}
.ascore{font-size:56px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;
  text-align:center;letter-spacing:-.03em}
.ateam-a .ascore{color:var(--brand)}
.ateam-b .ascore{color:var(--green-deep)}
.scorerow{display:flex;align-items:center;justify-content:center;gap:12px}
.scorerow .ascore{min-width:2ch;text-align:center}
.sbtn{width:48px;height:48px;min-height:48px;padding:0;border-radius:10px;
  font-size:24px;font-weight:900;flex:0 0 auto}
.ateam-a .sbtn.add{background:var(--brand);color:var(--white);border-color:var(--brand)}
.ateam-b .sbtn.add{background:var(--green);color:var(--white);border-color:var(--green)}
.ateam-a .sbtn.sub{background:var(--white);color:var(--brand);border:1px solid var(--brand)}
.ateam-b .sbtn.sub{background:var(--white);color:var(--green);border:1px solid var(--green)}
.acourt-f{display:flex;align-items:center;gap:14px;padding:0 16px 16px}
.push-right{margin-left:auto}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--ink);cursor:pointer;white-space:nowrap}
.chk input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.rmbox{width:16px;height:16px;accent-color:var(--red);cursor:pointer;flex:0 0 auto}
.card.removing .prow{grid-template-columns:auto 1fr auto}
.namechips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 10px}
.namechip{background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:13px;font-weight:700}
.wait-note{color:var(--muted);font-size:13px;font-weight:700;padding:0 16px 14px;margin-top:-4px}

.qlist,.plist{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:2px}
.qrow{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;border-left:3px solid transparent}
.qrow:hover{background:#f2f4f6}
.qrow.up{border-left-color:var(--gold);background:var(--up-bg)}
.qpos{font-size:13px;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums;min-width:1.4em;text-align:right}
.qname{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qmeta{display:flex;gap:10px;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.qmeta .g{font-variant-numeric:tabular-nums}
.qacts{display:flex;gap:4px}
.grip{color:var(--muted);cursor:grab;font-size:15px;line-height:1;user-select:none}
.grip:active{cursor:grabbing}
.plist+.plist{padding-top:0}
[data-linelist]{min-height:44px}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.bench{background:var(--paper);border:1px solid var(--bench-bd);border-radius:12px;
  padding:12px 14px;margin-top:14px}
.bench-h{display:flex;align-items:baseline;gap:8px}
.bench-h .grp{padding:0}
.bench-n{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.bench-empty{margin:8px 0 2px;font-size:13px;font-weight:500;color:var(--muted)}
.bench .plist{padding:6px 0 0}
.bench .plist.twocol{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.pcol{min-width:0}
.imp-over{color:var(--red);font-size:13px;font-weight:700;margin-right:auto;align-self:center}
.sortable-ghost{opacity:.35}
.sortable-chosen{background:var(--gold-pale)}
.tag-up{font-size:10px;font-weight:900;letter-spacing:.1em;background:var(--tagup-bg);
  color:var(--gold-ink);border-radius:4px;padding:2px 5px}
.tag-playing{font-size:10px;font-weight:900;letter-spacing:.1em;background:var(--green);
  color:var(--white);border-radius:4px;padding:2px 5px}
.tag-rename{font-size:10px;font-weight:900;letter-spacing:.06em;color:var(--red);
  border:1px solid var(--red);border-radius:4px;padding:1px 5px}
.qadd{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:#fbfcfd}
.inp{font:inherit;font-size:14px;font-weight:500;min-height:40px;padding:0 10px;border:1px solid var(--line-strong);
  border-radius:8px;background:var(--white);color:var(--ink);flex:1;min-width:0}

.prow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:8px 10px;
  border-radius:10px;border-left:3px solid transparent}
.prow:hover{background:#f2f4f6}
.prow.playing{background:var(--playrow-bg);border-left-color:var(--green)}
.prow.sel,.qrow.sel,.prow.playing.sel{background:#fdecea}
.prow .pn{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;flex-wrap:wrap}
.pen{border:0;background:none;cursor:pointer;color:var(--line-strong);font-size:13px;
  min-height:28px;min-width:28px;border-radius:6px;padding:0}
.pen:hover{color:var(--brand);background:#f0e7e1}
.psub{display:flex;align-items:center;gap:8px;justify-self:end}
.src{font-size:10px;font-weight:900;letter-spacing:.06em;border-radius:5px;padding:3px 6px;font-variant-numeric:tabular-nums}
.src.res{background:var(--gold-pale);color:var(--gold-ink)}
.src.desk{background:#eceff2;color:#4b5563;letter-spacing:.1em}
.grp{padding:14px 12px 6px;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--muted)}
.plist .dim{opacity:.65}
.src.court{background:#eceff2;color:var(--ink);letter-spacing:.04em}
.psub .g{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.btn-jump{border:1px solid var(--brand);color:var(--brand);background:var(--white);
  min-height:40px;font-size:13px;padding:0 12px}
.btn-jump:hover{background:#f6efea}

/* ---------- modals ---------- */
.mwrap{position:fixed;inset:0;background:rgba(31,41,51,.55);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:20}
.modal{background:var(--white);border-radius:18px;width:min(640px,100%);max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(31,41,51,.28)}
.modal-h{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.modal-h h2{margin:0;font-size:17px;font-weight:900;letter-spacing:-.01em}
.modal-h p{margin:6px 0 0;color:var(--muted);font-size:13px;font-weight:500}
.modal-b{padding:8px 12px;overflow:auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#fbfcfd}
.rrow{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:12px;
  padding:10px;border-radius:10px}
.rrow:hover{background:#f2f4f6}
.rrow.off{opacity:.62}
.rrow input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
.rref{font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--gold-ink);
  background:var(--gold-pale);border-radius:5px;padding:3px 6px}
.rname{font-size:14px;font-weight:700}
.rheads{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rstat{font-size:11px;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:4px 9px;white-space:nowrap}
.rstat.paid{background:var(--green-pale);color:var(--green-deep)}
.rstat.pending{background:var(--gold-pale);color:var(--gold-ink)}
.rstat.refunded,.rstat.ended{background:#eceff2;color:#4b5563}
.rstat.now{background:var(--green);color:var(--white)}
.rstat.next{background:var(--gold);color:var(--gold-ink)}
.rstat.up{background:#eceff2;color:var(--muted)}
.rrow.ro{grid-template-columns:auto 1fr auto auto}
.srow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;
  width:100%;font:inherit;text-align:left;padding:12px 10px;border:0;border-radius:10px;
  background:none;color:var(--ink);cursor:pointer}
.srow:hover:not(:disabled){background:#f2f4f6}
.srow:disabled{opacity:.55;cursor:default}
.srow .t{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.srow .c{font-size:13px;font-weight:500;color:var(--muted)}
.srow .n{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rstat.done{background:var(--green-pale);color:var(--green-deep)}
.fset{display:flex;flex-direction:column;gap:16px;padding:14px 8px}
.frow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}
.frow label.k{font-size:14px;font-weight:700}
.frow .hint{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px}
.frow input[type=number],.frow select{font:inherit;font-size:14px;font-weight:700;min-height:40px;
  padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--white);
  color:var(--ink);min-width:110px}
.frow input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand)}
.radios{display:flex;flex-direction:column;gap:8px}
.rotrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:500}
.rotrow select{min-width:auto;min-height:36px}
.rotrow select:disabled{opacity:.45}
.streaknote{margin:-4px 0 0;font-size:11px;font-weight:700;color:var(--muted)}
.radios label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.radios input{accent-color:var(--brand);width:18px;height:18px}

/* ================= LIGHT THEME ================= */
#app.theme-light{
  /* venue light palette */
  --parch:#e8eaed; /* light ground: a cool neutral grey */
  --mah:#7b3f21; --mahd:#5f301a;
  --forest:#2f5d2a; --forest-deep:#145b36;
  --booked:#d9f2e3; --booked-line:#94d3b3;
  --gold:#e0c24e; --goldwash:#fdf1c4; --gold-ink:#6b5a12;
  --todaywash:#fff8e6;
  --ink:#1f2933; --muted:#6b7280; --line:#e2e6ea; --strong:#aab1ba;
  --taken:#c7ccd3; --past:#f4f5f7;
  --blue:#2563eb; --danger:#b42318;
  /* existing tokens the light palette re-points (--brand/--line-strong/--gold-pale/
     --red/--accent already hold the light values) */
  --paper:var(--parch); --green:var(--forest);
  --board-bg:var(--parch); --board-card:var(--white);
  --board-text:var(--ink); --board-dim:var(--muted);
  /* board: mahogany and forest are the soft blacks; one dark well per court */
  --ct-shadow:inset 0 0 0 1px var(--line),0 2px 8px rgba(31,41,51,.06); --ct-rule:var(--brand);
  --st-paused-bg:var(--taken); --st-paused-fg:var(--ink);
  --green-chip-bg:var(--forest); --green-chip-fg:var(--white);
  --glow-c:rgba(47,93,42,.45); --glow-big:rgba(47,93,42,.45);
  --tile-a-bg:var(--mah); --tile-a-bd:var(--mahd);
  --tile-b-bg:var(--forest); --tile-b-bd:#245022;
  --tile-idle-bg:#e3e6ea; --tile-idle-bd:#cfd4da;
  --idle-fg:#6e7986; --board-strong:var(--ink); --strip-bg:var(--ink);
  --tm-warn:#ef6a5a;
  --chip-bg:#eef0f2; --chip-shadow:inset 0 0 0 1px #dfe3e7;
  --cw-fg:var(--forest); --cg-fg:#5b6572;
  --streaktag-bg:rgba(255,255,255,.18); --streaktag-fg:var(--white);
  --brand-label:var(--mahd); --count-fg:#5b6572; --dim-2:#8a95a1;
  --tbtn-bd:var(--line); --tbtn-fg:var(--mahd);
  /* admin */
  --up-bg:var(--todaywash); --tagup-bg:var(--gold);
  --playrow-bg:#f2f7f2; --slot-over-bg:#e6f2e6; --bench-bd:#e9e2d3;
  --apill-paused-bg:var(--taken); --apill-paused-fg:var(--ink);
  --ateam-a-bg:#faf6ef; --ateam-a-bd:rgba(123,63,33,.35);
  --ateam-b-bg:#f2f7f2; --ateam-b-bd:rgba(47,93,42,.35);
}
#app.theme-light .tile-a .eyebrow{color:#e7c3ab}
#app.theme-light .tile-b .eyebrow{color:#b9e6cd}
#app.theme-light .tile-a .pname,#app.theme-light .tile-b .pname{color:var(--white)}
#app.theme-light .ct.idle .tile .eyebrow{color:var(--muted)}
#app.theme-light .ct.idle .tile .pname{color:var(--board-strong)}
#app.theme-light .btn-brand:hover{background:var(--mahd)}

/* ---------- view pill ---------- */

@media (prefers-reduced-motion:reduce){
  .dot,.tm.warn{animation:none}
  .st-changeover{animation:none;box-shadow:0 0 .8vw .25vw var(--glow-c)}
  .nxbox.glow{animation:none;box-shadow:0 0 1.6vw .5vw var(--glow-big)}
  .apill.changeover{animation:none;box-shadow:0 0 14px 4px var(--glow-c)}
  .chip.on-deck,#app.theme-light .chip.on-deck{animation:none}
  *{transition:none!important}
}

/* ---------- toast (server errors) ---------- */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;
  background:var(--red);color:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:10px 16px;border-radius:10px;max-width:min(90vw,26rem);
  box-shadow:0 8px 24px rgba(31,41,51,.28)}

/* ---------- login ---------- */
.login{min-height:100vh;background:var(--paper);color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:24px}
.login form{background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;width:min(22rem,100%);display:flex;flex-direction:column;gap:14px;
  box-shadow:0 1px 2px rgba(31,41,51,.05)}
.login form>span{align-self:center}
.login .wm-logo{height:40px;width:auto;display:block}
.login h1{margin:0;font-size:18px;font-weight:900;letter-spacing:-.01em;text-align:center}
.login label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}
.login .inp{flex:0 0 auto}
.login .err{margin:0;color:var(--red);font-size:13px;font-weight:700;text-align:center}