:root{ --bg:oklch(.974 .010 82); --card:oklch(.993 .005 84); --fg:oklch(.225 .018 55); --fg2:oklch(.395 .018 58); --dim:oklch(.565 .015 62); --line:oklch(.885 .012 78); --line2:oklch(.815 .016 74); --gold:oklch(.775 .085 80); --acc:oklch(.475 .175 30); --accfg:oklch(.985 .008 84); --ok:oklch(.52 .13 150); --disp:"Saira Condensed","Arial Narrow",sans-serif; --num:"Big Shoulders Display","Arial Narrow",sans-serif; --body:"Spectral",Georgia,serif; --r:4px; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px; line-height:1.55;display:flex;justify-content:center;-webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent} button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;text-align:left} /* Keyboard focus only — :focus-visible keeps this off touch and mouse taps. Covers every control, not just buttons and inputs: selects, textareas and the club blocks on a match header are all reachable by keyboard. */ button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--acc);outline-offset:2px} img{display:block} .tnum{font-variant-numeric:tabular-nums lining-nums} .app{width:100%;max-width:440px;display:flex;flex-direction:column;min-height:100dvh} .scroll{flex:1;overflow-y:auto;padding:0 18px 64px} /* header */ .hd{padding:22px 18px 14px;border-bottom:4px double oklch(.60 .12 42)} .hd .assoc{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);line-height:1.5} .hd h1{font-family:var(--num);font-weight:900;font-size:54px;line-height:.88; text-transform:uppercase;letter-spacing:.01em;margin:10px 0 5px} .hd .meta{font-size:11.5px;color:var(--dim);font-style:italic;display:flex; justify-content:space-between;align-items:baseline;gap:12px} .hd .meta a{color:var(--dim);font-style:normal;font-size:9px;letter-spacing:.16em; text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line2)} /* Where the dates sit on a live page, an archive page carries the way back to the live tournament. It reads as small print but has to behave like a control, so it takes the accent and a real tap target — the negative margin keeps that height out of the masthead's own spacing. */ .tolive{font-family:var(--disp);font-weight:600;font-size:11.5px;font-style:normal; letter-spacing:.04em;color:var(--acc);display:inline-flex;align-items:center; gap:5px;min-height:32px;margin:-8px 0;padding:0; border-bottom:1px solid currentColor} .tolive:active{opacity:.6} /* live pip */ .pip{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);font-style:normal} .pip i{width:6px;height:6px;border-radius:50%;background:var(--ok);font-style:normal} .pip.stale i{background:var(--acc);animation:pulse 1.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} /* nav */ .nav{display:flex;gap:26px;padding:0 18px;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--bg);z-index:6} .nav button{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.09em; text-transform:uppercase;color:var(--dim);padding:13px 0 11px;border-bottom:2px solid transparent; margin-bottom:-1px;transition:color .18s} .nav button.on{color:var(--fg);border-bottom-color:var(--acc)} .sect{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim); padding:26px 0 10px;display:flex;align-items:center;gap:11px} .sect::after{content:"";flex:1;height:1px;background:var(--gold)} .note{font-size:12px;color:var(--dim);font-style:italic;padding:14px 0 4px; max-width:60ch;line-height:1.65} .daysel{display:flex;gap:16px;padding:16px 0 6px} .daysel button{font-size:12.5px;color:var(--dim);padding-bottom:4px; border-bottom:1px solid transparent} .daysel button.on{color:var(--fg);border-bottom-color:var(--acc)} /* club identity */ .who{min-width:0} .who b{display:block;font-family:var(--disp);font-weight:600;font-size:15px; line-height:1.14;letter-spacing:.005em} .who i{display:block;font-style:normal;font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);margin-top:3px;line-height:1} .tile{flex:none;display:grid;place-items:center;background:var(--c,transparent); border-radius:var(--r);padding:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 0 0 1px var(--gold)} .tile img{width:24px;height:24px;object-fit:contain} /* fixtures */ .fx{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center; padding:13px 0;border-bottom:1px solid var(--line);transition:background .16s} .fx:hover{background:oklch(.985 .008 82)} .fx .t{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.4} .fx .t b{display:block;font-family:var(--disp);font-weight:600;font-size:14px;color:var(--fg2); letter-spacing:0;text-transform:none;margin-bottom:2px} .fx .n{display:flex;flex-direction:column;gap:7px;min-width:0} .fx .side{display:flex;align-items:center;gap:9px;min-width:0;position:relative;padding-left:9px} .fx .side::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px; border-radius:2px;background:var(--c)} .fx .side.tbc .who b{color:var(--dim)} .fx .r{text-align:right;font-family:var(--num);font-weight:800;font-size:20px; line-height:1.1;white-space:nowrap} .fx .r .st{display:block;font-family:var(--body);font-weight:400;font-size:9px; letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-top:5px} .fx .r .st.live{color:var(--acc)} .fx .r .pend{color:var(--dim);font-family:var(--body);font-size:12px;font-weight:400} /* match */ .back{font-size:12px;color:var(--dim);padding:16px 0 0;display:inline-block} .stack{margin:18px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sl{display:flex;align-items:center;gap:13px;padding:15px 2px;min-width:0; background:color-mix(in oklab,var(--c) 8%,var(--card))} .sl+.sl{border-top:1px solid var(--line)} .sl .bdg{width:48px;height:48px;border-radius:5px;background:var(--c);display:grid; place-items:center;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 0 0 1px var(--gold)} .sl .bdg img{width:36px;height:36px;object-fit:contain} .sl .who{flex:1} .sl .who b{font-size:18px} .sl.lead .who b{font-weight:700} .sl .gl{font-family:var(--num);font-weight:800;font-size:42px;line-height:1;flex:none; min-width:.62em;text-align:right;letter-spacing:-.01em} .kick{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim); padding-top:14px;display:flex;gap:9px;flex-wrap:wrap;align-items:center} .kick .lv{color:var(--acc);display:inline-flex;align-items:center;gap:5px} .kick .lv i{width:6px;height:6px;border-radius:50%;background:var(--acc);font-style:normal; animation:pulse 1.5s ease-in-out infinite} .ck{margin-top:20px;padding:16px 0;border-top:1px solid var(--line); border-bottom:2px solid var(--fg);display:flex;align-items:flex-end; justify-content:space-between;gap:16px} .ck .m{font-family:var(--num);font-weight:800;font-size:42px;line-height:.85;color:var(--acc)} .ck .m.idle{color:var(--dim);font-size:29px} .ck .rail{text-align:right} .ck .ph{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim); display:block;margin-bottom:3px} .ck .el{font-size:12px;color:var(--dim);font-style:italic} /* before kick-off there is no clock to read, so the rail is one muted line */ .ck.pre{align-items:center;justify-content:center;border-bottom:1px solid var(--line)} .ck .kox{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim); font-style:normal} .stop{font-size:11.5px;color:var(--acc);padding-top:9px} /* timeline */ .tl{list-style:none;padding-top:2px} .tl li{display:grid;grid-template-columns:46px 1fr auto;gap:12px;padding:12px 0; border-bottom:1px solid var(--line);align-items:baseline} .tl .mk{font-family:var(--num);font-weight:800;font-size:18px;text-align:right;color:var(--fg2)} .tl .mk.goal{color:var(--acc)} .tl .tx b{font-weight:600} .tl .undo{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim); border-bottom:1px solid var(--line2)} .empty{color:var(--dim);font-size:12.5px;font-style:italic;padding:18px 0; border-bottom:1px solid var(--line);line-height:1.6} /* tables */ table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed} thead th{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim); font-weight:400;padding:9px 0;text-align:center;width:26px} thead th.nm{text-align:left;width:auto} tbody td{padding:11px 0;text-align:center;border-bottom:1px solid var(--line); color:var(--dim);font-variant-numeric:tabular-nums} tbody td.nm{text-align:left;color:var(--fg)} tbody td.nm .in{display:flex;align-items:center;gap:9px;min-width:0} tbody td.nm .rk{width:13px;font-size:11px;color:var(--dim);flex:none; font-family:var(--disp);font-weight:600} tbody td.nm .who b{font-size:13px} tbody td.p{color:var(--fg);font-weight:600;font-size:13px} tbody tr.up .rk{color:var(--acc)} tbody tr.up td:first-child{box-shadow:inset 3px 0 0 var(--acc)} tbody tr.dq td{opacity:.45} tbody tr.dq .who b{text-decoration:line-through} .ko{display:flex;justify-content:space-between;gap:14px;padding:13px 0; border-bottom:1px solid var(--line)} .ko .l{font-family:var(--disp);font-weight:600;font-size:15px;flex:none} .ko .w{font-size:11.5px;color:var(--dim);text-align:right;font-style:italic;line-height:1.5} /* controls */ .act{width:100%;min-height:54px;background:var(--acc);color:var(--accfg);text-align:center; border-radius:var(--r);font-family:var(--disp);font-weight:600;font-size:16px; letter-spacing:.08em;text-transform:uppercase; transition:transform .12s cubic-bezier(.22,1,.36,1),opacity .2s} .act:active{transform:translateY(1px)} .act.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)} .act[disabled]{opacity:.3;cursor:not-allowed;transform:none} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} .two .act{min-height:46px;font-size:14px} .logs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .lg{min-height:56px;box-shadow:inset 0 0 0 1px var(--line2);border-radius:var(--r); padding:0 13px;display:flex;flex-direction:column;justify-content:center; background:var(--card);min-width:0} .lg .w{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.05em; text-transform:uppercase;line-height:1} .lg .s{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim); margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lg[disabled]{opacity:.3;cursor:not-allowed} /* sign in */ .form{display:flex;flex-direction:column;gap:11px;padding-top:8px} label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} input{width:100%;font-family:var(--body);font-size:16px;color:var(--fg);background:var(--card); border:1px solid var(--line2);border-radius:var(--r);padding:13px 12px;min-height:48px} select{width:100%;font-family:var(--body);font-size:13px;color:var(--fg);background:var(--card); border:1px solid var(--line2);border-radius:var(--r);padding:11px 10px;min-height:46px} .err{color:var(--acc);font-size:12.5px;font-style:italic} .okmsg{color:var(--ok);font-size:12.5px;font-style:italic} /* shootout + admin */ .pens{border:1px solid var(--line2);border-radius:var(--r);padding:14px;background:var(--card)} .pr{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line)} .pr:first-of-type{border-top:none} .pr .bd{width:34px;height:34px;border-radius:var(--r);background:var(--c);display:grid; place-items:center;flex:none} .pr .bd img{width:26px;height:26px;object-fit:contain} .pr .nx{flex:1;min-width:0;font-family:var(--disp);font-weight:600;font-size:14px;line-height:1.15} .pr .cnt{font-family:var(--num);font-weight:800;font-size:26px;min-width:1.1em;text-align:right} .pr .pm{display:flex;gap:6px;flex:none} .pr .pm button{width:38px;height:38px;border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center; font-family:var(--num);font-size:19px;font-weight:800} .dqlist{display:flex;flex-wrap:wrap;gap:7px} .dqlist button{font-size:11px;padding:9px 11px;border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line2);color:var(--dim)} .dqlist button.out{box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc);text-decoration:line-through} .qrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px 0; border-bottom:1px solid var(--line);align-items:center} .qrow .lbl{grid-column:1/-1;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--dim)} .tag{display:inline-block;font-size:8px;letter-spacing:.14em;text-transform:uppercase; color:var(--acc);border:1px solid var(--acc);border-radius:3px;padding:2px 4px; margin-left:7px;vertical-align:2px;font-weight:400} .banner{background:var(--card);border:1px solid var(--line2);border-radius:var(--r); padding:11px 13px;font-size:12px;color:var(--dim);font-style:italic;margin-top:14px} .banner.warn{border-color:var(--acc);color:var(--acc)} /* The archive stops retrying after a failure, so this is the only way back — it needs a real tap target, not a text link. */ .retry{display:inline-flex;align-items:center;min-height:38px;margin-top:9px; padding:0 14px;border:1px solid var(--acc);border-radius:999px; font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.09em; text-transform:uppercase;color:var(--acc)} .retry:active{background:var(--acc);color:var(--accfg)} .queue{font-size:11px;letter-spacing:.1em;text-transform:uppercase} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* queued, not yet sent */ .tl li.pending{opacity:.62} .tl li.pending .tx em{font-style:italic;color:var(--acc);font-size:11px;letter-spacing:.08em} /* player picker */ .picker{border:1px solid var(--acc);border-radius:var(--r);padding:13px;margin-top:12px; background:var(--card)} .pkhd{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)} .pkhd span{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.04em; text-transform:uppercase} .pkhd button{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim); border-bottom:1px solid var(--line2)} .pklist{display:flex;flex-direction:column;max-height:44vh;overflow-y:auto;margin-bottom:10px} .pk{display:flex;align-items:center;gap:11px;min-height:46px;padding:0 4px; border-bottom:1px solid var(--line);font-family:var(--disp);font-weight:500;font-size:15px} .pk:active{background:oklch(.96 .01 82)} .pk .no{width:22px;text-align:right;color:var(--dim);font-size:12px;flex:none} /* nav must not wrap once there are five */ .nav{overflow-x:auto;scrollbar-width:none;gap:22px} .nav::-webkit-scrollbar{display:none} .nav button{white-space:nowrap} /* suspensions */ .susp{list-style:none} .susp li{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:11px 0;border-bottom:1px solid var(--line)} .susp .nmx{font-family:var(--disp);font-weight:600;font-size:15px} .susp .rs{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)} /* level on every tie-breaker, with a shoot-out still to come */ tbody tr.unres td{background:oklch(.965 .022 82)} /* awards */ .award{border:1px solid var(--line2);border-radius:var(--r);padding:15px;margin-bottom:11px; background:var(--card)} .award .at{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} .award .an{font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.15; margin-top:7px;letter-spacing:.01em} .award .an.dim{color:var(--dim);font-weight:500;font-size:17px} .award .ac{font-family:var(--num);font-weight:800;font-size:15px;color:var(--acc);margin-top:5px} .award .af{font-size:11.5px;color:var(--dim);font-style:italic;margin-top:9px;line-height:1.55} /* own-goal option inside the picker */ .pk.og{color:var(--acc);font-weight:600} /* shoot-out winner in the table */ .tag.so{color:oklch(.55 .09 80);border-color:var(--gold)} /* scorer lines under each side */ .sl .gls{display:block;margin-top:5px} .sl .gline{display:block;font-style:normal;font-size:11px;color:var(--dim); line-height:1.6;letter-spacing:.01em;font-variant-numeric:tabular-nums} /* squad entry */ .dqlist button.on{box-shadow:inset 0 0 0 1px var(--fg);color:var(--fg)} textarea{width:100%;font-family:var(--body);font-size:14px;color:var(--fg);background:var(--card); border:1px solid var(--line2);border-radius:var(--r);padding:11px 12px;resize:vertical; line-height:1.7} .squad{list-style:none;border-top:1px solid var(--line)} .squad li{display:flex;align-items:baseline;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line)} .squad .no{width:20px;text-align:right;color:var(--dim);font-size:12px;flex:none} .squad .nmx{flex:1;font-family:var(--disp);font-weight:500;font-size:15px} /* diocese emblem in the masthead */ .hd .assoc{display:flex;align-items:center;gap:9px} /* Fixed HEIGHT, free width. London's crest is square and fills 24x24; the Midlands' is landscape, and a square slot letterboxed it down to 24x18 — a third smaller on the axis that carries its detail. Sizing by height treats both at the same scale whatever their shape. */ .hd .assoc .dio{height:24px;width:auto;max-width:46px;object-fit:contain;flex:none} .hd .assoc span{display:block} .hd .assoc span i{display:block;font-style:normal;letter-spacing:.14em; color:var(--dim);opacity:.75;margin-top:2px} /* appearance switcher */ .themes{display:flex;flex-wrap:wrap;gap:7px} .themes button{font-size:11px;padding:9px 12px;border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line2);color:var(--dim)} .themes button.on{box-shadow:inset 0 0 0 1px var(--fg);color:var(--fg)} /* scorer lines now sit on their own full-width line under the row */ .sl{flex-wrap:wrap} .sl .gls{flex:0 0 100%;margin:4px 0 0 61px} /* per-side scores (list layout); hidden except where a theme wants them */ .fx .side .ssc{display:none} /* player stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} /* Five tiles once assists joined them. At 375px five equal columns leave ~61px each, so the longest label wraps to two lines and the grid rows equalise the heights — which is why the tiles stay aligned. */ .stats.five{grid-template-columns:repeat(5,1fr);gap:6px} .stats.five .stat{padding:10px 5px} .stats.five .stat b{font-size:21px} .stat{border:1px solid var(--line2);border-radius:var(--r);background:var(--card); padding:11px 8px;text-align:center} .stat i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim)} .stat b{display:block;font-family:var(--num);font-weight:800;font-size:24px;margin-top:4px} .pk .pstat{font-size:11px;color:var(--dim);flex:none} /* centre chip on the match header: themes opt in */ .midchip{display:none} /* centred clock chip: only themes that want it show it */ .stack{position:relative} .midchip{display:none} /* event edit */ .rowacts{display:flex;gap:12px;justify-content:flex-end} .picker .pk.on{color:var(--acc);font-weight:600} /* match state under the kick-off time; themes opt in */ .fx .t .tst{display:none} /* red card marker on fixture rows */ .rc{display:inline-block;width:8px;height:11px;background:#d21f26;border-radius:2px; margin-left:6px;vertical-align:-1px;font-style:normal} /* man of the match, under the scoreboard */ .motmline{text-align:center;font-size:12px;color:var(--fg2);padding:12px 0 0;font-style:italic} .mstar{color:var(--gold);margin-right:6px;font-style:normal} /* red cards on their own line under the city */ .rcs{display:block;line-height:1;margin-top:3px} .rcs .rc{margin-left:0;margin-right:4px;vertical-align:0} /* the second half of a squad/player header card */ .sl.alt .altbox{display:flex;flex-direction:column;gap:2px} .sl.alt .altbox i{font-style:normal;font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} .sl.alt .altbox b{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--fg)} .sl.phead .bignum{margin-left:auto;flex:none} .bignum{font-family:var(--num);font-weight:900;font-size:44px;line-height:1;color:var(--fg)} /* club header meta, right-hand side of the colour block */ .sl.phead .clubmeta{margin-left:auto;flex:none;text-align:right; display:flex;flex-direction:column;gap:2px} .sl.phead .clubmeta i{font-style:normal;font-size:8.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--dim)} .sl.phead .clubmeta b{font-family:var(--disp);font-weight:600;font-size:15px} .sl.phead .clubmeta .cstat{margin-top:5px;letter-spacing:.08em} /* clubs and players are tappable wherever they appear */ [data-team],[data-player]{cursor:pointer} .tx .plink{border-bottom:1px dotted var(--line2)} /* a knockout tie settled on penalties: one strip across the foot of the scoreboard. The shoot-out decided the tie, so it belongs here rather than in the note underneath, where it read as a footnote to a 1–1 draw. Goals stay the score, because for goal difference the match really is a draw. */ /* The strip sits OUTSIDE .stack, not inside it: the centre chip is centred on the stack, so an extra row in there pushed the chip half a strip's height below the club blocks on exactly the matches that matter most. */ .pnstrip{background:var(--card);border-bottom:1px solid var(--line); padding:9px 12px;text-align:center;font-size:11.5px;color:var(--dim)} .pnstrip b{font-family:var(--disp);font-weight:600;font-size:13px; color:var(--fg);letter-spacing:.03em} .pnstrip .tnum{font-family:var(--num);font-weight:800;font-size:14.5px; color:var(--acc);margin:0 1px} /* the final is not just the next fixture on the list */ .sect.crown{color:var(--acc)} .sect.crown::after{background:var(--acc);height:2px} /* award cards are buttons now: the whole card opens its leaderboard */ .award{display:block;width:100%} .award .more{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);margin-top:11px;padding-top:9px;border-top:1px solid var(--line)} .award:active{background:color-mix(in oklab,var(--acc) 4%,var(--card))} /* a confirmed trophy: the winners are the card, so the gold edge is what separates a decided award from a leaderboard still in play */ .award.won{box-shadow:inset 0 0 0 1px var(--gold);border-color:var(--gold)} .banner.conf{border-color:var(--gold);color:var(--fg2);font-style:normal} /* leaderboards */ .lb{border-top:1px solid var(--line)} .lbr{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:8px 2px; border-bottom:1px solid var(--line);min-width:0} .lbr:active{background:color-mix(in oklab,var(--acc) 4%,var(--card))} .lbr .pl{flex:none;width:30px;font-family:var(--num);font-weight:800;font-size:19px; color:var(--dim);text-align:right} .lbr .pl.joint{color:var(--acc);font-size:16px} .lbr .who{flex:1;min-width:0} .lbr .who b{display:block;font-family:var(--disp);font-weight:600;font-size:16px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lbr .who i{display:block;font-style:normal;font-size:11px;color:var(--dim);margin-top:1px} .lbr .lbn{flex:none;font-family:var(--num);font-weight:800;font-size:22px} .tag.wn{color:var(--gold);border-color:var(--gold)} /* honours on a player card */ .honours{list-style:none;border-top:1px solid var(--line)} .honours li{display:flex;align-items:baseline;gap:9px;padding:11px 2px; border-bottom:1px solid var(--line)} .honours .hz{color:var(--gold);font-style:normal} .honours .hl{flex:1;font-family:var(--disp);font-weight:600;font-size:15px} .honours .hsh{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} /* trophy confirmation */ .picker.trophy{margin-bottom:14px} .tchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px} .tchip{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:7px 9px; border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc)} .tchip button{color:var(--acc);font-size:15px;line-height:1;padding:0 2px} .tnone{font-size:12px;color:var(--dim);font-style:italic} .tclubs{margin-bottom:10px} .tpq{width:100%;font-family:var(--body);font-size:14px;color:var(--fg);background:var(--card); border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px} /* ── stats hub: a card previews its board's top three ──────── The row is a three-column grid on purpose: [crest | name | value]. As a flex row the name block and the value negotiated width with each other, which is fine until a church name is long. A fixed crest column and an auto value column mean only the name can give way, and it gives way by ellipsizing rather than by shoving the value out of its column. */ .scard{border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:6px} .sch{display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding:13px 0 9px} .sch .stt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim); line-height:1} /* a drawn chevron, not a text glyph: a ">" inherits the body font and sits on a text baseline, which is what made it read as leftover markup */ .sch .chev{flex:none;width:7px;height:7px;margin-right:3px; border-top:1.5px solid var(--dim);border-right:1.5px solid var(--dim); transform:rotate(45deg)} .srow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center; gap:11px;width:100%;padding:9px 0;text-align:left} .srow + .srow{border-top:1px solid var(--line)} .srow .tile{width:28px;height:28px;padding:3px} .srow .tile img{width:22px;height:22px} .srow .who{min-width:0} .srow .who b{display:block;font-family:var(--disp);font-weight:600;font-size:14.5px; line-height:1.2;letter-spacing:.005em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srow .who i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin-top:3px;line-height:1.1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srow .sv{font-family:var(--num);font-weight:800;font-size:17px;line-height:1; min-width:1.6em;text-align:right;color:var(--fg2); font-variant-numeric:tabular-nums lining-nums} /* the pill stretches to the same column, so its right edge lands on the same line as the plain numerals below it */ .srow .sv.lead{color:var(--accfg);background:var(--acc);border-radius:999px; padding:4px 10px;text-align:center} .snone{font-size:12px;color:var(--dim);font-style:italic;line-height:1.6; padding:2px 0 10px;max-width:60ch} /* the trophy honours strip at the top of stats */ .honstrip{border-top:1px solid var(--line)} .hon{display:block;width:100%;padding:12px 0;border-bottom:1px solid var(--line)} .hon .ht{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--acc)} .hon .hbody{display:flex;align-items:center;gap:11px;margin-top:6px} .hon .who{flex:1;min-width:0} .hon .who b{display:block;font-family:var(--disp);font-weight:600;font-size:16px} .hon .who i{display:block;font-style:normal;font-size:11px;color:var(--dim);margin-top:1px} .hon .hsh{flex:none;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim)} /* ── History: the archive ──────────────────────────────────── Six competitions, each with its own identity, scoped by [data-comp] so a competition's colour cannot leak into the live tournament's chrome. Historical clubs with no live crest get a deterministic monogram from one muted, obviously-archival palette — never invented branding. */ .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px; padding:3px;gap:3px;margin:0 0 16px} .seg button{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.06em; text-transform:uppercase;color:var(--dim);padding:7px 18px;border-radius:999px; min-height:34px;transition:background .15s,color .15s} .seg button.on{background:var(--acc);color:var(--accfg)} /* competition identities */ /* --ci is the identity on a light card; --cl is the same identity as ink on a dark one. Broadcast needs the second: measured against its card, the deep values land at 1.9:1, which is not a colour choice, it is invisible. */ [data-comp="cofta"] {--ci:#38003c;--cl:#e0a9e8} [data-comp="conafa"] {--ci:#0f5257;--cl:#7fd8de} [data-comp="costa"] {--ci:#8a4b0f;--cl:#f0b378} [data-comp="ark"] {--ci:#12305e;--cl:#a3c4f5} [data-comp="cosa"] {--ci:#7a1140;--cl:#f7a0c0} [data-comp="ladies-cofta"]{--ci:#4a1d6e;--cl:#cfa8f2} .ccards{display:grid;gap:12px} .ccard{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;align-items:center; gap:12px;width:100%;text-align:left;padding:16px 16px;border-radius:14px; background:var(--card);box-shadow:inset 0 0 0 1px var(--line); border-left:4px solid var(--ci,var(--acc))} /* A badged card gains a column for it; COSTA has none and keeps the original three, so its card is not a badged one with a hole in it. */ .ccard.badged{grid-template-columns:34px minmax(0,1fr) auto 14px} .clogo{width:34px;height:34px;object-fit:contain;flex:none} .ccard:active{background:var(--bg)} .cch{display:block;min-width:0} .ccn{display:block;font-family:var(--disp);font-weight:800;font-size:20px; letter-spacing:.02em;color:var(--ci,var(--fg))} .ccm{display:block;font-size:12.5px;color:var(--dim);margin-top:2px} .ccl{display:block;text-align:right;font-size:11.5px;color:var(--dim); text-transform:uppercase;letter-spacing:.07em} .ccl b{display:block;font-family:var(--disp);font-weight:700;font-size:15px; letter-spacing:0;text-transform:none;color:var(--fg);margin-top:3px} /* the champion's badge sits on the champion's line, not the label's — the name is a block, so the two need their own row to share a baseline */ .cclw{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:3px} .cclw b{margin-top:0} .ccy{display:block;font-size:11px;margin-top:1px} .chev{width:8px;height:8px;border-right:2px solid var(--dim); border-bottom:2px solid var(--dim);transform:rotate(-45deg);justify-self:end} .chead{padding:20px 0 14px;border-bottom:2px solid var(--ci,var(--acc));margin-bottom:16px} .chead h2{font-family:var(--disp);font-weight:900;font-size:30px;line-height:1.05; letter-spacing:.01em;color:var(--ci,var(--fg))} .chead p{font-size:13px;color:var(--dim);margin-top:5px} /* The masthead carries the tournament's name on these views, so the block below it is detail only and has no heading to sit under. */ .chead.bare{padding-top:14px} .chead.bare p:first-child{margin-top:0} /* Badge beside the detail line, since the masthead above already has the competition's name. The .clogo width is overridden here: 46px, not 34. */ .chead.withlogo{display:flex;align-items:center;gap:12px} .chead.withlogo .clogo{width:46px;height:46px} .chead.withlogo p{margin-top:0} /* Whose competition it is, directly under its own rule. */ .chost{font-size:12.5px;color:var(--dim);margin-top:-8px;padding-bottom:2px} .chead .efmt{margin-top:7px;font-size:12.5px} .edrows{display:grid;gap:2px} .edrow{display:grid;grid-template-columns:52px minmax(0,1fr) auto 14px; align-items:center;gap:10px;width:100%;text-align:left;padding:13px 6px; border-bottom:1px solid var(--line)} .edrow:active{background:var(--card)} .edy{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--dim)} .edm{min-width:0} .edm b{display:block;font-family:var(--disp);font-weight:700;font-size:16px} .edd{display:block;font-size:12px;color:var(--dim);margin-top:2px} /* A tournament nobody recorded the winner of. Says so, rather than leaving a blank where a crest goes — a blank reads as a bug and invites a guess. */ .nowin{font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--dim); text-align:right;display:block;max-width:9em;line-height:1.25} /* crest or monogram */ .acrest,.mono{display:inline-flex;align-items:center;justify-content:center; position:relative;width:var(--mono,28px);height:var(--mono,28px);flex:none} .acrest img{width:100%;height:100%;object-fit:contain;display:block} .mono{border-radius:6px;font-family:var(--disp);font-weight:800; font-size:calc(var(--mono,28px) * .42);letter-spacing:.01em;line-height:1} /* One muted, deliberately archival palette. The index is hashed from the club's canonical name, so a club looks identical on every page it appears on, and nothing here reads as a real crest. */ .mono-0{background:#e4ded2;color:#5b5344} .mono-1{background:#d8dfd9;color:#465049} .mono-2{background:#ded9e2;color:#514a58} .mono-3{background:#e2dcd4;color:#5a5045} .mono-4{background:#d5dde2;color:#445059} .mono-5{background:#e3d9d9;color:#584848} .mono-6{background:#dcdfd3;color:#4d5242} .mono-7{background:#d9dae3;color:#484c5c} .bteam{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:4px; background:var(--fg);color:var(--bg);font-family:var(--disp);font-weight:800; font-size:9px;font-style:normal;display:flex;align-items:center;justify-content:center} /* thin edition card */ .thincard{background:var(--card);border-radius:14px;padding:18px 16px; box-shadow:inset 0 0 0 1px var(--line)} .tcwin{display:flex;align-items:center;gap:13px} .tcwin div b,.tcrun div b{display:block;font-family:var(--disp);font-weight:800;font-size:19px; line-height:1.15} .tcwin div span,.tcrun div span{display:block;font-size:10.5px;text-transform:uppercase; letter-spacing:.09em;color:var(--dim);margin-top:3px} .tcrun{display:flex;align-items:center;gap:13px;margin-top:14px; padding-top:14px;border-top:1px solid var(--line)} .tcrun div b{font-size:15px} .tcfin{margin-top:13px;font-size:13.5px;line-height:1.5} .tcnote,.thinnote{margin-top:11px;font-size:12px;color:var(--dim);line-height:1.5} .thinnote{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);font-style:italic} .entrants{display:flex;flex-wrap:wrap;gap:8px} .ent{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px; border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line); font-size:12.5px;font-weight:500} /* archive tables */ /* The club column is `tm` here, not `nm`, so the `th.nm{width:auto}` escape in the base table never reached it: under table-layout:fixed it inherited the generic 26px meant for a numeric column, and every club rendered as a single clipped letter. An archive table also carries eight numeric columns to the live table's six, so fixed layout has no room to give. Auto layout sizes the numbers to their digits and hands the rest to the club. */ /* Ten columns against a 320px phone: the table scrolls inside this rather than being clipped, and the page body never scrolls sideways. */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .tbl.arch{table-layout:auto;min-width:290px} .tbl.arch th.tm{width:auto;text-align:left} .tbl.arch th.pos{width:18px} .tbl.arch thead th,.tbl.arch tbody td{white-space:nowrap;padding-left:3px;padding-right:3px} .tbl.arch td.tm{display:flex;align-items:center;gap:7px;white-space:normal; padding-left:0} /* Derived, not source: the base table already renders every cell dim, so a colour change here would have been invisible. Italic plus a lighter weight reads as "computed" next to the published columns. */ .tbl.arch td.drv,.tbl.arch th.drv{font-style:italic;opacity:.62} .gapdot{color:var(--dim);font-style:normal;cursor:help} /* archive fixtures */ .afx{display:grid;gap:2px} .afxr{padding:12px 6px;border-bottom:1px solid var(--line)} .afxm{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;gap:10px} .afxt{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500;font-size:14px} .afxt.away{justify-content:flex-end} .afxt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .afxs{font-family:var(--disp);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:4px} .afxs i{font-style:normal;color:var(--dim);font-size:14px} .afxp{text-align:center;font-size:11.5px;color:var(--dim);margin-top:5px; text-transform:uppercase;letter-spacing:.07em} /* Scorers in two columns under the score, the way a scoreboard reads: home left, away right. Each side's column is aligned towards its own club above, which is what tells you whose goal it was — the club name used to be repeated on every line and wrapped onto two. */ .afxg{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:9px} .aglc{display:flex;flex-direction:column;gap:4px;min-width:0} .aglc.a{text-align:right} .agl{font-size:12.5px;color:var(--dim);line-height:1.35} .agl i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--fg2)} .agl em{font-style:normal;opacity:.7;font-size:11px;margin-left:4px} /* Goals the record cannot assign to a side: centred under both columns, so the layout never implies one. */ .aglu{display:flex;flex-direction:column;gap:4px;margin-top:6px;text-align:center; border-top:1px dashed var(--line);padding-top:6px} .gap{display:inline-block;margin-top:8px;font-size:10px;text-transform:uppercase; letter-spacing:.09em;color:var(--dim);border:1px solid var(--line); border-radius:999px;padding:3px 8px} .afxn{margin-top:7px;font-size:12px;color:var(--dim);line-height:1.5} .flagline{margin-top:6px;font-size:11px;color:var(--acc);letter-spacing:.03em} /* archive leaderboards and awards */ .alb{display:grid;gap:1px} /* Flex, not grid: a club row carries a crest between the value and the name and a player row does not, so the row has two children or three. */ .albr{display:flex;align-items:center;gap:10px;padding:10px 6px; border-bottom:1px solid var(--line)} .albv{width:34px;flex:none;font-family:var(--disp);font-weight:800;font-size:17px; font-variant-numeric:tabular-nums;color:var(--acc)} .albn{flex:1 1 auto;min-width:0;font-weight:500;font-size:14.5px} .albn i{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:1px} .aawards{display:grid;gap:10px} .aaw{padding:13px 14px;border-radius:12px;background:var(--card); box-shadow:inset 0 0 0 1px var(--line)} .aawl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em; color:var(--dim)} .aawn{display:block;font-family:var(--disp);font-weight:800;font-size:18px;margin-top:4px} .aawn i{font-style:normal;color:var(--acc);margin-left:7px} .aawt{display:block;font-size:12px;color:var(--dim);margin-top:2px} .gaps{margin:6px 0 0;padding-left:20px} .gaps li{font-size:12.5px;color:var(--dim);line-height:1.55;margin-bottom:5px} /* Goal editor: two labelled lists, scored by then assisted by. */ .pksub{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--dim);margin:14px 0 7px} .pksub:first-of-type{margin-top:0} /* The assist on a match-report line: present, secondary, and tappable through to the player, without competing with the scorer's name. */ .asst{color:var(--dim);font-size:12.5px;white-space:nowrap} .asst .plink{font-weight:500;color:var(--dim);text-decoration:underline; text-decoration-color:var(--line2);text-underline-offset:2px} /* Organiser lives in the masthead, not the tab row. The nav still scrolls at 375px (six labels measure 440px against a 375px viewport), but Organiser is the one tab spectators never need, so it moves out of the row rather than competing for space in it. Muted while signed out, tinted with a dot once signed in — an organiser should be able to tell at a glance whether this phone is still theirs. */ .hd{position:relative} .gear{position:absolute;top:16px;right:12px;width:40px;height:40px; display:flex;align-items:center;justify-content:center;border-radius:11px; color:var(--dim);transition:color .18s,background .18s} .gear:active{background:var(--card)} .gear .gdot{display:none} .gear.in{color:var(--acc)} .gear.in .gdot{display:block;position:absolute;top:7px;right:7px; width:7px;height:7px;border-radius:50%;background:var(--acc)} .gear.on{color:var(--acc);background:var(--card)} /* the masthead title must not run under the control */ .hd h1,.hd .assoc{padding-right:46px} /* The B marker beside a name. A B team shows its parent's crest, so without this the two sides of a club are indistinguishable on any surface that renders a name without one — a leaderboard row, an award, a table note. */ .btag{display:inline-flex;align-items:center;justify-content:center; min-width:15px;height:15px;margin-left:5px;padding:0 3px;border-radius:4px; background:var(--line2);color:var(--fg);font-family:var(--disp); font-weight:800;font-size:9.5px;font-style:normal;letter-spacing:.02em; vertical-align:1px} /* ── the trophy cabinet ────────────────────────────────────── Every club History names is a link through to its record, so the crest and the name are one target rather than two. */ .tlink{display:inline-flex;align-items:center;gap:8px;min-width:0; font-weight:500;font-size:14px;text-align:left;color:inherit;border-radius:8px; padding:2px 4px;margin:-2px -4px} .tlink.away{flex-direction:row;justify-content:flex-end;text-align:right} .tlink > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .tlink:active{background:var(--card)} .tlink.dead{opacity:.6} .afxm .tlink{min-width:0} .tbl.arch td.tm .tlink{font-size:inherit} /* Squad / History on a live club page. Always opens on Squad. */ .ctabs{display:inline-flex;gap:3px;padding:3px;margin:14px 0 4px; border-radius:999px;border:1px solid var(--line)} .ctabs button{font-family:var(--disp);font-weight:600;font-size:12.5px; letter-spacing:.07em;text-transform:uppercase;color:var(--dim); padding:7px 16px;border-radius:999px;min-height:34px} .ctabs button.on{background:var(--acc);color:var(--accfg)} .cabhead .who b{font-size:22px;line-height:1.1} .cabtally{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px} .cabtally .stat{border:1px solid var(--line2);border-radius:var(--r); background:var(--card);padding:11px 8px;text-align:center} .cabtally .stat i{display:block;font-style:normal;font-size:8.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .cabtally .stat b{display:block;font-family:var(--num);font-weight:800; font-size:24px;margin-top:4px} .cabrows{display:grid;gap:2px} .cabrow{display:grid;grid-template-columns:52px minmax(0,1fr) 14px;align-items:center; gap:10px;width:100%;text-align:left;padding:12px 6px; border-bottom:1px solid var(--line);border-left:3px solid var(--ci,var(--line2))} .cabrow:active{background:var(--card)} .caby{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--dim); padding-left:7px} .cabm{min-width:0} .cabm b{display:block;font-family:var(--disp);font-weight:700;font-size:15px} .cabr{display:inline-block;margin-top:3px;font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;padding:3px 8px;border-radius:999px} .cabr.champion{background:var(--acc);color:var(--accfg)} .cabr.runner_up{color:var(--dim);box-shadow:inset 0 0 0 1px var(--line2)} .cabhon{display:grid;gap:10px} .cabhg{padding:13px 14px;border-radius:12px;background:var(--card); box-shadow:inset 0 0 0 1px var(--line)} .cabhe{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em; color:var(--dim);margin-bottom:7px} .cabhi{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:5px} .cabhi b{font-family:var(--disp);font-weight:700;font-size:14.5px} .cabhi i{font-style:normal;font-size:13px;color:var(--dim)} .cabhv{font-family:var(--num);font-weight:800;color:var(--acc)} /* The Players list. Name on its own line at full weight, then the tallies, then the editions in small caps — three ranks of emphasis so the eye can run down the names and stop only where it wants to. Each row is a card rather than a table row because the third line wraps freely on a phone and a wrapped table cell loses its alignment. */ .cabsq{display:grid;gap:8px} .cabsqr{padding:11px 14px;border-radius:12px;background:var(--card); box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-wrap:wrap; align-items:baseline;gap:2px 10px} .cabsqn{font-family:var(--disp);font-weight:700;font-size:15px;flex:0 0 auto} .cabsqd{font-family:var(--num);font-weight:800;font-size:12.5px;color:var(--acc); flex:0 0 auto} .cabsqe{flex:1 0 100%;font-size:11px;text-transform:uppercase;letter-spacing:.07em; color:var(--dim)} .cabalso{display:flex;flex-wrap:wrap;gap:8px} .alsochip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px; border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line); font-size:12.5px;font-weight:500;color:inherit} .alsochip span{font-family:var(--num);font-weight:800;color:var(--dim)} .alsochip:active{background:var(--card)} /* ── club identity: full church name, city demoted ─────────── The same shape the live pages use in .clubBlock and the standings row, so a club reads identically whichever half of the app you are in: the FULL church name on the primary line, the city small underneath. Never a shortened name, never "Name, City" on one line. */ .tlink .who{display:block;min-width:0} .tlink .who b{display:block;font-weight:600;font-size:14px;line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tlink .who i{display:block;font-style:normal;font-size:11.5px;line-height:1.25; color:var(--dim);margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tlink.away .who{text-align:right} /* Where the club is itself the secondary fact — under a player's name on a leaderboard — the two run on one line rather than stacking. */ .tlink.inline{display:inline;font-size:12px;color:var(--dim);padding:0;margin:0} .tlink.inline b{font-weight:500} .tlink.inline span::before{content:' · '} /* the podium reads name / city / role, so the role line steps down again */ .tcwin .tlink .who b,.tcrun .tlink .who b{font-family:var(--disp);font-weight:800; font-size:19px;line-height:1.15;white-space:normal} .tcrun .tlink .who b{font-size:15px} .tcwin > div,.tcrun > div{min-width:0} /* the standings cell stacks too, so the row grows to fit both lines */ .tbl.arch td.tm{align-items:center} .tbl.arch td.tm .tlink .who b{font-size:13.5px} .tbl.arch td.tm .tlink .who i{font-size:10.5px} /* fixtures: two stacked lines per side, as on the live fixture row */ .afxm{align-items:center} .afxt,.tlink{align-items:center} /* confirmed archive colours, carried on the row as data */ .mono.set{background:var(--tile);color:var(--ink)} /* Nottingham and Manchester are both red. A ring is the second, non-colour cue that keeps them apart in a fixture list — and for anyone who cannot tell the two reds apart at all. */ .mono.set.ringed{box-shadow:inset 0 0 0 2px var(--ring)} /* Every monogram needs an edge: the pink and the muted fallbacks are close enough to a white card to vanish against it. */ .mono{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .mono.set.ringed{box-shadow:inset 0 0 0 2px var(--ring),inset 0 0 0 3px rgba(0,0,0,.10)} /* The cabinet's own Men/Women switch. Distinct from the History tab's category filter: that one chooses which competitions to list, this one chooses which side of one church you are reading. Only rendered where the church actually fielded both. */ .seg.cabseg{margin:0 0 14px} /* ── a competition's champions list ────────────────────────── Who has won it, when, and how many times. No places: this is a list, not a league, and calling a three-time winner "second" behind a four-time winner reads like a standing nobody played for. The count and the years carry it. */ .champrows{display:grid;gap:2px} .champrow{padding:11px 6px;border-bottom:1px solid var(--line)} .champtop{display:flex;align-items:center;gap:10px} .champtop .tlink{flex:1 1 auto;min-width:0} .champn{flex:none;font-family:var(--num);font-weight:800;font-size:22px; line-height:1;color:var(--acc)} .champyrs{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;padding-left:40px} /* --fg2, not --dim: a year is the content here, not a label about it, and at 11.5px --dim lands under 4.5:1 in the warmer themes (Terrace 4.05, Programme 4.25). The filled pill still carries the hierarchy. */ .cyr{font-family:var(--num);font-weight:600;font-size:11.5px;color:var(--fg2); border:1px solid var(--line2);border-radius:999px;padding:2px 8px} /* the year they are still holding it from */ .cyr.now{background:var(--acc);color:var(--accfg);border-color:transparent} /* New-build bar. Fixed to the bottom because that is where a thumb already is on a phone, and because the top of the page is the masthead and the score. It sits above the safe-area inset so an iPhone's home indicator does not cover the tap target, and it is a real