/* 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 .6875rem/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:.05em; }
.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); font-variant-numeric:tabular-nums; 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; font-variant-numeric:tabular-nums; 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:.05em; 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; font-variant-numeric:tabular-nums; 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 .75rem/1.2 var(--body); letter-spacing:.05em; 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:3px; 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 .6875rem/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 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-note{ margin-top:1rem; max-width:40rem; font-size:.875rem; color:var(--ink-3); }
.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, built from src/pages/deadlines.ics.ts) */
.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 (src/lib/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; }

/* Insights (InsightsTool.tsx, Scatter.tsx): quadrant charts drawn at their real width, the target and avoid lists, the
   points mix bars. Corners and lists always carry words and arrows, so the green and red are never the only signal. */
.ins-jump{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.ins-jump a{ display:inline-block; padding:.4375rem .625rem; border:1px solid var(--line-2); border-radius:3px; font:600 .8125rem/1 var(--display); color:var(--ink-2); text-decoration:none; transition:border-color .14s ease, color .14s ease; }
.ins-jump a:hover{ border-color:var(--ink); color:var(--ink); }
.ins-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem 1rem; }
.ins-read{ flex:1 1 20rem; max-width:68ch; padding:.625rem .875rem; border-left:4px solid var(--data); background:var(--bg-2); font-size:.875rem; line-height:1.5; color:var(--ink-2); }
.ins-read b{ margin-right:.25rem; font:600 .75rem/1 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.ins > .chart-box, .ins > .ins-picks, .ins > .ins-data{ margin-top:1rem; }
.sc{ min-height:21.25rem; }
.sc .svgc{ max-width:none; }
.sc .q-good{ fill:var(--tint); }
.sc .q-bad{ fill:var(--down); fill-opacity:.08; }
.sc .med{ stroke:var(--ctl); stroke-dasharray:4 3; }
.sc .cn{ font:600 11px var(--body); letter-spacing:.06em; text-transform:uppercase; fill:var(--ink-3); }
.sc .cn.good{ fill:var(--tint-ink); }
.sc .cn.bad{ fill:var(--danger); }
.sc .tt{ font:600 11px var(--body); letter-spacing:.04em; text-transform:uppercase; fill:var(--ink-2); }
.sc .lb{ font:400 12px var(--body); fill:var(--ink-2); }
.sc .lb.hi{ font-weight:600; fill:var(--ink); }
.sc .dt{ fill:var(--ctl); stroke:var(--card); stroke-width:2; }
.sc .dt.good{ fill:var(--up); }
.sc .dt.bad{ fill:var(--down); }
.sc .hit{ fill:transparent; }
.ins-picks{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }
.ins-pick{ min-width:0; padding:.875rem 1rem 1rem; border:1px solid var(--line-2); border-top:3px solid var(--up); border-radius:2px; background:var(--card); }
.ins-pick.bad{ border-top-color:var(--down); }
.ins-pick h3{ font:600 .8125rem/1.2 var(--display); letter-spacing:.04em; text-transform:uppercase; }
.ins-pick h3 span{ color:var(--up); }
.ins-pick.bad h3 span{ color:var(--down); }
.ins-pick ol{ display:grid; gap:.5rem; margin-top:.625rem; }
.ins-pick li{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.5rem; font-size:.875rem; line-height:1.4; font-variant-numeric:tabular-nums; }
.ins-pick li .dot{ margin-right:0; }
.ins-pick li a, .mix-name a{ font-weight:600; color:var(--ink); text-decoration:none; }
.ins-pick li a:hover, .mix-name a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.ins-pick > p{ margin-top:.625rem; font-size:.875rem; }
.ins-data .st-t{ max-width:none; }
.ins .s0{ --sc:var(--ctl); }
.mix-key{ display:flex; flex-wrap:wrap; gap:.375rem 1rem; margin-bottom:1rem; font-size:.8125rem; color:var(--ink-2); }
.mix-key i{ display:inline-block; width:.625rem; height:.625rem; margin-right:.375rem; border-radius:2px; background:var(--sc); }
.mix{ display:grid; gap:.5rem; }
.mix li{ display:grid; grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) 2rem; align-items:center; gap:.75rem; font-size:.875rem; }
.mix-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mix-bar{ display:flex; gap:2px; height:.875rem; }
.mix-bar i{ flex-basis:0; min-width:2px; background:var(--sc); }
.mix-bar i:last-child{ border-radius:0 2px 2px 0; }
.mix b{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width:36rem){ .mix li{ grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) 1.75rem; gap:.5rem; } }

/* Articles (src/app/articles; the text is Markdown from content/articles, so .prose styles plain tags) */
.art-meta{ margin-top:.75rem; font-size:.875rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.art-list{ max-width:46rem; }
.art-list li{ padding-block:1.25rem; border-top:1px solid var(--line); }
.art-list li:last-child{ border-bottom:1px solid var(--line); }
.art-when{ font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.art-list h2{ margin-top:.25rem; font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem); }
.art-list h2 a{ color:var(--ink); text-decoration:none; }
.art-list h2 a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.15em; }
.art-list p{ margin-top:.375rem; max-width:62ch; color:var(--ink-2); }
.prose{ max-width:42rem; font-size:1.0625rem; line-height:1.7; }
.prose > * + *{ margin-top:1em; }
.prose h2{ margin-top:2em; font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem); }
.prose h3, .prose h4, .prose h5, .prose h6{ margin-top:1.5em; font:600 1.1875rem/1.25 var(--display); letter-spacing:-.01em; }
.prose ul{ padding-left:1.25rem; list-style:disc; }
.prose ol{ padding-left:1.25rem; list-style:decimal; }
.prose li + li{ margin-top:.375em; }
.prose li > ul, .prose li > ol{ margin-top:.375em; }
.prose a{ color:var(--link); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.prose a:hover{ text-decoration-thickness:2px; }
.prose strong{ font-weight:600; color:var(--ink); }
.prose blockquote{ padding:.5rem 1rem; border-left:4px solid var(--line-2); color:var(--ink-2); }
.prose code{ padding:.1em .3em; border-radius:2px; background:var(--bg-2); font-size:.9em; }
.prose pre{ overflow-x:auto; padding:.75rem 1rem; border-radius:2px; background:var(--bg-2); }
.prose pre code{ padding:0; background:none; }
.prose hr{ border:0; border-top:1px solid var(--line); }
.prose img{ display:block; max-width:100%; max-height:32rem; height:auto; border-radius:2px; }
/* A photo's caption: the italic line straight under it in the Markdown, or a <figcaption> */
.prose img + em, .prose figcaption{ display:block; margin-top:.5rem; font-size:.875rem; font-style:normal; line-height:1.5; color:var(--ink-3); }
.prose .st-tw{ font-size:.9375rem; line-height:1.5; }
.prose .st-t :is(th,td):not([align]){ text-align:left; }

/* Touch screens: taller hit areas. Sort buttons fill their header cell; list rows (clickable as a whole, see stats.js) get
   a finger-sized height; the player page jump links trade the bar's padding for their own. Desktop stays dense. */
@media (pointer:coarse){
  .st-sort{ padding-block:.5625rem; margin-block:-.5625rem; }
  .night-list li, .snap-runs li{ min-height:2.5rem; }
  .night-list, .snap-runs{ gap:0; }
  .pp-jump{ padding-block:.25rem; }
  .pp-jump a{ padding-block:.75rem; }
  .pp-data summary, .soon-cta .tlink, .mt-head .linkbtn{ padding-block:.5rem; }
}