/* FFMatrix Stats pages. Loaded after site.css, which supplies the tokens, header, footer and shared parts.
   Same rules as the rest of the site: flat colour, hairline rules, small radii, no shadows. */

:root{
  /* Comparison series (validated for colour-blind separation on --card in both themes) */
  --s1:light-dark(#2a78d6,#3987e5);
  --s2:light-dark(#eb6834,#d95926);
  --s3:light-dark(#1baf7a,#199e70);
  --s4:light-dark(#4a3aa7,#b9b0f7);
  /* Fixture difficulty: blue (easy) - grey - red (hard). Text colour is set per step for contrast. */
  --fd1:#1c5cab; --fd1-ink:#ffffff;
  --fd2:#86b6ef; --fd2-ink:#010028;
  --fd3:light-dark(#e4e2d8,#2f3558); --fd3-ink:light-dark(#010028,#eaecf5);
  --fd4:#f2a49b; --fd4-ink:#010028;
  --fd5:#b3261e; --fd5-ink:#ffffff;
  --up:light-dark(#00733a,#5ccb95);
  --down:light-dark(#b3261e,#ff9b94);
  /* Price change likelihood (FFM.heat in stats.js): a tint that deepens as a player nears a change, then solid once FPL
     projects the change for tonight. Tints sit under normal ink (checked to 5:1 at their strongest, 70%); the solid step
     carries its own text colour. The % and the arrow always stay, so colour is never the only signal. */
  --rise-tint:light-dark(#00733a,#1f8f5a); --rise-solid:light-dark(#00733a,#5ccb95); --rise-on:light-dark(#ffffff,#010028);
  --fall-tint:light-dark(#b3261e,#b3392f); --fall-solid:light-dark(#b3261e,#ff9b94); --fall-on:light-dark(#ffffff,#010028);
}

/* The header's "Stats" link stays marked on every stats page */

/* ---- Page head ---- */
.st-head{ padding-block:clamp(2rem,5vw,3.5rem) clamp(1.25rem,3vw,2rem); }
.st-crumb{ margin-bottom:.75rem; font-size:.875rem; color:var(--ink-3); }
.st-crumb ol{ display:flex; flex-wrap:wrap; align-items:baseline; }
.st-crumb li + li::before{ content:"/"; margin-inline:.5rem; color:var(--ink-3); }
.st-crumb li[aria-current]{ color:var(--ink-2); }
.st-crumb a{ color:var(--link); text-underline-offset:.22em; }
.st-head h1{ font-size:clamp(2.125rem,1.1rem + 4vw,3.75rem); line-height:1; letter-spacing:-.035em; }
.st-head .lead{ margin-top:1rem; max-width:40rem; color:var(--ink-2); font-size:clamp(1rem,.96rem + .25vw,1.125rem); line-height:1.55; }
.st-meta{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; font-size:.875rem; color:var(--ink-3); }
.st-body{ padding-bottom:clamp(3rem,7vw,5rem); }
.st-body > * + *{ margin-top:clamp(1.75rem,4vw,2.75rem); }

/* ---- Sections ---- */
.st-sec{ min-width:0; }
.st-sec > h2{ padding-top:1rem; border-top:2px solid var(--ink); font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem); letter-spacing:-.02em; }
.st-sec > .sub{ margin-top:.375rem; max-width:60ch; font-size:.9375rem; color:var(--ink-2); }
.st-sec > h2 + *:not(.sub), .st-sec > .sub + *{ margin-top:1rem; }
.st-sec > p:not(.sub) + .st-grid2{ margin-top:1.5rem; }
.st-note{ margin-top:.75rem; max-width:70ch; font-size:.875rem; line-height:1.5; color:var(--ink-3); }
.st-h3{ margin-bottom:.625rem; font:600 1.0625rem/1.2 var(--display); letter-spacing:-.01em; }
.st-grid2{ display:grid; gap:clamp(1.75rem,4vw,2.5rem); }
@media (min-width:56rem){ .st-grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.st-grid2 > *{ min-width:0; }

/* ---- Filter bar ---- */
.st-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; padding:1rem; border:1px solid var(--line-2); border-radius:2px; background:var(--card); }
.st-f{ display:grid; gap:.3125rem; min-width:0; }
.st-f > span, .st-f > label{ font:600 .8125rem/1.2 var(--display); color:var(--ink-2); }
.st-f.grow{ flex:1 1 12rem; }
.st-in, .st-sel{ min-height:2.5rem; padding:.375rem .625rem; border:1.5px solid var(--ctl); border-radius:3px; background:var(--card); color:var(--ink); font-size:.9375rem; line-height:1.3; }
.st-in{ width:100%; }
.st-sel{ padding-right:1.75rem; }
.st-in::placeholder{ color:var(--ink-3); opacity:1; }
@media (hover:hover) and (pointer:fine){ .st-in:hover, .st-sel:hover{ border-color:var(--ink-2); } }
.st-range{ display:flex; align-items:center; gap:.375rem; }
.st-range .st-sel{ min-width:0; }
.st-check{ display:inline-flex; align-items:center; gap:.5rem; min-height:2.5rem; font-size:.9375rem; color:var(--ink-2); cursor:pointer; }
.st-check input{ width:1.125rem; height:1.125rem; accent-color:var(--green); }
.st-count{ margin-left:auto; align-self:center; font-size:.875rem; color:var(--ink-3); white-space:nowrap; }
@media (max-width:36rem){
  .st-bar{ padding:.75rem; gap:.625rem .75rem; }
  .st-f.grow{ flex-basis:100%; }
  .st-count{ margin-left:0; flex-basis:100%; }
}

/* Segmented control (position filter, gameweek count) */
.st-seg{ display:inline-flex; padding:2px; gap:2px; border:1px solid var(--ctl); border-radius:3px; background:var(--card); }
.st-seg button{ min-height:2.125rem; min-width:2.5rem; padding:0 .625rem; border:0; border-radius:2px; background:transparent; color:var(--ink-2); font:600 .8125rem/1 var(--display); transition:background-color .14s ease, color .14s ease; }
.st-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.st-seg button:focus-visible{ outline-offset:-2px; }
@media (hover:hover) and (pointer:fine){ .st-seg button[aria-pressed="false"]:hover{ background:var(--bg-2); color:var(--ink); } }

/* ---- Tables: scroll sideways inside the box only, first column stays put ---- */
.st-tw{ position:relative; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--line-2); border-radius:2px; background:var(--card); }
.st-tw:focus-visible{ outline-offset:2px; }
.st-t{ width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; font-variant-numeric:tabular-nums; color:var(--ink); }
.st-t th, .st-t td{ padding:.5625rem .625rem; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); background:var(--card); }
.st-t tbody tr:last-child > *{ border-bottom:0; }
.st-t thead th{ position:relative; background:var(--bg-2); border-bottom:1px solid var(--line-2); font:600 .75rem/1.2 var(--body); color:var(--ink-2); vertical-align:bottom; }
.st-t .l{ text-align:left; }
.st-t .c{ text-align:center; }
.st-t .wrap-cell{ white-space:normal; min-width:16rem; max-width:28rem; text-align:left; line-height:1.45; }
.st-t th:first-child, .st-t td:first-child{ position:sticky; left:0; z-index:1; text-align:left; border-right:1px solid var(--line-2); }
.st-t thead th:first-child{ z-index:2; }
.st-t td:first-child{ max-width:11rem; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:40rem){ .st-t td:first-child{ max-width:15rem; } }
@media (hover:hover) and (pointer:fine){ .st-t tbody tr:hover > *{ background:var(--bg-2); } }
.st-sort{ display:inline-flex; align-items:center; gap:.25rem; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer; }
.st-sort::after{ content:''; width:.5rem; height:.5rem; flex:none; opacity:.35; background:currentColor; clip-path:polygon(50% 0,100% 40%,0 40%,0 60%,100% 60%,50% 100%); }
th[aria-sort="descending"] .st-sort::after{ opacity:1; clip-path:polygon(0 25%,100% 25%,50% 85%); }
th[aria-sort="ascending"] .st-sort::after{ opacity:1; clip-path:polygon(50% 15%,100% 75%,0 75%); }
th[aria-sort] { color:var(--ink); }
.st-sort:focus-visible{ outline-offset:2px; }
.st-more{ display:flex; justify-content:center; padding-top:1rem; }
.st-empty{ padding:2rem 1rem; text-align:center; color:var(--ink-3); }

/* Player cell */
.pl{ display:inline-flex; align-items:baseline; gap:.375rem; min-width:0; max-width:100%; }
.pl a, .pl b{ overflow:hidden; text-overflow:ellipsis; font:600 .9375rem/1.25 var(--display); letter-spacing:-.005em; color:var(--ink); text-decoration:none; }
.pl a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.pl small{ flex:none; font-size:.75rem; color:var(--ink-3); }
.tm{ display:inline-flex; align-items:center; white-space:nowrap; font-weight:600; font-size:.8125rem; }
.tm .dot{ margin-right:.4375rem; }
.posb{ display:inline-block; min-width:2.25rem; padding:.125rem .3125rem; border-radius:2px; background:var(--bg-2); font:600 .6875rem/1.2 var(--body); color:var(--ink-2); text-align:center; }
/* Rows that lead with a player or team link are clickable as a whole (see stats.js) */
.st-t tbody tr:has(> :first-child a[href]), .rank li:has(a[href]), .snap-list li:has(a[href]), .snap-runs li:has(a[href]), .night-list li:has(a[href]), .mt-alerts li:has(a[href]){ cursor:pointer; }
@media (hover:hover) and (pointer:fine){
  .rank li:has(a[href]):hover, .snap-list li:has(a[href]):hover, .night-list li:has(a[href]):hover{ background:var(--bg-2); }
  .st-t tbody tr:has(> :first-child a[href]):hover > :first-child a{ text-decoration:underline; text-underline-offset:.2em; }
}
/* Team chips are links to team pages */
a.tm{ color:inherit; text-decoration:none; border-radius:2px; }
a.tm:hover{ text-decoration:underline; text-underline-offset:.2em; }

/* Player names link to player pages without looking like body links */
.rank .who a, .snap-n a, .pn a, .night-list a, .cmp-t thead a, .pl-index a{ color:inherit; text-decoration:none; }
.rank .who a:hover, .snap-n a:hover, .pn a:hover, .night-list a:hover, .cmp-t thead a:hover, .pl-index a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.chg-up{ color:var(--up); font-weight:600; }
.chg-dn{ color:var(--down); font-weight:600; }
.muted{ color:var(--ink-3); }

/* Availability flags: icon + label, never colour alone */
.flag{ display:inline-flex; align-items:center; gap:.3125rem; padding:.125rem .4375rem; border:1px solid currentColor; border-radius:2px; font:600 .75rem/1.3 var(--body); white-space:nowrap; }
.flag::before{ font-size:.75rem; line-height:1; }
.flag-i{ color:var(--danger); } .flag-i::before{ content:'\2715'; }
.flag-s{ color:var(--danger); } .flag-s::before{ content:'\25A0'; }
.flag-d{ color:var(--amber); background:var(--amber-bg); border-color:var(--amber-line); } .flag-d::before{ content:'?'; font-weight:700; }
.flag-u, .flag-n{ color:var(--ink-3); } .flag-u::before, .flag-n::before{ content:'\2013'; }
.flag-a{ color:var(--tint-ink); background:var(--tint); border-color:transparent; } .flag-a::before{ content:'\2713'; }
.chance{ display:inline-flex; align-items:center; gap:.5rem; }
.chance .gbar{ width:3rem; }
.chance .gbar i{ background:var(--c,var(--data)); }

/* ---- Fixture ticker ---- */
.fx-t td, .fx-t th{ padding:.375rem; }
.fx-t thead th{ text-align:center; }
.fx-t thead th small{ display:block; margin-top:.125rem; font-weight:400; color:var(--ink-3); }
.fx-t td:first-child{ padding-inline:.625rem; }
.fx-t td.fx-score{ font-size:.8125rem; color:var(--ink-2); }
.fx{ display:flex; flex-direction:column; gap:2px; min-width:3.75rem; }
.fx span{ display:block; padding:.4375rem .25rem; border-radius:2px; text-align:center; font:600 .8125rem/1.1 var(--body); letter-spacing:.01em; }
.fx .away{ text-transform:lowercase; font-weight:400; }
.fx .d1{ background:var(--fd1); color:var(--fd1-ink); }
.fx .d2{ background:var(--fd2); color:var(--fd2-ink); }
.fx .d3{ background:var(--fd3); color:var(--fd3-ink); }
.fx .d4{ background:var(--fd4); color:var(--fd4-ink); }
.fx .d5{ background:var(--fd5); color:var(--fd5-ink); }
.fx.dbl span{ padding-block:.25rem; font-size:.75rem; }
.fx .blank{ border:1px dashed var(--ctl); color:var(--ink-3); font-weight:600; background:repeating-linear-gradient(45deg,transparent 0 5px,var(--bg-2) 5px 7px); }
.fx-badge{ display:inline-block; margin-left:.25rem; padding:.0625rem .25rem; border-radius:2px; font:600 .625rem/1.2 var(--body); vertical-align:1px; }
.fx-badge.dgw{ background:var(--ink); color:var(--bg); }
.fx-badge.bgw{ border:1px solid var(--ctl); color:var(--ink-2); }
.fx-key{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; font-size:.8125rem; color:var(--ink-2); }
.fx-key .fx{ flex-direction:row; min-width:0; }
.fx-key .fx span{ min-width:1.75rem; padding:.25rem .375rem; }

/* ---- Cards, tiles and lists ---- */
.st-cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); }
.st-card{ min-width:0; padding:1rem 1.125rem 1.125rem; border:1px solid var(--line-2); border-radius:2px; background:var(--card); }
.st-card h3{ display:flex; align-items:center; gap:.5rem; font:600 1.125rem/1.2 var(--display); letter-spacing:-.015em; }
.st-card h3 small{ margin-left:auto; font:400 .8125rem var(--body); color:var(--ink-3); letter-spacing:0; }
.st-card dl{ margin-top:.75rem; display:grid; gap:.625rem; }
.st-card dt{ font:600 .75rem/1.2 var(--body); color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.st-card dd{ margin-top:.1875rem; font-size:.9375rem; line-height:1.45; }
.st-card .note{ margin-top:.75rem; padding-top:.625rem; border-top:1px solid var(--line); font-size:.875rem; line-height:1.5; color:var(--ink-2); }
.st-stack{ display:grid; gap:.5rem; }
details.st-card summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem; cursor:pointer; font-family:var(--display); }
.night-list{ margin-top:.75rem; display:grid; gap:.3125rem; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.night-list li{ display:flex; flex-wrap:wrap; align-items:center; gap:.125rem .375rem; }
.night-list .end{ margin-left:auto; }
.night-list .dot{ margin-right:.125rem; }
.ord{ display:inline-grid; place-items:center; width:1.125rem; height:1.125rem; margin-right:.25rem; border-radius:50%; background:var(--bg-2); font:600 .6875rem/1 var(--body); color:var(--ink-2); vertical-align:1px; }
.ord.first{ background:var(--green); color:#fff; }

.tiles{ display:grid; gap:1px; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line-2); background:var(--line-2); }
@media (min-width:48rem){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tile{ min-width:0; padding:1rem 1.125rem; background:var(--card); }
.tile dt{ font-size:.8125rem; line-height:1.3; color:var(--ink-3); }
.tile dd{ margin-top:.375rem; font:600 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.1 var(--body); letter-spacing:-.02em; overflow-wrap:anywhere; }
.tile dd small{ display:block; margin-top:.25rem; font:400 .8125rem/1.3 var(--body); letter-spacing:0; color:var(--ink-3); }
.tile dd .pn{ font-family:var(--display); font-size:clamp(1.125rem,1rem + .6vw,1.5rem); letter-spacing:-.015em; }

.countdown{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem clamp(1rem,3vw,2rem); padding:clamp(1.25rem,3vw,1.75rem); border-radius:2px; background:var(--green); color:#fff; }
.countdown h2{ flex:1 1 100%; font-size:clamp(1.25rem,1rem + 1vw,1.625rem); letter-spacing:-.02em; }
.countdown .when{ flex:1 1 100%; margin-top:-.375rem; font-size:.9375rem; opacity:.92; }
.cd-u{ display:grid; justify-items:start; }
.cd-u b{ font:600 clamp(2.25rem,1.6rem + 3vw,3.5rem)/1 var(--body); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.cd-u span{ margin-top:.25rem; font-size:.8125rem; opacity:.9; }
.countdown :focus-visible{ outline-color:#fff; }

.rank{ border-top:2px solid var(--ink); }
.rank li{ position:relative; display:grid; grid-template-columns:1.5rem minmax(0,1fr) auto; align-items:center; column-gap:.625rem; min-height:2.75rem; padding:.375rem .75rem; border-bottom:1px solid var(--line); isolation:isolate; }
.rank .fill{ position:absolute; z-index:-1; top:0; bottom:0; left:0; width:calc(var(--k) * 100%); background:var(--bar); }
.rank .rk{ font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rank .who{ display:flex; align-items:baseline; gap:.5rem; min-width:0; }
.rank .who b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 .9375rem/1.25 var(--display); }
.rank .who small{ flex:none; font-size:.75rem; color:var(--ink-3); }
.rank .v{ text-align:right; font:600 .9375rem/1 var(--body); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rank .v small{ font-weight:400; color:var(--ink-3); }

/* ---- Compare ---- */
.cmp-pick{ display:grid; gap:.75rem; }
.cmp-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cmp-chip{ display:inline-flex; align-items:center; gap:.5rem; min-height:2.5rem; padding:0 .375rem 0 .75rem; border:1.5px solid var(--sc); border-radius:3px; background:var(--card); font:600 .9375rem/1 var(--display); }
.cmp-chip i{ width:.75rem; height:.75rem; border-radius:50%; background:var(--sc); }
.cmp-chip button{ display:grid; place-items:center; width:1.875rem; height:1.875rem; border:0; border-radius:2px; background:transparent; color:var(--ink-2); font-size:1.125rem; line-height:1; }
.cmp-chip button:hover{ background:var(--bg-2); color:var(--ink); }
.s1{ --sc:var(--s1); } .s2{ --sc:var(--s2); } .s3{ --sc:var(--s3); } .s4{ --sc:var(--s4); }
.ac{ position:relative; }
.ac-list{ position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); max-height:18rem; overflow-y:auto; border:1px solid var(--line-2); border-radius:3px; background:var(--card); }
.ac-list li{ display:flex; align-items:baseline; gap:.5rem; padding:.625rem .75rem; border-bottom:1px solid var(--line); cursor:pointer; }
.ac-list li:last-child{ border-bottom:0; }
.ac-list li[aria-selected="true"], .ac-list li:hover{ background:var(--bg-2); }
.ac-list li b{ font:600 .9375rem/1.2 var(--display); }
.ac-list li small{ font-size:.8125rem; color:var(--ink-3); }
.cmp-t td:first-child, .cmp-t th:first-child{ font-weight:400; color:var(--ink-2); }
.cmp-t thead th{ font:600 .875rem/1.2 var(--display); color:var(--ink); }
.cmp-t thead th .key{ display:inline-block; width:.625rem; height:.625rem; margin-right:.375rem; border-radius:50%; background:var(--sc); vertical-align:0; }
.cmp-t td.best{ font-weight:600; color:var(--ink); background:var(--tint); }
.cmp-t td.best::after{ content:' \25B2'; font-size:.625rem; color:var(--tint-ink); vertical-align:1px; }
.chart-box{ position:relative; min-width:0; padding:1rem; border:1px solid var(--line-2); border-radius:2px; background:var(--card); }
.chart-box .cv{ position:relative; height:20rem; }
@media (min-width:40rem){ .chart-box .cv{ height:24rem; } }
.legend{ display:flex; flex-wrap:wrap; gap:.375rem 1.25rem; margin-bottom:.75rem; font-size:.875rem; color:var(--ink-2); }
.legend span{ display:inline-flex; align-items:center; gap:.4375rem; }
.legend svg{ width:1.75rem; height:.75rem; }
.chart-note{ margin-top:.625rem; font-size:.8125rem; line-height:1.5; color:var(--ink-3); }
.share{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.share-note{ font-size:.875rem; color:var(--ink-3); }

/* ---- Stats hub ---- */
.hub-soon .sq-name{ color:var(--ink-2); }
.hub-soon .sq-go{ color:var(--ink-3); }

/* ---- Estimate notice (price predictions) ---- */
.est{ display:flex; gap:.75rem; align-items:flex-start; padding:.875rem 1rem; border:1px solid var(--amber-line); border-radius:2px; background:var(--amber-bg); color:var(--ink); font-size:.9375rem; line-height:1.5; }
.est .tag{ flex:none; }

/* Progress towards a price change: a bar either side of a centre line (fall left, rise right) */
.pbar{ display:inline-flex; align-items:center; gap:.5rem; }
.pbar .trk{ position:relative; display:inline-block; width:5rem; height:.5rem; border-radius:1px; background:var(--bg-3); }
.pbar .trk::after{ content:''; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--ink-3); }
.pbar .trk i{ position:absolute; top:0; bottom:0; opacity:calc(.35 + var(--k,.7) / .7 * .65); }
.pbar .trk i.up{ left:50%; background:var(--up); }
.pbar .trk i.dn{ right:50%; background:var(--down); }
.pbar b{ min-width:3.5rem; text-align:right; font-weight:600; }

/* Likelihood chip: the % on a tint that deepens with the chance of a change (--k, 0 to .7), solid when it is due */
.heat{ --hc:var(--rise-tint); display:inline-block; min-width:4.25rem; padding:.1875rem .4375rem; border-radius:2px; background:color-mix(in srgb, var(--hc) calc(var(--k,0) * 100%), var(--card)); color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.heat.dn{ --hc:var(--fall-tint); }
.heat.due{ background:var(--rise-solid); color:var(--rise-on); }
.heat.dn.due{ background:var(--fall-solid); color:var(--fall-on); }
.heat.none{ background:transparent; color:var(--ink-3); font-weight:400; }
/* Ranked lists of price moves: the bar behind each row takes the direction's colour, faintly, deeper for likelier moves */
.rank.heat-rows .fill{ background:color-mix(in srgb, var(--hc,var(--rise-tint)) calc(var(--h,0) * 100%), transparent); }
.rank.heat-rows.dn{ --hc:var(--fall-tint); }
.rank.heat-rows .v{ font-size:.875rem; }
/* Key: what the shades mean */
.heat-key{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; margin-top:.75rem; font-size:.8125rem; color:var(--ink-2); }
.heat-key > span{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.375rem; }
.heat-key b{ font-weight:600; color:var(--ink); }
.heat-key .heat{ min-width:0; padding:.125rem .375rem; font-size:.75rem; }

/* Minutes risk: rating badge and one small bar per gameweek */
.risk{ display:inline-flex; align-items:center; gap:.3125rem; padding:.125rem .4375rem; border:1px solid currentColor; border-radius:2px; font:600 .75rem/1.3 var(--body); white-space:nowrap; }
.risk-0{ color:var(--tint-ink); background:var(--tint); border-color:transparent; }
.risk-1{ color:var(--amber); background:var(--amber-bg); border-color:var(--amber-line); }
.risk-2{ color:var(--danger); }
.risk-3{ color:var(--on-danger); background:var(--danger); border-color:var(--danger); }
.risk small{ font-weight:400; opacity:.85; }
.mbars{ display:inline-flex; align-items:flex-end; gap:3px; height:1.375rem; vertical-align:middle; }
.mbars i{ display:block; width:.5rem; min-height:2px; height:calc(var(--h) * 100%); border-radius:1px 1px 0 0; background:var(--data); }
.mbars i.sub{ background:var(--ctl); }
.mbars i.none{ height:2px; background:var(--line-2); }

/* Differential score */
.score{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; }
.score .gbar{ width:3.5rem; }
.fx-mini{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:2.5rem; gap:2px; }
.fx-mini .fx{ min-width:0; }
.fx-mini .fx span{ padding:.25rem 0; font-size:.6875rem; }
.fx-mini .fx.dbl span{ padding:.0625rem 0; font-size:.625rem; }

/* ---- Generated pages: small SVG charts that work without JavaScript ---- */
.svgc{ display:block; width:100%; height:auto; overflow:visible; }
.svgc .gl{ stroke:var(--line); stroke-width:1; }
.svgc .base{ stroke:var(--line-2); stroke-width:1; }
.svgc .ax{ fill:var(--ink-3); font:400 12px var(--body); }
.chart-box .svgc{ max-width:44rem; }
.svgc .bar{ fill:var(--data); }
.svgc .bar.neg{ fill:var(--down); }
.svgc .ln{ fill:none; stroke:var(--s1); stroke-width:2; }
.svgc .pt{ fill:var(--s1); stroke:var(--card); stroke-width:2; }
figure.chart-box{ margin:0; }
.pp-data{ margin-top:.75rem; font-size:.875rem; }
.pp-data summary{ cursor:pointer; color:var(--link); font-weight:600; }
.pp-data .st-t{ margin-top:.5rem; max-width:22rem; }

/* ---- Player pages ---- */
.pp-sum{ display:grid; gap:1.5rem; align-items:start; }
.pp-hs{ margin:0; width:5.5rem; }
.pp-hs svg{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:4px; }
@media (min-width:40rem){ .pp-sum.has-hs{ grid-template-columns:auto minmax(0,1fr); column-gap:1.75rem; } .pp-hs{ width:7.5rem; } }
@media (min-width:56rem){ .pp-hs{ width:8.5rem; } }
@media (min-width:56rem){ .pp-sum .pp-id{ grid-template-columns:minmax(0,1fr) 24rem; align-items:end; column-gap:2.5rem; } .pp-sum .pp-facts{ grid-column:1 / -1; } .pp-sum .pp-search{ grid-column:2; grid-row:2; } }

/* The four verdict cards: Form, Minutes, Fixtures, Price. The verdict word carries the meaning; the top rule colours it. */
.pp-checks{ display:grid; gap:.75rem; margin-top:1.75rem; }
@media (min-width:40rem){ .pp-checks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:64rem){ .pp-checks{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ck{ display:grid; align-content:start; gap:.375rem; min-width:0; padding:1rem 1.125rem 1.125rem; border:1px solid var(--line-2); border-top:4px solid var(--ctl); border-radius:2px; background:var(--card); }
.ck-good{ border-top-color:var(--data); }
.ck-mid{ border-top-color:var(--amber-line); }
.ck-bad{ border-top-color:var(--danger); }
.ck dt{ font:600 .75rem/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.ck dd{ display:grid; gap:.5rem; }
.ck dd > b{ font:600 1.625rem/1.05 var(--display); letter-spacing:-.025em; color:var(--ink); }
.ck dd > span{ font-size:.875rem; line-height:1.4; }
.ck dd > span:not(.risk){ color:var(--ink-2); }
.ck .ck-note{ font-size:.8125rem; }
.ck .ck-note .tag{ margin-left:.25rem; vertical-align:1px; }
.ck .ck-heat{ display:flex; align-items:center; gap:.5rem; }
.ck .ck-heat .heat{ min-width:0; }
.ck .risk{ justify-self:start; }
.ck .fx-mini{ grid-auto-columns:minmax(0,1fr); width:100%; }
.ck-bars{ display:flex; align-items:flex-end; gap:4px; height:2.75rem; padding-top:1rem; }
.ck-bars i{ position:relative; flex:1 1 0; min-height:3px; height:calc(var(--h) * 100%); border-radius:2px 2px 0 0; background:var(--data); }
.ck-bars em{ position:absolute; left:0; right:0; bottom:100%; padding-bottom:2px; font:600 .6875rem/1 var(--body); font-style:normal; text-align:center; color:var(--ink-2); }
.pp-id{ display:grid; gap:1rem; min-width:0; }
.pp-quick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--line-2); background:var(--line-2); }
.pp-quick > div{ padding:.75rem 1rem; background:var(--card); }
.pp-quick dt{ font:600 .6875rem/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.pp-quick dd{ margin-top:.25rem; font:600 1.625rem/1.1 var(--body); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pp-quick dd small{ display:block; margin-top:.125rem; font:400 .75rem/1.2 var(--body); letter-spacing:0; color:var(--ink-3); }
.pp-quick.tq{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:40rem){ .pp-quick.tq{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:64rem){ .pp-quick.tq{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.res{ display:inline-grid; place-items:center; width:1.375rem; height:1.375rem; border-radius:2px; font:600 .75rem/1 var(--body); }
.res-W{ background:var(--tint); color:var(--tint-ink); }
.res-D{ background:var(--bg-3); color:var(--ink-2); }
.res-L{ background:var(--danger); color:var(--on-danger); }
.tres .tm, .night-list .tm{ color:var(--ink); text-decoration:none; }
.team-card{ display:grid; gap:.625rem; color:var(--ink); text-decoration:none; transition:border-color .14s ease; }
.team-card:hover{ border-color:var(--ink-2); }
.tc-line{ font-size:.8125rem; }
.pl-index th .pl a{ font-size:.9375rem; }
.pl-index .tm{ color:var(--ink); text-decoration:none; }
.pp-jump{ display:flex; gap:.375rem 1.25rem; overflow-x:auto; padding-block:.75rem; border-block:1px solid var(--line); white-space:nowrap; scrollbar-width:none; }
.pp-jump a{ padding:.25rem 0; color:var(--ink-2); font:600 .875rem/1.2 var(--display); text-decoration:none; }
.pp-jump a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:.25em; }
.pp-basis{ display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; font:600 .8125rem/1 var(--display); color:var(--ink-2); }
.pp-basis[hidden]{ display:none; }
.pp-search{ display:grid; gap:.375rem; max-width:26rem; }
.pp-search label{ font:600 .8125rem/1.2 var(--display); color:var(--ink-2); }
.pp-search .st-range{ gap:.5rem; }
.pp-search .btn{ min-height:2.5rem; padding:0 1rem; }
.pp-log td, .pp-log th{ vertical-align:middle; }
.pp-log .tm{ color:var(--ink); text-decoration:none; font-size:.875rem; }
.pp-log .tm:hover{ text-decoration:underline; }
.pp-about{ display:grid; gap:1.5rem; }
@media (min-width:56rem){ .pp-about{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:3rem; } }
.pp-about > p{ max-width:62ch; color:var(--ink-2); font-size:1.0625rem; line-height:1.65; }
.pp-chips p{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.chip-link{ display:inline-flex; align-items:center; min-height:2.25rem; padding:0 .875rem; border:1px solid var(--line-2); border-radius:999px; background:var(--card); color:var(--ink); font:600 .8125rem/1 var(--display); text-decoration:none; transition:border-color .14s ease, background-color .14s ease; }
.chip-link:hover{ border-color:var(--ink-2); background:var(--bg-2); }
.pp-facts{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; font-size:1.0625rem; color:var(--ink-2); }
.pp-facts .tm{ font-size:1.0625rem; color:var(--ink); text-decoration:none; }
.pp-facts .tm:hover{ text-decoration:underline; text-underline-offset:.2em; }
.pp-price{ font:600 1.25rem/1 var(--body); color:var(--ink); }
.pp-links{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; }
.pp-price-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem; }
.pp-price-line b{ font:600 1.75rem/1 var(--body); letter-spacing:-.02em; }
.pp-pred{ padding:.75rem 1rem; border-left:4px solid var(--ctl); background:var(--bg-2); font-size:.9375rem; }
.pp-pred-1{ border-left-color:var(--up); }
.pp-pred--1{ border-left-color:var(--down); }
.st-sec > * + .chart-box, .st-sec > p + p, .st-sec > p + ul, .st-sec > figure + ul{ margin-top:.875rem; }
.pp-fx td, .pp-fx th{ vertical-align:middle; }
.pp-fx .fx{ min-width:3rem; }
.pp-fx .tm{ color:var(--ink); text-decoration:none; font-size:.875rem; }
.pp-fx .tm:hover{ text-decoration:underline; }
.pp-risk{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .875rem; }
.pp-news{ padding:.75rem 1rem; border-left:4px solid var(--amber-line); background:var(--amber-bg); }

/* ---- Team viewer ---- */
.mt-form{ align-items:flex-end; }
.mt-form .btn{ min-height:2.5rem; }
.mt-safe{ margin-top:.875rem; border-color:var(--line-2); background:var(--tint); }
.mt-help{ margin-top:.5rem; padding-left:1.25rem; list-style:decimal; display:grid; gap:.25rem; color:var(--ink-2); }
.mt-help code{ font:500 .875em ui-monospace,Consolas,monospace; }
.mt-msg{ min-height:1.5em; margin-top:.75rem; font-weight:600; color:var(--ink-2); }
.mt-msg.err{ color:var(--danger); }
.mt-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; padding-top:1rem; border-top:2px solid var(--ink); margin-bottom:1rem; }
.mt-head h2{ font-size:clamp(1.5rem,1.2rem + 1vw,2rem); letter-spacing:-.025em; }
/* Squad: one table, grouped by position. Role column says starting or which sub, and how often you pick them */
.mt-grp th{ padding:.875rem .625rem .375rem; background:var(--card); font:600 .75rem/1.2 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); text-align:left; border-bottom:1px solid var(--line-2); }
.mt-role{ display:block; font:600 .875rem/1.3 var(--display); color:var(--ink-2); white-space:nowrap; }
.mt-role.is-xi{ color:var(--ink); }
.mt-rn{ display:block; margin-top:.125rem; font-size:.75rem; line-height:1.3; color:var(--ink-3); white-space:nowrap; }
.mt-sub > *{ background:color-mix(in srgb, var(--bg-2) 45%, var(--card)); }
.mt-cover .pl a{ color:var(--ink-2); }
.risk-quiet{ color:var(--ink-3); background:transparent; border-color:var(--line-2); font-weight:400; }
.mt-csum{ margin:.25rem 0 .5rem; font-size:.875rem; color:var(--ink-2); }
.mt-csum b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.mt-t .fx-mini{ grid-auto-columns:2.25rem; }
.cv-b{ display:inline-grid; place-items:center; width:1.125rem; height:1.125rem; border-radius:50%; background:var(--ink); color:var(--bg); font:600 .625rem/1 var(--display); align-self:center; }
.cv-b.v{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.mt-alerts li{ padding:.375rem 0; border-bottom:1px solid var(--line); }
.chart-box .cv.cv-sm{ height:14rem; }

/* ---- Share dialog ---- */
.share-dlg{ width:min(40rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:1px solid var(--line-2); border-radius:4px; background:var(--card); color:var(--ink); }
.share-dlg::backdrop{ background:rgba(1,0,40,.6); }
.share-top{ display:flex; align-items:center; justify-content:space-between; padding:.875rem 1rem; border-bottom:1px solid var(--line); }
.share-top h2{ font-size:1.25rem; letter-spacing:-.02em; }
.share-x{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border:0; border-radius:3px; background:transparent; color:var(--ink-2); font-size:1.5rem; }
.share-x:hover{ background:var(--bg-2); color:var(--ink); }
.share-img{ display:block; width:calc(100% - 2rem); margin:1rem; aspect-ratio:1200 / 675; border-radius:2px; background:var(--bg-2); }
.share-acts{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1rem; }
.share-acts .btn{ min-height:2.75rem; flex:1 1 9rem; }
.share-msg{ min-height:1.5em; padding:.5rem 1rem 1rem; font-size:.875rem; color:var(--ink-3); }
.btn-share{ min-height:2.5rem; padding:0 1rem; }

/* ---- Homepage: "Right now in FPL" card (sits where the preview carousel was) ---- */
.snap{ min-width:0; border:1px solid var(--line-2); background:var(--card); }
.snap-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1.25rem .875rem; border-bottom:1px solid var(--line); }
.snap-head h2{ font-size:1.375rem; letter-spacing:-.025em; }
.snap-body{ display:grid; }
.snap-fallback{ padding:1.25rem; color:var(--ink-2); }
.snap-sec{ padding:.875rem 1.25rem; border-bottom:1px solid var(--line); }
.snap-sec h3{ margin-bottom:.5rem; font:600 .8125rem/1.2 var(--display); letter-spacing:0; color:var(--ink-3); }
.snap-sec h3 a{ color:inherit; text-decoration:none; }
.snap-sec h3 a::after{ content:' \2192'; }
.snap-sec h3 a:hover{ color:var(--link); }
.snap-dl{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem; }
.snap-dl b{ font:600 1.5rem/1.1 var(--body); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.snap-dl span{ font-size:.875rem; color:var(--ink-2); }
.snap-runs{ display:grid; gap:.3125rem; }
.snap-runs li{ display:grid; grid-template-columns:3.5rem minmax(0,1fr); align-items:center; gap:.5rem; }
.snap-fx{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; }
.snap-fx .fx{ min-width:0; }
.snap-fx .fx span{ padding:.3125rem 0; font-size:.6875rem; }
.snap-fx .fx.dbl span{ padding:.125rem 0; font-size:.625rem; }
.snap-list{ display:grid; gap:.375rem; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.snap-list li{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.snap-n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 .9375rem/1.3 var(--display); }
.snap-n small{ font:400 .75rem var(--body); color:var(--ink-3); }
.snap-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; padding:.75rem 1.25rem 1rem; }
.snap-upd{ font-size:.75rem; color:var(--ink-3); }
@media (max-width:26rem){ .snap-head, .snap-sec, .snap-foot{ padding-inline:1rem; } }

/* ---- Homepage: the paid tools, now a small "coming soon" block ---- */
.soon{ border-top:1px solid var(--line); padding-block:clamp(2.5rem,6vw,4.5rem); }
.soon-grid{ display:grid; gap:1.5rem; }
@media (min-width:60rem){ .soon-grid{ grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:4rem; } }
.soon-kicker{ margin-bottom:.75rem; }
.soon h2{ font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem); letter-spacing:-.03em; }
.soon-copy{ margin-top:.75rem; max-width:40rem; color:var(--ink-2); }
.soon-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.soon-list li{ padding:.3125rem .625rem; border:1px solid var(--line-2); border-radius:2px; font:600 .8125rem/1.2 var(--display); color:var(--ink-2); }
.soon-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }

/* ---- Data stamp and independence line (every stats page) ---- */
.st-foot{ display:grid; gap:.375rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.8125rem; line-height:1.5; color:var(--ink-3); }
.st-foot [data-updated]{ font-weight:600; color:var(--ink-2); }
.st-status{ padding:1.25rem; border:1px dashed var(--line-2); border-radius:2px; color:var(--ink-2); text-align:center; }
.st-status.err{ border-style:solid; border-color:var(--danger); color:var(--danger); }
.strict-note{ padding:.75rem 1rem; border-left:4px solid var(--ctl); background:var(--bg-2); font-size:.875rem; color:var(--ink-2); }

/* STRICT_MODE: anything marked data-sens disappears */
/* Always hide: strict mode must hide sensitive figures whatever display rule they carry, so !important is deliberate */
html.ffm-strict [data-sens]{ display:none !important; }
html:not(.ffm-strict) .strict-note{ display:none; }

/* Gameweek hub: subscribe to every deadline (/deadlines.ics, written by build-site.mjs) */
.cd-cal{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:baseline; gap:.375rem 1.25rem; margin-top:.5rem; padding-top:.875rem; border-top:1px solid rgba(255,255,255,.3); font-size:.9375rem; }
.cd-cal span{ flex:1 1 100%; opacity:.92; }
.cd-cal a{ color:#fff; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.cd-cal a:hover{ text-decoration-thickness:2px; }

/* Team marks (assets/team-marks): club colours on a roundel, next to the team page heading and on team cards */
.tp-h1{ display:inline-flex; align-items:center; gap:.875rem; }
.tp-mark svg{ display:block; width:2.75rem; height:auto; }
@media (min-width:40rem){ .tp-mark svg{ width:3.5rem; } }
.tk-mini svg{ display:inline-block; width:1.25rem; height:auto; vertical-align:-.3125rem; margin-right:.5rem; }