:root {
  /* Per-league values are set from app.js; these are PL defaults. */
  --brand: #37003c;
  --pos-l: #00703a;
  --pos-d: #00ff85;
  --neg-l: #c8105a;
  --neg-d: #ff2882;

  --bg: #f6f4f7;
  --surface: #ffffff;
  --text: #1c1020;
  --muted: #5e5463;
  --line: #e7e2ea;
  --pos: var(--pos-l);
  --neg: var(--neg-l);

  --zone-ucl: #1f6feb;
  --zone-uel: #e07b00;
  --zone-uecl: #2c9f5d;
  --zone-playoff: #8a6fd1;
  --zone-releg: #d2283c;

  --font: "Inter", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  --row-hover: rgb(0 0 0 / 0.035);
  /* Points race: last-season line (swapped for another hue if it clashes with the club), and the club line's fallback */
  --chart-then: #0072b2;
  --chart-now: var(--text);

  color-scheme: light dark;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
}

@font-face {
  font-family: "VT323";
  src: url("/fonts/VT323-Regular.ttf") format("truetype");
  font-display: swap;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12000f;
    --surface: #1a001d;
    --text: #f4eef5;
    --muted: #b3a6b7;
    --line: #33203a;
    --pos: var(--pos-d);
    --neg: var(--neg-d);
    --row-hover: rgb(255 255 255 / 0.04);
    --chart-then: #56b4e9;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
.masthead {
  background: var(--header-bg, var(--brand));
  color: var(--header-fg, #fff);
  padding: 28px 0 0;
  border-bottom: 4px solid var(--stripe, var(--pos-d));
}
.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.masthead-brand { display: flex; flex-direction: column; gap: 2px; }
.masthead-tagline {
  font-size: 0.78rem;
  opacity: 0.7;
  letter-spacing: 0.02em;
}
html:is([data-theme="teletext"],[data-theme="ceefax"],[data-theme="green"]) .masthead-tagline { display: none; }
.theme-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}
.theme-picker select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 4px 6px;
}
.theme-picker option { color: #111; background: #fff; }
.theme-picker select:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.masthead h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sub {
  margin: 4px 0 18px;
  opacity: 0.8;
}
#leagues {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
#leagues a {
  color: var(--header-fg, #fff);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  font-weight: 600;
  opacity: 0.75;
  white-space: nowrap;
}
#leagues a[aria-current="page"] {
  background: var(--tab-bg, var(--pos-d));
  color: var(--tab-fg, var(--brand));
  opacity: 1;
}
#leagues a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Controls */
.controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 12px;
}
.controls-label {
  color: var(--muted);
  font-size: 0.85rem;
  margin-right: 4px;
}
.controls button {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.controls button[aria-pressed="true"] {
  background: var(--accent, var(--brand));
  border-color: var(--accent, var(--brand));
  color: var(--accent-fg, #fff);
}
.controls button:focus-visible { outline: 2px solid var(--pos); outline-offset: 2px; }

.controls { justify-content: space-between; flex-wrap: wrap; }
.controls-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xg-toggle { display: none; }
.xg-note { color: var(--muted); font-size: 0.8rem; margin: 6px 0 0; }
.xg-line { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 400; }

#status { color: var(--muted); }
#status:empty { display: none; }

/* Table */
.scroll { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
}
caption {
  caption-side: bottom;
  text-align: left;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 10px 2px;
}
th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}
th abbr { text-decoration: none; }
td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.pos { width: 2.5em; text-align: center; color: var(--muted); }
.club { text-align: left; }
.num { text-align: right; white-space: nowrap; }
.pts { font-weight: 800; }
td.pts .v { font-size: 1.05rem; }

tr.row { cursor: pointer; }
tr.row:hover > td, tr.row.open > td { background: var(--row-hover); }
tr.row > td:first-child { border-left: 3px solid transparent; }
tr.zone-ucl > td:first-child { border-left-color: var(--zone-ucl); }
tr.zone-uel > td:first-child { border-left-color: var(--zone-uel); }
tr.zone-uecl > td:first-child { border-left-color: var(--zone-uecl); }
tr.zone-playoff > td:first-child { border-left-color: var(--zone-playoff); }
tr.zone-releg > td:first-child { border-left-color: var(--zone-releg); }

.club-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.club-btn:focus-visible { outline: 2px solid var(--pos); outline-offset: 3px; border-radius: 4px; }
.club-btn img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.club-btn .tla { display: none; }
.standin {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

/* Deltas */
.stat {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
}
.d {
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 3px;
  color: var(--muted);
}
.d.pos { color: var(--pos); }
.d.neg { color: var(--neg); }

/* Expanded fixture list */
tr.detail > td { background: var(--bg); padding: 4px 8px 12px; }
.pairs { width: 100%; box-shadow: none; background: transparent; font-size: 0.85rem; }
.pairs th, .pairs td { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.pairs .then-opp { color: var(--muted); font-size: 0.75rem; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.legend li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
  background: var(--c);
}

.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 24px 0 32px;
}
.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-brand { display: flex; flex-direction: column; gap: 2px; }
.footer-logo { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.footer-strapline { font-size: 0.8rem; color: var(--muted); }
.footer-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-meta a { color: inherit; }
html[data-theme="teletext"] .site-footer { background: #0000ff; color: #ffff00; border-top: none; }
html[data-theme="teletext"] .site-footer .footer-logo,
html[data-theme="teletext"] .site-footer .footer-meta { color: #ffff00; }
html[data-theme="teletext"] .site-footer .footer-strapline { color: #ffffff; }
html[data-theme="ceefax"] .site-footer { border-top: 2px solid #0000ff; }
html[data-theme="ceefax"] .site-footer .footer-logo { color: #ffff00; }
html[data-theme="ceefax"] .site-footer .footer-meta { color: #00ffff; }

.club-link {
  display: inline-block;
  margin: 6px 0 8px;
  font-weight: 600;
  color: var(--text);
}
.muted { color: var(--muted); }
a:focus-visible { outline: 2px solid var(--pos); outline-offset: 2px; }

/* Promoted ↔ relegated mapping */
.mapping {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
}
.mapping h2 {
  margin: 0 0 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.mapping ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mapping li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mapping .team { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mapping .joiner { color: var(--muted); }
.mapping .arrow.up { color: var(--pos); }
.mapping .arrow.down { color: var(--neg); }
.mapping .warning { color: var(--muted); margin: 8px 0 0; }
.crest { object-fit: contain; flex: none; }
/* Club page */
.club-head { margin: 18px 0 16px; }
.back { color: var(--muted); font-size: 0.85rem; }
.club-id { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.club-id h2 { margin: 0; font-size: 1.4rem; }
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.tile {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-label { font-size: 0.75rem; color: var(--muted); }
.tile-value { font-size: 1.5rem; font-weight: 700; }
.tile-value .d { font-size: 0.85rem; margin-left: 6px; }
.note { color: var(--muted); font-size: 0.85rem; margin: 10px 0 0; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 10px;
  margin-bottom: 16px;
}
.card h3 { margin: 0; font-size: 1rem; }
.card-sub { margin: 2px 0 10px; color: var(--muted); font-size: 0.8rem; }
.card table { box-shadow: none; border-radius: 0; }
/* Points race chart */
.chart-legend { list-style: none; display: flex; gap: 16px; padding: 0; margin: 0 0 6px; font-size: 0.8rem; color: var(--muted); }
.chart-legend li, .tt-row { display: flex; align-items: center; gap: 6px; }
/* Legend keys mirror the lines: solid for this season, dashed for last season */
.key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--key); flex: none; }
.key.dashed { border-top-style: dashed; }
.chart { position: relative; }
.chart svg { display: block; max-width: 100%; overflow: visible; }
.chart svg:focus-visible { outline: 2px solid var(--pos); outline-offset: 4px; border-radius: 4px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.then { stroke-dasharray: 5 4; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .end-label { fill: var(--text); font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; }
.tooltip {
  position: absolute;
  pointer-events: none;
  min-width: 200px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  padding: 8px 10px;
  font-size: 0.8rem;
  display: grid;
  gap: 4px;
}
.tooltip[hidden] { display: none; }
.tt-head { color: var(--muted); }
.tt-row strong { font-size: 0.95rem; min-width: 1.6em; }
.chart-table { margin-top: 8px; font-size: 0.85rem; }
.chart-table summary { cursor: pointer; color: var(--muted); }
/* Club page: fixture grid left, chart + player panels right */
.club-right { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1100px) {
  body:has(.club-panels) .wrap { max-width: 1280px; }
  .club-panels { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 16px; align-items: start; }
  /* Right column sticks so chart stays in view as the tall grid scrolls */
  .club-right { position: sticky; top: 16px; }
}
.club-players { display: flex; flex-direction: column; gap: 16px; }
/* Fixture grid sort controls */
.grid-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.grid-sort-label { color: var(--muted); font-size: 0.8rem; }
.grid-sort-btn {
  font: inherit;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.grid-sort-btn[aria-pressed="true"] {
  background: var(--accent, var(--brand));
  border-color: var(--accent, var(--brand));
  color: var(--accent-fg, #fff);
}
.grid-sort-btn:focus-visible { outline: 2px solid var(--pos); outline-offset: 2px; }

/* Player tables */
.grid-table.players td.club, .grid-table.players th.club { text-align: left; }
.grid-table.players tbody th { font-weight: 600; }
.grid-table.players .d { margin-left: 4px; }
.grid-sort-btn.more { margin-top: 8px; }
.grid-sort-btn[hidden] { display: none; }

/* Sortable column headers */
th[data-col] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-col]:hover { background: var(--row-hover); }
th[data-col]:focus-visible { outline: 2px solid var(--pos); outline-offset: -2px; }
th[data-col]::after { content: ""; display: inline-block; width: 0.7em; }
th[data-col][aria-sort="ascending"]::after { content: " ↑"; }
th[data-col][aria-sort="descending"]::after { content: " ↓"; }

/* Fixture grid */
.grid-table { font-size: 0.85rem; }
.grid-table th, .grid-table td { padding: 6px 6px; text-align: center; white-space: nowrap; }
.grid-table th.club { text-align: left; }
.grid-table thead tr:first-child th { border-bottom: 0; color: var(--text); }
.grid-table tbody th { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--text); }
.grid-table tbody th a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.grid-table tbody th a:hover { text-decoration: underline; }
.grid-table .tla { display: none; }
/* Home/Away group divider */
.grid-table:not(.players) :is(td, th):nth-child(4) { border-left: 1px solid var(--line); }
.grid-table:not(.players) thead tr:first-child th:last-child { border-left: 1px solid var(--line); }
.grid-table tfoot th, .grid-table tfoot td { font-weight: 700; color: var(--text); border-bottom: 0; text-transform: none; letter-spacing: 0; }
.res .letter { font-weight: 700; display: inline-block; width: 1.1em; }
.res-w .letter { color: var(--pos); }
.res-l .letter { color: var(--neg); }
.res-d .letter, .res.none { color: var(--muted); }
.res.muted, .res.muted .letter { color: var(--muted); font-style: italic; }
.grid-table .then-opp { color: var(--muted); font-size: 0.72rem; }

/* Narrow screens: short names, deltas under values */
@media (max-width: 560px) {
  :root { font-size: 14px; }
  .wrap { padding: 0 8px; }
  .club-btn .name { display: none; }
  .club-btn .tla { display: inline; }
  .club-btn { gap: 6px; }
  .club-btn img { width: 16px; height: 16px; }
  .pos { width: 2em; }
  td, th { padding-left: 4px; padding-right: 4px; }
  .stat { flex-direction: column; align-items: flex-end; }
  .num .d { margin-left: 0; font-size: 0.7rem; }
  .masthead h1 { font-size: 1.5rem; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xg-toggle:not([hidden]) { display: inline-block; }
  #table:not(.show-xg) .xg { display: none; }
  .grid-table .name { display: none; }
  .grid-table .tla { display: inline; }
  .grid-table { font-size: 0.8rem; }
  .grid-table th, .grid-table td { padding: 5px 3px; }
  .card { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Retro themes ---------- */
html[data-theme="teletext"],
html[data-theme="ceefax"],
html[data-theme="green"] {
  --font: "VT323", ui-monospace, "Courier New", monospace;
  --radius: 0;
  --shadow: none;
  --row-hover: rgb(255 255 255 / 0.1);
  color-scheme: dark;
  font-size: 19px;
}
/* The pixel font has one weight; faux-bold smears it. */
html:is([data-theme="teletext"], [data-theme="ceefax"], [data-theme="green"]) :is(h1, h2, h3, th, .pts, .tile-value, .club-btn, .d, .res .letter, .end-label, strong) {
  font-weight: 400;
}
html:is([data-theme="teletext"], [data-theme="ceefax"], [data-theme="green"]) .masthead h1 { letter-spacing: 0.04em; }
html:is([data-theme="teletext"], [data-theme="ceefax"], [data-theme="green"]) :is(.controls button, .grid-sort-btn, .theme-picker select, #leagues a, .tooltip) {
  border-radius: 0;
}

/* Teletext: blue bands, yellow title, cyan headings */
html[data-theme="teletext"] {
  --bg: #000000; --surface: #000000; --text: #ffffff; --muted: #00ffff; --line: #0000ff;
  --pos: #00ff00; --neg: #ff3b3b;
  --header-bg: #0000ff; --header-fg: #ffff00; --stripe: #ffff00;
  --tab-bg: #ffff00; --tab-fg: #0000ff;
  --accent: #ffff00; --accent-fg: #000000;
  --zone-ucl: #00ffff; --zone-uel: #ffff00; --zone-uecl: #00ff00; --zone-playoff: #ff00ff; --zone-releg: #ff3b3b;
  --chart-then: #ffffff; --chart-now: #ffff00;
}
html[data-theme="teletext"] .masthead h1 { font-size: 2.6rem; line-height: 1; }
/* Ceefax: black page, white title block on blue, yellow headings, four-colour strip */
html[data-theme="ceefax"] {
  --bg: #000000; --surface: #000000; --text: #ffffff; --muted: #00ffff; --line: #333333;
  --pos: #00ff00; --neg: #ff3b3b;
  --header-bg: #000000; --header-fg: #ffffff; --title-box: #0000ff;
  --tab-bg: #00ffff; --tab-fg: #000000;
  --accent: #00ffff; --accent-fg: #000000;
  --zone-ucl: #00ffff; --zone-uel: #ffff00; --zone-uecl: #00ff00; --zone-playoff: #ff00ff; --zone-releg: #ff3b3b;
  --chart-then: #ffffff; --chart-now: #ffff00;
}
html[data-theme="ceefax"] .masthead {
  border-bottom: 6px solid;
  border-image: linear-gradient(90deg, #ff0000 0 25%, #00ff00 25% 50%, #ffff00 50% 75%, #00ffff 75%) 1;
}
html[data-theme="ceefax"] .masthead h1 {
  display: inline-block;
  background: var(--title-box);
  padding: 0 10px;
  font-size: 2.4rem;
  letter-spacing: 0.2em;
}
html[data-theme="ceefax"] th, html[data-theme="ceefax"] .card h3 { color: #ffff00; }

/* Green screen: phosphor on black, framed table, amber for worse */
html[data-theme="green"] {
  --bg: #000000; --surface: #020d04; --text: #33ff66; --muted: #22c552; --line: #0d5a22;
  --pos: #33ff66; --neg: #ffb000;
  --header-bg: #000000; --header-fg: #33ff66; --stripe: #33ff66;
  --tab-bg: #33ff66; --tab-fg: #000000;
  --accent: #33ff66; --accent-fg: #000000;
  --zone-ucl: #33ff66; --zone-uel: #ffb000; --zone-uecl: #22c552; --zone-playoff: #9dffb8; --zone-releg: #ff4b4b;
  --chart-then: #1a8f3c; --chart-now: #33ff66;
}
html[data-theme="green"] body { text-shadow: 0 0 4px rgb(51 255 102 / 0.45); }
html[data-theme="green"] #table,
html[data-theme="green"] .card,
html[data-theme="green"] .tile,
html[data-theme="green"] .mapping { outline: 1px solid #33ff66; }
html[data-theme="green"] .masthead h1::before { content: "> "; }