/* Two self-hosted typefaces (web/vendor/fonts, SIL Open Font License): Bricolage Grotesque for titles and big
   numbers, Instrument Sans for everything else. */
@font-face{font-family:"Bricolage Grotesque";src:url("/vendor/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/vendor/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}
/* The colours are tokens; the header and menu form a frame (--rail…) around the page's surface, and --hi marks
   the one thing that is selected. */
:root{--bg:#f6f7f9;--card:#fff;--ink:#1b1f24;--mute:#566070;--line:#e2e5ea;--acc:#1f5fbf;--acc-ink:#fff;--ok:#1d7a3e;--okbg:#e3f4e8;--warn:#9a6200;--warnbg:#fff3d6;--err:#b3261e;--errbg:#fde5e3;--chip:#eef1f5;--wa:#128c4a;--series-1:#2a78d6;--series-2:#eb6834;--series-3:#1baf7a;--series-4:#eda100;--series-5:#e87ba4;--series-6:#008300;--series-7:#4a3aa7;--series-8:#e34948;--series-other:#8a8f98;color-scheme:light;--hi:var(--acc);--hi-ink:var(--acc-ink);--rail:var(--card);--rail-ink:var(--ink);--rail-mute:var(--mute);--rail-line:var(--chip);--font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--display:"Bricolage Grotesque",var(--font);--head:57px}
/* dark follows the system unless the header toggle set data-theme; the two dark blocks must match */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121417;--card:#1b1e23;--ink:#e7e9ec;--mute:#a9b2bd;--line:#2d3239;--acc:#6aa2ff;--acc-ink:#0b1320;--ok:#6fd08f;--okbg:#17301f;--warn:#f0b650;--warnbg:#33290f;--err:#ff8a80;--errbg:#3a1a18;--chip:#262a31;--wa:#4fd18b;--series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500;--series-5:#d55181;--series-6:#008300;--series-7:#9085e9;--series-8:#e66767;--series-other:#6b7079;color-scheme:dark}}
:root[data-theme=dark]{--bg:#121417;--card:#1b1e23;--ink:#e7e9ec;--mute:#a9b2bd;--line:#2d3239;--acc:#6aa2ff;--acc-ink:#0b1320;--ok:#6fd08f;--okbg:#17301f;--warn:#f0b650;--warnbg:#33290f;--err:#ff8a80;--errbg:#3a1a18;--chip:#262a31;--wa:#4fd18b;--series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500;--series-5:#d55181;--series-6:#008300;--series-7:#9085e9;--series-8:#e66767;--series-other:#6b7079;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.5 var(--font)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* the frame: header across the top, menu down the left */
/* the top bar is glass: what scrolls beneath it shows through, blurred */
header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;min-height:var(--head);padding:10px 20px;background:color-mix(in srgb,var(--rail) 58%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);color:var(--rail-ink);position:sticky;top:0;z-index:5}
/* without backdrop blur it is nearly solid, so text beneath doesn't show through */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header{background:color-mix(in srgb,var(--rail) 92%,transparent)}}
h1{font:600 17px/1.2 var(--display);letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:10px}
/* the club's logo */
h1::before{content:"";flex:none;width:30px;height:30px;background:url("/logo.png") center / contain no-repeat}
/* its dark squares vanish on a dark bar, so there it sits on a light tile (both dark rules must match) */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) h1::before{width:34px;height:34px;border-radius:9px;background:#f4f5f7 url("/logo.png") center / 86% no-repeat}}
:root[data-theme=dark] h1::before{width:34px;height:34px;border-radius:9px;background:#f4f5f7 url("/logo.png") center / 86% no-repeat}
/* card titles: bigger, bolder, with an accent bar */
h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px;display:flex;align-items:center;gap:8px}
h2::before{content:"";flex:none;width:4px;height:18px;border-radius:2px;background:var(--acc)}
h3{font-size:13px;font-weight:600;margin:14px 0 6px;color:var(--mute)}
/* menu down the left; across the top on narrow screens. The content sits on the light surface, whose top
   left corner is rounded into the frame. */
.shell{display:flex;align-items:flex-start;background:var(--rail)}
nav{flex:none;width:214px;display:flex;flex-direction:column;gap:2px;padding:8px 12px 16px;position:sticky;top:var(--head);height:calc(100vh - var(--head));overflow-y:auto}
nav:empty{display:none}
nav button{border:0;background:transparent;color:var(--rail-mute);padding:8px 12px;border-radius:8px;font-weight:600;cursor:pointer;white-space:nowrap;text-align:left;display:flex;align-items:center;gap:9px}
nav button svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav .sub button svg{width:15px;height:15px}
nav button:hover{color:var(--rail-ink);background:var(--rail-line)}
nav button.on,nav button.on:hover{background:var(--hi);color:var(--hi-ink)}
nav button.open{color:var(--rail-ink)}
nav .sub{display:flex;flex-direction:column;gap:2px;margin-left:12px;padding-left:8px;border-left:1px solid var(--rail-line)}
nav .sub button{font-weight:500;padding:6px 10px}
main{flex:1;min-width:0;min-height:calc(100vh - var(--head));background:var(--bg);border-top-left-radius:18px;padding:4px max(20px,calc((100% - 1300px) / 2)) 48px}
nav:empty + main{border-top-left-radius:0}
@media (max-width:760px){.shell{display:block}nav{width:auto;height:auto;flex-direction:row;gap:4px;padding:0 12px 10px;position:static;overflow-x:auto}nav .sub{flex-direction:row;margin-left:0;padding-left:6px;gap:4px}main{border-top-left-radius:0;padding-inline:12px}}
a{color:var(--acc);text-underline-offset:2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:16px 0}
/* a table wider than its card scrolls inside it, not the page (not the filters: their menus hang outside) */
.card:not(.filters){overflow-x:auto}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 12px;align-items:end}
.form > :is(button,.btn,.row){justify-self:start}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--mute)}
.form label > :is(input,select,textarea){font-weight:400}
.form label.check{flex-direction:row;align-items:center;gap:6px}
button,.btn{font:inherit;font-size:14px;font-weight:500;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 13px;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-block;line-height:20px}
#view :is(button,.btn):not(.pri):not(.link):not(:disabled):hover{border-color:var(--mute)}
/* one height for every full-size control: inputs, drop-downs and buttons are 34px */
#view :is(button,.btn):not(.sm):not(.link):not(.av button){min-height:34px}
button.pri{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:600}
button.pri:not(:disabled):hover{background:color-mix(in srgb,var(--acc) 86%,var(--ink))}
button.danger{color:var(--err)}
button.sm,.btn.sm{padding:2px 8px;font-size:12px;border-radius:7px}
.btn.wa{color:var(--wa);border-color:var(--wa)}
.btn.off{opacity:.35;pointer-events:none}
/* a two-or-more-way switch: joined buttons, the chosen one filled */
.seg{display:inline-flex}
.seg button{border-radius:0;margin-left:-1px}
.seg button:first-child{border-radius:8px 0 0 8px;margin-left:0}
.seg button:last-child{border-radius:0 8px 8px 0}
.seg button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);position:relative}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background-color:var(--card);border:1px solid var(--line);border-radius:9px;padding:6px 10px;max-width:100%}
:is(input,select,textarea):focus-visible{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
input:not([type=checkbox]):not([type=radio]),select{height:34px}
select.sm{height:26px;font-size:12px;padding:2px 26px 2px 8px;background-position:right 8px center}
select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;cursor:pointer}
input[type=number]{width:80px}
input[type=checkbox]{width:auto}
textarea{width:100%;resize:vertical}
input.wide{width:100%}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
.tbl th{font-size:12px;color:var(--mute);font-weight:600;position:sticky;top:0;background:var(--card);z-index:1}
.tbl td.wrap{white-space:normal}
.tbl tr:hover > td{background:color-mix(in srgb,var(--acc) 5%,transparent)}
.tbl tr:last-child > td{border-bottom:0}
.scroll{overflow:auto;max-height:70vh}
/* a card that scrolls its table: no top padding, so the sticky heading row sits flush with the card's top edge and
   nothing scrolls past above it; the heading row takes that space instead */
.card.scroll{padding-top:0}
.card.scroll > .tbl > tbody > tr:first-child > th,.card.scroll > .tbl > tr:first-child > th{padding-top:18px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mute{color:var(--mute)}
.small{font-size:13px}
.chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:5px;background:var(--chip);margin-right:3px;white-space:nowrap}
.e{background:var(--errbg);color:var(--err)}
.w{background:var(--warnbg);color:var(--warn)}
.o{background:var(--okbg);color:var(--ok)}
.av{white-space:nowrap}
/* Yes / Maybe / No: each faintly in its own colour until chosen, then filled */
.av button{padding:3px 10px;font-size:12px;font-weight:700;margin-right:2px}
.av button.yes{color:var(--ok);background:color-mix(in srgb,var(--okbg) 55%,var(--card));border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.av button.maybe{color:var(--warn);background:color-mix(in srgb,var(--warnbg) 55%,var(--card));border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.av button.no{color:var(--err);background:color-mix(in srgb,var(--errbg) 55%,var(--card));border-color:color-mix(in srgb,var(--err) 35%,var(--line))}
.av button.yes.on{background:var(--ok);color:var(--card);border-color:var(--ok)}
.av button.maybe.on{background:var(--warn);color:var(--card);border-color:var(--warn)}
.av button.no.on{background:var(--err);color:var(--card);border-color:var(--err)}
.board{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.board .n{font:600 16px var(--display);color:var(--mute);text-align:center}
.contact{display:inline-flex;gap:3px;align-items:center;margin-left:4px}
.empty{color:var(--mute);font-style:italic}
.past td{opacity:.55}
pre.preview{white-space:pre-wrap;background:var(--chip);padding:8px;border-radius:7px;margin:6px 0 0;font:inherit}
/* Email previews: each email on a sheet of its own, headers above the body, as a mail app shows it */
.mail-paper{border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:720px}
.mail-head{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;padding:12px 16px;background:var(--chip);font-size:13.5px}
.mail-head dt{color:var(--mute);font-weight:600}
.mail-head dd{margin:0;overflow-wrap:anywhere}
.mail-body{white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;line-height:1.6}
ol.steps{margin:6px 0;padding-left:20px}
ol.steps li{margin:6px 0}
code{background:var(--chip);padding:1px 4px;border-radius:4px;font-size:12px}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;font-weight:500;box-shadow:0 6px 24px rgb(0 0 0 / .2);opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
.toast.show{opacity:1}
button.link{border:0;background:none;padding:0;color:var(--ink);font-weight:600;cursor:pointer;text-align:left}
button.link:hover{color:var(--acc);text-decoration:underline}
/* sortable column headings look like the plain ones */
.tbl th button.link{font-size:12px;font-weight:600;color:var(--mute);line-height:inherit}
.tbl th[aria-sort=ascending] button.link,.tbl th[aria-sort=descending] button.link{color:var(--ink)}
.grid2.member{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
@media (max-width:900px){.grid2.member{grid-template-columns:1fr}}

.card.narrow{max-width:560px;margin:28px auto}
.card.ok-box{background:var(--okbg);border-color:var(--ok);margin:0 0 12px}
.fb{font-style:italic}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.row.nowrap{flex-wrap:nowrap}
.grow{flex:1;min-width:0}
/* the member search in the header: grows between the title and the account links; its list hangs below */
.search{position:relative;flex:1 1 220px;max-width:440px;margin:0 12px}
.search input{box-sizing:border-box;width:100%;height:34px;margin:0;padding:4px 12px;font-size:14px;border:1px solid transparent;border-radius:9px;background:color-mix(in srgb,var(--card) 55%,transparent);border-color:color-mix(in srgb,var(--line) 75%,transparent);color:var(--rail-ink)}
.search input::placeholder{color:var(--rail-mute)}
.search input:focus{background:var(--card);color:var(--ink);outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.search ul{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:4px;list-style:none;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:70vh;overflow-y:auto;z-index:20}
.search li{display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:6px}
.search li[role=option]{cursor:pointer}
.search li[aria-selected=true],.search li[role=option]:hover{background:var(--chip)}
.search li.more{font-style:italic}
@media (max-width:760px){.search{order:3;flex-basis:100%;max-width:none;margin:0}}
/* join requests: the count beside Members in the menu, the review card, the form's QR code */
.tbl tr.online :is(th,td){color:var(--mute)}
.badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:5px;background:var(--hi);color:var(--hi-ink);font-size:11px;font-weight:700;line-height:18px;text-align:center;vertical-align:1px}
nav button.on .badge{background:var(--rail);color:var(--hi)}
.card.warn-box{border-color:var(--warn)}
.qr{width:180px;height:180px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;box-sizing:border-box}
.qr svg{display:block;width:100%;height:100%}
#account{display:flex;gap:4px;align-items:center;color:var(--rail-mute)}
#account button.link{font-weight:500;color:var(--rail-ink)}
#account button.link:hover{color:var(--hi)}
.head-end{display:flex;gap:10px;align-items:center}
#theme{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--rail-line);border-radius:9px;background:transparent;color:var(--rail-mute);cursor:pointer}
#theme:hover{color:var(--hi);border-color:var(--rail-mute)}
#theme svg{width:16px;height:16px}
.used{font-weight:700}
input.used{font-weight:700;border-color:var(--acc)}
.note{border-top:1px solid var(--line);padding:6px 0;margin-top:6px}
.note-body{white-space:pre-wrap}
.chart{position:relative;height:240px}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.charts .card{margin:0}
.charts .card.wide{grid-column:1/-1}
/* notes differ in length; push each chart down so the plots and their Table links line up across a row */
.charts .card{display:flex;flex-direction:column}
.charts .card .chart{margin-top:auto}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:16px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.tile .big{font:600 30px/1.15 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
/* dashboard filters: one grid of equal fields, each a label over a 34px control */
.filters-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.filters-head h2{margin:0}
.filters-head h2 button{font:inherit;color:inherit}
.filters.closed .filters-head{margin-bottom:0}
.card.fold .filters-head{margin-bottom:0}
.filters-head button{margin-left:auto}
.filters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field-label{font-size:12px;font-weight:600;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filters select,.filters input[type=number],.filters summary{box-sizing:border-box;height:34px;width:100%;margin:0;font-size:14px;line-height:22px;padding:5px 10px;border:1px solid var(--line);border-radius:9px;background-color:var(--card);color:var(--ink)}
.filters select,.filters summary{padding-right:28px}
.filters select{appearance:none;-webkit-appearance:none;cursor:pointer}
.filters :is(select,input,summary).is-set{border-color:var(--acc);background-color:color-mix(in srgb,var(--acc) 8%,var(--card))}
.filters :is(select,input,summary):focus-visible{outline:2px solid var(--acc);outline-offset:1px}
/* the multi-selects wear the same chevron as native drop-downs */
.filters .select,.filters .ms{position:relative;display:block}
.filters summary{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.filters summary{list-style:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.filters summary::-webkit-details-marker{display:none}
.filters .ms[open] summary{border-color:var(--acc)}
@media (max-width:520px){.filters-grid{grid-template-columns:1fr 1fr;gap:10px}}
.ms-menu{position:absolute;z-index:4;top:calc(100% + 4px);left:0;min-width:100%;max-height:320px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;box-shadow:0 8px 24px rgb(0 0 0 / .16);display:flex;flex-direction:column;gap:4px}
.ms-menu label.check{display:flex;flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:14px;white-space:nowrap;cursor:pointer;padding:2px 0}
.ms-menu button.link{align-self:flex-start;color:var(--acc);font-weight:400;margin-top:2px}
details.data summary{cursor:pointer;color:var(--mute);font-size:13px;margin-top:6px}
/* the members table's three ratings: the time control the table is sorted by stands out */
/* historical game availability: 4Y 1M 2N */
.hga{white-space:nowrap;font-variant-numeric:tabular-nums}
.hga .y{color:var(--ok)}
.hga .m{color:var(--warn)}
.hga .n{color:var(--err)}
.ratings{white-space:nowrap}
.ratings > span:not(.cur){color:var(--mute)}
.ratings > .cur{font-weight:600}
/* a card whose table runs the length of the page: its headings stay in view, pinned under the top bar. That needs
   the card not to scroll sideways, so on narrow screens it goes back to scrolling and the headings scroll away. */
.card.long{overflow:visible}
.card.long .tbl th{top:var(--head)}
@media (max-width:900px){.card.long{overflow-x:auto}.card.long .tbl th{top:0}}
/* the club's logo at the top of the login and join cards; on dark it sits on a light tile, like the one in the bar */
.brand-logo{display:block;width:88px;height:88px;margin:4px auto 14px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .brand-logo{padding:8px;border-radius:20px;background:#f4f5f7}}
:root[data-theme=dark] .brand-logo{padding:8px;border-radius:20px;background:#f4f5f7}
/* an ECF code whose membership is expiring (amber) or gone (red) */
a.ecf-warn{color:var(--warn);font-weight:600}
a.ecf-err{color:var(--err);font-weight:600}
/* Teams & events: the club's teams against what each league calls them */
.club-teams .rank{display:inline-block;width:26px;height:26px;border-radius:8px;background:var(--acc);color:var(--acc-ink);font:700 14px/26px var(--display);text-align:center}
.club-teams input{font-weight:600;width:170px}
.club-teams select{max-width:220px}
.club-teams select.is-set{border-color:var(--acc);background-color:color-mix(in srgb,var(--acc) 8%,var(--card))}
.club-teams td:last-child{white-space:nowrap}

/* merging two members: each value is a button, the one taken is marked */
.merge td{vertical-align:top}
.merge-pick{all:unset;box-sizing:border-box;display:block;width:100%;padding:4px 8px;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.merge-pick:hover{border-color:var(--ok)}
.merge-pick.on{border-color:var(--ok);background:var(--okbg);font-weight:600}
.merge-pick:focus-visible{outline:2px solid var(--acc);outline-offset:1px}