/* Layout: matchday program. Condensed masthead, one feature panel, then the league table as the main object. */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
:root {
  --bg: #f4f6f3;
  --surface: #ffffff;
  --ink: #111814;
  --ink-2: #47514b;
  --muted: #6f7a73;
  --line: #dde3dd;
  --axis: #b9c2bb;
  --bar: #3f7a5e;
  --exeter: #c8102e;
  --rival: #2a5db0;
  --draw: #c3cac5;
  --row-hi: rgba(200, 16, 46, 0.06);
  --hi: var(--exeter);
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1310;
    --surface: #151d19;
    --ink: #edf2ee;
    --ink-2: #b3bdb6;
    --muted: #8a958e;
    --line: #26302b;
    --axis: #3a4640;
    --bar: #5fa585;
    --exeter: #e0505e;
    --rival: #5586d6;
    --draw: #4a534e;
    --row-hi: rgba(224, 80, 94, 0.10);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1310;
  --surface: #151d19;
  --ink: #edf2ee;
  --ink-2: #b3bdb6;
  --muted: #8a958e;
  --line: #26302b;
  --axis: #3a4640;
  --bar: #5fa585;
  --exeter: #e0505e;
  --rival: #5586d6;
  --draw: #4a534e;
  --row-hi: rgba(224, 80, 94, 0.10);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
}
.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: 28px 48px;
  display: grid;
  gap: 28px;
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--rival); outline-offset: 2px; border-radius: 2px; }

/* Masthead */
.mast { display: grid; gap: 6px; border-bottom: 3px solid var(--ink); padding-bottom: 14px; }
.mast .kicker {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mast h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.mast .meta { color: var(--ink-2); font-size: 16px; }
.mast .meta span + span::before { content: "·"; margin: 0 8px; color: var(--muted); }

/* Section headings */
h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.note { color: var(--ink-2); font-size: 16px; margin: 12px 0 0; max-width: 65ch; }

/* Feature panel: next game */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  display: grid;
  gap: 16px;
}
.panel .label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.fixture .side { display: grid; gap: 2px; min-width: 0; }
.fixture .side.away { text-align: right; }
.fixture .team {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 4.5vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
}
.fixture .xg { color: var(--ink-2); font-size: 16px; font-variant-numeric: tabular-nums; }
.fixture .vs {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1;
}
.fixture .vs small {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

.probbar { display: flex; gap: 2px; height: 34px; }
.probbar > div {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums;
  min-width: 44px;
}
.probbar .p-home { background: var(--hi); color: #fff; border-radius: 4px 0 0 4px; }
.probbar .p-draw { background: var(--draw); color: var(--ink); }
.probbar .p-away { background: var(--rival); color: #fff; border-radius: 0 4px 4px 0; }
.problegend { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ink-2); flex-wrap: wrap; }

.stakes { display: grid; gap: 6px; }
.stakes table { justify-self: start; width: auto; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.stakes td { padding: 3px 16px 3px 0; }
.stakes td:last-child { color: var(--ink-2); }

/* League table */
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
table.league { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.league th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 12px 12px 8px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
table.league td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.league tr:last-child td { border-bottom: 0; }
table.league .num { text-align: right; }
table.league .rank {
  font-family: var(--display); font-weight: 700; font-size: 22px; width: 44px; text-align: center;
}
table.league .team { font-weight: 600; }
table.league .team .sub { display: none; font-weight: 400; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
table.league .rating { font-family: var(--display); font-weight: 700; font-size: 22px; text-align: right; width: 64px; }
table.league tr.hi td { background: var(--row-hi); }
table.league tr.hi .rank { color: var(--hi); }
table.league tr.tie td.rank { position: relative; }

/* Diverging bar vs league average (1500) */
.barcell { width: 34%; min-width: 150px; }
.bar { position: relative; height: 16px; }
.bar::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--axis); }
.bar i { position: absolute; top: 3px; height: 10px; background: var(--bar); display: block; }
.bar i.pos { left: calc(50% + 1px); border-radius: 0 4px 4px 0; }
.bar i.neg { right: calc(50% + 1px); border-radius: 4px 0 0 4px; }
tr.hi .bar i { background: var(--hi); }
.delta { font-size: 14px; color: var(--muted); display: block; line-height: 1.1; }
.axisrow { display: flex; justify-content: space-between; gap: 6px; font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }

/* Results */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.result {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 16px; min-width: 0;
}
.result .a { text-align: right; }
.result .s { font-family: var(--display); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.result .w { font-weight: 600; }
.result .l { color: var(--ink-2); }

/* Method */
.method ul { margin: 0; padding-left: 20px; color: var(--ink-2); max-width: 70ch; display: grid; gap: 4px; }
footer { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 4px; }

/* FC Stars page: blue highlight instead of Exeter red */
.theme-stars { --hi: var(--rival); --row-hi: color-mix(in srgb, var(--rival) 9%, transparent); }
.fixture.two .vs { font-size: 24px; color: var(--muted); }
ul.notes { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 16px; max-width: 70ch; display: grid; gap: 4px; }
table.sched { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
table.sched th {
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 12px 12px 8px; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
table.sched td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.sched tr:last-child td { border-bottom: 0; }
table.sched .num { text-align: right; white-space: nowrap; }
table.sched .when { white-space: nowrap; font-weight: 600; }
.sub2 { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.chance { font-family: var(--display); font-weight: 700; font-size: 20px; }
.res { font-family: var(--display); font-weight: 700; font-size: 20px; }
.muted { color: var(--muted); font-size: 14px; white-space: normal; display: inline-block; max-width: 18ch; text-align: right; }
.days { display: grid; gap: 16px; }
.day .label { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card .label { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Home page */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 20px; text-decoration: none;
}
.card:hover { border-color: var(--ink-2); }
.card .t { font-family: var(--display); font-weight: 700; font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.card .d { color: var(--ink-2); font-size: 16px; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; gap: 24px; }
  table.league th, table.league td { padding-inline: 8px; }
  .hide-sm { display: none; }
  .barcell { min-width: 96px; width: 30%; }
  table.league .team { font-size: 15px; line-height: 1.25; }
  table.league .team .sub { display: block; }
  .axisrow { justify-content: center; }
  .result { font-size: 15px; gap: 8px; }
  table.sched td, table.sched th { padding-inline: 8px; }
  .panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }