/* ==========================================================================
   Native PHP markup on the approved design
   approved.css is the design preview's stylesheet, unchanged. This file maps
   the markup only the PHP site produces (admin, setup checks, the fixtures
   board, fantasy extras) onto the same tokens and components.
   ========================================================================== */

/* Older pages, inline styles and fantasy.css still use the main.css token
   names. Alias them to the approved palette so both themes follow. */
:root{--card:var(--surface);--border:var(--line);--accent:var(--green);--accent-2:var(--green);--danger:var(--red);--success:var(--green);--subtle:var(--muted);--radius-sm:10px;--shadow:0 12px 32px #0006}
[data-theme=light]{--shadow:0 12px 32px #17241c1f}

/* Type: Zodiak for headlines, Nippo for text, Boxing for scores, kick-off
   times and stat figures. Team names in fixtures keep DM Sans
   (--font-fixture): Nippo is wider and long names overflowed.
   approved.css and stats.css name Manrope / DM Sans directly, so each of
   their font rules is repeated here with the same selector to win on order.
   Boxing has a single weight, so number rules reset weight and turn off
   synthesized bold. */
:root{--font-display:'Zodiak',Georgia,serif;--font-body:'Nippo',system-ui,sans-serif;--font-num:'Boxing','Arial Narrow',sans-serif;--font-fixture:'DM Sans',sans-serif;font-family:var(--font-body)}
.stats-site,.score small,[data-page=fantasy] .transfer-rating small{font-family:var(--font-body)}
h1,h2,h3,.stats-site .brand,.stats-page h1,.stats-page h2,.stats-page h3{font-family:var(--font-display)}
.big,.score,.fixture-score,.metric strong,.health-ring strong,.stat-split strong,[data-page=fantasy] .transfer-rating,.stat-rating strong,.stat-metric strong,.ft-admin-counts>div>div:first-child,.ft-checks .summary strong{font-family:var(--font-num);font-weight:400;font-synthesis:none;font-variant-numeric:tabular-nums}
/* Team names in fixtures: Live board, home "On the pitch" rows, Stats club fixtures */
.fixture-row .team-name,.match .club,.fixture-opponent{font-family:var(--font-fixture)}
.fixture-opponent small{font-family:var(--font-body)}

/* ---------- shared ---------- */

/* Design choice is independent of the existing light/dark theme button. */
.ft-site>footer nav{align-items:center;flex-wrap:wrap}
.site-design-choice{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.site-design-choice select{min-height:40px;max-width:150px;padding:7px 26px 7px 10px;border:1px solid var(--line);border-radius:6px;background-color:var(--surface);color:var(--text);font:inherit;font-size:12px;cursor:pointer}

/* Keep active navigation readable when page styles change its background. */
.ft-site .site-header #navigation a[aria-current=page]{
  background:var(--green);
  color:var(--green-ink);
  border-bottom:2px solid var(--green);
  border-radius:8px;
  font-weight:700;
}

/* Subtle dotted shading follows the palette in both color themes. */
.ft-site table thead th{
  background-color:var(--raised);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--muted) 18%,transparent) .65px,transparent .85px);
  background-size:4px 4px;
}

.ft-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.ft-hero p:not(.ft-eyebrow){font-size:13px;color:var(--muted);margin-top:12px}
.ft-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ft-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--green);color:var(--green-ink);border:1px solid transparent;padding:11px 17px;border-radius:9px;font-size:12px;font-weight:700;white-space:nowrap}
.ft-button.secondary{background:var(--surface);border-color:var(--line);color:var(--text)}
.ft-button:hover{filter:brightness(1.1)}
.ft-inline{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.native-empty,.no-matches,.preview-empty{padding:34px 22px;text-align:center;color:var(--muted);font-size:13px;background:var(--surface);border:1px dashed var(--line);border-radius:12px}
.panel>.native-empty{border:0;border-radius:0;background:transparent}
.no-matches p{color:inherit}

/* ---------- admin ---------- */

.ft-admin>.note{font-size:13px!important;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;color:var(--text)}
.ft-admin>.note a{color:var(--green)}
.ft-admin .card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius);padding:24px;min-width:0}
.ft-admin .card h2,.ft-admin .card h3{margin-bottom:8px}
.ft-admin .card p{font-size:13px;color:var(--muted);margin-bottom:14px}
.ft-admin form{gap:12px}
.ft-admin form.card>label,.ft-admin .grid-2 label{margin-bottom:-4px}
.ft-admin .grid-2{gap:14px}
.ft-admin .grid-2>*{min-width:0}
.ft-admin input:not([type=checkbox]):not([type=file]),.ft-admin select,.ft-admin textarea{width:100%;margin-top:6px}
.ft-admin input[type=file]{font-size:12px;color:var(--muted)}
.ft-admin button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green)!important;color:var(--green-ink)!important;border:1px solid transparent!important;padding:11px 17px!important;border-radius:9px!important;font-size:12px;font-weight:700}
.ft-admin button:hover{filter:brightness(1.1)}
.ft-admin button.btn-ghost{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.ft-admin button.danger{background:transparent!important;color:var(--red)!important;border-color:var(--red)!important}
.ft-login{max-width:460px!important;margin:12px auto 0;display:grid;gap:12px}
.ft-login p{margin-bottom:4px!important}
.ft-login button{width:100%;margin-top:6px}
.ft-admin-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.ft-admin-layout>form.card{margin:0}
.ft-admin-tasks{min-width:0}
.ft-admin-tasks>h2{margin-bottom:-4px}
.ft-admin-tasks .card{margin-top:16px!important}
.ft-admin-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.ft-admin-counts>div{background:var(--raised)!important;border-radius:9px!important;padding:14px 10px!important}
.ft-admin-counts>div>div:first-child{color:var(--text)!important}
.ft-admin details{background:var(--bg)!important;border-color:var(--line)!important;font-size:12px}
.ft-admin summary{font-size:13px}
.ft-admin pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font-size:11px;color:var(--muted)}
#triggerFetchStatus{font-size:12px!important}

/* ---------- setup checks ---------- */

.ft-checks .summary,.ft-checks .status,.ft-checks .next-steps{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.ft-checks .summary{padding:20px 22px;margin-bottom:14px}
.ft-checks .summary br{display:none}
.ft-checks .summary strong{font-size:16px}
.ft-checks .summary.all-pass{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.ft-checks .summary.all-pass strong{color:var(--green)}
.ft-checks .summary.has-issues{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.ft-checks .summary.has-issues strong{color:var(--amber)}
.ft-checks .summary p{font-size:13px!important;color:var(--muted);margin:6px 0 0!important}
.ft-checks .status{display:flex;align-items:flex-start;gap:14px;padding:16px 22px;margin-bottom:8px}
.ft-checks .status .icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;font-size:13px;font-weight:700}
.ft-checks .status.pass .icon{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.ft-checks .status.fail{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.ft-checks .status.fail .icon{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.ft-checks .status strong{font-size:14px}
.ft-checks .details{font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.ft-checks .next-steps{padding:22px;margin-top:22px}
.ft-checks .next-steps h3{margin-bottom:12px}
.ft-checks .next-steps ol,.ft-checks .next-steps ul{margin:0;padding-left:20px;font-size:13px;color:var(--muted)}
.ft-checks .next-steps li{margin:6px 0}
.ft-checks .next-steps strong{color:var(--text)}
.ft-checks code{background:var(--raised);padding:2px 6px;border-radius:5px;font-size:12px;overflow-wrap:anywhere}

/* ---------- fixtures (live.php; its inline styles handle row internals) ---------- */

.live-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 24px;flex-wrap:wrap;margin-bottom:24px}
.live-header>div:first-child p.muted{font-size:13px;margin-top:12px}
.live-controls{gap:10px;margin:0}
.live-controls .btn-primary,.live-controls .btn-ghost{min-height:40px;padding:10px 16px;border-radius:9px;font-size:12px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--text)}
#filter-live[aria-pressed=true]{background:var(--green);color:var(--green-ink);border-color:transparent}
.day-controls{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.live-controls .day-controls .btn-ghost{border:0;background:none;min-height:34px;padding:6px 12px;color:var(--muted)}
.live-controls .day-controls .btn-ghost:hover{color:var(--text)}
#day-label{font-size:12px;font-weight:700;min-width:64px;text-align:center}
/* With no fixtures for the day the board is empty; the empty state says so */
.live-section.two-column:not(:has(.fixture-row)){display:none}
.fixtures-list{gap:18px}
.fixtures-league{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0}
.fixtures-league-header{padding:14px 20px;border-bottom:1px solid var(--line);font-size:13px}
.fixtures-league-header .league-logo{width:28px;height:28px;object-fit:contain}
.fixtures-league-header .league-info .league-country-header{font-size:10px;letter-spacing:1px;text-transform:uppercase}
.fixtures-league .fixture-row{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:20px}
.fixtures-league .fixture-row:last-child{border-bottom:0}
.fixtures-league .fixture-row:hover{background:var(--raised)}
.fixtures-league .fixture-row.selected{background:var(--raised);box-shadow:inset 3px 0 var(--green)}
.preview-column{position:sticky;top:20px}
.preview-panel{background:var(--surface);border-color:var(--line);border-radius:var(--radius);padding:22px}
.preview-panel>.preview-empty{border:0;background:transparent;padding:60px 10px}
.preview-tabs-nav .tab-btn{font-size:12px;border-color:var(--line)}
.preview-tabs-nav .tab-btn.active{background:var(--green);color:var(--green-ink)}
.preview-tabs-body{font-size:13px}
.preview-actions a{background:var(--green)!important;color:var(--green-ink)!important;border-radius:9px!important;font-size:12px!important;font-weight:700!important}
/* League tabs (built by live.php's script from the league groups) */
.league-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 12px;margin-bottom:6px;position:sticky;top:0;z-index:2;background:var(--bg)}
.league-tab{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.league-tab img{width:18px;height:18px;object-fit:contain}
.league-tab-count{font-size:10px;padding:2px 6px;border-radius:5px;background:var(--raised);color:var(--muted)}
.league-tab:hover:not(:disabled){color:var(--text)}
.league-tab.active{background:var(--green);border-color:transparent;color:var(--green-ink)}
.league-tab.active .league-tab-count{background:color-mix(in srgb,var(--green-ink) 15%,transparent);color:var(--green-ink)}
.league-tab:disabled{opacity:.4;cursor:default}
.stats-table{width:100%;border-collapse:collapse;font-size:12px}
.stats-table th,.stats-table td{border-bottom:1px solid var(--line)}
.no-live-message p{font-size:13px;color:var(--muted);margin-bottom:16px}
.match-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.match-card .match-date{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.match-card .match-teams{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:8px 0 6px;font-weight:700;font-size:14px}
.match-card .vs,.match-card .competition{color:var(--muted);font-weight:400;font-size:12px}

.recap-photo-credit{font-size:10px;line-height:1.6;color:var(--muted);margin:8px 0 16px;overflow-wrap:anywhere}
.recap-photo-credit a{text-decoration:underline;text-underline-offset:2px}

/* ---------- fantasy extras ---------- */

/* The --card alias gives fantasy.css cards a surface; on the pitch and bench
   the design draws the shirt straight onto the grass. */
.fpl-pitch .fpl-card,.bench-players .fpl-card{background:transparent;border-color:transparent;box-shadow:none}
/* Name labels are always a dark chip, so their text stays light in both
   themes (fantasy.css colours cards with var(--text), which is dark in light mode) */
[data-page=fantasy] .fpl-pitch .player .name,[data-page=fantasy] .bench-players .player .name{color:#eef3ec}
/* The bench sits on the panel, not the grass: use the panel's muted text */
[data-page=fantasy] .bench-players .player small{color:var(--muted)}
/* "1 / " reads as the bench order: only meaningful on the bench */
.fpl-pitch .bench-position{display:none}
.bench-players .bench-position{font-size:12px;font-weight:700;color:var(--green)}
.ft-planning-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:14px 18px 0;font-size:13px;color:var(--muted)}
.ft-planning-note+.fpl-link,.ft-planning-note .fpl-link{font-size:13px;font-weight:700;color:var(--green);background:none;border:0;padding:0;text-decoration:none}
.fpl-link{margin:6px 18px 0;font-size:13px;font-weight:700;color:var(--green);background:none;border:0;padding:0;text-decoration:none}
.fpl-link:hover{text-decoration:underline}
.ft-captain-watch .captain-watch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:14px}
.ft-captain-watch .captain-watch svg{width:18px;height:18px;color:var(--green)}
.ft-fixture-chips{display:flex;gap:8px;flex-wrap:wrap}
.ft-fixture-chips>span{background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;font-weight:700}
.ft-draft-disclaimer{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.fpl-draft-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fpl-recs-track>.panel-body{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.fpl-import{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:24px}
.fpl-import h2{font-size:16px;margin-bottom:6px}
.fpl-import p{font-size:12px}
.fpl-import code{background:var(--raised);padding:2px 6px;border-radius:5px;font-size:11px}
.fpl-import-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:14px}
.fpl-import-form label{font-size:12px}
.fpl-import-form label>span{color:var(--text);font-weight:700}
.fpl-import-form input{border-color:var(--green)}
.fpl-import-form input{margin-top:6px;width:160px}
.fpl-import-form .fpl-btn{min-height:42px;padding:10px 20px;border-radius:9px;background:var(--green);color:var(--green-ink);font-size:12px}
.fpl-import .fpl-hint{margin-top:12px;font-size:11px;color:var(--muted)}

/* Fantasy suggestion: the budget line under the swap reads as a positive */
.fpl-recs .transfer-arrow{color:var(--green);font-weight:700}
/* News category tabs */
#news .tabs .tab{font-weight:700}

/* ---------- slide arrows (home briefing, fantasy suggestions) ---------- */

.ft-slide-nav{display:flex;align-items:center;gap:10px}
#recaps [hidden]{display:none!important}
.recap-archive-controls{margin-bottom:25px;gap:12px}
.recap-archive-controls label,.recap-match-count{font-size:12px;color:var(--muted)}
.recap-archive-controls select{max-width:100%}
#recap-briefings{margin-bottom:28px}
#recap-briefings .feature{margin-bottom:0}
.recap-briefing-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4px;font-size:12px}
.recap-briefing-footer .ft-arrow:disabled{opacity:.35;cursor:default}
#match-reports{scroll-margin-top:24px}
@media(max-width:500px){.recap-archive-controls{align-items:flex-start}.recap-archive-controls label{width:100%}.recap-archive-controls select{width:100%;min-width:0}.recap-briefing-footer{padding-inline:0}}
.ft-arrow{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--green);color:var(--green-ink)}
.ft-arrow svg{width:16px;height:16px}
.ft-arrow:hover:not(:disabled){filter:brightness(1.1)}
.ft-arrow:disabled{opacity:.35;cursor:default}
.fpl-recs .panel-head .inline{gap:8px}

/* ---------- home feedback ---------- */

[data-page=home] .home-overview{display:flex;flex-direction:column;gap:16px;min-width:0}
[data-page=home] .home-overview .panel-body{font-size:15px;line-height:1.6}
[data-page=home] .home-overview .stat-split small{font-size:14px;line-height:1.5}
[data-page=home] .home-glance .panel-head{padding:16px 18px 12px}
[data-page=home] .home-glance .panel-body{display:flex;flex-direction:column;align-items:flex-start;padding:4px 18px 16px}
[data-page=home] .home-glance .stat-split{width:100%;margin:0 0 12px}
[data-page=home] .home-glance .panel-body>p{margin-bottom:12px}
[data-page=home] .home-glance .button{margin-top:auto}
[data-page=home] .home-fantasy-card{position:relative;padding:18px;isolation:isolate}
[data-page=home] .home-fantasy-art{position:absolute;z-index:-1;right:-25px;top:20px;width:130px;height:150px;transform:rotate(12deg);color:var(--green);opacity:.18;pointer-events:none}
[data-page=home] .home-fantasy-card .eyebrow{margin-bottom:8px;color:var(--green)}
[data-page=home] .home-fantasy-card h2{font-size:24px;line-height:1.25;margin-bottom:8px}
[data-page=home] .home-fantasy-copy{max-width:230px;font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:12px}
[data-page=home] .home-overview .button{font-size:15px;line-height:1.4;min-height:44px;padding:10px 14px;max-width:100%;box-sizing:border-box}
@media(min-width:801px){
  [data-page=home] .home-feature-layout{align-items:stretch}
  [data-page=home] .home-feature-layout>.feature{display:flex;flex-direction:column;align-items:flex-start}
  [data-page=home] .home-feature-layout>.feature>.section-title{width:100%;margin-top:auto;margin-bottom:0;padding-top:24px}
  [data-page=home] .home-glance{display:flex;flex-direction:column;flex:1}
  [data-page=home] .home-glance .panel-body{flex:1}
}

/* At a glance: values sit close under the heading */
[data-page=home] .layout .panel .panel-body{padding-top:4px}
[data-page=home] .layout .stat-split{margin-top:0}
/* The gameweek label under the briefing reads as a heading, not a caption */
[data-page=home] .feature .section-title .eyebrow{font-size:13px;letter-spacing:1.5px;color:var(--green)}
/* Open-fixture link: a solid green button rather than a faint arrow */
[data-page=home] .match .text-link{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--green-ink);font-size:16px;font-weight:700}
[data-page=home] .match .text-link:hover{filter:brightness(1.1)}
[data-page=home] .match{grid-template-columns:1fr 90px 1fr 32px}
@media(max-width:520px){[data-page=home] .match{grid-template-columns:1fr 54px 1fr 28px}[data-page=home] .match .text-link{width:28px;height:28px;font-size:14px}}

/* Card dates read as body text, not a faint label */
.article-meta>span{color:var(--text);font-size:12px}

/* Home: flat reading surfaces; shading reserved for headings and key facts. */
.ft-site[data-page=home]{
  --surface:#141c17;--muted:#b8c5b9;--line:#34483a;
  --home-header-start:#213b2a;--home-header-end:#18261e;
  --home-key-surface:#1c3022;--home-key-border:#415b46;
  --home-button-top:#c4f38a;--home-button-bottom:#b5e773;
}
[data-theme=light] .ft-site[data-page=home]{
  --surface:#ffffff;--muted:#526354;--line:#c6d4c0;
  --home-header-start:#e7efdf;--home-header-end:#f5f8f1;
  --home-key-surface:#edf3e7;--home-key-border:#c1d3b7;
  --home-button-top:#3b7028;--home-button-bottom:#315e21;
}
[data-page=home] .home-feature-layout>.feature{--home-lead-inset:35px;background:var(--surface);box-shadow:none}
[data-page=home] .home-briefing-header{
  align-self:stretch;margin:calc(-1 * var(--home-lead-inset)) calc(-1 * var(--home-lead-inset)) 20px;
  padding:var(--home-lead-inset) var(--home-lead-inset) 0;border-radius:15px 15px 0 0;
  background:linear-gradient(180deg,var(--home-header-start),var(--home-header-end));
}
[data-page=home] .home-glance .panel-head{background:linear-gradient(180deg,var(--home-header-start),var(--home-header-end));box-shadow:inset 0 -1px 0 var(--line)}
[data-page=home] .home-fantasy-header{margin:-18px -18px 0;padding:18px 18px 0;background:linear-gradient(180deg,var(--home-header-start),var(--home-header-end))}
[data-page=home] .home-fantasy-art{opacity:.1}
[data-page=home] .home-overview .panel,[data-page=home] .container>.panel,[data-page=home] .article-card{background:var(--surface);box-shadow:none}
[data-page=home] .home-glance .stat-split>div{text-align:center}
[data-page=home] .home-glance .stat-split strong{color:var(--text)}
[data-page=home] .home-glance .stat-split small,[data-page=home] .home-fantasy-copy,[data-page=home] .feature>p,[data-page=home] .article-card p{color:var(--muted)}
[data-page=home] .match{background:transparent}
[data-page=home] .match .score{background:var(--home-key-surface);color:var(--text);border-radius:7px;box-shadow:inset 0 0 0 1px var(--home-key-border)}
[data-page=home] .match .score small{color:var(--muted)}
[data-page=home] .article-art{background:linear-gradient(180deg,var(--home-header-start),var(--home-header-end));box-shadow:inset 0 -1px 0 var(--line)}
[data-page=home] .article-art:before{background:none}
[data-page=home] .article-art .score{color:var(--text)}
[data-page=home] .button,[data-page=home] .ft-arrow,[data-page=home] .match .text-link{background:linear-gradient(180deg,var(--home-button-top),var(--home-button-bottom));color:var(--green-ink)}
[data-page=home] .article-card:hover{border-color:var(--home-key-border)}
[data-page=home] a:focus-visible,[data-page=home] button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:520px){[data-page=home] .home-feature-layout>.feature{--home-lead-inset:25px}}

/* ---------- fantasy feedback 2026-10-09: tighter pitch, bigger shirts ---------- */

[data-page=fantasy] [aria-label="Lineup mode"]{padding:3px;gap:2px}
[data-page=fantasy] [aria-label="Lineup mode"] button{font-size:12px;min-height:32px;padding:6px 12px}
[data-page=fantasy] .fpl-rail .panel-head h2{font-size:16px}
[data-page=fantasy] .fpl-pitch{min-height:0;padding:18px 12px;gap:14px}
[data-page=fantasy] .fpl-pitch .shirt{width:60px;height:60px}
/* Fixture and price on one line where there is room; stacked on phones */
.meta-sep{display:block;height:0;overflow:hidden}
@media(min-width:761px){
  .meta-sep{display:inline;height:auto}
  /* The quick-actions button sits in the slot's free top-left corner
     instead of taking a row of its own under every player */
  [data-page=fantasy] .fpl-pitch .player-actions{position:absolute;top:2px;left:2px;width:auto;z-index:3}
  [data-page=fantasy] .fpl-pitch .player-actions summary{width:30px;height:26px}
  [data-page=fantasy] .fpl-pitch .player-actions summary svg{width:16px;height:16px}
  [data-page=fantasy] .fpl-pitch .quick-options{top:32px;left:0;right:auto;transform:none}
}

/* ---------- responsive ---------- */

/* fantasy.css sizes cards as a share of the row (33% / 50%), but each card
   now sits inside its own .player-slot, so it must fill the slot instead. */
@media(max-width:760px){
  .player-slot>.fpl-card{width:100%;flex:none}
}
@media(max-width:900px){
  .ft-admin-layout,.live-section.two-column{grid-template-columns:minmax(0,1fr)}
  .preview-column{position:static}
}
@media(max-width:520px){
  /* Seven links don't fit; wrap rather than scroll so none hide off-screen */
  #navigation{flex-wrap:wrap;overflow:visible;gap:4px}
  #navigation a{font-size:15px;padding:9px 12px}
  .ft-hero{flex-direction:column;align-items:flex-start;gap:16px}
  .ft-admin .card{padding:18px}
  .ft-admin .grid-2{grid-template-columns:minmax(0,1fr)}
  .ft-checks .status{padding:14px 16px}
  .fixtures-league .fixture-row{padding:12px 14px}
  .fpl-import-form input{width:100%}
  [data-page=fantasy] .fpl-pitch .shirt{width:46px;height:46px}
  /* Four or five across leaves ~65px a card: shrink the name rather than
     splitting it mid-word */
  [data-page=fantasy] .fpl-pitch-row:is([data-count="4"],[data-count="5"]) .player .name{font-size:11.5px;padding-inline:2px;overflow-wrap:break-word;letter-spacing:-.2px}
  .fpl-import-form label,.fpl-import-form .fpl-btn{flex:1 1 100%}
}