/* ─────────────────────────────────────────────────────────────────────────
   Matchday Price

   Committed dark theme, single palette. No media query for light: the site
   is one visual world and every colour is painted explicitly so nothing
   borrows a host background.

   TYPE. Two families, both from the system stack, so the site makes no
   external request and cannot silently fall back to a face it did not
   choose. The rule that matters: the mono family is for DATA ONLY. Prices,
   probabilities, counts, timestamps, samples. Never for labels, never for
   headings, never for prose. A number in mono and a word in mono look
   equally authoritative, and only one of them has earned it.

   COLOUR. Teal is the accent and does brand duty. Amber and coral are held
   back for meaning: amber means a figure wants your attention (stale price,
   thin market, provisional kickoff, post-kickoff publish), coral means an
   outcome went against us (a lost pick, a negative return). Coral does NOT
   mean absent: missing data is --absent, a neutral, because a gap is not a
   failure and colouring it like one both misread the board and cost the
   palette its whole warm end. The interface never uses the brand colour to
   warn.
   Every text colour here clears WCAG AA against the surface behind it,
   including the muted tier, because the muted tier is where the sample
   sizes and the caveats live and those must not be the hardest thing on the
   page to read.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ink: #0A0C10;
  --raised: #14171D;
  --raised-2: #191D24;
  --line: #262B34;
  --line-2: #333A45;

  --fg: #F2F3F5;
  --fg-2: #9BA2AC;
  --fg-muted: #808892;

  --teal: #3FC9AE;
  --amber: #F0A63C;
  --coral: #E1615C;
  --peri: #7C9CE0;

  /* ABSENCE, shown as absence. "No price held" used to be coral, which spent
     the whole warm end of the palette on a non-event: a fixture nobody has
     quoted yet is not an error and not a warning, it is a gap, and a gap
     reads better as missing colour than as a red flag. It also made the board
     look like it was reporting failures when it was reporting coverage.
     Coral keeps its real job elsewhere, negative P&L in the ledger, and no
     longer appears on the board at all. */
  --absent: #5A6270;

  /* MARKET COLOURS: home / draw / away, wherever a 1X2 market is drawn.

     ONE HUE AT TWO WEIGHTS, PLUS A NEUTRAL. This is a constraint, not a
     preference. The home and away roles are reused verbatim by the
     over/under market (see prob_rows() in _fixtures.html: "over" renders
     with the home role, "under" with the away role), so any palette that
     makes home and away an opposition of KIND also claims that Over 2.5 and
     Under 2.5 are opposites of kind. They are not; they are two sides of one
     total. A warm/cool split was tried and failed exactly here, and it also
     fought the teal/rose for/against colouring in the club record two
     inches below it.

     So: the record hue at full strength, a neutral for the draw, and the
     record hue at reduced weight. Teal doubling as "captured today" is a
     known cost, accepted because the alternative was worse; the chip carries
     the word "Captured today" and the bar now sits directly above three
     labelled prices, so neither depends on colour to be read.

     Weights are the wide-spread pair, chosen 2026-08-20 for separation
     between the three bar segments at the 10px height they are drawn at.
     Away is one step lighter than the value that pairing was picked at:
     these tokens colour the 10px selection labels as well as the bars, and
     text needs 4.5:1 where a bar needs 3:1. #268575 gave 4.01:1 on --raised.
     All three clear AA there now: 11.32 / 6.93 / 4.55. */
  --mkt-home: #5BE3C6;
  --mkt-draw: #9AA39F;
  --mkt-away: #298F7E;
  --slate: #4A5462;

  /* Rose. Scoped strictly to for/against pairs that are genuine
     favourable/unfavourable opposites of a teal figure (conceded goals,
     conceded corners, cards shown, on club record pages) - a second hue
     within "the record" domain, not a general-purpose second accent. Not
     the same role as --coral, which flags a negative outcome, nor --absent,
     which marks a gap in the data.
     Value carried over as-is from the 2026-08-18 design pass's real-device
     contrast testing - not re-tuned to this file's teal/amber, so re-check
     on a phone if it reads as mismatched in saturation. */
  --rose: #F28BA0;

  /* Violet. Scoped strictly to the Fair Price / posted-combinations arm -
     "the test", as distinct from --teal's "the record". If it starts
     showing up outside that arm it stops meaning anything. Same
     carried-over-untested caveat as --rose above. */
  --violet: #B39CFB;
  --violet-dim: rgba(179, 156, 251, 0.12);

  /* Semantic aliases kept so older templates keep meaning what they meant. */
  --green: var(--teal);
  --red: var(--coral);
  --for: var(--teal);
  --against: var(--rose);
  --bg: var(--ink);
  --bg-alt: var(--raised);
  --border: var(--line);
  --link: var(--teal);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --max-width: 1180px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:visited { color: var(--teal); }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.site-header .brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--fg);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The one piece of ornament on the page, and it earns its place by marking
   the brand rather than decorating a section. */
.site-header .brand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(63, 201, 174, 0.16);
  flex: 0 0 auto;
}

.site-header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-header nav a { text-decoration: none; color: var(--fg-2); font-size: 0.93rem; }
.site-header nav a:hover { color: var(--fg); text-decoration: none; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.75rem 1rem 3rem;
}

h1 { font-size: 1.9rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.35rem; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 2.25rem 0 0.75rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }

.subtitle { color: var(--fg-2); margin: 0 0 1.5rem; max-width: 66ch; }

.eyebrow {
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 0.6rem;
}

/* ── Stat tiles ──────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.stat-tile { background: var(--raised); padding: 0.95rem 1.1rem 0.9rem; }

.stat-tile .label {
  font-size: 0.69rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.3rem;
}

.stat-tile .value {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stat-tile .value.pos { color: var(--teal); }
.stat-tile .value.neg { color: var(--coral); }
.stat-tile .value.warn { color: var(--amber); }

.stat-tile .n { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.2rem; }

.meter { height: 3px; background: var(--line); border-radius: 2px; margin-top: 0.65rem; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--teal); }
.meter i.warn { background: var(--amber); }
.meter i.bad { background: var(--coral); }

.empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--fg-muted);
  background: var(--raised);
  border: 1px dashed var(--line-2);
  border-radius: 6px;
}
.empty-state p { margin: 0 0 0.6rem; }
.empty-state p:last-child { margin-bottom: 0; }

/* ── Tables ──────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }

caption { text-align: left; color: var(--fg-muted); margin-bottom: 0.5rem; font-size: 0.85rem; }

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--ink);
  border-bottom: 1px solid var(--line-2);
  color: var(--fg-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

thead th[data-sort]::after { content: " \21C5"; color: var(--fg-muted); font-size: 0.75em; }

tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.table-scroll { overflow-x: auto; margin-bottom: 1rem; }

.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
th.num { font-family: var(--sans); }

.total-row td { border-top: 1px solid var(--line-2); }

/* Grouped column headers on the streak tables. */
thead tr:first-child th[colspan] { text-align: center; border-bottom: 1px solid var(--line); }

/* ── Pills and result states ─────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pill-won { background: rgba(63, 201, 174, 0.1); color: var(--teal); border-color: rgba(63, 201, 174, 0.35); }
.pill-lost { background: rgba(225, 97, 92, 0.1); color: var(--coral); border-color: rgba(225, 97, 92, 0.35); }
.pill-pending { background: var(--raised-2); color: var(--fg-muted); border-color: var(--line-2); }

.pnl-pos { color: var(--teal); font-weight: 600; }
.pnl-neg { color: var(--coral); font-weight: 600; }

.result-won { color: var(--teal); }
.result-lost { color: var(--coral); }
.result-void,
.result-pending { color: var(--fg-muted); }

.annotation-postkickoff {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: rgba(240, 166, 60, 0.12);
  border: 1px solid rgba(240, 166, 60, 0.35);
  color: var(--amber);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Filters and the no-JS path ──────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.filter-bar label { font-size: 0.85rem; color: var(--fg-muted); }
.filter-bar select, .filter-bar input {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--raised);
  color: var(--fg);
}

.no-js-note { display: none; }
.no-js .no-js-note { display: block; font-size: 0.8rem; color: var(--fg-muted); margin-bottom: 0.75rem; }
.no-js .filter-bar { display: none; }

.insufficient { color: var(--fg-muted); font-style: italic; }

/* ── Prose ───────────────────────────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose h1:first-child { margin-top: 0; }
.prose h2 { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.prose blockquote {
  margin: 0 0 1.25rem;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--amber);
  background: var(--raised);
  color: var(--fg-2);
}
.prose code {
  background: var(--raised-2);
  border: 1px solid var(--line);
  padding: 0.08rem 0.3rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.86em;
}

.note { max-width: 70ch; color: var(--fg-2); font-size: 0.87rem; margin: 0 0 1rem; }
.note strong { color: var(--fg); }

/* Sample sizes sit beside every rate. Muted and smaller so they inform
   without crowding the figure, but never hidden and never below AA: a rate
   without its n is not a claim a reader can weigh. */
.sample { color: var(--fg-muted); font-size: 0.85em; white-space: nowrap; font-family: var(--mono); }

.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.provenance {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.provenance dl { margin: 0; }
.provenance dt { font-weight: 600; margin-top: 0.85rem; font-size: 0.87rem; }
.provenance dt:first-child { margin-top: 0; }
.provenance dd { margin: 0.2rem 0 0; color: var(--fg-2); font-size: 0.87rem; max-width: 75ch; }
.provenance .note { margin: 1rem 0 0; }
.provenance code {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 0.08rem 0.3rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.86em;
}

/* Something every figure on the page depends on that a reader would not
   otherwise see. Marked visually because burying it would be the dishonest
   choice. */
.caveat {
  border-left: 3px solid var(--amber);
  background: var(--raised);
  padding: 0.85rem 1.25rem;
  border-radius: 0 6px 6px 0;
  margin: 1.5rem 0;
  max-width: 78ch;
}
.caveat p { font-size: 0.87rem; margin: 0 0 0.75rem; color: var(--fg-2); }
.caveat p:last-child { margin-bottom: 0; }
.caveat strong { color: var(--fg); }
/* Sub-headings inside a caveat: enough to separate two distinct problems,
   not enough to compete with the section heading above the block. */
.caveat h3 { font-size: 0.87rem; margin: 1.25rem 0 0.5rem; color: var(--fg); }
.caveat > h3:first-child { margin-top: 0; }
.caveat blockquote {
  margin: 0 0 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line-2);
  color: var(--fg-muted);
  font-size: 0.85rem;
}

/* ── Arm landing cards ───────────────────────────────────────────────── */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.card {
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
}
.card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 0 0 0.6rem; font-size: 0.87rem; color: var(--fg-2); }
.card p:last-child { margin-bottom: 0; }
.card strong { color: var(--fg); }
.card .note { margin-top: 0.6rem; }

/* ── Posted combinations ─────────────────────────────────────────────── */
.combo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.5rem 0 0.9rem;
  font-size: 0.83rem;
  color: var(--fg-muted);
}
.combo-meta strong { color: var(--fg); font-family: var(--mono); font-weight: 500; }
.combo-meta .pos strong { color: var(--teal); }
.combo-meta .neg strong { color: var(--coral); }

/* ── Signup ──────────────────────────────────────────────────────────── */
.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.signup-form input[type="email"] {
  flex: 1 1 220px;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--ink);
  color: var(--fg);
}
.signup-form input[type="email"]::placeholder { color: var(--fg-muted); }
.signup-form button {
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--ink);
  border-radius: 4px;
  cursor: pointer;
}
.signup-form button:hover { background: #55d6bd; border-color: #55d6bd; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 0.8rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.footer-nav a { color: var(--fg-2); }
.footer-nav a:hover { color: var(--teal); }

.site-footer p { margin: 0.3rem 0; }
.site-footer a { color: var(--fg-2); }
.responsible-gambling { max-width: 78ch; }

/* ═════════════════════════════════════════════════════════════════════
   Fixtures board
   Fixtures are rows rather than table cells because each one carries two
   markets, a book count per market, a capture time and two clubs' records,
   and a table wide enough for that scrolls off the side of a phone. Each is
   a native <details>, so expanding costs no JavaScript and works from the
   keyboard as shipped.
   ═════════════════════════════════════════════════════════════════════ */

.band-note { margin: 1rem 0 0; color: var(--fg-muted); font-size: 0.78rem; max-width: 84ch; line-height: 1.6; }
.lede { margin: 0.9rem 0 0; color: var(--fg-2); max-width: 66ch; }
/* Runs to the container edge, aligning with the h1 above and the full-width
   blocks below it, rather than sitting in a narrow measure between them. */
.lede.wide { max-width: none; }
.lede + .lede { margin-top: 0.7rem; color: var(--fg-muted); font-size: 0.92em; }
.hl { color: var(--teal); }

/* ── Filter strips ───────────────────────────────────────────────────── */
.filterbar {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.9rem;
  padding: 0.6rem 0 0.7rem;
}
.filterrow { display: flex; align-items: center; gap: 0.75rem; }
.filterrow + .filterrow { margin-top: 0.5rem; }
.filterrow .rowkey {
  flex: 0 0 auto;
  width: 46px;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}

/* .tabstrip carries the shared styling; .daystrip and .leaguestrip are the
   two instances. They must NOT share a selector: one strip's handler binding
   to the other strip's buttons is a real bug this page has already had. */
.tabstrip { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; min-width: 0; flex: 1; }

.tab {
  flex: 0 0 auto;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.76rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
  line-height: 1.3;
}
.tab:hover { border-color: var(--line-2); color: var(--fg); }
.tab .n { font-family: var(--mono); font-size: 0.69rem; color: var(--fg-muted); }
.tab[aria-selected="true"] {
  background: rgba(63, 201, 174, 0.1);
  border-color: rgba(63, 201, 174, 0.45);
  color: var(--fg);
  font-weight: 600;
}
.tab[aria-selected="true"] .n { color: var(--teal); }
.leaguestrip .tab[aria-selected="true"] { background: rgba(124, 156, 224, 0.12); border-color: rgba(124, 156, 224, 0.45); }
.leaguestrip .tab[aria-selected="true"] .n { color: var(--peri); }

.filtersum { font-size: 0.76rem; color: var(--fg-muted); margin: 0.6rem 0 0; }
.filtersum b { font-family: var(--mono); color: var(--fg-2); font-weight: 500; }
.filtersum button {
  background: none;
  border: 0;
  color: var(--teal);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.noresult {
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  padding: 1.6rem 1.1rem;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.85rem;
}

/* ── Legend ──────────────────────────────────────────────────────────── */
/* Two named groups, not one strip. The swatches answer two different
   questions - which selection, and how old the price is - and running them
   together was part of why a coloured bar segment read as a status. */
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.72rem; color: var(--fg-2); padding: 0 2px 0.85rem; }
.legend span { display: flex; align-items: center; gap: 0.35rem; }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.legend-group b {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); padding-right: 0.5rem; border-right: 1px solid var(--line-2);
}
.legend .h i { background: var(--mkt-home); }
.legend .d i { background: var(--mkt-draw); }
.legend .a i { background: var(--mkt-away); }
.legend .st i { width: 3px; height: 13px; border-radius: 1px; }
.legend .st.f i { background: var(--teal); }
.legend .st.s i { background: var(--amber); }
.legend .st.n i { background: var(--absent); }

/* ── Day blocks ──────────────────────────────────────────────────────── */
.dayhead { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; }
.dayhead h3 { margin: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-2); }
.dayhead .line { flex: 1; height: 1px; background: var(--line); }
.dayhead .count { font-family: var(--mono); font-size: 0.69rem; color: var(--fg-muted); }
.day + .day { margin-top: 1.75rem; }

/* ── Fixture rows ────────────────────────────────────────────────────── */
.fx {
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  border-radius: 6px;
  margin-bottom: 0.4rem;
}
.fx.fresh { border-left-color: var(--teal); }
.fx.stale { border-left-color: var(--amber); }
.fx.none { border-left-color: var(--absent); background: transparent; }
.fx[open] { background: var(--raised-2); border-color: var(--line-2); }

/* Two stacks. The match on the left (when, who, which competition), the
   market on the right (the split, then the prices it splits). The fixture's
   own identity no longer runs across three columns with other things in
   between, and the bar sits directly above the numbers it describes. */
.fxrow {
  display: grid;
  align-items: center;
  gap: 0 1.5rem;
  grid-template-columns: minmax(0, 1fr) 320px 92px 14px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.fxrow::-webkit-details-marker { display: none; }
.fxrow:hover { background: rgba(255, 255, 255, 0.02); }
.fx.flat .fxrow { cursor: default; }

.fxmatch { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.fxrow .ko { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-2); }
.fxrow .teams { font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxrow .teams i { color: var(--fg-muted); font-weight: 400; font-style: normal; padding: 0 0.3rem; }
.fxrow .comp { font-size: 0.68rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The bar and the prices are one object, stacked, never separated. */
.fxmarket { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.fxrow .caret { width: 16px; height: 16px; position: relative; justify-self: end; }
.fxrow .caret::after {
  content: "";
  position: absolute;
  left: 3px; top: 4px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--fg-muted);
  border-bottom: 1.5px solid var(--fg-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.fx[open] .fxrow .caret::after { transform: rotate(225deg) translate(-3px, -3px); }

.minibar { display: flex; height: 10px; border-radius: 3px; overflow: hidden; gap: 2px; }
.minibar i { display: block; }
.minibar .h { background: var(--mkt-home); }
.minibar .d { background: var(--mkt-draw); }
.minibar .a { background: var(--mkt-away); }
.minibar.empty { background: var(--line); border-radius: 3px; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; text-align: right; }
.trio .cell b { display: block; font-family: var(--mono); font-size: 0.87rem; font-weight: 500; letter-spacing: -0.01em; }
.trio .cell u { display: block; font-family: var(--mono); font-size: 0.65rem; color: var(--fg-muted); text-decoration: none; margin-top: 2px; }
/* The selection name, carrying the same colour its segment has in the bar
   to its left, so the two readings of the same market agree by eye. */
.trio .cell u i { font-style: normal; font-weight: 600; margin-right: 0.25rem; }
.trio .cell u i.home { color: var(--mkt-home); }
.trio .cell u i.draw { color: var(--mkt-draw); }
.trio .cell u i.away { color: var(--mkt-away); }
.trio .why { font-size: 0.72rem; color: var(--fg-muted); font-style: italic; text-align: left; grid-column: 1 / -1; }

.chip { font-size: 0.69rem; border-radius: 4px; padding: 0.1rem 0.45rem; border: 1px solid var(--line); color: var(--fg-muted); text-align: center; white-space: nowrap; }
.chip.fresh { color: var(--teal); border-color: rgba(63, 201, 174, 0.35); background: rgba(63, 201, 174, 0.08); }
.chip.stale { color: var(--amber); border-color: rgba(240, 166, 60, 0.35); background: rgba(240, 166, 60, 0.08); }
.chip.none { color: var(--fg-muted); border-color: var(--absent); background: rgba(255, 255, 255, 0.03); }

/* ── Expanded card ───────────────────────────────────────────────────── */
.fxbody { padding: 0 0.8rem 0.9rem; border-top: 1px solid var(--line); }

/* Single capture line, replacing the old tag-chip row. Thin-market caution
   now lives solely in the note-box per market, so it isn't said twice. */
.capture-line { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); padding-top: 0.75rem; margin: 0; }
.capture-line .engine { color: var(--peri); }

/* Thin-market caution, upgraded from a footnote to a proper note box - the
   depth line still carries the exact book count, this is the "too few to
   call a price" explanation sitting next to it. */
.note-box {
  font-size: 0.76rem;
  color: var(--fg-2);
  line-height: 1.5;
  background: var(--raised-2);
  border-left: 3px solid var(--amber);
  border-radius: 0 4px 4px 0;
  padding: 0.6rem 0.75rem;
  margin-top: 0.5rem;
}

/* Two markets, one rule between them, matching the hairlines used everywhere
   else in the card. Column gap is zero because the padding either side of the
   divider is what does the spacing; otherwise the line sits against one
   column instead of between the two. */
.markets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 0; margin-top: 1rem; }
.markets .market:first-child { padding-right: 1.6rem; }
.markets .market + .market { border-left: 1px solid var(--line); padding-left: 1.6rem; }
/* Same contrast fix as the club block below: these name the markets, and a
   0.63rem muted uppercase label was losing to the numbers underneath it. */
.market h4 { margin: 0 0 0.55rem; font-size: 0.95rem; letter-spacing: -0.01em; text-transform: none; color: var(--fg); font-weight: 600; }

/* Match result / goals, one bar per selection. Away reuses home's own
   colour at reduced opacity rather than a third hue - same trick the club
   pages use for home/away - and over/under borrow the same two roles since
   neither is a for/against pair, just two comparable options. */
.prob-row { display: grid; grid-template-columns: 84px 1fr 44px 48px 84px; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.prob-row .sel { font-size: 0.82rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prob-track { height: 7px; background: var(--raised-2); border-radius: 4px; overflow: hidden; }
.prob-fill { height: 100%; }
.prob-fill.home { background: var(--mkt-home); }
.prob-fill.draw { background: var(--mkt-draw); }
.prob-fill.away { background: var(--mkt-away); }
.prob-row .pct { font-family: var(--mono); font-size: 0.78rem; text-align: right; }
.prob-row .price { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; text-align: right; }
.prob-row .book { font-size: 0.68rem; color: var(--fg-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* One tone for the whole line. The count was brighter than the words around
   it, which made a plain statement of fact look like two things. Mono on the
   number still separates it as data; colour is reserved for .thin, where it
   means something. */
.depth { margin: 0.5rem 0 0; font-size: 0.76rem; color: var(--fg-2); }
.depth b { font-family: var(--mono); font-weight: 500; color: inherit; }
.depth.thin, .depth.thin b { color: var(--amber); }
.absent { font-size: 0.76rem; color: var(--fg-muted); font-style: italic; margin: 0; }

/* ── Club records ────────────────────────────────────────────────────── */
/* CONTRAST. This block is the densest thing on the site and its labels were
   the faintest: a 0.63rem uppercase heading and mono club names, all at
   --fg-muted, against a raised panel. The numbers were legible and the words
   telling you what they were were not. The heading is now a heading, the club
   names sit at full --fg, and the row labels moved up a tier. Nothing here
   changed size on the numbers; only the words got their weight back. */
.clubs { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line-2); }
.clubs-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.7rem; }
.clubs-head h4 { margin: 0; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--fg); font-weight: 600; text-transform: none; }
.clubs-head .sample { margin-left: auto; font-size: 0.72rem; color: var(--fg-2); }

.cr-header { display: flex; align-items: flex-end; gap: 0.6rem; margin-bottom: 0.5rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line-2); }
.cr-header .stat-lab-spacer { flex: 0 0 40%; }
.cr-header .club { flex: 1; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--fg); line-height: 1.3; }
.cr-header .venue { display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 400; color: var(--fg-2); margin-top: 1px; }
.cr-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(38, 43, 52, 0.5); }
.cr-row:last-of-type { border-bottom: none; }
.cr-row .stat-lab { flex: 0 0 40%; font-size: 0.8rem; color: var(--fg); }
/* No `color` here on purpose. This is a layout rule, and it sits at
   specificity (0,2,0) where .for-val / .against-val sit at (0,1,0) - setting
   a neutral colour here silently beat the semantic classes and the
   scored/conceded split never rendered inside a fixture card, despite the
   markup carrying it correctly. Colour comes from .for-val/.against-val/.gap
   or is inherited. Same rule applies to .behind-row .val further down. */
.cr-row .stat-val { flex: 1; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.82rem; text-align: center; }
/* For/against: colour by what the stat IS (scored/won = for, conceded/cards
   = against), not by which side currently has the bigger number. Scoped to
   genuine favourable/unfavourable pairs only - the neutral rate rows
   (over 2.5, BTTS, won %) get neither class. Not scoped to .cr-row: reused
   wherever a scored-conceded pair shows up (club index mini-stats, fixture
   club records). .gap means "no record held", nothing to do with for/against. */
.for-val { color: var(--for); }
.against-val { color: var(--against); }
.gap { color: var(--fg-muted); }

.season-note {
  font-size: 0.72rem;
  color: var(--peri);
  margin: 0 0 0.55rem;
  background: rgba(124, 156, 224, 0.07);
  border-left: 2px solid rgba(124, 156, 224, 0.4);
  padding: 0.3rem 0.6rem;
  border-radius: 0 3px 3px 0;
}

.missing { font-size: 0.76rem; color: var(--fg-muted); margin: 0.55rem 0 0; line-height: 1.5; }
.missing b { color: var(--amber); font-weight: 600; }
.missing + .missing { margin-top: 0.3rem; }

/* League context. Corners and cards have no market anywhere in the feed, so
   they sit here as history rather than beside a price. */
.league-avg {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dotted var(--line-2);
  font-size: 0.76rem;
  color: var(--fg-muted);
  line-height: 1.6;
}
.league-avg b { color: var(--fg-2); font-weight: 500; }

.provisional {
  color: var(--amber);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  cursor: help;
  margin-left: 0.35rem;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
/* Only this band is genuinely tight: below 1080 the rail (where there is
   one) drops beneath and the board gets its width back. */
@media (max-width: 1240px) and (min-width: 1041px) {
  .fxrow { grid-template-columns: minmax(0, 1fr) 280px 84px 14px; gap: 0 1.1rem; }
}

@media (max-width: 760px) {
  main { padding: 1rem 0.75rem 2rem; }
  .site-header { padding: 0.85rem 0.75rem; }
  h1 { font-size: 1.5rem; }
  table { font-size: 0.8rem; }
  th, td { padding: 0.4rem 0.45rem; }
  .stat-grid { grid-template-columns: 1fr; }
  /* One column: the divider becomes a rule above the second market rather
     than a line down the side of a full-width block. */
  .markets { grid-template-columns: 1fr; }
  .markets .market:first-child { padding-right: 0; }
  .markets .market + .market {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 0.85rem;
  }
  .prob-row { grid-template-columns: 62px 1fr 38px 42px; }
  .prob-row .book { display: none; }
  .cr-header .stat-lab-spacer, .cr-row .stat-lab { flex-basis: 34%; }
  /* The market drops beneath the match rather than beside it. Explicit
     placement because the caret is last in the DOM and auto-placement would
     put the market stack in the caret's 14px column. */
  .fxrow { grid-template-columns: minmax(0, 1fr) 14px; row-gap: 0.7rem; padding: 0.7rem; }
  .fxrow .fxmatch { grid-column: 1; grid-row: 1; }
  .fxrow .caret { grid-column: 2; grid-row: 1; align-self: start; }
  .fxrow .fxmarket { grid-column: 1 / -1; }
  .fxrow .chip { grid-column: 1 / -1; justify-self: start; }
}

/* ═════════════════════════════════════════════════════════════════════
   League reference cards
   One <details> per competition: current-season bars in the summary,
   season history as a ranked heatmap inside. No colour-only signal - every
   heatmap cell keeps its number, the shading is a support not the claim.
   ═════════════════════════════════════════════════════════════════════ */
.refcards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1rem 0 1.75rem; }
@media (min-width: 640px) { .refcards { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.refcard { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; }
.refcard[open] { border-color: var(--line-2); grid-column: 1 / -1; }
.refcard summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; }
.refcard summary::-webkit-details-marker { display: none; }

.refcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.refcard-head .league-name-row { display: inline-flex; align-items: center; gap: 0.5rem; }
.refcard-head .league-name { font-weight: 600; font-size: 1.05rem; color: var(--fg); }
.flag-icon { width: 1.3rem; height: auto; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.refcard-head .caret { width: 14px; height: 14px; position: relative; flex: 0 0 auto; }
.refcard-head .caret::after {
  content: ""; position: absolute; left: 2px; top: 3px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.refcard[open] .refcard-head .caret::after { transform: rotate(225deg) translate(-2px, -2px); }
.refcard-season { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); margin: 0.15rem 0 0.75rem; }

.refcard-bar-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.28rem 0; }
.refcard-bar-row .lab { flex: 0 0 64px; font-size: 0.78rem; color: var(--fg-2); }
.refcard-bar-track { flex: 1 1 auto; min-width: 30px; height: 6px; background: var(--raised-2); border-radius: 3px; overflow: hidden; }
.refcard-bar-fill { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.refcard-bar-row .val { flex: 0 0 46px; text-align: right; font-family: var(--mono); font-size: 0.78rem; color: var(--fg); }

.refcard-hint { font-family: var(--mono); font-size: 0.68rem; color: var(--fg-muted); margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }

.refcard-expanded { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line); margin-top: 0.2rem; }
.refcard-expanded-note { font-size: 0.78rem; color: var(--fg-muted); line-height: 1.5; margin: 0.9rem 0 0.7rem; }
.refcard-legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; font-size: 0.72rem; color: var(--fg-muted); margin-bottom: 0.7rem; }
.refcard-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }

.refcard-hist { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.refcard-hist th { font-family: var(--mono); font-weight: 500; font-size: 0.66rem; color: var(--fg-muted); text-align: center; padding: 0 3px 6px; }
.refcard-hist th:first-child { text-align: left; }
.refcard-hist td.lab { font-size: 0.78rem; color: var(--fg-2); padding: 5px 6px 5px 0; white-space: nowrap; }
.refcard-hist td.cell { text-align: center; font-family: var(--mono); font-size: 0.78rem; padding: 5px 3px; border-radius: 4px; }
.refcard-hist td.cell.rank1 { background: rgba(63, 201, 174, 0.42); color: var(--fg); font-weight: 600; }
.refcard-hist td.cell.rank2 { background: rgba(63, 201, 174, 0.22); color: var(--fg-2); }
.refcard-hist td.cell.rank3 { background: rgba(63, 201, 174, 0.09); color: var(--fg-muted); }
.refcard-hist td.cell.rank4 { background: rgba(63, 201, 174, 0.02); color: var(--fg-muted); }

.refcard-current { margin-top: 1rem; padding: 0.7rem 0.8rem; border-radius: 6px; background: rgba(240, 166, 60, 0.07); border-left: 3px solid var(--amber); }
.refcard-current-title { font-family: var(--mono); font-size: 0.72rem; color: var(--fg); font-weight: 500; margin-bottom: 0.25rem; }
.refcard-current-note { font-size: 0.75rem; color: var(--fg-2); line-height: 1.5; }

/* ═════════════════════════════════════════════════════════════════════
   Club index: league accordions
   ═════════════════════════════════════════════════════════════════════ */
.league-acc { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.6rem; overflow: hidden; }
.league-acc[open] { border-color: var(--line-2); }
/* Child combinator for the same reason as .combo-month below: a summary rule
   that sets `display` and reaches descendants will re-lay-out any nested
   accordion's summary. Nothing nests here today. The rule is that a layout
   declaration names the element it means, so that stays true by construction
   rather than by nobody having tried it yet. */
.league-acc > summary { list-style: none; cursor: pointer; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.league-acc > summary::-webkit-details-marker { display: none; }
.league-acc .league-name-row { display: inline-flex; align-items: center; gap: 0.5rem; }
.league-acc .league-name { font-weight: 600; font-size: 1rem; color: var(--fg); }
.league-acc .league-count { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); }
.league-acc .summary-right { display: flex; align-items: center; gap: 0.6rem; }
.league-acc .chevron { width: 14px; height: 14px; position: relative; flex: 0 0 auto; }
.league-acc .chevron::after {
  content: ""; position: absolute; left: 2px; top: 3px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.league-acc[open] .chevron::after { transform: rotate(225deg) translate(-2px, -2px); }

.club-list { border-top: 1px solid var(--line); }
.club-row { display: block; text-decoration: none; color: var(--fg); padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.club-row:last-child { border-bottom: none; }
.club-row:hover { background: rgba(255, 255, 255, 0.02); text-decoration: none; }

.club-name-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.club-name { font-weight: 600; font-size: 0.92rem; }
.club-arrow { color: var(--fg-muted); font-size: 0.78rem; }

.stat-strip { display: flex; }
.mini-stat { flex: 1; text-align: left; padding-right: 0.5rem; border-right: 1px solid var(--line); }
.mini-stat:last-child { border-right: none; padding-right: 0; }
.mini-stat + .mini-stat { padding-left: 0.6rem; }
.mini-val { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--fg); }
.mini-lab { font-size: 0.62rem; color: var(--fg-muted); line-height: 1.3; margin-top: 0.15rem; }

.club-row.no-data .no-data-note { font-size: 0.78rem; color: var(--amber); }
.archive-note { font-size: 0.76rem; color: var(--fg-muted); line-height: 1.5; padding: 0 1rem 0.85rem; margin-top: -0.2rem; }

/* ═════════════════════════════════════════════════════════════════════
   Club page: diverging home/away bars
   Home extends left, away extends right, from a shared centre line - two
   sides of one contest, independent of which one is favourable. Colour
   (teal/rose/slate) is the for/against/neutral role; opacity is the only
   thing that marks home apart from away.
   ═════════════════════════════════════════════════════════════════════ */
.divlegend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.78rem; color: var(--fg-2); margin-bottom: 1.25rem; }
.divlegend .sw { display: inline-block; width: 13px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.divcard-title { font-size: 1rem; font-weight: 600; margin: 1.6rem 0 0.6rem; color: var(--fg); }
.divcard-title:first-of-type { margin-top: 0.5rem; }
.divcard { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1.1rem; }

.divgroup { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.divgroup:last-child { border-bottom: none; }
.divlabel { font-size: 0.82rem; color: var(--fg); font-weight: 500; margin-bottom: 0.45rem; text-align: center; }

.divrow { display: flex; align-items: center; gap: 0.6rem; }
.divval { flex: 0 0 46px; font-family: var(--mono); font-size: 0.78rem; }
.divval.l { text-align: right; }
.divval.r { text-align: left; }

.divtrack { flex: 1; display: flex; height: 8px; position: relative; }
.divtrack::before {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px;
  background: var(--line-2); transform: translateX(-0.5px);
}
.divhalf { flex: 1; display: flex; align-items: center; }
.divhalf.l { justify-content: flex-end; }
.divhalf.r { justify-content: flex-start; }
.divfill { height: 100%; border-radius: 2px; }
.divfill.l { border-radius: 2px 0 0 2px; }
.divfill.r { border-radius: 0 2px 2px 0; opacity: 0.55; }
.divfill.role-for { background: var(--for); }
.divfill.role-against { background: var(--against); }
.divfill.role-neutral { background: var(--slate); }

.divtags { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.65rem; color: var(--fg-muted); margin-top: 0.3rem; padding: 0 52px; }

/* ═════════════════════════════════════════════════════════════════════
   Posted combinations: month/day accordions of a card grid
   ═════════════════════════════════════════════════════════════════════ */
.combo-month { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.6rem; overflow: hidden; }
.combo-month[open] { border-color: var(--line-2); }
/* CHILD COMBINATOR, NOT DESCENDANT, AND IT IS LOAD-BEARING.
   The cards are <details> too and they nest inside this one, so `.combo-month
   summary` matched every card's summary as well as the month's own. It equals
   `.combocard summary` on specificity, and that rule sets no `display`, so it
   could not win the property back: every card laid its four blocks out as a
   flex ROW. Meta, match name, marginals and kickoff ended up in four squeezed
   columns with the bars collapsed to nothing. Shipped that way on 2026-08-20
   and was not caught until someone looked at the page, because the tests
   counted cards and checked arithmetic and never asked what it looked like. */
.combo-month > summary { list-style: none; cursor: pointer; padding: 0.8rem 1rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.95rem; }
.combo-month > summary::-webkit-details-marker { display: none; }
.combo-month .count { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); font-weight: 400; }
.combo-month-body { padding: 0.2rem 1rem 1rem; border-top: 1px solid var(--line); }

.combo-dayhead { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.65rem; }
.combo-dayhead h4 { margin: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); }
.combo-dayhead .line { flex: 1; height: 1px; background: var(--line); }
.combo-dayhead .count { font-family: var(--mono); font-size: 0.68rem; color: var(--fg-muted); }

/* Three across only once three will actually fit. A card carries a 4.6rem
   label column, a bar and a 2.4rem figure, inside the month accordion's own
   padding; at 720px in three columns each one is about 230px wide and the bar
   is squeezed to nothing between two fixed columns, which is the same
   illegibility as the flex bug above arriving by arithmetic instead. */
.combogrid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 0.5rem; align-items: start; }
@media (min-width: 720px)  { .combogrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .combogrid { grid-template-columns: repeat(3, 1fr); } }

.combocard { background: var(--raised-2); border: 1px solid var(--line); border-radius: 8px; }
.combocard[open] { border-color: var(--line-2); grid-column: 1 / -1; }
/* `display: block` is declared rather than left to the default on purpose.
   A card can be dropped inside any accordion on this site, and an ancestor's
   summary rule ties on specificity with this one. Stating the layout here means
   the card cannot silently inherit somebody else's. */
.combocard > summary { display: block; list-style: none; cursor: pointer; padding: 1rem 1.1rem; }
.combocard > summary::-webkit-details-marker { display: none; }
.combocard-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.combocard-pill { font-family: var(--mono); font-size: 0.65rem; color: var(--fg-muted); }
.combocard-match { font-weight: 600; font-size: 1rem; line-height: 1.3; margin-bottom: 0.5rem; }
.combocard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 0.75rem; font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); padding-top: 0.6rem; margin-top: 0.4rem; border-top: 1px solid var(--line); }
.combocard-body { padding: 0 1.1rem 1rem; border-top: 1px solid var(--line); }

.status-pill { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.02em; padding: 0.15rem 0.5rem; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
.status-pill.open-s { color: var(--violet); background: var(--violet-dim); border: 1px solid rgba(179, 156, 251, 0.4); }
.status-pill.settled { color: var(--fg-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
/* Third state. Amber, per the palette rule: a card that kicked off without a
   result wants attention, but nothing has gone wrong with the price itself. */
.status-pill.unresolved { color: var(--amber); background: rgba(240, 166, 60, 0.1); border: 1px solid rgba(240, 166, 60, 0.35); }

/* ── Lane A: the six-cell fair-price card ───────────────────────────────
   Shares .combocard's shell with the acca arm and diverges inside it. The
   collapsed face carries the three result marginals as bars; the expanded
   body carries all six cells as prices.                                  */

.fpcard[open] .fpbars { opacity: 0.45; }

.fpbars { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.fpbar-row { display: grid; grid-template-columns: 4.6rem 1fr 2.4rem; align-items: center; gap: 0.5rem; }
.fpbar-label { font-size: 0.74rem; color: var(--fg-2); }
.fpbar-track { position: relative; height: 6px; background: var(--ink); border-radius: 3px; overflow: hidden; }
.fpbar-fill { position: absolute; inset: 0 auto 0 0; background: var(--slate); border-radius: 3px; }
/* The builder's marginal, as a tick rather than a second bar: it is a
   comparison against the fill, not a quantity of its own. */
.fpbar-mark { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--teal); transform: translateX(-1px); }
.fpbar-num { font-family: var(--mono); font-size: 0.7rem; color: var(--fg-2); text-align: right; }
.fpbar-row.hit .fpbar-fill { background: var(--teal); opacity: 0.55; }
.fpbar-row.hit .fpbar-label { color: var(--fg); }

.t4h-flag { color: var(--amber); }
.tier-sep { color: var(--fg-muted); margin: 0 0.2rem; font-weight: 400; }

.fpcells { width: 100%; border-collapse: collapse; }
.fpcells th { font-size: 0.72rem; font-weight: 600; color: var(--fg-2); text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fpcells tbody th { color: var(--fg); font-weight: 500; }
.fpcell { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.fpcell span { display: block; }
.fpcell-prices { font-family: var(--mono); font-size: 0.82rem; }
.fpcell-fair { display: inline !important; color: var(--fg); }
.fpcell-vs { display: inline !important; color: var(--fg-muted); font-size: 0.72rem; margin: 0 0.25rem; }
.fpcell-builder { display: inline !important; color: var(--fg-2); }
.fpcell-probs { font-family: var(--mono); font-size: 0.68rem; color: var(--fg-muted); margin-top: 0.15rem; }
.fpcell-gap { font-family: var(--mono); font-size: 0.68rem; margin-top: 0.15rem; }
.fpcell-gap.pos { color: var(--teal); }
.fpcell-gap.neg { color: var(--coral); }
.fpcell.realised { background: rgba(63, 201, 174, 0.08); box-shadow: inset 2px 0 0 var(--teal); }
.fpcell-hit { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal); margin-top: 0.2rem; }

/* ── The summary card, for settled fixtures past the full-detail window ──
   Still a card, on the same grid and in the same visual language: an older
   result is not demoted to a table row. It carries the landed cell and BOTH
   its prices, because the comparison is the claim. Roughly 0.4KB against the
   full card's 6.4KB, which is what keeps a season's page loadable.        */

.fpmini { background: var(--raised-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fpmini-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.fpmini-tag { font-family: var(--mono); font-size: 0.65rem; color: var(--fg-muted); }
.fpmini-score { font-family: var(--mono); font-size: 0.86rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.fpmini-match { font-size: 0.87rem; font-weight: 600; line-height: 1.3; }
/* The one cell of six that occurred, as a chip rather than a sentence - it
   is the same object the full card highlights, so it reads the same way. */
.fpmini-cell { align-self: flex-start; font-size: 0.72rem; color: var(--teal); background: rgba(63, 201, 174, 0.08); border: 1px solid rgba(63, 201, 174, 0.3); border-radius: 4px; padding: 0.12rem 0.4rem; }
.fpmini-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding-top: 0.45rem; margin-top: 0.1rem; border-top: 1px solid var(--line); }
.fpmini-prices { font-family: var(--mono); font-size: 0.76rem; color: var(--fg-2); }
.fpmini-prices b { color: var(--fg); font-weight: 500; }
.fpmini-prices i { color: var(--fg-muted); font-style: normal; font-size: 0.68rem; margin: 0 0.1rem; }
.fpmini-foot a { font-size: 0.7rem; color: var(--fg-muted); text-decoration: none; white-space: nowrap; }
.fpmini-foot a:hover { color: var(--teal); text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════════════
   THE LANDING PAGE

   Its job is to answer "what is this and why come back", which the board
   cannot answer while also being the board. Every block below renders a
   real count from the same context the page it links to renders from -
   there is no decorative figure and no stock illustration anywhere on it.

   It borrows rather than invents: the fixture preview is .fx/.fxrow
   exactly as the board draws them, the counters are .stat-grid, the
   caution box is .caveat. A landing page with its own visual language
   would be a second site bolted to the front of this one.
   ═════════════════════════════════════════════════════════════════════ */

/* The hero band. The headline sits ON the image, over a scrim heavy enough
   that the type never depends on which part of the picture is behind it.
   The image is decorative: empty alt, and it carries no figure the page
   would lose if it failed to load. */
.hero { margin: 0.25rem 0 1.75rem; }
.hero-band {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--line);
}
.hero-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; display: block; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10, 12, 16, 0.95) 0%,
    rgba(10, 12, 16, 0.78) 34%,
    rgba(10, 12, 16, 0.30) 68%,
    rgba(10, 12, 16, 0.10) 100%);
}
/* Wide enough that the headline breaks exactly where the <br> says and
   nowhere else. At 66ch (~528px against the 15px base) the second line
   wrapped, giving three lines from a two-line headline. */
.hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.75rem; max-width: 46rem; }
.hero-content .eyebrow { margin-bottom: 0.5rem; color: var(--fg-2); }
.hero-content h1 { margin: 0 0 0.6rem; font-size: 2.1rem; text-wrap: normal; }
.hero-content .lede { margin: 0; max-width: 40rem; color: var(--fg-2); }

@media (max-width: 900px) {
  .hero-band { aspect-ratio: 3 / 4; }
  .hero-band img { object-position: 58% 32%; }
  .hero-content { padding: 1.15rem 1.15rem 1.35rem; }
  .hero-content h1 { font-size: 1.6rem; }
  .hero-content .lede { font-size: 0.92rem; }
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--teal);
  color: var(--ink);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--teal);
  border-radius: 6px;
  text-decoration: none;
}
.cta:hover { background: #55d6bd; border-color: #55d6bd; text-decoration: none; }
/* Two-part button: the action, a rule, then the count it acts on. */
.cta.split i { width: 1px; align-self: stretch; background: rgba(10, 12, 16, 0.3); display: block; }
.cta.split span { font-family: var(--mono); font-weight: 500; font-size: 0.8rem; }

/* Section headers that carry their own way out. A preview the reader
   cannot leave from is a dead end dressed as a shortcut. */
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 2.5rem 0 0.75rem; padding-bottom: 0.4rem; }
.sechead h2 { margin: 0; }
.sechead a { font-size: 0.8rem; font-family: var(--mono); white-space: nowrap; }
/* Inside a split column the band above already provides the top spacing. */
.sechead.tight { margin-top: 0; }

/* Coverage on the left, limits on the right. One band, so neither can be
   read without the other. They stack on narrow screens with coverage
   first, because the limits only mean something once you know the scope. */
.ledger-split { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin: 2.5rem 0 0; }
@media (min-width: 940px) { .ledger-split { grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: start; } }
.split-col { min-width: 0; }
.split-col .note, .split-col .band-note { max-width: none; }
.split-col .caveat { margin-top: 0; }
.split-sub { font-size: 0.95rem; margin: 1.5rem 0 0.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

/* ── The board's own footer ───────────────────────────────────────────
   The limits sit at the foot of the thing they limit, in the board's quiet
   register: a rule across the top, four short columns, no card chrome
   competing with the fixtures above it. */
.boardfoot { margin-top: 2.5rem; padding-top: 1.1rem; border-top: 2px solid var(--line-2); }
.boardfoot h2 { margin: 0 0 0.9rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-2); }
.boardfoot-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem 2rem; }
@media (min-width: 700px) { .boardfoot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .boardfoot-grid { grid-template-columns: repeat(4, 1fr); } }
.boardfoot-grid p { margin: 0; font-size: 0.8rem; color: var(--fg-muted); line-height: 1.55; }
.boardfoot-grid strong { display: block; color: var(--fg-2); font-weight: 600; margin-bottom: 0.15rem; }

/* ── What sits behind the board ───────────────────────────────────────
   Two real samples, not descriptions of them: one competition's current
   season and one club's home record, both lifted from data already
   rendered inside the fixtures above. */
.behind { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1rem 0 0; }
@media (min-width: 780px) { .behind { grid-template-columns: repeat(2, 1fr); align-items: stretch; } }
.behind-card {
  display: flex; flex-direction: column;
  background: var(--raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem 1.1rem 1.1rem; text-decoration: none; color: var(--fg);
}
.behind-card:hover { background: var(--raised-2); border-color: var(--line-2); text-decoration: none; }
.behind-key { font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }
.behind-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; margin: 0.35rem 0 0.1rem; }
.behind-title .flag-icon { width: 22px; height: 15px; border-radius: 2px; flex: 0 0 auto; }
.behind-sub { font-family: var(--mono); font-size: 0.7rem; color: var(--fg-muted); margin-bottom: 0.8rem; }
.behind-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.28rem 0; border-bottom: 1px solid rgba(38, 43, 52, 0.5); }
.behind-row:last-of-type { border-bottom: none; }
.behind-row .lab { font-size: 0.78rem; color: var(--fg-2); }
/* No `color`, for the reason spelled out at .cr-row .stat-val. */
.behind-row .val { font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.behind-card .refcard-bar-row { display: flex; }
/* The competitions held, named. Also what brings this card's height into
   line with the club record beside it, which runs to eight rows. */
.behind-leagues { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.9rem; }
.behind-league {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; color: var(--fg-2);
  background: var(--raised-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.18rem 0.45rem;
}
.behind-league .flag-icon { width: 15px; height: 10px; border-radius: 1px; flex: 0 0 auto; }
.behind-go { margin-top: auto; padding-top: 0.85rem; font-family: var(--mono); font-size: 0.7rem; color: var(--teal); }
/* Pushed to the foot of whichever card is taller, so the two links line up. */
.behind-card { min-height: 100%; }

.preview { margin: 0.85rem 0 1rem; }
.more-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 1.1rem 0 0; }
.more-row .note { margin: 0; }

/* ── "What's counted": one row per competition ─────────────────────────
   A table would be the obvious shape and the wrong one - this is a list of
   links into the reference pages, and each row has to survive collapsing to
   a phone without becoming six unlabelled numbers. Hence the stacked
   value-over-label pairs rather than a header row governing them at a
   distance. */
.counted { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 1rem 0 0.75rem; }
.counted-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  background: var(--raised);
  padding: 0.6rem 0.85rem;
  text-decoration: none;
  color: var(--fg);
}
.counted-row:hover { background: var(--raised-2); text-decoration: none; }
.counted-flag { display: flex; align-items: center; }
.counted-flag .flag-icon { width: 24px; height: 16px; display: block; border-radius: 2px; }
.counted-name { font-weight: 600; font-size: 0.87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.counted-n { text-align: right; font-family: var(--mono); font-size: 0.85rem; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.2; }
.counted-n u { display: block; font-size: 0.6rem; color: var(--fg-muted); text-decoration: none; letter-spacing: 0.03em; }

/* ── Three ways in ─────────────────────────────────────────────────────
   The third card is violet because it is the only one describing the test
   rather than the record, and that is the site's single most confusable
   distinction. See the --violet token note. */
.ways { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1rem 0 0; }
@media (min-width: 780px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way {
  display: flex; flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--fg);
}
.way:hover { background: var(--raised-2); border-color: var(--line-2); border-left-color: var(--teal); text-decoration: none; }
.way.test { border-left-color: var(--violet); }
.way.test:hover { border-left-color: var(--violet); }
.way-key { font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }
.way.test .way-key { color: var(--violet); }
.way h3 { margin: 0.35rem 0 0.5rem; font-size: 1rem; }
.way p { margin: 0; font-size: 0.85rem; color: var(--fg-2); }
.way-go { margin-top: 0.85rem; font-family: var(--mono); font-size: 0.73rem; color: var(--teal); }
.way.test .way-go { color: var(--violet); }

/* ── Latest from Fair Price ──────────────────────────────────────────── */
.fplatest { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin: 1rem 0 0; }
@media (min-width: 780px) { .fplatest { grid-template-columns: repeat(3, 1fr); } }
.fplatest-card {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);
  border-radius: 8px;
  padding: 0.85rem 0.95rem;
  text-decoration: none;
  color: var(--fg);
}
.fplatest-card:hover { background: var(--raised-2); text-decoration: none; }
.fplatest-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fplatest-tag { font-family: var(--mono); font-size: 0.65rem; color: var(--fg-muted); }
.fplatest-match { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.fplatest-cell { font-size: 0.76rem; color: var(--fg-2); }
.fplatest-prices { font-family: var(--mono); font-size: 0.74rem; color: var(--fg-muted); padding-top: 0.4rem; border-top: 1px solid var(--line); }
.fplatest-prices b { color: var(--fg); font-weight: 500; }
.fplatest-prices i { font-style: normal; margin: 0 0.15rem; }

/* ── Why come back: the cadence, stated as a rhythm ──────────────────── */
.rhythm { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1rem 0 0; }
@media (min-width: 700px) { .rhythm { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rhythm { grid-template-columns: repeat(4, 1fr); } }
.beat { border-top: 2px solid var(--line-2); padding-top: 0.7rem; }
.beat-when { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.35rem; }
.beat p { margin: 0; font-size: 0.83rem; color: var(--fg-2); line-height: 1.55; }
.beat .chip { display: inline-block; vertical-align: baseline; }

/* ── "What's inside one fixture", on the board ───────────────────────── */
.inside { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 760px) { .inside { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .inside { grid-template-columns: repeat(4, 1fr); } }
.inside-col { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem 0.95rem; }
.inside-col h3 { margin: 0 0 0.4rem; font-size: 0.87rem; }
.inside-col p { margin: 0; font-size: 0.81rem; color: var(--fg-2); line-height: 1.55; }
.inside-col strong { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}