/* Fonts are served from this site (no requests to Google). All three families use the SIL Open Font License. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Layout: ad rail | stacked league tables | ad rail. Tiers run top to bottom, the way the pyramid does. */
:root {
  --paper: #F2F4F0;        /* touchline chalk */
  --sheet: #FFFFFF;
  --ink: #121B2A;          /* floodlight navy */
  --muted: #5A6577;
  --rule: #DCE1DA;
  --rule-strong: #AEB7AD;
  --accent: #2440C4;       /* cobalt */
  --accent-soft: #E5E9FB;
  --accent-line: #9AA9EC;
  --accent-flash: #C3CDF6;
  --up: #17834A;
  --mid: #B07506;
  --down: #C2362C;
  --hover: #F6F8F5;
  --hatch: rgba(18, 27, 42, 0.06);
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E141C; --sheet: #151D28; --ink: #E6EBF0; --muted: #96A1B3;
    --rule: #243041; --rule-strong: #3A4B62;
    --accent: #8EA2FF; --accent-soft: #1C2547; --accent-line: #4256A8; --accent-flash: #2D3C7A;
    --up: #45C47E; --mid: #E6AA3A; --down: #F26B60;
    --hover: #18212D; --hatch: rgba(230, 235, 240, 0.06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E141C; --sheet: #151D28; --ink: #E6EBF0; --muted: #96A1B3;
  --rule: #243041; --rule-strong: #3A4B62;
  --accent: #8EA2FF; --accent-soft: #1C2547; --accent-line: #4256A8; --accent-flash: #2D3C7A;
  --up: #45C47E; --mid: #E6AA3A; --down: #F26B60;
  --hover: #18212D; --hatch: rgba(230, 235, 240, 0.06);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 25; background: var(--paper);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.bar-inner {
  max-width: 1320px; margin: 0 auto;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-text { display: grid; line-height: 1; }
.brand-text small {
  margin-bottom: 3px; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
}
.brand-text span {
  font-family: var(--display); font-weight: 800; font-size: 27px;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.glyph { display: inline-grid; justify-items: center; gap: 3px; }
.glyph i { display: block; height: 5px; border-radius: 1px; background: var(--accent); }
.glyph i:nth-child(1) { width: 10px; }
.glyph i:nth-child(2) { width: 18px; }
.glyph i:nth-child(3) { width: 26px; }

.nav { display: flex; gap: 2px; order: 2; }
.nav a {
  font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  padding: 8px 10px; border-radius: 6px; color: var(--muted); white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--sheet); }
.nav a[aria-current="page"] { color: var(--paper); background: var(--ink); }
.nav .long { display: none; }

.finder { position: relative; margin-left: auto; order: 3; }
.finder > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.finder input {
  width: 220px; height: 36px; padding: 0 32px 0 32px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 8px;
}
.finder input::placeholder { color: var(--muted); }
.finder input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.finder button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.finder button:hover { background: var(--hover); color: var(--ink); }

/* Results list for the club finder (header box and the home page's big box) */
.finder-list {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: max(100%, 320px); max-width: calc(100vw - 32px);
  max-height: min(60vh, 420px); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(14, 20, 28, 0.16); text-align: left;
}
.finder-list[hidden] { display: none; }
.finder-list [role=option] {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; min-height: 44px;
}
.finder-list [role=option] .flag { grid-row: span 2; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
.finder-list .fl-name { font-weight: 600; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-list .fl-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-list [role=option]:hover { background: var(--hover); }
.finder-list [role=option].on { background: var(--accent-soft); }
.finder-list .finder-none { padding: 10px; font-size: 14px; color: var(--muted); }

/* Home page: the big club search under the headline */
.hero-find { margin: 22px 0 6px; max-width: 560px; }
.hero-find label { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.hero-find-in { position: relative; }
.hero-find-in > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.hero-find-in input {
  width: 100%; height: 52px; padding: 0 16px 0 44px; font: inherit; font-size: 17px; color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: 10px;
}
.hero-find-in input::placeholder { color: var(--muted); }
.hero-find-in input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.hero-find-in .finder-list { left: 0; right: 0; width: auto; max-width: none; }
.hero-find-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

@media (min-width: 1040px) {
  .nav .long { display: inline; }
  .nav .short { display: none; }
}
@media (max-width: 699px) {
  .brand-text span { font-size: 22px; letter-spacing: 0.05em; }
  .brand-text small { font-size: 9px; letter-spacing: 0.24em; }
  .finder { flex: 1 1 130px; min-width: 0; }
  .finder input { width: 100%; font-size: 16px; }
  .nav { order: 4; flex: 1 1 100%; justify-content: space-between; }
  .nav a { flex: 1; text-align: center; }
}

/* ---------- Shell ---------- */
.shell {
  max-width: 1320px; margin: 0 auto;
  padding-block: 28px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
}
main { min-width: 0; width: 100%; max-width: 820px; justify-self: center; }
.rail { display: none; }
.rail .stick { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); display: grid; gap: 16px; }
@media (min-width: 1060px) {
  .shell { grid-template-columns: minmax(0, 1fr) 300px; }
  .rail-right { display: block; }
  main { justify-self: end; }
}
@media (min-width: 1320px) {
  .shell { grid-template-columns: 160px minmax(0, 1fr) 300px; }
  .rail-left { display: block; }
  main { justify-self: center; }
}

/* ---------- Ad slots ---------- */
.ad {
  width: 100%; height: var(--h, 250px);
  display: grid; place-content: center; justify-items: center; gap: 2px;
  border: 1px dashed var(--rule-strong); border-radius: 8px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, var(--hatch) 10px 11px), var(--paper);
  color: var(--muted); text-align: center;
}
.ad-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.ad-size { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: 0.03em; color: var(--ink); opacity: 0.7; }
.ad-note { font-size: 12px; }
.ad-inline { --h: 100px; max-width: 320px; margin: 40px auto 0; }
@media (min-width: 760px) { .ad-inline { --h: 90px; max-width: 728px; } }
@media (min-width: 1060px) { .ad-inline { display: none; } }
.ad-inline .ad-size .wide { display: none; }
@media (min-width: 760px) { .ad-inline .ad-size .wide { display: inline; } .ad-inline .ad-size .narrow { display: none; } }

/* ---------- Intro ---------- */
.eyebrow { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.crumbs a:hover { border-bottom-color: var(--accent); }
/* Club context breadcrumb: COUNTRY ▾ · LEAGUE ▾ · SEASON, with a menu on the first two. Same on every club page. */
.crumb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.crumb-sep { font-style: normal; color: var(--muted); }
.crumb-pick { position: relative; }
.crumb-pick > summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  border-bottom: 1px solid var(--accent-line); line-height: 1.4;
}
.crumb-pick > summary::-webkit-details-marker { display: none; }
.crumb-pick > summary::after { content: " ▾"; font-size: 10px; }
.crumb-pick[open] > summary::after { content: " ▴"; }
.crumb-pick > summary:hover, .crumb-pick[open] > summary { border-bottom-color: var(--accent); }
.crumb-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  display: grid; gap: 2px; padding: 6px; min-width: 220px;
  max-width: calc(100vw - 32px); max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(14, 20, 28, 0.14);
  text-transform: none; letter-spacing: 0;
}
.crumb-panel a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; border: 0;
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
.crumb-panel a .flag { flex: none; width: 22px; height: auto; border-radius: 2px; }
.crumb-panel a .tag { flex: none; }
.crumb-panel a span { overflow: hidden; text-overflow: ellipsis; }
.crumb-panel a:hover { background: var(--hover); }
.crumb-panel a[aria-current] { background: var(--ink); color: var(--paper); }
.crumb-panel a[aria-current] .tag { background: var(--paper); color: var(--ink); }
h1 {
  margin: 8px 0 0; max-width: 20ch;
  font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6.4vw, 3.9rem);
  line-height: 0.98; letter-spacing: 0.005em; text-wrap: balance;
}
.lede { margin: 14px 0 0; max-width: 60ch; color: var(--muted); font-size: 16px; }
.stamp {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mid); flex: none; }
.stamp.live .dot { background: var(--up); }
@media (prefers-reduced-motion: no-preference) {
  .stamp.live .dot { animation: pulse 2s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* Pyramid figure: bar width is to scale with clubs per tier */
.pyr {
  margin: 28px 0 0; padding: 18px 18px 14px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px;
}
.pyr-rows { display: grid; gap: 6px; }
.pyr-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.pyr-tier { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pyr-track { position: relative; height: 34px; display: flex; align-items: center; justify-content: center; }
.pyr-bar {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--w); border-radius: 4px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.pyr-label {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
}
.pyr-label small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
a.pyr-row:hover .pyr-bar { border: 2px solid var(--accent); }
a.pyr-row:hover .pyr-label span { text-decoration: underline; text-underline-offset: 3px; }
.pyr-row.soon .pyr-bar { background: transparent; border: 1px dashed var(--rule-strong); }
.pyr-narrow .pyr-label { position: absolute; left: calc(50% + var(--w) / 2 + 10px); }
@media (max-width: 480px) { .pyr-narrow .pyr-label { position: relative; left: auto; } }
.pyr-row.soon .pyr-label { color: var(--muted); }
.pyr figcaption { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.nm-short { display: none; }
@media (max-width: 480px) {
  .nm-long { display: none; }
  .nm-short { display: inline; }
  .pyr { padding: 14px 12px 12px; }
  .pyr-row { grid-template-columns: 44px minmax(0, 1fr); gap: 6px; }
  .pyr-tier { font-size: 10px; letter-spacing: 0.02em; }
  .pyr-label { font-size: 15px; gap: 6px; }
  .pyr-bar { min-width: 56%; }
}

/* ---------- Tier sections ---------- */
.tier { margin-top: 52px; scroll-margin-top: calc(var(--bar-h, 84px) + var(--jump-full, 0px) + 12px); }
.tier-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.tier-num { margin: 0; flex: 1 1 100%; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.tier h2 {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 5.4vw, 2.9rem);
  line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance;
}
.tier-meta { margin: 0 0 0 auto; font-size: 13px; color: var(--muted); }
.legend { list-style: none; margin: 14px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: currentColor; flex: none; }
.legend .k-top i { color: var(--up); }
.legend .k-mid i { color: var(--mid); }
.legend .k-down i { color: var(--down); }
.legend .k-cup i { color: var(--mid); background: transparent; border: 2px solid currentColor; }
tr.z-cup .c-pos { box-shadow: inset 4px 0 0 transparent, inset 2px 0 0 var(--mid); }

.table-wrap { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 14px; }
thead th {
  padding: 10px 8px; text-align: right; font-weight: 500;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
tbody td, tbody th { padding: 8px; text-align: right; border-bottom: 1px solid var(--rule); }
tbody tr:last-child > * { border-bottom: 0; }
thead .c-club, tbody .c-club { text-align: left; }
thead abbr { text-decoration: none; cursor: help; }
tbody th.c-club { font-weight: 500; }
.c-pos { width: 44px; text-align: center !important; font-weight: 600; color: var(--muted); }
.c-n { width: 40px; }
.c-gd { width: 50px; }
.c-pts { width: 52px; padding-right: 14px !important; font-weight: 700; }
.c-form { width: 120px; }
tbody tr:hover > * { background: var(--hover); }
tr.z-top .c-pos { box-shadow: inset 4px 0 0 var(--up); color: var(--up); }
tr.z-mid .c-pos { box-shadow: inset 4px 0 0 var(--mid); color: var(--mid); }
tr.z-down .c-pos { box-shadow: inset 4px 0 0 var(--down); color: var(--down); }
tr.z-cup .c-pos { box-shadow: inset 4px 0 0 var(--mid); color: var(--mid); }
tbody tr.edge > * { border-bottom: 2px solid var(--rule-strong); }
tbody tr.is-mine > * { background: var(--accent-soft); }
tbody tr.is-mine .c-club { font-weight: 700; }
tbody tr.is-mine .c-club::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
@media (prefers-reduced-motion: no-preference) {
  tbody tr.flash > * { animation: flash 1.6s ease-out; }
}
@keyframes flash { 0%, 35% { background: var(--accent-flash); } 100% { background: var(--accent-soft); } }
.ded {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 18px; vertical-align: 1px;
  color: var(--down); border: 1px solid currentColor;
}
.out {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 4px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 18px; vertical-align: 1px;
  color: var(--sheet); background: var(--up);
}
.out.po-lost { background: var(--down); }
.out.po-stayed { background: var(--muted); }
.out.champ { background: var(--ink); text-decoration: none; }
.out.champ:hover { text-decoration: underline; text-underline-offset: 2px; }
.form { display: inline-flex; gap: 3px; }
.form > b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--sheet); }
.form .fchip { position: relative; cursor: pointer; outline: none; }
.form .fchip:hover, .form .fchip:focus-visible, .form .fchip.open { box-shadow: 0 0 0 2px var(--accent-flash); z-index: 3; }
.form .fchip:hover { z-index: 4; }
@media (hover: hover) { .form .fchip:focus:not(:focus-visible):not(:hover) .ltip { display: none; } }
.form .fchip .ltip { bottom: calc(100% + 8px); }
.fchip:hover .ltip, .fchip:focus-visible .ltip, .fchip.open .ltip { display: block; }
.form .W { background: var(--up); } .form .D { background: var(--muted); } .form .L { background: var(--down); }
.tier-notes { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 599px) {
  .c-w, .c-d, .c-l, .c-gf, .c-ga, .c-form { display: none; }
  table { font-size: 14px; }
  tbody td, tbody th { padding: 9px 6px; }
  .c-pos { width: 36px; }
  .tier-meta { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 899px) { .c-form { display: none; } }

/* Promotion and relegation between tiers */
.band { position: relative; margin: 18px 0 0 6px; padding: 2px 0 2px 22px; display: grid; gap: 3px; font-size: 14px; }
.band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--rule-strong); }
.band p { margin: 0; }
.band-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.band .arw { display: inline-block; width: 18px; font-size: 11px; }
.band-down .arw { color: var(--down); }
.band-up .arw { color: var(--up); }

.next-tiers { margin-top: 44px; padding: 18px 20px; border: 1px dashed var(--rule-strong); border-radius: 10px; }
.next-tiers h2 { margin: 4px 0 6px; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.next-tiers p { margin: 0; max-width: 60ch; font-size: 14px; color: var(--muted); }

/* ---------- Home: country cards ---------- */
.countries {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}
.countries a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name mini" "meta mini";
  align-items: center; gap: 4px 16px; height: 100%; padding: 12px 14px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px;
  text-decoration: none; color: var(--ink);
}
.c-name { grid-area: name; }
.c-meta { grid-area: meta; }
.mini { grid-area: mini; }
@media (min-width: 640px) {
  .countries { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .countries a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "mini" "meta"; gap: 10px; padding: 14px 14px 12px; align-content: space-between; }
  .countries .mini { width: 100%; max-width: 84px; justify-self: start; }
}
.countries a:hover { border-color: var(--accent); }
.c-name { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.2vw, 22px); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.c-meta { font-size: 12.5px; color: var(--muted); }
.mini { display: grid; gap: 3px; justify-items: center; width: 84px; }
.mini i { display: block; height: 5px; border-radius: 1px; background: var(--accent-line); width: var(--w); }
.countries a:hover .mini i { background: var(--accent); }

/* ---------- Groups inside a tier ---------- */
.group + .group { margin-top: 22px; }
.group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 8px; }
.group-head h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
.group-head span { font-size: 12.5px; color: var(--muted); }

.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; font-size: 14px; color: var(--accent); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Text pages (privacy, about) ---------- */
.prose { max-width: 68ch; }
.prose h1 { max-width: none; }
.prose h2 {
  margin: 40px 0 8px; font-family: var(--display); font-weight: 800; font-size: 1.65rem; line-height: 1.05;
  letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance;
}
.prose p, .prose li { font-size: 16px; line-height: 1.65; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose .updated { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.prose .summary { margin: 24px 0 0; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.prose .summary p:last-child { margin-bottom: 0; }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 16px; }
.email-line a { font-family: var(--mono); font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.copy {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-strong);
}
.copy:hover { border-color: var(--accent); }

/* ---------- Other seasons ---------- */
.seasons { margin: 14px 0 0; }
.seasons-head {
  display: inline-flex; align-items: center; gap: 8px; list-style: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.seasons-head .sep { color: var(--muted); }
summary.seasons-head { cursor: pointer; }
summary.seasons-head::-webkit-details-marker { display: none; }
.seasons-more {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 4px 9px;
  border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--sheet);
  font-size: 11px; letter-spacing: 0.08em; color: var(--ink);
}
.seasons-more::after { content: "▾"; font-size: 10px; }
.seasons[open] .seasons-more::after { content: "▴"; }
summary.seasons-head:hover .seasons-more { border-color: var(--accent); }
summary.seasons-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.seasons ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.seasons a, .seasons li span {
  display: inline-block; padding: 5px 9px; border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); text-decoration: none;
}
.seasons a:hover { border-color: var(--accent); }
.seasons li span[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stamp.final .dot { background: var(--muted); }

/* ---------- Footer ---------- */
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
footer p { margin: 0; max-width: 72ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; }
.foot-links a, .foot-links button { color: var(--ink); font: inherit; font-size: 13px; text-underline-offset: 3px; }
.foot-links button { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 8px;
  background: var(--ink); color: var(--paper); font-size: 14px;
}

/* Until ads are switched on (ADS in scripts/leagues.mjs), hide the slots and centre the tables. */
body.no-ads .rail, body.no-ads .ad-inline { display: none !important; }
body.no-ads .shell { grid-template-columns: minmax(0, 1fr) !important; }
body.no-ads main { justify-self: center !important; }

/* ---------- Live scores ---------- */
.stamp.now { color: var(--ink); font-weight: 500; }
.stamp.now .dot { background: var(--down); }
@media (prefers-reduced-motion: no-preference) {
  .stamp.now .dot, .live-dot, .lv.on::before { animation: pulse 1.6s ease-in-out infinite; }
}
.lv {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 0 6px; border-radius: 4px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 18px; vertical-align: 1px;
  border: 1px solid var(--rule-strong); color: var(--ink); background: var(--sheet);
}
.lv.on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--down); }
.lv-w { border-color: var(--up); }
.lv-l { border-color: var(--down); }
.mv { display: inline-block; margin-left: 3px; font-size: 8px; line-height: 1; vertical-align: 2px; }
.mv-up { color: var(--up); } .mv-down { color: var(--down); }

.today { margin: 10px 0 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); }
.today:not([open]) { display: inline-block; }
.today summary {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.today summary::-webkit-details-marker { display: none; }
.today summary::after { content: "▾"; margin-left: auto; padding-left: 10px; font-size: 11px; color: var(--muted); }
.today[open] summary::after { content: "▴"; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--down); flex: none; }
.today ul { list-style: none; margin: 0; padding: 0 0 4px; border-top: 1px solid var(--rule); }
.fx {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 14px; border-bottom: 1px solid var(--rule);
}
.fx:last-child { border-bottom: 0; }
.fx-t { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.fx.on .fx-t { color: var(--down); font-weight: 500; }
.fx-h { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-s { text-align: center; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.fx.on .fx-s { font-weight: 700; }
.fx-g { grid-column: 2 / -1; margin-top: -4px; font-size: 11px; color: var(--muted); text-align: center; }
@media (max-width: 480px) {
  .fx { grid-template-columns: 44px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; padding: 7px 10px; font-size: 13px; }
}

/* ---------- Header: "More" countries ---------- */
.nav-more { position: relative; }
.nav-more summary {
  display: block; list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 10px; border-radius: 6px; color: var(--muted); white-space: nowrap;
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " ▾"; font-size: 11px; }
.nav-more[open] summary::after { content: " ▴"; }
.nav-more summary:hover, .nav-more[open] summary { color: var(--ink); background: var(--sheet); }
.nav-more:has(.nav-panel a[aria-current]) summary { color: var(--ink); }
.nav-euro.is-here summary, .nav-euro.is-here:has(.nav-panel a[aria-current]) summary { color: var(--paper); background: var(--ink); }
.nav-euro .nav-panel { right: auto; left: 0; min-width: 230px; }
/* Phones: seven nav items have to fit in 288px at 320px wide. Tighter spacing, and on a "More" country's page its
   own link drops out of the row; the "More" button is marked as the current section instead. */
@media (max-width: 479px) {
  .nav { gap: 0; }
  .nav a, .nav-more summary { padding: 8px 4px; font-size: 16px; letter-spacing: 0.02em; }
  .nav-more summary::after { font-size: 9px; }
  .nav a.nav-here { display: none; }
  .nav-more:not(.nav-euro):has(.nav-panel a[aria-current]) summary { color: var(--paper); background: var(--ink); }
}
@media (max-width: 359px) {
  .nav a, .nav-more summary { padding-inline: 3px; font-size: 15px; letter-spacing: 0; }
}
.nav-euro .nav-panel .comp-dot { margin-right: 10px; }
.nav-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 200px;
  display: grid; gap: 2px; padding: 6px;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(14, 20, 28, 0.14);
}
.nav-panel a {
  display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.nav-panel a:hover { background: var(--hover); }
.nav-panel a[aria-current="page"] { background: var(--ink); color: var(--paper); }
@media (max-width: 699px) {
  .nav-more { flex: 1; }
  .nav-more summary { text-align: center; }
  .nav-panel, .nav-euro .nav-panel { right: 0; left: auto; }
}

/* ---------- Home: more pyramids ---------- */
.countries-more-h {
  margin: 26px 0 0; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.countries.extra { margin-top: 10px; }
@media (min-width: 640px) {
  .countries.extra { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .countries.extra .c-name { font-size: 18px; }
  .countries.extra a { padding: 12px 10px 10px; }
  .countries.extra .c-meta { font-size: 12px; white-space: nowrap; }
}
.countries li { display: flex; }
.countries li > a { flex: 1; }
@media (max-width: 639px) {
  .countries.extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .countries.extra a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meta"; }
  .countries.extra .mini { display: none; }
}

/* ---------- Flags ---------- */
.flag { display: inline-block; width: 21px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(14, 20, 28, 0.14); vertical-align: -2px; }

/* ---------- Home ---------- */
.hero h1 { max-width: 19ch; font-size: clamp(2.6rem, 7.4vw, 4.6rem); }
.section-h {
  margin: 48px 0 14px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}

/* Today's games */
.strip { margin-top: 26px; min-width: 0; }
.strip-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.strip-head p { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.strip-head strong { color: var(--down); font-weight: 500; }
.strip-nav { display: none; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.js .strip-nav { display: flex; }
.strip-arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; font: inherit; font-size: 22px; line-height: 1;
  color: var(--ink); background: var(--sheet); border: 1px solid var(--rule);
}
.strip-arrow:hover:not(:disabled) { border-color: var(--accent); }
.strip-arrow:disabled { opacity: 0.35; cursor: default; }
.strip-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.strip-list {
  list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 8px; min-width: 0;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 2px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.strip-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.strip-list li { flex: none; min-width: 0; scroll-snap-align: start; }
.chip {
  display: grid; gap: 4px; width: 176px; min-width: 0; overflow: hidden; padding: 9px 11px; border-radius: 8px;
  background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 13.5px;
}
.chip:hover { border-color: var(--accent); }
.chip.on { border-color: var(--down); }
.chip-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.chip-top .flag { width: 16px; height: 11px; flex: none; }
.chip-top > span:not(.flag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-top b { margin-left: auto; flex: none; min-width: max-content; white-space: nowrap; font-weight: 500; }
.chip.on .chip-top b { color: var(--down); }
.chip-row { display: flex; gap: 8px; min-width: 0; justify-content: space-between; }
.chip-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-row b { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Pyramid explorer */
.xp { display: grid; gap: 14px; }
/* The country picker: one row that scrolls sideways, on every screen size. */
.xp-wheel { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
.xp-tabs {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 24px; overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* Fade the ends so it's clear there's more to scroll to. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.xp-tabs .xp-tab { scroll-snap-align: start; }
.xp-group {
  flex: none; align-self: stretch; display: flex; align-items: center; margin-left: 14px; padding: 0 2px 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.xp-arrow {
  display: none; flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule);
}
.xp-arrow:hover:not(:disabled) { border-color: var(--accent); }
.xp-arrow:disabled { opacity: 0.35; cursor: default; }
.xp-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Arrows only where there's a mouse: touch screens swipe. */
@media (hover: hover) and (pointer: fine) { .js .xp-arrow { display: inline-flex; align-items: center; justify-content: center; } }
.xp-tab {
  display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 8px 12px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; white-space: nowrap;
}
.xp-tab:hover { color: var(--ink); }
.xp-tab.on { color: var(--ink); background: var(--sheet); border-color: var(--rule); }
.xp-tab:focus-visible, .tf-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xp-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.xp-head h2 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
}
.xp-head h2 .flag { width: 30px; height: 20px; }
.xp-head p { margin: 0; font-size: 14px; color: var(--muted); }
.xp-panel .pyr { margin: 0; }

/* Top-flight tabs */
.tf-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.tf-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 13px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap;
}
.tf-tab:hover { border-color: var(--accent); }
.tf-tab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tf-panel .tier { margin-top: 18px; }
.js .xp-panel:not(.on), .js .tf-panel:not(.on) { display: none; }

/* Flags in the More menu */
.nav-panel a { display: flex; align-items: center; gap: 10px; }

/* ---------- Fixtures ---------- */
.tier-fx { flex: 1 1 100%; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.tier-fx:hover { text-decoration: underline; text-underline-offset: 3px; }
.fx-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.fx-links a { font-weight: 600; color: var(--accent); text-decoration: none; }
.fx-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fx-tz { margin-top: 18px; }
.fx-tz + .rnav { margin-top: 12px; }
.tz-toggle {
  padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--sheet);
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.tz-toggle:hover { border-color: var(--accent); }
.fx-groups { margin-top: 24px; }
.rnav { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; }
.rnav-step {
  flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--sheet);
  font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer;
}
.rnav-step:hover:not(:disabled) { border-color: var(--accent); }
.rnav-step:disabled { opacity: 0.35; cursor: default; }
.round-pick {
  flex: 1 1 auto; min-width: 0; max-width: 360px; height: 40px; padding: 0 12px;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 8px; cursor: pointer;
}
.round-pick:focus-visible, .rnav-step:focus-visible, .tz-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-round { margin-top: 8px; }
.fx-date {
  margin: 26px 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.fx-list { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.g {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 4px 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 15px;
}
.g:last-child { border-bottom: 0; }
.g-time { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.g.on .g-time { color: var(--down); font-weight: 500; }
.g-h { text-align: right; }
.g-h, .g-a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-h.w, .g-a.w { font-weight: 700; }
.g-s { text-align: center; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.g.on .g-s { font-weight: 700; }
.g.on { background: color-mix(in srgb, var(--down) 6%, var(--sheet)); }
.g.off .g-h, .g.off .g-a { color: var(--muted); }
.g.is-mine { background: var(--accent-soft); }
.g-note { grid-column: 2 / -1; text-align: center; font-size: 12px; color: var(--muted); }
.g-flag { font-weight: 600; color: var(--down); }
.g-moved { font-weight: 600; color: var(--mid); }
.fx-foot { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .g { grid-template-columns: 44px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 3px 6px; padding: 10px; font-size: 14px; }
  .g-time { font-size: 12px; }
  .g-note { grid-column: 1 / -1; }
  .round-pick { font-size: 17px; }
}

/* ---------- European competitions ---------- */
.comp-dot { display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.3em; border-radius: 50%; vertical-align: 0.12em; background: var(--accent); }
.comp-dot.c-champions-league { background: #24306E; }
.comp-dot.c-europa-league { background: #E07A10; }
.comp-dot.c-conference-league { background: #1E9E5A; }
:root[data-theme="dark"] .comp-dot.c-champions-league { background: #8EA2FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .comp-dot.c-champions-league { background: #8EA2FF; } }
.ecards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .ecards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ecards li { display: flex; }
.ecard {
  flex: 1; display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 10px;
  background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.ecard:hover { border-color: var(--accent); }
.ecard-name { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
.ecard-status { font-size: 13px; color: var(--muted); }
.ecard-top { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.ecard-top li { display: flex; align-items: center; gap: 8px; }
.ecard-top li > span { width: 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ecard-top b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ecard-top i { font-style: normal; }
.ecards.compact .ecard { padding: 12px 14px; }
/* Europe hub: competitions stacked, each opening to its full table */
.ecards.ecomps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ecards.ecomps > li { display: block; }
.ecomp > summary { list-style: none; cursor: pointer; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
.ecomp > summary::-webkit-details-marker { display: none; }
.ecomp > summary .ecard-name, .ecomp > summary .ecard-status { grid-column: 1; }
.ecomp > summary .ecard-top { grid-column: 1 / -1; }
.ecomp > summary .ecard-toggle { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ecomp > summary .ecard-toggle::after { content: " ▾"; }
.ecomp[open] > summary .ecard-toggle::after { content: " ▴"; }
.ecomp .when-open, .ecomp[open] .when-closed, .ecomp[open] .ecard-top { display: none; }
.ecomp[open] .when-open { display: inline; }
.ecomp[open] > summary { border-color: var(--accent); }
.ecomp-body .tier-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecomp-body { padding: 4px 0 8px; }
.ecomp-body .tier { margin-top: 12px; }
@media (min-width: 720px) {
  .ecomp > summary { grid-template-columns: minmax(180px, 1fr) minmax(0, 1.4fr) auto; }
  .ecomp > summary .ecard-top { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .ecomp > summary .ecard-toggle { grid-row: 1 / span 2; }
  .ecomp > summary .ecard-toggle { grid-column: 3; }
}
.ecards.compact .ecard-name { font-size: 19px; }
.euro-home .section-h { margin-top: 36px; }
.comp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 28px; }
.comp-bar .comp-tabs { margin-top: 0; overflow: visible; padding-bottom: 0; flex-wrap: wrap; }
.tf-tab.tf-go { color: var(--accent); border-color: var(--accent-line); text-decoration: none; }
.tf-tab.tf-go:hover { background: var(--accent-soft); }
.comp .tf-panel .tier { margin-top: 18px; }
.ko-empty { margin: 22px 0 0; padding: 18px; border: 1px dashed var(--rule-strong); border-radius: 10px; color: var(--muted); font-size: 15px; }

/* Bracket: a column per round, scrolls sideways on small screens */
.bracket { display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.br-col { flex: 1 0 180px; min-width: 0; display: flex; flex-direction: column; }
.br-h { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.br-ties { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.tie {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 8px 10px; border-radius: 8px;
  background: var(--sheet); border: 1px solid var(--rule); font-size: 13.5px;
}
.tie.on { border-color: var(--down); }
/* One row per club: name, then a column per game (two legs or a replay) and the aggregate, like a scoreboard. */
.tie-team, .tie-head {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n, 1), 1.9em); gap: 0 1px; align-items: baseline;
}
.tie-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tie-team b, .tie-g { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.tie-team b { font-weight: 500; }
.tie-g { font-size: 0.92em; color: var(--muted); }
.tie-g.live { color: var(--down); font-weight: 600; }
.tie-multi .tie-team b { font-weight: 600; border-left: 1px solid var(--rule); }
.tie-head span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.2; }
.tie-multi .tie-head span:last-child { border-left: 1px solid var(--rule); }
.tie-team.tie-won { font-weight: 700; }
.tie-team.tie-won b { font-weight: 700; }
.tie-team.tie-lost { color: var(--muted); }
.tie-team.tie-won .tie-g { color: inherit; font-weight: 500; }
.tie-note { margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.q-ties .tie { font-size: 14px; }
.q-round { margin-top: 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.q-round summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: 0.03em; text-transform: uppercase;
}
.q-round summary::-webkit-details-marker { display: none; }
.q-round summary span { font-family: var(--sans, inherit); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.q-round summary::after { content: "▾"; margin-left: auto; font-size: 12px; color: var(--muted); }
.q-round[open] summary::after { content: "▴"; }
.q-ties { display: grid; gap: 8px; padding: 0 12px 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---------- Cups ---------- */
.cup-h { display: flex; align-items: center; gap: 14px; }
.cup-h .flag { width: 42px; height: 28px; }
.tag {
  display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px; vertical-align: 1px;
  font-family: var(--mono); font-style: normal; font-size: 10px; font-weight: 500; line-height: 15px;
  color: var(--muted); border: 1px solid var(--rule-strong); background: var(--paper);
}
.tag.tier-1 { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.tie-team.tie-won .tag { font-weight: 600; }
.upset { color: var(--mid); font-weight: 700; }
.cups-sec { margin-top: 8px; }
.cups-sec .section-h { margin-top: 52px; }

/* Cup chips under the pyramid */
.pyr-cups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule-strong); }
.pyr-cups-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.cup-chip {
  display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "ic name" "ic meta"; align-items: center; column-gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--ink); text-decoration: none;
}
.cup-chip:hover { border-color: var(--accent); }
.cup-ic { grid-area: ic; width: 18px; height: 18px; color: var(--accent); }
.cup-chip-name { grid-area: name; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; }
.cup-chip-meta { grid-area: meta; font-size: 11.5px; color: var(--muted); }

/* ---------- Club pages ---------- */
.club-link { color: inherit; text-decoration: none; }
.club-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
tbody tr.is-this > * { background: var(--accent-soft); }
tbody tr.is-this .c-club { font-weight: 700; }
.next-match {
  margin-top: 26px; padding: 18px 20px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule);
}
.next-match.on { border-color: var(--down); }
.nm-h { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.next-match.on .nm-h { color: var(--down); }
.nm-teams {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 12px 0 6px;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em;
}
.nm-teams span:first-child { text-align: right; }
.nm-teams a { color: inherit; text-decoration: none; }
.nm-teams a:hover { color: var(--accent); }
.nm-teams .tag { font-size: 11px; vertical-align: 4px; }
.nm-teams b { font-family: var(--mono); font-size: 0.8em; color: var(--muted); }
.next-match.on .nm-teams b { color: var(--ink); }
.nm-when { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.cl-cols { display: grid; gap: 0 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .cl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-sec { margin-top: 34px; }
.cl-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cl-sec-h h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.cl-sec-h a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cl-list { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.cl-row {
  display: grid; grid-template-columns: 58px auto 18px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.cl-row:last-child { border-bottom: 0; }
.cl-date { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cl-ha { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; }
.cl-opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-opp a { color: inherit; text-decoration: none; }
.cl-opp a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cl-time { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cl-score { margin-left: 6px; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.wdl { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--sheet); }
.wdl-W { background: var(--up); } .wdl-D { background: var(--muted); } .wdl-L { background: var(--down); }
.ctag { padding: 0 5px; border-radius: 3px; font-family: var(--mono); font-size: 10px; line-height: 16px; color: var(--muted); border: 1px solid var(--rule-strong); }
.ctag-cup { color: var(--mid); border-color: currentColor; }
.ctag-europe { color: var(--accent); border-color: var(--accent-line); }
.cl-more summary { margin: 8px 2px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); }
.cl-more .cl-list { margin-top: 8px; }
.cl-comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-comps li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; font-size: 14px; }
.cl-comps a { font-weight: 600; color: var(--ink); text-decoration: none; }
.cl-comps a:hover { color: var(--accent); }
.cl-comps li > span:last-child { margin-left: auto; color: var(--muted); }
/* Pyramid journey: every season on one ladder for the whole pyramid */
.lchart-cap { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.lchart-note { margin: -4px 0 10px; font-size: 12px; color: var(--muted); }
.lchart { display: grid; grid-template-columns: 54px minmax(0, 1fr); margin: 0 0 14px; }
.lside { position: relative; border-right: 1px solid var(--rule-strong); }
.ls { position: absolute; left: 0; right: 6px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  line-height: 1.1; overflow: hidden; border-top: 1px solid var(--rule); }
.ls:first-child { border-top: 0; }
.ls b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink); }
.ls i { font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--muted); }
.lplot { position: relative; }
.lplot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lplot .lb { fill: transparent; stroke: none; }
.lplot .lb.alt { fill: var(--hatch); }
.lplot .lb.top { fill: var(--accent-soft); }
.lplot .lp { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.ld { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--sheet); border: 2.5px solid var(--accent); box-sizing: border-box; cursor: pointer; }
.ld::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }   /* bigger target for fingers */
.ld.now { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-flash); }
.ld:hover, .ld:focus-visible, .ld.open { outline: none; z-index: 3; box-shadow: 0 0 0 4px var(--accent-flash); }
.ltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  display: none; min-width: 168px; padding: 8px 10px; border-radius: 6px; background: var(--ink); color: var(--paper);
  font: 400 12px/1.4 var(--body); text-align: left; width: max-content; max-width: calc(100vw - 24px); white-space: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.ltip b { display: block; font-family: var(--mono); font-weight: 500; font-size: 11px; opacity: 0.75; }
.ltip i { display: block; font-style: normal; opacity: 0.75; }
.ltip u { display: block; margin-top: 4px; text-decoration: none; font-weight: 600; }
.ltip.l { left: -6px; transform: none; }
.ltip.r { left: auto; right: -6px; transform: none; }
.ltip.below { bottom: auto; top: calc(100% + 10px); }
.ld:hover .ltip, .ld:focus-visible .ltip, .ld.open .ltip { display: block; }
.jmore { margin-top: 4px; }
.jmore > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 0; font-weight: 600; font-size: 14px; }
.jmore > summary::-webkit-details-marker { display: none; }
.jmore > summary::before { content: "▸"; color: var(--accent); transition: transform 0.15s; }
.jmore[open] > summary::before { transform: rotate(90deg); }
.jmore > summary span { font-weight: 400; color: var(--muted); font-size: 13px; }
.lx { grid-column: 2; position: relative; height: 26px; }
.lx span { position: absolute; top: 8px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.lx span::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 5px; background: var(--rule-strong); }
.lx span.hw { color: transparent; }
.lx span.first { transform: translateX(-6px); } .lx span.first::before { left: 6px; }
.lx span.last { transform: translateX(calc(-100% + 6px)); } .lx span.last::before { left: auto; right: 6px; }
@media (max-width: 600px) { .lx span.hn { color: transparent; } }
.jlist b em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); text-align: right; }
.jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.jlist li { display: grid; grid-template-columns: 70px 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--rule); }
.jlist li > span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.jlist .jl { min-width: 0; }
.jlist .jm { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; margin-left: 4px; }
.jlist .jm.up { color: var(--up); }
.jlist .jm.down { color: var(--down); }
.jlist a { color: var(--ink); text-decoration: none; }
.jlist a:hover { color: var(--accent); text-decoration: underline; }
.jlist b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .cl-row { grid-template-columns: 52px auto 14px minmax(0, 1fr) auto; gap: 6px; padding: 9px 10px; font-size: 13.5px; }
}

.cl-res { display: inline-flex; align-items: center; white-space: nowrap; }

/* Club page: one tab per competition */
.cl-tabs { margin: 0 0 12px; flex-wrap: wrap; overflow: visible; }
.cl-tabs .tf-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cl-tabs .tf-tab .ctag { margin: 0; }
.cl-tab-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; }
.cl-tab-h p { margin: 0; font-weight: 600; }
.cl-tab-h a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cl-tab-h a:hover { text-decoration: underline; }
.cl-comps-sec .tf-panel .cl-list { margin-top: 12px; }

/* UEFA league phase: places already made certain */
.qtag { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.02em; vertical-align: 1px; white-space: nowrap; border: 1px solid; }
.qtag.q-r16 { color: var(--up); border-color: var(--up); }
.qtag.q-po { color: var(--mid); border-color: var(--mid); }
.qtag.q-out { color: var(--muted); border-color: var(--rule-strong); }

/* Knockouts as it stands */
.pj-note { margin: 0 0 14px; font-size: 14px; color: var(--muted); max-width: 70ch; }
.pj-note strong { color: var(--ink); }
.pj-cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.pj-col { display: grid; gap: 10px; align-content: start; }
.pj-col .br-h { margin: 0; }
.pj-tie { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px; background: var(--sheet); border: 1px solid var(--rule); }
.pj-pair { display: grid; gap: 4px; font-size: 14px; min-width: 0; }
.pj-club { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.pj-club i { flex: none; width: 34px; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pj-club a, .pj-club { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-club a:hover { color: var(--accent); text-decoration: underline; }
.pj-v { font-family: var(--display); font-weight: 700; color: var(--muted); }
.pj-from { font-size: 13px; color: var(--muted); line-height: 1.35; }

/* Column headings stay in view under the header while a long table scrolls */
@supports (overflow: clip) {
  .table-wrap { overflow: clip; }
  thead th { position: sticky; top: calc(var(--bar-h, 0px) + var(--jump-h, 0px)); z-index: 2; background: var(--sheet); }
}

/* Table / Form switch */
.tview { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--hover); border: 1px solid var(--rule); }
.tview button { font: 600 12px/1 var(--body); color: var(--muted); background: none; border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.tview button span { font-weight: 400; }
.tview button.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 20, 28, 0.12); }
.c-pts .v-f, .by-form .c-pts .v-t { display: none; }
.by-form .c-pts .v-f { display: inline; }
.by-form tbody tr .c-pos { color: var(--muted); }
.by-form tbody tr.edge > * { border-bottom: 1px solid var(--rule); }
/* In form view the last five show on every screen, in place of goal difference on phones */
@media (max-width: 899px) { .by-form .c-form { display: table-cell; } }
@media (max-width: 599px) { .by-form .c-gd { display: none; } }
/* Club page: cup runs */
.cr + .cr { margin-top: 22px; }
.cr-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.cr-h h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; }
.cr-h h3 a { color: var(--ink); text-decoration: none; }
.cr-h h3 a:hover { color: var(--accent); }
.cr-h p { margin: 0; font-size: 14px; color: var(--muted); }
.cr-chart { grid-template-columns: 62px minmax(0, 1fr); }
.cr-l { border-top: 0; }
.cr-l b { font-size: 10px; font-weight: 500; color: var(--muted); }
.cr-line line { stroke: var(--accent); stroke-width: 2; opacity: 0.55; }
.cr-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.cr-dot.won { background: #E8B931; border-color: #B8860B; box-shadow: 0 0 0 3px rgba(232, 185, 49, 0.35); }
.cr-dot.now:not(.won) { background: var(--accent); }
/* Drawn in a round not played yet: a hollow ring on a dashed line, so it doesn't read as an early exit. */
.cr-dot.next:not(.won) { background: var(--sheet); border-style: dashed; }
.cr-line line.cr-next { stroke-dasharray: 4 4; }
.cr-h > a { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.cr-h > a:hover { text-decoration: underline; }
.cr-won { margin-left: 6px; padding: 0 5px; border-radius: 4px; font: 600 11px/16px var(--mono); color: #5C4200; background: #E8B931; }
.cr.tf-panel { margin-top: 0; }

/* Pyramid journey: champions, promotions, relegations */
.ld.m-champ { background: #E8B931; border-color: #B8860B; box-shadow: 0 0 0 3px rgba(232, 185, 49, 0.35); }
.ld.m-up { background: var(--up); border-color: var(--up); }
.ld.m-down { background: var(--down); border-color: var(--down); }
.ltip em { font-style: normal; font-weight: 600; }
.lkey { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 12px 54px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.lkey li { display: flex; align-items: center; gap: 6px; }
.lkey i { width: 10px; height: 10px; border-radius: 50%; }
.lkey i.m-champ { background: #E8B931; box-shadow: 0 0 0 2px rgba(232, 185, 49, 0.35); }
.lkey i.m-up { background: var(--up); }
.lkey i.m-down { background: var(--down); }
.cup-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--hover); border: 1px solid var(--rule); font-size: 14px; color: var(--muted); max-width: 70ch; }
/* A past season's cup with no page of its own yet */
.cup-chip.no-link { cursor: default; }
.cup-chip.no-link:hover { border-color: var(--accent-line); background: var(--accent-soft); }
/* Home page: the header search steps back while the big search under the headline is on screen */
body[data-page="home"] .bar .finder { transition: opacity 0.2s; }
body[data-page="home"].hero-find-on .bar .finder { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { body[data-page="home"] .bar .finder { transition: none; } }
/* Club page: one line of pyramid context under the position */
.cl-context { margin: -4px 0 14px; font-size: 14px; color: var(--ink); }
.cl-context i { font-style: normal; color: var(--muted); }
.cl-context .cx-up b { color: var(--up); }
.cl-context .cx-down b { color: var(--down); }
/* Promotion and relegation races */
.races-link { margin-top: 14px; }
.rc-grid { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 820px) { .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 12px 8px; min-width: 0; }
.rc-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; margin-bottom: 6px; }
.rc-h p { grid-column: 1 / -1; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.rc-h h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; }
.rc-h span { font-size: 12px; color: var(--muted); }
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px 36px; align-items: center; gap: 6px; padding: 6px 4px 6px 8px; border-bottom: 1px solid var(--rule); font-size: 14px; border-left: 3px solid transparent; }
.rc-row.z-top { border-left-color: var(--up); }
.rc-row.z-mid { border-left-color: var(--mid); }
.rc-row.z-down { border-left-color: var(--down); }
.rc-head { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; }
.rc-pos { font-variant-numeric: tabular-nums; color: var(--muted); }
.rc-club { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-p, .rc-pts { text-align: right; font-variant-numeric: tabular-nums; }
.rc-p { color: var(--muted); }
.rc-pts { font-weight: 700; }
.rc-cut { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 8px; margin: 2px 0; border-radius: 6px; font-size: 13px; background: var(--accent-soft); }
.rc-cut span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.rc-cut b { font-weight: 700; }
.rc-cut i { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--muted); }
.rc-cut.rc-up b { color: var(--up); }
.rc-cut.rc-down b { color: var(--down); }
/* Home: up and down this season */
.movers { margin-top: 36px; }
.mv-lede { margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.mv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mv-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.mv-c { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.mv-c .flag { width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
.mv-c:hover { color: var(--accent); }
.mvl-up b, .mvl-down b { font-size: 11px; margin-right: 6px; }
.mvl-up b { color: var(--up); }
.mvl-down b { color: var(--down); }
@media (max-width: 640px) {
  .mv-list li { grid-template-columns: minmax(0, 1fr); }
}
.mv-key { white-space: nowrap; margin-left: 6px; font-size: 12px; }
.mv-key b { font-size: 10px; margin: 0 3px 0 8px; }
.mv-key b.u { color: var(--up); }
.mv-key b.d { color: var(--down); }
.mv-more > summary { cursor: pointer; padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--accent); }
.mv-more[open] > summary { border-bottom: 1px solid var(--rule); }
.mv-more .mv-list { border-top: 0; }
/* Club page: one-line honours under the position, opening to the seasons */
.cl-honours { margin: -6px 0 14px; font-size: 14px; }
.cl-honours > summary { cursor: pointer; list-style: none; color: var(--ink); }
.cl-honours > summary::-webkit-details-marker { display: none; }
.cl-honours > summary::after { content: " ▾"; font-size: 11px; color: var(--muted); }
.cl-honours[open] > summary::after { content: " ▴"; }
.cl-honours > summary strong { font-weight: 600; color: var(--muted); }
.cl-honours ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.cl-honours li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.cl-honours li span { font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-honours li i { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--muted); }
.cl-honours .hn-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.cl-honours > summary small { font-size: 12px; color: var(--muted); }

/* Notes under a hand-kept competition (Australian Championship): who qualifies and the format. */
.comp-about { margin: 28px 0 0; max-width: 70ch; font-size: 15px; }
.comp-about h2 { font-size: 18px; margin: 20px 0 6px; }
.comp-about p { margin: 6px 0; }
.comp-q { margin: 6px 0; padding-left: 18px; display: grid; gap: 3px; }
.comp-q small, .comp-about small { color: var(--muted); }
.comp-src { color: var(--muted); font-size: 13px; }
.qtag.q-ac { color: var(--accent); border-color: var(--accent-line); text-decoration: none; }
a.qtag.q-ac:hover { background: var(--accent-soft); }

/* Two-level competition nav on a country page (Australia): competition families, then states. Both rows scroll
   sideways on small screens (.tf-tabs). */
.cnav { margin-top: 18px; }
.cnav-sub { margin-top: 6px; }
.cnav-sub .tf-tab { padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.cnav .tf-tab { flex: 0 0 auto; white-space: nowrap; }
.cnav > .tf-panel { margin-top: 12px; }
.cnav > .tf-panel > .pyr-cups { margin-top: 4px; border-top: 0; padding-top: 0; }
.js .is-off, .is-filtered { display: none !important; }

/* ---------- Club comparison ---------- */
/* Second club: the page's ink colour, a dashed line and square dots, so the two clubs differ in more than colour. */
.lplot .lp.lp-s1 { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; }
.ld.s1 { border-radius: 2px; border-color: var(--ink); width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.ld.s1.now { background: var(--ink); box-shadow: 0 0 0 3px var(--rule-strong); }
.ld.s1.m-up { background: var(--up); border-color: var(--up); }
.ld.s1.m-down { background: var(--down); border-color: var(--down); }
.ld.s1.m-champ { background: #E8B931; border-color: #B8860B; }
.ltip .lt-club { display: block; font-weight: 700; }
.ltip .lt-club.lt-s0 { color: var(--accent-flash); }
.lk-s0, .lk-s1 { display: inline-block; flex: none; width: 18px; height: 0; border-top: 3px solid var(--accent); border-radius: 0 !important; vertical-align: middle; position: relative; }
.lk-s1 { border-top: 2px dashed var(--ink); }
.lk-s0::after, .lk-s1::after { content: ""; position: absolute; left: 4px; top: -7px; width: 7px; height: 7px; border: 2px solid var(--accent); background: var(--sheet); border-radius: 50%; }
.lk-s1::after { border-color: var(--ink); border-radius: 1px; top: -6px; }
.lkey .lkey-club { color: var(--ink); font-weight: 600; }
.lkey .lkey-club i { width: 18px; height: 0; border-radius: 0; }
.lchart.tier-mode .ls i { font-size: 10px; }

/* Club page: the Compare button beside the journey heading, and its search box. */
.cl-sec-h .cmp-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--accent-line); background: var(--sheet); color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.cl-sec-h .cmp-btn::before { content: "⇄"; font-size: 14px; }
.cl-sec-h .cmp-btn:hover { background: var(--accent-soft); }
@media (max-width: 599px) {
  #journey > .cl-sec-h { flex-direction: column; align-items: flex-start; }
}
.cmp-box { margin: 0 0 14px; padding: 12px; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px; }
.cmp-box label, .cmp-pick label { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.cmp-field { position: relative; }
.cmp-field input {
  width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 8px;
}
.cmp-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.cmp-field .cmp-list { left: 0; right: auto; width: 100%; }

/* Comparison page */
.cmp-h span { overflow-wrap: anywhere; }
.cmp-pickers { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; margin-top: 20px; max-width: 760px; }
.cmp-pick .cmp-field input { background: var(--sheet); font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; }
.cmp-pick .cmp-field input::placeholder { font-family: var(--body); font-weight: 400; font-size: 15px; text-transform: none; letter-spacing: 0; }
.cmp-pick[data-side="a"] .cmp-field input { box-shadow: inset 4px 0 0 var(--accent); }
.cmp-pick[data-side="b"] .cmp-field input { box-shadow: inset 4px 0 0 var(--ink); }
.cmp-vs { padding-bottom: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--muted); text-transform: uppercase; }
@media (max-width: 559px) {
  .cmp-pickers { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cmp-vs { padding: 4px 0 0; font-size: 16px; }
}
.cmp-empty { margin: 28px 0; padding: 22px; border: 1px dashed var(--rule-strong); border-radius: 10px; color: var(--muted); text-align: center; }
.cmp-note { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--mid); background: var(--sheet); font-size: 14px; }
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cmp-controls select {
  height: 34px; padding: 0 28px 0 10px; font: 600 13px/1 var(--body); color: var(--ink); cursor: pointer;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 8px;
}
.cmp-custom { display: inline-flex; align-items: center; gap: 6px; }
.cmp-custom i { font-style: normal; color: var(--muted); }
.cmp-mode button { padding: 8px 12px; font-size: 13px; }
.cmp-actions { display: flex; gap: 8px; margin-left: auto; }
.cmp-act { height: 34px; padding: 0 14px; font: 600 13px/1 var(--body); color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 8px; cursor: pointer; white-space: nowrap; }
.cmp-act:hover { background: var(--hover); }
.cmp-act-main { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.cmp-act-main:hover { background: var(--accent); opacity: 0.9; }
@media (max-width: 559px) {
  .cmp-actions { margin-left: 0; width: 100%; }
  .cmp-actions .cmp-act { flex: 1; }
}
.cmp-export { margin: 12px 0 0; padding: 12px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.cmp-ex-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cmp-ex-h .tview button span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cmp-ex-btns { display: flex; gap: 8px; }
.cmp-preview { margin-top: 12px; display: flex; justify-content: center; }
.cmp-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 60vh; border-radius: 6px; box-shadow: 0 6px 24px rgba(14, 20, 28, 0.25); }
.cmp-wait { margin: 0; padding: 40px 0; color: var(--muted); font-size: 14px; }
.cmp-chart .cl-sec-h h2 { overflow-wrap: anywhere; }
.cmp-span { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.cmp-table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.cmp-table tr:last-child > * { border-bottom: 0; }
.cmp-table thead th { font-weight: 700; font-size: 13px; }
.cmp-table thead th .lk-s0, .cmp-table thead th .lk-s1 { margin-right: 8px; }
.cmp-table tbody th { font-weight: 400; color: var(--muted); white-space: nowrap; }
.cmp-sum .cmp-table td { font-weight: 600; }
.cmp-table .cmp-both { text-align: center; }
.cmp-seasons th:first-child { font-family: var(--mono); font-size: 12px; }
.cmp-seasons td { white-space: nowrap; }
.cmp-seasons td a { color: var(--ink); text-decoration: none; }
.cmp-seasons td a:hover { color: var(--accent); text-decoration: underline; }
.cmp-seasons .cs-out { color: var(--muted); font-size: 12px; font-style: italic; }
.cmp-seasons .jm { font-style: normal; font-size: 11px; }
.cmp-seasons .jm.up { color: var(--up); } .cmp-seasons .jm.down { color: var(--down); }
.cmp-shared { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.cmp-shared li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.cmp-shared li:last-child { border-bottom: 0; }
.cmp-shared .cs-season { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cmp-shared .cs-league a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cmp-shared .cs-league a:hover { color: var(--accent); }
.cmp-shared .cs-pos { display: flex; gap: 14px; }
.cmp-shared .cs-pos b { font-weight: 400; color: var(--muted); white-space: nowrap; }
.cmp-shared .cs-pos b.ahead { font-weight: 700; color: var(--ink); }
.cmp-shared .cs-pos i { margin-right: 6px; }
@media (max-width: 559px) {
  .cmp-shared li { grid-template-columns: 64px minmax(0, 1fr); }
  .cmp-shared .cs-pos { grid-column: 2; flex-wrap: wrap; gap: 4px 12px; }
}
.cmp-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; }
.cmp-links a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cmp-table thead th { position: static; text-align: left; }
.cmp-sum .cmp-table { table-layout: fixed; }
.cmp-sum .cmp-table th, .cmp-sum .cmp-table td { white-space: normal; overflow-wrap: anywhere; }
.cmp-sum .cmp-table tbody th { width: 34%; }
@media (max-width: 559px) {
  .cmp-table { font-size: 13px; }
  .cmp-table th, .cmp-table td { padding: 8px; }
  .cmp-sum .cmp-table tbody th { width: 30%; }
}

/* Club page: the summary under the name, in one block (position and form, what's at stake, context and home ground,
   honours, pyramid links), instead of a stack of separate lines and boxes. Built by scripts/club-header.mjs. */
.cl-sum { margin: 14px 0 0; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; display: grid; gap: 8px; }
.cl-sum > * { margin: 0; }
.cl-sum .lede { margin: 0; max-width: none; font-size: 15px; }
.cl-sum .cl-stake { font-size: 14px; color: var(--ink); }
.cl-sum .cl-stake strong { font-weight: 600; color: var(--muted); }
.cl-sum .cl-context { margin: 0; font-size: 14px; }
.cl-context > span + span::before { content: " · "; color: var(--muted); }
.cl-sum .cl-honours { margin: 0; }
.cl-sum .cl-routes { margin: 0; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 14px; }
.cl-sec .cl-tz { margin: 0 0 10px; font-size: 13px; }
@media (max-width: 599px) { .cl-sum { padding: 12px 14px; } .cl-sum .lede { font-size: 15px; } }
.cl-pens { display: block; font-size: 11px; font-weight: 500; color: var(--muted); text-align: right; white-space: nowrap; }
/* Brackets on a phone: long names wrap instead of being cut off, so the league tag (the point of a cup bracket)
   always shows. */
@media (max-width: 599px) {
  .bracket .tie-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
  .bracket .tie-name .tag { white-space: nowrap; }
  .br-col { flex-basis: 190px; }
}
/* Historical seasons: one row, "← 2016–17   2017–18 SEASONS ▾   2018–19 →"; the full list drops down from the middle. */
.season-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 14px 0 0; flex-wrap: nowrap; }
.season-row .seasons { margin: 0; position: relative; }
.season-row .seasons ul {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(520px, calc(100vw - 32px)); margin: 0; padding: 10px;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: 0 10px 28px rgba(14, 20, 28, 0.16);
}
.season-step {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--sheet); color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
}
a.season-step:hover { border-color: var(--accent); color: var(--accent); }
span.season-step { visibility: hidden; padding: 0; border: 0; }
.season-row .season-step.next { order: 3; }
.season-row .seasons { order: 2; }
.season-row .season-step.prev { order: 1; }
@media (max-width: 599px) {
  .season-row { gap: 6px; }
  .season-step { padding: 5px 8px; font-size: 11px; }
  .season-row .seasons ul { left: 50%; transform: translateX(-50%); }
}
.h1-season { white-space: nowrap; }
/* Country pages: the divisions row, stuck under the header while the tables scroll. The division on screen is
   marked (assets/app.js); on a wide screen it shows full names, on a phone the short ones. */
.tier-jump {
  position: sticky; top: var(--bar-h, 0px); z-index: 15; display: flex; gap: 4px; margin: 26px 0 0; padding: 8px 0;
  overflow-x: auto; scrollbar-width: none; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.tier-jump::-webkit-scrollbar { display: none; }
.tier-jump a {
  flex: none; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.tier-jump a:hover { color: var(--ink); border-color: var(--rule-strong); }
.tier-jump a.on { background: var(--ink); color: var(--paper); }
.tier-jump .tj-long { display: none; }
.tier-jump.tj-wide .tj-long { display: inline; }
.tier-jump.tj-wide .tj-short { display: none; }
.tier-jump + .tier { margin-top: 28px; }
/* Comparison: head to head */
.h2h-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.h2h-list li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.h2h-list li:last-child { border-bottom: 0; }
.h2h-when { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.h2h-what b { font-family: var(--mono); font-weight: 600; }
.h2h-what small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.h2h-next { margin: 0 0 10px; font-size: 14px; }
.h2h-next strong { color: var(--muted); font-weight: 600; }
@media (max-width: 599px) { .h2h-list li { grid-template-columns: 1fr; } }
/* Home on a phone: the pyramid (the point of the site) closer to the top. The headline is smaller, the intro is
   its first sentence, and the search box needs no explanation under it. */
@media (max-width: 599px) {
  .hero h1 { font-size: 2.35rem; }
  .hero .lede { font-size: 15px; margin-top: 10px; }
  .hero .lede-more, .hero-find-hint { display: none; }
  .hero-find { margin-top: 16px; }
}
/* The picker loops round (assets/app.js repeats the countries either side): a wider space after the last country,
   so the end of the previous lap doesn't peek in at the left edge beside England. */
.xp-tabs .xp-last { margin-right: 40px; }
/* Bracket: a slot for a tie the API hasn't added yet. */
.tie-tbc { min-height: 58px; align-content: center; justify-items: center; border-style: dashed; background: transparent; }
.tie-tbc .tie-note { margin: 0; font-size: 12px; }