/* Touchbase: one stylesheet for every page. Colours come from theme.js as custom properties on :root. */
/* SPACING (dim, 3 Nov 2026): every margin, padding and gap in app.css, player.css and rooms.css uses one of six sizes,
   4, 8, 12, 16, 24, 32 (--s1 to --s6), or a multiple of 8 above that. 4: a title to its small line. 8: label to value,
   icon to its word, chips in a row. 12: section title to its card, card to card. 16: page edges, inside a card, header
   to the first line. 24: section to section. 32: room above the bottom tabs. 0 to 3 only for hairline nudges, and
   negative margins only to centre a shape. test/spacing.test.mjs refuses any other size. */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px}
*{box-sizing:border-box}
:root{--display:"Montserrat",system-ui,sans-serif;--body:"Atkinson Hyperlegible Next",system-ui,sans-serif;--mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;
  --alert:#B3261E;--info:#2F5C9A;--info-soft:#E6EEF8;--ok:#2E7D4F;--ok-soft:#E4F3EA;
  --paper:#EEE8DE;--surface:#FFFFFF;--surface-2:#F8F5F0;--sunk:#E5DED2;--line:#DCD3C5;--line-soft:#E9E3D9;--fg:#1B2A41;--fg-2:#3A4658;--muted:#5E5A52;
  --chrome:#1B2A41;--chrome-2:#243650;--chrome-line:#3B4F6B;--chrome-fg:#F6F2EA;--chrome-muted:#C3CBD6;--chrome-accent:#9A4A1F;--chrome-link:#E9B48F;--chrome-alert:#F2857C;
  --brass:#8A4019;--brass-mark:#9A4A1F;--brass-soft:#F3E4D9;--on-brass:#FFFFFF;--chart-accent:#9A4A1F;--chart-muted:#B3AA9C;--chart-faint:#E7E0D4}
:root[data-theme="dark"]{--alert:#F2857C;--info:#8DB6E8;--info-soft:#16243A;--ok:#7CC79A;--ok-soft:#163A26}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--alert:#F2857C;--info:#8DB6E8;--info-soft:#16243A;--ok:#7CC79A;--ok-soft:#163A26} }
:root{--good:var(--ok);--good-soft:var(--ok-soft);--alert-soft:#F7E2E0;--r:12px}
:root[data-theme="dark"]{--alert-soft:#2E1816}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--alert-soft:#2E1816} }
/* the pages outside a club (front, sign-up, league view, admin) wear Touchbase's own colours, dark mode included */
:root[data-theme="dark"] body.brand{--paper:#121B29;--surface:#1A2536;--surface-2:#1F2C40;--sunk:#0D1420;--line:#2F3D53;--line-soft:#253247;--fg:#F3EFE7;--fg-2:#D0D6DF;--muted:#A3ACB9;--chrome:#0E1624;--chrome-2:#1A2638;--chrome-line:#33445C;--chrome-fg:#F3EFE7;--chrome-muted:#AEB8C6;--chrome-accent:#C8693A;--chrome-link:#E9B48F;--brass:#E9B48F;--brass-mark:#C8693A;--brass-soft:#3A2518;--on-brass:#160F0A;--chart-accent:#C8693A;--chart-muted:#5E6B7E;--chart-faint:#253247}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.brand{--paper:#121B29;--surface:#1A2536;--surface-2:#1F2C40;--sunk:#0D1420;--line:#2F3D53;--line-soft:#253247;--fg:#F3EFE7;--fg-2:#D0D6DF;--muted:#A3ACB9;--chrome:#0E1624;--chrome-2:#1A2638;--chrome-line:#33445C;--chrome-fg:#F3EFE7;--chrome-muted:#AEB8C6;--chrome-accent:#C8693A;--chrome-link:#E9B48F;--brass:#E9B48F;--brass-mark:#C8693A;--brass-soft:#3A2518;--on-brass:#160F0A;--chart-accent:#C8693A;--chart-muted:#5E6B7E;--chart-faint:#253247} }
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:var(--paper);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;min-height:100dvh;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:1.55rem;font-weight:700}h2{font-size:1.15rem;font-weight:600}h3{font-size:1rem;font-weight:600}
p{margin:0}
a{color:var(--brass)}
button,input,select,textarea{font:inherit;font-size:16px;color:inherit}
input,select,textarea{width:100%;padding:12px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:46px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--brass-mark);outline-offset:2px}
textarea{min-height:90px;resize:vertical}
label{display:block;font-family:var(--display);font-weight:600;font-size:.86rem;margin:0 0 4px}
label small{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:.82rem}
.field{margin-bottom:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }
/* two fields side by side: when one label carries a hint line, both boxes still start on the same line (dim, 3 Nov 2026) */
@media (min-width:561px){ .row2 > .field{display:flex;flex-direction:column} .row2 > .field > label{flex:1 0 auto} }
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.95rem}
.btn:hover{border-color:var(--fg-2)}
.btn.brass{background:var(--brass-mark);border-color:var(--brass-mark);color:var(--on-brass)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--brass)}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:default}
/* Bring a Club: the four ways to send the link, small, on one row */
.share-row{display:flex;gap:8px;flex-wrap:nowrap}
.ba-bar{display:block;margin-top:8px}
.share-row .btn{flex:1 1 0;min-width:0;min-height:36px;padding:8px 4px;white-space:nowrap;font-size:.8rem;border-radius:8px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.hint{color:var(--muted);font-size:.86rem;margin-top:8px}
.err{color:var(--alert);font-weight:600;margin-top:8px}
.ok{color:var(--ok);font-weight:600;margin-top:8px}
[hidden]{display:none !important}

/* the sample club's bar */
.demo-bar{background:#2B2F33;color:#F2F4F3;font-size:.84rem;padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.demo-bar .demo-plans{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.demo-bar button{min-height:30px;padding:3px 8px;border-radius:999px;border:1px solid #5B6368;background:transparent;color:#F2F4F3;font-size:.8rem;cursor:pointer}
.demo-bar button[aria-pressed="true"]{background:#F2F4F3;color:#2B2F33;border-color:#F2F4F3}
/* the bar at the top: the club's dark colour by night, its bright colour by day */
.bar{background:var(--chrome);color:var(--chrome-fg);padding:calc(8px + env(safe-area-inset-top,0)) 16px 8px;display:flex;align-items:center;gap:12px;min-height:60px}
.bar .crest{width:38px;height:38px;border-radius:9px;background:var(--chrome-2);display:grid;place-items:center;overflow:hidden;flex:none}
.bar .crest img{width:100%;height:100%;object-fit:contain}
.bar .crest span{font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--chrome-accent)}
.bar .t{min-width:0;flex:1}
.bar .t b{display:block;font-family:var(--display);font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t small{display:block;color:var(--chrome-muted);font-size:.78rem}
.bar a{color:var(--chrome-link)}
.bar .bk{color:var(--chrome-muted);text-decoration:none;font-size:.86rem;display:inline-flex;align-items:center;gap:4px;padding:8px 4px}
.tg{all:unset;box-sizing:border-box;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--chrome-line);color:var(--chrome-muted)}
.tg svg{width:17px;height:17px}
.tg .sun,:root[data-theme="dark"] .tg .moon{display:none}
:root[data-theme="dark"] .tg .sun{display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tg .moon{display:none} :root:not([data-theme="light"]) .tg .sun{display:block} }

main{max-width:760px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom,0))}
main.wide{max-width:1040px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.card h2{margin-bottom:8px}
.card .lede{color:var(--muted);font-size:.92rem;margin-bottom:12px}
section.block{margin:24px 0 0}
section.block > h2{margin-bottom:8px}
.k{font-family:var(--display);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.notice{background:var(--info-soft);color:var(--fg);border-radius:12px;padding:12px 16px;font-size:.92rem;margin-bottom:16px}
.notice b{color:var(--info)}
.stripe{background:var(--brass-soft);border-radius:12px;padding:12px 16px;font-size:.92rem;margin-bottom:16px}

/* doors: the choose your view page */
.doors{display:grid;gap:12px;margin-top:16px}
.door{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--fg)}
.door:hover{border-color:var(--brass-mark)}
.door .ic{width:44px;height:44px;border-radius:12px;background:var(--brass-soft);color:var(--brass);display:grid;place-items:center;flex:none}
.door .ic svg{width:22px;height:22px}
.door b{display:block;font-family:var(--display);font-size:1.05rem}
.door p{color:var(--muted);font-size:.9rem}
.door .go{margin-left:auto;color:var(--brass);font-family:var(--display);font-weight:600}

/* the check-in */
.ci .ci-q b{display:block;font-family:var(--display);font-size:1.1rem}
.ci .ci-q span{display:block;color:var(--muted);font-size:.88rem;margin-bottom:12px}
.ci-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ci-scale button{min-height:56px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);font-family:var(--display);font-weight:700;font-size:1.25rem;cursor:pointer;transition:transform .12s}
.ci-scale button:hover{border-color:var(--brass-mark)}
.ci-scale button[aria-pressed="true"]{background:var(--brass-mark);border-color:var(--brass-mark);color:var(--on-brass)}
.ci-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin-top:8px}
.ci-done{display:flex;gap:8px;align-items:center;color:var(--fg)}
.ci-done svg{width:26px;height:26px;color:var(--ok);flex:none}
.ci-help p{margin-bottom:8px}
.ci-lines{display:flex;flex-direction:column;gap:8px}
.ci-line{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--fg);text-decoration:none}
.ci-line svg{width:18px;height:18px;flex:none;color:var(--brass)}
.ci-line span{display:flex;flex-direction:column;min-width:0}
.ci-line b{font-family:var(--display);font-size:.92rem}
.ci-line small{font-size:.8rem;color:var(--muted)}
.ci-acts{display:flex;gap:16px;margin:12px 0 4px;font-size:.9rem}
.ci-x{margin-top:8px}

/* lists of people, games, events */
.people{display:grid;gap:8px}
.person{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.person .nm{font-family:var(--display);font-weight:600}
.person .ro{color:var(--muted);font-size:.84rem}
.person .note{font-size:.9rem;margin-top:4px}
.person.lead{border-color:var(--brass-mark);border-width:2px}
.sup-call{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.sup-call .btn{min-height:42px;padding:8px 16px}
.sup-call .btn svg{width:18px;height:18px}
.sup-code{font-size:.9rem}
.free-go{flex:none;min-height:38px;padding:8px 16px;font-size:.86rem}
.sup-code b{font-family:var(--mono);letter-spacing:.06em;background:var(--brass-soft);padding:2px 8px;border-radius:6px}
.person .open{margin-top:8px;font-family:var(--display);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.num-link{font-variant-numeric:tabular-nums;font-weight:600;text-decoration:none;color:var(--brass)}
.call{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.call:last-child{border-bottom:0}
.call b{font-family:var(--display);font-weight:600;font-size:.9rem;display:block}
.call small{color:var(--muted);font-size:.82rem}
.call .num{font-family:var(--mono);font-size:1rem;font-weight:500;color:var(--alert);text-decoration:none;white-space:nowrap}
.urgent .num{color:var(--alert)}
details.more{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px}
details.more > summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:12px 16px;min-height:48px;font-family:var(--display);font-weight:600;font-size:.92rem}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:"+";color:var(--muted);font-size:1.15rem}
/* a long question never runs into its plus sign (web browser sweep, 3 Nov 2026) */
details.more > summary{gap:12px}
details.more > summary::after{flex:none}
details.more[open] > summary::after{content:"\2212"}
details.more > .in{padding:0 16px 16px}
.game{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.game:last-child{border-bottom:0}
.game .d{font-family:var(--mono);font-size:.84rem;color:var(--muted);white-space:nowrap;padding-top:2px}
.game .w b{font-family:var(--display);font-size:.95rem}
.game .w small{display:block;color:var(--muted);font-size:.82rem}
.game .r{font-family:var(--display);font-weight:600;font-size:.86rem;white-space:nowrap;text-align:right}
.game .r.won{color:var(--ok)}.game .r.lost{color:var(--alert)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{min-height:36px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.86rem;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--brass-mark);border-color:var(--brass-mark);color:var(--on-brass)}
.ev{padding:8px 0;border-bottom:1px solid var(--line-soft)}
.ev:last-child{border-bottom:0}
.ev b{font-family:var(--display)}
.ev .m{color:var(--muted);font-size:.84rem}
.lib{display:grid;gap:8px}
.lib-item{padding:8px 12px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface-2)}
.lib-item b{font-family:var(--display);font-size:.93rem}
.lib-item .by{color:var(--muted);font-size:.8rem}
.lib-item p{font-size:.88rem;margin-top:2px}
.lib-item a{font-size:.86rem}
.pill{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--fg-2);margin-left:8px;font-family:var(--display);font-weight:600;vertical-align:middle}

/* resource topics: tiles on the player page, a room each */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.topic{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--fg);min-height:96px}
.topic:hover{border-color:var(--brass-mark)}
.topic .ti{width:24px;height:24px;color:var(--brass)}
.topic b{font-family:var(--display);font-size:.9rem;line-height:1.2}
.topic small{color:var(--muted);font-size:.75rem}
@media (max-width:380px){ .topics{grid-template-columns:repeat(2,1fr)} }
.room-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:8px}
.room-head .ti{width:36px;height:36px;color:var(--brass);flex:none;margin-top:4px}
.lib-card{padding:0}
.lib-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px;border-top:1px solid var(--line-soft)}
.lib-row:first-child{border-top:0}
.lib-row .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lib-row .t b{font-family:var(--display);font-size:.95rem}
.lib-row .t span{font-size:.86rem;color:var(--fg-2)}
.lib-row .btn{flex:none;min-height:38px;padding:8px 16px}
/* resource tiles and rooms */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:360px){ .tiles{grid-template-columns:repeat(2,1fr)} }
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--fg);text-align:center}
.tile:hover{border-color:var(--brass-mark)}
.tile .ticon{width:34px;height:34px;border-radius:10px;background:var(--brass-soft);color:var(--brass);display:grid;place-items:center}
.tile .ticon svg{width:20px;height:20px}
.tile b{font-family:var(--display);font-size:.84rem;font-weight:600;line-height:1.2}
.card.flush{padding:0;overflow:hidden}
.lib-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 16px;border-top:1px solid var(--line-soft);text-decoration:none;color:var(--fg);background:transparent;border-radius:0}
.lib-item:first-child{border-top:0}
.lib-item .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lib-item .t b{font-family:var(--display);font-size:.95rem;font-weight:600}
.lib-item .t span{font-size:.86rem;color:var(--fg-2)}
.lib-item .t .by{font-size:.78rem;color:var(--muted)}
.lib-item .ln{color:var(--brass);flex:none;padding-top:2px}
/* Resources: type buttons, then a card each with Open beside the words */
.res-types{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px;margin:8px 0 4px}
.pv .res-types{position:sticky;top:0;z-index:20;background:var(--paper);margin:8px -4px 4px;padding:8px 4px 8px;box-shadow:0 1px 0 var(--line-soft)}   /* stays at the top while a player scrolls, like the home page team pills (dim, 29 Oct 2026) */
@media (max-width:900px){.pv .res-types{top:var(--pv-bar,55px)}}
.res-types::-webkit-scrollbar{display:none}
.res-type{all:unset;box-sizing:border-box;cursor:pointer;flex:none;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-family:var(--display);font-size:.84rem;font-weight:600;color:var(--fg-2);white-space:nowrap}
.res-type[aria-pressed="true"]{background:var(--brass-mark);border-color:var(--brass-mark);color:var(--on-brass)}
.res-type:focus-visible{outline:2px solid var(--brass-mark);outline-offset:2px}
.res-group[hidden]{display:none}
.pv .res-group .res-head{margin:24px 0 12px;font-family:var(--display);font-size:.95rem;line-height:1.3;display:flex;align-items:center;gap:8px}   /* each group's title in the app wide section title look (.sec-title), with how many it holds level with it */
.pv .res-group .res-why{margin:-8px 0 12px;font-size:.9rem;color:var(--muted)}
.pv .res-group .rh-n{font-size:.8rem;font-weight:600;line-height:1;letter-spacing:0;color:var(--muted)}
.res-rows{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}   /* a row each, drawn like the player home's For you rows (dim, 29 Oct 2026) */
.res-row{display:flex;align-items:center;gap:12px;padding:16px 16px;color:var(--fg);text-decoration:none}
.res-row + .res-row{border-top:1px solid var(--line-soft)}
a.res-row:hover{background:var(--surface-2)}
.res-row .rr-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--brass)}
.res-row .rr-ic svg{width:20px;height:20px}
.res-row .rr-t{flex:1;min-width:0}
.res-row .rr-t b{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem}
.res-row .rr-t small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-row .rr-go{flex:none;display:grid;place-items:center;width:18px;height:18px;color:var(--muted);font-size:.9rem}
.res-row .rr-go svg{width:18px;height:18px}
.res-row.locked{opacity:.75}
.res-row .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main h1{margin:4px 0 8px}
/* tables */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--display);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin:8px 0 4px}
.bars > div{flex:1;background:var(--chart-accent);border-radius:4px 4px 0 0;min-height:3px;position:relative}
.bars > div.faint{background:var(--chart-faint)}
.bars > div span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:.75rem;color:var(--muted)}
.axis{display:flex;gap:8px}
.axis span{flex:1;text-align:center;font-size:.75rem;color:var(--muted);font-family:var(--mono)}

/* front page */
/* the front page: the first thing anyone opens. One code, and the club opens itself */
.front{min-height:100dvh;display:flex;flex-direction:column;background:var(--chrome);color:var(--chrome-fg);position:relative;overflow-x:hidden}
.front main{position:relative;z-index:1;width:100%;max-width:420px;margin:auto;padding:40px 24px 12px;text-align:center}
.front .fx{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.front .fx i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.38;animation:drift 18s ease-in-out infinite alternate}
.front .fx i:nth-child(1){width:340px;height:340px;background:var(--chrome-accent);top:-120px;left:-110px}
.front .fx i:nth-child(2){width:300px;height:300px;background:#2F5C9A;bottom:-110px;right:-90px;animation-delay:-6s}
.front .fx i:nth-child(3){width:220px;height:220px;background:var(--chrome-link);top:42%;left:60%;opacity:.16;animation-delay:-12s}
@keyframes drift{to{transform:translate(40px,50px) scale(1.15)}}
.front .mark{width:88px;height:88px;margin:0 auto 16px;border-radius:24%;overflow:hidden;box-shadow:0 0 0 2px rgba(238,232,222,.85),0 8px 20px rgba(0,0,0,.3)}
.front .mark svg{display:block;width:100%;height:100%}
/* opening screen, first open on a phone only (index.html adds html.opening) */
.opener{display:none}
.opening .opener{display:block;position:fixed;inset:0;z-index:5;cursor:pointer}
.opener .op-bd{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 45%,#22385A 0%,var(--chrome) 62%,#121D2E 100%)}
.opener svg{position:absolute;inset:0;width:100%;height:100%}
.opener .op-rings circle{fill:none;stroke:var(--chrome-fg);stroke-width:1.5;stroke-dasharray:100;transform-box:view-box;transform-origin:170px 370px}
.opener .op-logo{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:24%;overflow:hidden;box-shadow:0 0 0 3px rgba(238,232,222,.85),0 18px 40px rgba(0,0,0,.4)}
.opener .op-logo svg{position:static;display:block}
.opener .op-tag{position:absolute;left:0;right:0;top:calc(50% + 96px);margin:0;text-align:center;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-muted)}
.held .front main > *{animation-play-state:paused}
.held .front .mark{visibility:hidden}
.front h1{font-size:2.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.front .lede{color:var(--chrome-muted);margin:0 auto 32px;max-width:34ch}
.front main > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.front main > :nth-child(2){animation-delay:.08s}.front main > :nth-child(3){animation-delay:.16s}.front main > :nth-child(4){animation-delay:.24s}
.front main > :nth-child(5){animation-delay:.32s}.front main > :nth-child(6){animation-delay:.38s}.front main > :nth-child(7){animation-delay:.44s}.front main > :nth-child(8){animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.front label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-muted);margin-bottom:12px}
.code-boxes{position:relative;display:flex;justify-content:center;align-items:center;gap:8px}
.code-boxes span{width:40px;height:54px;border-radius:12px;border:1.5px solid var(--chrome-line);background:var(--chrome-2);display:grid;place-items:center;font-family:var(--mono);font-size:1.4rem;font-weight:500;color:var(--chrome-fg);transition:border-color .15s,transform .15s,background .2s}
.code-boxes span.on{border-color:var(--chrome-muted);animation:pop .18s ease-out}
.code-boxes span.at{border-color:var(--chrome-link);box-shadow:0 0 0 3px rgba(233,180,143,.18)}
.code-boxes span.at::after{content:"";width:2px;height:24px;background:var(--chrome-link);animation:blink 1s steps(1) infinite}
.code-boxes b{color:var(--chrome-muted);font-weight:400;padding:0 2px}
.code-boxes input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:text;min-height:0;padding:0;border:0;font-size:16px;caret-color:transparent}
.code-boxes.busy span{border-color:var(--chrome-link);animation:wave 1s ease-in-out infinite}
.code-boxes.busy span:nth-of-type(2){animation-delay:.07s}.code-boxes.busy span:nth-of-type(3){animation-delay:.14s}.code-boxes.busy span:nth-of-type(4){animation-delay:.21s}
.code-boxes.busy span:nth-of-type(5){animation-delay:.28s}.code-boxes.busy span:nth-of-type(6){animation-delay:.35s}.code-boxes.busy span:nth-of-type(7){animation-delay:.42s}
.code-boxes.good span{background:var(--chrome-accent);border-color:var(--chrome-accent);color:#fff;transform:scale(1.04)}
.code-boxes.bad{animation:shake .4s}
.code-boxes.bad span{border-color:var(--chrome-alert)}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes blink{50%{opacity:0}}
@keyframes wave{50%{transform:translateY(-4px)}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media (max-width:380px){.code-boxes{gap:4px}.code-boxes span{width:34px;height:48px;font-size:1.2rem}}
.front .hint{color:var(--chrome-muted);margin-top:12px}
.front .hint a{color:var(--chrome-link)}
.front .err{color:var(--chrome-alert);margin-top:12px}
.front .or{display:flex;align-items:center;gap:12px;margin:40px 0 16px;color:var(--chrome-muted);font-size:.86rem}
.front .or::before,.front .or::after{content:"";flex:1;height:1px;background:var(--chrome-line)}
.front .btn.ghost{background:transparent;color:var(--chrome-fg);border-color:var(--chrome-line);border-radius:999px}
.front .btn.ghost:hover{border-color:var(--chrome-link)}
.front .btn.solid{background:var(--chrome-fg);color:var(--chrome);border-color:var(--chrome-fg);border-radius:999px;font-weight:700}
.front .btn.solid:hover{background:#fff}
.front .foot{position:relative;z-index:1;color:var(--chrome-muted);font-size:.82rem;text-align:center;padding:16px}
.front .foot a{color:var(--chrome-link)}
@media (prefers-reduced-motion:reduce){.front *,.front .fx i{animation:none !important;transition:none !important}.front .mark{visibility:visible}}
.code-big{font-family:var(--mono);font-size:1.6rem;letter-spacing:.1em;text-align:center;padding:16px;border:1px dashed var(--line);border-radius:12px;margin:8px 0;user-select:all}
.swatch{display:inline-block;width:26px;height:26px;border-radius:7px;border:1px solid var(--line);vertical-align:middle;margin-right:8px}
.crest-big{margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--sunk);padding:8px;display:grid;place-items:center}
.crest-big img{max-width:160px;max-height:160px;width:100%;object-fit:contain}
.crest-big.picking{border-color:var(--brass-mark);cursor:crosshair}
.crest-big.picking img{cursor:crosshair}
.colour-pick{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.colour-pick label{display:flex;align-items:center;gap:8px;margin:0}
.bar-mock{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:12px;margin-top:8px}
.bar-mock .crest{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;flex:none}
.bar-mock .crest img{width:100%;height:100%;object-fit:contain}
.bar-mock .t b{display:block;font-family:var(--display);color:#fff;font-size:1rem;line-height:1.2}
.bar-mock .t small{display:block;font-size:.78rem}
input[type="color"]{width:52px;height:46px;padding:4px}
input[type="file"]{padding:8px 8px;min-width:0;max-width:100%}
.card{min-width:0;overflow:hidden}
textarea[name="teams"]{min-height:150px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label.agree{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:12px;font-weight:400;font-family:var(--body)}
label.agree input{width:22px;height:22px;min-height:0;flex:none;margin-top:2px}
.codes{display:block;margin:16px 0 16px;border-top:1px solid var(--line-soft)}
.codes dt{font-family:var(--display);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 2px}
.codes dd{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:1.5rem;letter-spacing:.12em;line-height:1.2;user-select:all}
.bad{border-color:var(--alert)!important;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.field-err{font-size:.9rem;margin:8px 0 0}
.prows{display:grid;gap:8px}
.prow{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.prow-h{display:flex;align-items:center;gap:8px;padding:12px 16px}
.prow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prow-t small{color:var(--muted);font-size:.9rem}
.prow-a .btn{min-height:40px;padding:8px 12px;white-space:nowrap}
.prow-a{flex:none}
.prow.mine{border:2px solid var(--chrome);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.prow.mine .prow-h{background:var(--chrome);color:var(--chrome-fg);border-radius:9px 9px 0 0}
.prow.mine .prow-t small{color:var(--chrome-fg);opacity:.85}
.prow.mine .pr-more{border-top:0}
.prow > .pay-err{margin:0 16px 8px}
.pr-more{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:8px 16px;border:0;border-top:1px solid var(--line);background:var(--sunk);color:var(--fg);font-family:var(--display);font-weight:600;font-size:.95rem;cursor:pointer;border-radius:0 0 12px 12px}
.pr-more::after{content:"";width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.pr-more[aria-expanded="true"]{border-radius:0}
.pr-more[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.prow-in{padding:4px 16px 16px}
.sell{list-style:none;margin:8px 0 8px;padding:0;display:grid;gap:12px}
.sell li{position:relative;padding-left:24px;display:flex;flex-direction:column;gap:2px}
/* a tick before each line, not a dot (dim, 3 Nov 2026) */
.sell li::before{content:"";position:absolute;left:2px;top:.3em;width:6px;height:11px;border-right:2.5px solid var(--brass-mark);border-bottom:2.5px solid var(--brass-mark);transform:rotate(45deg)}
.sell b{font-family:var(--display);font-size:1rem}
.sell span{color:var(--fg-2,var(--fg));font-size:.94rem}
details.more.invert > .in,.menu > details.more.invert > .in{background:var(--chrome);color:var(--chrome-fg);border-color:var(--chrome);border-radius:0 0 12px 12px}
details.more.invert > .in .lede,.menu > details.more.invert > .in .lede{color:var(--chrome-fg);opacity:.92}
details.more.invert .prow{box-shadow:0 2px 10px rgba(0,0,0,.18);color:var(--fg)}
.pick-plan{display:grid;gap:8px}
.pick-plan .pp{display:flex;flex-wrap:wrap;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pick-plan .pp:has(input:checked){border-color:var(--brass-mark);box-shadow:0 0 0 1px var(--brass-mark)}
.pick-plan label{flex:1;display:flex;gap:12px;align-items:center;padding:16px;font-weight:400;font-family:var(--body);cursor:pointer;margin:0}
.pick-plan input{width:20px;height:20px;min-height:0;flex:none;margin:0}
.pp-more{flex:none;width:48px;align-self:stretch;min-height:0;border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.1rem}
.pp-more::after{content:"\25BE"}
.pp-more[aria-expanded="true"]::after{content:"\25B4"}
.pp-in{flex:1 1 100%;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px 48px}
.pick-plan em{font-style:normal;font-weight:600}
.pick-plan small{color:var(--muted);font-size:.88rem}
/* the foot closes the page: a little room under it for the phone's home bar and no more (dim, 2 Nov 2026) */
.foot{color:var(--muted);font-size:.8rem;text-align:center;padding:16px 16px calc(12px + env(safe-area-inset-bottom,0))}
main:has(+ .foot){padding-bottom:8px}
.foot .foot-l{display:block;line-height:1.6}
.plan-list{display:grid;gap:8px}
.offer{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface)}
.offer .offer-p{margin:2px 0 0;font-size:1.05rem}
.offer .offer-p b{font-family:var(--display);font-size:1.35rem}
.offer-l{margin:8px 0 12px;padding-left:1.1em;font-size:.92rem}
.offer-l li{margin:3px 0}
.offer-alt{margin:8px 0 0}
.offer-btns{display:flex;gap:8px;flex-wrap:wrap}
.offer-btns .btn{flex:1 1 140px}
.offer-btns .pill{align-self:center}
.offer-alt .linkish{font-size:inherit;padding:0}
.offer-r1r{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:8px;padding:12px 16px;border:1px dashed var(--line);border-radius:12px}
.offer-r1r p{margin:0;flex:1 1 200px}
.offer-r1r > div{flex:1 1 100%}
.offer-r1r .offer-l{margin:8px 0 0}
.offer.up{margin-top:8px}
.offer.up .btn{margin-top:4px}
.plan{border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan b{font-family:var(--display)}
.plan.now{border-color:var(--brass-mark);background:var(--brass-soft)}
.plan .plan-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px}
.plan .plan-t small{font-size:.84rem;color:var(--muted)}
.plan .plan-t .plan-p{color:var(--fg-2);font-weight:500}
.plan-act{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.plan-act .btn{white-space:nowrap}
@media (max-width:480px){ .plan-act{align-items:stretch;width:100%} .plan-act .btn{width:100%} .plan-act .linkish{text-align:left} }
.gap{margin-top:12px;border-left:3px solid var(--alert)}
.gap.ok{border-left-color:var(--ok)}
.gap-n{font-family:var(--display);font-size:1.3rem;font-weight:600;margin:2px 0 4px}
.status{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.76rem;font-family:var(--display);font-weight:600}
.status.live{background:var(--ok-soft);color:var(--ok)}.status.paused{background:var(--sunk);color:var(--muted)}
@media print{ .bar,.tg,.ci{display:none} body{background:#fff} }

/* staff rooms */
.chk{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:400;font-size:.92rem;margin:0}
.chk input{width:20px;height:20px;min-height:0}
.session{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.session:last-child{border-bottom:0}
.sh b{font-family:var(--display)}
.sh small{display:block;color:var(--muted);font-size:.84rem}
.ph-sess .sh{position:relative;padding-right:32px;cursor:pointer}
.ph-sess .sh::after{content:"\203A";position:absolute;right:6px;top:-2px;font-size:28px;line-height:1;color:var(--muted);transition:transform .15s}
.ph-sess.ph-open .sh::after{transform:rotate(90deg)}
.ph-sess:not(.ph-open) .ph-slots,.ph-sess:not(.ph-open) .ph-acts,.ph-sess:not(.ph-open) [data-smsg]{display:none}
.wl-hand .linkish{font-size:inherit;padding:0}
.ph-pastlink{margin:16px 0 0}
.ph-pastlink a{font-family:var(--display);font-weight:600;text-decoration:underline}
.ph-month{margin:16px 0 8px}
.ph-ro .ph-slot{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px 12px;align-items:start;padding:8px 0;border-top:1px solid var(--line-soft);font-size:.92rem}
.ph-ro .ph-slot .tm{font-family:var(--mono,monospace);font-size:.84rem;color:var(--muted)}
.ph-ro .ph-head{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px 12px;margin-top:8px}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.slot{display:flex;flex-direction:column;align-items:center;min-width:72px;padding:8px 8px;border-radius:10px;border:1px solid var(--line);font-family:var(--display);font-size:.84rem;font-weight:600;background:var(--surface-2)}
.slot small{font-family:var(--body);font-weight:400;font-size:.75rem;color:var(--muted)}
.slot.free{cursor:pointer;background:var(--surface);border-color:var(--brass-mark);color:var(--brass)}
.slot.taken{opacity:.85}
.slot.mine{border-color:var(--ok);background:var(--ok-soft)}
.slot button{font-size:.75rem;margin-top:4px;min-height:0;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
ol.steps{padding-left:24px;margin:0 0 12px}
ol.steps li{margin-bottom:8px;font-size:.92rem}
/* a crest that shares the bar's colour gets a fine outline in the bar's text colour, only in the mode where it fades */
:root[data-theme="light"] .halo-l,:root[data-theme="dark"] .halo-d{filter:drop-shadow(0 0 1px var(--chrome-fg)) drop-shadow(0 0 .5px var(--chrome-fg))}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .halo-l{filter:drop-shadow(0 0 1px var(--chrome-fg)) drop-shadow(0 0 .5px var(--chrome-fg))} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .halo-d{filter:drop-shadow(0 0 1px var(--chrome-fg)) drop-shadow(0 0 .5px var(--chrome-fg))} }
.bar-mock .crest img.halo{filter:drop-shadow(0 0 1px var(--mock-fg)) drop-shadow(0 0 .5px var(--mock-fg))}
/* settings: small link-style buttons */
.linkish{background:none;border:0;padding:4px 0;color:var(--brass);font:inherit;font-size:.86rem;cursor:pointer;text-decoration:underline}
.sp-help{border:1px solid var(--line);background:var(--sunk);border-radius:12px;padding:16px 16px;margin-bottom:16px}
.sp-help h3{font-size:1rem;margin-bottom:4px}
.sp-help p.small{margin:0 0 8px}
.sp-have{margin:4px 0 8px}
/* club contacts: one line per person, with an Edit link; an editing row opens into its fields */
.ct-list{list-style:none;margin:0 0 12px;padding:0}
.ct-row{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) auto;gap:4px 8px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line-soft);font-size:.92rem}
.ct-row:first-child{border-top:0;padding-top:0}
.ct-row > b{font-family:var(--display);font-weight:600;font-size:.86rem}
.ct-row > span{color:var(--fg-2);min-width:0;overflow-wrap:anywhere}
.ct-row.editing{display:block;padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.ct-row.editing > b{display:block;margin-bottom:8px}
.ct-row.editing > input,.ct-row.editing .row2{margin-bottom:8px}
.ct-btns{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px}
@media (max-width:420px){ .ct-row{grid-template-columns:minmax(0,1fr) auto} .ct-row > span{grid-column:1} .ct-row > .linkish{grid-row:1;grid-column:2} }
/* settings: each passcode with what it opens and its button */
.pc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.pc-row:first-child{border-top:0;padding-top:0}
.pc-row p.small{margin:2px 0 0}
.pc-row .btn{flex:none}
@media (max-width:520px){ .pc-row{flex-direction:column;align-items:stretch} }
.doc-row .inline{margin:4px 0 8px}
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.crest-pick{margin-top:2px}
/* your plan: what each plan opens, page by page */
.plan-sum{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 12px 8px;margin-bottom:12px;overflow:hidden}
.ps-row{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr));gap:0 8px;align-items:stretch;border-top:1px solid var(--line-soft)}
.ps-row:first-child{border-top:0}
.ps-row > span{min-width:0;padding:8px 0;display:flex;flex-direction:column;justify-content:center}
.ps-head span b{display:block;font-family:var(--display);font-size:.82rem;line-height:1.2}
.ps-head span small{color:var(--muted);font-size:.75rem}
.ps-l{font-size:.86rem;font-weight:600;white-space:nowrap}
.ps-row b{font-size:.84rem;font-weight:600}
.ps-bar{display:block;height:6px;border-radius:99px;background:var(--line-soft);margin-top:4px;overflow:hidden}
.ps-bar i{display:block;height:100%;background:var(--brass-mark);border-radius:99px}
.ps-t{font-size:.76rem;line-height:1.3;color:var(--fg-2)}
.ps-row .now{background:var(--brass-soft);border-left:1px solid var(--brass-mark);border-right:1px solid var(--brass-mark);padding-left:8px;padding-right:8px}
.ps-head .now{border-top:1px solid var(--brass-mark);border-radius:8px 8px 0 0;margin-top:-1px}
.ps-last .now{border-bottom:1px solid var(--brass-mark);border-radius:0 0 8px 8px;margin-bottom:-1px}
@media (max-width:420px){ .ps-row{grid-template-columns:4.9rem repeat(3,minmax(0,1fr));gap:8px} .ps-l{font-size:.78rem} }
/* settings as a menu: the save bar sits at the foot of the screen once anything changes */
.savebar{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px -16px calc(-40px - env(safe-area-inset-bottom,0));padding:8px 16px calc(8px + env(safe-area-inset-bottom,0));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.savebar [data-msg]{font-size:.9rem;color:var(--fg-2)}
.savebar .btn{flex:none;min-width:110px}
details.more > summary .status{margin-left:8px}
.pc-sub{font-size:1rem;margin:16px 0 4px}
/* the club workbook set-up as ticked steps */
ol.steps.ticked{list-style:none;padding:0;margin:0}
ol.steps.ticked li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line-soft);margin:0}
ol.steps.ticked li:first-child{border-top:0;padding-top:0}
ol.steps.ticked li > div{flex:1 1 auto;min-width:0}
ol.steps.ticked .tick{flex:none;width:24px;height:24px;border-radius:999px;border:2px solid var(--line);display:grid;place-items:center;font-size:.8rem;margin-top:1px}
ol.steps.ticked li.done .tick{background:var(--ok);border-color:var(--ok)}
ol.steps.ticked li.done .tick::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
ol.steps.ticked li.now .tick{border-color:var(--brass-mark);box-shadow:0 0 0 3px var(--brass-soft)}
ol.steps.ticked li.miss .tick{border-color:var(--alert);background:var(--alert-soft)}
ol.steps.ticked li.miss .tick::after{content:"!";color:var(--alert);font-weight:700}
ol.steps.ticked li.todo{color:var(--muted)}
ol.steps.ticked li.done > div{color:var(--fg-2)}
ol.steps.ticked p.err{margin:8px 0 0;font-size:.86rem}
/* settings menu: each heading in the bar's colours, so one section ends where the next begins */
.menu > details.more{border:0;background:transparent;margin-bottom:8px;scroll-margin-top:12px}
.menu > details.more > summary{background:var(--chrome);color:var(--chrome-fg);border-radius:12px;padding:16px 16px}
.menu > details.more[open] > summary{border-radius:12px 12px 0 0}
.menu > details.more > summary::after{color:var(--chrome-muted)}
.menu > details.more > .in{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--surface);padding:16px 16px}
.menu > details.more > summary .status.live{background:var(--chrome-2);color:var(--chrome-fg)}
.pc-new{margin-top:16px}
.pc-new .ok{margin:0 0 8px}
.pc-code{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.pc-code small{display:block;color:var(--muted);font-size:.85rem}
.pc-code code{font-family:var(--mono);font-size:1.2rem;letter-spacing:.08em;user-select:all;white-space:nowrap}
.pc-new .btn{margin-top:8px}
/* Bring a club along: a banner in the club's chrome colours */
.ba-banner{background:var(--chrome);color:var(--chrome-fg);border:1px solid var(--chrome-line);border-radius:16px;padding:16px 16px 8px;position:relative;overflow:hidden}
.ba-banner:after{content:"";position:absolute;right:-56px;bottom:-56px;width:150px;height:150px;border-radius:50%;border:16px solid var(--chrome-accent);opacity:.14;pointer-events:none}
.ba-banner>h2{font-size:1.25rem;margin-bottom:12px;position:relative;color:var(--chrome-fg);text-transform:none;letter-spacing:-.01em}
.ba-row{display:flex;align-items:center;gap:12px;padding:8px 0;position:relative}
.ba-row+.ba-row{border-top:1px solid var(--chrome-line)}
.ba-num{flex:0 0 44px;height:44px;border-radius:50%;background:var(--chrome-accent);color:var(--chrome);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1}
.ba-row em i{font-style:normal}
.ba-row>span:last-child{font-weight:600;line-height:1.3}
.ba-row em{font-style:normal;color:var(--chrome-link);display:block;font-family:var(--display);font-weight:700;font-size:1.1rem}
.ba-banner>details.more{margin:8px -8px 0;background:transparent;border:0;position:relative}
.ba-banner>details.more>summary{color:var(--chrome-link)}
.ba-banner>details.more>.in{background:var(--surface);color:var(--fg);border-radius:12px;margin:0 8px 8px;padding:16px;position:relative;z-index:1}
.pc-player{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pc-boxes{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
@media (min-width:700px){ .pc-boxes{grid-template-columns:1fr 1fr} }
.pc-box{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 16px;background:var(--surface-2)}
.pc-box b{font-size:.92rem}
.pc-box .btn{flex:none;min-height:38px;padding:8px 16px}
.pc-box.pc-all{grid-column:1/-1;border-color:var(--fg-2)}

/* each Welfare Sponsor in Club settings, one after another like the club contacts (dim, 24 Oct 2026) */
.sp-one + .sp-one{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.sp-one .k .linkish{margin-left:8px}
[data-add-sponsor]{margin-top:16px}

/* the FAQ page: answers with points, and room around Email us (dim, 24 Oct 2026) */
.faq-pts{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:8px}
.faq-pts + p{margin-top:8px}
p + .faq-pts{margin-top:8px}
.faq-mail{margin-top:16px}
/* Welfare Sponsor on one screen (dim, 25 Oct 2026) */
.sp-help{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;margin-bottom:12px}
.sp-help p.small{margin:0}
.sp-help .btn{flex:none;min-height:40px;padding:8px 12px;white-space:nowrap}
@media (max-width:520px){ .sp-help{flex-direction:column;align-items:stretch} .sp-help .btn{width:100%} }
.sp-one .field{margin-bottom:8px}
.sp-logo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-logo .btn{min-height:40px;padding:8px 16px;cursor:pointer}
[data-add-sponsor]{margin-top:16px}
.sp-note{margin-top:16px}
/* Round 1 checklist: each step on one line with its date box at the right, inside the section */
/* Round 1 checklist: a numbered step, its line, then Book with Dim and Add the date side by side; a dated step shows a tick */
.r1-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:16px 0;border-top:1px solid var(--line-soft)}
.r1-row:first-of-type{border-top:0;padding-top:4px}
.r1-n{width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-weight:700;font-size:.9rem;opacity:.75}
.r1-row.done .r1-n{background:var(--ok,#2e7d4f);border-color:transparent;color:#fff;opacity:1}
.r1-txt b{display:block;line-height:30px}
.r1-txt small{display:block;color:var(--muted);font-size:.9rem;line-height:1.4}
.r1-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.r1-act .btn{margin:0;padding:8px 16px;min-height:0}
.r1-add{font-weight:600;font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.r1-pick{position:relative;display:inline-block;cursor:pointer}
.r1-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;margin:0;min-height:0}
/* Your plan: the club's own plan name in an inverted chip on its dark bar */
.prow.mine .prow-name{align-self:flex-start;background:var(--chrome-fg);color:var(--chrome);border-radius:999px;padding:3px 12px;font-family:var(--display)}
.sp-one .row2{gap:0 12px}
@media (max-width:640px){ .sp-one .row2 .field{margin-bottom:8px} }
.menu .in p.sp-note{margin-top:16px}
.menu .in details.more.fx-key{margin:16px 0 0}
.menu .in details.more.wl-hand{margin:16px 0 0}

/* a new club's first three jobs on the welcome page (harsh sweep, dim, 26 Oct 2026) */
.lb-setup{margin:16px 0 16px;padding:16px 16px}
.lb-setup .k{margin:0 0 4px}
.lb-setup-t{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:8px}
.lb-steps{display:grid;gap:8px}
.lb-step{display:flex;gap:8px;align-items:flex-start;text-decoration:none;color:inherit;background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer;width:100%}
.lb-step.done{color:var(--muted);cursor:default}
.lb-step small{display:block;color:var(--muted);font-size:.86rem;line-height:1.35}
.lb-tick,.lb-ring{flex:none;width:22px;height:22px;border-radius:50%;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.lb-tick{background:var(--ok);color:#fff}
.lb-ring{border:2px solid var(--line)}
.lb-setup .hint{margin:12px 0 0}
/* thin text links get a thumb-sized target without moving (harsh sweep, dim, 26 Oct 2026) */
.foot a,.hint a,.lb-alt a,.role-now a,.note a{display:inline-block;padding:8px 2px;margin:-8px -2px}
/* a committee page with no check-ins yet: share the players code first (dim, 26 Oct 2026) */
.cm-start .k{margin:0 0 4px}
.cm-start .btn{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px}
.cm-start .btn svg{width:18px;height:18px}
/* the staff pages by role: a home for the coach, the team manager, the physio and events (staffhome.js, dim 28 Oct 2026). Plain colours, no tints */
.sh-home .ti,.sh-one .ti,.sh-sheet .ti,[data-sh-body] .ti,[data-sh-ev] .ti{width:18px;height:18px;flex:none}
.sh-who{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 12px;font-size:.9rem;color:var(--muted)}
.sh-who b{color:var(--fg);font-family:var(--display)}
.sh-who a{font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--fg);padding:8px 2px;margin:-8px -2px}
.sh-h{font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:1.02rem;margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
.sh-h.first{border-top:0;padding-top:4px;margin-top:8px}
.sh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.sh-stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px;min-width:0}
.sh-stat .k{font-size:.75rem;display:block}
.sh-stat b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1.1;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-stat .s{display:block;font-size:.75rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-f5{display:flex;gap:3px;margin:8px 0 8px}
.sh-f5 i{font-style:normal;flex:1;height:24px;border-radius:5px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.75rem;border:1px dashed var(--line)}
.sh-f5 i.w,.sh-wl i.w{background:var(--ok);color:#fff;border:0}.sh-f5 i.l,.sh-wl i.l{background:var(--alert);color:#fff;border:0}.sh-f5 i.d,.sh-wl i.d{background:var(--muted);color:#fff;border:0}
.sh-hero{background:var(--fg);color:var(--paper);border-radius:18px;padding:16px 16px 16px;margin:8px 0 12px}
.sh-hero .k{color:var(--paper);opacity:.75}
.sh-hero .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sh-hero h3{font-family:var(--display);font-size:1.35rem;line-height:1.2;margin:8px 0 4px;color:var(--paper)}
.sh-hero p{margin:0;opacity:.85;font-size:.92rem}
.sh-count{font-family:var(--display);font-weight:800;font-size:.78rem;background:var(--paper);color:var(--fg);border-radius:99px;padding:4px 8px;white-space:nowrap}
.sh-acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:8px;margin-top:16px}   /* two or three buttons, always the same size (dim, 28 Oct 2026) */
.sh-acts a{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 8px;min-height:44px;text-align:center;line-height:1.2;font-family:var(--display);font-weight:700;font-size:.86rem;border:1px solid rgba(255,255,255,.3);color:var(--paper);text-decoration:none}
.sh-acts a,.sh-acts a.main{background:var(--paper);color:var(--fg);border-color:var(--paper)}   /* every banner button inverted on the dark banner (dim, 28 Oct 2026) */
.sh-acts .ti{width:17px;height:17px;flex:none}
.sh-rows .ti,.sh-link .ti,.sh-sel .ti{width:18px;height:18px}
.sh-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line-soft);color:var(--fg);text-decoration:none;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;text-align:left;cursor:pointer}
.sh-rows > :first-child{border-top:0}
.sh-row .ic{width:36px;height:36px;border-radius:10px;background:var(--sunk);display:grid;place-items:center;flex:none}
.sh-row .t,.sh-day .t,.sh-res .t,.sh-fx .t,.sh-need .t,.sh-ev .t{flex:1;min-width:0}
.sh-row .t b,.sh-day .t b,.sh-need .t b{display:block;font-family:var(--display);font-size:.96rem}
.sh-row .t small,.sh-day .t small,.sh-need .t small,.sh-res .t small,.sh-fx .t small,.sh-ev .t small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.sh-row .go{color:var(--muted);flex:none}
.sh-day{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-soft)}
.sh-day .d{width:40px;flex:none;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sh-day.done .t b{color:var(--muted)}
.sh-day .v{font-family:var(--display);font-weight:800;font-size:1.05rem;text-align:right;white-space:nowrap}.sh-day .v small{display:block;font-family:var(--body);font-weight:400;font-size:.75rem;color:var(--muted)}
.sh-tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--ok);color:#fff}
.sh-tick .ti{width:15px;height:15px}
.sh-pill{font-family:var(--display);font-weight:700;font-size:.75rem;border-radius:99px;padding:3px 8px;white-space:nowrap;flex:none;border:1px solid var(--line);color:var(--muted)}
.sh-pill.bad{border-color:var(--alert);color:var(--alert)}.sh-pill.info{border-color:var(--fg);color:var(--fg)}
.sh-res,.sh-fx{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.sh-res .t b,.sh-fx .t b{display:block;font-family:var(--display);font-size:.92rem}
.sh-res .sc{font-family:var(--mono);font-size:.78rem;text-align:right;white-space:nowrap}
.sh-wl i{font-style:normal;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.75rem}
.sh-fx .r{width:34px;flex:none;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.sh-link{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;font-size:.9rem;padding:12px;border-top:1px solid var(--line-soft);color:var(--fg);text-decoration:none;cursor:pointer;list-style:none}
.sh-link::-webkit-details-marker{display:none}
.sh-all[open] > .sh-link{display:none}
.sh-ladder{width:100%;border-collapse:collapse;font-size:.86rem}
.sh-ladder th{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;text-align:right;padding:8px 8px 8px}
.sh-ladder th:nth-child(2){text-align:left}
.sh-ladder td{padding:8px;border-top:1px solid var(--line-soft);text-align:right}
.sh-ladder td:nth-child(1){width:22px;color:var(--muted);text-align:left;padding-left:16px}
.sh-ladder td:nth-child(2){text-align:left;font-family:var(--display);font-weight:600}
.sh-ladder td:last-child{padding-right:16px}
.sh-ladder tr.us td{background:var(--sunk);font-weight:800}
.sh-need{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line-soft)}
.sh-need.bad{box-shadow:inset 4px 0 0 var(--alert)}.sh-need.ok{box-shadow:inset 4px 0 0 var(--ok)}
.sh-need .sh-ask{margin-top:8px;min-height:42px;font-size:.88rem;padding:8px 16px}
.sh-need .sh-ask .ti{width:16px;height:16px}
.sh-need small.sh-askn{margin-top:8px}
.sh-pills{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px;scrollbar-width:none}
.sh-pills::-webkit-scrollbar{display:none}
.sh-pills button{flex:none;padding:8px 16px;min-height:40px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-family:var(--display);font-weight:600;font-size:.88rem;cursor:pointer}
.sh-pills button[aria-pressed="true"]{background:var(--brass-mark);border-color:var(--brass-mark);color:var(--on-brass)}
.sh-pills .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--alert);margin-left:8px;vertical-align:middle}
.sh-slot{display:flex;align-items:center;gap:12px;padding:8px 16px;border-top:1px solid var(--line-soft);font-size:.92rem}
.sh-slot .tm,.sh-in .tm{width:58px;flex:none;font-family:var(--mono);font-size:.8rem}
.sh-slot .n{flex:1;font-family:var(--display);font-weight:600}
.sh-slot .n.free{font-family:var(--body);font-weight:400;color:var(--muted)}
.sh-ev{display:flex;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-soft);color:var(--fg);text-decoration:none}
.sh-ev .d{width:48px;flex:none;text-align:center;border-radius:12px;padding:8px 0;background:var(--sunk)}
.sh-ev .d b{display:block;font-family:var(--display);font-size:1.2rem;line-height:1.1}.sh-ev .d small{font-size:.75rem;color:var(--muted);text-transform:uppercase}
.sh-ev .t b{display:block;font-family:var(--display);font-size:1rem}
.sh-ev .go{color:var(--muted)}
.sh-more{margin-top:16px}
.sh-legal{color:var(--muted);font-size:.8rem;text-align:center;margin:16px 0 0}
.sh-del{color:var(--alert)}
.sh-key{display:inline-block;width:12px;height:12px;border:2px solid var(--ok);border-radius:3px;margin-right:8px;vertical-align:-1px}
/* first open and the two step forms */
main.sh-one{padding-bottom:112px}
.sh-title{font-size:1.45rem;margin:4px 0 2px}
.sh-lede{color:var(--muted);margin:0 0 12px}
.sh-note,.sh-hint{color:var(--muted);font-size:.86rem;margin:8px 0 0}
.sh-back{display:inline-block;font-family:var(--display);font-weight:700;font-size:.92rem;margin:0 0 8px;padding:8px 0;background:none;border:0;color:var(--fg);cursor:pointer}
.sh-roles{display:grid;gap:8px}
.sh-role{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;color:var(--fg);font:inherit;text-align:left;cursor:pointer;width:100%}
.sh-role .ic{width:36px;height:36px;border-radius:12px;background:var(--sunk);display:grid;place-items:center;flex:none}
.sh-role .ti{width:21px;height:21px}
.sh-role .t{flex:1}.sh-role b{display:block;font-family:var(--display);font-size:1rem}.sh-role small{color:var(--muted);font-size:.8rem}
.sh-role[aria-checked="true"]{border:2px solid var(--fg);padding:8px 12px}
.sh-role .rd{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none}
.sh-role[aria-checked="true"] .rd{border:7px solid var(--fg)}
.sh-sel{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin-top:12px;width:100%;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.sh-sel .t{flex:1;min-width:0}.sh-sel small{display:block;color:var(--muted);font-size:.78rem}.sh-sel b{display:block;font-family:var(--display);font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-go{margin-top:16px}
.sh-go small{display:block;text-align:center;color:var(--muted);font-size:.78rem;margin-top:8px}
.app:not(.tabbed) main.sh-one .sh-go{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0));background:var(--paper);border-top:1px solid var(--line);z-index:5}
@media (min-width:900px){ .app:not(.tabbed) main.sh-one .sh-go{position:static;padding:0;border:0;background:none;margin-top:16px} main.sh-one{padding-bottom:24px} }
.sh-q{font-family:var(--display);font-weight:800;font-size:1rem;margin:16px 0 8px}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px}
.sh-chips button,.sh-chipdate{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;min-height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-family:var(--display);font-weight:700;font-size:.86rem;cursor:pointer;position:relative}
.sh-chips button[aria-pressed="true"],.sh-chipdate.on{background:var(--brass-mark);border-color:var(--brass-mark);color:var(--on-brass)}
.sh-chipdate .ti{width:15px;height:15px}
.sh-chipdate input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.sh-time{display:flex;align-items:center;gap:8px}
.sh-time label{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 16px}
.sh-time small,.sh-field small{display:block;color:var(--muted);font-size:.75rem}
.sh-time input,.sh-field input,.sh-field textarea{display:block;width:100%;border:0;background:none;padding:2px 0;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--fg);min-height:30px}
.sh-field textarea{font-family:var(--body);font-weight:400;font-size:.95rem;resize:vertical}
.sh-time i{font-style:normal;color:var(--muted)}
.sh-field{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 16px;margin:0 0 8px}
.sh-in{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line-soft)}
.sh-in input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 8px;font:inherit;font-size:.9rem;background:var(--paper);color:var(--fg)}
.sh-in input.pl{border:2px solid var(--ok)}
.sh-in.two input{flex:1.2}.sh-in.two input.note{flex:1;font-size:.84rem}
/* the slide up list */
.sh-veil{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.sh-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--paper);color:var(--fg);border-radius:20px 20px 0 0;padding:8px 0 calc(16px + env(safe-area-inset-bottom,0));max-height:85vh;overflow:auto;max-width:560px;margin:0 auto}
.sh-sheet .grab{display:block;width:40px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 8px}
/* in a web browser a sheet is a box in the middle of the page, not a strip up from the bottom (dim, 4 Nov 2026); a phone keeps its sheet */
@media (min-width:641px){
.sh-sheet{top:50%;bottom:auto;left:50%;right:auto;width:calc(100% - 48px);transform:translate(-50%,-50%);border-radius:20px;padding:16px 0;max-height:min(80vh,720px);box-shadow:0 12px 40px rgba(0,0,0,.28)}
.sh-sheet .grab{display:none}
.sh-sheet .h{padding-top:0}
}
@media (min-width:901px){.pv .sh-sheet{left:calc(50% + 123px)}}
.sh-sheet .h{display:block;font-family:var(--display);font-size:1.1rem;padding:0 16px 8px}
.sh-sheet .btn.block{margin:12px 16px 0;width:calc(100% - 32px)}
.sh-sheet .field,.sh-sheet .sh-chips{margin:8px 16px 0}
.sh-sheet .sh-sp{margin:0;padding:0 16px 8px;color:var(--muted);font-size:.88rem}
.sh-sheet p[data-sh-latemsg]{margin:8px 16px 0}
.sh-ck label{display:flex;align-items:center;gap:16px;padding:12px 16px;border-top:1px solid var(--line-soft);cursor:pointer;font-family:var(--display);font-weight:600;font-size:1rem}
.sh-ck label:first-child{border-top:0}
.sh-ck input{position:absolute;opacity:0;width:1px;height:1px}
.sh-ck .bx{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:transparent}
.sh-ck input[type=radio] + .bx{border-radius:50%}
.sh-ck input:checked + .bx{background:var(--fg);border-color:var(--fg);color:var(--paper)}
.sh-ck input:focus-visible + .bx{outline:2px solid var(--fg);outline-offset:2px}
.sh-ck .bx .ti{width:15px;height:15px}
/* room between each title and its box, and between one box and the next title (dim, 28 Oct 2026) */
.pv .app.room main .sh-h{margin:24px 0 12px;padding-top:0;border-top:0;font-size:1.02rem;line-height:1.2}
.pv .app.room main .sh-h.first{margin-top:24px}
.sh-home .card{margin-bottom:0}
.sh-home .sh-hero + .sh-h,.sh-home p[data-sh-msg] + .sh-h{margin-top:24px}
.pv .sh-home .sh-more{margin-top:32px}
.pv .sh-home .sh-legal{margin-top:16px}
.sh-sheet .btn.sh-slim{display:flex;width:auto;min-height:42px;padding:8px 16px;margin:12px 16px 0;border-radius:12px;font-size:.9rem;font-weight:700}
.sh-sheet .btn.sh-slim .ti{width:16px;height:16px}
/* who this phone is, on the line beside Back; the team manager's tiles under the game (dim, 28 Oct 2026) */
.pv p.k.sh-k .kb-t{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.pv p.k.sh-k .w{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv .sh-chg{flex:none;font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--fg);text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 12px;margin:-8px 0}
.pv .sh-home > p.k.sh-k{margin:0 0 8px}
.pv .app.room main .sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.pv .app.room main .sh-head .sh-chg{margin:0}
.pv .sh-chg.ic{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.pv .sh-chg.ic svg{width:18px;height:18px}
.sr-warn{margin:16px 0 0;padding:12px 16px;border:1px solid var(--brass-mark);border-radius:10px;background:var(--surface);color:var(--fg-2);font-size:.86rem}   /* one full line in the club colour, like the support network note (dim, 4 Nov 2026) */
.sr-warn b{color:var(--fg)}
.sr-warn.sh-note{text-align:center}.sr-warn.sh-note p{margin:0}.sr-warn.sh-note p + p{margin-top:4px}
.sh-link.sec{color:var(--brass)}
.pv .app.room main .sh-big{margin:0;font-size:1.75rem;line-height:1.15;min-width:0}
.pv .app.room main .sh-big .sh-of{text-transform:none;font-weight:600}
.pv .app.room main .sh-big .sh-of::before{content:" · "}
.pv .app.room main .card.sh-gap{margin-top:24px}
/* a box inside a white card sits on the sunk tone, never white on white (dim, 28 Oct 2026) */
.pv .card .sh-time label,.pv .card .sh-field,.pv .card .sh-pills button,.pv .card .sh-chips button,.pv .card .sh-sel,.pv .card .sh-chipdate,.pv .sh-sheet .sh-chips button{background:var(--surface-2);border-color:var(--line)}
.pv .card .sh-in input,.pv .sh-sheet .field input,.pv .sh-sheet textarea{background:var(--surface-2);border-color:var(--line)}
.pv .card .sh-pills button[aria-pressed="true"],.pv .card .sh-chips button[aria-pressed="true"]{background:var(--brass-mark);color:var(--on-brass);border-color:var(--brass-mark)}
.pv .vol-pills{margin:0 0 16px}
.pv .ts-coach .sq-teams{height:auto;max-height:none}
.pv .ts-one{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:1.05rem}
.pv .app.room main .vol-h{margin:24px 0 8px;font-size:1.05rem}
.pv .app.room main .vol-h:first-child,.pv .app.room main .field + .vol-h{margin-top:8px}
.pv .app.room main .vol-h .muted{font-weight:500}
.pv .vol-game .vol-role:first-child{border-top:0;margin-top:0;padding-top:0}
.sh-tiles{display:grid;gap:8px;margin:0 0 8px}
.sh-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 4px 8px;text-align:center;color:var(--fg);text-decoration:none;min-width:0}
.sh-home .sh-t .ti{width:22px;height:22px}
.sh-t b{font-family:var(--display);font-size:.86rem;line-height:1.15}
.sh-t small{font-size:.75rem;color:var(--muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sh-t .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--alert)}
/* staff forms and homes keep the six spacing sizes at the top of this file: 8 from a label to its box, 24 between groups */
.pv .app.room main.sh-one .k,.pv .app.room main [data-sh-body] > .k{display:block;margin:0 0 8px}
.pv .app.room main .sh-title{margin:0 0 8px;font-size:1.45rem}
.pv .app.room main .sh-lede{margin:0 0 24px}
.pv .app.room main .sh-q{margin:24px 0 8px}
.pv .app.room main .sh-q:first-child{margin-top:0}
.pv .app.room main .sh-hint,.pv .app.room main .sh-note{margin:8px 0 0}
.pv .app.room main .sh-chips{gap:8px}
.pv .app.room main .sh-field{margin:0 0 8px}
.pv .app.room main .sh-time{margin:0 0 8px}
.pv .app.room main .sh-sel{margin:0}
.pv .app.room main .sh-roles{margin:24px 0 0}
.pv .app.room main .sh-roles + .sh-sel{margin-top:8px}
.pv .app.room main main.sh-one .card.flush{margin:0}
.pv .app.room main.sh-one p[data-sh-msg]{margin:8px 0 0}
.pv .app.room main.sh-one p[data-sh-msg]:empty{display:none}
.pv .app.room main .sh-go{margin-top:24px}
.pv .app.room main .sh-go small{margin-top:8px}
.pv .app.room main .sh-legal{margin:24px 0 0}
.pv .app.room main.sh-one .sh-legal{margin-top:16px}
.pv .app.room main p.ok{margin:8px 0 0}
.pv .app.room main .sh-chips + .sh-field,.pv .app.room main .sh-chips + .sh-sel{margin-top:8px}
/* a date box: muted dd/mm/yyyy until it is filled; the real input sits on top, see through (dim, 28 Oct 2026) */
.dp{position:relative;display:block;width:100%}
.dp .dp-t{display:flex;align-items:center;width:100%;min-height:46px;padding:12px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font:inherit}
.dp.set .dp-t{color:var(--fg)}
.dp input{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;margin:0;cursor:pointer}
.sh-field .dp .dp-t{border:0;background:none;padding:2px 0;min-height:30px;font-family:var(--display);font-weight:700;font-size:1.1rem}
.pv .ts-when .dp{flex:1;min-width:150px;width:auto}
.pv .ts-when .dp .dp-t{min-height:40px;padding:8px 8px;font-size:.88rem}
/* the physio's day and slot pills wrap onto more lines inside their card */
.sh-pills.many{flex-wrap:wrap;overflow:visible;margin:0}
/* the physio room: a day strip, the slot grid, the opened slot (dim picked F, 29 Oct 2026) */
.sh-strip{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.sh-strip::-webkit-scrollbar{display:none}
.sh-strip button{flex:0 0 calc((100% - 30px) / 7);scroll-snap-align:start;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:12px;padding:8px 0 8px;font-family:var(--display);font-weight:600;font-size:.75rem;line-height:1.15;text-align:center;cursor:pointer}
.sh-strip button b{display:block;font-size:1rem;font-weight:700}
.sh-strip button[aria-pressed="true"]{background:var(--brass-mark);color:var(--on-brass);border-color:var(--brass-mark)}
.sh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sh-grid button{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);border-radius:9px;padding:8px 3px;min-height:44px;font-family:var(--mono);font-size:.76rem;line-height:1.2;cursor:pointer;min-width:0;text-align:center}
.sh-grid button small{display:block;font-family:var(--body);font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-grid button.me{background:var(--surface);border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg);font-weight:700}
.sh-grid button.pl{background:var(--surface);border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok);color:var(--ok);font-weight:700}
.sh-grid button.blk{color:var(--muted);text-decoration:line-through;background:var(--sunk)}
.sh-grid button.blk small{text-decoration:none}
.sh-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0 0;font-size:.76rem;color:var(--muted)}
.sh-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid var(--line);background:var(--surface-2);vertical-align:-1px;margin-right:4px}
.sh-legend i.pl{border-color:var(--ok);background:var(--surface)}
.sh-legend i.me{border-color:var(--fg);background:var(--surface)}
.sh-legend i.blk{background:var(--line)}
.pv .app.room main .sh-hint{margin:8px 0 0;color:var(--muted);font-size:.84rem}
.sh-open{margin-top:8px}
.sh-open .k{display:block;margin:0 0 8px}
.sh-openacts{margin:4px 0 0;font-size:.86rem;color:var(--muted)}
.sh-slot .n.blk{font-family:var(--body);font-weight:400;color:var(--muted);text-decoration:line-through}
.sh-slot .tag{flex:none;font-family:var(--display);font-weight:700;font-size:.75rem;color:var(--muted)}
.sh-slot .tag.ok{color:var(--ok)}
.pv .app.room main .sh-strip,.pv .app.room main .sh-pills.many{margin:0}
.sh-pills.many .sh-chipdate{border-radius:99px;min-height:40px;padding:8px 16px;font-weight:600;font-size:.88rem}
.pv .app.room main .card .sh-q{margin-top:16px}
.pv .app.room main .card > .sh-time{margin:0}
.pv .sh-pills.many button,.pv .sh-pills.many .sh-chipdate{width:auto;flex:0 0 auto}

/* Flag a teammate: the name is optional, so its label is quiet (dim, 28 Oct 2026) */
.fl-opt label{color:var(--muted);font-weight:500;font-family:var(--body)}
.fl-opt input::placeholder{color:var(--muted);opacity:.85}

/* Bring a club along on the committee page (dim picked mock A, 28 Oct 2026) */
.bk-card{display:flex;flex-direction:column;gap:8px}
.bk-card+.bk-card{margin-top:16px}
.bk-card .k{margin:0}
.bk-big{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1.05;margin:2px 0 0}
.bk-big small{font-size:.95rem;font-weight:600;color:var(--muted)}
.bk-track{position:relative;height:10px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);margin:24px 12px 32px 4px}
.bk-track>i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--brass-mark)}
.bk-stop{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:.75rem;font-weight:800;color:var(--fg)}
.bk-stop.on{background:var(--fg);border-color:var(--fg);color:var(--surface)}
.bk-stop b{position:absolute;top:28px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.75rem;font-weight:700;color:var(--muted)}
.bk-stop.end b{left:auto;right:-6px;transform:none}
.bk-clubs{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px}
.bk-clubs li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.92rem;min-width:0}
.bk-pill{font-family:var(--display);font-size:.75rem;font-weight:700;border-radius:99px;padding:3px 8px;white-space:nowrap;flex:none}
.bk-pill.ok{background:var(--good-soft);color:var(--good)}
.bk-pill.wait{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.bk-link{display:block;box-sizing:border-box;margin:4px 0 12px;width:100%;font-family:var(--display);font-weight:700;font-size:.8rem;text-overflow:ellipsis;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:8px 12px;color:var(--fg)}
#bring>details.more{margin-top:16px}

/* the welfare manager's room, option A (dim, 28 Oct 2026): one page with five panels under the bottom tabs, Needs you
   first, the room in six tiles. The six spacing sizes throughout: 24 above a heading, 12 to its box, 24 between groups,
   12 between two boxes of one group. Icons plain, never tinted or boxed. */
.wa-loading,.wa-room .card.flush > p.muted{margin:0;padding:16px 16px}
.wa-rows .ic{width:24px;height:24px;border-radius:0;background:none}
.wa-rows .ti{width:22px;height:22px}
.wa-rows .go{display:flex;color:var(--muted)}
.wa-rows .go .ti{width:18px;height:18px}
.wa-rows .no{font-family:var(--mono);font-size:.8rem;color:var(--muted);width:24px;flex:none}
.wa-rows .v{font-family:var(--display);font-weight:800;font-size:1.05rem;white-space:nowrap}
.wa-rows .num{flex:none;font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg);text-decoration:none;white-space:nowrap}
.wa-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wa-tile{position:relative;display:flex;flex-direction:column;gap:4px;min-height:96px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px;color:var(--fg);text-decoration:none}
.wa-tile .ti{width:22px;height:22px}
.wa-tile b{font-family:var(--display);font-size:.98rem;margin-top:4px}
.wa-tile small{color:var(--muted);font-size:.78rem;line-height:1.3}
.wa-tile[data-dot]::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--alert)}
.wa-need{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-soft);color:var(--fg);text-decoration:none;box-shadow:inset 4px 0 0 var(--line)}
.wa-need:first-child{border-top:0}
.wa-need .t{flex:1;min-width:0}
.wa-need .t b{display:block;font-family:var(--display);font-size:.95rem}
.wa-need .t small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3;margin-top:1px}
.wa-need.bad{box-shadow:inset 4px 0 0 var(--alert)}
.wa-need.ok{box-shadow:inset 4px 0 0 var(--ok)}
.wa-need .btn,.wa-sv .a .btn{flex:none;min-height:0;padding:8px 12px;font-size:.8rem;border-radius:99px}
.wa-late{display:block;margin-top:4px;font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--alert)}
.wa-calm{display:flex;gap:12px;align-items:flex-start;padding:16px 16px}
.wa-calm .ti{width:22px;height:22px;flex:none;color:var(--ok)}
.wa-calm b{display:block;font-family:var(--display)}
.wa-calm small{display:block;color:var(--muted);font-size:.84rem}
.wa-log{display:flex;width:100%;gap:8px;border-radius:14px;padding:16px;font-size:1rem}
.wa-log .ti{width:19px;height:19px}
.wa-log[aria-disabled]{opacity:.55;pointer-events:none}
.wa-log-note{color:var(--muted);font-size:.84rem}
.wa-priv{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:.82rem;line-height:1.4}
.wa-priv .ti{width:18px;height:18px;flex:none;margin-top:1px}
.wa-stats{grid-template-columns:1fr 1fr}
.wa-prog span{font-size:.9rem}
.wa-prog b{font-family:var(--display)}
.wa-bar{position:relative;height:8px;border-radius:99px;background:var(--sunk);overflow:hidden;margin:8px 0 0}
.wa-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--fg)}
.wa-ck label{align-items:flex-start}
.wa-ck .bx{margin-top:2px}
.wa-ck .t{flex:1;min-width:0}
.wa-ck .t b{display:block}
.wa-ck .t small{display:block;color:var(--muted);font-size:.82rem;font-family:var(--body);font-weight:400;line-height:1.3}
.wa-sv,.wa-add{padding:16px 16px;border-top:1px solid var(--line-soft)}
.wa-sv:first-child,.wa-add:first-child{border-top:0}
.wa-sv b,.wa-add b{display:block;font-family:var(--display);font-size:.98rem}
.wa-sv small,.wa-add small{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}
.wa-sv .a{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.wa-sv .a .pill{order:1;margin:0 auto 0 0}
.wa-sv .a a.btn{order:2}
.wa-sv .a [data-post]{order:3}
.wa-add .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.wa-add .no{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--muted)}
.wa-add.sent b,.wa-add.sent small{color:var(--muted)}
.wa-add .btn{min-height:0;padding:8px 16px;font-size:.84rem;margin-top:8px}
.wa-add .btn[disabled]{opacity:1;color:var(--muted)}
.pv .app.room main .wa-room .card,.pv .app.room main .wa-tiles{margin:0}
.pv .app.room main .sh-lede + .sh-h.first{margin-top:0}
.pv .app.room main [data-wm-panel] > .sh-h.first{margin-top:24px}
.pv .app.room main [data-wm-panel] > .sh-title + .sh-lede + .sh-h.first{margin-top:0}
.pv .app.room main .wa-log{margin:8px 0 0}
.pv .app.room main .card .wa-log{margin-top:12px}
.pv .app.room main .wa-log-note{margin:8px 0 0}
.pv .app.room main .wa-priv,.pv .app.room main [data-wm-panel] > .sh-note{margin:24px 0 0}
.pv .app.room main .wa-gap{margin-top:8px}
.pv .app.room main .wa-stats{margin:0}
.pv .app.room main .wa-fill{margin:0 0 16px}
.pv .app.room main [data-details] .card{margin:0}
.pv .app.room main [data-details] p[data-msg]{margin:8px 0 0}
.pv .app.room main [data-details] p[data-msg]:empty{display:none}
/* club settings as one list (dim picked mock A, 28 Oct 2026): Get set up card, then plain rows; a row opens its section as a page */
.st-top{margin:0 0 4px}
.st-chip{display:inline-block;background:var(--brass);color:var(--on-brass);border-radius:999px;padding:1px 8px;font-family:var(--display);font-weight:700;font-size:.78rem}
.st-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.st-card .st-n{display:block;font-family:var(--display);font-size:1.02rem}
.st-card > p{margin:2px 0 0}
.st-prog{height:8px;border-radius:99px;background:var(--sunk);margin:16px 0 4px;overflow:hidden}
.st-prog i{display:block;height:100%;background:var(--brass)}
.st-steps{list-style:none;margin:8px 0 0;padding:0}
.st-steps li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line-soft);min-height:48px}
.st-steps li:first-child{border-top:0}
.st-steps .tk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:.75rem;font-weight:800}
.st-steps .done .tk{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.st-steps .done > span:not(.tk){color:var(--muted);text-decoration:line-through}
.st-steps .next > span:not(.tk){font-weight:700}
.st-steps .btn{margin-left:auto;flex:none}
.st-list{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.st-row{display:flex;align-items:center;gap:12px;padding:16px;min-height:56px;border-top:1px solid var(--line-soft);color:var(--fg);text-decoration:none}
.st-row:first-child{border-top:0}
.st-row .ic{width:22px;height:22px;flex:none;color:var(--fg-2)}
.st-row .ic svg{width:22px;height:22px;display:block}
.st-row b{flex:1 0 auto;font-family:var(--display);font-weight:600;font-size:.95rem}
.st-row .v{flex:0 1 auto;color:var(--muted);font-size:.86rem;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-row .v.todo{color:var(--fg);font-weight:700}
.st-row .ch{width:18px;height:18px;flex:none;color:var(--muted)}
.st-row .ch svg{width:18px;height:18px;display:block}
.st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}
.st-paged > details.more:not(.st-on){display:none}
.st-paged > details.more.st-on > summary{background:none;color:var(--fg);padding:4px 0 16px;min-height:0;font-size:1.3rem;font-weight:800;cursor:default;justify-content:flex-start;border-radius:0}
.st-paged > details.more.st-on > summary::after{display:none}
.st-paged > details.more.st-on > .in{border-top:1px solid var(--line);border-radius:12px}
.st-paged > details.more.st-on > summary .status.live{background:var(--sunk);color:var(--fg)}
.st-steps .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pv .app.room .st-top + section.block{border-top:0;padding-top:16px}
.st-paged > p.notice{margin-top:16px}
/* notes on the settings pages: one line in the club's second colour, no fill (dim, 3 Nov 2026) */
.pv .app.room .st-paged .notice,.pv .app .st-paged .notice{background:transparent;border:1px solid var(--brass-mark);border-left:1px solid var(--brass-mark);border-radius:10px;color:var(--fg-2)}
.st-paged .notice b{color:var(--fg)}
.st-paged .savebar [data-msg].muted{color:var(--muted)}
.pc-acts{display:flex;gap:8px;flex:none}
.pc-box .btn.pc-mail{padding:8px 12px}
.pc-mail svg{width:20px;height:20px;display:block}

/* New session, as the board lays it out (dim, 29 Oct 2026): plain sentence case titles, 22 above and 10 to the box, the time boxes bare */
.pv .app.room main .sh-h.lab{text-transform:none;letter-spacing:0;border-top:0;padding-top:0;margin:8px 0 -4px;font-size:1.02rem;font-weight:700}
.pv .app.room main .sh-h.lab.first{margin-top:4px}
.pv .app.room main .sh-time.bare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.pv .app.room main .sh-time.bare label{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.pv .app.room main .sh-grid + .sh-legend{margin-top:16px}

/* Volunteers, A next game first (dim, 29 Oct 2026): a row per spot, Needed in red, a tick when taken; the other games one line each */
.vol-spot.on{background:var(--surface-2)}
.vol-tag{flex:none;font-family:var(--display);font-weight:700;font-size:.78rem}
.vol-tag.need{color:var(--alert);border:1px solid var(--alert);border-radius:99px;padding:3px 8px}
.vol-tag.ok{color:var(--ok);font-size:1rem}
.vol-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;border-top:1px solid var(--line-soft)}
.vol-foot .vol-ask{min-height:40px;padding:8px 16px;font-size:.86rem;background:var(--fg);color:var(--paper);border-color:var(--fg)}
.pv .app.room main .vol-askmsg{margin:0;padding:0 16px 12px;font-size:.86rem}
.vol-open{padding:12px 16px 16px;border-top:1px solid var(--line-soft);background:var(--surface-2)}
.vol-open .field{margin:0 0 8px}
.vol-openacts{display:flex;align-items:center;gap:8px}
.vol-openacts .btn{min-height:42px;padding:8px 16px}
.vol-g .r{width:34px;flex:none;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.vol-g .t b{display:block;font-family:var(--display);font-size:.96rem}
.vol-g .t small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.vol-c{flex:none;font-family:var(--display);font-weight:700;font-size:.8rem}
.vol-c.short{color:var(--alert)}.vol-c.full{color:var(--ok)}
.pv .app.room main .vol-hint{margin:8px 0 0;color:var(--muted);font-size:.84rem}
.pv .app.room main .vol-more{margin-top:16px}
.vol-more .vol-role{display:block;margin-top:0;padding:8px 0;border-top:1px solid var(--line-soft)}
.vol-more .vol-role:first-child{border-top:0;padding-top:0}
.vol-more .vol-add{margin-top:12px}
.vol-more .linkish{all:unset;cursor:pointer;font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--alert)}

/* the physio's slot box: Confirm saves and closes it (dim, 29 Oct 2026); the legend swatches drawn like the grid's own boxes */
.pv .app.room main .sh-open .sh-field{margin:0 0 8px}
.pv .app.room main .sh-open .sh-confirm{margin-top:4px}
.pv .app.room main .sh-open .sh-openacts{margin:12px 0 0;text-align:center}
.sh-legend i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line);background:var(--surface-2)}
.sh-legend i.pl{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok);background:var(--surface)}
.sh-legend i.me{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg);background:var(--surface)}
.sh-legend i.blk{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--muted) 50%,transparent calc(50% + 1px)),var(--sunk)}
.pv .app.room main p[data-sh-msg]:not(:empty){margin:8px 0 0}
/* the physio's sessions as a timetable (dim picked A, 2 Nov 2026): one row a slot, its state in words, the tapped row opens under itself.
   Every picked pill, chip and day on the staff pages wears the club's second colour (rules above), and the tapped slot has a dotted edge in it (dim, 2 Nov 2026) */
.sh-hero .sh-hl{display:block;color:var(--brass-mark);font-weight:600;opacity:1}
.sh-list .sh-slot{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;color:var(--fg);font:inherit;font-size:.92rem;text-align:left;cursor:pointer;padding:12px 16px}
.sh-list .sh-slot:first-child{border-top:0}
.sh-list .sh-slot .tm{width:64px}
.sh-list .sh-slot .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-list .sh-slot .tag{border:1px solid var(--fg);color:var(--fg);border-radius:99px;padding:3px 8px}
.sh-list .sh-slot .tag.ok{border-color:var(--ok);color:var(--ok)}
.sh-list .sh-slot .tag.free{border-color:var(--line);color:var(--muted);font-weight:600}
.sh-list .sh-slot .go{color:var(--muted);flex:none;display:grid}
.sh-list .sh-slot .go .ti{width:18px;height:18px;transition:transform .15s}
.sh-list .sh-slot.on{outline:2px dotted var(--brass-mark);outline-offset:-5px;border-radius:12px}
.sh-list .sh-slot.on .go .ti{transform:rotate(90deg)}
.sh-list .sh-slot.on + .sh-in-open{border-top:0}
.sh-in-open{padding:4px 16px 16px}
.pv .app.room main .sh-in-open .sh-field{margin:0 0 8px;background:var(--surface-2)}
.pv .app.room main .sh-in-open .sh-confirm{margin-top:4px}
.pv .app.room main .sh-in-open .sh-openacts{margin:12px 0 0;text-align:center}
.pv .app.room main .sh-in-open .sh-hint{margin:8px 0 0;text-align:center}
.pv .app.room main .sh-set{padding:0}
.sh-set .sh-setr{padding:16px;border-top:1px solid var(--line-soft)}
.sh-set .sh-setr:first-child{border-top:0}
.pv .app.room main .sh-set .sh-h{margin:0 0 8px;font-size:.86rem;font-weight:600;color:var(--muted)}
.pv .app.room main .sh-set .sh-time{margin:0}
.pv .app.room main.sh-ph h1 + .sh-set{margin-top:24px}
.sh-pills button[aria-pressed="true"] .dot{background:var(--on-brass)}   /* the red dot stays visible on a picked pill in the club colour */

/* the physio's injury log (dim picked E Back to play steps, 2 Nov 2026): New session on its own banner row with Remind players and
   Injuries beneath; a row a player with the four step bar; the log form one card of dropdowns; a pencil beside the name on a player's page */
.sh-hero .sh-acts.ij3{grid-auto-flow:row;grid-template-columns:1fr 1fr}
.sh-hero .sh-acts.ij3 a.main{grid-column:1/-1}
.ij-list .ij-pr{display:block;padding:12px 16px;border-top:1px solid var(--line-soft);color:var(--fg);text-decoration:none}
.ij-list .ij-pr:first-child{border-top:0}
.ij-pr .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ij-pr .top b{font-family:var(--display);font-weight:700;font-size:.98rem}
.ij-pr small{display:block;color:var(--muted);font-size:.8rem;line-height:1.3}
.ij-pr .top small{display:inline;flex:none}
.ij-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0 0}
.ij-steps i{display:block;height:6px;border-radius:99px;background:var(--line)}
.ij-steps .done i{background:var(--fg)}
.ij-steps .on i{background:var(--brass-mark)}
.ij-steps.big{gap:8px;margin:0}
.ij-steps.big i{height:8px}
.ij-steps.big b{display:block;font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--muted);margin-top:8px}
.ij-steps.big .on b{color:var(--fg);font-weight:700}
/* the six spacing sizes: 24 above a section title, 12 from the title to its box. The ring icon frame.js adds is
   part of the title here, not an overhang, so the gaps are measured from the ring itself */
.pv .app.room main.ij .sh-h:not(.lab){margin:24px 0 12px}
.pv .app.room main.ij .sh-h.first{margin-top:24px}
.pv .app.room main.ij h2.sh-h > .si{margin:0}
.pv .app.room main.ij .sh-lede{margin:4px 0 16px}
.pv .app.room main.ij h1 + .sh-lede{margin-top:8px}
.pv .app.room main.ij .ij-gap{margin-top:16px}
.pv .app.room main.ij .sh-go{margin-top:8px}
.pv .app.room main.ij .sh-go small{margin-top:8px}
.pv .app.room main.ij .sh-go p[data-sh-msg]{text-align:center;margin:8px 0 0}
.pv .app.room main.ij .sh-go p[data-sh-msg]:empty{display:none}
.pv .app.room main.ij .ij-ph{margin:0 0 2px}
.pv .app.room main.ij .ij-ph .sh-title{margin:0}
.ij-ph .ij-edit{display:grid;place-items:center;width:44px;height:44px;padding:0;flex:none}
.ij-ph .ij-edit .ti{width:20px;height:20px}
.pv .app.room main.ij .ij-box{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:8px 0 0;font-size:.9rem;background:var(--surface)}
.ij-box b{font-family:var(--display)}
.ij-log{padding:4px 0 0;margin:0;list-style:none}
.ij-log li{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--line-soft);font-size:.9rem}
.ij-log li:first-child{border-top:0}
.ij-log li span{width:86px;flex:none;white-space:nowrap;font-family:var(--mono);font-size:.78rem;color:var(--muted);padding-top:2px}
.ij-log li.none{color:var(--muted)}
.ij-add{padding:12px 16px 16px;border-top:1px solid var(--line-soft)}
.pv .app.room main.ij .ij-add .sh-field{margin:0 0 8px}
.pv .app.room main.ij .ij-add p:empty{display:none}
.pv .app.room main.ij .ij-add p{margin:8px 0 0;font-size:.86rem}
.ij-tag{flex:none;font-family:var(--display);font-weight:700;font-size:.75rem;border:1px solid var(--fg);color:var(--fg);border-radius:99px;padding:3px 8px}
/* the form: one card, a row a question, dropdowns in the same box as a typed field */
.pv .app.room main.ij h1 + .ij-set{margin-top:16px}
.pv .app.room main.ij .sh-set .sh-setr{padding:12px 16px}
.pv .app.room main.ij .sh-set .sh-h.lab{margin:0 0 8px}
.pv .app.room main.ij .sh-set .sh-field{margin:0 0 8px}
.pv .app.room main.ij .sh-set .sh-setr > :last-child{margin-bottom:0}
.ij-dd{position:relative}
.ij-dd select{display:block;width:100%;border:0;background:none;padding:2px 24px 2px 0;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--fg);min-height:30px;-webkit-appearance:none;appearance:none;border-radius:0}
.ij-dd > .ti{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.ij-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ij-two.wide{grid-template-columns:1.5fr 1fr}
.ij-two.narrow{grid-template-columns:1fr 1.5fr}
.pv .app.room main.ij .ij-two .sh-field{margin:0 0 8px;padding-right:8px;min-width:0}
.ij-two select,.ij-two input{font-size:1rem;padding-right:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ij-two .ij-dd > .ti{right:8px}
.pv .app.room main.ij .ij-set input[disabled]{color:var(--muted)}
/* the move and clear slide ups */
.sh-sheet .ij-lab{display:block;font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--muted);margin:4px 16px 0}
.sh-sheet .sh-pills.many{margin:8px 16px 8px}
.sh-sheet .ij-check{display:flex;gap:12px;align-items:flex-start;margin:8px 16px 0;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);font-size:.92rem;cursor:pointer}
.sh-sheet .ij-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--brass-mark)}
.sh-sheet .ij-cancel{text-align:center;padding-top:12px}
.sh-sheet p[data-ij-mmsg]{margin:8px 16px 0}
.sh-sheet p[data-ij-mmsg]:empty{display:none}
.sh-hero .sh-acts.ij3 a:nth-child(2):last-child{grid-column:1/-1}
/* the coach's injury pages (dim, 3 Nov 2026): the six spacing sizes, 24 above a title and 12 to its box; the labels
   Return and Injured get a column wide enough to hold them */
.pv .app.room main.ij.ijc h1.sh-big{margin-bottom:8px}
.pv .app.room main.ij.ijc h1.sh-big + [data-sh-body] .sh-lede{margin:0 0 16px}
.pv .app.room main.ij.ijc .ij-list .ij-pr{padding-top:12px;padding-bottom:12px}
.pv .app.room main.ij .ij-when .sh-day .d{width:66px}
/* share a team's injured list (dim, 3 Nov 2026): a link under Log an injury; the sheet's pills are the app's own */
.pv .app.room main.ij .ij-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pv .app.room main.ij .ij-btns .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-left:8px;padding-right:8px}
.pv .app.room main.ij .ij-btns .btn .ti{width:18px;height:18px;flex:0 0 18px}
.pv .app.room main.ij .ij-btns .btn:only-child{grid-column:1/-1}
.sh-sheet [data-ij-go] .ti{width:18px;height:18px;margin-right:8px;vertical-align:-3px}
/* a laptop gives the physio room for notes (physios, 3 Nov 2026) */
@media (min-width:900px){ .pv .app.room main.ij textarea{min-height:120px} }
/* the event page and Add an event: one card, a row per part, like the physio New session (dim, 3 Nov 2026) */
.pv .app.room main [data-sh-ev] .sh-title + .sh-set,.pv .app.room main [data-sh-ev] .sh-lede + .sh-set{margin-top:24px}
.pv .app.room main [data-sh-ev] .sh-set{margin-bottom:0}
.pv .app.room main [data-sh-ev] .sh-set .sh-setr > :last-child{margin-bottom:0}
.pv .app.room main [data-sh-ev] .sh-set .sh-field{margin:0 0 8px}
.pv .app.room main [data-sh-ev] .sh-set .sh-chips + .sh-field{margin-top:8px}
.pv .app.room main [data-sh-ev] .sh-set .sh-hint{margin:8px 0 0}
.sh-hero h3 a.sh-heroa{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.sh-hero h3 a.sh-heroa .ti{width:18px;height:18px;opacity:.75}
.sh-chips.sh-two{display:grid;grid-template-columns:1fr 1fr}
.sh-chips.sh-two button{justify-content:center}
/* a section title straight inside a room's page: the page's own 12 gap is the space to its box, so the title adds
   none below, and 12 above makes 24 from the section before (the six spacing sizes, dim, 3 Nov 2026) */
.pv .app.room .wrap > main > .sh-h{margin-bottom:0}
.pv .app.room .wrap > main > .sh-h:not(.first){margin-top:12px}
/* on a settings page the Save bar sits at the foot of the page, not over it (dim, 3 Nov 2026) */
.st-paged.st-page .savebar{position:static;margin:16px 0 0;padding:0;background:transparent;border-top:0;box-shadow:none;z-index:auto}

/* Bring a club along in club settings, A2 (dim, 4 Nov 2026) */
.br-h{font-family:var(--display);font-size:1.6rem;font-weight:800;line-height:1.15;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.br-lede{color:var(--fg-2);line-height:1.5;margin:0}
.br-row{display:flex;gap:16px;align-items:flex-start;margin-top:24px}
.br-row .ic{width:28px;height:28px;flex:none;margin-top:4px;color:var(--fg)}
.br-row .ic svg{width:28px;height:28px;display:block}
.br-row b{display:block;font-family:var(--display);font-size:1.05rem;line-height:1.3}
.br-row small{display:block;color:var(--muted);font-size:.86rem;line-height:1.45;margin-top:4px}
.br-q{margin-top:24px}
.br-q > summary > span{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left}
.br-q > summary small{font-weight:400;color:var(--muted);font-size:.86rem;line-height:1.4}
.br-code{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 12px 12px 16px;margin-top:24px}
.br-code b{font-family:var(--mono);font-size:1.1rem;letter-spacing:.04em;user-select:all;min-width:0;overflow:hidden;text-overflow:ellipsis}
.br-code .btn{min-height:40px;padding:8px 16px;border-radius:999px;flex:none}
.br-go{margin-top:12px;min-height:52px}
/* Your plan tick table (dim, 4 Nov 2026): a Show box, then the rows for that group; the club's column shaded, ticks green */
.pl-dd{position:relative;display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:8px 48px 8px 16px;min-height:52px;margin:0 0 16px;cursor:pointer}
.pl-dd>span{display:block;font-size:.74rem;color:var(--muted);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.pl-dd select{display:block;width:100%;border:0;background:none;padding:0;margin:0;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--fg);min-height:24px;line-height:1.3;-webkit-appearance:none;appearance:none;border-radius:0;cursor:pointer}
.pl-dd select:focus{outline:0}
.pl-dd:focus-within{border-color:var(--brass-mark);box-shadow:0 0 0 2px var(--brass-soft)}
.pl-dd svg{position:absolute;right:12px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--fg-2);pointer-events:none}
.pl-t{width:100%;border-collapse:collapse;font-size:.86rem;table-layout:fixed}
.pl-t th,.pl-t td{padding:8px 4px;text-align:center;vertical-align:top;border-bottom:1px solid var(--line-soft);word-wrap:break-word;text-transform:none;letter-spacing:0;font-family:var(--body)}
.pl-t thead th{padding-left:2px;padding-right:2px;font-family:var(--display);font-weight:600;font-size:.74rem;line-height:1.2;color:var(--muted);vertical-align:bottom;border-bottom:1px solid var(--line)}
.pl-t thead th .p{display:block;font-weight:800;color:var(--fg);font-size:.95rem;margin-top:2px}
.pl-t th.ft,.pl-t tbody th{text-align:left;padding-left:0;padding-right:8px;width:32%;font-weight:500;color:var(--fg);font-size:.86rem;line-height:1.3}
.pl-t th.ft{font-family:var(--display);font-weight:800;font-size:.98rem}
.pl-t th.me,.pl-t td.me{background:var(--brass-soft)}
.pl-t td svg{width:18px;height:18px;color:var(--good);display:inline-block;vertical-align:-3px}
.pl-t td.no{color:var(--line)}
.pl-t td.tx{font-size:.8rem;color:var(--fg-2);line-height:1.3}
.pl-t .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pl-fn{margin:12px 0 0}
.pl-act{display:grid;gap:8px;margin-top:16px}
.pl-act .btn{width:100%}
.pl-act .pill{justify-self:start;margin:0}
.pl-note{margin:12px 0 0}
.pl-act .pay-err{margin:0}
/* a free club's Your plan section is inverted (club chrome): the table sits in a white card so it reads */
details.more.invert .pl-box{background:var(--surface);color:var(--fg);border-radius:12px;padding:12px}
details.more.invert .pl-box .muted{color:var(--muted)}