/* ═══════════════════════════════════════════════════════════
   FANTASY EFL — the stylesheet.

   Recognisably Gameweek Edge: the same token names, the same measured
   contrast ramp, the same terminal density (hairline borders, 4px radii,
   monospace for anything numeric), the same 1-5 fixture-difficulty ramp
   the FPL app uses so a manager reads one scale across the whole site.

   Visibly not the FPL app: Gameweek Edge is pitch green, Euro Matchday
   Edge is floodlit navy, and this is EFL indigo with a division stripe.
   Three divisions is the fact that makes this game different from the other
   two, so the divisions get the colour: Championship indigo, League One
   teal, League Two amber, used consistently on every chip, filter and
   table group.

   Nothing here uses EFL, Championship or club marks, logos or fonts. Club
   and competition names appear as words, used descriptively, exactly as
   they do everywhere else on this site.
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────
   Light is the default; [data-theme="dark"] overrides. Values are copied
   from the app shell rather than re-picked, so a card here and a card there
   are the same colour. */
:root{
  --bg:#f4f6f8;
  --surface:#ffffff;
  --surface-2:#ffffff;
  --surface-3:#eef1f4;

  --border:rgba(12,16,20,.08);
  --border-2:rgba(12,16,20,.13);
  --border-3:rgba(12,16,20,.22);

  --text:#10171e;
  --text-2:#586673;
  --text-3:#626f7d;
  --text-4:#78899a;

  /* EFL indigo — the section accent. Measured against --surface-3, the
     darkest light surface, the same bar the app shell holds itself to. */
  --efl:#3f4fb8;          /* 5.79:1 — carries text */
  --efl-bright:#5566d8;   /* decoration only: focus rings, borders */
  --efl-soft:rgba(63,79,184,.10);
  --efl-ink:#ffffff;

  /* Division accents. Each carries small bold text on --surface, so each
     clears 4.5:1 there. */
  --div-championship:#3f4fb8;
  --div-league-one:#0f7268;
  --div-league-two:#8a5410;

  --green:#147e48;
  --amber:#b9741a;
  --red:#c93834;
  --red-soft:rgba(204,61,57,.10);
  --amber-soft:rgba(185,116,26,.11);
  --green-soft:rgba(31,157,92,.11);
  --blue:#2e6ac2;

  --r-sm:3px;--r-md:4px;--r-lg:4px;

  --font-display:'IBM Plex Mono',ui-monospace,monospace;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --fs-min:10px;--fs-xs:11px;--fs-sm:12.5px;--fs-base:14px;
  --fs-md:16px;--fs-lg:20px;--fs-xl:26px;--fs-2xl:32px;

  --shadow:0 1px 3px rgba(12,16,20,.07),0 6px 16px rgba(12,16,20,.05);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{
  --bg:#0A0C0F;
  --surface:#111418;
  --surface-2:#161A20;
  --surface-3:#1C2128;

  --border:#1F242B;
  --border-2:#262C34;
  --border-3:#333A44;

  --text:#E6E8EB;
  --text-2:#9AA3AD;
  --text-3:#8A94A0;
  --text-4:#656f7e;

  --efl:#7c8cf0;
  --efl-bright:#8f9dff;
  --efl-soft:rgba(124,140,240,.14);
  --efl-ink:#0A0C0F;

  --div-championship:#8f9dff;
  --div-league-one:#3ecfbb;
  --div-league-two:#F5A524;

  --green:#00D26A;
  --amber:#F5A524;
  --red:#FF4D4F;
  --red-soft:rgba(255,77,79,.12);
  --amber-soft:rgba(245,165,36,.13);
  --green-soft:rgba(0,210,106,.12);
  --blue:#4186f6;

  --shadow:none;
}

/* ── RESET & BASE ────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;font-size:16px}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  font-size:var(--fs-base);line-height:1.5;min-height:100vh;
}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em}
:focus-visible{outline:2.5px solid var(--efl-bright);outline-offset:2px;border-radius:var(--r-md)}
::selection{background:var(--efl-soft);color:var(--efl)}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px;width:100%}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:10px;z-index:99;padding:10px 18px;
  background:var(--efl);color:var(--efl-ink);border-radius:var(--r-md);font-weight:700;
}
.skip-link:focus{left:14px}

/* ── HEADER ──────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--border-2);
}
.hdr-in{display:flex;align-items:center;gap:14px;padding:11px 0}
.logo-mark{width:32px;height:32px;flex:none}
.brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name{font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:-.02em}
.brand-name .light{font-weight:500;color:var(--text-2)}
.brand-name .bold{font-weight:700;color:var(--text)}
.brand-tag{
  font-size:var(--fs-min);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--efl);margin-top:3px;
}
.hdr-sp{flex:1}

/* Competition switcher — the same control as the app sidebar, so the three
   games read as three views of one site rather than three products. */
.sw{display:flex;gap:3px;padding:3px;background:var(--surface-3);
  border:1px solid var(--border-2);border-radius:var(--r-md)}
.sw-btn{
  padding:6px 12px;border-radius:var(--r-sm);font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.05em;color:var(--text-3);
  transition:background .15s var(--ease),color .15s var(--ease);
}
a.sw-btn:hover{color:var(--text);background:var(--border)}
.sw-btn.active{background:var(--efl);color:var(--efl-ink)}

.theme-btn{
  padding:6px 10px;border:1px solid var(--border-2);border-radius:var(--r-md);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-2);
}
.theme-btn:hover{color:var(--text);border-color:var(--border-3)}

/* Section tabs */
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--border)}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:10px 14px;font-size:var(--fs-sm);font-weight:600;color:var(--text-3);
  white-space:nowrap;border-bottom:2px solid transparent;
}
.tab:hover{color:var(--text)}
.tab[aria-current="page"]{color:var(--efl);border-bottom-color:var(--efl)}

/* ── LAYOUT ──────────────────────────────────────────── */
main{padding:20px 0 60px;display:block}
section{margin-bottom:26px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px}
h2.sec-title{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;color:var(--text-2);
}
.sec-note{font-size:var(--fs-sm);color:var(--text-3);max-width:70ch}
.card{
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r-lg);padding:14px;
}
.grid{display:grid;gap:12px}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ── HERO ────────────────────────────────────────────── */
/* The one full-brand moment on the page. The stripe is the three divisions,
   which is also the fastest way to say what this section is. */
.hero{
  border:1px solid var(--border-2);border-radius:var(--r-lg);
  background:
    linear-gradient(135deg,var(--efl-soft) 0%,transparent 62%),
    var(--surface);
  padding:26px 22px 22px;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,
    var(--div-championship) 0 33.3%,
    var(--div-league-one) 33.3% 66.6%,
    var(--div-league-two) 66.6% 100%);
}
.hero-eyebrow{
  font-family:var(--font-display);font-size:var(--fs-min);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--efl);margin-bottom:10px;
}
.hero h1{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;margin-bottom:8px;max-width:20ch}
.hero p.lede{font-size:var(--fs-md);color:var(--text-2);max-width:56ch;margin-bottom:18px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 16px;
  border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:650;
  border:1px solid transparent;transition:background .15s var(--ease),border-color .15s var(--ease);
}
.btn-primary{background:var(--efl);color:var(--efl-ink)}
.btn-primary:hover{background:var(--efl-bright)}
.btn-ghost{border-color:var(--border-3);color:var(--text)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-sm{padding:6px 11px;font-size:var(--fs-xs)}

/* ── BADGES & CHIPS ──────────────────────────────────── */
.badge{
  display:inline-block;padding:2px 7px;border-radius:var(--r-sm);
  font-size:var(--fs-min);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--border-2);color:var(--text-2);white-space:nowrap;
}
.badge-div{border-color:transparent;color:#fff}
.div-championship{background:var(--div-championship);color:#fff}
.div-league-one{background:var(--div-league-one);color:#fff}
.div-league-two{background:var(--div-league-two);color:#fff}
[data-theme="dark"] .div-championship,
[data-theme="dark"] .div-league-one,
[data-theme="dark"] .div-league-two{color:#0A0C0F}

.badge-avail{border:1px solid currentColor;background:transparent}
.av-available{color:var(--green)}
.av-doubtful{color:var(--amber)}
.av-injured,.av-suspended,.av-unavailable{color:var(--red)}

.badge-ha{background:var(--surface-3);color:var(--text-2);border-color:var(--border-2)}

/* Fixture difficulty. The exact ramp the FPL app uses, so the colours mean
   the same thing on both. Every cell also carries its number AND a text
   label in its accessible name — colour is never the only channel. */
.fdr{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:30px;padding:3px 6px;border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;color:#0c1014;
}
.fdr-1{background:#2ecf73}
.fdr-2{background:#8fd9a6}
.fdr-3{background:#d9dee3;color:#3a4650}
.fdr-4{background:#f0a3a0}
.fdr-5{background:#e05a55;color:#fff}
.fdr-blank{background:var(--surface-3);color:var(--text-4);border:1px dashed var(--border-3)}
.fdr-legend{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:var(--fs-xs);color:var(--text-3)}
.fdr-legend .fdr{min-width:auto}
.fdr-legend span.lg-item{display:inline-flex;align-items:center;gap:5px}

/* Form: five results, each a letter as well as a colour. */
.form-strip{display:inline-flex;gap:3px}
.form-pip{
  width:18px;height:18px;border-radius:var(--r-sm);display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--font-mono);
  font-size:var(--fs-min);font-weight:700;
}
.pip-W{background:var(--green);color:#fff}
.pip-D{background:var(--surface-3);color:var(--text-2);border:1px solid var(--border-2)}
.pip-L{background:var(--red);color:#fff}
[data-theme="dark"] .pip-W,[data-theme="dark"] .pip-L{color:#0A0C0F}

/* Sparkline-free form meter for players: points per appearance, as a bar
   with its number beside it. */
.meter{display:flex;align-items:center;gap:7px;min-width:92px}
.meter-track{flex:1;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.meter-fill{height:100%;background:var(--efl);border-radius:3px}
.meter-val{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-2)}

/* ── PICK CARDS ──────────────────────────────────────── */
.pick{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);
  padding:13px;display:flex;flex-direction:column;gap:9px;height:100%;
}
.pick-role{
  font-family:var(--font-display);font-size:var(--fs-min);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.pick-name{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em}
.pick-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-xs);color:var(--text-2)}
.pick-fix{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2);flex-wrap:wrap}
.pick-why{font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.pick-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:9px;border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-3);
}
.pick-score{font-family:var(--font-mono);font-weight:700;color:var(--efl);font-size:var(--fs-sm)}

/* ── TABLES ──────────────────────────────────────────── */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-2);
  border-radius:var(--r-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
caption{text-align:left;padding:11px 12px 0;font-size:var(--fs-sm);color:var(--text-3)}
th{
  text-align:left;padding:9px 10px;font-family:var(--font-display);
  font-size:var(--fs-min);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--border-2);white-space:nowrap;
  background:var(--surface);position:sticky;top:0;z-index:1;
}
th.num{text-align:right}
td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-3)}
th.sortable{padding:0}
th.sortable button{
  width:100%;padding:9px 10px;text-align:inherit;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:inherit;display:flex;align-items:center;gap:4px;
}
th.num.sortable button{justify-content:flex-end}
th.sortable button:hover{color:var(--text)}
th[aria-sort] button{color:var(--efl)}
.t-name{font-weight:600}
.t-sub{display:block;font-size:var(--fs-min);color:var(--text-3);margin-top:1px}

/* ── POINTS ATTRIBUTION ──────────────────────────────────
   What a stat was worth, beside the stat. Carried as text with a sign, so
   the colour is the third channel and never the only one. */
.attr-pos{color:var(--green);font-weight:700;font-size:var(--fs-min)}
.attr-neg{color:var(--red);font-weight:700;font-size:var(--fs-min)}

/* Suspension risk. A word first, then a colour — and only the levels that
   would change a decision get a badge at all. */
.badge-susp{border:1px solid currentColor;background:transparent;margin-left:4px}
.susp-onEdge{color:var(--red)}
.susp-watch{color:var(--amber)}
.susp-suspended{color:var(--red)}

/* Health check. The dot is decoration; the word beside it carries the
   meaning, as everywhere else in this app. */
.health-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:6px;vertical-align:middle;
}
.health-ok{background:var(--green)}
.health-bad{background:var(--red)}
/* The dot and its word are one thing and must not be split across two
   lines by a narrow column on a phone. */
.health-status{white-space:nowrap}
#health-result{margin-top:12px}

details.coverage{margin-top:9px}
details.coverage summary{cursor:pointer;font-weight:600;color:var(--text-2)}
details.coverage summary:hover{color:var(--text)}
details.coverage ul{margin:9px 0 0 18px}
details.coverage li{margin-bottom:5px}

/* ── SQUAD BUILDER ───────────────────────────────────── */
.squad{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.squad-row{display:contents}
.sq-card{
  background:var(--surface);border:1px solid var(--border-2);border-left-width:3px;
  border-radius:var(--r-lg);padding:11px;display:flex;flex-direction:column;gap:5px;
}
.sq-GK{border-left-color:var(--amber)}
.sq-DEF{border-left-color:var(--blue)}
.sq-MID{border-left-color:var(--green)}
.sq-FWD{border-left-color:var(--red)}
.sq-card.is-captain{box-shadow:inset 0 0 0 1px var(--efl)}
.sq-pos{
  font-family:var(--font-display);font-size:var(--fs-min);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  display:flex;justify-content:space-between;gap:6px;align-items:center;
}
.sq-armband{
  background:var(--efl);color:var(--efl-ink);border-radius:var(--r-sm);
  padding:1px 5px;font-size:var(--fs-min);font-weight:700;letter-spacing:.06em;
}
.sq-name{font-weight:650;font-size:var(--fs-sm);line-height:1.25}
.sq-meta{font-size:var(--fs-min);color:var(--text-3)}
.sq-foot{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:auto;padding-top:7px;border-top:1px solid var(--border);
}
.sq-score{font-family:var(--font-mono);font-weight:700;color:var(--efl);font-size:var(--fs-sm)}
.squad-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:11px 13px;border:1px solid var(--border-2);border-radius:var(--r-lg);
  background:var(--surface-3);margin-bottom:12px;
}
.squad-bar .sb-stat{font-size:var(--fs-sm);color:var(--text-2)}
.squad-bar .sb-stat b{color:var(--text);font-family:var(--font-mono)}
.squad-toggle{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2)}
.squad-toggle input{width:16px;height:16px;accent-color:var(--efl)}

/* ── FILTERS ─────────────────────────────────────────── */
.filters{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  padding:13px;border:1px solid var(--border-2);border-radius:var(--r-lg);
  background:var(--surface);margin-bottom:14px;
}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{
  font-family:var(--font-display);font-size:var(--fs-min);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}
.field input,.field select{
  width:100%;padding:8px 9px;font-family:inherit;font-size:var(--fs-sm);
  color:var(--text);background:var(--bg);border:1px solid var(--border-2);
  border-radius:var(--r-md);
}
.field input:hover,.field select:hover{border-color:var(--border-3)}
.filter-actions{display:flex;align-items:flex-end;gap:8px}
.result-count{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:10px}

/* ── PAGINATION ──────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0}
.pager button{
  padding:7px 13px;border:1px solid var(--border-2);border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
}
.pager button:hover:not(:disabled){color:var(--text);border-color:var(--border-3)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager-status{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-3)}

/* ── STATES ──────────────────────────────────────────── */
.note{
  padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--border-2);
  background:var(--surface);font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;
}
.note b{color:var(--text)}
.note-sample{border-color:var(--amber);background:var(--amber-soft)}
.note-err{border-color:var(--red);background:var(--red-soft)}
.note-method{background:var(--surface-3)}
.empty{
  padding:34px 18px;text-align:center;color:var(--text-3);font-size:var(--fs-sm);
  border:1px dashed var(--border-3);border-radius:var(--r-lg);
}
.empty b{display:block;color:var(--text);font-size:var(--fs-md);margin-bottom:5px}

.skel{
  border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--border) 50%,var(--surface-3) 75%);
  background-size:200% 100%;animation:skel 1.4s linear infinite;
}
.skel-line{height:12px;margin-bottom:8px}
.skel-card{height:150px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){
  .skel{animation:none}
  *{transition:none!important}
}

/* ── EDITORIAL ───────────────────────────────────────── */
.prose{max-width:72ch}
.prose h2{font-size:var(--fs-lg);margin:26px 0 8px}
.prose h3{font-size:var(--fs-md);margin:20px 0 6px}
.prose p{margin-bottom:11px;color:var(--text-2)}
.prose ul,.prose ol{margin:0 0 13px 20px;color:var(--text-2)}
.prose li{margin-bottom:5px}
.prose strong{color:var(--text)}
.prose a{color:var(--efl);text-decoration:underline;text-underline-offset:2px}

.linkcard{
  display:flex;flex-direction:column;gap:5px;padding:14px;border-radius:var(--r-lg);
  border:1px solid var(--border-2);background:var(--surface);height:100%;
  transition:border-color .15s var(--ease);
}
.linkcard:hover{border-color:var(--efl)}
.linkcard b{font-size:var(--fs-md);font-weight:700}
.linkcard span{font-size:var(--fs-sm);color:var(--text-3)}
.linkcard .go{font-size:var(--fs-xs);color:var(--efl);font-weight:700;margin-top:auto;padding-top:7px}

/* ── FOOTER ──────────────────────────────────────────── */
.foot{border-top:1px solid var(--border-2);padding:22px 0 40px;margin-top:34px;
  font-size:var(--fs-sm);color:var(--text-3)}
.foot p{max-width:78ch;margin-bottom:9px}
.foot a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.foot-links{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.foot-links a{color:var(--efl);font-weight:600;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.cross{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px;
  border:1px solid var(--border-2);border-radius:var(--r-lg);background:var(--surface);margin-bottom:18px;
}
.cross-t{flex:1;min-width:230px;font-size:var(--fs-sm);color:var(--text-2)}
.cross-t b{display:block;font-size:var(--fs-md);color:var(--text);margin-bottom:2px}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:820px){
  .hero{padding:22px 18px 18px}
  .hero h1{font-size:var(--fs-lg)}
  .hero p.lede{font-size:var(--fs-base)}
}
@media(max-width:640px){
  .wrap{padding:0 14px}
  .hdr-in{gap:9px;padding:9px 0}
  .brand-tag{display:none}
  .hero-actions .btn{flex:1;justify-content:center}
  /* Dense tables become stacked cards below 640px: a 12-column fixture grid
     cannot be made to work on a phone by shrinking it, and horizontal
     scrolling every row is worse than reading them one at a time. */
  .stack-sm thead{display:none}
  .stack-sm,.stack-sm tbody,.stack-sm tr,.stack-sm td{display:block;width:100%}
  .stack-sm tr{
    border-bottom:1px solid var(--border-2);padding:11px 12px;
  }
  .stack-sm tr:last-child{border-bottom:0}
  .stack-sm td{
    border:0;padding:3px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .stack-sm td::before{
    content:attr(data-label);font-family:var(--font-display);font-size:var(--fs-min);
    font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
    flex:none;
  }
  .stack-sm td.num{text-align:right}
  .stack-sm td[data-label=""]::before{display:none}
  .tscroll{border-radius:var(--r-lg)}
}
@media print{
  .hdr,.foot,.filters,.pager,.hero-actions{display:none}
}