*{box-sizing:border-box}
/* iOS Safari inflates body text when the phone is rotated to landscape unless this
   is pinned. Not a reset -- a deliberate opt-out of a behaviour that breaks the
   type scale mid-session. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 15px/1.5 "IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px 72px}
h1,h2,h3{font-family:"Big Shoulders Display","Arial Narrow",sans-serif;text-wrap:balance;margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* ---------- footer ---------- */
footer.sitefoot{border-top:1px solid var(--line);background:var(--panel);margin-top:8px}
.footinner{max-width:1180px;margin:0 auto;padding:22px 20px 30px;color:var(--ink-2);font-size:12.5px}
.footinner p{margin:0 0 7px;max-width:66ch}
.footinner a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);
  font:600 14px/1 "IBM Plex Sans",sans-serif;padding:15px 18px;border-radius:0 0 var(--r-sm) 0;
  text-decoration:none}
.skip:focus{left:0}
main:focus{outline:none}

/* WCAG 2.5.5 wants 44px targets. Desktop keeps its density; touch gets the room. */
/* The viewport is declared viewport-fit=cover, which pushes the page under the
   notch, the Dynamic Island and the home indicator. Full-bleed containers therefore
   have to inset themselves, or on a rotated iPhone the nav and footer run under the
   sensor housing and the rounded corners clip the first and last characters. */
@supports (padding:max(0px,env(safe-area-inset-left))){
  .mast,.navinner,.wrap,.footinner,.searchbar .inner{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right))}
  footer.sitefoot{padding-bottom:env(safe-area-inset-bottom)}
}



/* ---------- network bar ----------
   Every club page is one of ninety-four, and the front door is app/index.html. The bar
   sits above the club's own masthead so the network reads as the parent of the club
   rather than a footnote to it, and it is built entirely from the palette variables:
   the ninety-four palettes run from near-black to near-white, so a fixed colour here
   would be unreadable on a good third of them. */
.netbar{background:var(--panel-2);border-bottom:1px solid var(--line);
  font:400 12px/1.35 "IBM Plex Sans",sans-serif}
.netinner{max-width:1180px;margin:0 auto;padding:4px 20px;display:flex;align-items:center;
  gap:12px;min-height:38px;flex-wrap:wrap}
.netlink{display:inline-flex;align-items:baseline;gap:11px;text-decoration:none;
  color:var(--ink-2);border-radius:7px;padding:5px 9px;margin-left:-9px}
.netlink .wordmark{font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;
  line-height:1;color:var(--ink);white-space:nowrap}
.netlink .wordmark i{font-style:normal;color:var(--accent-text)}
.netlink .netrole,.netlink .netshort{color:var(--ink-2)}
/* On a phone the wordmark alone is not an affordance -- it reads as a logo, not a way
   out. The strapline is too long there, so a shorter one takes its place rather than
   the link being left as a bare mark. */
.netlink .netshort{display:none}
.netlink:hover{background:var(--panel)}
.netlink:hover .wordmark{text-decoration:underline;text-decoration-color:var(--accent-text);
  text-decoration-thickness:2px;text-underline-offset:3px}
/* The ring itself comes from the sheet's :focus-visible rule; this only adds the same
   ground the hover state uses, so a keyboard user and a mouse user see the same thing. */
.netlink:focus-visible{background:var(--panel)}
.netsp{flex:1 1 auto}
.netnote{color:var(--ink-2);white-space:nowrap}
@media (max-width:720px){
  .netlink .netrole{display:none}
  .netlink .netshort{display:inline}
}
@media (max-width:480px){.netnote{display:none}}

/* ---------- a season, played out ---------- */
.live.season .livescore{font-size:clamp(17px,3.2vw,25px)}
.seasonform{display:flex;align-items:center;gap:9px;margin:9px 0 11px}
.seasonform .k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.seasonform .formstrip{margin-top:0}
.seasonwrap{display:grid;grid-template-columns:minmax(250px,1fr) minmax(320px,1.1fr);
  gap:16px;align-items:start}
.seasonfeed{max-height:430px;border-top:1px solid var(--line);padding-right:7px}
.seasonfeed li{grid-template-columns:26px 1fr}
.seasonfeed .t{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.seasonfeed .res{display:inline-block;min-width:19px;text-align:center;font-size:10.5px;
  font-weight:700;letter-spacing:.04em;border-radius:4px;padding:2px 5px;color:#fff}
.seasonfeed .res.w{background:var(--win)}
.seasonfeed .res.d{background:var(--draw)}
.seasonfeed .res.l{background:var(--loss)}
.seasonfeed .pos{margin-left:auto;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;white-space:nowrap}
.seasonfeed .note{flex:1 1 100%;color:var(--ink-2);font-size:13px;line-height:1.5;margin-top:1px}
.seasonfeed li.noted{background:var(--panel-2)}
.seasontable{max-height:472px;overflow-y:auto}
/* The caption scrolls away with the table; only the column headers stick. It wraps to
   two lines at some widths and to three on a phone, and a sticky caption of unknown
   height means guessing the offset the sticky header row needs -- guess low and the
   headers sit on top of it. */
.ltab caption{caption-side:top;text-align:left;padding:9px 12px;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.45;
  border-bottom:1px solid var(--line);background:var(--panel)}
/* The club name is the row header, so it must not inherit the sheet's sticky, clickable
   column-header styling. */
.ltab th[scope="row"]{position:static;background:transparent;cursor:default;font-weight:400;
  font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink)}
.ltab th[scope="col"]{cursor:default;top:0}
.ltab th[scope="col"]:hover{color:var(--ink-3)}
.ltab td,.ltab th{padding:6px 10px}
/* Opaque, so a row sliding past another during a re-sort occludes it instead of
   showing through. Table rows take no stacking context of their own. */
.ltab tbody tr{background:var(--panel)}
.ltab tr.you{background:color-mix(in srgb,var(--accent) 18%,var(--panel))}
.ltab tr.you th[scope="row"]{font-weight:700}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:820px){
  .seasonwrap{grid-template-columns:1fr}
  /* Doubled class: the live-match sheet later on gives .livefeed a 56vh cap on a phone,
     which is right for a commentary feed you are watching and far too tall for a season
     feed stacked above its own table. */
  .livefeed.seasonfeed{max-height:300px}
  .seasontable{max-height:400px}
}

/* ---------- masthead ---------- */
header.top{border-bottom:1px solid var(--line);background:var(--panel);position:relative}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--accent) 0 33%,var(--accent-2) 33% 66%,var(--accent) 66% 100%)}
.mast{max-width:1180px;margin:0 auto;padding:26px 20px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:15px}
.crest{height:1.2em;width:auto;flex:0 0 auto;display:block;font-size:clamp(36px,5.4vw,58px);filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.mast h1{font-size:clamp(36px,5.4vw,58px);margin:0;font-weight:800;letter-spacing:-.015em;line-height:.9;text-transform:uppercase}
.mast .sub{color:var(--ink-2);font-size:13px;margin-top:6px}
.mast .spacer{flex:1 1 auto}
button.ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);
  border-radius:99px;padding:7px 13px;font:500 12px/1 "IBM Plex Sans",sans-serif;cursor:pointer}
button.ghost:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------- search ---------- */
.searchbar{background:var(--ground);padding:16px 0 12px;
  border-bottom:1px solid var(--line);margin-bottom:18px}
.searchbar .inner{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:11px}
.field{display:flex;align-items:center;gap:11px;background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--r);padding:0 14px;box-shadow:var(--shadow)}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.field svg{flex:0 0 auto;color:var(--ink-3)}
#q{flex:1;border:0;background:transparent;color:var(--ink);font:400 16px/1 "IBM Plex Sans",sans-serif;padding:14px 0;outline:none;min-width:0}
#q::placeholder{color:var(--ink-3)}
kbd{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:4px;padding:2px 5px;background:var(--panel-2)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:2px;gap:2px}
.seg button{border:0;background:transparent;color:var(--ink-2);cursor:pointer;border-radius:99px;
  padding:5px 11px;font:500 12px/1 "IBM Plex Sans",sans-serif}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.seg button.w[aria-pressed="true"]{background:var(--win);color:#fff}
.seg button.l[aria-pressed="true"]{background:var(--loss);color:#fff}
select{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);border-radius:99px;
  padding:5px 10px;font:500 12px/1 "IBM Plex Sans",sans-serif;cursor:pointer;max-width:190px}
.clear{margin-left:auto;color:var(--ink-3);font-size:12px;background:none;border:0;cursor:pointer;text-decoration:underline}

/* ---------- summary strip ---------- */
.summary{display:flex;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:8px;padding:9px 2px;box-shadow:var(--shadow);
  row-gap:4px}
.summary div{display:flex;align-items:baseline;gap:6px;padding:2px 9px;
  border-right:1px solid var(--line)}
.summary div:last-child{border-right:0}
.summary .k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;white-space:nowrap}
.summary .v{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:20px;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.summary .v.w{color:var(--win)} .summary .v.l{color:var(--loss)}
.formstrip{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap}
.formstrip i{width:11px;height:11px;border-radius:2px;display:block}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;margin:0;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;
  /* A flex item will not shrink below its content without this, so the nav pushed the
     PAGE wider instead of scrolling inside itself. Only clubs with every tab present
     were wide enough to show it -- Gillingham overflowed by 16px at 390px where clubs
     missing a managers or honours tab did not. */
  min-width:0;max-width:100%}
/* The tab strip scrolls inside itself, but its scroll width still propagates to the
   document, which then reports a horizontal overflow the user never sees. Only clubs
   with EVERY tab present are wide enough to trigger it. Clipping the body at phone
   widths settles it without touching the nav's own scrolling. */
@media (max-width:560px){ html,body{overflow-x:hidden;max-width:100%} }
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-block;text-decoration:none;background:none;border:1px solid transparent;border-radius:99px;color:var(--ink-3);
  cursor:pointer;padding:8px 15px;font:600 13px/1 "IBM Plex Sans",sans-serif;white-space:nowrap;
  transition:background .14s,color .14s,border-color .14s}
.tabs a:hover{color:var(--ink);background:var(--panel-2)}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--panel);
  border-color:var(--line);box-shadow:var(--shadow)}
.tabs a[aria-current="page"]::after{content:"";display:block;height:2px;margin:6px -4px -4px;
  background:var(--accent);border-radius:2px}

/* ---------- match rows ---------- */
.rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:82px 1fr 74px 96px 30px;gap:12px;align-items:center;
  padding:9px 13px 9px 10px;border-bottom:1px solid var(--line);cursor:pointer;
  border-left:3px solid transparent;background:var(--panel)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--panel-2)}
.row.W{border-left-color:var(--win)} .row.D{border-left-color:var(--draw)} .row.L{border-left-color:var(--loss)}
.row .date{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.row .opp{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .opp .vs{color:var(--ink-3);font-size:11px;font-weight:400;margin-right:6px;
  display:inline-block;width:24px;text-transform:uppercase;letter-spacing:.06em}
.row .comp{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sc{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.row .sc.W{color:var(--win)} .row .sc.L{color:var(--loss)}
.row .chev{color:var(--ink-3);text-align:center;font-size:11px;transition:transform .15s}
.row[aria-expanded="true"] .chev{transform:rotate(90deg)}
.detail{background:var(--panel-2);border-bottom:1px solid var(--line);padding:16px 18px 18px 20px;
  display:grid;grid-template-columns:minmax(240px,1.1fr) minmax(220px,1fr);gap:22px}
.detail h3{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin-bottom:9px}
.meta{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:12px;color:var(--ink-2);margin-bottom:14px}
.meta b{font-weight:500;color:var(--ink-3)}
.goal{display:flex;gap:9px;align-items:baseline;padding:4px 0;font-size:13.5px;border-bottom:1px dotted var(--line)}
.goal:last-child{border-bottom:0}
.goal .m{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);min-width:34px;text-align:right}
.goal .n{flex:1}
.goal.opp .n{color:var(--ink-3)}
.goal .tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);
  border-radius:3px;padding:1px 4px;color:var(--ink-3)}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;position:relative;top:-1px}
.statrow{display:grid;grid-template-columns:38px 1fr 38px;gap:9px;align-items:center;margin-bottom:7px;font-size:12px}
.statrow .lab{grid-column:1/-1;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;margin-bottom:-3px;font-weight:600}
.bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar i.f{background:var(--accent)} .bar i.a{background:var(--ink-3);opacity:.55}
.statrow .n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:12px}
.statrow .n.r{text-align:right}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:14px}
.more{width:100%;padding:13px;background:var(--panel-2);border:0;border-top:1px solid var(--line);
  color:var(--ink-2);cursor:pointer;font:500 13px/1 "IBM Plex Sans",sans-serif}
.more:hover{color:var(--ink)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
  position:sticky;top:0;background:var(--panel);cursor:pointer;z-index:2}
th:hover{color:var(--ink)}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
td .rank{color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:11.5px}
.linkish{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:3px;cursor:pointer;background:none;border:0;font:inherit;padding:0;text-align:left}
/* Name links sit in 29px list rows; on touch they need to clear the 24px WCAG 2.2
   AA floor. Declared here rather than with the other touch rules because .linkish
   sets padding:0 above and would otherwise win on source order. */
@media (pointer:coarse){ .linkish{padding-block:5px} }

.pill{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;border:1px solid var(--line);color:var(--ink-3)}


/* ---------- quiz ---------- */
.quizwrap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:22px 24px 24px;max-width:720px;box-shadow:var(--shadow)}
.quizhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.quizq{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:clamp(21px,3vw,27px);
  line-height:1.12;margin:8px 0 16px;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:11px;text-align:left;width:100%;cursor:pointer;
  background:var(--panel-2);border:1.5px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font:400 15px/1.35 "IBM Plex Sans",sans-serif;color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--ink-3)}
.opt:disabled{cursor:default}
.opt .key{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:2px 6px;flex:0 0 auto}
.opt.right{border-color:var(--win);background:color-mix(in srgb,var(--win) 14%,transparent)}
.opt.wrong{border-color:var(--loss);background:color-mix(in srgb,var(--loss) 14%,transparent)}
.opt.right .key{border-color:var(--win);color:var(--win)}
.opt.wrong .key{border-color:var(--loss);color:var(--loss)}
.quizbar{height:5px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin:14px 0 2px}
.quizbar i{display:block;height:100%;background:var(--accent);transition:width .25s}
.verdict{font-size:13.5px;margin-top:14px;min-height:20px;color:var(--ink-2)}
.verdict b{color:var(--ink)}
.quizfoot{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.btn{background:var(--ink);color:var(--ground);border:0;border-radius:99px;padding:10px 18px;
  font:600 13px/1 "IBM Plex Sans",sans-serif;cursor:pointer;transition:transform .12s,opacity .12s}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.sec{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
.score{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(56px,11vw,88px);line-height:.9;font-variant-numeric:tabular-nums}
.rating{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:26px;
  text-transform:uppercase;margin:6px 0 4px}
.review{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.review div.r{display:flex;gap:10px;padding:7px 0;border-bottom:1px dotted var(--line);font-size:13px}
.review div.r:last-child{border-bottom:0}
.review .mark{flex:0 0 auto;font-weight:700}
.review .mark.y{color:var(--win)} .review .mark.n{color:var(--loss)}



/* ---------- cookie consent ---------- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;justify-content:space-between;
  padding:14px clamp(14px,4vw,28px);background:var(--panel);
  border-top:1px solid var(--line-2);box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.consent p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:74ch}
.consent a{color:var(--accent-text)}
.consent .cbtns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:560px){.consent{flex-direction:column;align-items:stretch}
  .consent .cbtns{justify-content:stretch}.consent .cbtns .btn{flex:1}}

/* ---------- sharing ---------- */
.sharerow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:26px 0 0;
  padding:14px 0 0;border-top:1px solid var(--line)}
.sharebtns{display:flex;gap:8px;flex-wrap:wrap}
.sharebtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font:600 12.5px/1 "IBM Plex Sans",sans-serif;padding:9px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);cursor:pointer}
.sharebtn:hover{color:var(--ink);border-color:var(--line-2)}
.sharebtn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.sharebtn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}

/* ---------- the reveal: who the all-time XI turned out to be ---------- */
.reveal{margin:16px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel-2)}
.revealhead{font-weight:700;font-size:15px;margin:2px 0 10px}
.revealxi{list-style:none;margin:0;padding:0;display:grid;gap:4px 18px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.revealxi li{display:flex;gap:8px;align-items:baseline;font-size:13.5px}
.revealxi .rrole{color:var(--ink-3);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;min-width:74px}
.revealxi .rname{font-weight:600}
.revealxi .rcareer{color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}

/* ---------- pitch & squad builder ---------- */
/* A player's cost, on his shirt and against each name in the picker. Tabular figures
   so a column of them lines up and can be compared at a glance. */
.slot .cost{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-3);
  letter-spacing:.02em}
.slot{position:relative}
.slot .slotx{position:absolute;top:4px;right:4px;width:22px;height:22px;line-height:1;
  border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);
  font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.slot.filled:hover .slotx,.slot.filled:focus-within .slotx{display:flex}
.slot .slotx:hover{color:var(--ink);border-color:var(--line-2)}
/* Always visible where there is no hover to reveal it. */
@media (hover:none){.slot.filled .slotx{display:flex}}
.plist .cost{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-3)}
.plist .cost.over{color:var(--loss,#b3261e)}
.pitem.pricey{opacity:.62}
.pitem.pricey:hover,.pitem.pricey:focus-visible{opacity:1}
.curpick{display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 12px;margin:0 0 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-2)}
.curpick .who2{font-weight:600;font-size:14px}

.pitchwrap{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--lift);
  background:linear-gradient(175deg,var(--pitch) 0%,
    color-mix(in srgb,var(--pitch) 84%,#000) 55%,
    color-mix(in srgb,var(--pitch) 72%,#000) 100%)}
.pitchwrap .stripes{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 44px,transparent 44px 88px)}
.pitchwrap svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pitchwrap svg.lines *{stroke:rgba(255,255,255,.34);fill:none;stroke-width:2}
.pitchgrid{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;
  padding:16px 10px 20px;min-height:440px;justify-content:space-between}
.pline{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.slot{width:106px;min-height:78px;border-radius:9px;cursor:grab;padding:8px 6px;
  background:rgba(4,26,16,.52);border:1.5px dashed rgba(255,255,255,.42);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:500 12px/1.2 "IBM Plex Sans",sans-serif;text-align:center;
  transition:transform .12s,border-color .12s,background .12s;touch-action:none;user-select:none}
.slot:hover{border-color:var(--accent)}
.slot.filled{background:rgba(4,26,16,.74);border-style:solid;border-color:rgba(255,255,255,.5)}
.slot.filled:hover{border-color:var(--accent)}
.slot.dragging{opacity:.35}
.slot.dropcue{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent);transform:scale(1.05)}
.slot .role{font-size:9px;letter-spacing:.11em;text-transform:uppercase;opacity:.7}
.slot .who{font-weight:600;font-size:12.5px;line-height:1.15}
.slot .stat{font-family:"IBM Plex Mono",monospace;font-size:10px;opacity:.78}
.dragghost{position:fixed;z-index:999;pointer-events:none;opacity:.94;
  transform:translate(-50%,-50%) rotate(-3deg);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.bench{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 14px}
.bench .slot{background:var(--panel-2);color:var(--ink);border-color:var(--line);
  min-height:64px;width:120px}
.bench .slot.filled{background:var(--panel-2);border-color:var(--accent)}
.bench .slot .role{opacity:.6}
.hint{font-size:12px;color:var(--ink-3);margin-top:10px}

/* ---------- greatest XI (legacy) ---------- */
.pitch{position:relative;border-radius:var(--r);padding:18px 12px 22px;
  background:linear-gradient(180deg,var(--pitch) 0%,color-mix(in srgb,var(--pitch) 78%,#000) 100%);
  display:flex;flex-direction:column;gap:14px;min-height:430px;overflow:hidden}
.pitch::before{content:"";position:absolute;inset:10px;border:2px solid rgba(255,255,255,.28);
  border-radius:6px;pointer-events:none}
.pitch::after{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:0;
  border-left:2px dashed rgba(255,255,255,.16);pointer-events:none}
.pline{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.slot{width:104px;min-height:74px;border-radius:8px;cursor:pointer;padding:7px 6px;
  background:rgba(0,0,0,.30);border:1.5px dashed rgba(255,255,255,.45);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:500 12px/1.2 "IBM Plex Sans",sans-serif;text-align:center}
.slot:hover{border-color:var(--accent)}
.slot.filled{background:rgba(0,0,0,.55);border-style:solid;border-color:var(--accent)}
.slot .role{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.slot .who{font-weight:600;font-size:12.5px;line-height:1.15}
.slot .stat{font-family:"IBM Plex Mono",monospace;font-size:10px;opacity:.8}
.xiwrap{display:grid;gap:18px;grid-template-columns:minmax(300px,1.35fr) minmax(240px,1fr);
  align-items:start}
.picker{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px}
.picker input{width:100%;border:1.5px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:8px;padding:9px 11px;font:400 14px/1 "IBM Plex Sans",sans-serif;outline:none}
.picker input:focus{border-color:var(--accent)}
.plist{max-height:330px;overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:2px}
.pitem{display:flex;justify-content:space-between;gap:8px;align-items:baseline;cursor:pointer;
  padding:7px 9px;border-radius:6px;background:none;border:0;color:var(--ink);text-align:left;
  font:400 13.5px/1.25 "IBM Plex Sans",sans-serif;width:100%}
.pitem:hover{background:var(--panel-2)}
.pitem .sub{color:var(--ink-3);font-size:11.5px;font-family:"IBM Plex Mono",monospace;flex:0 0 auto}


/* ---------- on this day ---------- */
.otd{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:18px 20px 6px;max-width:760px}
.otd .big{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(30px,5vw,44px);line-height:1;text-transform:uppercase}
.otd .lede{color:var(--ink-2);font-size:13.5px;margin:4px 0 14px}
.otdrow{display:grid;grid-template-columns:52px 1fr 66px;gap:12px;align-items:center;
  padding:9px 0;border-top:1px solid var(--line);border-left:3px solid transparent;
  padding-left:9px;margin-left:-9px}
.otdrow.W{border-left-color:var(--win)} .otdrow.D{border-left-color:var(--draw)}
.otdrow.L{border-left-color:var(--loss)}
.otdrow .yr{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums}
.otdrow .sc{font-family:"IBM Plex Mono",monospace;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums}
.otdrow .sc.W{color:var(--win)} .otdrow .sc.L{color:var(--loss)}
.otdrow .sub{font-size:11.5px;color:var(--ink-3)}
/* ---------- records ---------- */
.recgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.rec{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:15px 17px;
  box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s}
.rec:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.rec .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.rec .v{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:31px;
  line-height:1.05;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.rec .sub{font-size:12.5px;color:var(--ink-2);line-height:1.45}


/* ---------- position chart ---------- */
.chart{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:16px 18px 10px;margin-bottom:16px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .band{fill:var(--ink);opacity:.035}
.chart .band.alt{opacity:.075}
.chart .bandlabel{fill:var(--ink-3);font:600 9px/1 "IBM Plex Sans",sans-serif;
  letter-spacing:.1em;text-transform:uppercase}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--ink-3);font:400 10px/1 "IBM Plex Mono",monospace}
.chart .trace{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round}
.chart .trophy{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .cross{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart .focus{fill:var(--accent-2);stroke:var(--panel);stroke-width:2;opacity:0}
.chartTip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-115%);
  background:var(--ink);color:var(--ground);border-radius:7px;padding:7px 10px;
  font:500 12px/1.35 "IBM Plex Sans",sans-serif;white-space:nowrap;z-index:5;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
.chartTip b{font-weight:700}
.chartwrap{position:relative}
.chartlegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--ink-3)}
.chartlegend span{display:flex;align-items:center;gap:6px}
.chartlegend i{width:11px;height:11px;border-radius:50%;display:block}


/* ---------- profile ---------- */
.back{background:none;border:0;color:var(--ink-3);cursor:pointer;font:500 12px/1 "IBM Plex Sans",sans-serif;
  padding:0;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.back:hover{color:var(--ink)}
.phead{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:20px 22px;margin-bottom:14px}
.phead h2{font-size:clamp(31px,5vw,46px);font-weight:800;text-transform:uppercase;line-height:.95}
.phead .who{color:var(--ink-2);font-size:13.5px;margin-top:5px}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:16px}
.pstats div{background:var(--panel);padding:10px 12px}
.pstats .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pstats .v{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:27px;
  line-height:1.05;font-variant-numeric:tabular-nums}
.pcols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.pcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:17px 19px;box-shadow:var(--shadow)}
.pcard h3{font-size:18px;text-transform:uppercase;margin-bottom:9px}
.sparkrow{display:flex;align-items:flex-end;gap:3px;height:64px;margin:8px 0 4px}
.sparkrow div{flex:1;min-width:5px;background:var(--accent);border-radius:2px 2px 0 0;position:relative}
.sparkrow div span{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  font:400 9px/1 "IBM Plex Mono",monospace;color:var(--ink-3);white-space:nowrap}
.sparkscale{display:flex;justify-content:space-between;font:400 10px/1 "IBM Plex Mono",monospace;
  color:var(--ink-3);margin-top:20px}
.glist{max-height:340px;overflow:auto}
.linkish.p{text-decoration-color:var(--accent)}


/* ---------- simulator ---------- */
.simgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.simcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:17px 19px;box-shadow:var(--shadow)}
.simcard h3{font-size:18px;text-transform:uppercase;margin-bottom:9px}
.ratebar{display:grid;grid-template-columns:78px 1fr 46px;gap:9px;align-items:center;
  margin-bottom:7px;font-size:12px}
.ratebar .lab{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.ratebar .track{height:7px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.ratebar .track i{display:block;height:100%;background:var(--accent)}
.ratebar .track i.def{background:var(--accent-2)}
.ratebar .num{font-family:"IBM Plex Mono",monospace;text-align:right;font-variant-numeric:tabular-nums}
.hist{display:flex;align-items:flex-end;gap:2px;height:88px;margin:10px 0 2px}
.hist div{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px;position:relative}
.hist div.real{background:var(--accent-2)}
.histscale{display:flex;justify-content:space-between;font:400 10px/1 "IBM Plex Mono",monospace;
  color:var(--ink-3)}
.histscale .swatch{display:inline-block;width:8px;height:8px;border-radius:2px;
  background:var(--accent-2);vertical-align:-1px;margin-right:5px}
.simtable td.you{font-weight:700}
.simtable tr.you{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.bigstat{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(40px,7vw,62px);line-height:.95;font-variant-numeric:tabular-nums}


/* ---------- home / hero ---------- */
.hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:18px;
  background:var(--ground);color:#fff;box-shadow:var(--lift);isolation:isolate}
.hero .shot{position:absolute;inset:0;background-size:cover;background-position:center 42%;
  z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg,color-mix(in srgb,var(--ground) 82%,transparent) 0%,
      color-mix(in srgb,var(--ground) 32%,transparent) 22%,transparent 46%),
    linear-gradient(100deg,color-mix(in srgb,var(--ground) 97%,transparent) 0%,
      color-mix(in srgb,var(--ground) 93%,transparent) 42%,
      color-mix(in srgb,var(--ground) 60%,transparent) 68%,
      color-mix(in srgb,var(--ground) 46%,transparent) 100%)}
.hero .credit{position:absolute;right:16px;bottom:13px;z-index:3;font-size:10.5px;
  color:rgba(255,255,255,.62);letter-spacing:.02em;text-align:right;line-height:1.4}
.hero .credit b{color:rgba(255,255,255,.86);font-weight:600}
.hero .stripes{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 52px,transparent 52px 104px)}
.hero .glow{position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent),transparent 68%);pointer-events:none}
.hero .inner{position:relative;z-index:2;padding:38px 32px 34px;max-width:940px}
/* --accent is the FILL colour and can be too dark to read as text -- Palace's
   #C4122E manages 2.2:1 over the hero. --accent-text is the same hue solved for
   legibility, and is what every accent-coloured TEXT run must use. */
.hero .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--accent-text);margin-bottom:10px}
.hero h2{text-wrap:initial;font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(30px,4.9vw,58px);line-height:.92;text-transform:uppercase;letter-spacing:-.015em}
.hero p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86);margin-top:16px;max-width:54ch}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn.hero-primary{background:var(--accent);color:var(--accent-ink);font-size:14px;padding:13px 24px;
  font-weight:700}
.btn.hero-secondary{background:rgba(255,255,255,.13);color:#fff;font-size:14px;padding:13px 22px;
  border:1px solid rgba(255,255,255,.28)}
.hero .facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
.hero .facts div span{display:block}
.hero .facts .n{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:27px;
  line-height:1}
.hero .facts .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-top:2px}
.homegrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.hcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:18px 20px;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .14s,box-shadow .14s,border-color .14s;text-align:left;width:100%;
  font:inherit;color:inherit}
.hcard:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:var(--ink-3)}
.hcard h3{font-size:21px;text-transform:uppercase;margin:4px 0 6px}
.hcard p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}
.hcard .go{font-size:12px;font-weight:600;color:var(--ink);margin-top:10px;display:block}
.challenge{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);
  background:var(--panel);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:14px}
.challenge .row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.challenge .big{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:44px;
  line-height:.95}


/* ---------- sticky navigation ---------- */
.stickynav{position:sticky;top:0;z-index:40;background:var(--ground);
  box-shadow:0 1px 0 var(--line)}
.navinner{max-width:1180px;margin:0 auto;padding:0 20px}
.stickynav .tabs{margin:0;padding:9px 0 7px}
.stickynav .searchbar{position:static;border-bottom:0;padding:0 0 12px;margin:0}


/* ---------- section banners ---------- */
.banner{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:16px;
  min-height:132px;display:flex;align-items:flex-end;box-shadow:var(--shadow);background:var(--ground)}
.banner .shot{position:absolute;inset:0;background-size:cover;background-position:center 45%}
.banner .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ground) 92%,transparent) 0%,
    color-mix(in srgb,var(--ground) 74%,transparent) 44%,
    color-mix(in srgb,var(--ground) 36%,transparent) 100%)}
.banner .txt{position:relative;z-index:2;padding:16px 20px 15px;color:#fff}
.banner h2{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:34px;
  line-height:.92;text-transform:uppercase;letter-spacing:-.01em}
.banner .sub{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:5px;max-width:62ch;
  line-height:1.45}
.banner .cap{position:absolute;right:14px;bottom:11px;z-index:2;font-size:10px;
  color:rgba(255,255,255,.55);text-align:right}
/* The caption is absolutely positioned bottom-right, which on a phone lands on top
   of the banner subtitle. Narrow screens get it on its own line under the text. */
@media (max-width:620px){
  .banner h2{font-size:26px}
  .banner{min-height:112px;flex-wrap:wrap}
  .banner .cap{position:static;width:100%;order:2;text-align:left;
    padding:0 20px 10px;margin-top:-4px}
  .banner .txt{padding-bottom:8px}
}


.navdivide{width:1px;height:20px;background:var(--line);margin:0 6px;flex:0 0 auto;
  align-self:center}
.tabs.primary a{font-size:13.5px;padding:9px 16px}
.tabs.sub{padding:0 0 9px;gap:3px}
.tabs.sub a{font-size:12.5px;padding:6px 12px;color:var(--ink-3)}
.tabs.sub a[aria-current="page"]{background:var(--panel-2);border-color:var(--line);
  color:var(--ink);box-shadow:none}
.tabs.sub a[aria-current="page"]::after{display:none}
.tabs.sub[hidden]{display:none}


/* ---------- advertising ---------- */
.adslot{border:1px dashed var(--line);border-radius:var(--r);background:var(--panel);
  margin:16px 0;padding:10px 12px 12px;text-align:center;overflow:hidden}
.adslot .lab{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:8px}
.adslot .box{min-height:90px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:12px;line-height:1.5}
.adslot.wide .box{min-height:110px}
@media (max-width:620px){.adslot .box{min-height:110px}}

/* ---------- live match ---------- */
.live{margin-bottom:14px}
.livehead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:10px}
.liveclock{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:5px 11px;
  font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap;min-width:52px;text-align:center}
.liveclock.on{color:var(--ink);border-color:var(--ink-3)}
.livescore{font-family:"Big Shoulders Display","Arial Narrow",sans-serif;font-weight:800;
  font-size:clamp(22px,4.6vw,34px);line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;flex:1 1 220px;min-width:0}
.livetools{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.livetools button[disabled]{opacity:.55;cursor:default}
.livebar{height:4px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin-bottom:2px}
.livebar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s linear}
.livefeed{list-style:none;margin:0;padding:0;max-height:330px;overflow-y:auto;
  overscroll-behavior:contain;border-top:1px solid var(--line)}
.livefeed li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:9px 2px;
  border-bottom:1px solid var(--line);font-size:14px;line-height:1.55}
.livefeed li:last-child{border-bottom:0}
.livefeed .m{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-top:3px}
.livefeed li.goal{background:var(--panel-2)}
.livefeed li.goal .t{font-weight:600}
.livefeed li.phase .t{color:var(--ink-2);font-size:13px}
.livefeed .tag{display:inline-block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:4px;
  padding:2px 6px;margin-right:7px;vertical-align:1px}
.livefeed li.fresh{animation:livein .26s ease-out}
@keyframes livein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:620px){.livefeed{max-height:56vh}.livetools{margin-left:0;width:100%}}

/* ---------- notes ---------- */
.notes{margin-top:34px;border-top:1px solid var(--line);padding-top:20px;color:var(--ink-2);font-size:13px;
  max-width:70ch;line-height:1.65}
.notes h2{font-size:21px;text-transform:uppercase;margin-bottom:10px;color:var(--ink)}
.notes ul{padding-left:18px;margin:9px 0}
.notes li{margin-bottom:5px}
.notes code{font-family:"IBM Plex Mono",monospace;font-size:12px;background:var(--panel-2);
  padding:1px 5px;border-radius:4px}
.notes a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:2px}
/* --accent-text, not --accent. The raw brand colour is chosen for the badge, not for
   legibility: measured against --panel-2, the background behind most focusable controls
   here, it falls under the 3:1 WCAG 1.4.11 asks of a focus indicator on 51 of the 94
   palettes -- 2.46:1 at Plymouth Argyle -- so on more than half the network keyboard
   focus was effectively invisible. --accent-text is the same hue adjusted until it can
   be read: 4.79:1 at its worst (AFC Wimbledon) against --panel-2, 5.27:1 against
   --panel, and no club under 3:1. */
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:720px){
  .row{grid-template-columns:74px 1fr 68px 22px;gap:8px}
  .row .date{font-size:10.5px;white-space:nowrap}
  .row .comp{display:none}
  .detail{grid-template-columns:1fr}
  .mast h1{font-size:34px}
}

/* Touch overrides live at the END of the sheet deliberately. Several base rules
   use `font:` shorthands and `padding:0`, which reset font-size and padding at the
   same specificity -- declared any earlier, these silently lose on source order. */
@media (pointer:coarse){
  /* iOS Safari zooms the entire page when a control smaller than 16px takes focus,
     and does not zoom back out. Every focusable control meets 16px on touch; desktop
     keeps its denser 12px. */
  select,#q,input,textarea,button.ghost,.clear,.picker input,.field input{font-size:16px}
  .tabs a,.seg button,select,button.ghost,.clear,.btn{min-height:44px}
  .tabs a,.seg button,.btn{display:flex;align-items:center;justify-content:center}
  .netlink{min-height:44px;align-items:center}
}