@import url("fonts/fonts.css");
:root{
  --ink:#eceae7; --muted:#9aa1ab; --rule:#2f353f;
  --panel:#15181e; --panel2:#1c2027; --ground:#101216;
  --page:#242830;
  --centre:#343b47; --accent:#e0a94a;
  --display:"Oxanium","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
/* Two things a phone in landscape needs.

   viewport-fit=cover in the meta tag stops iOS letterboxing the page away
   from the notch, which is where the black band down one side came from; the
   safe-area padding below then keeps the content clear of the notch itself
   rather than under it.

   And nothing may make the document wider than the screen. When something
   does, iOS does not show a scrollbar - it quietly shrinks the whole page to
   fit and leaves dead space beside it, which is indistinguishable from "the
   layout did not respond to the rotation". Tables have their own scrollers,
   so nothing legitimate needs the page to scroll sideways. */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
img,svg{max-width:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* The card pages run wider than the reading pages: a match card carries two
   elevens side by side and the extra room keeps them from crowding. */
.wrap.wide{max-width:1360px}
.top{background:var(--panel);border-bottom:1px solid var(--rule);margin-bottom:30px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;flex-wrap:wrap;max-width:1360px}
.brand{font-family:var(--display);font-weight:700;font-size:1.22rem;color:var(--ink);
  text-decoration:none;letter-spacing:.06em;text-transform:uppercase}
.brand span{color:var(--accent)}
/* The burger is invisible on a desktop, where the row fits. */
.menu>summary{display:none;list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.burger svg{width:26px;height:26px;display:block}
nav{display:flex;align-items:center;gap:22px}
nav a{font-family:var(--display);color:var(--muted);text-decoration:none;
  font-size:.96rem;letter-spacing:.05em;text-transform:uppercase;padding-bottom:3px}
nav a.on,nav a:hover{color:var(--ink);border-bottom:2px solid var(--accent)}
/* "My team" menu: a <details> element, so the dropdown needs no JavaScript */
nav .dd{position:relative}
nav .dd summary{font-family:var(--display);color:var(--muted);font-size:.96rem;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;list-style:none;padding-bottom:3px;white-space:nowrap}
nav .dd summary::-webkit-details-marker{display:none}
nav .dd summary::after{content:" ▾";font-size:.8em}
nav .dd summary:hover,nav .dd summary.on{color:var(--ink);border-bottom:2px solid var(--accent)}
nav .ddmenu{position:absolute;right:0;top:100%;margin-top:10px;z-index:20;
  background:var(--panel);border:1px solid var(--rule);padding:8px 0;min-width:230px;
  max-height:70vh;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.5)}
nav .ddmenu a{display:block;margin:0;padding:7px 16px;font-size:.9rem;text-transform:none;
  letter-spacing:0;font-family:var(--body);border:none}
nav .ddmenu a:hover,nav .ddmenu a.on{background:var(--panel2);color:var(--ink);border:none}
h1,.pagetitle{font-family:var(--display);font-size:2.1rem;margin:.1em 0 .25em;font-weight:700;letter-spacing:.01em}
h2{font-family:var(--display);font-size:1.4rem;margin:1.5em 0 .5em;font-weight:600;letter-spacing:.02em}
h3{font-family:var(--display);font-size:1.14rem;margin:1.3em 0 .5em;font-weight:600}
h4{font-family:var(--display);font-size:1.12rem;margin:0 0 .2em;font-weight:600}
p{margin:.55em 0}
.intro{color:var(--muted);max-width:80ch;font-size:1.02rem}
/* How to read a card, said once in the footer. Full width of the column, and
   set like the rest of the footer rather than fenced off behind a rule - it
   is a note, not a warning. */
.howto{margin:.9em 0 0;max-width:none}
.howto a{white-space:nowrap}
/* A one-line summary under a page title should not be broken across two lines
   by a measure meant for paragraphs. */
.intro.lede{max-width:none;font-size:1.06rem}
/* The gloss under a column heading: what the number means, so the heading can
   stay a name rather than becoming a sentence. */
.record th .hint,.septable th .hint{display:block;font-family:var(--body);font-weight:400;
  font-size:.72rem;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:2px}
/* The pipeline on the method page. Laid out in HTML rather than drawn as one
   picture so that it reflows to a column on a phone instead of shrinking to
   an unreadable strip. */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  list-style:none;counter-reset:flow;padding:0;margin:1.6em 0}
.flow li{counter-increment:flow;background:var(--panel);border:1px solid var(--rule);
  padding:16px 16px 18px;position:relative}
.flow li::before{content:counter(flow);display:block;font-family:var(--display);font-weight:700;
  font-size:.78rem;color:var(--accent);letter-spacing:.12em;margin-bottom:6px}
.flow li b{display:block;font-family:var(--display);font-size:1.02rem;margin-bottom:5px}
.flow li span{display:block;font-size:.9rem;color:var(--muted);line-height:1.5}
.diagram{margin:1.8em 0 1.4em;padding:0}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{font-size:.9rem;color:var(--muted);margin-top:.5em;max-width:80ch}
.diagram .dlab{font:600 15px var(--display);fill:var(--ink);letter-spacing:.04em}
.diagram .dnote{font:400 13px var(--body);fill:var(--muted)}
.diagram .dnote.accent{fill:var(--accent)}
.diagram .dbig{font:700 26px var(--display);fill:var(--ink);letter-spacing:.02em}
.diagram .dlabsm{font:600 13.5px var(--display);fill:var(--ink);letter-spacing:.03em}
.intro.small,.small{font-size:.92rem}
.muted{color:var(--muted)}
a{color:#7ea8e0}

/* --- one match module ------------------------------------------------- */
/* Each card is its own object on the field: darker than the page, with a rule
   round it and a real gutter between one and the next. Corners stay square -
   the whole look is borrowed from a 1999 football management game and rounding
   them would undo it. */
.module{background:var(--panel);border:1px solid var(--rule);margin:0 0 26px;
  box-shadow:0 1px 0 rgba(0,0,0,.35)}
html{scroll-behavior:smooth}
.module{scroll-margin-top:14px}
.modhead{background:linear-gradient(180deg,#1f242c,#191d24);border-bottom:1px solid var(--rule);
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.modtitle{min-width:0}
/* The site mark sits in the top corner and the four controls spread evenly
   beneath it, rather than the mark taking a line of its own under the title. */
.modside{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none}
.modnav{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;min-width:168px}
/* the plus is drawn, not typed: a glyph sits on its own baseline and never
   centres exactly inside a circle */
.modnav .expand{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;
  margin-right:6px}
.modnav .expand svg{width:17px;height:17px;display:block}
.modnav .expand:hover{color:#0e1013;background:var(--accent);border-color:var(--accent)}
.modnav .chev{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none}
.modnav .chev svg{width:18px;height:18px}
.modnav .chev:hover{color:var(--ink);border-color:var(--accent)}
.modnav .chev.off{opacity:.25}
/* Share sits apart from the three navigation controls, at the right-hand end.
   It is a <button>, not an anchor, because it opens a share sheet rather than
   going anywhere - hence the reset, and hence [hidden] being spelled out: the
   display:flex above would otherwise beat the attribute and show a dead
   control to a browser running no scripts. */
.modnav .share{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:none;padding:0;margin-left:6px;cursor:pointer;position:relative}
.modnav .share[hidden]{display:none}
.modnav .share svg{width:17px;height:17px;display:block}
.modnav .share:hover{color:#0e1013;background:var(--accent);border-color:var(--accent)}
.modnav .share:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Confirmation for the copy fallback, since nothing else on screen moves. */
.modnav .share.ok::after,.modnav .share.no::after{position:absolute;bottom:calc(100% + 9px);right:-4px;
  white-space:nowrap;font:700 .68rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  padding:7px 10px;border-radius:3px;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.modnav .share.ok::after{content:"Link copied";background:var(--accent);color:#0e1013}
.modnav .share.no::after{content:"Copy failed";background:var(--panel2);color:var(--ink);border:1px solid var(--rule)}
.sronly{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.modhead h2{font-family:var(--display);margin:0;font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:.01em}
.modhead h2 a{color:#fff;text-decoration:none}
.modhead h2 a:hover{color:var(--accent)}
.modhead p{margin:.25em 0 0;font-size:.92rem;color:var(--muted);font-family:var(--display);letter-spacing:.03em}
/* The address under the fixture line: the header wordmark, smaller, with the
   suffix in the accent the way the header's question mark is. Small enough to
   sit below the kick-off without competing with it, big enough to survive
   being screenshotted and looked at on a phone. */
.stamp{display:inline-block;margin:.55em 0 0;font-family:var(--display);font-weight:700;
  font-size:.84rem;line-height:1;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;opacity:.9}
.stamp span{color:var(--accent)}
.stamp:hover{opacity:1}
.modchart{display:grid;grid-template-columns:186px 1fr 186px;align-items:center;gap:10px;padding:20px 18px 6px}
.crestcell{display:flex;align-items:center;justify-content:center}
/* A badge is a link to the club. */
.crestlink{display:block;line-height:0}
.crestlink:hover .crest{filter:brightness(1.12)}
.crestlink:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.xihead h4 .clublink{color:inherit;text-decoration:none}
.xihead h4 .clublink:hover{color:var(--accent)}
/* No plate. A badge sitting straight on the card reads better than one boxed
   into a shape that is not its own, and nearly all of them can sit there: the
   crests are appraised against this exact background by src/site/crestcheck.js
   and 32 of the 35 stand on their own.
   The handful that cannot - the navy Tottenham cockerel, the black Swansea
   swan - are not propped up here but at the source, where copyCrests gives
   them a halo cut to their own silhouette. The fix travels with the artwork
   that needs it, and nothing is imposed on the artwork that does not.
   The published artwork is trimmed to its own ink, so this box needs no
   padding: the badge fills it, and centring the image centres the badge.
   object-fit keeps it undistorted whatever shape it is, and the box stays
   square so both crests on a card line up however tall or wide they are. */
.crest{width:146px;height:146px;box-sizing:border-box;object-fit:contain}
/* The no-crest fallback takes the same circle, in the club's colour. */
.crest.mono{display:flex;align-items:center;justify-content:center;width:146px;height:146px;
  box-sizing:border-box;background:var(--c);color:#0e1013;font-family:var(--display);font-weight:700;
  font-size:1.5rem;border:none;border-radius:50%;letter-spacing:.04em;padding:0}
.angel{display:block;width:100%;height:auto}
.angel .side{font:700 17px var(--display);letter-spacing:.06em}
.angel .valbox{font:600 16px var(--body);fill:var(--ink);font-variant-numeric:tabular-nums}
.angel .valbox.lead{font-weight:700}
.angel .valbox.small{font-size:13px;letter-spacing:-.01em}
/* The figure under a worded value - the Elo rating beneath "Above average".
   Small and quiet: it is there for anyone who wants it and ignorable by
   everyone else. */
.angel .valsub{font:500 11.5px var(--body);fill:var(--muted);font-variant-numeric:tabular-nums}
/* Calibration dots. The visible dot is small on purpose - its size carries how
   many predictions are in that bucket - so an invisible disc over the top
   catches the pointer, the dot lights up to show it has been caught, and the
   reading appears beside it. All of it on :hover, so the chart still needs no
   JavaScript. The panel is drawn last in the markup and so paints over the
   plot; pointer-events:none on it stops it stealing the hover from the disc
   underneath and flickering. */
.calpt .dot{fill:#7ea8e0;fill-opacity:.8}
.calpt .hit{fill:transparent}
.calpt:hover{cursor:help}
.calpt:hover .dot{fill:var(--accent);fill-opacity:1}
.calpt .tip{opacity:0;pointer-events:none;transition:opacity .1s ease-out}
.calpt:hover .tip{opacity:1}
.calpt .tip rect{fill:#0c0e12;stroke:var(--accent);stroke-width:1}
.calpt .tip .tiptxt{font:600 12.5px var(--body);fill:var(--ink)}
.calpt .tip .tiptxt.quiet{font-weight:400;fill:var(--muted);font-size:11.5px}
/* Inter, not the display face, for the centre column: Oxanium is a squared
   display type and gets cramped and pixelated at label size. */
.angel .midlbl{font:600 15.5px var(--body);fill:#fff;letter-spacing:.005em}
.angel .midnote{font:400 12.5px var(--body);fill:#aeb6c0;letter-spacing:.005em}
.angel .midnote.tight{font-size:11px}
.keydot{display:inline-block;width:11px;height:11px;background:var(--accent);vertical-align:-1px}

/* The line-ups, now inside the notes. Four rows of a two-column grid rather
   than two stacked blocks, so every comparable part - heading, eleven, subs,
   doubts - sits at the same depth on both sides however uneven the content. */
.lineups{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--rule)}
.xihead h4{font-size:1.24rem}
.xihead h4 .muted{font-size:.9rem;font-weight:500}
.xicap{font-family:var(--display);font-size:.84rem;color:var(--muted);margin:.1em 0 .2em;
  text-transform:uppercase;letter-spacing:.07em}
.players{list-style:none;margin:.2em 0 0;padding:0;font-size:1rem;columns:2;column-gap:24px}
.players li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;break-inside:avoid;
  border-bottom:1px solid #23272f}
.pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.newsign{font-family:var(--display);font-size:.62rem;letter-spacing:.08em;color:#0e1013;
  background:var(--accent);padding:1px 5px;margin-left:7px;vertical-align:1px;font-weight:700}
.pstart{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.94rem}
.subs,.doubts{font-size:.94rem;margin:.9em 0 0;line-height:1.5}
.subs .lbl,.doubts .lbl{display:block;font-family:var(--display);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:2px}
.doubt em{color:#e08a72;font-style:normal;font-size:.88em}

/* The answer, and the only thing above the fold on a phone. The headline
   leads, the gauge shows how far past too-close-to-call it has gone, and the
   confidence names it. Nothing else. */
.verdict{padding:18px 24px 14px;text-align:center;background:#101318}
.gauge{display:block;width:100%;height:auto;max-width:660px;margin:2px auto 0}
.gauge .gend{font:600 15px var(--display);letter-spacing:.03em}
.gauge .gmid{font:500 14px var(--display);fill:var(--muted);letter-spacing:.05em;text-transform:uppercase}
/* Written inside the draw zone, in a tone darker than the band, so it names
   the shape instead of competing with the needle. */
.gauge .gdraw{font:700 13.5px var(--display);fill:#c3c9d2;fill-opacity:.7;letter-spacing:.03em}
.vhead{font-family:var(--display);font-size:2.1rem;font-weight:700;margin:0 0 .1em;letter-spacing:.01em}
.vsub{font-family:var(--display);font-size:1.02rem;color:var(--muted);margin:.2em 0 0;letter-spacing:.04em}
/* The arithmetic behind the call. Deliberately the smallest type on the card:
   it is there to be checked, not read. */
.vprob{font-size:.78rem;color:var(--muted);opacity:.85;font-variant-numeric:tabular-nums;line-height:1.5}
.badge{font-family:var(--display);font-size:.76rem;padding:3px 9px;border:1px solid var(--rule);
  white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.badge.conf{background:#1d2a20;border-color:#2f4a36;color:#8fd0a2}
.badge.upset{background:#2a2317;border-color:#4a3d22;color:#e0b972}

/* One expander per card, holding everything that is not the answer: the
   chart, the key stat, the notes, the line-ups and the arithmetic. Open on a
   desktop where there is room for an argument, shut on a phone where the
   answer is what fits. */
details.more{border-top:1px solid var(--rule)}
details.more>summary{display:flex;align-items:center;gap:16px;
  padding:12px 24px;cursor:pointer;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::marker{content:""}
details.more>summary:hover .ntoggle{color:var(--ink)}
.morebody{padding-bottom:2px}
.morebody .notes{padding:0 24px 20px}

/* Our call, and when it last moved: one quiet row closing the card. */
.modfoot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding:10px 24px 11px;background:#101318}
.modfoot .vprob{margin:0}
/* The chevron leads, so every card's arrow sits on the same left margin and
   the column of them reads as a column. */
.ntoggle{font-family:var(--display);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);display:flex;align-items:center;gap:10px;flex-direction:row}
.ntoggle::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
details.more[open] .ntoggle::before{transform:rotate(-135deg) translateY(-2px)}
.ntoggle .open{display:none}
details.more[open] .ntoggle .shut{display:none}
details.more[open] .ntoggle .open{display:inline}
.nbody{padding:2px 24px 22px}

.notes{padding:18px 24px 22px}
/* Scoped to the bullet list itself, not to everything inside .notes. The
   line-ups now live in here too, and a display:contents rule aimed at the
   note items was dissolving every player's row into the paragraph flow -
   eleven names and eleven percentages running together on one line. A rule
   that describes a list should name that list. */
.nlist{list-style:none;margin:.5em 0 0;padding:0;max-width:112ch;
  display:grid;grid-template-columns:max-content 1fr;column-gap:20px;row-gap:9px}
/* display:contents hands each item's two spans straight to the grid, so every
   label shares one column sized to the longest of them and the text starts at
   the same x down the whole card - wrapped lines included. */
.nlist>li{display:contents}
.nlist .ntxt{font-size:1rem;line-height:1.5;color:var(--ink)}
/* The label carries the scanning weight - the eye should be able to run down
   the left edge and find "Form" without reading the sentences. */
.nlist .nlab{font-family:var(--display);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);white-space:nowrap;padding-top:.28em}
/* When this card's call last moved. Quiet, and set in the body face rather
   than shouted in uppercase: it is reassurance that the page is watching, not
   a headline. */
.updated{font-size:.76rem;color:var(--muted);opacity:.72;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}

/* The thin-data admissions. Present, readable, and plainly subordinate. */
.nb{font-size:.86rem;line-height:1.45;color:var(--muted);opacity:.85;
  margin:16px 0 0;padding-top:11px;border-top:1px solid var(--rule);max-width:104ch}
.nb span{font-family:var(--display);font-size:.72rem;letter-spacing:.1em;margin-right:7px}
@media (max-width:640px){
  .nlist{grid-template-columns:1fr;row-gap:4px}
  .nlist .nlab{padding-top:6px}
}

.keynote{font-size:.95rem;color:var(--muted);margin:0 24px 18px;padding:12px 16px;
  background:#171a20;border-left:3px solid var(--accent);max-width:none}
.keynote b{color:var(--ink);font-weight:600}
.angel .grouplbl{font:600 12.5px var(--display);fill:var(--accent);letter-spacing:.14em}
.angel .grouplbl.quiet{fill:var(--muted);font-size:11px}
.angel .grouplbl.contra{fill:#e0956f}
.angel .midlbl.star{fill:var(--accent)}
.keynote.contra{border-left-color:#e0956f}
/* --- league table ----------------------------------------------------- */
.league td,.league th{padding:9px 10px}
.league th.c,.league td.c{text-align:center;width:auto}
.league td.pos{color:var(--muted);width:44px}
.league td.club{white-space:nowrap}
.league td.club a{color:var(--ink);text-decoration:none}
.league td.club a:hover{color:var(--accent)}
.league td.pts{font-size:1.05rem}
.league .of{color:#6b7480;font-size:.86em}
/* Ordinary positions sit on a flat, slightly warm graphite so the shaded
   zones stand out as meaningful rather than decorative. */
.league tbody tr{border-left:5px solid transparent;background:#191b1e}
.league tr.champ{border-left-color:#f2b950;background:#332a15}
.league tr.ucl{border-left-color:#5b8fd6;background:#16223a}
.league tr.uel{border-left-color:#49b3a8;background:#123029}
.league tr.uecl{border-left-color:#6cbf63;background:#162c17}
.league tr.releg{border-left-color:#d1543a;background:#331616}
.league tr.hi{outline:1px solid var(--accent);outline-offset:-1px}
.legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:.86rem;color:var(--muted);margin:.9em 0 0}
.legend .key{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:-8px}
.legend .key.champ{background:#f2b950}.legend .key.ucl{background:#5b8fd6}
.legend .key.uel{background:#49b3a8}.legend .key.uecl{background:#6cbf63}
.legend .key.releg{background:#d1543a}
.legend .legnote{flex-basis:100%;color:#6b7480;font-size:.84rem}
.poschart{display:block;width:100%;height:auto;background:var(--panel);border:1px solid var(--rule);padding:8px 0}
.poschart .tick{font:12px var(--body);fill:var(--muted)}
.poschart .sub{font:12px var(--body);fill:var(--muted)}
/* hover readout: pure CSS, one zone per gameweek */
.poschart .hz .hint{opacity:0;pointer-events:none;transition:opacity .08s}
.poschart .hz:hover .hint{opacity:1}
.poschart .tipmain{font:600 12.5px var(--body);fill:var(--ink)}
.poschart .tipsub{font:11.5px var(--body);fill:var(--muted)}
.posblock{margin-bottom:26px}
.clubpicker{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:.9em 0 0}
.clubpicker .lbl{font-family:var(--display);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-right:4px}
.clubpicker a{font-family:var(--display);font-size:.82rem;letter-spacing:.05em;text-decoration:none;
  color:var(--muted);border:1px solid var(--rule);padding:4px 9px;border-bottom:2px solid var(--c)}
.clubpicker a:hover,.clubpicker a.on{color:var(--ink);background:var(--panel2)}

/* --- other pages ------------------------------------------------------ */
.detailcols{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:20px}
/* Two findings side by side, each its own claim, so a rule between them says
   they are to be read separately rather than as one wide column of text. The
   right-hand panel then stretches to the depth of the chart beside it, which
   is the only way two unequal things sit level. */
.detailcols.split{gap:0}
.detailcols.split>div{display:flex;flex-direction:column;padding-right:34px}
.detailcols.split>div+div{border-left:1px solid var(--rule);padding-right:0;padding-left:34px}
.detailcols.split .topsig{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;
  font-size:1.02rem;margin:.9em 0 1.1em}
.detailcols.split .topsig li{margin:0}
@media (max-width:860px){
  .detailcols.split>div{padding-right:0}
  .detailcols.split>div+div{border-left:none;border-top:1px solid var(--rule);
    padding-left:0;padding-top:22px;margin-top:8px}
}
/* --- narrower screens --------------------------------------------------
   Two passes. At 860 the side-by-side layouts give up their second column;
   below 560 the type comes down a step as well, because a card built for a
   1200px page reads as shouting on a phone. Everything that pairs the two
   clubs stays paired for as long as it can - a comparison that stacks is no
   longer a comparison - and only stops when the columns would be too narrow
   for a name. */
@media (max-width:860px){
  .detailcols,.modchart{grid-template-columns:1fr}
  .crestcell{display:none}
  .players{columns:1}
  .modchart{padding:14px 12px 4px}
  .keynote{margin:0 14px 14px}
  .verdict{padding:16px 14px 10px}
  details.more>summary{padding:13px 14px}
  .morebody .notes{padding:0 14px 16px}
  .nlist{max-width:none}
}

/* Phone layout. The card header stops trying to be a row: the fixture takes
   the full width, and the controls sit beneath it, left-aligned - which is
   where a thumb expects them and where every other app puts them - with the
   site mark closing the row on the right. */
@media (max-width:700px){
  /* Navigation becomes a burger. Five items in a row are wider than a phone,
     and an overflowing header does not just look wrong - it shifts the whole
     page sideways and cuts the left edge off everything below it. */
  .top .wrap{flex-wrap:wrap;padding:12px 14px}
  .menu{order:2}
  .menu>summary{display:flex;align-items:center;color:var(--muted);padding:2px}
  .menu>summary:hover,.menu[open]>summary{color:var(--ink)}
  .menu nav{flex-basis:100%;order:3;flex-direction:column;align-items:stretch;gap:0;
    width:100%;margin-top:12px;border-top:1px solid var(--rule)}
  .menu nav>a,.menu nav .dd>summary{padding:13px 2px;border-bottom:1px solid var(--rule)}
  .menu nav .dd{width:100%}
  .menu nav .ddmenu{position:static;border:none;padding:0 0 8px;
    display:grid;grid-template-columns:1fr 1fr;gap:0 10px;max-height:none}
  .menu nav .ddmenu a{padding:9px 2px;font-size:.92rem}
  .brand{font-size:1.06rem}

  /* The fixture gets the full width on its own row; the mark and the controls
     take the row beneath it. Before this the title was competing with the
     buttons for the same line and losing - "Coventry City" broke over four
     lines against a column of icons. */
  .modhead{flex-direction:column;align-items:stretch;gap:10px;padding:13px 14px 11px}
  .modtitle{min-width:0;width:100%}
  .modside{flex-direction:row-reverse;align-items:center;justify-content:space-between;width:100%}
  .modnav{justify-content:flex-start;min-width:0;gap:16px}
  .stamp{font-size:.6rem}
  details.more>summary{padding:11px 14px}
  .morebody .notes{padding:0 14px 16px}
  .modfoot{padding:9px 14px 10px}
  /* Hand the whole width to the bar: the club names are already in the card
     title and the verdict directly above. */
  .gauge{max-width:none}
  .gauge .gend{display:none}
}

@media (max-width:560px){
  body{font-size:15px}
  .wrap{padding:0 14px}
  .pagetitle{font-size:1.6rem}
  .intro,.intro.lede{font-size:.96rem}
  .howto{font-size:.86rem;padding-left:12px}
  .pagetitle{font-size:1.44rem}
  .modhead h2{font-size:1.02rem;line-height:1.3}
  .modhead p{font-size:.74rem;line-height:1.45}
  /* The verdict is still the answer, but it does not need to shout on a
     screen this size - and the gauge below it wants the room more. */
  .verdict{padding:13px 12px 11px}
  .vhead{font-size:1.28rem;letter-spacing:.02em}
  .vsub{font-size:.82rem}
  .vprob{font-size:.68rem;line-height:1.5}
  .modfoot{padding:8px 14px 9px;gap:5px}
  .ntoggle{font-size:.74rem}
  .keynote{font-size:.85rem}
  .updated{font-size:.66rem}
  .keynote{font-size:.88rem;padding:10px 12px}
  .notes .ntxt{font-size:.92rem}
  .notes .nb{font-size:.8rem}
  .ntoggle{font-size:.72rem}
  .updated{font-size:.7rem}
  /* The two elevens finally stack, and each becomes a plain single column of
     names - two columns of two columns was four columns of nothing.
     Reordered into whole blocks: the grid's interleaved source order pairs
     the two sides row by row, which in one column would put the away side's
     heading directly above the home side's eleven. */
  .lineups{grid-template-columns:1fr;gap:0;margin-top:18px;padding-top:16px}
  .lineups .s-home{order:1}
  .lineups .s-away{order:2}
  .xihead{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
  .xihead.s-home{margin-top:0;padding-top:0;border-top:none}
  .xihead h4{font-size:1.06rem}
  .xicap{font-size:.74rem}
  .players{font-size:.92rem}
  .pstart{font-size:.86rem}
  .subs,.doubts{font-size:.86rem}
  /* Controls big enough to hit with a thumb. */
  .modnav .expand,.modnav .chev,.modnav .share{width:36px;height:36px}
  .scorecards{gap:10px}
  .scorecard{min-width:0;flex:1 1 45%;padding:12px 14px}
  .scorecard .big{font-size:1.5rem}
}
/* --- results ----------------------------------------------------------- */
/* A finished match has one interesting property left, so it gets one line. */
.results{list-style:none;margin:.6em 0 0;padding:0}
.results li{display:grid;grid-template-columns:minmax(0,1fr) 74px minmax(0,1.1fr) 34px;
  align-items:center;gap:14px;padding:11px 14px;background:var(--panel);
  border:1px solid var(--rule);border-left:4px solid var(--rule);margin-bottom:5px}
.results li.hit{border-left-color:#5aa06f}
.results li.miss{border-left-color:#c0604a}
.results li.drew{border-left-color:var(--draw)}
.rfix{font-family:var(--display);font-weight:600;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rfix:hover{color:var(--accent)}
.rfix i{font-style:normal;color:var(--muted);padding:0 3px}
.rscore{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.rcall{color:var(--muted);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mark{display:flex;align-items:center;justify-content:center}
.mark.hit{color:#6dbd86}
.mark.miss{color:#dd7f66}
.mark.drew{color:var(--draw)}
.gwblock{margin-bottom:34px}
.race{display:block;width:100%;height:auto;background:var(--panel);border:1px solid var(--rule);
  padding:10px 0;margin:.6em 0 0}
.race .tick{font:12px var(--body);fill:var(--muted)}
.race .racelbl{font:600 13px var(--display)}
.racedot{display:inline-block;width:10px;height:10px;vertical-align:-1px;margin-right:7px}
.caveat{color:var(--muted);font-size:.9rem;border-left:2px solid var(--accent);
  padding-left:14px;margin:1em 0 0;max-width:80ch}
.plainlist{margin:.6em 0 0;padding-left:1.2em;max-width:82ch}
.plainlist li{margin:.45em 0;line-height:1.55}
.scorecard .of{font-size:.55em;color:var(--muted);font-weight:400}

/* Wide content scrolls inside its own box, never by taking the page with it.
   Applied to every table at write time - see writePage. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.scroller>table{min-width:100%}

.chart{display:block;width:100%;height:auto}
.chart .sub,.chart .tick{font:12px var(--body);fill:var(--muted)}
.septable,.record{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--rule);font-size:.95rem}
.septable th,.record th{text-align:left;font-family:var(--display);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:11px 14px;
  border-bottom:1px solid var(--rule);background:#171a20}
.septable td,.record td{padding:10px 14px;border-bottom:1px solid #23272f}
.septable tr:last-child td,.record tr:last-child td{border-bottom:none}
.record tr.hi{background:#1d232b}
.sepbar{width:130px;height:16px}
.num,th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center;width:150px}
.ok{color:#7fc490;font-weight:700}.no{color:#e08a72;font-weight:700}
.scorecards{display:flex;gap:16px;flex-wrap:wrap;margin:.8em 0 1.4em}
.scorecard{background:var(--panel);border:1px solid var(--rule);padding:16px 22px;
  display:flex;flex-direction:column;min-width:170px;border-top:3px solid var(--accent)}
.scorecard .big{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1.1}
.scorecard span:last-child{font-size:.85rem;color:var(--muted)}
.scorecard.alt{border-top-color:var(--rule)}
.scorecard.alt .big{color:var(--muted)}
.topsig{margin:.4em 0;padding-left:1.3em;font-size:.95rem}
.topsig li{margin:.35em 0;display:flex;justify-content:space-between;gap:12px}
.empty{background:var(--panel);border:1px dashed var(--rule);padding:22px;color:var(--muted)}
code{background:#20242b;padding:2px 6px;font-size:.9em;color:#cfd6df}
.foot{margin:36px auto 28px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--rule);
  padding-top:16px;max-width:1220px}
/* Ownership and the disclaimers sit a shade quieter than the data provenance
   above them: present and findable, not competing for attention. */
.foot .owner{font-size:.79rem;opacity:.75;margin-top:.7em}
ul{padding-left:1.3em}