/* WTT Stats — sports results archive.
   One system: tokens, shell, then components in page order.
   System fonts only; no external assets. */

:root {
  color-scheme: light;

  /* Neutrals: a cool grey ground so white data surfaces read as "paper". */
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceef2;
  --ink: #15181e;
  --ink-2: #454c59;
  /* Secondary metadata is set small, so it needs the 4.5:1 AA ratio for
     normal text against every surface it lands on — including --surface-3,
     the lightest of them (4.69:1 here). */
  --muted: #626a78;
  --line: #dee1e8;
  --line-2: #c8cdd8;

  /* One sporting accent. Table-tennis rubber red, used for identity and
     the current state — never as decoration. */
  --accent: #c8102e;
  --accent-ink: #9c0c24;
  --accent-soft: #fdeef0;

  --win: #0f7040;
  --win-soft: #e7f5ee;
  --loss: #a4212d;
  --loss-soft: #fbeced;

  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --r1: 3px;
  --r2: 6px;
  --r3: 10px;

  --shell: 1320px;

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

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 700; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s3); top: -3rem; z-index: 20;
  background: var(--ink); color: #fff; padding: var(--s2) var(--s4);
  border-radius: var(--r2); transition: top .15s;
}
.skip-link:focus { top: var(--s3); }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--s5); }
.muted { color: var(--muted); }

/* ---------- masthead ---------- */

.masthead {
  background: var(--ink);
  color: #fff;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 3px solid var(--accent);
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 56px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s2); flex: none; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(200 16 46 / 25%);
}
.brand__text { font-size: 1.05rem; letter-spacing: -.02em; }
.brand__text b { font-weight: 800; }

.mainnav { display: flex; gap: var(--s4); margin-right: auto; }
.mainnav a {
  padding: var(--s2) 0;
  font-weight: 600;
  color: rgb(255 255 255 / 78%);
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: #fff; text-decoration: none; border-bottom-color: rgb(255 255 255 / 35%); }
.mainnav a[aria-current] { color: #fff; border-bottom-color: var(--accent); }

.quicksearch { display: flex; gap: var(--s2); flex: none; }
.quicksearch input {
  width: 230px; padding: var(--s2) var(--s3);
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--r2);
  color: #fff; font: inherit; font-size: .875rem;
}
.quicksearch input::placeholder { color: rgb(255 255 255 / 55%); }
.quicksearch input:focus { background: rgb(255 255 255 / 16%); outline-color: #fff; }
.quicksearch button {
  padding: var(--s2) var(--s3);
  background: var(--accent); color: #fff;
  border: 0; border-radius: var(--r2);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.quicksearch button:hover { background: var(--accent-ink); }

/* main also carries .shell, which sets the horizontal padding — so the
   vertical rhythm needs equal specificity or .shell would zero it out. */
main.shell { padding-block: var(--s6) var(--s7); }

.sitefoot {
  border-top: 1px solid var(--line);
  padding: var(--s5) 0;
  color: var(--muted); font-size: .8125rem;
}

/* ---------- generic page furniture ---------- */

.pagehead { margin-bottom: var(--s5); }
.pagehead h1 { font-size: 1.75rem; }
.pagehead__sub { color: var(--muted); margin-top: var(--s1); font-size: .9375rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  margin-bottom: var(--s5);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.panel__head h2 { font-size: .9375rem; text-transform: uppercase; letter-spacing: .06em; }
.panel__more, .panel__note { margin-left: auto; font-size: .8125rem; color: var(--muted); }
.panel__more { font-weight: 600; color: var(--accent-ink); }
.panel--tight .panel__head { border-bottom: 0; }

.empty {
  padding: var(--s5); color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line-2);
  border-radius: var(--r3); text-align: center;
}
.empty a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }

/* ---------- tier badges ---------- */

.tier {
  display: inline-block;
  padding: 1px var(--s2);
  border-radius: var(--r1);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
  border-left: 3px solid var(--line-2);
}
/* Only the ranked tiers carry colour, so the hierarchy reads at a glance
   without turning the archive into a rainbow. */
.tier--grand-smash   { background: #fbe9ec; color: #8a0c20; border-left-color: #c8102e; }
.tier--finals        { background: #f0eafa; color: #4b2a86; border-left-color: #6b3fc4; }
.tier--cup-finals    { background: #f0eafa; color: #4b2a86; border-left-color: #9878d8; }
.tier--champions     { background: #fdf0e2; color: #8a4b06; border-left-color: #d9822b; }
.tier--star-contender{ background: #e7f0fb; color: #1d4d84; border-left-color: #2f74c0; }
.tier--contender     { background: var(--surface-3); color: var(--ink-2); border-left-color: #8b93a3; }

.flagcode {
  display: inline-block;
  margin-left: var(--s1);
  padding: 0 4px;
  background: var(--surface-3); color: var(--ink-2);
  border-radius: var(--r1);
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em;
  vertical-align: 1px;
}
.flagcode--lg { font-size: .8125rem; padding: 2px var(--s2); margin-left: 0; }

/* ---------- home ---------- */

.intro { margin-bottom: var(--s6); }
.intro h1 { font-size: 2.1rem; max-width: 20ch; }
.intro__lede { margin-top: var(--s3); color: var(--ink-2); max-width: 62ch; font-size: 1.0625rem; }

.bigsearch { display: flex; gap: var(--s2); margin-top: var(--s5); max-width: 620px; }
.bigsearch input {
  flex: 1; min-width: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1rem;
}
.bigsearch button {
  padding: var(--s3) var(--s5);
  background: var(--accent); color: #fff;
  border: 0; border-radius: var(--r2);
  font: inherit; font-weight: 600; cursor: pointer;
}
.bigsearch button:hover { background: var(--accent-ink); }
.bigsearch--page { margin: 0 0 var(--s5); }

.counters {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.counters dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.counters dd { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }

.champlist li { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.champlist li:last-child { border-bottom: 0; }
.champlist__who { display: block; font-weight: 600; }
.champlist__what { display: block; font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.champlist__what a { color: var(--ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s4); }
.chips a {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r2); font-weight: 600; font-size: .875rem;
}
.chips a:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.chips span { color: var(--muted); font-weight: 500; font-size: .75rem; }

.tierlist li { border-bottom: 1px solid var(--line); }
.tierlist li:last-child { border-bottom: 0; }
.tierlist a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); }
.tierlist a:hover { background: var(--surface-2); text-decoration: none; }
.tierlist__count { margin-left: auto; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* ---------- tournament rows ---------- */

.trows { border-top: 1px solid var(--line); }
.panel .trows { border-top: 0; }
.trow { border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow__link {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: var(--s4); align-items: center;
  padding: var(--s3) var(--s4);
}
.trow__link:hover { background: var(--surface-2); text-decoration: none; }

.trow__dates { font-size: .8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trow__dates b { font-weight: 700; }
.trow__dash { margin: 0 1px; }
.trow__dates small { display: block; color: var(--muted); font-size: .75rem; }

.trow__name { display: block; font-weight: 600; }
.trow__link:hover .trow__name { color: var(--accent-ink); }
.trow__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: 3px; font-size: .8125rem; color: var(--muted);
}
.trow__stats { display: flex; gap: var(--s4); font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.trow__stats b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.season { margin-bottom: var(--s5); }
.season__title {
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: 1.125rem; padding-bottom: var(--s2);
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
}
.season__count {
  font-size: .75rem; font-weight: 600; color: var(--muted);
  background: var(--surface-3); border-radius: 999px; padding: 1px var(--s2);
}
.season .trows {
  background: var(--surface);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r3) var(--r3);
}

/* ---------- filters ---------- */

.filters {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
  padding: var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  margin-bottom: var(--s5);
}
.filters__field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.filters__field--grow { flex: 1; min-width: 220px; }
.filters label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.filters input, .filters select {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .9375rem;
}
.filters__actions { display: flex; align-items: center; gap: var(--s3); }
.filters button {
  padding: var(--s2) var(--s5);
  background: var(--ink); color: #fff;
  border: 0; border-radius: var(--r2);
  font: inherit; font-weight: 600; cursor: pointer;
}
.filters button:hover { background: #000; }
.filters__reset { font-size: .875rem; color: var(--accent-ink); font-weight: 600; }

/* ---------- tournament header ---------- */

.thead {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r3);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.thead__top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.thead__season { font-size: .8125rem; color: var(--muted); font-weight: 600; }
.thead h1 { font-size: 1.9rem; }
.thead__facts {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}
.thead__facts li { display: flex; flex-direction: column; gap: 1px; }
.thead__label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.thead__id { margin-left: auto; }
.thead__id, .thead__id .thead__label { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- champions ---------- */

/* 13rem fits the longest real label ("Women's Singles Class 10") on one
   line without stranding whitespace on the common two-word ones. */
.champions__row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) auto;
  gap: var(--s4); align-items: center;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.champions__row:last-child { border-bottom: 0; }
.champions__discipline { font-weight: 700; font-size: .875rem; }
.champions__pair { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.champions__winner, .champions__runner { display: flex; align-items: baseline; gap: var(--s2); }
.champions__winner { font-weight: 600; }
.champions__runner { color: var(--ink-2); }
.champions__tag {
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap;
}
.champions__winner .champions__tag { color: var(--accent-ink); }
.champions__score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2); }

/* ---------- discipline tabs ---------- */

.disciplines {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  margin-bottom: var(--s5);
  border-bottom: 2px solid var(--line);
}
.disciplines__tab {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--ink-2);
}
.disciplines__tab:hover { background: var(--surface-2); text-decoration: none; }
.disciplines__tab b { font-size: .9375rem; }
.disciplines__tab span { font-size: .8125rem; color: var(--muted); }
.disciplines__tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.disciplines__tab.is-active span { color: var(--ink-2); }

/* ---------- draws, phases, rounds ---------- */

.draw { margin-bottom: var(--s6); }
.draw__title {
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: 1.25rem; margin-bottom: var(--s4);
}
.draw__count { font-size: .8125rem; font-weight: 500; color: var(--muted); }

.phase { margin-bottom: var(--s5); }
.phase__title {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2);
  padding-bottom: var(--s2); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line-2);
}
.phase__count {
  background: var(--surface-3); color: var(--muted);
  border-radius: 999px; padding: 0 var(--s2);
  font-size: .6875rem; font-variant-numeric: tabular-nums;
}

.round { margin-bottom: var(--s4); }
.round__title {
  display: flex; align-items: baseline; gap: var(--s2);
  font-size: .9375rem; margin-bottom: var(--s2);
}
.round__count { font-size: .75rem; font-weight: 500; color: var(--muted); }

.matches {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
}

/* Group pools: parallel, so they sit side by side rather than stacked
   as if one followed the other. */
.pools { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--s4); }
.pool__title { font-size: .875rem; margin-bottom: var(--s2); }

/* ---------- match row ---------- */

.match { border-bottom: 1px solid var(--line); padding: var(--s2) var(--s3); }
.match:last-child { border-bottom: 0; }
.match:hover { background: var(--surface-2); }

.match__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s3); align-items: center;
}
.match__side { min-width: 0; color: var(--muted); }
.match__side.is-winner { color: var(--ink); font-weight: 600; }
.match__side--right { text-align: right; }

.match__score {
  display: flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums; font-size: 1rem;
  color: var(--muted);
  padding: 0 var(--s2);
}
.match__score b { color: var(--muted); font-weight: 600; }
.match__score b.is-winner { color: var(--ink); font-weight: 800; }

.side { display: inline; }
.side__player { font-weight: inherit; }
.side__player:hover { color: var(--accent-ink); }
.side__sep { color: var(--line-2); margin: 0 3px; }
.side__player--plain { color: inherit; }

.games {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: 2px; padding-left: 0;
  font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.matches--compact .games { font-size: .6875rem; }

/* ---------- player header ---------- */

.phead {
  display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-end; justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r3);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.phead h1 { font-size: 1.9rem; }
.phead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); font-size: .875rem; color: var(--ink-2); }

.record { display: flex; flex-wrap: wrap; gap: var(--s5); }
.record dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.record dd { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.record .is-win { color: var(--win); }
.record .is-loss { color: var(--loss); }

.form { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s3) var(--s4) var(--s4); }
.form__item {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r1);
  font-size: .75rem; font-weight: 700;
}
.form__item.is-win { background: var(--win-soft); color: var(--win); }
.form__item.is-loss { background: var(--loss-soft); color: var(--loss); }

.titles li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s3);
  align-items: baseline;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
}
.titles li:last-child { border-bottom: 0; }
.titles__year { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-ink); }
.titles__event { font-weight: 600; }
.titles__discipline { color: var(--muted); font-size: .8125rem; }

/* ---------- tables ---------- */

.histseason { padding: var(--s4); border-bottom: 1px solid var(--line); }
.histseason:last-child { border-bottom: 0; }
.histseason__year { font-size: 1rem; margin-bottom: var(--s2); color: var(--ink-2); }

.tablewrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dtable th, .dtable td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--line); }
.dtable thead th {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable a { font-weight: 600; }
.dtable a:hover { color: var(--accent-ink); }

.outcome { font-weight: 600; font-size: .8125rem; }
.outcome--title { color: var(--accent-ink); }

/* ---------- player match history ---------- */

.phistory__item {
  display: grid;
  grid-template-columns: 32px minmax(160px, 1.1fr) minmax(0, 1.4fr) auto;
  gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.phistory__item:last-child { border-bottom: 0; }
.phistory__item:hover { background: var(--surface-2); }

.phistory__result {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--r1); font-size: .75rem; font-weight: 700;
  background: var(--surface-3); color: var(--muted);
}
.phistory__result.is-win { background: var(--win-soft); color: var(--win); }
.phistory__result.is-loss { background: var(--loss-soft); color: var(--loss); }

.phistory__context { min-width: 0; }
.phistory__event { display: block; font-weight: 600; }
.phistory__event:hover { color: var(--accent-ink); }
.phistory__round { display: block; font-size: .75rem; color: var(--muted); }

.phistory__versus { min-width: 0; font-size: .875rem; }
.phistory__partner { display: block; font-size: .75rem; color: var(--muted); }
.phistory__opponent { display: block; }

.phistory__score { text-align: right; white-space: nowrap; }
.phistory__score b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.phistory__games { display: block; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- player list ---------- */

.plist {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r3);
  overflow: hidden; margin-bottom: var(--s4);
}
.panel .plist { border: 0; border-radius: 0; margin-bottom: 0; }
.plist li { border-bottom: 1px solid var(--line); }
.plist li:last-child { border-bottom: 0; }
.plist a { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); }
.plist a:hover { background: var(--surface-2); text-decoration: none; }
.plist__name { font-weight: 600; }
.plist a:hover .plist__name { color: var(--accent-ink); }
.plist__count { margin-left: auto; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- pagination ---------- */

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s4); }
.pager__step {
  padding: var(--s2) var(--s4);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r2); font-weight: 600; font-size: .875rem;
}
.pager__step:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.pager__step.is-disabled { color: var(--muted); border-color: var(--line); background: var(--surface-2); }
.pager__status { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .home-columns { grid-template-columns: minmax(0, 1fr); }
  .champions__row { grid-template-columns: 11rem minmax(0, 1fr) auto; }
  /* Two long doubles pairs side by side stop fitting here. */
  .champions__pair { flex-direction: column; gap: var(--s1); }
}

@media (max-width: 860px) {
  .masthead__inner { flex-wrap: wrap; gap: var(--s3); padding-block: var(--s2); }
  .mainnav {
    order: 3; width: 100%; margin: 0; gap: var(--s5);
    padding-top: var(--s1);
    border-top: 1px solid rgb(255 255 255 / 12%);
  }
  .quicksearch { margin-left: auto; }
  .quicksearch input { width: 180px; }

  .phistory__item { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .phistory__versus { grid-column: 2 / -1; }
  .phistory__score { grid-column: 3; grid-row: 1; }
}

@media (max-width: 700px) {
  main.shell { padding-block: var(--s5) var(--s6); }
  .shell { padding-inline: var(--s4); }

  .intro h1 { font-size: 1.625rem; }
  .counters { gap: var(--s5); }
  .counters dd { font-size: 1.25rem; }

  .thead, .phead { padding: var(--s4); }
  .thead h1, .phead h1 { font-size: 1.375rem; }
  .thead__facts { gap: var(--s3) var(--s5); }
  .thead__id { margin-left: 0; }

  /* Dates move above the name so the tournament title keeps full width. */
  .trow__link { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .trow__dates { display: flex; align-items: baseline; gap: var(--s1); order: -1; }
  .trow__dates small { display: inline; }
  .trow__stats { gap: var(--s3); font-size: .75rem; }

  .champions__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
  .champions__discipline { grid-column: 1 / -1; }
  .champions__pair { flex-direction: column; gap: var(--s1); }

  .filters { gap: var(--s3); }
  .filters__field, .filters__field--grow { min-width: 100%; }
  .filters__actions { width: 100%; }
  .filters button { flex: 1; }

  .disciplines { gap: 0; }
  .disciplines__tab { flex-direction: column; gap: 0; padding: var(--s2) var(--s3); }
  .disciplines__tab span { font-size: .6875rem; }

  .pools { grid-template-columns: minmax(0, 1fr); }

  /* Match rows stack: each side on its own line with its score beside it,
     which keeps doubles pairs readable instead of squeezing four names. */
  .match__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); }
  .match__side--right { text-align: left; }
  .match__score {
    grid-column: 2; grid-row: 1 / span 2;
    flex-direction: column; align-items: center; gap: 0;
    padding: 0; font-size: .9375rem;
  }
  .match__score span { display: none; }

  .phistory__item { grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--s2); }
  .phistory__versus { font-size: .8125rem; }

  .record { gap: var(--s4); width: 100%; }
  .record dd { font-size: 1.125rem; }
  .titles li { grid-template-columns: 48px minmax(0, 1fr); }
  .titles__discipline { grid-column: 2; }
}

/* ---------- head to head ---------- */

.phead__action {
  font-weight: 600; font-size: .8125rem; color: var(--accent-ink);
  padding: 2px var(--s2);
  border: 1px solid var(--line-2); border-radius: var(--r2);
}
.phead__action:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

/* picker */

.picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s4); align-items: start;
  margin-bottom: var(--s5);
}
.picker__vs {
  align-self: center;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
}

.pickside {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s4);
  min-width: 0;
}
.pickside__label {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: var(--s2);
}
.pickside__name { display: block; font-size: 1.25rem; font-weight: 700; }
.pickside__name:hover { color: var(--accent-ink); }
.pickside__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: .8125rem; }
.pickside__change {
  display: inline-block; margin-top: var(--s3);
  font-size: .8125rem; font-weight: 600; color: var(--accent-ink);
}

/* autocomplete */

.pickbox { position: relative; }
.pickbox__field { display: flex; gap: var(--s2); }
.pickbox__field input {
  flex: 1; min-width: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .9375rem;
}
.pickbox__field button {
  padding: var(--s2) var(--s4);
  background: var(--ink); color: #fff;
  border: 0; border-radius: var(--r2);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.pickbox__field button:hover { background: #000; }

.pickbox__results { position: relative; }
.pickbox__list {
  position: absolute; z-index: 5; left: 0; right: 0; top: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  box-shadow: 0 10px 28px rgb(21 24 30 / 12%);
  max-height: 17rem; overflow-y: auto;
}
.pickbox__option {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}
.pickbox__option:last-child { border-bottom: 0; }
.pickbox__option:hover,
.pickbox__option.is-active { background: var(--accent-soft); text-decoration: none; }
.pickbox__name { font-weight: 600; }
.pickbox__meta { margin-left: auto; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pickbox__hint { padding: var(--s2) 0 0; font-size: .8125rem; color: var(--muted); }

/* segmented control */

.segmented {
  display: inline-flex; padding: 3px;
  background: var(--surface-3); border-radius: var(--r2);
  margin-bottom: var(--s5);
}
.segmented__option {
  padding: var(--s2) var(--s4);
  border-radius: calc(var(--r2) - 2px);
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
}
.segmented__option:hover { color: var(--ink); text-decoration: none; }
.segmented__option.is-active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgb(21 24 30 / 12%);
}

/* scoreline */

.h2h-board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r3);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.h2h-board--empty { border-top-color: var(--line-2); }

.scoreline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s3) var(--s4); align-items: center;
}
.scoreline__player { min-width: 0; }
.scoreline__player--right { text-align: right; }
.scoreline__name { display: block; font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.scoreline__name:hover { color: var(--accent-ink); }
.scoreline__player .flagcode { margin-top: var(--s2); margin-left: 0; }

.scoreline__tally { text-align: center; }
.scoreline__numbers {
  display: flex; align-items: baseline; justify-content: center; gap: var(--s2);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.scoreline__numbers b { font-size: 2.5rem; font-weight: 800; color: var(--muted); }
.scoreline__numbers b.is-lead { color: var(--ink); }
.scoreline__dash { color: var(--line-2); font-size: 1.5rem; }
.scoreline__caption {
  margin-top: var(--s2);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600;
}

.scoreline__bar {
  grid-column: 1 / -1;
  height: 6px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.scoreline__fill { display: block; height: 100%; background: var(--accent); }
.scoreline__shares {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .875rem;
}
.scoreline__shares small {
  font-weight: 500; font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}

/* tallies */

.h2h-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s5); }
.h2h-grid .panel { margin-bottom: 0; }

.tally__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 72px;
  gap: var(--s3); align-items: baseline;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
}
.tally__row:last-child { border-bottom: 0; }
.tally__row--total { background: var(--surface-2); }
.tally__label { font-weight: 600; font-size: .875rem; }
.tally__count { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tally__split {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.tally__split b { color: var(--muted); font-weight: 600; }
.tally__split b.is-lead { color: var(--ink); font-weight: 800; }

/* meetings */

.meeting { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.meeting:last-child { border-bottom: 0; }
.meeting:hover { background: var(--surface-2); }

.meeting__context { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.meeting__event { font-weight: 600; font-size: .9375rem; }
.meeting__event:hover { color: var(--accent-ink); }
.meeting__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2);
  font-size: .75rem; color: var(--muted);
}

.meeting__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s3); align-items: center;
  margin-top: var(--s2);
}
.meeting__side { min-width: 0; color: var(--muted); }
.meeting__side.is-winner { color: var(--ink); font-weight: 600; }
.meeting__side--right { text-align: right; }
/* The compared player, picked out of a doubles pair. */
.side__player.is-focus { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

.meeting__score {
  display: flex; align-items: baseline; gap: 3px;
  padding: 0 var(--s2);
  font-variant-numeric: tabular-nums; font-size: 1rem;
}
.meeting__score b { color: var(--muted); font-weight: 600; }
.meeting__score b.is-winner { color: var(--ink); font-weight: 800; }

.meeting__games { margin-top: var(--s1); }
.meeting__games summary {
  display: inline-block; cursor: pointer;
  font-size: .75rem; color: var(--muted);
}
.meeting__games summary:hover { color: var(--accent-ink); }
.meeting__games .games { margin-top: var(--s1); }

@media (max-width: 860px) {
  .h2h-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  /* The picker stacks with VS between the two panels. */
  .picker { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .picker__vs { width: 36px; height: 36px; justify-self: center; font-size: .75rem; }

  .h2h-board { padding: var(--s4); }
  .scoreline { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .scoreline__name { font-size: 1.0625rem; }
  /* Score column spans both name rows, so the two players stack on the left. */
  .scoreline__tally { grid-column: 2; grid-row: 1 / span 2; }
  .scoreline__numbers b { font-size: 1.75rem; }
  .scoreline__player--right { text-align: left; }

  .segmented { display: flex; width: 100%; }
  .segmented__option { flex: 1; text-align: center; padding: var(--s2); }

  .tally__row { grid-template-columns: minmax(0, 1fr) auto auto; }

  /* Each team on its own line with the score beside both. */
  .meeting__result { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); }
  .meeting__side--right { text-align: left; }
  .meeting__score {
    grid-column: 2; grid-row: 1 / span 2;
    flex-direction: column; align-items: center; gap: 0; padding: 0;
  }
  .meeting__score span { display: none; }

  .pickbox__list { position: static; box-shadow: none; max-height: none; }
}

/* ---------- world / globe ---------- */

.worldstats {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  margin: 0 0 var(--s5);
}
.worldstats dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.worldstats dd { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.worldstats dd small { font-size: .8125rem; font-weight: 500; color: var(--muted); margin-left: var(--s1); }
.worldstats dd a:hover { color: var(--accent-ink); }

/* Colour comes from the same tokens as the rest of the site: the ramp runs
   from a light tint of the accent to a deep shade of it. */
.world {
  --globe-low: #f3b4be;
  --globe-high: #7a0a1c;
  --globe-land: #f6f7fa;
  --globe-sea: #e3e9f1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--s5);
  align-items: stretch;
}

.world__stage {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  min-width: 0;
}

.globe {
  position: relative;
  width: min(100%, 72vh, 720px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--surface-2);
  /* The globe takes the gesture; the page keeps scrolling everywhere else. */
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.globe.is-dragging { cursor: grabbing; }
/* Before any script has run there is no globe to size for. */
.globe:not([data-state]) { aspect-ratio: auto; touch-action: auto; cursor: auto; }

.globe__svg { display: block; width: 100%; height: 100%; }
.g-sphere { fill: var(--globe-sea); }
.g-grat { fill: none; stroke: rgb(21 24 30 / 7%); stroke-width: .5px; pointer-events: none; }
.g-rim { fill: none; stroke: var(--line-2); stroke-width: 1px; pointer-events: none; }

/* Countries with players keep the shade the script set as an attribute; only
   the empty ones get their colour from here. */
.g-country { stroke: #fff; stroke-width: .5px; stroke-linejoin: round; }
.g-country:not(.has-players) { fill: var(--globe-land); stroke: #cfd5df; }
.g-country.has-players { cursor: pointer; }
.g-country.has-players:hover { stroke: var(--ink); stroke-width: 1px; }
.g-selected__path { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-linejoin: round; pointer-events: none; }

.g-bubble { cursor: pointer; }
.g-bubble circle { fill: var(--ink); fill-opacity: .92; stroke: #fff; stroke-width: 1.5px; }
.g-bubble:hover circle { fill: #000; }
.g-bubble.is-selected circle { fill: var(--accent); }
.g-bubble text { fill: #fff; text-anchor: middle; pointer-events: none; font-family: var(--font); }
.g-bubble__n { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-bubble__code { font-size: 7.5px; font-weight: 600; letter-spacing: .04em; fill-opacity: .8; }

.globe__status, .globe__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0; padding: var(--s5);
  text-align: center; color: var(--muted); font-size: .9375rem;
}
.globe__fallback { position: static; padding: var(--s6) var(--s4); }
.globe[data-state="error"] .globe__status { color: var(--loss); }
/* A quiet disc while the map data downloads. */
.globe[data-state="loading"]::before {
  content: ""; position: absolute; inset: 6%;
  border-radius: 50%; background: var(--globe-sea);
}
.globe[data-state="loading"] .globe__status { z-index: 1; }

.globe__tip {
  position: absolute; left: 0; top: 0; z-index: 4;
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s2) var(--s3);
  background: var(--ink); color: #fff;
  border-radius: var(--r2);
  font-size: .8125rem; line-height: 1.3;
  pointer-events: none; white-space: nowrap;
}
.globe__tip span { color: rgb(255 255 255 / 75%); font-variant-numeric: tabular-nums; }

.globe__bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s4);
}
.globe__buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.globe__buttons button {
  min-width: 36px; min-height: 36px; padding: 0 var(--s3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.globe__buttons button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.globe__buttons button:disabled { color: var(--line-2); cursor: default; }
.globe__hint { margin: var(--s3) 0 0; text-align: center; font-size: .75rem; color: var(--muted); }

.globe__legend { display: flex; align-items: flex-end; gap: var(--s4); font-size: .75rem; color: var(--muted); }
.legend__title { align-self: flex-start; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; }
.legend__none { display: inline-flex; align-items: center; gap: var(--s1); }
.legend__none::before {
  content: ""; width: 14px; height: 8px;
  background: var(--globe-land); border: 1px solid #cfd5df; border-radius: 2px;
}
.legend__scale { position: relative; width: 190px; margin: 0 var(--s2) 0 var(--s2); padding-bottom: 16px; }
.legend__ramp { height: 8px; border-radius: 2px; }
.legend__ticks span { position: absolute; top: 12px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }

/* side column */

.world__side { position: relative; min-width: 0; min-height: 480px; }
.world__sidein { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s3); }

.worldpick {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s3) var(--s4);
}
.worldpick label {
  display: block; margin-bottom: var(--s1);
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.worldpick__row { display: flex; gap: var(--s2); }
.worldpick select {
  flex: 1; min-width: 0; padding: var(--s2) var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .9375rem;
}
.worldpick button {
  padding: var(--s2) var(--s4); background: var(--ink); color: #fff;
  border: 0; border-radius: var(--r2); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}

.worldpanel {
  flex: 1; min-height: 0; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
}
.worldlist__title {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s3) var(--s4);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: .875rem; text-transform: uppercase; letter-spacing: .06em;
}

.wtable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.wtable th, .wtable td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.wtable thead th {
  position: sticky; top: 0; background: var(--surface);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.wtable tbody th { font-weight: 600; }
.wtable tbody th a:hover { color: var(--accent-ink); }
.wtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.wtable tr.is-selected { background: var(--accent-soft); }
.wtable__off { margin-left: var(--s2); font-size: .6875rem; font-weight: 500; color: var(--muted); }
.wtable__parts { display: block; margin-top: 1px; font-size: .75rem; font-weight: 400; color: var(--muted); }
.wtable__players { position: relative; width: 44%; }
.wtable__bar {
  position: absolute; left: var(--s3); top: 50%; height: 6px; transform: translateY(-50%);
  width: calc((100% - 56px) * var(--w) / 100);
  background: var(--accent); opacity: .5; border-radius: 2px;
}
.wtable__n { position: relative; }

/* country panel */

.wcountry__head { padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
.wcountry__back { display: inline-block; margin-bottom: var(--s2); font-size: .8125rem; font-weight: 600; color: var(--accent-ink); }
.wcountry__head h2 { font-size: 1.5rem; }
.wcountry__head h2:focus { outline: none; }
.wcountry__head h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wcountry__codes { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.wcountry__codes .flagcode { margin-left: 0; }
.wcountry__note { padding: var(--s3) var(--s4); font-size: .875rem; color: var(--muted); }
.wcountry__sub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s2);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2);
}
.wcountry__subnote { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.wcountry__more { padding: var(--s3) var(--s4) var(--s4); font-size: .875rem; font-weight: 600; }
.wcountry__more a { color: var(--accent-ink); }

.wstats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.wstats > div { padding: var(--s3) var(--s4); }
.wstats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.wstats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.wstats dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.wstats dd { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.wparts li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3);
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); font-size: .875rem;
}
.wparts__name { font-weight: 600; }
.wparts__num { color: var(--muted); font-variant-numeric: tabular-nums; }

.wplayers li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2);
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line);
}
.wplayers__name { font-weight: 600; }
.wplayers__name:hover { color: var(--accent-ink); }
.wplayers__meta {
  display: flex; flex-wrap: wrap; gap: 0 var(--s1); flex-basis: 100%;
  font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .world { grid-template-columns: minmax(0, 1fr); }
  .world__side { min-height: 0; }
  .world__sidein { position: static; }
  .worldpanel { overflow: visible; }
  .worldlist { max-height: 26rem; overflow-y: auto; }
  .globe { width: min(100%, 78vh, 560px); }
}

@media (max-width: 700px) {
  .world__stage { padding: var(--s3); }
  .worldstats { gap: var(--s2) var(--s5); }
  .worldstats dd { font-size: 1.125rem; }
  /* Touch targets: at least 44px square on the controls. */
  .globe__buttons button { min-width: 44px; min-height: 44px; }
  .globe__bar { flex-direction: column; align-items: stretch; }
  .globe__legend { flex-wrap: wrap; }
  .legend__scale { width: min(100%, 220px); }
  .worldpick select, .worldpick button { min-height: 44px; }
  .wtable__players { width: 38%; }
}

/* Author display rules above would otherwise win over the hidden attribute. */
.world [hidden], .worldstats [hidden] { display: none !important; }

/* Scrolling the panel into view must clear the sticky masthead, which wraps
   to two rows (~9.5rem) on narrow screens. */
.worldpanel { scroll-margin-top: 4.5rem; }
@media (max-width: 860px) { .worldpanel { scroll-margin-top: 10.5rem; } }