/* ==========================================================================
   WNFC — design system, from wnfc-restyle/mockups-reference.html (approved).
   Tokens and component classes are lifted from the reference verbatim except
   for two documented contrast fixes (see --red-text / --red-dot below).
   Fonts are self-hosted: no third-party requests at render time.
   ========================================================================== */

/* --- @font-face: Barlow, Barlow Condensed, IBM Plex Mono (see fonts/) ----- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-400-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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-500-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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-600-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-500-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-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{
  --night:#0D1411;        /* floodlit night, green-tinged */
  --panel:#151F1A;
  --panel-2:#1B2822;
  --chalk:#EEF2EC;        /* line markings + primary text */
  --chalk-dim:#93A29A;
  --grass:#3F7C50;
  --red:#E0342C;
  --red-deep:#8E1B16;
  --yellow:#F2C51D;
  --yellow-deep:#8F7208;
  --line:rgba(238,242,236,.16);
  --radius:10px;

  /* Contrast fixes over the reference (audited against WCAG AA):
     --red on --panel is 3.78:1 as *text*, below the 4.5 body-text floor, so
     text-only reds use --red-text (4.95:1). White on --red is 4.47:1 inside
     the 14px player dots, so those use --red-dot (4.91:1). Both are within a
     shade of the approved colour; --red itself is unchanged for bibs, borders
     and other non-text fills. */
  --red-text:#EC5A52;
  --red-dot:#D62E26;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--night);
  background-image:radial-gradient(ellipse 120% 60% at 50% -10%, rgba(238,242,236,.07), transparent 60%);
  background-attachment:fixed;
  color:var(--chalk);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.5;
  min-height:100vh;
}
a{color:inherit}

/* Visible keyboard focus on everything interactive. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--chalk);
  outline-offset:2px;
  border-radius:4px;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--chalk);color:var(--night);padding:8px 12px;border-radius:6px}

.wrap{max-width:430px;margin:0 auto;padding:0 0 64px}
.screen{padding:0 16px}

/* ---------- app chrome ---------- */
header.app{padding:22px 2px 6px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wordmark{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:34px;letter-spacing:.02em;line-height:1;text-decoration:none;color:var(--chalk)}
/* The club badge. `.badge` is already the roster status chip, hence .crest.
   Sized to Barlow's cap height (0.72em) and sat on the baseline, so the badge
   is exactly as tall as the WNFC letterforms beside it — and in em, so it
   tracks the wordmark automatically at the narrow-phone size too. */
.crest{width:.72em;height:.72em;margin-right:.48em;vertical-align:baseline}
.wordmark small{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;font-size:9px;letter-spacing:.28em;color:var(--chalk-dim);margin-top:3px}
.kickoff{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--chalk-dim);text-align:right;line-height:1.7;flex:none}
.kickoff b{color:var(--chalk);font-weight:500}
.kickoff a{color:var(--chalk-dim)}

/* ---------- panels: chalk borders like pitch markings ---------- */
.panel{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-top:14px;overflow:hidden}
.panel .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.panel .hd h2{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.panel .hd .tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);letter-spacing:.08em;text-align:right}
.panel .bd{padding:14px}

/* ---------- signature: peg board counter ---------- */
.count-row{display:flex;align-items:flex-end;justify-content:space-between;padding:18px 2px 4px}
.bigcount{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:64px;line-height:.9;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.bigcount span{font-size:28px;color:var(--chalk-dim);font-weight:600}
.count-label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.2em;color:var(--chalk-dim);text-transform:uppercase;padding-bottom:8px;text-align:right;line-height:1.8}
.pegs{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;padding:10px 2px 2px}
.peg{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line);position:relative}
.peg.full{background:var(--chalk);border-color:var(--chalk);box-shadow:0 0 10px rgba(238,242,236,.25)}
.peg.wait{border-style:dashed;border-color:var(--chalk-dim)}

/* ---------- roster ---------- */
.roster{list-style:none}
.roster li{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed rgba(238,242,236,.08)}
.roster li:last-child{border-bottom:none}
.num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--chalk-dim);width:20px;text-align:right;flex:none}
.pname{font-weight:500}
.ptime{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);flex:none}
.badge{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.1em;padding:2px 7px;border-radius:99px;border:1px solid var(--line);color:var(--chalk-dim);flex:none}
.badge.wl{border-color:var(--yellow-deep);color:var(--yellow)}
.badge.out{border-color:var(--red-deep);color:var(--red-text)}

/* ---------- pitch team sheet ---------- */
.pitch{position:relative;border:1.5px solid var(--line);border-radius:var(--radius);margin-top:14px;background:
  linear-gradient(rgba(238,242,236,.03) 1px, transparent 1px);
  background-size:100% 25%;overflow:hidden}
.half{padding:16px 10px 20px;position:relative}
.half+.half{border-top:1.5px solid var(--line)}
.half::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:110px;height:55px;border:1.5px solid var(--line);border-radius:0 0 90px 90px;border-top:none;top:0;opacity:.6}
.half.bottom::before{top:auto;bottom:0;border-radius:90px 90px 0 0;border-top:1.5px solid var(--line);border-bottom:none}
.teamname{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:.12em;text-transform:uppercase;padding:0 6px 10px;position:relative;z-index:2}
.teamname.end{justify-content:flex-end;padding-top:12px;padding-bottom:0}
.bib{width:13px;height:15px;border-radius:3px 3px 5px 5px;position:relative;flex:none}
.bib::before,.bib::after{content:"";position:absolute;top:-3px;width:4px;height:5px;border-radius:2px;background:inherit}
.bib::before{left:1px}.bib::after{right:1px}
.bib.r{background:var(--red)}.bib.y{background:var(--yellow)}
.row{display:flex;justify-content:space-evenly;margin-top:12px;position:relative;z-index:2}
.pl{text-align:center;width:76px;max-width:33%}
/* 13px, not 14: the dots carry DEF and MID now, not D and M (UPDATE5.md §4),
   and three condensed characters need the extra room inside 34px. */
.dot{width:34px;height:34px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em}
.dot.r{background:var(--red-dot);color:#fff;box-shadow:0 3px 10px rgba(224,52,44,.4)}
.dot.y{background:var(--yellow);color:#3A2E00;box-shadow:0 3px 10px rgba(242,197,29,.35)}
.pl b{display:block;font-size:12px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.pl b.empty{color:var(--chalk-dim);font-weight:500}
.pl i{font-family:'IBM Plex Mono',ui-monospace,monospace;font-style:normal;font-size:9px;color:var(--chalk-dim);letter-spacing:.08em}
/* An outfielder in goal. Deliberately quiet: it is a note for the committee,
   not an accusation, and it sits on every pitch the club sees. */
.pl i.rotation{display:block;margin-top:2px;font-size:8px;letter-spacing:.10em;color:var(--yellow);opacity:.85}

/* ---------- buttons ---------- */
.btn{display:block;width:100%;text-align:center;border:none;border-radius:var(--radius);
  font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px;cursor:pointer;margin-top:12px;text-decoration:none;color:var(--chalk);background:var(--panel-2)}
.btn.in{background:var(--grass);color:var(--chalk);box-shadow:0 4px 18px rgba(63,124,80,.35)}
.btn.out{background:transparent;color:var(--chalk-dim);border:1.5px solid var(--line);font-size:16px;padding:13px}
.btn.chalkline{background:var(--chalk);color:var(--night)}
.btn.small{font-size:15px;padding:11px;letter-spacing:.1em}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--chalk)}
.btn.danger{background:transparent;border:1.5px solid var(--red-deep);color:var(--red-text);font-size:15px;padding:11px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.flat{margin:0}

/* ---------- confirm / one-tap ---------- */
.confirm-card{text-align:center;padding:34px 18px}
.fixture{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;color:var(--chalk-dim);text-transform:uppercase}
.confirm-card h1{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:40px;line-height:1;margin:10px 0 4px;letter-spacing:.02em}
.confirm-card p{color:var(--chalk-dim);font-size:14px}
.spots{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--yellow);margin-top:14px;letter-spacing:.08em}
.confirm-card form{margin:0}

/* ---------- admin ---------- */
.kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
.kpi{border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 10px;background:var(--panel)}
.kpi b{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:26px;display:block;line-height:1}
.kpi span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.12em;color:var(--chalk-dim);text-transform:uppercase}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.actions .btn{margin:0}
.timeline{list-style:none}
.timeline li{display:flex;gap:12px;padding:10px 2px;border-bottom:1px dashed rgba(238,242,236,.08);font-size:13px;align-items:flex-start}
.timeline li:last-child{border-bottom:none}
.tdot{width:8px;height:8px;border-radius:50%;background:var(--grass);margin-top:6px;flex:none}
.tdot.pending{background:transparent;border:1.5px solid var(--chalk-dim)}
.timeline b{font-weight:600}
.timeline .when{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);white-space:nowrap;padding-left:8px}
.rowline{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px dashed rgba(238,242,236,.08)}
.rowline:last-child{border-bottom:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:13px;flex:none}
.meta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;color:var(--chalk-dim);letter-spacing:.04em}
.chip{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.08em;padding:3px 8px;border-radius:99px;flex:none}
.rowline .chip:first-of-type{margin-left:auto}
.chip.annual{background:rgba(63,124,80,.18);color:#8FD3A2}
.chip.irr{background:rgba(242,197,29,.12);color:var(--yellow)}
.chip.committee{border:1px solid var(--line);color:var(--chalk-dim)}
.chip.off{border:1px solid var(--red-deep);color:var(--red-text)}
.searchbar{display:flex;gap:8px;margin-top:14px}
.searchbar input{flex:1;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);color:var(--chalk);padding:11px 13px;font-family:'Barlow',sans-serif;font-size:14px}
.searchbar input::placeholder{color:var(--chalk-dim)}
.searchbar .add{width:46px;border-radius:var(--radius);border:none;background:var(--chalk);color:var(--night);font-size:22px;font-weight:600;cursor:pointer;flex:none}

/* history bars */
.hrow{display:flex;align-items:center;gap:10px;padding:8px 2px}
.hname{width:104px;font-size:13px;font-weight:500;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar{flex:1;height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.hbar i{display:block;height:100%;background:var(--grass);border-radius:99px}
.hpct{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);width:56px;text-align:right;flex:none}

/* ---------- picker ---------- */
.pool{display:flex;flex-wrap:wrap;gap:8px}
.pooltag{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:14px;letter-spacing:.05em;border:1.5px solid var(--line);border-radius:99px;padding:6px 13px;cursor:pointer;user-select:none;background:transparent;color:var(--chalk)}
.pooltag.sel{background:var(--chalk);color:var(--night);border-color:var(--chalk)}
.pooltag em{font-family:'IBM Plex Mono',ui-monospace,monospace;font-style:normal;font-size:9px;color:var(--chalk-dim);margin-left:5px}
.pooltag.sel em{color:rgba(13,20,17,.6)}
.pooltag.placed{display:none}
.slotgrid .row .pl .dot.empty{background:transparent;border:1.5px dashed var(--line);color:var(--chalk-dim);font-size:10px;font-family:'IBM Plex Mono',ui-monospace,monospace;cursor:pointer;box-shadow:none}
.slotgrid .dot{cursor:pointer}
.slotgrid .dot.target{border:1.5px solid var(--chalk);box-shadow:0 0 0 3px rgba(238,242,236,.18)}
.pickhint{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--chalk-dim);text-align:center;padding:10px 0 2px;letter-spacing:.05em}

/* ---------- notes, forms ---------- */
.note{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px 14px;margin-top:12px;font-size:13px;color:var(--chalk-dim)}
.note b{color:var(--chalk)}
.note.flash{border-color:var(--grass);color:var(--chalk)}
.note.warn{border-color:var(--yellow-deep);color:var(--chalk)}

textarea,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],select{
  width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);
  color:var(--chalk);padding:11px 13px;font-family:'Barlow',sans-serif;font-size:14px;margin-top:6px}
textarea{resize:vertical;margin-top:12px}
textarea::placeholder,input::placeholder{color:var(--chalk-dim)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--chalk-dim) 50%),linear-gradient(135deg,var(--chalk-dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
select option{background:var(--panel);color:var(--chalk)}
label{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:12px}
label.inline{display:flex;align-items:center;gap:8px;text-transform:none;font-size:13px;font-family:'Barlow',sans-serif;letter-spacing:0;color:var(--chalk)}
label.inline input{width:auto;margin:0}
.fieldrow{display:flex;gap:10px}
.fieldrow>*{flex:1;min-width:0}
fieldset{border:none}

/* game-by-game log */
.logtable{width:100%;border-collapse:collapse;font-size:13px}
.logtable th{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chalk-dim);text-align:left;padding:6px 8px 8px;font-weight:400}
.logtable td{padding:8px;border-top:1px dashed rgba(238,242,236,.08);white-space:nowrap}
.logtable td.n{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--chalk-dim);font-size:11px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- test mode + match control (Update 4) ---------- */
/* Never subtle: this has to be the loudest thing on an admin screen. */
.testbanner{margin-top:12px;border:2px solid var(--yellow);border-radius:var(--radius);
  background:rgba(242,197,29,.12);color:var(--yellow);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:10px 12px;line-height:1.6}
.panel.testpanel{border-color:var(--yellow-deep)}
.panel.testpanel .hd .tag{color:var(--yellow)}

.stages{list-style:none}
.stage{padding:12px 2px;border-bottom:1px dashed rgba(238,242,236,.08)}
.stage:last-child{border-bottom:none}
.stagehd{display:flex;align-items:center;gap:10px;font-size:14px}
.stagehd b{font-weight:600}
.stagehd .when{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  color:var(--chalk-dim);white-space:nowrap}
.stagewhat{font-size:12.5px;color:var(--chalk-dim);margin:4px 0 6px;padding-left:18px}
.stage .meta{padding-left:18px}
.stage .skipnote{color:var(--yellow)}
.stageacts{display:flex;gap:8px;margin-top:8px;padding-left:18px}
.stageacts form{margin:0;flex:1}
.stageacts .btn{margin:0}
.logtable td.err{color:var(--red-text);white-space:normal}

/* ---------- match fees (Update 6) ---------- */
/* §4's three states, and nothing else is allowed to colour a fee: OWED dim,
   PAID grass, WAIVED chalk outline. They reuse .chip so a fee status sits in
   the same visual family as the annual/irregular/committee chips already do. */
.chip.fee-owed{background:var(--panel-2);color:var(--chalk-dim)}
.chip.fee-paid{background:rgba(63,124,80,.18);color:#8FD3A2}
.chip.fee-waived{border:1px solid var(--line);color:var(--chalk-dim)}

/* One ledger row: who on the left, money and status on the right, the actions
   wrapping underneath on a phone. Grid rather than flex so the amount column
   stays put down the list however long a name is. */
.feerow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start;
  padding:12px 2px;border-bottom:1px dashed rgba(238,242,236,.08)}
.feerow:last-of-type{border-bottom:none}
.feewho{min-width:0}
.feewho b{display:block;font-size:15px;font-weight:600}
.feewho .meta{display:block;margin-top:2px}
.feeamt{text-align:right;white-space:nowrap}
.feeamt b{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px}
.feeamt .chip{display:inline-block;margin-top:5px}
.feeacts{grid-column:1 / -1;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:6px}
.feeacts form{margin:0}
.feeacts .btn{margin:0}

/* The payment reference, in mono because that is how it appears on a bank
   statement and matching the two is the whole point of showing it. */
.feeref{display:block;margin-top:3px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.10em;color:var(--chalk-dim)}

/* Waive hides behind a disclosure: a note is optional but the decision is not
   one to make with a mis-tap on a phone. */
.waive summary{cursor:pointer;list-style:none;display:inline-block;padding:9px 14px;
  border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel);
  font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-dim)}
.waive summary::-webkit-details-marker{display:none}
.waive[open]{flex:1 0 100%}
.waive[open] summary{margin-bottom:4px;color:var(--chalk)}
.waive .btn{margin-top:10px}

/* A player row on the By player view, which is a link to their history. */
.feelink{text-decoration:none;color:inherit}
.feelink .pname{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}

/* Bank details on /me. Mono values, because these get copied into a banking
   app by hand and a digit misread is a payment that never arrives. */
.banklines{margin-top:12px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2);padding:10px 13px}
.bankline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0}
.bankline+.bankline{border-top:1px dashed rgba(238,242,236,.08)}
.bankline span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);flex:none}
.bankline b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;color:var(--chalk);
  text-align:right;word-break:break-all}

/* "Every fee, paid and owed" — folded away by default so the panel leads with
   what is outstanding rather than with a year of history. */
.feehistory{margin-top:12px}
.feehistory summary{cursor:pointer;list-style:none;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim);
  text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.feehistory summary::-webkit-details-marker{display:none}

.foot{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.14em;color:var(--chalk-dim);text-align:center;padding:26px 0 0;text-transform:uppercase}
.foot a{color:var(--chalk-dim)}
.stack>.btn:first-child{margin-top:16px}

/* ---------- personal panel (recognised device) ---------- */
/* Slightly brighter chalk border than a public panel: this one is about you. */
.panel.you{border-color:rgba(238,242,236,.34);background:linear-gradient(180deg,var(--panel-2),var(--panel))}
/* A first name, not a section label — so no uppercasing here. */
.panel.you .hd h2{text-transform:none;letter-spacing:.01em;font-size:20px}
.yousay{font-size:14px;color:var(--chalk-dim);margin-bottom:4px}
.yousay b{color:var(--chalk);font-weight:600}
.panel.you form{margin-top:10px}

.panelfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px 0}
.panelfoot .notyou{padding:0}
.statslink{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk);text-decoration:underline;text-underline-offset:3px}
.notyou{text-align:center;padding:10px 0 0}
.notyou button{background:none;border:none;cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);text-decoration:underline;
  text-underline-offset:3px;padding:4px 8px}

/* ---------- log out (admin header) ---------- */
.logout{margin-top:4px}
.logout button{background:none;border:none;cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);text-decoration:underline;
  text-underline-offset:3px;padding:2px 0}

/* ---------- install strip ---------- */
/* Hidden until install.js decides it is worth offering; never in standalone. */
.installbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--panel);
  border-top:1.5px solid var(--line);box-shadow:0 -10px 34px rgba(0,0,0,.5);
  padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.installbar[hidden]{display:none}
.installbar .inner{max-width:430px;margin:0 auto;display:flex;align-items:center;gap:12px}
.installbar .appicon{width:40px;height:40px;border-radius:9px;flex:none}
.installbar .txt{flex:1;min-width:0}
.installbar .txt b{display:block;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;
  font-size:17px;letter-spacing:.04em;line-height:1.15}
.installbar .txt span{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.08em;color:var(--chalk-dim);margin-top:3px;line-height:1.5}
.installbar .btn{width:auto;margin:0;flex:none;font-size:14px;padding:10px 16px;letter-spacing:.1em}
.installbar .dismiss{background:none;border:none;cursor:pointer;color:var(--chalk-dim);
  font-size:20px;line-height:1;padding:6px 2px;flex:none}
/* Keep the page footer clear of the strip while it is up. */
body.installing .wrap{padding-bottom:136px}

/* ---------- results: score band on the halfway line ---------- */
.scoreband{border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);
  background:rgba(13,20,17,.5);padding:14px 10px;text-align:center;position:relative;z-index:3}
.scoreline{display:flex;align-items:center;justify-content:center;gap:14px}
.sc{display:flex;align-items:baseline;gap:8px;font-family:'Barlow Condensed',system-ui,sans-serif}
.sc b{font-weight:700;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.sc em{font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase}
.sc.r b{color:var(--red-text)} .sc.r em{color:var(--red-text)}
.sc.y b{color:var(--yellow)}   .sc.y em{color:var(--yellow)}
/* The score separator. A dot, never a hyphen. */
.scoredot{width:7px;height:7px;border-radius:50%;background:var(--chalk-dim);flex:none}
/* A draw is the club's result, so it gets a stamp rather than a footnote. */
.mottostamp{display:inline-block;margin-top:12px;padding:6px 14px;border:1.5px solid var(--chalk);
  border-radius:99px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.18em;color:var(--chalk)}

/* score entry (admin) */
.scoreentry{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0 4px}
.scoreentry input{width:64px;margin:0;text-align:center;font-family:'Barlow Condensed',system-ui,sans-serif;
  font-weight:700;font-size:30px;padding:8px 4px}
.sidename{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;flex:none}
.sidename.red{color:var(--red-text)} .sidename.yellow{color:var(--yellow)}
.scorenote{margin-top:10px}

/* ---------- form chips ---------- */
/* Brightness follows the scoring, set in stats.js: draw brightest under the
   Methodology, win brightest under the standard table. Losses are dim and
   never red, because red is a team. */
.formstrip{display:flex;gap:6px;flex-wrap:wrap}
.formstrip.tight{gap:4px}
.fchip{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:13px;flex:none}
.fchip.bright{background:var(--grass);color:var(--chalk);box-shadow:0 2px 10px rgba(63,124,80,.35)}
.fchip.outline{background:transparent;border:1.5px solid var(--line);color:var(--chalk)}
.fchip.dim{background:var(--panel-2);color:var(--chalk-dim)}
.formstrip.tight .fchip{width:18px;height:18px;font-size:11px;border-radius:5px}
.streakline{margin-top:12px}

/* ---------- segmented control ---------- */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:14px;padding:4px;
  border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.segbtn{display:block;text-align:center;text-decoration:none;border-radius:7px;padding:10px 6px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;
  color:var(--chalk-dim)}
.segbtn.on{background:var(--chalk);color:var(--night)}

/* ---------- ladder ---------- */
.kpis.four{grid-template-columns:repeat(4,1fr)}
.kpi.hero{border-color:var(--grass);background:linear-gradient(180deg,rgba(63,124,80,.18),var(--panel))}
.kpi b i{font-style:normal;color:var(--chalk-dim);font-size:18px;margin:0 1px}
.ladder .pname{font-weight:500;white-space:nowrap}
.ladder td.pts{color:var(--chalk);font-weight:600}
.ladder tr.unranked td{color:var(--chalk-dim)}
.tabcaption{margin-bottom:12px}

/* ---------- header nav links ---------- */
.navrow{display:flex;flex-wrap:wrap;gap:5px 16px;padding:2px 2px 0}
.navrow a{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);text-decoration:none}
.navrow a:hover,.navrow a.on{color:var(--chalk)}

/* ---------- narrow phones ---------- */
@media (max-width:380px){
  .wordmark{font-size:29px}
  .kpis.four{grid-template-columns:1fr 1fr}
  .sc b{font-size:36px}
  .bigcount{font-size:54px}
  .pegs{gap:5px}
  .pl{width:64px}
  .dot{width:30px;height:30px;font-size:12px}
  .btn{font-size:19px;letter-spacing:.08em}
  .hname{width:82px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- expandable player rows ---------- */
.playerRow{border-bottom:1px dashed rgba(238,242,236,.08)}
.playerRow:last-of-type{border-bottom:none}
.playerRow summary{list-style:none;cursor:pointer}
.playerRow summary::-webkit-details-marker{display:none}
.playerRow summary::marker{content:''}
.playerRow summary .rowline{border-bottom:none}
.playerRow[open] summary .rowline{border-bottom:1px dashed rgba(238,242,236,.08)}
.playerRow form{padding:2px 2px 16px}
.playerRow[hidden]{display:none}

/* ---------- prose pages (content/*.md) ---------- */
/* Body copy inside a panel: a shade dimmer than a heading, and looser than the
   app's default line height, because these are paragraphs to read rather than
   rows to scan. */
.prose p{color:var(--chalk-dim);font-size:14px;line-height:1.62}
.prose p+p{margin-top:11px}
.prose b{color:var(--chalk);font-weight:600}
.proselist{list-style:none;margin-top:11px}
.proselist li{position:relative;padding-left:16px;color:var(--chalk-dim);font-size:14px;line-height:1.62}
.proselist li+li{margin-top:7px}
.proselist li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--chalk-dim)}
/* The motto section gets the stamp the pitch puts on a draw, one size up: here
   it is the point of the page rather than a note under a scoreline. */
.mottoblock{text-align:center;padding:2px 0 14px}
.mottostamp.hero{font-size:13px;letter-spacing:.2em;padding:11px 20px}

/* ---------- committee messages (Update 8) ---------- */
/* A radio or checkbox styled as a chip. The input stays in the DOM and keeps
   the keyboard behaviour and the form semantics; only its appearance moves to
   the span beside it, which is what :checked + span is for. Hiding the input
   with display:none would take it out of the tab order, so it is laid over the
   chip at zero opacity instead. */
.optrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.optchip{position:relative;display:inline-block}
.optchip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.optchip>span{display:block;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.05em;border:1.5px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--chalk)}
.optchip input:checked+span{background:var(--chalk);color:var(--night);border-color:var(--chalk)}
.optchip input:focus-visible+span{outline:2px solid var(--chalk);outline-offset:2px}
.optrow .btn{width:auto;margin:0;flex:1 1 auto}

/* The pick-players list. Capped and scrolled so a club of any size cannot push
   Send off the bottom of a phone: §6 wants the compose form to stay one screen. */
.pickbox{margin-top:12px}
.pickbox summary{cursor:pointer;list-style:none;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim);
  text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.pickbox summary::-webkit-details-marker{display:none}
.pickerlist{max-height:238px;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.pickrow{display:flex;align-items:center;gap:10px;padding:9px 2px;text-transform:none;font-size:14px;
  font-family:'Barlow',sans-serif;letter-spacing:0;color:var(--chalk);margin:0;
  border-bottom:1px dashed rgba(238,242,236,.08);cursor:pointer}
.pickrow:last-child{border-bottom:none}
.pickrow input{width:auto;margin:0;flex:none}
.pickrow[hidden]{display:none}
.pickrow .chip{margin-left:auto}

/* The email preview: the real thing, in its own document, so the light email
   palette and the floodlit page palette cannot bleed into one another. */
.mailpreview{width:100%;height:420px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:#EEF2EC;margin-top:12px}

/* A message in the inbox, or on /me. Same two-column shape as .feerow, and an
   anchor rather than a row with a link in it so the whole thing is the tap
   target on a phone. */
.msgrow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start;
  padding:12px 2px;border-bottom:1px dashed rgba(238,242,236,.08);
  text-decoration:none;color:inherit}
.msgrow:last-of-type{border-bottom:none}
.msgrow.flat{border-bottom:none;padding-bottom:2px}
.msgwho{min-width:0}
.msgwho b{display:block;font-size:15px;font-weight:600}
.msgwho .meta{display:block;margin-top:3px;line-height:1.6}
.msgamt{text-align:right;white-space:nowrap}
/* Three chips of this feature's own, rather than borrowing the fee and player
   ones: a poll answer is not a fee status, and a class that says so is the
   difference between restyling messages and accidentally restyling the ledger.
   Unread is the one of the three meant to catch the eye. */
.chip.unread{background:rgba(63,124,80,.28);color:#A6E0B6;font-weight:500}
.chip.answered{background:rgba(63,124,80,.18);color:#8FD3A2}
.chip.notice{border:1px solid var(--line);color:var(--chalk-dim)}
.chip.choice{background:var(--panel-2);color:var(--chalk)}

/* The committee's words, as typed. pre-line keeps the single newlines without
   any template building <br> tags out of player input. */
.msgbody{margin-top:10px}
.msgbody p{white-space:pre-line;font-size:14.5px;line-height:1.62;color:var(--chalk)}
.msgbody p+p{margin-top:11px}

/* One reply in the thread. */
.threadrow{padding:11px 0;border-bottom:1px dashed rgba(238,242,236,.08)}
.threadrow:last-of-type{border-bottom:none}
.threadhd{display:flex;align-items:baseline;gap:10px}
.threadhd b{font-size:15px;font-weight:600}
.threadhd .ptime{margin-left:auto}
.threadrow .chip{display:inline-block;margin-top:6px}
.threadbody{white-space:pre-line;font-size:14px;line-height:1.6;color:var(--chalk-dim);margin-top:6px}

/* The reply form on /me, folded shut once they have answered. */
.msgreply{margin-top:6px;padding-bottom:12px;border-bottom:1px dashed rgba(238,242,236,.08)}
.msgreply:last-of-type{border-bottom:none}
.msgreply summary{cursor:pointer;list-style:none;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim);
  text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.msgreply summary::-webkit-details-marker{display:none}