/* Geist and Geist Mono ship with the site (OFL 1.1, fonts/OFL.txt): no third-party request, and they load on a poor connection */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* type */
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:16px; --text-lg:20px; --text-xl:24px;
  /* shape + space */
  --r-sm:4px; --r-md:6px; --r-lg:8px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  /* back-compat aliases for inline styles */
  --muted:var(--text-muted); --amber:var(--warning);

  /* age-group palette — one colour per age group, the muted clip colours of the redesign (round 6, Resolve cool).
     Keep in step with AGC in app.js. */
  --ag-U10:#96694A; --ag-U11:#737A46; --ag-U12:#3A7774; --ag-U13:#456FA0; --ag-U14:#675C98; --ag-U15:#7F6B5E; --ag-U17:#905876;
}

/* ============ NAVY — blue-tinted surfaces, teal accent ============ */
/* ============ DARK — the only theme: Resolve-style cool charcoal (UI redesign, 2026-10-21) ============ */
[data-theme="dark"]{
  --bg:#131518; --surface-0:#0E1013; --surface-1:#181A1D; --surface-2:#1D2024; --surface-3:#24272C;
  --border:#30343A; --border-strong:#5A5F68;
  --text:#E3E6EB; --text-muted:#9297A0; --text-subtle:#868B94;
  /* the accent is a near-white neutral, as Resolve uses, so colour is left to the age groups, warnings and errors */
  --accent:#E3E8EF; --accent-hover:#FFFFFF; --accent-quiet:rgba(227,232,239,.12);
  --success:#6CC495; --warning:#F2D46B; --danger:#E0574B;
  --accent-ink:#131518; --danger-ink:#1A0907; --accent-text:#B7CCE6;
  --danger-quiet:rgba(224,87,75,.16); --danger-text:#F0877D;
  --pool-a:#8FB3DE; --pool-b:#74C2B0; --pool-c:#D99BBE; --pool-d:#B4A6E2;
  --rd-qf:#8CC0DC; --rd-sf:#E3A672; --rd-final:#E6C27A; --rd-place:#9297A0;
  --rd-cup:#E6C27A; --rd-plate:#C3C8D0; --rd-bowl:#E3A672; --rd-shield:#A9B2E8; --rd-r16:#9297A0;
  --overlay:rgba(5,6,8,.6); --shadow:0 8px 24px rgba(0,0,0,.55);
  --agh-l:13%;
  --tab-day:#8FB3DE; --tab-comp:#74C2B0; --tab-people:#B4A6E2; --tab-money:#E6C27A;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--text-base);line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
/* The page takes the screen it is given, up to a point: the board, the tables
   and the fixture list are all better wider. Text meant to be read keeps a
   readable measure whatever the width, and the age group cards go side by side
   rather than stretching. */
.wrap{max-width:min(96vw,2400px);margin:0 auto;padding:var(--s-6) var(--s-4) 96px}
.note,.fmtdesc,.fmtwarn{max-width:110ch}
#agList{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,820px),1fr));
  gap:0 var(--s-4);align-items:start}

/* ---------- masthead ---------- */
.masthead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-4);
  flex-wrap:wrap;padding-bottom:var(--s-4);margin-bottom:var(--s-6);border-bottom:1px solid var(--border)}
.mh-app{font-size:var(--text-sm);color:var(--text-muted);display:flex;align-items:center;gap:var(--s-1)}
.eyebrow{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}
h1{font-size:var(--text-xl);font-weight:600;margin:2px 0 0;letter-spacing:-.01em;line-height:1.25}
.appver{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.02em;
  color:var(--text-muted);white-space:nowrap}
.hint{font-size:var(--text-sm);color:var(--text-muted);text-align:right;line-height:1.9}
kbd{background:var(--surface-2);padding:2px 6px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted)}

/* ---------- getting started ----------
   Shown only while the event is not set up: the things that have to happen, in
   the order the tabs now run, each one a jump to where it happens. The numbers
   are a real sequence — pitches before a board, a board before fixtures — not
   decoration. */
.startcard{background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-4)}
.sc-h{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
.sc-h b{font-size:var(--text-md);font-weight:600}
.sc-h span{font-size:var(--text-sm);color:var(--text-muted)}
.sc-l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.sc-s{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.sc-n{flex:0 0 22px;height:22px;border-radius:50%;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;align-self:center;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.sc-s.done .sc-n{border-color:var(--success);color:var(--success)}
.sc-s.next .sc-n{border-color:var(--accent);color:var(--accent-text)}
.sc-b{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font);font-size:var(--text-base);font-weight:500;color:var(--accent-text);
  text-decoration:underline;text-underline-offset:3px}
.sc-s.done .sc-b{color:var(--text-muted);font-weight:400;text-decoration:none}
.sc-b em{font-style:normal;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--text-muted);text-decoration:none}
.sc-hint{font-size:var(--text-sm);color:var(--text-muted)}
.sc-a{margin-top:var(--s-4)}
/* on a phone each hint wraps to two lines and the card fills the screen before
   the tabs it is pointing at; the step names carry it alone */
@media(max-width:560px){.sc-hint{display:none}}

/* ---------- legend ---------- */
.legend{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-6)}
.legend>summary{cursor:pointer;list-style:none;font-size:var(--text-sm);font-weight:500;
  color:var(--text-muted);display:flex;align-items:center;gap:var(--s-2)}
.legend>summary::-webkit-details-marker{display:none}
.legend>summary:before{content:"";width:0;height:0;flex:none;
  border-left:5px solid var(--text-subtle);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s ease}
.legend[open]>summary{margin-bottom:var(--s-3)}
.legend[open]>summary:before{transform:rotate(90deg)}
.legend>summary:hover{color:var(--text)}
.legend .sec{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center}
.legend .sec+.sec{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--border)}
.lgh{font-size:var(--text-sm);color:var(--text-subtle);width:80px;flex:none}
.lg{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-sm);color:var(--text-muted)}
.sw{width:26px;height:15px;flex:none;border-radius:var(--r-sm);border:1px solid rgba(0,0,0,.3)}
.swa{width:26px;height:15px;flex:none;border-radius:var(--r-sm);border:1px solid rgba(0,0,0,.22)}

/* ---------- stat cards ---------- */
.stats{display:flex;flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  margin-bottom:var(--s-6);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.st{flex:1 1 150px;padding:var(--s-3) var(--s-4);border-right:1px solid var(--border);min-width:0}
.st:last-child{border-right:0}
.stl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-muted)}
.stn{font-family:var(--font-mono);font-size:25px;font-weight:500;line-height:1.15;margin-top:5px;
  letter-spacing:-.01em}
.stx{font-size:var(--text-xs);color:var(--text-muted);line-height:1.4;margin-top:3px}
.ok{color:var(--success)} .warn{color:var(--warning)} .bad{color:var(--danger)}

/* ---------- buttons ---------- */
.toolbar{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-4)}
/* a toolbar holding labelled fields lines everything up on the inputs, not on
   the top of the tallest label */
.toolbar:has(.fld){align-items:flex-end}
.toolbar:has(.fld)>.chk{height:36px;display:inline-flex;align-items:center}

button{white-space:nowrap;font-family:var(--font);font-size:var(--text-base);font-weight:500;
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);
  padding:0 var(--s-3);height:36px;cursor:pointer;border-radius:var(--r-md);
  transition:background .12s ease,border-color .12s ease}
button:hover{background:var(--surface-3);border-color:var(--border-strong)}
/* Three roles only: primary = the one main action here, action = a secondary
   action, danger = destroys something. Everything else stays neutral. */
button.action{background:var(--accent-quiet);border-color:var(--accent);color:var(--accent-text)}
button.action:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.ghost{background:transparent;border-color:transparent;color:var(--text-muted)}
button.ghost:hover{background:var(--surface-2);color:var(--danger)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.spacer{flex:1}

/* ---------- panels ---------- */
details.pane{background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-lg);margin-bottom:var(--s-4);overflow:hidden}
details.pane>summary{cursor:pointer;padding:0 var(--s-4);height:44px;display:flex;align-items:center;
  font-size:var(--text-base);font-weight:500;color:var(--text);list-style:none;gap:var(--s-2)}
details.pane>summary::-webkit-details-marker{display:none}
details.pane>summary:hover{background:var(--surface-2)}
details.pane>summary:before{content:"";width:0;height:0;flex:none;
  border-left:5px solid var(--text-subtle);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s ease}
details.pane[open]>summary:before{transform:rotate(90deg)}
.pbody{padding:var(--s-2) var(--s-4) var(--s-4);border-top:1px solid var(--border)}

/* ---------- form controls ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-4)}
label.f{display:block;font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--s-1)}
label.f span{color:var(--text);font-weight:500}
select,input[type=number],input[type=time],input[type=text],input[type=search],input[type=date]{width:100%;height:36px;background:var(--surface-2);
  color:var(--text);border:1px solid var(--border);padding:0 var(--s-2);
  font-family:var(--font);font-size:var(--text-base);border-radius:var(--r-md)}
select:hover,input:hover{border-color:var(--border-strong)}
/* the native date control brings its own chrome; make it sit in the same skin */
input[type=date]{font-family:var(--font-mono);font-size:var(--text-sm);color-scheme:dark}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=range]{width:100%;accent-color:var(--accent);background:transparent;margin:var(--s-2) 0 0;height:20px}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.chk{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-base);cursor:pointer}

/* ---------- board ---------- */
.daylab{font-size:var(--text-md);font-weight:600;margin:var(--s-6) 0 var(--s-3);
  display:flex;align-items:baseline;gap:var(--s-3)}
.daylab em{font-size:var(--text-sm);font-style:normal;color:var(--text-muted);font-weight:400}
.lane{display:flex;align-items:stretch;margin-bottom:var(--s-1)}
.lanename{width:150px;flex:none;background:var(--surface-1);padding:var(--s-2) var(--s-3);
  border:1px solid var(--border);border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);
  display:flex;flex-direction:column;justify-content:center}
.lanename b{display:block;font-size:var(--text-base);font-weight:500;line-height:1.25}
.lanename i{font-style:normal;font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.track{position:relative;flex:1;height:var(--lane-h,88px);background:var(--surface-1);overflow:hidden;
  border:1px solid var(--border);border-radius:0 var(--r-md) var(--r-md) 0;touch-action:pan-y}
.track.dropok{box-shadow:inset 0 0 0 2px var(--accent)}
.hr{position:absolute;top:0;bottom:0;width:1px;background:var(--border)}
.hr.maj{background:var(--border-strong)}
.openline{position:absolute;top:0;bottom:0;width:1px;background:var(--border-strong);z-index:3}
.closed{position:absolute;top:0;bottom:0;background:var(--overlay);z-index:1}
/* board is a data surface — type held above the base scale deliberately */
.blk{position:absolute;top:5px;bottom:5px;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:0 3px;overflow:hidden;cursor:grab;user-select:none;border-radius:var(--r-sm);
  border:1px solid rgba(0,0,0,.22)}
.blk:active{cursor:grabbing}
.blk.sel{outline:2px solid var(--text);outline-offset:-2px;z-index:5}
.blk.clash{box-shadow:0 0 0 2px var(--danger) inset}
/* Three patterns, one meaning each, everywhere on the board: solid is a pool
   match, checkered is a knockout, diagonal stripes are warm-up. The colour is
   always the age group. */
.c-warm,.wu,.swa.wusw{background-color:color-mix(in srgb,var(--agc) 14%,#fff);
  background-image:repeating-linear-gradient(45deg,var(--agc) 0 5px,transparent 5px 11px)}
/* inside a block the warm-up has to read at a glance against the same colour
   it is made of: pale ground, the age group's colour as the stripe, a hard
   edge where play takes over, and the word where there is room for it */
.c-warm{box-shadow:inset -2px 0 0 #fff,inset 0 0 0 1px rgba(0,0,0,.25)}
.wulab{display:flex;align-items:center;justify-content:center;overflow:hidden}
.wulab span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.62);
  border-radius:3px;padding:4px 1px;white-space:nowrap}
.ph-ko,.c-ko{background-image:
  linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25% 75%,rgba(255,255,255,.2) 75%),
  linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25% 75%,rgba(255,255,255,.2) 75%);
  background-size:12px 12px;background-position:0 0,6px 6px}
/* Inside a block. The block's own fill says pool or knockout; these sit on it. */
.blk{background-color:var(--agc)}
.cells{position:absolute;inset:0;z-index:0;pointer-events:none}
.art{position:absolute}
.c-div{height:0;border-top:1.5px solid rgba(0,0,0,.5)}
/* a block on half the lane or less has room for one line of label, not three */
/* labels can end up over a warm-up's pale stripes, which the plain plates were
   not dark enough for */
.blk .pill{background:rgba(0,0,0,.55)}
.blk.short,.blk.tiny{flex-direction:row;align-items:center;justify-content:flex-start;gap:5px}
.blk.short i,.blk.tiny i{margin-top:0}
.blk.short .bmeta,.blk.tiny .bmeta,.blk.tiny i{display:none}
.blk.tiny b{font-size:11px;line-height:1.2;padding:0 3px}
.bwu{position:absolute;z-index:2;border-radius:2px}
.c-off{background:rgba(8,12,20,.66)}
.swa.swdiv{background-image:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));background-size:100% 1.5px;
  background-position:center;background-repeat:no-repeat}
.blk>b,.blk>i,.blk>.bmeta{position:relative;z-index:1}
/* A warm-up you place yourself. It sits above the blocks because it is allowed
   to share a lane with one, and takes the half or quarter it is on. */
.wu{position:absolute;z-index:3;display:flex;align-items:center;gap:4px;padding:0 3px;
  overflow:hidden;cursor:grab;user-select:none;border-radius:var(--r-sm);color:#fff;
  border:1px solid rgba(255,255,255,.6)}
.wu:active{cursor:grabbing}
.wu.sel{outline:2px solid var(--text);outline-offset:-2px;z-index:6}
.wu.clash{box-shadow:0 0 0 2px var(--danger) inset}
.wu b,.wu i{background:rgba(0,0,0,.62);border-radius:3px;padding:1px 4px;white-space:nowrap;
  font-style:normal;line-height:1.15}
.wu b{font-size:13px;font-weight:600}
.wu i{font-size:var(--text-xs)}
.wu.wz1{flex-direction:column;align-items:flex-start;justify-content:center}
.wu.wz4 b,.wu.wz4 i{font-size:10px;padding:0 3px}
/* fifteen minutes on a ten-hour day is a sliver: keep the age group, drop the word */
.wu{container-type:inline-size}
@container (max-width:64px){.wu i{display:none}.wu b{font-size:10px;padding:0 2px}}
.blk b{font-size:17px;font-weight:600;line-height:1.1;white-space:nowrap;display:block}
.blk i{font-style:normal;font-size:var(--text-xs);white-space:nowrap;display:block;margin-top:3px}
/* the knockout stripe runs under the label, so the text carries its own plate */
.blk b,.blk i,.chip .ctx{background:rgba(0,0,0,.62);border-radius:3px;padding:1px 4px;
  width:fit-content;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.blk b{letter-spacing:-.01em}
/* Narrow blocks swap to shorter forms of the same information rather than
   dropping it. Half-pitch blocks are roughly half the width of full-pitch ones,
   so without this they showed nothing but the age group. */
.blk{container-type:inline-size}
.blk .d-brief,.blk .d-tiny,.blk .p-brief{display:none}
@container (max-width:169px){
  .blk .d-full,.blk .p-full{display:none}
  .blk .d-brief{display:block}
  .blk .p-brief{display:inline-flex}
}
@container (max-width:66px){
  .blk .bmeta{display:none}
  .blk .d-brief{display:none}
  .blk .d-tiny{display:block}
}
@container (max-width:66px){.blk .d-tiny{font-size:11px}}
@container (max-width:82px){.blk b{font-size:13px;padding:1px 3px}}
.chip .ctx{display:inline-block;font-weight:600}
.bmeta{display:flex;gap:4px;align-items:center;margin-top:5px}
.pill{display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.26);
  border-radius:3px;padding:1px 5px;font-size:11px;line-height:1.5;white-space:nowrap;font-weight:500}
.pill svg{display:block;flex:none}
.chip .pill{margin-left:6px}
/* fill = age group (solid, identical across themes); pattern = round */
.blk,.chip{color:#fff}
.axis{position:relative;height:18px;margin-left:150px;font-size:var(--text-xs);color:var(--text-subtle)}
/* The board can be drawn bigger than the page: taller lanes, so a quarter of a
   pitch has room for its label, and a longer clock, so a short block does. It
   scrolls sideways inside itself, with the pitch names held at the left. */
#board{overflow-x:auto;--lane-h:88px;--zx:1}
#board .lane,#board .lanefold .wlane{width:calc(100% * var(--zx))}
#board .axis{width:calc(100% * var(--zx) - 150px)}
#board .lanename,#board .daylab{position:sticky;left:0}
/* The key to a lane's height, where the lane starts: halves and quarters named
   against the rows they are, so a block's place on the pitch can be read off
   without opening it. */
#board .lanename{padding-right:46px}
.rowkey{position:absolute;right:3px;top:5px;bottom:5px;display:flex;gap:2px;
  font-family:var(--font-mono);font-size:9px;line-height:1;color:var(--text-muted)}
.rowkey>span{display:grid;width:19px;gap:1px}
.rowkey .rk2{grid-template-rows:1fr 1fr}
.rowkey .rk4{grid-template-rows:repeat(4,1fr)}
.rowkey>span>span{display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:2px;background:var(--surface-2)}
#board .lanename{z-index:8}
#board .daylab{width:fit-content}
.zoomctl{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-mono)}
.zoomctl input{width:110px}
.axis span{position:absolute;transform:translateX(-50%)}

/* ---------- tray ---------- */
.tray{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-3);margin-top:var(--s-4);display:flex;gap:var(--s-2);flex-wrap:wrap;
  align-items:center;min-height:56px}
.tray .tl2{font-size:var(--text-sm);color:var(--text-muted);margin-right:var(--s-1)}
.chip{padding:6px 10px;cursor:grab;font-size:var(--text-base);font-weight:500;border-radius:var(--r-sm);
  border:1px solid rgba(0,0,0,.22)}
.chip.sel{outline:2px solid var(--text);outline-offset:-2px}

/* ---------- inspector ---------- */
.insp{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-4);margin-top:var(--s-4)}
.insphead{justify-content:space-between}
.insphead h3{font-size:var(--text-lg);font-weight:600;margin:0}
.insphead em{font-style:normal;font-size:var(--text-sm);color:var(--text-muted)}
.nudge{display:flex;gap:var(--s-1);align-items:center}
.nudge button{padding:0 var(--s-2);min-width:34px}
.rundown{margin-top:var(--s-4);border-top:1px solid var(--border);padding-top:var(--s-3)}
.rundown h4{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--s-2);font-weight:500}
.mrow{display:grid;grid-template-columns:118px 1fr;gap:var(--s-3);align-items:center;
  font-size:var(--text-sm);padding:7px var(--s-2);border-radius:var(--r-sm);
  border-bottom:1px solid var(--border)}
.mrow:hover{background:var(--surface-2)}
.mt{color:var(--text-muted)}
.mf{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.mfx{display:inline-flex;align-items:center;gap:6px}
.pmk{font-family:var(--font-mono);font-size:10.5px;color:var(--text-subtle);
  border:1px solid var(--border);border-radius:3px;padding:1px 4px;flex:none}
.mp{color:var(--text-subtle);font-size:var(--text-xs);white-space:nowrap;text-align:right}
.mend{margin-top:var(--s-2);font-size:var(--text-xs);color:var(--text-subtle)}

/* ---------- issues ---------- */
.issues{margin-top:var(--s-4);background:var(--surface-1);border:1px solid var(--border);
  border-left:3px solid var(--danger);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4)}
.issues.clean{border-left-color:var(--success)}
.issues p{margin:0 0 var(--s-2);font-size:var(--text-base)} .issues p:last-child{margin:0}
.issues b{font-size:var(--text-sm);font-weight:500;margin-right:var(--s-1)}
.issues .e{color:var(--danger)} .issues .w{color:var(--warning)} .issues .g{color:var(--success)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--r-lg)}
.tblwrap table{min-width:820px}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th{font-size:var(--text-sm);font-weight:500;color:var(--text-muted);text-align:right;
  padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--border);background:var(--surface-2)}
th:first-child,td:first-child{text-align:left}
td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--border);text-align:right}
tbody tr:hover td,table tr:hover td{background:var(--surface-2)}
td:first-child{font-weight:500;font-size:var(--text-base)}
tfoot td{border-bottom:none;border-top:1px solid var(--border-strong);font-weight:600;background:var(--surface-2)}
td select,td input{height:30px;font-size:var(--text-sm)}
textarea{width:100%;min-height:220px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-md);font-family:var(--font-mono);
  font-size:var(--text-xs);padding:var(--s-3);resize:vertical;line-height:1.6}
/* the event note is prose someone reads, not a config blob: body face, and the
   220px floor that suits the import/export box would swallow the panel */
#evNotes{min-height:0;font-family:var(--font);font-size:var(--text-sm);line-height:1.55}
h2{font-size:var(--text-md);font-weight:600;color:var(--text);margin:var(--s-8) 0 var(--s-3)}
/* One match per line, home right-aligned against a centred v, so the eye reads
   down a spine instead of scanning across. Concurrent games share a time cell. */
.spine{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.spine td{padding:5px var(--s-2);vertical-align:middle}
.spine tr+tr td{border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.spine tr.slot1 td{border-top:1px solid var(--border)}
.spine tr:first-child td{border-top:none}
.spine tr:hover td{background:var(--surface-2)}
.spine .s-t{width:58px;color:var(--text-muted);font-family:var(--font-mono);
  font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.spine .s-p{width:32px;font-family:var(--font-mono);font-size:10.5px;
  color:var(--text-muted);letter-spacing:.06em}
.spine .s-i{width:78px}
.spine .s-r{width:124px}
.spine .s-h{text-align:right;white-space:nowrap;padding-right:10px}
.spine .s-v{width:20px;text-align:center;padding:0}
/* the away cell absorbs the slack, so the spine sits beside the round pill
   instead of the table pushing it out to the far edge */
.spine .s-a{text-align:left;white-space:nowrap;width:100%;padding-left:10px}
.spine .s-ref,.spine .s-mar{width:1%;white-space:nowrap;text-align:right;padding-left:14px}
/* who has the whistle is read off this list on the day, so it is set at the
   size and weight of the teams rather than as a footnote to them */
.spine .s-ref .whochip{font-size:var(--text-sm);font-weight:600;color:var(--text)}
.spine .s-ref .nowho{font-size:var(--text-sm)}
.spine .s-ref .nowho.later{color:var(--text-muted)}
/* Two jobs, told apart by shape rather than colour: the referee is on the
   whistle, the marshal is on the pitch. */
.whochip{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);
  color:var(--text-muted);white-space:nowrap}
.whochip::before{content:'';flex:none;width:7px;height:7px;border:1px solid currentColor}
.whochip.ref::before{border-radius:50%;background:currentColor}
.whochip.mar::before{border-radius:2px}
.nowho{font-size:var(--text-xs);color:var(--text-subtle);white-space:nowrap}
.nowho.bad{color:var(--danger)}
.spinewrap{overflow-x:auto;max-width:100%}
@media(max-width:640px){.spine .s-r{width:auto}}

/* competition / round bands: the rail only appears where there is more than one
   group to separate, so a single-bracket age group looks exactly like the plain list */
.fxblk{margin-top:var(--s-6)}
.fxblk:first-child{margin-top:var(--s-3)}
.fxbt{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
/* a band heading sits under the list above it, so it needs the same air */
.fxband{margin-top:var(--s-4)}
.fxband:first-child{margin-top:0}
.fxbt b{font-family:var(--font);font-size:var(--text-md);font-weight:600}
.fxbm{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.segbtn{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.segbtn button{border:0;border-radius:0;background:transparent;color:var(--text-muted);
  font-size:var(--text-sm);padding:6px 14px;cursor:pointer}
.segbtn button+button{border-left:1px solid var(--border)}
.segbtn button:hover{background:var(--surface-2);color:var(--text)}
.segbtn button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.flow{margin:0 0 var(--s-3)}
/* reads as a control, because that is what it is */
.flow>summary{cursor:pointer;font-size:var(--text-sm);color:var(--text-muted);
  list-style:none;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);border-radius:8px;padding:6px 13px;
  background:var(--surface-2);transition:background .12s,color .12s,border-color .12s}
.flow>summary::-webkit-details-marker{display:none}
.flow>summary::before{content:'▸';color:var(--text-muted);font-size:10px;
  transition:transform .12s;display:inline-block}
.flow[open]>summary::before{transform:rotate(90deg)}
.flow>summary:hover{color:var(--text);border-color:var(--text-subtle)}
.flow>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.flow[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom-color:transparent;color:var(--text)}
@media(prefers-reduced-motion:reduce){
  .flow>summary,.flow>summary::before{transition:none}}
.flowbox{border:1px solid var(--border);border-radius:0 10px 10px 10px;
  background:var(--surface-2);padding:var(--s-3);overflow-x:auto;margin-top:-1px}
.flowbox svg{display:block}
.flowleg{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--text-xs);
  color:var(--text-muted);margin-top:var(--s-2);padding-top:var(--s-2);
  border-top:1px solid var(--border)}
.flowleg span{display:inline-flex;align-items:center;gap:6px}
.fxband{margin-bottom:var(--s-4)}
.fxband:last-child{margin-bottom:0}
.fxbh{display:flex;align-items:center;gap:10px;padding:0 0 6px 12px;
  border-left:3px solid var(--bc,var(--text-muted))}
.fxbh .bn{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--bc,var(--text-muted))}
.fxbh .bc{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.fxbh .bw{font-size:var(--text-xs);color:var(--text-muted);margin-left:auto}
.fxbb{border-left:3px solid var(--bc,var(--text-muted));padding-left:12px}
.fxbb .spine .s-r{width:86px}

.fxrow{display:flex;gap:var(--s-3);font-size:var(--text-sm);padding:6px var(--s-2);
  border-bottom:1px solid var(--border);border-radius:var(--r-sm);align-items:center}
.fxrow>div:last-child{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.fxsep{width:1px;align-self:stretch;background:var(--border)}
.fxrow:hover{background:var(--surface-2)}
.fxt{color:var(--text-muted);width:54px;flex:none}
.fxp{color:var(--text-subtle);font-size:var(--text-xs)}
.costgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s-2);margin:var(--s-4) 0 var(--s-3)}
.cg{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4)}
.cg .stn{font-size:var(--text-lg);color:var(--text)}
.cg .stn.warn{color:var(--warning)}

/* ---- referees ---- */
#refTbl,#refRoster{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
#refTbl th,#refRoster th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);font-weight:600;text-align:left;padding:6px 10px;
  border-bottom:1px solid var(--border);white-space:nowrap}
#refTbl td,#refRoster td{padding:6px 10px;text-align:left;vertical-align:middle;
  border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
#refTbl .n,#refRoster .n{text-align:right;font-variant-numeric:tabular-nums}
#refTbl .mut,#refRoster .mut{color:var(--text-muted)}
#refRoster .mono{font-family:var(--font-mono);white-space:nowrap}
#refRoster tr.idle td{opacity:.75}
#refTbl input[type=text]{width:100%;min-width:120px}
#refTbl .avail{white-space:nowrap}
#refTbl .avail input[type=time]{width:96px}
#refTbl .avail.allday input[type=time]{opacity:.55}
#refTbl .to{color:var(--text-muted);font-size:var(--text-xs);padding:0 4px}
.sm{font-size:var(--text-xs)}
.rmv.sm{width:20px;height:20px;font-size:12px;margin-left:4px}
/* time on the whistle as a share of time on site — the number that says whether
   somebody is standing around */
.util{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);
  padding:1px 7px;border-radius:99px;border:1px solid currentColor}
.util.hi{color:var(--success)} .util.mid{color:var(--warning)} .util.lo{color:var(--danger)}
#refRoster td .sm{display:block;color:var(--text-muted);margin-top:2px}

/* ---- fees tab ---- */
.fsec{font-size:var(--text-md);font-weight:600;margin:var(--s-5) 0 var(--s-2)}
h4.sub{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);font-weight:700;
  margin:var(--s-5) 0 var(--s-1);padding-top:var(--s-3);border-top:1px solid var(--border)}
.subnote{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--s-3);max-width:72ch}
#costTbl,#costRun{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
#costTbl th,#costRun th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);font-weight:600;text-align:left;padding:6px 10px;
  border-bottom:1px solid var(--border);vertical-align:bottom}
/* the base stylesheet right-aligns every td; these tables opt back out and let
   the .n class say which columns are actually numeric */
#costTbl td,#costRun td{padding:7px 10px;border-bottom:1px solid
  color-mix(in srgb,var(--border) 55%,transparent);vertical-align:middle;text-align:left}
#costTbl tbody tr:hover td,#costRun tbody tr:hover td{background:var(--surface-2)}
#costTbl .n,#costRun .n{text-align:right;font-variant-numeric:tabular-nums}
#costTbl .mut,#costRun .mut{color:var(--text-muted)}
#costTbl .money,#costRun .money{font-family:var(--font-mono);color:var(--text);white-space:nowrap}
#costTbl .ag{white-space:nowrap;font-weight:600}
#costTbl .ag .agdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
/* the rule that separates what a club is charged from what it gets for it */
#costTbl .sep,#costTbl .sep2{border-left:1px solid var(--border)}
/* An age group is one thing whether it takes one row or two. No rule inside a
   group; one clear rule between groups, with air either side of it. */
#costTbl tbody td{border-bottom:none}
#costTbl tbody tr.grp1:not(:first-child) td{border-top:1px solid var(--border)}
#costTbl tbody tr.grp1 td{padding-top:11px}
#costTbl tbody tr.glast td{padding-bottom:11px}
#costTbl .route{white-space:nowrap;font-size:var(--text-xs)}
#costRun .basis select{width:auto;min-width:96px}
#costRun .basis input{width:74px;text-align:right}
#costTbl thead .grp th{font-size:10.5px;letter-spacing:.14em;color:var(--text-muted);
  padding-bottom:2px;border-bottom:none;font-weight:700}
#costTbl tfoot td{border-top:1px solid var(--border);border-bottom:none;
  font-weight:600;background:var(--surface-2)}
#costRun tfoot td{border-top:1px solid var(--border);border-bottom:none;font-weight:600}
#costTbl input,#costRun input{width:86px;text-align:right}
/* share of entry revenue, so the groups carrying the event are visible at a glance */
#costTbl .bar{display:block;height:3px;border-radius:2px;background:var(--border);
  margin-top:4px;overflow:hidden}
#costTbl .bar i{display:block;height:100%;background:var(--accent);border-radius:2px}

.bline{display:flex;align-items:flex-start;gap:var(--s-5) var(--s-6);flex-wrap:wrap;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-1);
  padding:var(--s-4);margin-top:var(--s-4);border-left:3px solid var(--success)}
.bline.bad{border-left-color:var(--danger)}
.bline .bl{display:flex;flex-direction:column;gap:2px;flex:0 1 auto;min-width:132px}
.bline .bll{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted)}
.bline .blv{font-family:var(--font-mono);font-size:var(--text-md);color:var(--text);
  font-variant-numeric:tabular-nums}
.bline .main .blv{font-size:var(--text-lg);font-weight:700}
.bline.bad .main .blv{color:var(--danger)}
.bline .blx{font-size:var(--text-xs);color:var(--text-muted);line-height:1.45}
/* the result reads as a result: its own rule, and the only bold figure */
.bline .main{border-left:1px solid var(--border);padding-left:var(--s-5)}
@media(max-width:640px){.bline .main{border-left:0;padding-left:0}}
.note{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--s-3);line-height:1.6}

/* ---------- toast ---------- */
#toast{position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:99;display:flex;
  flex-direction:column;gap:var(--s-2);pointer-events:none}
.tst{background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--r-md);
  padding:var(--s-2) var(--s-3);font-size:var(--text-sm);box-shadow:var(--shadow);
  animation:tin .18s ease}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:820px){
  .lanename{width:100px}.axis{margin-left:100px}
  #board .axis{width:calc(100% * var(--zx) - 100px)}
  .hint{display:none}
  .mrow{grid-template-columns:76px 1fr}
  .lgh{width:100%}
}

/* ---------- navigation rail (v1.10, the redesign's Material 3 shell) ----------
   The sections run down the left edge, always in reach: icon, name, and the
   done/total count under it. Global settings and Save & share sit at the foot,
   apart from the parts of the event. The rail is navigation, not data, so it
   carries no colour of its own: the selected section is a lighter pill. */
:root{--rail:92px}
body{padding-left:var(--rail)}
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;display:flex;flex-direction:column;
  align-items:stretch;gap:2px;padding:var(--s-3) 6px var(--s-4);background:var(--surface-0);
  border-right:1px solid var(--border);overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.railmark{width:48px;height:48px;margin:0 auto var(--s-4);border-radius:14px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--text);font-weight:700;font-size:13px;letter-spacing:.06em;flex:none}
.tab{appearance:none;background:none;border:0;cursor:pointer;height:auto;white-space:normal;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:6px 2px 8px;font-family:var(--font);color:var(--text-muted);border-radius:var(--r-lg);flex:none}
.tab .ri{flex:none;width:56px;height:30px;padding:4px 16px;border-radius:15px;fill:currentColor;box-sizing:border-box;
  transition:background-color .12s}
.tab .rl{font-size:12px;line-height:15px;font-weight:500;text-align:center;max-width:84px}
.tab .cnt{font-family:var(--font-mono);font-size:11px;line-height:13px;color:var(--text-subtle);min-height:13px}
.tab:hover{color:var(--text);background:none}
.tab:hover .ri{background:var(--surface-2)}
.tab:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"] .ri{background:var(--surface-3)}
.tab[aria-selected="true"] .rl{font-weight:600}
.tab[aria-selected="true"] .cnt{color:var(--text-muted)}
.tabgap{flex:1 1 var(--s-4)}
.tab.util .rl{font-weight:400}
.hist{font-family:var(--font-mono);font-size:var(--text-sm);padding:var(--s-2) var(--s-3)}
.hist:disabled{opacity:.35;cursor:default}
.hist:not(:disabled):hover{color:var(--accent-text);background:var(--surface-2)}
.manlink{font-size:var(--text-base);font-weight:500;color:var(--text-muted);text-decoration:none;
  padding:var(--s-2) var(--s-3);border-radius:var(--r-md)}
.manlink:hover{color:var(--accent-text);background:var(--surface-2)}
#p-global,#p-share{background:var(--surface-2)}
#p-global .grid>div,#p-share .toolbar{background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s-3)}
#p-share h3{color:var(--text-muted);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.09em}
/* now a done/total fraction rather than decoration, so it has to be readable */
/* The count beside a preset button is secondary through family and size, not a
   dimmer colour: the button ground is accent-tinted, and every dimmed variant
   measured on it lands under AA. */
button .cnt{font-family:var(--font-mono);font-size:var(--text-xs);margin-left:7px}
.tabpanel{background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s-4) var(--s-4) var(--s-6)}
.tabpanel[hidden]{display:none}
.tabpanel h3{font-size:var(--text-md);font-weight:600;margin:var(--s-6) 0 var(--s-3)}
.tabpanel h3:first-child{margin-top:0}
.byes{margin-top:var(--s-3);padding:var(--s-3);background:var(--surface-2);
  border-left:3px solid var(--warning);border-radius:var(--r-sm);
  font-size:var(--text-sm);color:var(--text);line-height:1.7}
.byes strong{color:var(--warning);font-weight:600}
.pools{font-family:var(--font-mono);white-space:nowrap;font-size:var(--text-sm)}
/* Each round gets a shape as well as a colour, so a fixture list stays readable
   printed in grey or by anyone who does not separate these hues. */
.rb{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;
  font-weight:500;letter-spacing:.05em;padding:2px 8px 2px 7px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap;flex:none}
.rbs{width:8px;height:8px;background:currentColor;flex:none;display:block}
.sh-circle{border-radius:50%}
.sh-square{border-radius:1px}
.sh-diamond{transform:rotate(45deg);border-radius:1px}
.sh-tri{clip-path:polygon(50% 0,100% 100%,0 100%)}
.sh-chev{clip-path:polygon(0 0,52% 0,100% 50%,52% 100%,0 100%,48% 50%)}
.sh-bar{height:4px;border-radius:1px}
.sh-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  width:10px;height:10px}
.rb-a{color:var(--pool-a)} .rb-b{color:var(--pool-b)}
.rb-c{color:var(--pool-c)} .rb-d{color:var(--pool-d)}
.rb-qf{color:var(--rd-qf)} .rb-sf{color:var(--rd-sf)}
.rb-r16{color:var(--rd-r16)} .rb-plate{color:var(--rd-plate)}
.rb-bowl{color:var(--rd-bowl)} .rb-shield{color:var(--rd-shield)}
.rb-cup{color:var(--rd-cup);background:color-mix(in srgb,var(--rd-cup) 15%,transparent);font-weight:600}
.rb-place{color:var(--rd-place)}
.rb-final{color:var(--rd-final);background:color-mix(in srgb,var(--rd-final) 15%,transparent);font-weight:600}

/* A fixture is a row of pills: the pool code carries the pool (colour + shape),
   the name sits beside it, and a round pill appears only for knockout matches,
   where there is no pool code to carry it. */
/* One object, not two: the seed code sits inside the coloured outline and the
   club name in an inset capsule, so a named team still reads as its pool slot. */
.tp{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;
  border:1px solid currentColor;border-radius:99px;padding:2px 3px 2px 8px;
  white-space:nowrap;flex:none}
.tp.bare{padding:2px 8px}
/* A cut mark inside a placed block. Hidden until the mode is on, so the board
   stays a board; then a dashed rule you can click, sitting above the block's
   own labels. */
.cutline{display:none;position:absolute;top:0;bottom:0;width:15px;margin-left:-7px;
  padding:0;border:0;background:none;cursor:col-resize;z-index:3}
body.cuts .cutline{display:block}
.cutline::before{content:'';position:absolute;left:7px;top:2px;bottom:2px;width:1px;
  border-left:2px dashed color-mix(in srgb,var(--bg) 70%,transparent)}
.cutline:hover::before{border-left-color:var(--bg);left:6px;width:3px}
.cutline:focus-visible{outline:2px solid var(--bg);outline-offset:-2px}
/* Cutting is a mode, so the board has to look like a different place while it
   is on — otherwise a click that divides a block is indistinguishable from a
   click that selects one. */
body.cuts #board{outline:2px dashed color-mix(in srgb,var(--accent) 45%,transparent);
  outline-offset:6px;border-radius:var(--r-md)}
body.staff #board{outline:2px dashed color-mix(in srgb,var(--tab-people) 55%,transparent);
  outline-offset:6px;border-radius:var(--r-md)}
body.cuts .blk{cursor:default}
body.cuts .blk.nocut{opacity:.55}
/* Where pool play divides: the segments it is made of, with a scissor between
   each pair. One row carries the whole decision — how many blocks, and where. */
.brks{display:flex;align-items:stretch;flex-wrap:wrap;gap:2px}
.brks.off{font-size:var(--text-sm);color:var(--text-muted);padding:6px 0}
.brks .seg{display:inline-flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:4px 9px;font-size:var(--text-sm);white-space:nowrap}
.brks .seg em{font-style:normal;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--text-muted)}
.brks .cut{appearance:none;background:none;border:0;padding:0 2px;min-width:22px;height:auto;
  color:var(--text-subtle);cursor:pointer;font-size:13px;line-height:1;border-radius:var(--r-sm)}
.brks .cut:hover:not(:disabled){color:var(--accent-text);background:var(--surface-2)}
.brks .cut.on{color:var(--accent-text);background:var(--accent-quiet)}
.brks .cut:disabled{opacity:.3;cursor:default}
.brksum{font-size:var(--text-sm);color:var(--text-muted);margin-top:7px}
/* A number per age group. Each chip carries the group's colour so the strip can
   be read against the board without matching names. */
/* The roster timeline. Same shape as the schedule board so the answer to "who
   is on at eleven" is where you are already looking, but shorter rows: these
   carry one name, not a block of fixtures. */
/* Bars hold a name you type, so squeezing the day into 375px makes them
   unusable — a two-game shift came out 2px wide. The roster keeps a working
   minimum and scrolls sideways instead, the way the fixture spine does. */
/* Staffing on the board itself: a strip per playing area under each lane,
   solid where a shift has a name and hatched where it has not, plus a referee
   strip. It answers one question while you are dragging — did that move leave
   games nobody is covering — without turning the board into a roster. */
.cover{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none}
.covrow{position:relative;height:4px;margin-top:1px}
.covseg{position:absolute;top:0;bottom:0;border-radius:1px;pointer-events:auto}
.covseg.on.c-marshal{background:var(--tab-people)}
.covseg.off{background:repeating-linear-gradient(135deg,
  var(--danger) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--danger)}
/* The control that unfolds a lane. The triangle is drawn rather than typed —
   the glyph characters came out as a dot in the interface font — and it is
   labelled, because a bare caret in a lane name does not say what it opens. */
.lanex{appearance:none;background:none;border:0;padding:0;margin:0 0 3px;
  height:auto;width:auto;display:inline-flex;align-items:center;gap:5px;
  color:var(--text-muted);cursor:pointer;text-align:left;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.lanex:hover{color:var(--text)}
.lanex i{width:0;height:0;flex:none;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .12s ease}
.lanex.open i{transform:rotate(90deg) translateX(1px)}
.lanefold{margin:2px 0 var(--s-3)}
.lanefold .wname{width:150px}
.wroster{overflow-x:auto;max-width:100%}
.wlane{display:flex;align-items:stretch;margin-bottom:2px;min-width:660px}
.wlane.wsplit{margin-top:var(--s-3)}
.wname{width:150px;flex:none;background:var(--surface-1);padding:4px var(--s-3);
  border:1px solid var(--border);border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);
  display:flex;flex-direction:column;justify-content:center}
.wname b{font-size:var(--text-sm);font-weight:500;line-height:1.2}
.wname i{font-style:normal;font-size:10px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.07em;margin-top:1px}
.wtrack{position:relative;flex:1;height:34px;background:var(--surface-1);overflow:hidden;
  border:1px solid var(--border);border-radius:0 var(--r-md) var(--r-md) 0}
/* The block being played, behind the person covering it. A wash at this size
   is either too faint to see or too strong to type over, so the identity is
   carried by a solid rule along the foot of the track — the age group's own
   colour, the same one the board uses — with the wash only saying "something
   is on here". An empty stretch of track is then plainly nothing scheduled
   rather than nobody rostered. */
.wband{position:absolute;top:0;bottom:0;opacity:.16;border-radius:2px}
.wrule{position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0}
.wclosed{position:absolute;top:0;bottom:0;background:var(--overlay);z-index:1}
.wbar{position:absolute;top:3px;bottom:3px;border-radius:var(--r-sm);overflow:hidden;z-index:2;
  display:flex;align-items:center;border:1px solid var(--border-strong);
  background:var(--surface-2)}
.wbar.k-marshal{border-color:color-mix(in srgb,var(--tab-people) 60%,var(--border));
  background:color-mix(in srgb,var(--tab-people) 12%,var(--surface-2))}
.wbar.k-station{border-color:color-mix(in srgb,var(--tab-money) 60%,var(--border));
  background:color-mix(in srgb,var(--tab-money) 12%,var(--surface-2))}
.wbar.clash{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.wbar select{width:100%;height:100%;border:0;background:none;padding:0 4px;
  font-size:var(--text-xs);color:var(--text);min-width:0;appearance:none;cursor:pointer}
.wbar select:focus{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
.wbar.empty{background:var(--surface-2);border-style:dashed}
.wbar.empty select{color:var(--text-subtle)}
.wnone{padding:0 7px;font-size:var(--text-xs);color:var(--text-subtle);white-space:nowrap}
/* the age groups a volunteer looks after, as tickable chips */
.vags{white-space:normal}
.agpick{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);
  border:1px solid var(--border);border-left:3px solid var(--agc,var(--border));
  border-radius:var(--r-sm);padding:1px 6px;margin:2px 3px 2px 0;cursor:pointer;
  color:var(--text-muted)}
.agpick.on{color:var(--text);background:var(--surface-2)}
.agpick input{width:12px;height:12px;margin:0;accent-color:var(--accent)}
#volPplTbl td:first-child{width:26%}
.wax{position:relative;flex:1;height:18px}
@media(max-width:640px){.wname{width:104px}.wlane{min-width:560px}}
.wax span{position:absolute;transform:translateX(-50%);font-family:var(--font-mono);
  font-size:10px;color:var(--text-muted)}
.wuctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-muted);
  text-transform:none;letter-spacing:0}
.wuctl input[type=number]{width:64px}
.wuctl select{width:auto;min-width:130px}
.wuctl .chk{display:inline-flex;align-items:center;gap:6px;color:var(--text);cursor:pointer}
.wuctl .chk.off{color:var(--text-subtle);cursor:default}
.medtypes{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.medtype{display:inline-flex;align-items:center;gap:6px;background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-md);padding:5px 6px 5px 8px;font-size:var(--text-sm)}
.medtype input[type=text]{width:150px}.medtype input[type=number]{width:76px}
.medlocs{display:flex;flex-direction:column;gap:var(--s-2)}
.medloc{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-2) var(--s-3)}
.medwhere{min-width:170px;display:flex;flex-direction:column}
.medteam{display:flex;flex-wrap:wrap;gap:var(--s-2);flex:1}
.medstep{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;
  padding:2px 3px;font-size:var(--text-sm);color:var(--text-muted)}
.medstep.on{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}
.medstep b{min-width:14px;text-align:center;font-variant-numeric:tabular-nums}
.medstep button{appearance:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);cursor:pointer;line-height:1;padding:0;font-size:15px}
.medstep button:disabled{opacity:.35;cursor:default}
.medstep button:not(:disabled):hover{border-color:var(--accent)}
.medsum{min-width:190px;text-align:right;font-size:var(--text-sm)}
.agnums{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.agnum{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);
  border:1px solid var(--border);border-left:3px solid var(--agc,var(--border));
  border-radius:var(--r-sm);padding:3px 7px 3px 9px}
.agnum span{font-size:var(--text-sm);white-space:nowrap}
.agnum input{width:52px;height:28px;padding:0 6px;text-align:right}
/* a scissor between two chips is a small target for a thumb */
@media(max-width:560px){.brks .cut{min-width:40px}}
/* volunteers: a day band across the roster, and the role column reading as a
   label rather than data */
#volTbl .vday td{font-family:var(--font-mono);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);
  padding-top:var(--s-4);border-bottom:1px solid var(--border)}
#volTbl .vr{font-weight:500;white-space:nowrap}
#volTbl .vt{font-family:var(--font-mono);font-size:var(--text-xs);white-space:nowrap}
#volPostTbl td:first-child{width:40%}
/* A position, not a team. Mono and quieter than a name, so a semi-final never
   reads as though the draw is already known. */
.tp.pos b{font-family:var(--font-mono);font-size:11px;font-weight:500;
  color:var(--text-muted);background:transparent;
  border:1px dashed color-mix(in srgb,currentColor 55%,transparent);padding:0 7px}
.tp b{font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--text);
  background:var(--surface-2);border-radius:99px;padding:1px 9px;margin-left:1px}
/* the fixture a progression label resolves to: 'W BQF1' names a slot, not a match */
.fref{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
  border:1px solid var(--border);border-radius:4px;padding:0 4px;white-space:nowrap;flex:none}
/* pool matches stay quiet — the pool colour is already on both team pills */
.rnd{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tm{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.pl-name{display:inline-flex;align-items:center;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 9px;
  font-size:var(--text-sm);white-space:nowrap}
.fxv{color:var(--text-muted);font-size:var(--text-xs);padding:0 4px;align-self:center}
.fxid{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);
  white-space:nowrap;flex:none;min-width:66px}
.fxmatch{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ---------- age group cards ---------- */
.agcard{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  margin-bottom:var(--s-3);overflow:hidden}
/* One header treatment for an age group, wherever one appears: the age groups
   tab, the Teams tab, the block inspector and every fixture block. It wears the
   group's own hue at a fixed lightness per theme, not a percentage mix of its
   colour into the surface. A mix drags luminance toward whatever the age group
   happens to be, so the same rule that reads as a tint behind U10 puts the
   summary line under AA behind U8 — measured, at every percentage down to 6.
   Taking the hue and holding lightness keeps the contrast constant across
   twelve age groups and lets the colour actually show.
   --agc carries the colour, set inline per header; --agh-l the lightness. */
.agh,.aghue{background:var(--surface-2);
  background:hsl(from var(--agc,var(--surface-2)) h 45% var(--agh-l))}   /* 45%: the redesign's age-group colours are muted */
/* --text-subtle sat at 4.73:1 on the plain surface — the AA floor with nothing
   spare, so any coloured ground broke it. The hover red needs the same lift:
   plain --danger on the teal-hued U13 header measured 4.48. */
.agh .rmv,.aghue .rmv{color:var(--text-muted)}
.agh .rmv:hover,.aghue .rmv:hover{color:var(--danger-text);border-color:var(--danger-text)}
/* the card version: the top of a bordered card, so only a bottom rule */
.agh{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border-bottom:1px solid color-mix(in srgb,var(--agc,var(--border)) 40%,var(--border))}
/* the standalone version: a bar of its own above whatever it heads */
.aghue{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
  padding:var(--s-2) var(--s-3);border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--agc,var(--border)) 40%,var(--border))}
/* inside the inspector it is the card's own header, so it goes full bleed */
.insp .aghue{margin:calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-4);
  border-width:0 0 1px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--s-3) var(--s-4)}
.agh .nm{font-size:var(--text-md);font-weight:600;letter-spacing:-.01em}
.agh .sum{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.agb{padding:var(--s-3) var(--s-4) var(--s-4)}
/* three labelled rows: who is playing, how it is played, referees and money.
   Each row is its own grid, so a short row does not inherit the column widths
   of a long one. */
.agrow{display:flex;align-items:flex-start;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) 0}
.agrow+.agrow{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.agrow:first-child{padding-top:0}
.agrl{flex:0 0 118px;font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted);padding-top:6px}
.fld>label b{color:var(--text);font-weight:600}
.insp .agrow{padding:var(--s-3) 0}
.insp .agrow:first-of-type{padding-top:var(--s-2)}

.agf{flex:1 1 300px;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:var(--s-3);min-width:0}
.fld.grow{grid-column:span 2;min-width:180px}
.fld.full{grid-column:1/-1}
/* a label that wraps must not drop its control below the ones beside it */
.agf{align-items:end}
/* A 180px minimum inside a ~137px column makes neighbouring fields overlap
   rather than shrink, so the narrow layout has to release it too. */
@media(max-width:720px){.agrl{flex:1 1 100%;padding-top:0}
  .fld.grow{grid-column:span 1;min-width:0}}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld>label{font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-subtle);line-height:1.35;overflow-wrap:anywhere}
.fld.wide{grid-column:span 2}
/* A switch that also carries its own value: the checkbox turns the field on,
   the slider below sets it. Off, the slider stays readable so you can see what
   turning it on would give you. */
.fld>label.swl{display:flex;align-items:center;gap:6px;cursor:pointer}
.fld>label.swl input{width:13px;height:13px;margin:0;flex:0 0 auto;accent-color:var(--accent)}
.fld.off input[type=range]{opacity:.45}
.fmtdesc{font-size:var(--text-xs);color:var(--text-muted);line-height:1.5;margin-top:3px}
.fmtwarn{font-size:var(--text-xs);color:var(--warning);line-height:1.5;margin-top:5px;
  border-left:2px solid var(--warning);padding-left:8px}
.agtog{display:flex;gap:var(--s-6);flex-wrap:wrap;
  padding-top:var(--s-3);border-top:1px solid var(--border)}
.agtog .chk{font-size:var(--text-sm);color:var(--text-muted)}
@media(max-width:640px){.fld.wide{grid-column:span 1}}
.byeflag{color:var(--warning);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em}
.vrow{display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-4);align-items:center;
  padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.vrow:last-child{border-bottom:0}
.vn{font-size:var(--text-md);font-weight:500}
.vm{grid-column:1;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);margin-top:-6px}
.va{grid-column:2;grid-row:1 / span 2;display:flex;gap:var(--s-2)}
.vempty{color:var(--text-muted);padding:var(--s-2) 0}
.emptyboard{background:var(--surface-1);border:1px dashed var(--border-strong);border-radius:var(--r-lg);
  padding:var(--s-8) var(--s-4);text-align:center;display:flex;flex-direction:column;gap:var(--s-2)}
.emptyboard b{font-size:var(--text-md);font-weight:600}
.emptyboard span{color:var(--text-muted);font-size:var(--text-sm)}
.blklen{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-3) 0 var(--s-4);
  padding:var(--s-3);background:var(--surface-2);border-radius:var(--r-md)}
.bl-n{font-size:var(--text-xl);font-weight:600;line-height:1}
.bl-x{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
h5.isec{margin:var(--s-6) 0 var(--s-3);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted)}
.agadd{display:flex;gap:var(--s-4);align-items:flex-end;flex-wrap:wrap;margin-top:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--border)}
.agadd>div{min-width:250px}
.agadd .nudge{display:flex;gap:var(--s-2);align-items:center}
.agadd .nudge input{flex:1;min-width:80px}
.agadd .nudge button{flex:none}
.rmv{appearance:none;background:none;border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text-subtle);cursor:pointer;width:26px;height:26px;line-height:1;font-size:15px;padding:0}
.rmv:hover{border-color:var(--danger);color:var(--danger)}
.agdot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.tmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s-3)}
.tmslot{display:flex;align-items:center;gap:var(--s-2)}
/* a slot is one team: which club entered it, and what it is called */
.tmslot{align-items:flex-start;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-1)}
.tmslot.ours{border-color:var(--accent)}
.tmslot .sl{padding-top:20px}
.tmfields{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.tmfields>label:not(.tmfree){display:flex;flex-direction:column;gap:2px;min-width:0}
.tmfields label span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted)}
.tmfields input{width:100%}
.tmfields input:disabled{opacity:.5}
.tmfree{display:flex;flex-direction:row;align-items:center;gap:6px;
  font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;cursor:pointer}
.tmfree input{width:14px;height:14px;min-height:0;flex:none;margin:0;padding:0;
  align-self:center;accent-color:var(--accent)}
.tmfree span{text-transform:none;letter-spacing:0;font-family:var(--font)}
.tmfree em{font-style:normal;color:var(--warning)}
.tmslot.ours{border-color:var(--accent)}
.tmslot.ours input[list]{border-color:var(--accent)}
/* the base stylesheet right-aligns every cell; this table says what each column is */
#clubTbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
#clubTbl th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);font-weight:600;text-align:left;padding:6px 10px;
  border-bottom:1px solid var(--border);white-space:nowrap}
#clubTbl td{padding:7px 10px;text-align:left;vertical-align:middle;
  border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
#clubTbl tbody tr:hover td{background:var(--surface-2)}
#clubTbl .c-name{width:auto}
#clubTbl .c-name input{width:100%;min-width:120px}
#clubTbl .c-free{width:1%;white-space:nowrap}
#clubTbl .c-n{width:1%;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#clubTbl .c-ag{width:1%;white-space:nowrap;color:var(--text-muted)}
#clubTbl .c-rm{width:1%;text-align:right}
.tmslot .sl{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);
  width:26px;flex:none;text-align:right}
.tmslot input{height:32px;font-size:var(--text-sm)}
.tmslot input::placeholder{color:var(--text-subtle)}
.tmpool{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.1em;margin:var(--s-4) 0 var(--s-2)}

/* ---------- destructive actions ---------- */
/* At rest a destructive button should read as available, not as an alarm. The
   full-strength colour is the hover state. */
button.danger{background:var(--danger-quiet);border-color:var(--danger);
  color:var(--danger-text);font-weight:500}
button.danger:hover{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.rmv:hover{border-color:var(--danger);color:var(--danger);background:var(--accent-quiet)}

/* ---------- confirm dialog ---------- */
.modalwrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;
  justify-content:center;z-index:9999;padding:var(--s-4)}
.modalwrap[hidden]{display:none}
.modal{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:var(--s-6);max-width:460px;width:100%}
.modal h3{margin:0 0 var(--s-2);font-size:var(--text-md);font-weight:600}
.modal p{margin:0 0 var(--s-6);color:var(--text-muted);line-height:1.6}
.modalbtns{display:flex;gap:var(--s-2);justify-content:flex-end}

/* ---------- the day on the board (v1.10) ----------
   One card per day, big enough to read across a room, with what is on it and
   what is wrong with it. All days stacks them as the board always did, and is
   the only view where a block can be dragged from one day to another. */
.dayswitch{display:flex;gap:var(--s-2);margin:0 0 var(--s-4);padding:4px;border:1px solid var(--border);
  border-radius:20px;background:var(--surface-0)}
.dayswitch[hidden]{display:none}
.dsw{appearance:none;font-family:var(--font);cursor:pointer;flex:1 1 0;min-width:0;display:grid;
  grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:var(--s-3);align-items:center;text-align:left;
  padding:10px 18px 11px;height:auto;white-space:normal;border:0;border-radius:16px;background:none;color:var(--text-muted)}
.dsw:hover{background:var(--surface-2);color:var(--text)}
.dsw:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.dsn{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dss{grid-row:2;font-size:var(--text-sm);line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsf{grid-row:1/3;grid-column:2;display:flex;gap:6px}
.dfl{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 8px;border-radius:13px;
  font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600}
.dfl i{font-style:normal;font-size:10px;line-height:1}
.dfl.e{background:var(--danger-quiet);color:var(--danger-text)}
.dfl.w{background:color-mix(in srgb,var(--warning) 16%,var(--surface-1));color:var(--warning)}
.dsw.on{background:var(--accent);color:var(--accent-ink)}
.dsw.on .dfl.e{background:var(--danger);color:var(--danger-ink)}
.dsw.on .dfl.w{background:color-mix(in srgb,var(--warning) 75%,var(--accent-ink));color:var(--accent-ink)}
/* a block dragged over another day: that card says where it will go */
.dsw.droptgt{background:var(--accent-quiet);color:var(--text);box-shadow:inset 0 0 0 2px var(--accent-text)}
.dsw.droptgt .dss{color:var(--accent-text);font-weight:600}
.mvday{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;min-height:36px}
.mvcur{font-weight:600}
.mvday select{width:auto}
.tsta{pointer-events:auto;height:auto;padding:0 2px;border:0;background:none;color:var(--accent-text);font-weight:600;text-decoration:underline;cursor:pointer}
.tsta:hover{background:none;color:var(--text)}

/* ---------- Arrange (v1.10) ----------
   The actions that repack the whole board sit behind one button, so a stray
   click can't undo an afternoon's placing. */
.arr{position:relative;flex:none}
.arrbtn{display:inline-flex;align-items:center;gap:6px}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.arrbtn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.arrmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:min(360px,86vw);padding:6px 0;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow)}
.arrmenu[hidden]{display:none}
.mi{appearance:none;display:grid;grid-template-columns:1fr;gap:1px;width:100%;height:auto;white-space:normal;border-radius:0;padding:9px 16px;border:0;background:none;
  font-family:var(--font);text-align:left;color:var(--text);cursor:pointer}
.mi:hover,.mi:focus-visible,.mi:focus-within{background:var(--surface-3);outline:none}
.mil{font-size:var(--text-base);font-weight:500}
.mid{font-size:var(--text-xs);color:var(--text-muted);line-height:16px}
.mchk{grid-template-columns:auto 1fr;column-gap:10px}
.mchk input{grid-row:1/3;margin:3px 0 0}
.mchk .mil,.mchk .mid{grid-column:2}
.msep{height:1px;background:var(--border);margin:6px 0}
.mdanger .mil{color:var(--danger-text)}
.mnote{margin:6px 16px 6px;font-size:var(--text-xs);line-height:16px;color:var(--text-muted)}

/* short windows: a compact rail that still fits, so it never scrolls and never
   takes the arrow keys away from the page after a section is clicked */
@media (max-height:800px) and (min-width:761px){
  .railmark{width:40px;height:40px;margin-bottom:var(--s-2);font-size:12px}
  .tab{gap:1px;padding:3px 2px 4px}.tab .ri{height:26px;padding:2px 16px}
  .tab .cnt{display:none}.tabgap{flex-basis:var(--s-2)}
}
/* narrow windows: the rail turns into a strip across the top. Phones get
   their own read-only view later; this only keeps a small window usable. */
@media (max-width:760px){
  body{padding-left:0}
  .rail{position:sticky;top:0;bottom:auto;width:auto;flex-direction:row;padding:4px;gap:0;
    border-right:0;border-bottom:1px solid var(--border);overflow-x:auto}
  .railmark,.tabgap{display:none}
  .tab{padding:4px 2px 6px}.tab .rl{white-space:nowrap}.tab .cnt{display:none}
  .dayswitch{flex-wrap:wrap}.dsw{flex:1 1 140px}
  .dsn{font-size:18px;line-height:24px}
}

/* ---------- Teams & clubs: two sides of one page (v1.10) ----------
   Material 3 primary tabs: the label and a short bar under the chosen one. */
.subtabs{display:flex;gap:var(--s-1);margin:calc(var(--s-4)*-1) calc(var(--s-4)*-1) var(--s-4);padding:0 var(--s-3);
  border-bottom:1px solid var(--border)}
.stab{appearance:none;position:relative;height:48px;padding:0 var(--s-4);border:0;border-radius:var(--r-md) var(--r-md) 0 0;
  background:none;font-family:var(--font);font-size:var(--text-base);font-weight:500;color:var(--text-muted);cursor:pointer}
.stab:hover{background:var(--surface-2);color:var(--text)}
.stab:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.stab[aria-selected="true"]{color:var(--text);font-weight:600}
.stab[aria-selected="true"]::after{content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:var(--accent)}
.stab .cnt{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);margin-left:6px}
.subpanel[hidden]{display:none}