/* epl27 - "Touchline Light" design system.
   A bright, data-first analytics theme: white the dominant surface, a very pale neutral
   canvas, deep-aubergine ink, restrained violet / pink / cyan / lime accents. Probabilities,
   forecasts and charts are the visual focus; shadows, coloured rails and repeated card
   containers are kept to a minimum. One self-hosted/system sans (tabular numerals for data) -
   no external font import. Club colour appears only on crests, chart markers and thin identity
   accents. Independent fan project - no league/club marks used. */
:root{
  /* neutrals - white dominant, very pale canvas */
  --canvas:#F7F8FB;      --paper:#F7F8FB;        /* page background / quiet sections */
  --paper-2:#EEF1F6;     /* pale neutral fill (table header, chips) */
  --surface:#FFFFFF;     --card:#FFFFFF;         /* primary content surface */
  --ink:#21132D;         /* headings + primary text (deep aubergine) */
  --ink-2:#667085;       /* secondary text / metadata */
  --secondary:#667085;
  --muted:#98A2B3;       /* inactive labels */
  --line:#E7E9EF;        /* dividers + component outlines */
  --line-2:#F0F2F6;      /* faint inner divider */
  /* functional colour (10%) */
  --violet:#6D35D5;      --purple:#6D35D5;       --violet-soft:#EEE8FB;   /* brand + selected */
  --link:#6D35D5;
  --pink:#E83E80;        --pink-press:#C42E68;   --pink-ink:#FFFFFF;      /* primary CTA + highlight */
  --pink-wash:#FDE8F0;   --pink-soft:#FDE8F0;
  --cyan:#079BB5;        --cyan-wash:#E3F7FA;    --cyan-soft:#E3F7FA;     /* forecast / info series */
  --lime:#A9E34B;        /* very sparing matchday energy accent */
  /* semantic */
  --good:#16875B; --good-wash:#E7F6EF; --positive:#16875B;
  --bad:#D6455D;  --bad-wash:#FCEBED;  --negative:#D6455D;
  --warn:#9A6700; --warn-wash:#FFF4D6;
  /* geometry - flatter, no default shadow */
  --r:14px; --r-sm:10px; --r-lg:22px; --r-chip:8px;
  --shadow:none;
  --shadow-float:0 18px 48px -24px rgba(33,19,45,.28);   /* floating menus + sticky actions only */
  --grad-matchday:linear-gradient(105deg,#6d35d5 0%,#a445cc 48%,#e83e80 100%);
  --grad-data:linear-gradient(90deg,#079bb5 0%,#6d35d5 58%,#e83e80 100%);
  /* one family for (almost) everything; condensed reserved for scores via --display */
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:system-ui,-apple-system,"Segoe UI Semibold","Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --tnum:"tabular-nums";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--canvas);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.h{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 .45em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(30px,5vw,44px)}
h2{font-size:22px}
h3{font-size:17px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
small,.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}

/* eyebrow / kicker - restrained, sentence-ish, no shouty tracking */
.kicker,.eyebrow{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:11.5px;color:var(--violet)}

/* ---- header: clean white app bar, EPL27 mark, text links + freshness ---- */
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;padding:10px 16px;max-width:1200px;margin:0 auto;min-height:56px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:21px;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;line-height:1}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;display:block}
.brand .wm b{font-weight:800;color:var(--ink)}
.brand .wm i{font-style:normal;color:var(--violet)}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;gap:7px;color:var(--secondary);padding:9px 12px;min-height:44px;
  font-family:var(--body);font-weight:600;font-size:14px;border-radius:var(--r-sm);
  border-bottom:2px solid transparent;position:relative}
.nav a .navi{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.nav a:hover{color:var(--ink);background:var(--paper-2);text-decoration:none}
.nav a.active{color:var(--ink);font-weight:700;border-bottom-color:var(--violet)}
.nav a.active .navi{stroke:var(--violet)}

.container{max-width:1120px;margin:0 auto;padding:22px 16px 80px}

/* ---- matchweek command strip (Overview) - the one place a small gradient is welcome ---- */
.matchweek{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);padding:16px 18px;margin:0 0 20px}
.matchweek::before{content:"";align-self:stretch;width:5px;border-radius:4px;background:var(--grad-matchday);flex:0 0 auto}
.matchweek .mw-main{display:flex;flex-direction:column;gap:2px}
.matchweek .mw-wk{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.01em}
.matchweek .mw-sub{font-size:13.5px;color:var(--secondary)}
.matchweek .mw-stat{display:flex;flex-direction:column;gap:1px;min-width:96px}
.matchweek .mw-stat .n{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.matchweek .mw-stat .k{font-size:12px;color:var(--muted)}
.matchweek .mw-cta{margin-left:auto}
.mw-illus{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);margin:0 0 20px}

/* ---- cards - flat: white, 1px border, radius, no shadow. Sections may sit on canvas. ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:0 0 18px}
.card.accent{border-left:3px solid var(--violet)}
.card h2{margin-top:0}
.plain{margin:0 0 22px}                 /* a section directly on the canvas, no container */
.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1 1 280px}
.muted{color:var(--muted)}
.hint{color:var(--secondary);font-size:15px}
.center{text-align:center}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.freshness{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.freshness .dot{width:8px;height:8px;border-radius:50%;background:var(--positive)}
.freshness.stale .dot{background:var(--warn)}

/* ---- buttons + inputs - 44px comfortable targets ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:700;
  font-size:15px;color:var(--pink-ink);background:var(--pink);border:1px solid var(--pink);border-radius:var(--r-sm);
  padding:0 18px;min-height:44px;cursor:pointer}
.btn:hover{background:var(--pink-press);border-color:var(--pink-press)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:600}
.btn.ghost:hover{background:var(--paper-2)}
.btn.violet{background:var(--violet);border-color:var(--violet)}
.btn.violet:hover{filter:brightness(.94)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{min-height:38px;padding:0 14px;font-size:14px}
.btn .navi,.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
input,select{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;min-height:44px;width:100%}
input:focus,select:focus{outline:3px solid color-mix(in srgb,var(--violet) 40%,transparent);outline-offset:1px;border-color:var(--violet)}
label{display:block;font-weight:600;font-size:14px;margin:0 0 5px;color:var(--ink)}
.field{margin:0 0 12px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--violet) 45%,transparent);outline-offset:2px}

/* sign in / create toggle */
.authtabs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:0 0 16px}
.authtabs button{font-family:var(--body);font-weight:700;font-size:14px;color:var(--secondary);background:var(--surface);border:0;border-right:1px solid var(--line);padding:0 18px;min-height:44px;cursor:pointer}
.authtabs button:last-child{border-right:0}
.authtabs button:hover{background:var(--paper-2)}
.authtabs button.on{background:var(--violet);color:#fff}
.authpane{max-width:360px}

/* ---- pills, badges, chips ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--paper-2);color:var(--secondary)}
.pill.red{background:var(--pink-soft);color:var(--pink-press)}
.pill.good{background:var(--good-wash);color:var(--good)}
.pill.cl{background:var(--cyan-soft);color:var(--cyan)}
.pill.rel{background:var(--bad-wash);color:var(--bad)}
.pill.violet{background:var(--violet-soft);color:var(--violet)}
/* team crest - a letter badge; real crests fade in from the feed. Club colour lives HERE only. */
.crest{width:24px;height:24px;border-radius:var(--r-chip);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:11px;color:#fff;flex:0 0 auto}
.crest-img{position:relative;overflow:hidden}
.crest-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;opacity:0}
.crest-img img.ok{opacity:1}
.team{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}

/* ---- probability bar (100% stacked H/D/A) - the core analytics primitive ---- */
.probbar{display:flex;width:100%;height:16px;border-radius:999px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.probbar i{display:block;height:100%}
.probbar .ph{background:var(--violet)}
.probbar .pd{background:#C7CDD8}
.probbar .pa{background:var(--cyan)}
.problabels{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--secondary);font-variant-numeric:tabular-nums}
.problabels .home b{color:var(--violet)}
.problabels .away b{color:var(--cyan)}
.problabels b{color:var(--ink);font-weight:800}
.problabels .lead{color:var(--ink)}
/* model vs market (paired) */
.mvm{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--secondary);margin-top:8px}
.mvm .swatch{display:inline-flex;align-items:center;gap:6px}
.mvm .swatch::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--ink)}
.mvm .swatch.market::before{background:var(--muted)}
.mvm b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- analytical fixture cards (Matches) ---- */
.fxgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.fxgrid{grid-template-columns:1fr 1fr}}
.fx{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.fx.locked{opacity:.85}
.fx-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:10px}
.fx-teams{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.fx-teams .side{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;min-width:0}
.fx-teams .side span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-teams .side.away{flex-direction:row-reverse;text-align:right}
.fx-teams .vs{font-size:12px;color:var(--muted);font-weight:700;flex:0 0 auto}
.fx-teams .ha{font-size:11px;color:var(--muted);font-weight:700;flex:0 0 auto;margin-left:2px}
.fx-likely{font-size:12.5px;color:var(--secondary);margin-top:8px}
.fx-likely b{color:var(--ink);font-variant-numeric:tabular-nums}
.fx-pick{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.fx-result{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.fx-result .r-your,.fx-result .r-res{display:flex;flex-direction:column;gap:1px}
.fx-result .k{font-size:11.5px;color:var(--muted);font-weight:600}
.fx-result strong{font-variant-numeric:tabular-nums}

/* ---- score stepper (44px targets) ---- */
.stepper{display:inline-flex;align-items:center;gap:8px}
.stepper button{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  font-size:22px;font-weight:700;line-height:1;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
.stepper button:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-soft)}
.stepper .val{min-width:28px;text-align:center;font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.scoreline{display:flex;align-items:center;gap:12px;justify-content:center}
.scoreline .sep{color:var(--muted);font-weight:800}
.locked{opacity:.7}
.outcome-tag{font-size:13px;font-weight:700;padding:3px 10px;border-radius:var(--r-chip);background:var(--paper-2);color:var(--secondary)}
.outcome-tag.H{background:var(--violet-soft);color:var(--violet)}
.outcome-tag.A{background:var(--cyan-soft);color:var(--cyan)}
.outcome-tag.D{background:var(--paper-2);color:var(--secondary)}

/* W/D/L result control */
.wdl{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;width:100%}
.wdl button{flex:1;font-family:var(--body);font-weight:700;font-size:13px;color:var(--secondary);background:var(--surface);border:0;border-right:1px solid var(--line);min-height:44px;padding:0 10px;cursor:pointer}
.wdl button:last-child{border-right:0}
.wdl button:hover{background:var(--paper-2)}
.wdl button.on{background:var(--violet);color:#fff}

/* sticky save action (picks) */
.savebar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-top:16px;box-shadow:var(--shadow-float)}
.savebar .btn{flex:0 0 auto}
.savebar .msg{font-size:13.5px;color:var(--secondary)}

/* drag-to-reorder + arrows (table forecast) - bigger targets */
.ranklist{list-style:none;margin:0;padding:0}
.ranklist li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);margin:0 0 8px;background:var(--surface);min-height:52px}
.ranklist li:hover{border-color:color-mix(in srgb,var(--violet) 40%,var(--line))}
.ranklist li .pos{font-family:var(--display);font-weight:800;font-size:15px;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-chip);background:var(--paper-2);
  color:var(--secondary);font-variant-numeric:tabular-nums;flex:0 0 auto}
.ranklist li .grow{flex:1;min-width:0}
.ranklist .drag{touch-action:none;cursor:grab;display:inline-flex;width:36px;height:44px;align-items:center;justify-content:center;flex:0 0 auto;border-radius:var(--r-chip)}
.ranklist .drag:hover{background:var(--paper-2)}
.ranklist .drag:active{cursor:grabbing}
.ranklist .drag svg{width:18px;height:18px}
.ranklist li.dragging{opacity:.96;border-color:var(--violet);background:var(--violet-soft);box-shadow:var(--shadow-float)}
.ranklist .arrows{display:flex;flex-direction:column;gap:4px}
.ranklist .arrows button{width:44px;height:26px;padding:0;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-chip);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--secondary)}
.ranklist .arrows button:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-soft)}
.ranklist .arrows svg{width:13px;height:13px}

/* ---- segmented control (Season modes / Pool views) ---- */
.seg{display:inline-flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px;flex-wrap:wrap}
.seg button{appearance:none;border:0;background:transparent;color:var(--secondary);font:inherit;font-weight:700;font-size:14px;
  padding:0 16px;min-height:40px;border-radius:999px;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(33,19,45,.08)}
.seg button:focus-visible{outline:3px solid color-mix(in srgb,var(--violet) 45%,transparent);outline-offset:2px}

/* ---- tables ---- */
table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th,table.grid td{padding:10px 8px;text-align:right;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.grid th{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--surface);border-bottom:1px solid var(--line)}
table.grid td.l,table.grid th.l{text-align:left}
table.grid tbody tr:hover{background:var(--paper-2)}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr.me{background:var(--violet-soft)}
table.grid tbody tr.me:hover{background:var(--violet-soft)}
table.grid tbody tr.airow td{color:var(--secondary)}
table.grid tbody tr.airow td strong{color:var(--violet)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rankcell{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
/* freeze position + club on wide standings tables (desktop) */
table.grid.freeze th:nth-child(1),table.grid.freeze td:nth-child(1){position:sticky;left:0;background:var(--surface);z-index:1}
table.grid.freeze th:nth-child(2),table.grid.freeze td:nth-child(2){position:sticky;left:44px;background:var(--surface);z-index:1}
table.grid.freeze tbody tr.me td:nth-child(1),table.grid.freeze tbody tr.me td:nth-child(2){background:var(--violet-soft)}

/* ---- movement (never colour alone: arrow glyph + sign) ---- */
.move{font-family:var(--body);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.move.up{color:var(--good)} .move.up::before{content:"\2191 "}
.move.down{color:var(--bad)} .move.down::before{content:"\2193 "}
.move.flat{color:var(--muted)}

/* ---- banners ---- */
.banner{border-radius:var(--r-sm);padding:12px 14px;margin:0 0 16px;font-size:14px;border:1px solid transparent}
.banner.info{background:var(--cyan-soft);color:#075f6f;border-color:color-mix(in srgb,var(--cyan) 26%,transparent)}
.banner.warn{background:var(--warn-wash);color:#6b4a00;border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.banner.ok{background:var(--good-wash);color:var(--good);border-color:color-mix(in srgb,var(--good) 28%,transparent)}
.banner.bad{background:var(--bad-wash);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}

/* ---- offline status bar (shown only when navigator is offline; sits above the mobile bottom nav) ---- */
.offlinebar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--warn-wash);color:var(--warn);
  border-top:1px solid color-mix(in srgb,var(--warn) 32%,transparent);font-size:13px;font-weight:600;text-align:center;padding:9px 14px}

/* ---- loading skeletons (data pages paint these before a fetch resolves) ---- */
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,var(--line-2) 37%,var(--paper-2) 63%);background-size:400% 100%;
  animation:skel 1.3s ease-in-out infinite;border-radius:var(--r-sm)}
.skel-row{height:52px;margin:0 0 8px}
.skel-card{height:120px;margin:0 0 14px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---- stat tiles - flat, tabular numerals, no coloured rail ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.tile .n{font-family:var(--display);font-weight:800;font-size:30px;color:var(--ink);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .k{font-size:13px;color:var(--secondary);margin-top:8px;font-weight:500}

/* ---- rank / finish distribution strip ---- */
.dist{display:flex;flex-direction:column;gap:5px;margin:8px 0}
.dist .drow{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;font-size:12.5px;color:var(--secondary)}
.dist .dlab{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);text-align:right}
.dist .dtrack{height:12px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.dist .dfill{height:100%;background:var(--violet);border-radius:999px}
.dist .dfill.me{background:var(--grad-data)}
.dist .dval{font-variant-numeric:tabular-nums;color:var(--muted);min-width:40px;text-align:right}
.interval{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--secondary);margin-top:4px}
.interval .bar{position:relative;flex:1;height:8px;border-radius:999px;background:var(--paper-2)}
.interval .bar .iv{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--violet) 30%,transparent);border-radius:999px}
.interval .bar .md{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--violet)}

.footer{max-width:1120px;margin:0 auto;padding:24px 16px 48px;color:var(--muted);font-size:13px}
.footer a{color:var(--secondary)}
.split-halves{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- Table: clickable finish-odds cell + inline "why?" row ---- */
td.can-explain{cursor:pointer}
td.can-explain .whyhint{display:block;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--link);text-transform:uppercase}
td.can-explain:hover .whyhint,td.can-explain:focus-visible .whyhint{text-decoration:underline}
td.can-explain.open{background:var(--violet-soft)}
tr.explain-row td{padding:0;background:var(--paper-2)}
tr.explain-row .explain{box-sizing:border-box;max-width:min(760px,calc(100vw - 44px));
  padding:12px 18px 14px;border-left:3px solid var(--violet);text-align:left;white-space:normal}
tr.explain-row .explain-h{font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink);margin-bottom:4px;text-align:left;white-space:normal}
tr.explain-row .explain-body{font-size:13px;line-height:1.5;color:var(--secondary);text-align:left;white-space:normal;overflow-wrap:break-word}

/* ---- Match Centre (per-fixture drill-down; centred dialog, bottom sheet on mobile) ---- */
.fx-mc{border:0;background:none;color:var(--violet);font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;padding:7px 10px;min-height:36px;border-radius:6px;white-space:nowrap}
.fx-mc:hover{background:var(--violet-soft)}
.mc-back{position:fixed;inset:0;z-index:100;background:rgba(33,19,45,.42);display:none;align-items:center;justify-content:center;padding:20px}
.mc-back.open{display:flex}
.mc-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-float);width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:20px}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mc-teams{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink)}
.mc-teams .vs{color:var(--muted);font-weight:600;font-size:13px}
.mc-x{border:0;background:var(--paper-2);color:var(--ink);width:40px;height:40px;border-radius:999px;font-size:22px;line-height:1;cursor:pointer;flex:none}
.mc-x:hover{background:var(--line)}
.mc-when{color:var(--secondary);font-size:13px;margin:4px 0 14px;font-variant-numeric:tabular-nums}
.mc-sec-h{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.mc-src{margin-bottom:12px}
.mc-src-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.mc-src-l{font-weight:700;color:var(--ink);font-size:13.5px}
.mc-src:first-of-type .mc-src-l{color:var(--violet)}
.mc-mvm{font-size:13px;color:var(--secondary);margin:-2px 0 8px}
.mc-mvm b{color:var(--ink);font-variant-numeric:tabular-nums}
.mc-delta{font-weight:800;font-variant-numeric:tabular-nums}
.mc-delta.up{color:var(--good)}
.mc-delta.down{color:var(--bad)}
.mc-delta.flat{color:var(--muted)}
.mc-stats{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--secondary);margin:10px 0;padding:10px 12px;background:var(--paper);border-radius:var(--r-sm)}
.mc-stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.mc-picks{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px;margin:10px 0}
.mc-picks .k{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.mc-picks b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:15px}
.mc-scores{display:flex;flex-direction:column;gap:6px}
.mc-score{display:flex;align-items:center;gap:10px}
.mc-score .sc{width:34px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.mc-score .scbar{flex:1;height:12px;background:var(--paper-2);border-radius:999px;overflow:hidden}
.mc-score .scbar i{display:block;height:100%;background:var(--violet);border-radius:999px}
.mc-score .scp{width:46px;text-align:right;font-variant-numeric:tabular-nums;color:var(--secondary);font-size:13px}
.mc-score.pick .scbar i{background:var(--pink)}
.mc-score.pick .sc{color:var(--pink)}
body.mc-lock{overflow:hidden}
/* KATI take on a fixture card + the featured-game badge (anti-anchoring: KATI, not the model, leads) */
.fx-top-r{display:inline-flex;align-items:center;gap:8px}
.fx-feat{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pink);background:var(--pink-wash);padding:2px 7px;border-radius:999px}
.fx.featured{border:1px solid color-mix(in srgb,var(--pink) 40%,var(--line));box-shadow:0 0 0 3px var(--pink-wash)}
.fx-kati{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.45;color:var(--ink);margin-top:8px;font-style:italic}
.fx-kati-tag{font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.05em;color:var(--violet);background:var(--violet-soft);padding:2px 6px;border-radius:6px;flex:none}
/* Match Centre: KATI's take + the stories she is reading */
.mc-kati{display:flex;gap:9px;align-items:baseline;font-size:14px;line-height:1.5;color:var(--ink);background:var(--violet-soft);border-radius:var(--r-sm);padding:10px 12px;margin:6px 0}
.mc-kati-tag{font-weight:800;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--violet);flex:none;align-self:flex-start;padding-top:3px}
.mc-kati-more{border:0;background:none;color:var(--violet);font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;padding:6px 4px;margin:2px 0 0}
.mc-kati-more:hover{text-decoration:underline}
.mc-feat-tag{font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.mc-news-team{font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink);margin:12px 0 4px}
.mc-news{margin:0 0 6px;padding-left:18px;font-size:13px;line-height:1.5;color:var(--secondary)}
.mc-news li{margin:3px 0}
.mc-news b{color:var(--ink)}
.mc-note{margin-top:12px;padding:10px 12px;background:var(--paper);border-radius:var(--r-sm);border:1px dashed var(--line)}

/* ---- responsive + mobile: fixed bottom nav, vertical cards, no page h-scroll ---- */
@media (max-width:760px){
  .container{padding:18px 14px calc(84px + env(safe-area-inset-bottom))}
  .split-halves{grid-template-columns:1fr}
  .matchweek{flex-direction:column;align-items:stretch}
  .matchweek .mw-cta{margin-left:0}
  .matchweek .mw-cta .btn{width:100%}
  .topbar .wrap{min-height:52px}
  /* nav detaches to a fixed bottom bar: icon over label, 5 equal columns */
  .nav{position:fixed;left:0;right:0;bottom:0;margin:0;gap:0;background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);z-index:50;flex-wrap:nowrap;box-shadow:0 -8px 24px -18px rgba(33,19,45,.3)}
  .nav a{flex:1;flex-direction:column;gap:3px;padding:8px 2px;min-height:56px;border-bottom:0;border-radius:0;font-size:11px;font-weight:600;justify-content:center}
  .nav a .navi{width:22px;height:22px}
  .nav a.active{color:var(--violet);font-weight:800;box-shadow:inset 0 2px 0 var(--violet)}
  .nav a.active .navi{stroke:var(--violet)}
  /* lift the sticky Save bar + offline bar clear of the fixed bottom nav so they are never hidden behind it */
  .savebar{bottom:calc(56px + env(safe-area-inset-bottom))}
  .offlinebar{bottom:calc(56px + env(safe-area-inset-bottom))}
  /* comfier touch targets on the two core touch controls */
  .ranklist .arrows button{height:34px}
  .seg button{min-height:44px}
  .fx-teams .side{font-size:14px}
  table.grid.freeze th:nth-child(2),table.grid.freeze td:nth-child(2){position:static}
  /* Match Centre becomes a bottom sheet on phones */
  .mc-back{align-items:flex-end;padding:0}
  .mc-panel{width:100%;max-height:88vh;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ---- dark mode: applied via [data-theme="dark"] on <html>, set by a tiny inline head script from the
   saved preference (or the OS default when set to Auto) and flipped by the theme button. Token overrides
   only (plus the two banners that hard-code a text colour). Accents are lightened so they read on dark
   surfaces and stay legible both as accent text on dark washes and as white-on-accent button fills. ---- */
:root[data-theme="dark"]{
  --canvas:#141019; --paper:#141019; --paper-2:#241C31;
  --surface:#1C1526; --card:#1C1526;
  --ink:#F2EEF8; --ink-2:#B4ACC2; --secondary:#B4ACC2; --muted:#877E96;
  --line:#332941; --line-2:#282034;
  --violet:#8B5CF6; --purple:#8B5CF6; --violet-soft:#2A2140; --link:#A985F2;
  --pink:#EC5A90; --pink-press:#F06F9F; --pink-wash:#3A1E2C; --pink-soft:#3A1E2C;
  --cyan:#2FB6CE; --cyan-wash:#0E2E36; --cyan-soft:#0E2E36;
  --good:#3FB085; --good-wash:#123326; --positive:#3FB085;
  --bad:#F0687C; --bad-wash:#3A1D24; --negative:#F0687C;
  --warn:#E0B24A; --warn-wash:#332A0E;
  --shadow-float:0 18px 48px -20px rgba(0,0,0,.7);
}
:root[data-theme="dark"] .banner.info{color:#8AD4E6}
:root[data-theme="dark"] .banner.warn{color:#E7C87A}
:root[data-theme="dark"] .probbar .pd{background:#5B5470}  /* draw segment reads as a mid grey on dark */

/* theme toggle button (top bar, both desktop + mobile) */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--surface);color:var(--secondary);border-radius:var(--r-sm);cursor:pointer}
.themebtn:hover{background:var(--paper-2);color:var(--ink)}
.themebtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar .wrap .themebtn{margin-left:auto}
@media (min-width:761px){.topbar .wrap .themebtn{margin-left:0}}