/* =====================================================================
Clubstead club management system
Design language: navy and white hoops, match photography, shirt numbers.
The audience is rugby people, not data people. So: photography does the
emotional work, the hoop motif ties it to the shirt, shirt numbers are
the primary way a player is identified, and every number on screen is
there because someone would act on it.
No web fonts. A system stack keeps it fast, works offline, and avoids
piping every visitor's IP to a font CDN, which is a live GDPR argument
in the UK and not one worth having for a club site.
===================================================================== */
:root{
--navy:#0B1F3A; --navy-2:#132c4d; --navy-3:#1d3f6b; --navy-ink:#08182d;
--red:#A8192E;
--ink:#16202b; --ink-2:#3d4a59; --mut:#67748a;
--line:#dde4ec; --line-2:#eaeff5; --bg:#eef2f7; --card:#fff;
/* Data colours, validated for colour-vision deficiency.
Worst adjacent pair protan dE 9.3 (floor 8), normal vision 19.0,
all >= 3:1 on white. The obvious green/red pair FAILS deutan at 6.1.
Do not swap these without re-running the check. */
--yes:#1a7f5a; --maybe:#b5842b; --no:#8c2d12; --sil:#767f8c;
--good:#1a7f5a; --warn:#b5842b; --serious:#a8541a; --bad:#A8192E;
--r:10px; --r-lg:14px;
--sh:0 1px 2px rgba(11,31,58,.06), 0 4px 14px rgba(11,31,58,.05);
--sh-lg:0 2px 6px rgba(11,31,58,.09), 0 18px 40px rgba(11,31,58,.13);
--f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--f);
-webkit-font-smoothing:antialiased}
a{color:var(--navy-3);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.015em}
/* --- the hoop: the club's shirt, used as a 4px signature rule --------- */
.hoops{height:9px;background:repeating-linear-gradient(90deg,
var(--navy) 0 34px, #fff 34px 68px)}
.hoops.thin{height:5px;background:repeating-linear-gradient(90deg,
var(--navy) 0 22px, #fff 22px 44px)}
/* ============================== chrome ============================== */
.top{background:var(--navy);color:#fff}
.top-in{max-width:none;margin:0;padding:.7rem 1.25rem;
display:flex;align-items:center;gap:.9rem}
.crest{height:44px;width:auto;display:block;flex:0 0 auto}
.wordmark{font-weight:800;font-size:1.05rem;letter-spacing:.01em;line-height:1.15}
.wordmark small{display:block;font-weight:400;font-size:.74rem;color:#93aac9;letter-spacing:.04em}
.top-r{margin-left:auto;display:flex;align-items:center;gap:.7rem;font-size:.85rem}
.who{text-align:right;line-height:1.25}
.who b{display:block;font-size:.88rem}
.who span{color:#93aac9;font-size:.74rem}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;
padding:.45rem .85rem;border-radius:7px;background:var(--red);color:#fff;text-decoration:none}
.btn:hover{background:#8f1527;text-decoration:none}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
/* ghost is a button for the dark hero. On a white card it was white text on
white, which is to say an invisible button. Inside a card it becomes a
quiet outline instead. */
.card .btn.ghost{background:transparent;color:var(--navy);
box-shadow:inset 0 0 0 1px var(--line-2)}
.card .btn.ghost:hover{background:var(--line-2);color:var(--navy)}
.btn.sm{padding:.3rem .6rem;font-size:.78rem}
.btn.quiet{background:var(--line-2);color:var(--navy)}
.btn.quiet:hover{background:#dde4ec}
/* ====================== navigation: a rail, not a bar ==================
This used to be one horizontal row capped at 1180px. Sixteen links need
1472px, so on an ordinary laptop four of them sat past the right hand edge
with no scrollbar and nothing to say they were there. Admin was one of
them. My paperwork, where every member does their PAR-Q, was another.
A page has vertical room to spare and horizontal room it does not, so the
navigation now runs down the side. It grows with every module a club buys
and never swallows an item again. Three states:
>= 1080px full rail, icons and words, grouped
820-1079px icon rail, words hidden, the title attribute carries them
<= 819px off canvas, opened by the button in the header
The drawer is a checkbox and a sibling selector. No JavaScript, because
navigation that needs a script is navigation that can fail.
===================================================================== */
/* The shell is the window, not a column inside it. Capping it at 1440 and
centring it left a strip of page background down the left of a dark
full-height rail on any window wider than that, which reads as the layout
having come loose. The rail goes to the edge; the reading column inside
keeps its comfortable measure and centres itself in what is left. */
.shell{display:flex;align-items:flex-start;gap:0}
nav.main{
flex:0 0 232px;align-self:stretch;background:var(--navy-2);
padding:.9rem .7rem 1.1rem;min-height:calc(100vh - 132px);
position:sticky;top:0;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;
display:flex;flex-direction:column}
nav.main .nav-h{
margin:1.15rem .75rem .3rem;font-size:.68rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:#7f97b8}
nav.main .nav-h:first-child{margin-top:.2rem}
nav.main a{
display:flex;align-items:center;gap:.7rem;color:#c3d2e4;
padding:.56rem .75rem;border-radius:8px;font-size:.9rem;font-weight:500;
border-left:3px solid transparent}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
nav.main a.on{color:#fff;background:rgba(255,255,255,.11);font-weight:700;
border-left-color:var(--red)}
nav.main svg.ni{
flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;opacity:.85}
nav.main a.on svg.ni{opacity:1}
nav.main a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Clubstead, at the foot of the club's own navigation.
*
* The rule this obeys: the club owns the chrome. Nothing here is Clubstead's
* own colour, the header and the crest and the active-item accent all stay
* the club's, and this sits at the bottom under a hairline at 55% white so it is
* present without ever competing. margin-top:auto is what pins it to the
* bottom, which is why nav.main is a flex column.
*
* The wordmark is Georgia, NOT Fraunces. Loading a webfont on every page of a
* members' system, for one twelve pixel word, is not a trade to make on behalf
* of a club whose members are on rural broadband. Georgia is a serif on every
* device and at this size the difference is invisible. The brand pack knows
* about this exception.
*/
.csfoot{
margin-top:auto;padding:.8rem .75rem .1rem;
border-top:1px solid rgba(255,255,255,.14)}
/* The wordmark's colour is still INHERITED from the club's own nav links,
* on purpose, for the reason recorded below: it sits in whatever colour the
* club already chose, so it never clashes, and a future club with light
* chrome gets a legible mark for free instead of an invisible white one.
*
* The icon beside it (7 Sept 2026 rebrand) can no longer follow that rule.
* The new Clubstead mark is a two-colour raster PNG, not the old mono SVG,
* and a raster with no alpha-only fill cannot recolour itself to
* currentColor. It renders in its own fixed navy and lime regardless of the
* club's chrome, which is a deliberate short-term compromise recorded in
* docs/BRAND.md, not an oversight, and should be revisited once the mark
* exists as a proper vector. */
nav.main a.csmark{
display:flex;align-items:center;gap:.5rem;
/* .64, not .55. This is a LINK, so as small text it owes 4.5:1, and against
* the rail at #132c4d the inherited #c3d2e4 resolves to 3.76:1 at .55 and
* 4.65:1 at .64. Side by side the difference is barely perceptible and it is
* still plainly recessive against the nav items, so the accessible value
* costs nothing that matters. Measured, not judged: brand/contrast.py. */
opacity:.8;padding:0;border-left:0;border-radius:0;
font-size:.82rem;font-weight:400}
nav.main a.csmark:hover{opacity:.9;background:transparent;text-decoration:none}
nav.main a.csmark:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:3px}
nav.main a.csmark img{flex:none;width:18px;height:18px;display:block;border-radius:4px}
nav.main a.csmark span{
font-family:Georgia,"Times New Roman",serif;letter-spacing:.005em;
overflow:visible;white-space:nowrap}
.nav-btn{display:none}
.nav-scrim{display:none}
main{flex:1 1 auto;min-width:0;max-width:1180px;margin:0 auto;padding:1.4rem 1.25rem 4rem}
/* Icon rail. The words go, the reach does not: every item is still one
click away and the title attribute names it on hover. */
@media(max-width:1079px){
nav.main{flex-basis:60px;padding:.9rem .5rem 2rem}
nav.main a{justify-content:center;padding:.62rem 0;gap:0}
nav.main a span{display:none}
.csfoot{padding-left:.3rem;padding-right:.3rem}
nav.main a.csmark{justify-content:center}
nav.main .nav-h{
margin:.9rem .3rem .25rem;text-align:center;font-size:0;
border-top:1px solid rgba(255,255,255,.13);padding-top:.6rem}
nav.main svg.ni{width:21px;height:21px}
}
/* Drawer. Off canvas until the header button is pressed. */
@media(max-width:819px){
.shell{display:block}
.csfoot{padding-left:.75rem;padding-right:.75rem}
nav.main a.csmark{justify-content:flex-start}
nav.main a.csmark span{display:inline}
nav.main{
position:fixed;z-index:60;top:0;left:0;bottom:0;flex-basis:auto;width:255px;
max-height:none;min-height:0;padding:1rem .7rem 2rem;
transform:translateX(-100%);transition:transform .18s ease-out;
box-shadow:0 0 40px rgba(0,0,0,.4)}
nav.main a{justify-content:flex-start;padding:.7rem .75rem;gap:.7rem}
nav.main a span{display:inline}
nav.main .nav-h{
margin:1.1rem .75rem .3rem;text-align:left;font-size:.68rem;border-top:0;padding-top:0}
.nav-cb:checked ~ nav.main{transform:translateX(0)}
.nav-cb:checked ~ .nav-scrim{
display:block;position:fixed;z-index:55;inset:0;background:rgba(8,24,45,.45)}
main{max-width:none}
.nav-btn{
display:grid;place-items:center;width:40px;height:40px;flex:none;margin-right:-.2rem;
border-radius:9px;cursor:pointer;color:#fff;background:rgba(255,255,255,.1)}
.nav-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round}
.nav-btn:hover{background:rgba(255,255,255,.18)}
.nav-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){ nav.main{transition:none} }
/* A rail that does not fit is a rail with something hidden at the bottom of
it, which is the bug this whole thing exists to kill. Sixteen links and
five headings need about 830px of comfortable rhythm. The rail starts
below the header, so a 900px window only offers about 808px of it before
the fold: comfortably short. Below 1000px the spacing tightens rather than
the list scrolling, because a list that scrolls is a list with something
hidden at the bottom of it. It still scrolls if a club ever buys enough modules to
overflow even this, but that is a long way off. */
@media(max-height:1000px){
nav.main{padding-top:.6rem;padding-bottom:1rem}
nav.main a{padding-top:.44rem;padding-bottom:.44rem}
nav.main .nav-h{margin-top:.8rem;margin-bottom:.2rem}
}
@media(max-height:700px){
nav.main a{padding-top:.34rem;padding-bottom:.34rem;font-size:.86rem}
nav.main .nav-h{margin-top:.6rem}
}
/* The footer is the one place a stranger finds out what this software is, so
* it says so in words rather than leaving a 15px glyph to do it. Club first and
* in ink, Clubstead second and at text size. Same structure signed in or out,
* same structure for every club: the old one produced a different sentence in
* each of those cases because it grew when there was only ever one club. */
footer{border-top:1px solid var(--line);color:var(--mut);font-size:.79rem;
padding:1.15rem 1.25rem 1.6rem}
.foot{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;
gap:.45rem 1.6rem;align-items:baseline;justify-content:space-between}
.foot-club{min-width:0}
.foot-club .nm{font-weight:600;color:var(--ink)}
.foot-club .sep{padding:0 .42rem;opacity:.55}
.foot-club .warn{color:#856618;font-weight:600} /* 4.72:1 on the page ground; #8a6a1a measured 4.49 */
/* Pine, and this is the ONE place inside a club's system it is allowed. The
* rule exists so Clubstead never competes with the club's chrome: header,
* nav, buttons, accents. An attribution line at the very bottom, at text size,
* is Clubstead identifying itself rather than decorating the club, which is
* the opposite thing. */
a.foot-cs{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
color:#101D32;text-decoration:none;font-size:.82rem}
a.foot-cs img{width:16px;height:16px;flex:none;display:block;border-radius:3px}
a.foot-cs b{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.005em}
a.foot-cs:hover{text-decoration:underline}
a.foot-cs:focus-visible{outline:2px solid #101D32;outline-offset:3px;border-radius:2px}
@media(max-width:560px){.foot{gap:.6rem}}
.demo-bar{background:#fdf3dc;border-bottom:1px solid #eeddb4;color:#6d5316;
font-size:.82rem;padding:.45rem 1.25rem;text-align:center}
.demo-bar b{color:#4d3a0d}
/* ============================== hero ================================ */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.5rem;
box-shadow:var(--sh-lg);background:var(--navy)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 42%}
/* Two layers. The angled one keeps the headline legible on the left; the
flat one keeps the countdown legible on the right without blacking the
photograph out completely. Text on the right sits at .60 alpha over the
image, which clears 4.5:1 against white on the darkest crop tested. */
.hero .scrim{position:absolute;inset:0;background:
linear-gradient(100deg, rgba(8,24,45,.96) 0%, rgba(8,24,45,.90) 40%, rgba(8,24,45,.42) 100%),
linear-gradient(0deg, rgba(8,24,45,.55), rgba(8,24,45,.30))}
.hero .body{position:relative;padding:1.75rem 1.8rem}
.hero-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;flex-wrap:wrap}
.tagline{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#9fbcdf;font-weight:700}
.badge-champ{background:linear-gradient(180deg,#d9b25e,#b98f36);color:#31240a;
font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:.2rem .5rem;border-radius:4px}
.hero h1{color:#fff;font-size:2.15rem;font-weight:800;line-height:1.08;margin:.1rem 0 .5rem}
.hero .facts{display:flex;gap:1.4rem;flex-wrap:wrap;color:#d3e0f0;font-size:.92rem}
.hero .facts b{color:#fff}
.hero .travel{margin-top:.85rem;font-size:.85rem;color:#b9cee6;
border-left:3px solid var(--red);padding-left:.75rem;max-width:46ch}
.hero-split{display:flex;gap:1.8rem;align-items:flex-end;flex-wrap:wrap}
.hero-split .l{flex:1 1 340px;min-width:0}
.hero-split .r{display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap}
.cd{text-align:center}
.cd b{display:block;font-size:3.1rem;font-weight:800;color:#fff;line-height:.95}
.cd span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#9fbcdf}
.avail-box{min-width:190px;color:#d3e0f0;font-size:.85rem}
.avail-box b{color:#fff;font-size:1.15rem}
.track{height:7px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden;margin:.45rem 0 .3rem}
.track i{display:block;height:100%;background:#59c48d;border-radius:4px}
/* ============================== cards =============================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh)}
.card.pad{padding:1.05rem 1.15rem}
section{margin-bottom:1.7rem}
.sec-head{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .75rem}
h2.sec{font-size:1.12rem;font-weight:750;color:var(--navy)}
.sec-head .note{font-size:.83rem;color:var(--mut)}
.sec-head .more{margin-left:auto;font-size:.83rem;font-weight:600}
p.lead{color:var(--mut);font-size:.9rem;margin:.1rem 0 .9rem}
/* ---- stat tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:.85rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);overflow:hidden}
.tile .cap{height:4px;background:var(--navy-3)}
.tile.good .cap{background:var(--good)} .tile.warn .cap{background:var(--warn)}
.tile.bad .cap{background:var(--bad)}
.tile .in{padding:.85rem 1rem 1rem}
.tile .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:600}
.tile .n{font-size:1.95rem;font-weight:800;color:var(--navy);line-height:1.1;margin:.1rem 0 .05rem}
.tile .s{font-size:.81rem;color:var(--mut);line-height:1.4}
.tile .track{background:var(--line-2);margin-top:.55rem}
.tile .track i{background:var(--good)}
/* ---- needs attention ---- */
.attn .row{display:flex;align-items:center;gap:.85rem;padding:.8rem 1.05rem;
border-top:1px solid var(--line);color:inherit}
.attn .row:first-child{border-top:0}
.attn .row:hover{background:#f7f9fc;text-decoration:none}
.dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
color:#fff;font-weight:800;font-size:.82rem}
.l-critical .dot{background:var(--bad)} .l-serious .dot{background:var(--serious)}
.l-warning .dot{background:var(--warn)} .l-info .dot{background:var(--navy-3)}
.attn .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.attn .txt b{font-weight:650}
.attn .txt span{font-size:.84rem;color:var(--mut)}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
padding:.18rem .45rem;border-radius:4px;background:var(--line-2);color:var(--mut);white-space:nowrap}
.l-critical .tag{background:#fbe6e8;color:var(--bad)}
.l-serious .tag{background:#fbeade;color:#8c4415}
.l-warning .tag{background:#fbf1dc;color:#7a5a1c}
.chev{color:var(--mut);font-size:1.15rem;flex:0 0 auto}
/* ============================== charts ============================== */
.legend{display:flex;gap:1.05rem;flex-wrap:wrap;font-size:.81rem;color:var(--ink-2);margin:0 0 .7rem}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:.38rem;vertical-align:-1px}
.crow{display:grid;grid-template-columns:minmax(120px,180px) 1fr 62px;gap:.85rem;
align-items:center;padding:.4rem 0}
.crow+.crow{border-top:1px solid var(--line-2)}
.clab{font-size:.85rem;min-width:0;line-height:1.3}
.clab b{display:block;font-weight:650}
.clab span{color:var(--mut);font-size:.78rem}
.cbar{display:flex;height:20px;border-radius:5px;overflow:hidden;background:var(--line-2);gap:2px}
.cbar.thin{height:13px}
.seg{display:grid;place-items:center;font-size:.71rem;font-weight:700;color:#fff;min-width:0}
.seg:first-child{border-radius:5px 0 0 5px} .seg:last-child{border-radius:0 5px 5px 0}
.seg:hover{filter:brightness(1.12)}
.s-yes{background:var(--yes)} .s-maybe{background:var(--maybe)}
.s-no{background:var(--no)} .s-sil{background:var(--sil)}
.s-fill{background:var(--navy-3)} .s-short{background:var(--line-2)}
.cnum{font-size:.85rem;font-weight:750;color:var(--navy);text-align:right}
.cnum span{color:var(--mut);font-weight:500}
/* ======================= shirt number + player ====================== */
.shirt{--sz:38px;width:var(--sz);height:var(--sz);border-radius:8px;flex:0 0 auto;
background:var(--navy);color:#fff;display:grid;place-items:center;
font-weight:800;font-size:calc(var(--sz)*.42);position:relative;overflow:hidden}
.shirt::before{content:"";position:absolute;inset:0;
background:repeating-linear-gradient(180deg,transparent 0 24%,rgba(255,255,255,.9) 24% 38%);
opacity:.16}
.shirt b{position:relative}
.shirt.lg{--sz:60px;border-radius:12px}
.shirt.empty{background:var(--line-2);color:var(--mut)}
.avatar{--sz:44px;width:var(--sz);height:var(--sz);border-radius:50%;flex:0 0 auto;
object-fit:cover;background:var(--navy-3);color:#fff;display:grid;place-items:center;
font-weight:750;font-size:calc(var(--sz)*.36);letter-spacing:.01em;overflow:hidden}
.avatar.xl{--sz:104px;border:3px solid #fff;box-shadow:0 3px 14px rgba(0,0,0,.28)}
/* squad grid */
.squad{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:.8rem}
.pcard{display:flex;align-items:center;gap:.75rem;padding:.7rem .8rem;background:var(--card);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);color:inherit}
.pcard:hover{border-color:#c3d0e0;box-shadow:var(--sh-lg);text-decoration:none;
transform:translateY(-1px);transition:.12s}
.pcard .nm{flex:1;min-width:0}
.pcard .nm b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .nm span{font-size:.79rem;color:var(--mut)}
.pcard .fl{display:flex;gap:.2rem;flex-direction:column;align-items:flex-end}
/* pills */
.pill{display:inline-block;padding:.13rem .5rem;border-radius:20px;font-size:.72rem;
font-weight:700;white-space:nowrap}
.pill.ok{background:#e2f2ea;color:#136045} .pill.warn{background:#fbf1dc;color:#7a5a1c}
.pill.bad{background:#fbe6e8;color:#8d1626} .pill.mut{background:#edf1f6;color:var(--mut)}
.pill.navy{background:#e6ecf5;color:var(--navy)}
/* ===================== player page ==================== */
.p-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);
background:var(--navy);margin-bottom:1.2rem}
.p-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.p-hero .scrim{position:absolute;inset:0;
background:linear-gradient(105deg,rgba(8,24,45,.97),rgba(8,24,45,.82) 55%,rgba(8,24,45,.55))}
.p-hero .in{position:relative;display:flex;gap:1.2rem;align-items:center;padding:1.3rem 1.5rem;flex-wrap:wrap}
.p-hero h1{color:#fff;font-size:1.9rem;font-weight:800;line-height:1.1}
.p-hero .sub{color:#a9c1de;font-size:.9rem;margin-top:.25rem}
.p-hero .meta{margin-left:auto;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.p-stat{text-align:center;color:#d3e0f0;min-width:62px}
.p-stat b{display:block;font-size:1.65rem;font-weight:800;color:#fff;line-height:1}
.p-stat span{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:#9fbcdf}
/* The shirt badge is a different kind of thing from the counters beside it,
so it gets its own caption and a rule to sit behind. */
.p-num{text-align:center;padding-right:1.6rem;border-right:1px solid rgba(255,255,255,.22)}
.p-num .shirt{margin:0 auto}
.p-num small{display:block;margin-top:.4rem;font-size:.66rem;text-transform:uppercase;
letter-spacing:.09em;color:#9fbcdf}
@media(max-width:640px){ .p-num{padding-right:0;border-right:0} }
.sponsor-strip{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.1rem;
background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
border-radius:var(--r);box-shadow:var(--sh);margin-bottom:1.2rem}
.sponsor-strip .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--mut);font-weight:700}
.sponsor-strip .co{font-size:1.05rem;font-weight:750;color:var(--navy)}
.slogo{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;
color:#fff;font-weight:800;font-size:1.2rem;flex:0 0 auto}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
/* A grid item will not shrink below its content's minimum width unless it is
told it may. Without this, one long email address or an unbreakable name
pushes the whole column wider than the phone and the page scrolls sideways. */
.cols>*{min-width:0}
@media(max-width:860px){ .cols{grid-template-columns:1fr} }
/* definition list: human labels, aligned values */
dl.facts{margin:0;display:grid;grid-template-columns:minmax(120px,34%) 1fr}
dl.facts dt{padding:.5rem .3rem .5rem 0;color:var(--mut);font-size:.84rem;
border-top:1px solid var(--line-2)}
dl.facts dd{padding:.5rem 0;margin:0;border-top:1px solid var(--line-2);font-size:.9rem}
dl.facts dt:first-of-type,dl.facts dt:first-of-type+dd{border-top:0}
dl.facts dd.addr{white-space:pre-line;line-height:1.45}
.locked{background:#f7f9fc;border:1px dashed #c9d5e4;border-radius:var(--r);
padding:1.1rem;color:var(--mut);font-size:.88rem;text-align:center}
.locked b{color:var(--navy);display:block;margin-bottom:.2rem}
table.t{width:100%;border-collapse:collapse;font-size:.88rem}
table.t th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
color:var(--mut);font-weight:700;padding:.45rem .6rem;border-bottom:1px solid var(--line)}
table.t td{padding:.5rem .6rem;border-bottom:1px solid var(--line-2)}
table.t tr:last-child td{border-bottom:0}
table.t .right{text-align:right}
/* A squad reads forwards then backs, not one flat list of 32 names. */
table.t tr.grp td{background:#f4f7fb;font-size:.7rem;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--navy);padding:.4rem .6rem;border-bottom:1px solid var(--line)}
/* Any table wide enough to need it scrolls inside its own card rather than
taking the page with it. */
.tw{overflow-x:auto}
.card>table.t{display:block;overflow-x:auto;max-width:100%}
table.t{max-width:100%}
/* Long unbroken things: an email address, a URL, a hyphenated surname. */
.facts dd,.facts dt,td,th,.mc-kn,.note,.lead{overflow-wrap:anywhere}
/* inline edit form */
.editrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
select,input[type=text],input[type=number],input[type=email],input[type=password]{
font:inherit;font-size:.88rem;padding:.4rem .55rem;border:1px solid #c8d3e0;
border-radius:7px;background:#fff;color:var(--ink);max-width:100%}
select:focus,input:focus{outline:2px solid var(--navy-3);outline-offset:1px}
.flash{padding:.65rem .95rem;border-radius:var(--r);font-size:.88rem;margin-bottom:1rem}
.flash.ok{background:#e2f2ea;color:#12503a;border:1px solid #bfe0d0}
.flash.err{background:#fbe6e8;color:#8d1626;border:1px solid #f0c6cc}
/* ============================== login =============================== */
.login-wrap{min-height:100vh;display:grid;place-items:center;position:relative;padding:1.5rem}
.login-wrap img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.login-wrap .scrim{position:absolute;inset:0;background:linear-gradient(180deg,
rgba(8,24,45,.62),rgba(8,24,45,.88))}
.login{position:relative;width:min(400px,100%);background:#fff;border-radius:var(--r-lg);
box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden}
.login .head{background:var(--navy);color:#fff;padding:1.4rem 1.5rem;text-align:center}
.login .head img{height:64px;margin-bottom:.5rem}
.login .head b{display:block;font-size:1.05rem;font-weight:750}
.login .head span{font-size:.78rem;color:#9fbcdf}
.login .in{padding:1.3rem 1.5rem 1.5rem}
.login label{display:block;font-size:.79rem;font-weight:650;color:var(--ink-2);margin:.7rem 0 .25rem}
.login input{width:100%}
.login .btn{width:100%;margin-top:1.05rem;padding:.6rem;font-size:.95rem}
.login .help{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:.9rem;
font-size:.78rem;color:var(--mut)}
.login .help + .help{border-top:0;padding-top:0;margin-top:.7rem}
.login .sec{font-size:1rem;margin-bottom:.4rem}
.login .flash{margin-bottom:.8rem}
.back{position:relative;text-align:center;margin-top:1rem}
.back a{color:#a9c1de;font-size:.85rem}
/* ============================== misc ================================ */
.mut{color:var(--mut)} .right{text-align:right}
.record{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.record div{padding:.9rem .4rem;border-left:1px solid var(--line-2)}
.record div:first-child{border-left:0}
.record b{display:block;font-size:1.6rem;font-weight:800;color:var(--navy);line-height:1}
.record .w{color:var(--good)} .record .lo{color:var(--no)}
.record span{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
/* ==================== fixtures: filters, layout, calendar ==============
Two questions get asked of a fixture list, which side and are we at home,
so both are one click and they combine. Links rather than a form: the
answer ends up in the address, so a filtered list can be sent to somebody
and the whole thing works with JavaScript off.
===================================================================== */
.fixbar{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
margin:0 0 1.1rem;padding:.65rem .8rem;background:var(--card);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.fxsegs{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.fxseglab{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--mut);margin-right:.25rem}
.fxseg{display:inline-block;padding:.34rem .72rem;border-radius:999px;font-size:.85rem;
font-weight:600;color:var(--ink-2);background:var(--line-2);border:1px solid transparent}
.fxseg:hover{background:#dde4ec;text-decoration:none;color:var(--navy)}
.fxseg.on{background:var(--navy);color:#fff}
.fxseg.on:hover{background:var(--navy-3);color:#fff}
.fxseg.clear{background:transparent;color:var(--mut);border-color:var(--line);margin-left:auto}
.fxseg.clear:hover{background:var(--line-2);color:var(--navy)}
/* The calendar is a companion to the list, not a replacement for it, so it
takes the narrow column and the list keeps the room. */
.fixlayout{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:1.4rem;align-items:start}
.fixmain{min-width:0}
.fixcal{position:sticky;top:1rem}
.calcard{padding:.85rem .9rem 1rem}
.fxcal-head{display:flex;align-items:center;justify-content:space-between;
margin:0 0 .6rem;font-size:.95rem;color:var(--navy)}
.fxcal-nav{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;
color:var(--navy-3);background:var(--line-2);font-size:1.1rem;line-height:1}
.fxcal-nav:hover{background:#dde4ec;text-decoration:none}
.fxcal-nav.off{opacity:.3;pointer-events:none}
.fxcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.fxcal-dow{text-align:center;font-size:.66rem;font-weight:700;color:var(--mut);
padding:.2rem 0 .35rem;letter-spacing:.04em}
.fxcal-dow.we{color:var(--navy-3)}
.fxcal-d{position:relative;display:flex;flex-direction:column;align-items:center;
justify-content:flex-start;gap:2px;min-height:34px;padding:.22rem 0 .18rem;
border-radius:6px;font-size:.78rem;color:var(--ink-2)}
.fxcal-d.pad{visibility:hidden}
.fxcal-d .n{line-height:1.1}
.fxcal-d.today{outline:2px solid var(--navy-3);outline-offset:-2px;font-weight:800;color:var(--navy)}
a.fxcal-d.has{background:var(--line-2);font-weight:700;color:var(--navy)}
a.fxcal-d.has:hover{background:#dbe6f3;text-decoration:none}
.fxcal-d .dots{display:flex;gap:2px;line-height:0}
.fxcal-d .dots i,.fxcal-key i{display:inline-block;width:7px;height:7px;border-radius:2px}
.fxcal-d .dots i.h,.fxcal-key i.h{background:var(--navy)}
.fxcal-d .dots i.a,.fxcal-key i.a{background:transparent;box-shadow:inset 0 0 0 1.5px var(--navy-3)}
.fxcal-key{margin:.7rem 0 0;font-size:.72rem;color:var(--mut);
display:flex;align-items:center;gap:.3rem}
.fxcal-key i{margin-left:.35rem}
.fxcal-key i:first-child{margin-left:0}
/* Touch sizes. This block sits AFTER the rules it overrides on purpose: the
first version was written above them and lost the cascade silently, which
is a mistake that looks like a media query that does not work. */
@media(max-width:820px){
.fxseg{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .95rem}
.fxsegs{gap:.4rem}
.fxcal-nav{width:44px;height:44px;font-size:1.3rem}
.fxcal-d{min-height:44px;justify-content:center;font-size:.85rem}
.fxcal-d .dots i{width:8px;height:8px}
}
/* Below this the calendar goes above the list, full width, because a 268px
column beside a single column of fixtures is two cramped things. */
@media(max-width:900px){
.fixlayout{grid-template-columns:minmax(0,1fr)}
.fixcal{position:static;order:-1}
.calcard{max-width:22rem}
.fxseg.clear{margin-left:0}
}
/* On a phone it goes back under the list. A month grid needs about 380px of
height whatever the screen, so above the list it is the whole first screen
of a 390x844 phone and the next game, which is the only thing most people
opened this page for, starts below the fold. The calendar is the overview;
the list is the answer. The answer goes first. */
@media(max-width:640px){
.fixcal{order:0}
}
.fixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem}
.fix{display:flex;gap:.85rem;align-items:center;padding:.8rem .9rem;background:var(--card);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.fix .dt{text-align:center;flex:0 0 auto;width:46px}
.fix .dt b{display:block;font-size:1.25rem;font-weight:800;color:var(--navy);line-height:1}
.fix .dt span{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.fix .op{flex:1;min-width:0}
.fix{min-height:74px}
.fix .op b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fix .op span{font-size:.78rem;color:var(--mut)}
.fix .av{flex:0 0 auto;text-align:right;padding-left:.4rem;border-left:1px solid var(--line-2)}
.fix .av b{display:block;color:var(--navy);font-size:1.05rem;line-height:1}
.fix .av span{font-size:.7rem;color:var(--mut)}
.ha{font-size:.68rem;font-weight:800;padding:.15rem .38rem;border-radius:4px}
.ha.h{background:var(--navy);color:#fff} .ha.a{background:var(--line-2);color:var(--mut)}
.score{font-weight:800;font-size:1.05rem;color:var(--navy)}
#tt{position:fixed;z-index:60;background:var(--navy-ink);color:#fff;font-size:.78rem;
padding:.32rem .58rem;border-radius:6px;pointer-events:none;opacity:0;
transition:opacity .1s;white-space:nowrap}
#tt.on{opacity:1}
@media(max-width:640px){
.hero h1{font-size:1.5rem} .cd b{font-size:2.3rem}
.p-hero h1{font-size:1.45rem}
.crow{grid-template-columns:1fr;gap:.2rem} .cnum{text-align:left}
dl.facts{grid-template-columns:1fr}
dl.facts dt{padding-bottom:0;border-top:1px solid var(--line-2)}
dl.facts dd{padding-top:.1rem;border-top:0}
.tile .n{font-size:1.6rem}
/* The header is one row or it is a mess. It used to wrap here, which was
tolerable when it held a crest, a name and two buttons; with the drawer
button added it wrapped onto two rows and took 107px off the top of
every phone screen. The club name goes instead: the crest says whose
ground this is, and the buttons are what people came to press. */
.top-in{flex-wrap:wrap;gap:.5rem} .who{display:none}
.wordmark{display:none}
.top-r{margin-left:auto;flex-wrap:nowrap}
.top-r .btn{white-space:nowrap;padding:.55rem .7rem}
}
/* ===================== availability and selection ==================== */
/* The one control a player came to use, so it gets its own card and a
red left edge rather than being a row in a table somewhere. */
.myavail{border-left:4px solid var(--red);margin-bottom:1.5rem}
.myavail .in{padding:1rem 1.15rem;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
/* Not .who: that class is already the signed-in block in the header, and it
carries text-align:right, which would right-align this card's copy. */
.myavail .me{display:flex;gap:.8rem;align-items:center;flex:1 1 320px;min-width:0;text-align:left}
.myavail .me b{display:block;font-size:1.02rem;color:var(--navy)}
.myavail .me span{font-size:.86rem;color:var(--mut);font-weight:400}
.avail-btns{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin:0}
.avail-btns input[name=reason]{min-width:14rem;flex:1 1 14rem}
.ab{border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit;font-size:.85rem;
font-weight:700;padding:.5rem .9rem;border-radius:7px;color:var(--ink-2)}
.ab:hover{border-color:#b9c6d6}
.ab.yes.on{background:var(--yes);border-color:var(--yes);color:#fff}
.ab.maybe.on{background:var(--maybe);border-color:var(--maybe);color:#fff}
.ab.no.on{background:var(--no);border-color:var(--no);color:#fff}
/* The three-key version, for a coach going down a squad list quickly. */
form.mini{display:flex;gap:.2rem;margin:0}
/* .mini is for the two-button inline forms it was written for. .payform is a
proper stacked form with its own .frow rows, and twenty five forms carry
both classes, so on every one of them the form was a flex ROW and the rows
inside it were laid side by side. On the gym card that pushed the induction
fields 17px off the side of a phone. This is the same collision that
wrecked the PAR-Q layout; that was fixed for one form, and this fixes the
cause. */
form.mini.payform{display:block}
.mb{width:30px;height:30px;border:1px solid var(--line);background:#fff;cursor:pointer;
border-radius:6px;font:inherit;font-size:.8rem;font-weight:800;color:var(--mut);padding:0}
.mb:hover{border-color:#b9c6d6;color:var(--ink)}
.mb.yes:hover,.mb.yes.on{background:var(--yes);border-color:var(--yes);color:#fff}
.mb.maybe:hover,.mb.maybe.on{background:var(--maybe);border-color:var(--maybe);color:#fff}
.mb.no:hover,.mb.no.on{background:var(--no);border-color:var(--no);color:#fff}
.pickhead{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--navy);
font-weight:800;margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.pickrow{display:flex;align-items:center;gap:.6rem;padding:.3rem 0}
.pickrow+.pickrow{border-top:1px solid var(--line-2)}
.pickrow .pl{flex:0 0 8.5rem;font-size:.8rem;color:var(--mut)}
.pickrow select{flex:1;min-width:0}
@media(max-width:640px){ .pickrow .pl{display:none} }
/* ---------------------------- photo upload ---------------------------- */
.photobar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:#fff;
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
padding:.7rem 1rem;margin-bottom:1.2rem}
.photobar .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--mut);font-weight:700}
.photobar .mut{font-size:.78rem;flex:1 1 18rem}
.photobar input[type=file]{font-size:.82rem;max-width:100%}
/* ------------------------------ team sheet ---------------------------- */
.tsheet{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.4rem;align-items:start;
margin-bottom:1.7rem}
.tsheet-canvas{background:var(--navy);border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sh-lg);line-height:0}
.tsheet-canvas canvas{width:100%;height:auto;display:block}
@media(max-width:880px){ .tsheet{grid-template-columns:1fr} }
@media print{
.top,nav.main,.demo-bar,.hoops,footer,.tsheet,.sec-head .more,#tt{display:none !important}
body{background:#fff}
main{max-width:none;padding:0}
.card{box-shadow:none;border:1px solid #999}
.printable{page-break-inside:avoid}
}
/* ================================================== dashboard and squad v3 */
/* Card heading, for the small stacked cards on the dashboard. */
.card-h{padding:.7rem 1rem .55rem;font-weight:700;font-size:.76rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line-2)}
.card .pad.tight{padding:.75rem 1rem}
.mt{margin-top:.55rem}
.mut.sm,.sm{font-size:.78rem}
.pill.sm{font-size:.68rem;padding:.08rem .38rem}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* The chase list. Names as chips, because it is read at arm's length while
somebody is holding a phone in the other hand. */
.chase{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-block;padding:.28rem .6rem;border-radius:999px;background:var(--line-2);
border:1px solid var(--line);color:var(--ink);font-size:.82rem;font-weight:600;
text-decoration:none;transition:background .12s}
.chip:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.more{background:transparent;border-style:dashed;color:var(--mut)}
.chip.more:hover{background:var(--navy);border-style:solid;color:#fff}
/* Form guide. Oldest on the left so it reads like a sentence. */
.formline{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.4rem}
.fm{width:1.65rem;height:1.65rem;border-radius:6px;display:grid;place-items:center;
font-weight:800;font-size:.78rem;color:#fff;cursor:default}
.fm.w{background:var(--good)} .fm.l{background:var(--bad)} .fm.d{background:var(--warn)}
/* Squad flag editor, tucked behind a disclosure so 60 rows stay readable. */
.flagbox{margin-top:.3rem}
.flagbox>summary{cursor:pointer;font-size:.76rem;color:var(--mut);
text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.flagbox>summary:hover{color:var(--navy)}
.flagbox form.mini{margin-top:.45rem;padding:.55rem;background:var(--line-2);
border-radius:var(--r);display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.flagbox label{display:flex;gap:.35rem;align-items:center;font-size:.8rem;white-space:nowrap}
.flagbox input[type=text]{width:100%;min-width:11rem}
/* Override rows: name and reason on the left, the decision on the right. */
.ovr{display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap;
padding:.6rem 0;border-bottom:1px solid var(--line-2)}
.ovr:last-of-type{border-bottom:0}
.ovr .l{flex:1 1 16rem;min-width:0;font-size:.88rem}
.ovr input[type=text]{flex:1 1 14rem;min-width:0}
form.mini.inline{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:0}
/* Eligibility warning. Deliberately louder than the availability one: getting
this wrong costs league points, not goodwill. */
.flash.err.elig{border-left-width:5px}
.flash .tight{margin:.4rem 0 .5rem;padding-left:1.1rem}
.flash .tight li{margin:.15rem 0}
/* Your next games reuses .attn .row, so the answer buttons need to sit on the
right of it without pushing the text around. */
.attn .row .avail-btns{margin-left:auto;flex:0 0 auto}
.attn .row>.pill{flex:0 0 auto}
@media(max-width:620px){
.attn .row{flex-wrap:wrap}
.attn .row .avail-btns{margin-left:0}
}
/* ==================================================== matchday, the one page */
/* Header: days to go, the game, how many are named. Reads left to right in
one glance, which is all the attention it will get on a Thursday. */
.md-head{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;
background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:1.05rem 1.25rem;
box-shadow:var(--sh-lg);margin-bottom:1rem}
.md-when{flex:0 0 auto;text-align:center;line-height:1;padding-right:1.1rem;
border-right:1px solid rgba(255,255,255,.16)}
.md-when b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.02em}
.md-when span{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.6)}
.md-fix{flex:1 1 18rem;min-width:0}
.md-fix .tagline{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.md-fix h1{font-size:1.6rem;font-weight:800;margin:.15rem 0 .3rem;letter-spacing:-.01em}
.md-facts{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.88rem;color:rgba(255,255,255,.88)}
.md-fix .mut{color:rgba(255,255,255,.55)}
.md-count{flex:0 0 auto;display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}
/* Switching between the games that are coming up. */
.md-switch{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.md-switch a{display:block;padding:.45rem .7rem;border-radius:var(--r);background:var(--card);
border:1px solid var(--line);text-decoration:none;color:var(--ink);line-height:1.25}
.md-switch a b{display:block;font-size:.8rem}
.md-switch a span{font-size:.74rem;color:var(--mut)}
.md-switch a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.md-switch a.on span{color:rgba(255,255,255,.7)}
.md-note textarea{width:100%;font:inherit;padding:.55rem .7rem;border:1px solid var(--line);
border-radius:var(--r);resize:vertical;margin:.4rem 0 .3rem}
.md-note-read{border-left:4px solid var(--red)}
/* The 23 rows. Big targets, one per line, nothing else competing. */
.md-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1rem}
.md-col{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:.5rem .8rem .9rem}
.md-row{display:flex;gap:.6rem;align-items:center;padding:.32rem 0;border-bottom:1px solid var(--line-2)}
.md-row:last-child{border-bottom:0}
.md-row.filled .shirt{background:var(--red)}
.md-pick{flex:1 1 auto;min-width:0}
.md-pick label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.md-pick select{width:100%;font:inherit;font-size:.86rem;padding:.3rem .4rem;
border:1px solid var(--line);border-radius:6px;background:#fff}
.md-note-in{flex:0 0 5rem;font:inherit;font-size:.78rem;padding:.32rem .45rem;
border:1px solid var(--line);border-radius:6px}
.md-note-in:disabled{background:var(--line-2);border-color:var(--line-2)}
.md-bottom{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.md-cap{display:flex;gap:.5rem;align-items:center}
.md-cap select{font:inherit;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px}
.md-confirm{display:flex;gap:.4rem;align-items:center;font-size:.9rem}
.md-save{margin-left:auto;font-size:1rem;padding:.6rem 1.4rem}
/* The pitch. Capped so it never dwarfs the controls on a big screen. */
.md-pitch{max-width:520px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sh-lg);line-height:0}
.md-pitch canvas{width:100%;height:auto;display:block}
.md-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
justify-content:center;margin:.9rem 0 1.4rem}
@media(max-width:820px){
.md-grid{grid-template-columns:1fr}
.md-when b{font-size:2rem}
.md-fix h1{font-size:1.3rem}
.md-note-in{flex-basis:4.5rem}
.md-save{margin-left:0;width:100%}
}
/* ==================================================== admin, the back office
Deliberately drier than the rest of the site. Nobody comes here to enjoy
themselves; they come to fix one thing and leave, usually in a hurry and
often on a phone in a clubhouse car park. So: wide hit targets, the
consequence of every choice written next to the choice, and no decoration
that would compete with the words. */
.subnav{display:flex;gap:.2rem;flex-wrap:wrap;margin:0 0 1rem;
border-bottom:1px solid var(--line)}
.subnav a{padding:.55rem .85rem;font-size:.86rem;font-weight:650;color:var(--mut);
border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--ink);text-decoration:none}
.subnav a.on{color:var(--navy);border-bottom-color:var(--red)}
.rowform{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.rowform label{font-size:.79rem;font-weight:650;color:var(--ink-2);
display:block;margin-bottom:.25rem}
.rowform input,.rowform select{min-width:14rem}
.rowform .btn{white-space:nowrap}
.btnrow{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.card + .card{margin-top:1rem}
p.help{font-size:.82rem;color:var(--mut);margin:.6rem 0 0}
/* Tag variants. The base .tag is neutral; these two carry a verdict. */
.tag.ok{background:#e2f2ea;color:#12503a}
.tag.warn{background:#fbf1dc;color:#7a5a1c}
/* Role checkboxes. The chip elsewhere on the site is a link, so this is the
same shape wired to an input, with the tick state doing the work. */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 1rem}
.chips label.chip{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
padding:.34rem .7rem;transition:background .12s,border-color .12s,color .12s}
.chips label.chip:hover{background:var(--line);border-color:var(--mut);color:var(--ink)}
.chips label.chip input{margin:0;accent-color:var(--navy)}
.chips label.chip:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff}
label.chip.sm{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
padding:.2rem .5rem;font-size:.75rem;margin-right:.4rem}
label.chip.sm input{margin:0;accent-color:var(--navy)}
/* The permission grid. Level columns are narrow and centred so the eye can run
down one column and see which roles hold it. */
table.t.grid td{vertical-align:top;padding:.7rem .6rem}
table.t.grid th.lv,table.t.grid td.lv{width:5.5rem;text-align:center;vertical-align:middle}
table.t.grid td.lv input[type=radio]{width:1.15rem;height:1.15rem;accent-color:var(--navy);cursor:pointer}
table.t.grid .says{font-size:.78rem;color:var(--navy-3);margin-top:.35rem;
padding-left:.6rem;border-left:2px solid var(--line)}
table.t.grid tr.locked td{background:#fbfcfe}
table.t.grid tr.locked .says{border-left-color:var(--warn);color:var(--ink-2)}
table.t.grid select{min-width:8rem}
table.t.grid input[type=text]{width:100%;min-width:8rem}
table.t.rows td{vertical-align:middle}
/* The everything-at-a-glance matrix. Colour is a second cue only: every cell
also says the level in words, so it survives a colourblind reader and a
black and white print. */
.scrollx{overflow-x:auto}
table.t.matrix{font-size:.78rem;white-space:nowrap}
table.t.matrix th{font-size:.66rem}
table.t.matrix td.c{text-align:center}
table.t.matrix td.lvl-view{background:#eef4fb;color:var(--navy-3)}
table.t.matrix td.lvl-edit{background:#e3edf9;color:var(--navy-3);font-weight:650}
table.t.matrix td.lvl-full{background:var(--navy);color:#fff;font-weight:700}
/* The one-time link. Wide, monospace, and selectable in a single click,
because the next thing that happens to it is a copy and paste. */
.linkbox{border-left:4px solid var(--good)}
.linkin{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.82rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--r);
background:var(--line-2);color:var(--ink)}
@media(max-width:720px){
.rowform{align-items:stretch}
.rowform input,.rowform select{min-width:0;width:100%}
table.t.grid th.lv,table.t.grid td.lv{width:3.2rem}
table.t.grid td{padding:.5rem .3rem}
}
table.t.grid tr.locked td{text-align:left}
table.t.grid tr.locked td.lv{text-align:center;vertical-align:middle}
/* The people toolbar. Search on the left because that is the common case;
the one destructive-ish action on the right, in the primary colour, because
the previous version hid it inside a sentence and nobody found it. */
.toolbar{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.toolbar .rowform{flex:1 1 auto}
.toolbar-r{margin-left:auto;flex:0 0 auto}
.addnew{border-left:4px solid var(--navy-3)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:.8rem 1rem;margin:.4rem 0 .2rem}
.fields label{display:block;font-size:.79rem;font-weight:650;color:var(--ink-2);margin-bottom:.25rem}
.fields label .mut{font-weight:400}
.fields input{width:100%}
.flash ul.tight{margin:.45rem 0 .5rem;padding-left:1.1rem}
.flash ul.tight li{margin:.15rem 0}
@media(max-width:640px){
.toolbar-r{margin-left:0;width:100%}
.toolbar-r .btn{width:100%;text-align:center}
}
/* ============================ media and emergency contacts ============= */
/* Forward or back is the question this page gets asked most, so it is the
biggest thing on it. Colour is a second cue only: the word is always there. */
.unit-big{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;text-align:center;
padding:.75rem;border-radius:var(--r);margin-bottom:.9rem}
.unit-forwards{background:var(--navy);color:#fff}
.unit-backs{background:#e8eef7;color:var(--navy);border:1px solid var(--navy-3)}
.unit-none{background:var(--line-2);color:var(--mut);font-size:1rem;font-weight:650}
.unit-coach{background:#f4ede0;color:#6b5320;border:1px solid #e0d0ab}
.unit-pill{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;padding:.16rem .44rem;border-radius:4px}
.unit-pill.unit-forwards{background:var(--navy);color:#fff}
.unit-pill.unit-backs{background:#e8eef7;color:var(--navy-3);border:1px solid #c6d6ea}
.unit-pill.unit-none{background:var(--line-2);color:var(--mut)}
.unit-pill.unit-coach{background:#f4ede0;color:#6b5320;border:1px solid #e0d0ab}
.mc-kn{font-size:.76rem;color:var(--mut);margin:.1rem 0 .15rem}
/* ---- filter bars, sortable headers, paging, the payment bar ---------------
Used by Members, Media and Money. One shape so a filter row looks the same
wherever it appears. */
.filters .frow{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.filters .fld{display:flex;flex-direction:column;gap:.22rem;min-width:8.5rem}
.filters .fld.grow{flex:1 1 12rem}
.filters .fld.btns{flex-direction:row;gap:.4rem;align-items:center;min-width:0}
.filters .fld label{font-size:.7rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--mut)}
.filters .fld select,.filters .fld input{width:100%}
a.sortlink{color:inherit;text-decoration:none;white-space:nowrap}
a.sortlink:hover{text-decoration:underline}
a.sortlink.on{color:var(--navy)}
.pager{display:flex;gap:.8rem;align-items:center;justify-content:center;margin:.9rem 0 .2rem}
.payform{margin-top:.7rem}
.payform .frow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.payform .fld{display:flex;flex-direction:column;gap:.22rem;min-width:7.5rem}
.payform .fld.grow{flex:1 1 10rem}
.payform .fld.btns{flex-direction:row;align-items:center;min-width:0}
.payform .fld label{font-size:.7rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--mut)}
.payform .fld input,.payform .fld select{width:100%}
.paybar{margin:.5rem 0 .2rem}
.paybar .l{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-bottom:.35rem}
.paybar .l b{font-size:1.05rem}
.paybar .bar{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.paybar .bar span{display:block;height:100%;border-radius:99px;background:var(--navy)}
.paybar.done .bar span{background:#1f7a4d}
details.editbox summary{cursor:pointer;list-style:none;display:flex;gap:.5rem;
align-items:baseline;flex-wrap:wrap}
details.editbox summary::-webkit-details-marker{display:none}
details.editbox summary::before{content:'+';font-weight:800;color:var(--navy);
margin-right:.15rem}
details.editbox[open] summary::before{content:'\2212'}
details.editbox summary:hover{color:var(--navy)}
/* A destructive box looks destructive before it is opened, not after. It is
also a separate box from the edit form on purpose: a Remove button sitting
next to Save is how people delete the thing they meant to change. */
details.editbox.danger{border-left:3px solid var(--bad)}
details.editbox.danger summary b{color:var(--bad)}
details.editbox.danger summary::before{color:var(--bad)}
.btn.bad{background:var(--bad)}
.btn.bad:hover{background:#8f1527}
.confirmline{display:flex;gap:.6rem;align-items:flex-start;margin:.8rem 0 0;
padding:.7rem .85rem;border:1px solid var(--line);border-radius:8px;background:var(--line-2)}
.confirmline input{margin-top:.2rem;flex:none;width:18px;height:18px;accent-color:var(--bad)}
.confirmline span{font-size:.93rem}
details.editbox[open] summary{margin-bottom:.6rem;padding-bottom:.5rem;
border-bottom:1px solid var(--line-2)}
/* ---- sponsors ----------------------------------------------------------- */
.slogo.xl{width:112px;height:112px;border-radius:14px;font-size:2.6rem}
.slogo-img{width:46px;height:46px;border-radius:9px;object-fit:contain;
background:#fff;padding:3px;border:1px solid var(--line-2)}
.sponsor-head{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap;
margin-bottom:1.2rem}
.sponsor-head .sh-logo img{width:112px;height:112px;object-fit:contain;
border-radius:14px;background:#fff;padding:8px;border:1px solid var(--line-2)}
.sponsor-head .sh-body{flex:1 1 22rem;min-width:0}
.sponsor-head .sh-tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
.sponsor-head .sh-money{flex:0 0 11rem;border-left:1px solid var(--line-2);
padding-left:1.1rem}
.sponsor-head .sh-money .l{font-size:.66rem;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--mut);margin-top:.5rem}
.sponsor-head .sh-money .n{font-size:1.5rem;font-weight:800;color:var(--navy);
letter-spacing:-.02em}
.sponsor-head .sh-money .n.good{color:#1f7a4d}
.sponsor-head .sh-money .s{font-size:.78rem;color:var(--mut);margin-top:.35rem}
.sociallist a{margin-right:.1rem}
tr.grouprow td{background:var(--line-2);font-size:.8rem;padding-top:.5rem;
padding-bottom:.5rem}
tr.grouprow td b{letter-spacing:.01em}
tr.grouprow td .mut{margin-left:.45rem}
.sh-money .n.sm{font-size:1.1rem}
ul.postlist{list-style:none;margin:.2rem 0 .6rem;padding:0}
ul.postlist li{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
padding:.5rem 0;border-bottom:1px solid var(--line-2)}
ul.postlist li:last-child{border-bottom:0}
.ref{font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap}
td.ref{font-size:.82rem}
.p-hero .sub .ref{opacity:.85}
@media (max-width:700px){
.sponsor-head .sh-money{border-left:0;border-top:1px solid var(--line-2);
padding-left:0;padding-top:.8rem;flex-basis:100%}
}
.md-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.7rem}
/* The squad as cards. Photograph first, because she is usually looking for a
face she half remembers rather than a name she can spell. */
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.85rem}
.mcard{display:flex;gap:.75rem;align-items:center;background:var(--card);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
padding:.65rem .75rem;color:var(--ink);transition:box-shadow .12s,border-color .12s}
.mcard:hover{text-decoration:none;border-color:var(--navy-3);box-shadow:var(--sh-lg)}
.mc-img{flex:0 0 56px;height:56px;border-radius:50%;overflow:hidden;background:var(--navy);
display:flex;align-items:center;justify-content:center}
.mc-img img{width:100%;height:100%;object-fit:cover;display:block}
.mc-ini{color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.mc-body{min-width:0;display:flex;flex-direction:column;gap:.12rem}
.mc-body b{font-weight:700;line-height:1.2}
.mc-pos{font-size:.79rem;color:var(--mut)}
.mc-nums{font-size:.74rem;color:var(--mut)}
.media-imgs{display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:start}
.media-imgs img{width:100%;height:auto;border-radius:var(--r);display:block;
border:1px solid var(--line);margin-top:.3rem}
.noimg{margin-top:.3rem;padding:1.6rem .8rem;text-align:center;color:var(--mut);
background:var(--line-2);border-radius:var(--r);font-size:.82rem}
.promo-thumb{max-width:260px;height:auto;border-radius:var(--r);border:1px solid var(--line);display:block}
/* Emergency contacts. A phone number that cannot be tapped on a phone at the
side of a pitch is a phone number that does not work. */
table.t.ec td{vertical-align:middle;padding:.6rem .5rem}
table.t.ec td a{font-weight:650;font-size:1rem}
.nowrap{white-space:nowrap}
.ecform{border-top:1px solid var(--line);margin-top:.9rem;padding-top:.9rem}
h3.sec.sm{font-size:.95rem;margin-bottom:.5rem}
@media(max-width:820px){
.md-two{grid-template-columns:1fr}
.media-imgs{grid-template-columns:1fr}
}
/* The stat tiles were written for the navy player hero, so their numbers are
white. On the media page they sit on a white card, where white on white is
just a gap where a number should be. Same shape, readable ink. */
.p-stats.on-light .p-stat{color:var(--ink)}
.p-stats.on-light .p-stat b{color:var(--navy)}
.p-stats.on-light .p-stat span{color:var(--mut)}
.unit-pill.unit-none{font-weight:650;letter-spacing:.04em;text-transform:none}
/* The tiles need a row to sit in. On the player hero they inherit one from a
flex ancestor; standing on their own they were stacking one per line. */
.p-stats.on-light{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:space-between}
/* The base input rule lists types one by one, so anything it does not name
falls back to the browser's own styling and looks broken next to a field
that matched. tel, search, date and a bare input with no type attribute all
missed. Listing them here rather than editing the original keeps the
original rule as the record of what was there first. */
select,
input[type=text],input[type=number],input[type=email],input[type=password],
input[type=tel],input[type=search],input[type=date],input[type=url],
input:not([type]){
font:inherit;font-size:.88rem;padding:.4rem .55rem;border:1px solid #c8d3e0;
border-radius:7px;background:#fff;color:var(--ink);max-width:100%}
/* .btn sets display:inline-block, which beats the hidden attribute, so a
hidden button stayed on screen. */
[hidden]{display:none !important}
/* An active filter chip. Same shape as a link chip so a row of them reads as
one control rather than as navigation. */
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* =====================================================================
PHONES AND TABLETS
=====================================================================
Most people who use this will be holding a phone, standing in a car
park, one-handed, on club wifi. Everything below is written for that
person rather than for a desktop window dragged narrow.
Three sizes. 820px and under is a tablet in portrait or anything
smaller. 640px and under is a phone. 380px and under is a small phone
(an iPhone SE or a compact Android), where a couple of things have to
give up more.
===================================================================== */
/* ---------------------------------------------------------------------
1. The single biggest annoyance: iOS zooms the entire page in when you
focus a field whose text is smaller than 16px, and does not zoom back
out. Every control in this app was 13 to 14px, so every tap on every
form zoomed the page. 16px exactly, everywhere a finger can land.
Applies from tablet down because iPad Safari does the same thing.
--------------------------------------------------------------------- */
@media(max-width:820px){
input,select,textarea,button,.btn,.ab,.mb{font-size:16px}
select,input[type=text],input[type=number],input[type=email],
input[type=password],input[type=search],input[type=tel],input[type=url],
input[type=date],input[type=time],textarea{
font-size:16px;padding:.6rem .7rem;border-radius:9px;
/* iOS ignores the border radius and background on a native select
unless the appearance is reset. */
-webkit-appearance:none;appearance:none;background-color:#fff}
/* A select still needs an arrow once its native appearance is gone. */
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2367748a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .7rem center;
background-size:12px 8px;padding-right:2.1rem}
input[type=date],input[type=time]{min-height:2.85rem}
}
/* ---------------------------------------------------------------------
2. Tap targets. Apple asks for 44 by 44, Android for 48 by 48. Buttons
and controls were coming out at 29 to 35 tall, which is a miss waiting
to happen when the bus is moving.
--------------------------------------------------------------------- */
@media(max-width:820px){
.btn,button,select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]){
min-height:44px}
.btn{padding:.7rem 1.1rem;border-radius:9px}
.btn.sm{padding:.55rem .85rem;min-height:40px}
input[type=checkbox],input[type=radio]{width:22px;height:22px}
/* A checkbox or radio is small by nature, so the label around it takes
the tap instead. */
label:has(input[type=checkbox]),label:has(input[type=radio]){
display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
details.editbox summary{min-height:44px;align-items:center;padding:.2rem 0}
/* Stop the grey flash on tap, which reads as a rendering fault, but keep
a real pressed state so a tap still feels like it did something. */
a,button,.btn,summary,.ab,.mb,.chip{-webkit-tap-highlight-color:transparent}
a:active,button:active,.btn:active,.ab:active,.mb:active,.chip:active{opacity:.72}
}
/* ---------------------------------------------------------------------
3. The frame: notches, home indicators and rubber banding.
--------------------------------------------------------------------- */
@supports(padding:max(0px)){
.top-in,main,footer{
padding-left:max(1.25rem,env(safe-area-inset-left));
padding-right:max(1.25rem,env(safe-area-inset-right))}
main{padding-bottom:max(4rem,calc(3rem + env(safe-area-inset-bottom)))}
}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Momentum scrolling inside the boxes that scroll on their own. */
.tw,.card>table.t,nav.main,.chase{-webkit-overflow-scrolling:touch}
/* ---------------------------------------------------------------------
4. Chrome. The navigation is a horizontal scroller on a phone, so it
needs to be tall enough to hit and to look scrollable rather than cut
off. The scrollbar itself is hidden because a phone does not show one.
--------------------------------------------------------------------- */
@media(max-width:820px){
.top-in{padding-top:.55rem;padding-bottom:.55rem;gap:.6rem}
.crest{height:36px}
.wordmark{font-size:.95rem} .wordmark small{display:none}
main{padding-top:1rem}
/* The horizontal scroller that used to live here is gone with the bar. */
}
/* ---------------------------------------------------------------------
5. Filter bars. Six dropdowns side by side is a desktop idea. On a
phone they stack, full width, and the whole bar collapses behind a
summary so it does not push the list itself below the fold.
--------------------------------------------------------------------- */
@media(max-width:640px){
.filters .frow,.payform .frow{flex-direction:column;align-items:stretch;gap:.55rem}
/* flex-basis follows the main axis. Once the row becomes a column, a
"flex:1 1 12rem" field stops being 12rem wide and becomes 12rem TALL,
which is where the 192px of blank space under the search box came
from. In a column every field is simply its own height. */
.filters .fld,.payform .fld,.filters .fld.grow,.payform .fld.grow,
.filters .fld.btns,.payform .fld.btns{flex:0 0 auto;min-width:0;width:100%}
.filters .fld.btns,.payform .fld.btns{flex-direction:row;gap:.5rem}
.filters .fld.btns .btn,.payform .fld.btns .btn{flex:1}
.editrow{flex-direction:column;align-items:stretch}
.editrow select,.editrow input{width:100%}
}
/* ---------------------------------------------------------------------
6. Tables. Two problems on a phone. Long names were being broken a
character at a time because overflow-wrap:anywhere applied to every
cell, so a name column came out twelve pixels wide and three hundred
tall. And every table tried to fit eight columns into 390px.
So: names and short values stop breaking mid-word and the table
scrolls sideways inside its own card instead, and the columns a phone
does not need are hidden. Tapping the row still opens the full record,
which is where the hidden detail lives.
--------------------------------------------------------------------- */
@media(max-width:820px){
td,th{overflow-wrap:normal}
/* Only genuinely unbreakable things still get force-broken. */
td a[href^="mailto"],td .mc-kn,.facts dd,.note,.lead{overflow-wrap:anywhere}
table.t{font-size:.92rem}
table.t th{font-size:.68rem}
table.t td,table.t th{padding:.6rem .55rem}
/* A name in a list is a tap target, so give it a row's worth of height. */
table.t td a{display:inline-block;padding:.15rem 0;min-height:24px}
.tw,.card>table.t{overflow-x:auto;max-width:100%}
}
@media(max-width:640px){
/* Columns that earn their place on a phone, per table. The comment on
each line names the columns being dropped so this stays maintainable;
the mobile test fails if a table stops matching its shape. */
/* Members: keep name, membership, status. Drop member number, position,
F/B, RFU number and contact; all of them are on the record itself. */
/* Member number is a reference you look up, not something you scan a
list by, so on a phone the name gets its width instead. */
table.t.t-members th:nth-child(1),table.t.t-members td:nth-child(1),
table.t.t-members th:nth-child(3),table.t.t-members td:nth-child(3),
table.t.t-members th:nth-child(4),table.t.t-members td:nth-child(4),
table.t.t-members th:nth-child(6),table.t.t-members td:nth-child(6),
table.t.t-members th:nth-child(7),table.t.t-members td:nth-child(7){display:none}
/* Money: keep member, paying, received, state. Drop membership and the
full-season figure. */
table.t.t-money th:nth-child(2),table.t.t-money td:nth-child(2),
table.t.t-money th:nth-child(4),table.t.t-money td:nth-child(4){display:none}
/* Sponsors: keep sponsor, what they sponsor, state. Drop contact and value. */
table.t.t-sponsors th:nth-child(3),table.t.t-sponsors td:nth-child(3),
table.t.t-sponsors th:nth-child(4),table.t.t-sponsors td:nth-child(4){display:none}
/* Roles: keep post, who, DBS. Drop contact, first aid and since. */
table.t.t-roles th:nth-child(3),table.t.t-roles td:nth-child(3),
table.t.t-roles th:nth-child(5),table.t.t-roles td:nth-child(5),
table.t.t-roles th:nth-child(6),table.t.t-roles td:nth-child(6){display:none}
/* The fixture squad list: shirt, player, answer, and the three keys.
Usual position goes. */
table.t.t-avail th:nth-child(3),table.t.t-avail td:nth-child(3){display:none}
/* The squad page on a phone: shirt, player, availability. Usual position,
forward-or-back, appearances, can-play and the flags column all live on
the player's own record, one tap away. Missing emergency contacts have
their own line on the dashboard, so nothing is lost by dropping them
from a list nobody can read at this width. */
table.t.t-squad th:nth-child(3),table.t.t-squad td:nth-child(3),
table.t.t-squad th:nth-child(4),table.t.t-squad td:nth-child(4),
table.t.t-squad th:nth-child(5),table.t.t-squad td:nth-child(5),
table.t.t-squad th:nth-child(6),table.t.t-squad td:nth-child(6),
table.t.t-squad th:nth-child(8),table.t.t-squad td:nth-child(8){display:none}
/* Compliance: person and the DBS issue. Role, renewal date and the
expired-qualification count come off. */
table.t.t-gaps th:nth-child(2),table.t.t-gaps td:nth-child(2),
table.t.t-gaps th:nth-child(4),table.t.t-gaps td:nth-child(4),
table.t.t-gaps th:nth-child(5),table.t.t-gaps td:nth-child(5){display:none}
/* Safeguarding: person, age, what is missing. The membership category is
context rather than the point, and it is on their record anyway. */
table.t.t-safeguard th:nth-child(3),table.t.t-safeguard td:nth-child(3){display:none}
/* The gym chase list: member and what is blocking them. */
table.t.t-gym th:nth-child(2),table.t.t-gym td:nth-child(2){display:none}
}
/* ---------------------------------------------------------------------
7. The three availability keys. This is the one thing a player opens
the site to do, so on a phone they become a row of three full-width
buttons under the fixture rather than three small keys beside it.
--------------------------------------------------------------------- */
@media(max-width:640px){
.myavail .in{flex-direction:column;align-items:stretch;gap:.8rem}
.myavail .me{flex:0 0 auto}
.avail-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;width:100%}
.avail-btns input[name=reason]{grid-column:1/-1;min-width:0}
.ab{min-height:52px;font-size:1rem;padding:.6rem .4rem;border-radius:10px}
/* The compact three-key form a coach uses down a squad list. Bigger,
but still a row, because it sits inside a table cell. */
.mb{width:42px;height:42px;font-size:.95rem}
form.mini{gap:.3rem}
/* The dashboard's per-game Y / ? / N row. */
.attn .row .avail-btns{grid-template-columns:1fr 1fr 1fr;margin-top:.5rem}
.attn .row{flex-wrap:wrap}
}
/* ---------------------------------------------------------------------
8. Everything else that was built assuming a wide window.
--------------------------------------------------------------------- */
@media(max-width:820px){
.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.squad{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.hero .body{padding:1.2rem 1.15rem}
.p-hero .in{padding:1.1rem 1.15rem;gap:.9rem}
.p-hero .meta{margin-left:0;gap:1.1rem;width:100%}
.card.pad{padding:.9rem .95rem}
.sec-head{flex-wrap:wrap;gap:.35rem}
.sec-head .more{margin-left:0}
}
@media(max-width:640px){
.tiles{grid-template-columns:1fr 1fr}
.squad{grid-template-columns:1fr}
.hero-split{gap:1rem} .hero-split .r{width:100%;justify-content:space-between}
.pcard{padding:.85rem .9rem}
.pickrow{flex-wrap:wrap}
/* The matchday note field and the pick headings were wider than the
phone, which took the whole page sideways with them. */
.pickhead{max-width:100%;overflow-wrap:anywhere}
.md-note-in,.md-note input{width:100%;min-width:0;max-width:100%}
.photobar{flex-direction:column;align-items:stretch}
.photobar input[type=file]{width:100%}
.formline{gap:.25rem}
.chase{gap:.35rem}
footer{font-size:.75rem}
}
@media(max-width:380px){
.tiles{grid-template-columns:1fr}
main{padding-left:.85rem;padding-right:.85rem}
.card.pad{padding:.8rem .8rem}
.hero h1{font-size:1.3rem}
.top-in{gap:.45rem} .crest{height:30px}
}
/* A file input is a native control on both platforms and cannot be
restyled, but it can at least be stopped from running off the edge. */
input[type=file]{max-width:100%}
/* Somebody printing a team sheet from a phone should still get the page,
not the phone layout, so the print rules stay last. */
@media print{
nav.main,.top,.filters,.editbox,footer{display:none !important}
main{padding:0}
}
/* ---------------------------------------------------------------------
9. The stragglers the audit found on a second pass. Each of these
carried a font-size of its own that beat the blanket rule above, and
each is a control somebody taps.
--------------------------------------------------------------------- */
@media(max-width:820px){
.md-pick select,.md-note-in,.md-note textarea,.md-note input,
.photobar input[type=file],.pickrow select,.mini input,.mini select,
input[name=reason],input[type=file]{font-size:16px}
.md-note-in{flex:1 1 6rem;padding:.5rem .6rem}
.md-pick select{padding:.55rem .6rem}
.pickrow{padding:.45rem 0;gap:.5rem}
}
/* A row in a list is the tap target, not the few words of link text
inside it, so the rows themselves get a thumb's worth of height. */
@media(max-width:640px){
table.t td{padding:.75rem .55rem}
table.t td a{display:block;padding:.2rem 0}
table.t td form.mini a,table.t td a.btn,table.t td .pill a{display:inline-block}
/* Sortable column headings are tiny text by design. On a phone the
header row is a control, so it gets height. */
table.t th{padding:.6rem .55rem}
a.sortlink{display:inline-block;padding:.3rem 0}
/* The quick cuts under a filter bar ("Active playing members",
"Lapsed", "Club sponsors") were 17px of underlined text. They become
what they always were: a row of buttons. */
.quickcuts,.cuts{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.quickcuts a,.cuts a{display:inline-block;padding:.55rem .8rem;border-radius:999px;
background:var(--line-2);color:var(--navy);font-size:.85rem;font-weight:650;
text-decoration:none;min-height:40px;line-height:1.6}
.quickcuts a:active,.cuts a:active{background:var(--line)}
/* Name chips on the dashboard and the fixture filter chips. */
.chip{padding:.5rem .8rem;font-size:.85rem;min-height:40px;line-height:1.5}
}
/* ---------------------------------------------------------------------
10. Specificity, not intent. A rule further up names input:not([type]),
which outranks the blanket 16px above it, so a bare with no
type attribute kept its 14px and kept zooming iOS. Same story for a
handful of selects. Listed explicitly so the next person can see why.
--------------------------------------------------------------------- */
@media(max-width:820px){
input:not([type]):not([type=hidden]),
select#capt,select[name=captain],
.ecform input,.ecform select,
form.mini input:not([type]),form.mini select{
font-size:16px;padding:.6rem .7rem;border-radius:9px;min-height:44px}
}
/* ---------------------------------------------------------------------
11. A link in a list row should take the tap anywhere in the row, not
only on the few words of text. The negative margin means the link's hit
area grows into the cell's padding without the row getting taller.
--------------------------------------------------------------------- */
/* A tablet is a touch screen too, so this runs from 820 down, while the
column hiding above stays a phone-only thing. */
@media(max-width:820px){
/* Block, not flex. The anchor holds "Surname, First name" as two
inline pieces; as a flex container they became two flex items and the
first name shot off to the right of the cell. */
table.t td>a:not(.btn):not(.pill){
display:block;padding:.6rem 0;margin:-.6rem 0;min-height:44px}
table.t td>a b{font-weight:650}
/* A phone number or an email address in a record is a one-tap action:
dial, or open mail. Worth a proper target. */
a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;
min-height:44px;padding:.2rem 0}
/* Sortable headings and the back links that sit above a record. */
a.sortlink{display:inline-flex;align-items:center;min-height:44px;padding:.3rem 0}
.sec-head .more,a.more{display:inline-flex;align-items:center;min-height:44px}
.quickcuts,.cuts{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.quickcuts a,.cuts a{display:inline-flex;align-items:center;padding:.5rem .8rem;
border-radius:999px;background:var(--line-2);color:var(--navy);font-size:.85rem;
font-weight:650;text-decoration:none;min-height:44px}
.quickcuts a:active,.cuts a:active{background:var(--line)}
.chip{display:inline-flex;align-items:center;padding:.45rem .8rem;
font-size:.85rem;min-height:44px}
}
/* A label that wraps nothing is a caption, not a control, so it is not
trying to be a tap target and does not need a tap target's height. */
.pcard .fl,.pcard .fl *{pointer-events:none}
/* ---------------------------------------------------------------------
12. The last few, found by measuring rather than by eye.
--------------------------------------------------------------------- */
@media(max-width:820px){
/* Every disclosure is a tap target, not only the ones in an editbox. */
details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
details.editbox>summary{flex-wrap:wrap}
/* A dial or mail link nested inside a table cell was losing to the
generic cell-link rule and coming out 24px tall. */
table.t td a[href^="tel:"],table.t td a[href^="mailto:"],
.mc-kn a,.facts dd a,.facts dt a{
display:inline-flex;align-items:center;min-height:44px;padding:.2rem 0}
/* The coach's three keys down a squad list: 30px wide is a thumb-width
miss on a tablet as much as on a phone. */
.mb{width:44px;height:44px;font-size:.95rem}
form.mini{gap:.3rem}
}
/* The collapsed filter bar on a phone. It is a real disclosure so the
summary is the control, and it opens already open when a filter is set. */
details.filterdrop>summary{list-style:none;font-size:.92rem;gap:.4rem}
details.filterdrop>summary::-webkit-details-marker{display:none}
details.filterdrop>summary::after{content:'▾';margin-left:auto;color:var(--mut);
font-size:.9rem;transition:transform .15s}
details.filterdrop[open]>summary::after{transform:rotate(180deg)}
details.filterdrop>summary .mut{font-weight:400;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;min-width:0}
details.filterdrop>.frow{margin-top:.7rem}
/* The hoop motif is the club's shirt at desktop width. On a phone the
34px blocks read as a row of broken boxes rather than a hooped rule,
so the hoops narrow with the screen. */
@media(max-width:640px){
.hoops{height:6px;background:repeating-linear-gradient(90deg,
var(--navy) 0 18px,#fff 18px 36px)}
.hoops.thin{height:4px;background:repeating-linear-gradient(90deg,
var(--navy) 0 12px,#fff 12px 24px)}
}
/* The member-view banner. Loud on purpose: somebody who forgets they are in
it will report a bug that is not a bug. */
.asmember-bar{background:#12503a;color:#dff0e7;font-size:.86rem;
padding:.5rem 1.25rem;display:flex;gap:.9rem;align-items:center;
justify-content:center;flex-wrap:wrap}
.asmember-bar b{color:#fff}
.asmember-bar .btn{background:#fff;color:#12503a}
.asmember-bar .btn:hover{background:#e6f3ec;color:#0e3d2c}
@media(max-width:640px){
.asmember-bar{padding:.6rem .85rem;text-align:center;font-size:.82rem}
}
/* A document being read for signature. Narrower than the page, because a
waiver nobody can read is a waiver nobody has really agreed to. */
.doc-body{padding:1.1rem 1.35rem 1.4rem;border-top:1px solid var(--line);
background:#fcfdfe;max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.doc-body>*{max-width:68ch}
.doc-body p{margin:.55rem 0;line-height:1.65}
.doc-body h2.doc-h{font-size:1.05rem;margin:1.2rem 0 .35rem;color:var(--navy)}
.doc-body h3.doc-h{font-size:.95rem;margin:1rem 0 .3rem;color:var(--navy)}
.doc-body h4.doc-h,.doc-body h5.doc-h{font-size:.9rem;margin:.85rem 0 .25rem;color:var(--ink)}
.doc-body ul{margin:.4rem 0 .6rem 1.1rem;padding:0}
.doc-body li{margin:.22rem 0;line-height:1.6}
.doc-body hr{border:0;border-top:1px solid var(--line);margin:1.1rem 0}
.doc-body blockquote.doc-q{margin:.6rem 0;padding:.5rem .9rem;border-left:3px solid var(--red);
background:#fff5f6;color:var(--ink-2);border-radius:0 6px 6px 0}
@media(max-width:640px){
.doc-body{padding:.9rem .95rem 1.1rem;max-height:none}
}
/* The induction checklist. One item per line, ticks big enough to hit on a
phone in a gym, because that is where this gets filled in. */
ul.checklist{list-style:none;margin:.2rem 0 .8rem;padding:0}
ul.checklist li{padding:.35rem 0;border-bottom:1px solid var(--line-2)}
ul.checklist li:last-child{border-bottom:0}
ul.checklist label.chip{white-space:normal;text-align:left;align-items:flex-start}
ul.checklist .mc-kn{margin-left:2.1rem}
@media(max-width:640px){
ul.checklist label.chip{padding:.5rem .7rem}
ul.checklist .mc-kn{margin-left:0;margin-top:.25rem}
}
/* =====================================================================
MY PAPERWORK
The one screen nearly every member will use, most of them on a phone,
many of them once. It has to be obvious without being explained.
Built mobile first: the phone rules are the plain ones and the desktop
refinements sit inside a min-width query. The previous version did the
opposite and the phone inherited a table layout that broke words one
character at a time.
===================================================================== */
/* ---------------------------------------------------------- page head */
.pw-head{margin:0 0 1.15rem}
.pw-head h2{font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.15}
.pw-head p{margin:.3rem 0 0;color:var(--mut);font-size:.94rem;max-width:52ch}
/* ------------------------------------------------------- the cards */
.pwc{margin:0 0 1.15rem;overflow:hidden}
/* A 4px spine down the left says what state this is in before you read a
word. Colour alone never carries it: the pill in the header says the
same thing in words, for anyone who cannot see the difference. */
.pwc{border-left:4px solid var(--line);border-top-left-radius:0;border-bottom-left-radius:0}
.pwc.is-todo{border-left-color:var(--bad)}
.pwc.is-flag{border-left-color:var(--warn)}
.pwc.is-done{border-left-color:var(--good)}
.pwc.is-idle{border-left-color:var(--line)}
.pwc-h{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.1rem .8rem;
border-bottom:1px solid var(--line-2)}
.pwc-t{min-width:0;flex:1}
.pwc-h h3{font-size:1.08rem;font-weight:700;color:var(--navy);line-height:1.25}
.pwc-sub{margin:.15rem 0 0;font-size:.8rem;color:var(--mut)}
.pwc-h .pill{flex:0 0 auto;margin-top:.1rem;font-size:.78rem;padding:.24rem .62rem}
.pwc-b{padding:1rem 1.1rem}
.pwc-b>:last-child{margin-bottom:0}
.lede{margin:0 0 1rem;color:var(--ink-2);font-size:.94rem;line-height:1.6;max-width:62ch}
/* --------------------------------------------------- label and value
The old dl put the value 34% across the card, which on a wide screen
left a canyon between "Completed" and the date. Label above value,
pairs side by side once there is room. */
dl.kv{margin:0 0 1rem;display:grid;gap:.7rem}
dl.kv dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
font-weight:700;color:var(--mut);margin:0 0 .18rem}
dl.kv dd{margin:0;font-size:.95rem;color:var(--ink)}
dl.kv .pill{white-space:normal;text-align:left;line-height:1.4;padding:.28rem .6rem}
/* ------------------------------------------------------- disclosures
These used to be a bare "+" on a hairline at the very bottom edge of a
card, which read as a footer rather than a control. Now they are a
full-width bar you can hit with a thumb. */
.drop{border-top:1px solid var(--line-2)}
.pwc-b .drop{border:1px solid var(--line);border-radius:var(--r);margin:0 0 1rem;overflow:hidden}
.drop>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
gap:.6rem;flex-wrap:wrap;padding:.85rem 1.1rem;font-size:.94rem;
background:#fbfcfe;transition:background .12s}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:'';margin-left:auto;flex:0 0 auto;width:.55rem;height:.55rem;
border-right:2px solid var(--navy-3);border-bottom:2px solid var(--navy-3);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.drop[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.drop>summary:hover{background:var(--line-2)}
.drop-t{font-weight:700;color:var(--navy)}
.drop-s{color:var(--mut);font-size:.83rem}
.drop[open]>summary{border-bottom:1px solid var(--line-2)}
.drop-b{padding:1.1rem}
.drop-main>summary{background:#f4f7fb;font-size:1rem;padding:1rem 1.1rem}
.pwc.is-todo .drop-main>summary{background:#fdf2f3}
/* ------------------------------------------------------ the questions
A list, not a table. Number, question, answer. On a phone the answer
control drops beneath the question at full width, because a 13 row
grid with a control squeezed into a third column is what made the old
one unreadable. */
.qlist{list-style:none;margin:0;padding:0;counter-reset:none}
.qlist>li{display:grid;grid-template-columns:1.75rem 1fr;gap:.1rem .6rem;
padding:.9rem 0;border-top:1px solid var(--line-2);align-items:start}
.qlist>li:first-child{border-top:0;padding-top:0}
.q-n{grid-column:1;font-size:.78rem;font-weight:800;color:var(--mut);
line-height:1.5;font-variant-numeric:tabular-nums}
.q-t{grid-column:2;font-size:.95rem;line-height:1.5;color:var(--ink)}
.q-a{grid-column:2;margin-top:.55rem}
/* the yes/no control: two big targets, state visible without opening
anything, and no dropdown to fight on a phone */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;
overflow:hidden;background:#fff}
.seg label{position:relative;margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.seg label>span{display:block;padding:.62rem 1.35rem;font-size:.95rem;font-weight:650;
color:var(--ink-2);text-align:center;transition:background .12s,color .12s}
/* On a phone the pair fills the row, so each answer is a target you can hit
with a thumb without looking. 44px is the floor both Apple and Google
publish and these come out a little over it. */
.seg{display:flex;width:100%;max-width:19rem}
.seg label{flex:1 1 50%;display:flex}
.seg label>span{width:100%;display:flex;align-items:center;justify-content:center}
.seg label+label>span{border-left:1px solid var(--line)}
.seg label:hover>span{background:var(--line-2)}
/* :focus-visible on the hidden input, drawn on the label it belongs to,
so keyboard users can see where they are */
.seg input:focus-visible+span{outline:2px solid var(--navy-3);outline-offset:-2px}
.seg input[value=no]:checked+span{background:var(--good);color:#fff}
.seg input[value=yes]:checked+span{background:var(--serious);color:#fff}
.qlist>li.done .q-n{color:var(--navy-3)}
.qlist-read>li{padding:.75rem 0}
.qlist-read .q-a{margin-top:.4rem}
/* the running count, so you know how far through you are */
.qcount{margin:0 0 1rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--mut)}
.qcount.all{color:var(--good)}
.qcount:empty{display:none}
/* --------------------------------------------------- the declaration */
.declare{margin:1.3rem 0;padding:.95rem 1.05rem;background:#f7f9fc;
border:1px solid var(--line);border-radius:var(--r)}
.declare h4{margin:0 0 .35rem;font-size:.75rem;text-transform:uppercase;
letter-spacing:.07em;color:var(--navy);font-weight:800}
.declare p{margin:0;font-size:.89rem;line-height:1.6;color:var(--ink-2)}
/* --------------------------------------------------------- the fields
Not form.mini. That is a flex row built for one input and a button,
and using it here turned the whole form into a single row: the table
became one flex item and the signature block another, sitting beside
each other. */
.fgrid{display:grid;gap:.85rem;margin:0 0 1.3rem}
.fgrid-h{grid-column:1/-1;margin:0;font-size:.75rem;text-transform:uppercase;
letter-spacing:.07em;font-weight:800;color:var(--navy)}
.parqform .f{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.parqform .f label{font-size:.83rem;font-weight:650;color:var(--ink-2)}
.parqform .f .opt{font-weight:400;color:var(--mut)}
.parqform .f input{width:100%;padding:.6rem .7rem;font:inherit;font-size:1rem;
border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.parqform .f input:focus{outline:2px solid var(--navy-3);outline-offset:-1px;border-color:var(--navy-3)}
.f-help{font-size:.8rem;color:var(--mut);line-height:1.45}
.fdo{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;
padding-top:1.1rem;border-top:1px solid var(--line-2)}
.fdo .f-help{max-width:46ch}
.btn.lg{padding:.72rem 1.5rem;font-size:.98rem;width:100%;text-align:center}
/* ------------------------------------------------ documents to sign */
.pw-sub{margin:1.9rem 0 .9rem}
.pw-sub h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
color:var(--mut);font-weight:800}
.pw-sub p{margin:.25rem 0 0;font-size:.88rem;color:var(--mut);max-width:56ch}
/* A document nobody can sign yet is information, not a task. It should
not shout as loudly as the thing that actually needs doing. */
.pwc.is-idle .pwc-h h3{color:var(--ink-2)}
.docnote{margin:0 0 .9rem;padding:.7rem .85rem;border-radius:8px;
background:#f7f9fc;border:1px solid var(--line);font-size:.88rem;
line-height:1.55;color:var(--ink-2)}
.docnote b{color:var(--ink)}
.pw-foot{margin:1.6rem 0 0;padding:1rem 1.1rem;border-radius:var(--r);
background:transparent;border:1px dashed var(--line);
font-size:.85rem;line-height:1.6;color:var(--mut);max-width:78ch}
.pw-foot b{color:var(--ink-2)}
/* ------------------------------------------------------------ wider
Everything above is the phone. These are the additions once there is
room, and nothing here is load bearing. */
@media(min-width:700px){
.pw-head h2{font-size:1.7rem}
.pwc-h{padding:1.15rem 1.4rem .95rem}
.pwc-b,.drop-b{padding:1.3rem 1.4rem}
.drop>summary{padding:.9rem 1.4rem}
.drop-main>summary{padding:1.05rem 1.4rem}
/* label left, value right, but only 12rem of label so the value does
not end up marooned halfway across a wide card */
dl.kv{grid-template-columns:12rem 1fr;gap:0}
dl.kv dt{padding:.65rem 1rem .65rem 0;margin:0;border-top:1px solid var(--line-2);
display:flex;align-items:center}
dl.kv dd{padding:.65rem 0;border-top:1px solid var(--line-2);display:flex;align-items:center}
dl.kv dt:first-of-type,dl.kv dt:first-of-type+dd{border-top:0}
/* question and answer on one line, answer right aligned in its own
column so all thirteen controls line up down the page */
.qlist>li{grid-template-columns:1.75rem 1fr 11rem;align-items:center;padding:.8rem 0}
.seg{width:auto;max-width:none;display:inline-flex}
.seg label{flex:0 0 auto}
.seg label>span{min-width:4.5rem;padding:.5rem 1.1rem}
.q-t{padding-right:1rem}
.q-a{grid-column:3;grid-row:1;margin-top:0;justify-self:end}
.qlist-read>li{grid-template-columns:1.75rem 1fr 8rem}
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.f-wide{grid-column:1/-1;max-width:26rem}
.fdo{flex-direction:row;align-items:center;gap:1.1rem}
.btn.lg{width:auto}
}
@media(min-width:1000px){
/* A reading measure. Full width prose on a 1400px screen is why the
first version felt like a spreadsheet. */
.pw-wrap{max-width:56rem;margin:0 auto}
}
/* =====================================================================
VENUE HIRE
The only part of this system a stranger sees. Somebody deciding where
to hold their mother's wake is comparing this against a hotel website,
so it gets more room, bigger type and photography, and it deliberately
does NOT look like the admin screens behind the login.
Mobile first again, because a venue search happens on a phone.
===================================================================== */
.hire-wrap{max-width:64rem;margin:0 auto}
/* ------------------------------------------------------------ the hero */
.hire-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);
background:linear-gradient(155deg,var(--navy) 0%,var(--navy-3) 100%);
color:#fff;padding:2.2rem 1.4rem;margin:0 0 1.4rem}
/* The club's hoops, at the strength of a watermark. At .05 over 26px it read
as a barcode across the hero; at .022 over 64px it is a texture you notice
only if you look for it, which is the point of a watermark. */
.hire-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 64px,transparent 64px 128px)}
.hire-hero>*{position:relative}
.hire-hero.sm{padding:1.6rem 1.4rem}
.hire-eyebrow{margin:0 0 .5rem;font-size:.7rem;text-transform:uppercase;
letter-spacing:.14em;font-weight:700;color:#9fbcdf}
.hire-hero h1{font-size:1.9rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff}
.hire-hero p{margin:.7rem 0 0;color:#d3e0f0;font-size:1rem;line-height:1.6;max-width:46ch}
.hire-sub{font-size:1.02rem}
/* ------------------------------------------------------- the four claims */
.hire-usp{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem;
grid-template-columns:repeat(2,minmax(0,1fr))}
.hire-usp li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:.85rem .9rem;box-shadow:var(--sh)}
.hire-usp b{display:block;font-size:1rem;color:var(--navy);line-height:1.25}
.hire-usp span{display:block;margin-top:.15rem;font-size:.79rem;color:var(--mut);line-height:1.45}
/* ------------------------------------------------------------ the diary */
.hire-cal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh);padding:1.1rem;margin:0 0 1.5rem}
.cal-head{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;
justify-content:space-between;margin:0 0 1rem}
.cal-head h2{font-size:1.2rem;font-weight:750;color:var(--navy)}
.cal-head p{margin:.15rem 0 0;font-size:.85rem}
.cal-nav{display:flex;align-items:center;gap:.55rem;font-size:.9rem}
.cal-nav b{color:var(--navy);min-width:7.5rem;text-align:center}
.btn.quiet.is-off{opacity:.35;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-dn{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
color:var(--mut);text-align:center;padding:.2rem 0 .4rem}
.cal-c{display:flex;flex-direction:column;gap:.1rem;min-height:3.5rem;padding:.35rem .3rem;
border-radius:7px;border:1px solid transparent;background:var(--line-2);
font-size:.78rem;text-align:left;overflow:hidden}
.cal-c.is-pad{background:transparent}
.cal-n{font-weight:750;font-size:.9rem;color:var(--ink-2);line-height:1.1}
.cal-s{font-size:.62rem;line-height:1.25;color:var(--mut);
overflow:hidden;text-overflow:ellipsis}
/* Available is the only one that is an anchor, so the whole square is the
target and there is no small "book" link to miss with a thumb. */
a.cal-c.is-free{background:#e8f4ee;border-color:#bfe0cf;color:var(--good);text-decoration:none}
a.cal-c.is-free .cal-n{color:#125c42}
a.cal-c.is-free .cal-s{color:#1a7f5a;font-weight:650}
a.cal-c.is-free:hover{background:#d8ecdF;border-color:var(--good);text-decoration:none}
.cal-c.is-game{background:#eef3fa;border-color:#d5e2f2}
.cal-c.is-game .cal-n{color:var(--navy-3)}
.cal-c.is-game .cal-s{color:var(--navy-3)}
.cal-c.is-off .cal-n{color:var(--mut)}
.cal-key{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:1rem 0 0;padding:0;
font-size:.79rem;color:var(--ink-2)}
.cal-key i{width:11px;height:11px;border-radius:3px;display:inline-block;
margin-right:.4rem;vertical-align:-1px;border:1px solid}
.cal-key .k-free{background:#e8f4ee;border-color:#bfe0cf}
.cal-key .k-game{background:#eef3fa;border-color:#d5e2f2}
.cal-key .k-off{background:var(--line-2);border-color:var(--line)}
/* ------------------------------------------------------------ the price */
.hire-price,.hire-faq,.hire-card{background:var(--card);border:1px solid var(--line);
border-radius:var(--r-lg);box-shadow:var(--sh);padding:1.2rem 1.1rem;margin:0 0 1.5rem}
.hire-price h2,.hire-faq h2{font-size:1.15rem;font-weight:750;color:var(--navy);margin:0 0 .4rem}
.hire-lede{margin:0 0 1rem;color:var(--ink-2);font-size:.93rem;line-height:1.6;max-width:58ch}
.pricelist{list-style:none;margin:0;padding:0}
.pricelist li{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
padding:.7rem 0;border-top:1px solid var(--line-2)}
.pricelist li:first-child{border-top:0}
.pricelist b{color:var(--navy);font-weight:650}
.pricelist em{display:block;font-style:normal;font-size:.8rem;color:var(--mut);margin-top:.1rem}
.pricelist .p{flex:0 0 auto;font-size:1rem;font-variant-numeric:tabular-nums}
.faqs{display:grid;gap:1rem}
.faqs b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:.2rem}
.faqs p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:60ch}
/* ------------------------------------------------------------- the form */
.hire-crumb{margin:0 0 .9rem;font-size:.88rem}
.hire-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh);padding:1.2rem 1.1rem;margin:0 0 1.2rem}
.hire-sec h2{font-size:1.05rem;font-weight:750;color:var(--navy);margin:0 0 .8rem}
.hireform .f{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.hireform .f label{font-size:.85rem;font-weight:650;color:var(--ink-2)}
.hireform .f .opt{font-weight:400;color:var(--mut)}
.hireform .f input,.hireform .f select,.hireform textarea{width:100%;padding:.62rem .7rem;
font:inherit;font-size:1rem;border:1px solid var(--line);border-radius:8px;
background:#fff;color:var(--ink)}
.hireform textarea{resize:vertical;line-height:1.5}
.hireform .f input:focus,.hireform .f select:focus,.hireform textarea:focus{
outline:2px solid var(--navy-3);outline-offset:-1px;border-color:var(--navy-3)}
.hire-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;
font-size:.9rem;color:var(--ink-2);cursor:pointer}
.hire-check input{width:1.15rem;height:1.15rem;accent-color:var(--navy);margin:.1rem 0 0;flex:0 0 auto}
/* the extras: a whole row is the target, price on the right */
.optlist{list-style:none;margin:0;padding:0}
.optlist li{border-top:1px solid var(--line-2)}
.optlist li:first-child{border-top:0}
.optlist label{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem .2rem;cursor:pointer}
.optlist input{width:1.3rem;height:1.3rem;accent-color:var(--navy);margin:.05rem 0 0;flex:0 0 auto}
.opt-b{flex:1;min-width:0}
.opt-l{display:block;font-weight:650;color:var(--ink)}
.opt-h{display:block;font-size:.82rem;color:var(--mut);margin-top:.1rem;line-height:1.45}
.opt-p{flex:0 0 auto;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.optlist label:hover{background:#fbfcfe}
.quote{margin:1rem 0 0;padding:.75rem .9rem;border-radius:8px;background:#eef3fa;
border:1px solid #d5e2f2;font-size:.92rem;font-weight:650;color:var(--navy)}
.hire-terms-l{margin:0 0 1rem;padding-left:1.15rem;font-size:.89rem;line-height:1.65;color:var(--ink-2)}
.hire-terms-l li{margin-bottom:.35rem}
.hire-priv{margin:0 0 1.2rem;padding:.8rem .9rem;border-radius:8px;background:#f7f9fc;
border:1px solid var(--line);font-size:.83rem;line-height:1.6;color:var(--mut);max-width:66ch}
/* ------------------------------------------------------- the confirmation */
.hire-ref{margin:0 0 1.1rem;padding:.9rem 1rem;border-radius:var(--r);background:var(--navy);
color:#9fbcdf;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.hire-ref span{display:block;margin-top:.25rem;color:#fff;font-size:1.5rem;letter-spacing:.06em;
font-weight:800;text-transform:none;font-variant-numeric:tabular-nums}
.hire-back{margin:0;font-size:.92rem}
@media(min-width:700px){
.hire-hero{padding:3rem 2.4rem}
.hire-hero.sm{padding:2rem 2.4rem}
.hire-hero h1{font-size:2.5rem}
.hire-usp{grid-template-columns:repeat(4,minmax(0,1fr))}
.hire-cal,.hire-price,.hire-faq,.hire-sec,.hire-card{padding:1.5rem 1.7rem}
.cal-c{min-height:4.6rem;padding:.5rem .5rem}
.cal-n{font-size:1rem}
.cal-s{font-size:.68rem}
.faqs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem 1.8rem}
.hireform .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.hireform .f-wide{grid-column:1/-1;max-width:none}
}
@media(max-width:560px){
/* Seven columns on a 360px screen leaves 48px a square, so the day number
stays and the label goes. The colour and the key still carry it, and the
square is still a 48px target. */
.cal-s{display:none}
.cal-c{min-height:2.9rem;align-items:center;justify-content:center}
.cal-n{font-size:.95rem}
}
/* the review trail on an enquiry: what happened, oldest first */
ol.trail{list-style:none;margin:0;padding:0}
ol.trail li{position:relative;padding:.6rem 0 .6rem 1.15rem;border-top:1px solid var(--line-2);
font-size:.9rem;line-height:1.5}
ol.trail li:first-child{border-top:0}
ol.trail li::before{content:'';position:absolute;left:0;top:1.05rem;width:7px;height:7px;
border-radius:50%;background:var(--navy-3)}
ol.trail b{color:var(--navy);font-weight:650}
ol.trail em{display:block;font-style:normal;color:var(--ink-2);margin-top:.15rem}