/* ==========================================================================
   Design tokens — every component styles against these variables only.
   SEL palette (oklch). Light is the default; [data-theme="dark"] overrides.
   The inline script in base.html sets data-theme before first paint
   (prefers-color-scheme or the user's saved choice), so there is no flash.
   ========================================================================== */
:root {
  color-scheme: light;
  --radius: 0.15rem;
  --radius-lg: 0.25rem;

  --background: oklch(0.985 0.002 250);
  --foreground: oklch(0.20 0.02 260);
  --card: oklch(0.995 0.001 250);
  --popover: oklch(0.995 0.001 250);

  /* Primary — SEL teal. Fills use --primary; teal text (links, selected
     states) uses --primary-text, which stays readable on dark surfaces. */
  --primary: oklch(0.35 0.08 195);
  --primary-hover: oklch(0.40 0.09 195);
  --primary-foreground: oklch(0.98 0 0);
  --primary-tint: oklch(0.93 0.03 195);
  --primary-text: var(--primary);

  /* Energetic accents — the "club colours" used for stripes and flair */
  --pop-amber: oklch(0.75 0.14 75);
  --pop-coral: oklch(0.68 0.16 25);
  --pop-blue: oklch(0.60 0.12 245);

  --secondary: oklch(0.955 0.005 250);
  --secondary-foreground: oklch(0.25 0.02 260);
  --muted: oklch(0.94 0.006 250);
  --muted-foreground: oklch(0.45 0.015 260);
  --destructive: oklch(0.55 0.2 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.91 0.005 250);
  --input: oklch(0.97 0.003 250);
  --ring: oklch(0.35 0.08 195);

  /* Status badges */
  --badge-pending: oklch(0.93 0.07 95);
  --badge-pending-foreground: oklch(0.40 0.10 80);
  --badge-running: oklch(0.92 0.04 250);
  --badge-running-foreground: oklch(0.40 0.10 250);
  --badge-success: oklch(0.92 0.05 155);
  --badge-success-foreground: oklch(0.38 0.10 155);
  --badge-error: oklch(0.92 0.04 25);
  --badge-error-foreground: oklch(0.45 0.15 25);
  --badge-info: oklch(0.93 0.04 300);
  --badge-info-foreground: oklch(0.40 0.12 300);
  --badge-neutral: oklch(0.94 0.006 250);
  --badge-neutral-foreground: oklch(0.45 0.015 260);

  --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --shadow-pop: 0 4px 16px rgb(16 24 40 / 0.14);

  /* Inline control glyphs — stroke colour matches --muted-foreground per theme */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m4 6.2 4 4 4-4'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23656b7c' stroke-width='1.6'/%3E%3Cpath stroke='%23656b7c' stroke-width='1.6' stroke-linecap='round' d='m10.5 10.5 3 3'/%3E%3C/svg%3E");

  /* Text colours for gains and losses (ladder movement, ELO deltas) */
  --success: var(--badge-success-foreground);
  --danger: var(--badge-error-foreground);

  /* Kinds of game in stacked charts: season, friendly, tournament */
  --series-season: #008f83;
  --series-friendly: #c77618;
  --series-tournament: #5d52b4;
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --popover: oklch(0.208 0.042 265.755);

  /* Primary — lighter teal for dark-mode visibility */
  --primary: oklch(0.55 0.1 195);
  --primary-hover: oklch(0.60 0.1 195);
  --primary-foreground: oklch(0.15 0.03 195);
  --primary-tint: oklch(0.28 0.05 195);
  --primary-text: oklch(0.82 0.07 195);

  --pop-amber: oklch(0.80 0.13 75);
  --pop-coral: oklch(0.72 0.14 25);
  --pop-blue: oklch(0.68 0.11 245);

  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.15 0.03 25);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.55 0.1 195);

  --badge-pending: oklch(0.30 0.06 85);
  --badge-pending-foreground: oklch(0.82 0.10 85);
  --badge-running: oklch(0.28 0.05 250);
  --badge-running-foreground: oklch(0.80 0.08 250);
  --badge-success: oklch(0.28 0.05 155);
  --badge-success-foreground: oklch(0.80 0.10 155);
  --badge-error: oklch(0.30 0.06 25);
  --badge-error-foreground: oklch(0.80 0.12 25);
  --badge-info: oklch(0.28 0.05 300);
  --badge-info-foreground: oklch(0.80 0.10 300);
  --badge-neutral: oklch(0.28 0.02 250);
  --badge-neutral-foreground: oklch(0.75 0.02 250);

  --shadow: 0 1px 3px rgb(0 0 0 / 0.5);
  --shadow-pop: 0 6px 20px rgb(0 0 0 / 0.55);

  --series-season: #009e98;
  --series-friendly: #c7852a;
  --series-tournament: #7971d0;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a3adc2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m4 6.2 4 4 4-4'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23a3adc2' stroke-width='1.6'/%3E%3Cpath stroke='%23a3adc2' stroke-width='1.6' stroke-linecap='round' d='m10.5 10.5 3 3'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
/* Components that set display (.btn, .callout, …) must still hide. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.55;
  font-size: 0.9375rem;
}

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

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.1rem; font-weight: 650; margin: 1.75rem 0 0.75rem; }
h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 0.5rem; }

.container { max-width: 1320px; margin: 0 auto; padding: 1.5rem 2rem 4rem; }
@media (max-width: 900px) { .container { padding: 1rem 1rem 3rem; } }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.825rem; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Section headings used between card groups — gradient underline, app-wide */
.section-title {
  position: relative;
  margin: 2rem 0 0.85rem;
  padding-bottom: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--foreground);
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--primary), var(--pop-amber) 45%, transparent 75%);
}
.section-title:first-child { margin-top: 0; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* The "court line": a thin club-colours stripe across the top of every page */
.navbar::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--pop-blue), var(--pop-amber), var(--pop-coral));
}
.navbar-inner {
  max-width: 1320px; margin: 0 auto; padding: 0.55rem 2rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
@media (max-width: 900px) { .navbar-inner { padding: 0.55rem 1rem; gap: 0.75rem; } }

.navbar .brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--foreground);
  font-size: 1.05rem; font-weight: 650; letter-spacing: -0.015em;
}
.navbar .brand:hover { color: var(--foreground); text-decoration: none; }
.navbar .brand-icon { display: block; width: 38px; height: 38px; flex: none; }
.navbar .brand-name {
  line-height: 1; white-space: nowrap;
  font-size: 1.25rem;
}
.navbar .brand-name strong {
  font-weight: 850; letter-spacing: 0.035em; color: var(--primary-text);
}
.navbar .brand-name span { font-weight: 400; }

.navbar nav { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.navbar nav a {
  color: var(--muted-foreground); padding: 0.35rem 0.7rem;
  border-radius: var(--radius); font-weight: 500; font-size: 0.9rem;
}
.navbar nav a:hover { color: var(--foreground); text-decoration: none; background: var(--secondary); }
.navbar nav a.active { color: var(--primary-text); background: var(--primary-tint); font-weight: 600; }
/* Active-challenge flag: the span itself is invisible (screen-reader text
   only) — its presence recolours the parent nav link. HTMX swaps it
   out-of-band, so the highlight updates live without a number badge. */
.navbar nav a:not(.active):has(.nav-flag:not([hidden])) {
  color: var(--pop-amber);
  font-weight: 600;
}
.navbar .spacer { flex: 1; }

/* User dropdown — separated from navigation without a permanent button box */
.user-menu {
  position: relative;
  margin-left: 0.15rem;
  padding-left: 1rem;
}
.user-menu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--border);
}
.user-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 0.65rem 0.28rem 0.35rem; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 550; color: var(--foreground); background: transparent;
  transition: background 0.12s;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--secondary); }
.user-menu[open] > summary { background: var(--primary-tint); }
.user-menu > summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.user-menu > summary::after {
  content: ""; width: 0.5em; height: 0.5em; margin-top: -0.2em;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg); transition: transform 0.15s;
}
.user-menu[open] > summary::after { transform: rotate(-135deg); margin-top: 0.2em; }
.user-menu .avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--pop-blue));
  color: var(--primary-foreground);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px color-mix(in oklch, var(--primary) 45%, transparent);
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 13rem;
  background: var(--popover); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 0.35rem; z-index: 30;
}
.menu-panel .menu-heading {
  padding: 0.45rem 0.7rem 0.3rem; font-size: 0.75rem;
  color: var(--muted-foreground); border-bottom: 1px solid var(--border); margin-bottom: 0.3rem;
}
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.45rem 0.7rem; border: 0; background: none; cursor: pointer;
  color: var(--foreground); font-size: 0.875rem; text-align: left;
  border-radius: var(--radius); font-family: inherit;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--secondary); text-decoration: none; }
.menu-panel .danger { color: var(--destructive); }

.theme-switch {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--foreground);
  padding: 0.38rem 0.55rem; font: inherit; cursor: pointer;
}
.theme-switch:hover { background: var(--secondary); }
.theme-symbol { width: 1rem; text-align: center; font-size: 1rem; line-height: 1; }
.theme-label { flex: 1; }
.theme-track {
  position: relative; width: 2rem; height: 1.05rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--muted); transition: background 0.18s;
}
.theme-knob {
  position: absolute; top: 2px; left: 2px;
  width: 0.65rem; height: 0.65rem; border-radius: 1px;
  background: var(--foreground); transition: transform 0.18s;
}
.theme-switch[aria-pressed="true"] .theme-track { background: var(--primary); }
.theme-switch[aria-pressed="true"] .theme-knob {
  transform: translateX(0.9rem); background: var(--primary-foreground);
}
.menu-panel .theme-switch { border: 0; }
.theme-switch.standalone { padding: 0.4rem; }

/* Phones: the brand and account menu share the top row, and the sections
   become one row of pills that swipes sideways instead of wrapping. The
   fade at the right edge hints that there's more; the end padding lets the
   last pill scroll clear of it. */
@media (max-width: 720px) {
  .navbar-inner { gap: 0.5rem 0.75rem; padding-bottom: 0.6rem; }
  .navbar .brand-icon { width: 32px; height: 32px; }
  .navbar .brand-name { font-size: 1.1rem; }
  .navbar .spacer { order: 1; }
  .navbar .user-menu, .navbar .theme-switch.standalone, .navbar-inner > .btn { order: 2; }
  .navbar nav {
    order: 3; flex: 1 0 100%; flex-wrap: nowrap; gap: 0.4rem;
    overflow-x: auto; scrollbar-width: none; padding-right: 1.5rem;
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }
  .navbar nav::-webkit-scrollbar { display: none; }
  .navbar nav a {
    flex: none; white-space: nowrap; padding: 0.35rem 0.85rem;
    border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem;
  }
  .navbar nav a.active {
    background: var(--primary); border-color: var(--primary); color: var(--primary-foreground);
  }
  .navbar nav a:not(.active):has(.nav-flag:not([hidden])) { border-color: var(--pop-amber); }
  .user-menu { padding-left: 0; }
  .user-menu::before, .user-menu .user-name { display: none; }
}

/* ==========================================================================
   Cards, tables, badges
   ========================================================================== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
/* A card's last paragraph or note sits on its bottom padding. */
.card > p:last-child, .card > .helptext:last-child { margin-bottom: 0; }
.card.narrow { max-width: 42.5rem; }
/* A tinted card that asks for care before a destructive step. */
.card.caution { background: var(--badge-error); color: var(--badge-error-foreground); border-color: transparent; }
/* A card announcing something just created, e.g. a new login. */
.card.notice { background: var(--badge-success); color: var(--badge-success-foreground); border-color: transparent; }
.card.notice .muted { color: inherit; opacity: 0.85; }
/* A card flagging a pending change, e.g. a scheduled retirement. */
.card.pending { border-color: var(--pop-amber); }

/* Clickable cards: the whole card lifts on hover and follows its .stretch
   link; other links and buttons inside stay independently clickable. */
.card.lift {
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.card.lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: var(--primary);
}
.card.lift .stretch::after { content: ""; position: absolute; inset: 0; }
.card.lift :is(a, button, form, select):not(.stretch) { position: relative; z-index: 1; }

/* Hero card — the dashboard's "current round" banner */
.card.hero {
  position: relative;
  overflow: hidden;
  border: none;
  background: linear-gradient(135deg, oklch(0.30 0.07 210), oklch(0.42 0.09 180));
  color: oklch(0.97 0.01 195);
  padding: 0.85rem 1.25rem;
}
.card.hero::after {
  content: "🏁";
  position: absolute;
  right: 0.25rem;
  bottom: -1.25rem;
  font-size: 5rem;
  line-height: 1;
  opacity: 0.14;
  transform: rotate(-12deg);
  pointer-events: none;
}
.card.hero .eyebrow, .card.hero .muted { color: oklch(0.85 0.03 195); }
.card.hero .stat { font-size: 1.8rem; }
.card.hero .btn { background: oklch(0.98 0.005 195); color: oklch(0.32 0.08 195); }
.card.hero .btn:hover { background: oklch(0.93 0.02 195); }

.eyebrow {
  margin: 0 0 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Sport cards — one per ladder on the dashboard */
.sport-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border-left: 4px solid var(--primary);
}
.sport-card .sport-emoji { font-size: 2.3rem; line-height: 1; }
.sport-card .body { flex: 1; min-width: 0; }
.sport-card .pos { margin: 0.1rem 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.sport-card .pos .muted { font-size: 0.825rem; font-weight: 500; }
.sport-card-actions { gap: 0.5rem; }
.friendly-sport-card { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.friendly-sport-card .sport-emoji { font-size: 1.8rem; }
.friendly-caption { margin: 0.15rem 0 0; }
.friendly-empty { align-items: center; justify-content: space-between; gap: 1rem; }
.friendly-empty p { margin: 0; }
/* Dashboard game trees — active games sit indented beneath their sport or
   tournament card, joined by a teal rule down the left that fades out
   towards the last game. Each game card is tinted by its status. */
.dashboard-tree { margin-bottom: 1rem; }
.dashboard-tree > .card { margin-bottom: 0; }
.game-branches {
  --branch-gutter: 1.5rem;
  display: grid;
  gap: 0.55rem;
  margin-left: 3rem;
  padding: 0.7rem 0 0 var(--branch-gutter);
  background: linear-gradient(to bottom, var(--primary) 0%, var(--primary) 45%, transparent 100%)
              no-repeat left / 2px 100%;
}
.game-branch {
  --branch-color: var(--badge-neutral-foreground);
  --branch-surface: var(--badge-neutral);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--branch-color) 45%, var(--border));
  border-left: 3px solid var(--branch-color);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--branch-surface) 62%, var(--card));
}
.game-branch.status-open {
  --branch-color: var(--badge-running-foreground);
  --branch-surface: var(--badge-running);
}
.game-branch.status-awaiting {
  --branch-color: var(--badge-pending-foreground);
  --branch-surface: var(--badge-pending);
}
.game-branch.needs-action {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branch-color) 24%, transparent);
}
.game-branch-copy { min-width: 0; }
.game-branch-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.65rem; }
.game-branch-alert { color: var(--branch-color); font-size: 0.8rem; }
.game-branch-match { margin-top: 0.2rem; font-size: 0.9rem; font-weight: 650; }
.game-branch-versus { margin: 0 0.3rem; color: var(--muted-foreground); font-weight: 500; }
.game-branch-action { white-space: nowrap; }

@media (max-width: 700px) {
  .sport-card { align-items: flex-start; flex-wrap: wrap; }
  .sport-card .body { flex-basis: calc(100% - 4rem); }
  .sport-card-actions { width: 100%; padding-left: 3.4rem; }
  .game-branches { --branch-gutter: 1.25rem; margin-left: 1.4rem; }
  .game-branch { grid-template-columns: 1fr; gap: 0.65rem; }
  .game-branch-action { justify-self: start; }
}

/* Filter bars */
.filters { margin-bottom: 1rem; }
.filters select {
  width: auto;
  border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
  font-weight: 550;
  cursor: pointer;
}

/* Compact checkbox control, e.g. Activity's "Only mine" */
.chip-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input);
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
}
/* Visually hidden but still focusable, so radio/checkbox keyboard behaviour survives */
.chip-toggle input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.chip-toggle:hover { background: var(--secondary); }
.chip-toggle:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
.chip-toggle:has(input:checked) {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-text);
}

.pagination { align-items: center; justify-content: flex-end; }
.pagination .spacer { flex: 1; }

/* Friendly empty state */
.empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted-foreground);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty .glyph { display: block; font-size: 2.2rem; margin-bottom: 0.4rem; }
td > .empty { border: none; }
.empty p { margin: 0; }

.table-wrap { overflow-x: auto; }
.table-notes { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.table-notes li { margin: 0.15rem 0; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data th, table.data td {
  text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border);
}
table.data th {
  color: var(--muted-foreground); font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
table.data tr:last-child td { border-bottom: none; }
table.data th.sorted { color: var(--primary-text); }
table.data tbody tr:hover td, table.data tr:hover td { background: var(--secondary); }
table.data tr.me td { background: var(--primary-tint); }
table.data th a { color: inherit; }
table.data .round-column { text-align: center; }
.round-status { min-width: 8.5rem; }
.round-opponent { display: block; margin-top: 0.2rem; white-space: nowrap; }
.challenge-counts { display: inline-block; white-space: nowrap; cursor: help; }
.movement-indicator { display: inline-block; margin-left: 0.18rem; cursor: help; }
.movement-indicator.up { color: var(--success); }
.movement-indicator.down { color: var(--danger); }

.badge {
  display: inline-block; padding: 0.12rem 0.6rem; border-radius: var(--radius);
  font-size: 0.72rem; font-weight: 650; white-space: nowrap;
  letter-spacing: 0.02em;
}
.badge.open { background: var(--badge-running); color: var(--badge-running-foreground); }
.badge.awaiting { background: var(--badge-pending); color: var(--badge-pending-foreground); }
.badge.completed { background: var(--badge-success); color: var(--badge-success-foreground); }
.badge.rescinded { background: var(--badge-neutral); color: var(--badge-neutral-foreground); }
.badge.danger { background: var(--badge-error); color: var(--badge-error-foreground); }
.badge.friendly { background: var(--badge-info); color: var(--badge-info-foreground); }
.badge.leave { background: var(--badge-pending); color: var(--badge-pending-foreground); }

/* Achievement badges (highest climber, wooden spoon, …) */
.badge-list { display: flex; flex-direction: column; gap: 0.75rem; }
.badge-item { display: flex; gap: 0.65rem; align-items: center; }
.badge-item .icon { font-size: 1.35rem; line-height: 1; }
.badge-item .label { font-weight: 600; font-size: 0.875rem; }
.badge-item .value { color: var(--muted-foreground); font-size: 0.825rem; }

/* Achievement badge as an inline emoji next to a player's name; the
   details appear in a tooltip on hover/focus. */
.badge-hint { cursor: help; margin-left: 0.15rem; }
h1 .badge-hint { font-size: 1.2rem; margin-left: 0.3rem; vertical-align: 0.12em; }

/* Floating tooltip for [data-tip] elements, positioned by static/js/app.js */
.tooltip {
  position: fixed;
  z-index: 100;
  max-width: 17rem;
  padding: 0.45rem 0.7rem;
  background: var(--popover);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  font-size: 0.8rem;
  line-height: 1.4;
  pointer-events: none;
  animation: tooltip-in 0.12s ease-out;
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* Last-five results chips in the ladder's Form column */
.form-chips { display: inline-flex; gap: 0.2rem; }
.form-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: var(--radius);
  font-size: 0.68rem; font-weight: 750; text-decoration: none;
}
.form-chip.win { background: var(--badge-success); color: var(--badge-success-foreground); }
.form-chip.loss { background: var(--badge-error); color: var(--badge-error-foreground); }

/* ELO sparkline on player profiles — click to open the full chart */
.sparkline { width: 100%; height: 56px; display: block; }
.sparkline polyline { fill: none; stroke: var(--primary); stroke-width: 2; }
.sparkline-btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius); font-family: inherit;
}
.sparkline-btn:hover { outline: 1.5px solid var(--primary); outline-offset: 3px; }

/* Full ELO chart dialog */
dialog.chart-dialog {
  width: min(720px, 92vw);
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-pop);
}
dialog.chart-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.dialog-close {
  float: right;
  border: 0; background: none; cursor: pointer;
  color: var(--muted-foreground); font-size: 1rem; line-height: 1;
  padding: 0.25rem; font-family: inherit;
}
.dialog-close:hover { color: var(--foreground); }

/* Player accounts (Admin page): in-page confirmation instead of a browser dialog */
.account-action > summary { list-style: none; cursor: pointer; display: inline-flex; }
.account-action > summary::-webkit-details-marker { display: none; }
.account-confirm {
  margin-top: 0.4rem; padding: 0.55rem 0.65rem; max-width: 20rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary);
}
.account-confirm p { margin: 0 0 0.5rem; font-size: 0.85rem; }
table.data tr.deactivated td:first-child a { color: var(--muted-foreground); }

/* Next-season draw (Admin page): near full-screen so every name is visible */
dialog.draw-dialog {
  width: min(1400px, 96vw); height: min(1000px, 92vh);
  max-width: none; max-height: none; padding: 1rem 1.5rem 1.25rem;
}
dialog.draw-dialog[open] { display: flex; flex-direction: column; gap: 0.75rem; }
.draw-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.draw-head h2 { margin: 0; font-size: 1.35rem; }
.draw-form, .draw-panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.85rem;
}
.draw-entrants {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.45rem; padding: 0.15rem;
}
.draw-entrants .chip-toggle { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.draw-entrants .chip-toggle:not(:has(input:checked)) {
  color: var(--muted-foreground); text-decoration: line-through;
}
.draw-entrants .draw-added:has(input:checked) { border-style: dashed; }
.draw-footer {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
}
.draw-footer .field-group { min-width: min(22rem, 100%); margin: 0; }
.draw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.draw-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 7rem; padding: 0.85rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary), var(--pop-blue));
  color: var(--primary-foreground); text-align: center;
}
.draw-slot-label {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85;
}
.draw-slot-name { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.2; }
.draw-slot.spinning .draw-slot-name { filter: blur(1px); opacity: 0.8; }
/* Column-major, like reading a ladder: #1 at the top of the first column. */
.draw-results {
  flex: 1; min-height: 0; overflow-y: auto;
  list-style: none; margin: 0; padding: 0;
  columns: 14rem; column-gap: 0.8rem;
}
.draw-results li {
  display: flex; gap: 0.5rem; align-items: baseline; break-inside: avoid;
  margin: 0 0 0.35rem; padding: 0.35rem 0.7rem; font-size: 1.02rem;
  border-radius: var(--radius); background: var(--secondary);
}
.draw-results li.pending { color: var(--muted-foreground); }
.draw-results li.revealed { animation: draw-pop 0.35s ease-out; }
.draw-results li.podium.revealed {
  background: color-mix(in srgb, var(--pop-amber) 35%, var(--card)); font-weight: 700;
}
.draw-pos { color: var(--muted-foreground); font-variant-numeric: tabular-nums; min-width: 2.4rem; }
@keyframes draw-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.draw-saved { columns: 3 12rem; margin: 0.5rem 0 0; }
@media (prefers-reduced-motion: reduce) {
  .draw-results li.revealed { animation: none; }
}
/* Scoreboard strip above the chart: current figure, movement, peak, games */
.chart-hero {
  display: flex; align-items: flex-end; gap: 1.75rem; flex-wrap: wrap;
  margin: 0.35rem 0 0.85rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.chart-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.chart-stat .label {
  color: var(--muted-foreground); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.chart-stat .value { font-size: 1.05rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.chart-stat.main .value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.chart-stat .value .when { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 500; }
.chart-stat .delta.up { color: var(--success); }
.chart-stat .delta.down { color: var(--danger); }

.elo-chart { width: 100%; height: auto; display: block; }
.elo-chart .grid { stroke: var(--border); stroke-width: 1; }
.elo-chart .axis-label { fill: var(--muted-foreground); font-size: 11px; }
.elo-chart .area { color: var(--primary); fill: url(#chart-fill); stroke: none; pointer-events: none; }
.elo-chart polyline {
  fill: none; stroke: var(--primary); stroke-width: 2.25;
  stroke-linejoin: round; stroke-linecap: round;
}
.elo-chart .pt { cursor: help; outline: none; }
.elo-chart .hit { fill: transparent; }
.elo-chart .dot { fill: var(--primary); pointer-events: none; }
.elo-chart .pt:hover .dot, .elo-chart .pt:focus-visible .dot {
  r: 5; fill: var(--pop-amber); stroke: var(--card); stroke-width: 2;
}

/* Stats page: headline tiles and weekly column charts */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem; margin-bottom: 1rem;
}
.kpi-row .card { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.kpi-label {
  color: var(--muted-foreground); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.kpi-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.kpi-delta { color: var(--muted-foreground); font-size: 0.85rem; font-weight: 600; }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }
.kpi-note { color: var(--muted-foreground); font-size: 0.8rem; }
/* Two charts per row at most, so their axis labels stay readable. */
.chart-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  gap: 1rem;
}
.chart-grid .card { margin: 0; }
.chart-caption { margin: -0.35rem 0 0.5rem; }
table.numeric-table td { font-variant-numeric: tabular-nums; }

.column-chart { width: 100%; height: auto; display: block; }
.column-chart .grid { stroke: var(--border); stroke-width: 1; }
.column-chart .axis-label { fill: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
.column-chart .col { cursor: help; }
.column-chart .hit { fill: transparent; }
.column-chart .col:hover .hit { fill: var(--foreground); fill-opacity: 0.05; }
.column-chart .bar { fill: var(--primary); pointer-events: none; }
.column-chart .col:hover .bar:not(.stacked) { fill: var(--primary-hover); }
/* Stacked kinds of game. The three colours pass the colour-blindness,
   lightness and contrast checks against the card in each theme. */
.column-chart .series-season, .chart-legend .series-season { fill: var(--series-season); background: var(--series-season); }
.column-chart .series-friendly, .chart-legend .series-friendly { fill: var(--series-friendly); background: var(--series-friendly); }
.column-chart .series-tournament, .chart-legend .series-tournament { fill: var(--series-tournament); background: var(--series-tournament); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: -0.15rem 0 0.4rem; padding: 0; list-style: none; font-size: 0.8rem; color: var(--muted-foreground); }
.chart-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart-legend .swatch { width: 0.7rem; height: 0.7rem; border-radius: 2px; }
.column-chart .in-progress .bar { fill-opacity: 0.45; }
/* The SVG scales down on phones, so its labels are set larger to compensate. */
@media (max-width: 600px) { .column-chart .axis-label { font-size: 19px; } }

/* ==========================================================================
   Buttons & forms
   ========================================================================== */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radius);
  padding: 0.45rem 0.95rem; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; background: var(--primary); color: var(--primary-foreground);
  font-family: inherit; transition: background 0.12s;
}
.btn:hover { background: var(--primary-hover); text-decoration: none; }
.btn.secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
.btn.secondary:hover { background: var(--muted); }
.btn.danger { background: var(--destructive); color: var(--destructive-foreground); }
.btn.danger:hover { filter: brightness(1.08); }
.btn.small { padding: 0.25rem 0.65rem; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

form.stack label { display: block; font-weight: 600; margin: 0.75rem 0 0.25rem; font-size: 0.875rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; max-width: 26rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--input); color: var(--foreground); font-size: 0.9rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ring); outline-offset: 1px;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--primary); }
select:not([multiple]) {
  appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.9rem;
}
/* Explicit option colours for browsers that style the popup list directly
   (color-scheme on the root handles the rest). */
select option { background: var(--popover); color: var(--foreground); }
.helptext { display: block; color: var(--muted-foreground); font-size: 0.8rem; }
.errorlist { color: var(--destructive); margin: 0.25rem 0; padding-left: 1.2rem; font-size: 0.85rem; }

/* Focused single-form pages (e.g. new challenge) */
.form-page { max-width: 38rem; }
.field-group { margin: 0 0 1.35rem; }
.field-group:last-child { margin-bottom: 0; }
.field-group > label:first-child { margin-top: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-row .chip-toggle { margin: 0; font-weight: 550; }
.form-footnote {
  margin: 1.35rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border);
  color: var(--muted-foreground); font-size: 0.8rem;
}
.btn.block { display: block; width: 100%; max-width: 26rem; padding: 0.6rem 1.2rem; font-size: 0.9375rem; }
.leave-summary {
  margin: 0.45rem 0 1.25rem; padding-left: 1.2rem;
  color: var(--muted-foreground); font-size: 0.875rem;
}
.leave-summary li + li { margin-top: 0.25rem; }
.leave-date-range {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem; max-width: 26rem;
}
.leave-date-range .field-group { margin-bottom: 0; }
.leave-date-range input[type="date"] { max-width: none; }

/* Radio selection cards — for a form's key either/or decision */
.choice-cards { display: grid; gap: 0.6rem; }
.choice-cards.split { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.choice-cards .choice-card {
  position: relative; display: block; margin: 0; padding: 0.75rem 0.95rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--input); cursor: pointer;
}
.choice-cards .choice-card:hover { background: var(--secondary); }
.choice-card input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.choice-card:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
.choice-title { display: block; font-weight: 650; font-size: 0.9rem; }
.choice-card:has(input:checked) .choice-title { color: var(--primary-text); }
.choice-desc { display: block; margin-top: 0.1rem; color: var(--muted-foreground); font-size: 0.8rem; font-weight: 400; }

/* Settlement panel & page headers */
.card-head, .page-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.card-head h1, .page-head h1 { margin: 0; }
.page-head { margin: 0.5rem 0 1rem; }
.page-subtitle { margin: 0.25rem 0 0; }
.matchup { font-size: 1.15rem; }
.panel-details { margin-top: 1.15rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.panel-details > summary {
  cursor: pointer; font-size: 0.875rem; font-weight: 600;
  color: var(--muted-foreground); user-select: none;
}
.panel-details > summary:hover { color: var(--foreground); }
.panel-details[open] > summary { margin-bottom: 0.75rem; }

/* Status callouts for dynamic form states */
.callout {
  margin: 0 0 1rem; padding: 0.7rem 0.95rem; font-size: 0.875rem;
  border-radius: var(--radius); border-left: 3px solid var(--muted-foreground);
  background: var(--secondary);
}
.callout:last-child { margin-bottom: 0; }
.callout.info { background: var(--badge-running); color: var(--badge-running-foreground); border-left-color: var(--pop-blue); }
.callout.warn { background: var(--badge-pending); color: var(--badge-pending-foreground); border-left-color: var(--pop-amber); }
.callout.success { background: var(--badge-success); color: var(--badge-success-foreground); border-left-color: currentColor; }
.callout.danger { background: var(--badge-error); color: var(--badge-error-foreground); border-left-color: var(--destructive); }
.callout a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Player-linked set scoring */
.score-entry {
  max-width: 26rem; margin: 0.9rem 0 0; padding: 0.4rem 0;
  border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.score-entry legend {
  padding: 0 0.45rem 0 0; color: var(--muted-foreground);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.score-entry .score-entry-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.25rem;
  align-items: center; gap: 0.75rem; margin: 0; padding: 0.35rem 0;
  font-size: 0.875rem; font-weight: 600;
}
.score-entry-row input[type="number"] {
  width: 4.25rem; min-width: 0; padding: 0.4rem 0.3rem; text-align: center; font-weight: 750;
}
.score-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem; max-width: 22rem; padding: 0.65rem 0.8rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary);
}
.score-summary strong, .set-count { font-variant-numeric: tabular-nums; }
.set-count {
  display: inline-flex; min-width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--muted); font-weight: 800;
}

/* Fuzzy autocomplete for friendly opponents */
.opponent-combobox {
  position: relative; width: 100%; max-width: 26rem;
}
.opponent-combobox > input[type="search"] {
  max-width: none; display: block; padding-left: 2.2rem;
  background-image: var(--icon-search);
  background-repeat: no-repeat;
  background-position: 0.7rem center;
  background-size: 0.95rem;
}
.opponent-results {
  position: absolute; z-index: 20; top: calc(100% + 0.3rem); left: 0; right: 0;
  max-height: 17rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--popover); padding: 0.3rem; box-shadow: var(--shadow-pop);
}
.opponent-results [data-opponent-option] {
  display: block; width: 100%; padding: 0.55rem 0.65rem;
  border: 0; border-radius: var(--radius); background: transparent;
  color: var(--foreground); font: inherit; font-weight: 500;
  text-align: left; cursor: pointer;
}
.opponent-results [data-opponent-option]:hover,
.opponent-results [data-opponent-option]:focus {
  outline: none; background: var(--primary-tint); color: var(--primary-text);
}
.opponent-empty { margin: 0; padding: 0.55rem 0.65rem; }

/* ==========================================================================
   Messages
   ========================================================================== */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li {
  padding: 0.6rem 1rem; border-radius: var(--radius); margin-bottom: 0.5rem; font-size: 0.9rem;
  border: 1px solid var(--border); background: var(--card);
}
.messages li.success { background: var(--badge-success); color: var(--badge-success-foreground); border-color: transparent; }
.messages li.error { background: var(--badge-error); color: var(--badge-error-foreground); border-color: transparent; }
.messages li.warning { background: var(--badge-pending); color: var(--badge-pending-foreground); border-color: transparent; }
.messages li.info { background: var(--badge-running); color: var(--badge-running-foreground); border-color: transparent; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.grid-2.start { align-items: start; }
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; }
.row.spaced { gap: 1.5rem; }
.row.tight { gap: 0.4rem; }
.row.top { align-items: flex-start; }
.flush { margin: 0; }
.note { margin: 0.25rem 0 0; }
.actions { margin-top: 1rem; }
.text-end { text-align: right; }

/* ==========================================================================
   Bracket
   ========================================================================== */
/* Rounds are columns; within a round, matches sit in pairs that feed the
   same next match. Each cell takes an equal share of the column's height, so
   a match lines up with the middle of the two that feed it, and the joining
   lines are drawn in the gap between columns. */
.bracket {
  --bracket-gap: 2rem;
  --bracket-line: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
  display: flex; gap: var(--bracket-gap); overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x proximity;
}
.bracket:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.bracket-round { min-width: 220px; display: flex; flex-direction: column; scroll-snap-align: start; }
.bracket-round h3 {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  color: var(--muted-foreground); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.bracket-round.current h3 { color: var(--primary-text); }
.bracket-round h3 .badge { text-transform: none; letter-spacing: 0; }
.bracket-matches { display: flex; flex-direction: column; flex: 1; }
.bracket-pair { position: relative; display: flex; flex-direction: column; flex: 1; }
.bracket-cell { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 0.5rem 0; }
.bracket-round:not(.champion-round) .bracket-cell::after,
.bracket-round + .bracket-round .bracket-cell::before {
  content: ""; position: absolute; top: 50%; width: calc(var(--bracket-gap) / 2);
  border-top: 2px solid var(--bracket-line);
}
.bracket-round:not(.champion-round) .bracket-cell::after { right: calc(var(--bracket-gap) / -2); }
.bracket-round + .bracket-round .bracket-cell::before { left: calc(var(--bracket-gap) / -2); }
.bracket-pair.joined::after {
  content: ""; position: absolute; top: 25%; bottom: 25%; right: calc(var(--bracket-gap) / -2 - 1px);
  border-right: 2px solid var(--bracket-line);
}
.bracket-match {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); font-size: 0.875rem; overflow: hidden;
}
.bracket-round.current .bracket-match.playable { border-color: var(--primary); }
.champion-round { min-width: 180px; }
.bracket-champion {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem;
  border: 1px dashed var(--border); border-radius: var(--radius-lg); font-size: 0.9rem;
}
.bracket-champion.crowned {
  border: 1px solid var(--pop-amber); background: var(--badge-pending);
  color: var(--badge-pending-foreground); font-weight: 700;
}
.bracket-champion.crowned a { color: inherit; }
.bracket-hint { display: none; }
@media (max-width: 700px) { .bracket-hint { display: block; } }
/* Big draws switch between the bracket and a list by round. */
.bracket-views { margin-bottom: 0.75rem; }
[data-bracket-views]:has(input[value="list"]:checked) :is(.bracket, .bracket-hint) { display: none; }
[data-bracket-views]:not(:has(input[value="list"]:checked)) .bracket-list { display: none; }
.bracket-list { max-width: 48rem; }
.bracket-match .fixture-lock { font-size: 0.75rem; }
.bracket-match .slot { padding: 0.4rem 0.7rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.bracket-match .slot + .slot { border-top: 1px solid var(--border); }
.bracket-match .slot.winner { background: var(--badge-success); font-weight: 700; }
.bracket-match .slot.tbd { color: var(--muted-foreground); font-style: italic; }
.bracket-match .report { padding: 0.4rem 0.7rem; border-top: 1px dashed var(--border); background: var(--secondary); }
.bracket-match .slot-score[type="number"] { width: 3rem; padding: 0.25rem; }
.bracket-match .report.match-actions > .btn { flex: 1; }
.bracket-match.mine { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.bracket-match.bye { border-style: dashed; box-shadow: none; color: var(--muted-foreground); }
/* Big brackets: narrower rounds and tighter matches. */
.bracket.dense { --bracket-gap: 1.25rem; }
.bracket.dense .bracket-round { min-width: 150px; }
.bracket.dense .champion-round { min-width: 130px; }
.bracket.dense .bracket-cell { padding: 0.2rem 0; }
.bracket.dense .bracket-match { font-size: 0.78rem; }
.bracket.dense .bracket-match .slot { padding: 0.25rem 0.5rem; }

/* ==========================================================================
   Tournaments
   ========================================================================== */
/* List: one tile per tournament */
.tournament-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.tournament-tile { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.tournament-tile-name { margin: 0.2rem 0 0; font-size: 1.05rem; }
.tournament-tile-name a { color: inherit; text-decoration: none; }
.tournament-tile-kind { margin: 0; color: var(--primary-text); font-size: 0.85rem; font-weight: 600; }
.tournament-tile-progress { margin: 0; font-size: 0.9rem; }
.tournament-tile-foot { margin-top: auto; padding-top: 0.5rem; }

/* Detail header */
.tournament-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 0.4rem 0 1rem; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  font-size: 0.8rem; font-weight: 600;
}
.rules-card { margin-bottom: 1rem; }
.rules-tagline { font-style: italic; }

/* The viewer's own status */
.you-card { border-left: 4px solid var(--primary); }
.you-card.state-out, .you-card.state-done { border-left-color: var(--border); }
.you-card.state-finished { border-left-color: var(--pop-amber); }
.you-headline { margin: 0; font-size: 1.1rem; font-weight: 700; }
.you-score { display: grid; gap: 0.75rem; max-width: 34rem; margin-top: 0.9rem; }
.you-score .helptext { margin: 0; }

/* Score entry: a scoreboard line — name, score – score, name */
.scoreline {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem auto 3.25rem minmax(0, 1fr);
  align-items: center; gap: 0.5rem;
}
.scoreline-name { min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.scoreline-name.side-1 { text-align: right; }
.scoreline-dash { color: var(--muted-foreground); font-weight: 700; text-align: center; }
.scoreline-score[type="number"], .bracket-match .slot-score[type="number"] {
  width: 100%; min-width: 0; padding: 0.35rem 0.2rem; text-align: center;
  font-weight: 750; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield;
  background: var(--card); border: 1px solid color-mix(in oklch, var(--muted-foreground) 45%, transparent);
}
:is(.scoreline-score, .slot-score)::-webkit-inner-spin-button,
:is(.scoreline-score, .slot-score)::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:is(.scoreline-score, .slot-score):hover { border-color: var(--muted-foreground); }
.scoreline.large { grid-template-columns: minmax(0, 1fr) 4.25rem auto 4.25rem minmax(0, 1fr); gap: 0.75rem; font-size: 1.05rem; }
.scoreline.large .scoreline-score[type="number"] { padding: 0.5rem 0.2rem; font-size: 1.5rem; }


/* Organiser: settle a whole stage */
.organiser-panel { margin-bottom: 1rem; }
.stage-lines { display: grid; gap: 0; max-width: 40rem; margin: 0.5rem 0 1rem; padding: 0; list-style: none; }
.stage-lines li { padding: 0.45rem 0; border-bottom: 1px solid var(--border); }

.more-link { margin: 0.75rem 0 0; font-weight: 600; }
.entrant-list.many { columns: 15rem 3; column-gap: 2rem; }
.entrant-list.many li { break-inside: avoid; }
.killer-list.many { columns: 24rem 2; column-gap: 2.5rem; }
.killer-list.many .killer-row { break-inside: avoid; }

/* Podium: 2nd, 1st, 3rd */
.podium-card { padding-bottom: 0; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.podium-step { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.25rem; max-width: 12rem; text-align: center; }
.podium-step.place-2 { order: 1; }
.podium-step.place-1 { order: 2; }
.podium-step.place-3 { order: 3; }
.podium-medal { font-size: 1.8rem; line-height: 1; }
.podium-step.place-1 .podium-medal { font-size: 2.4rem; }
.podium-names { display: flex; flex-direction: column; font-weight: 700; font-size: 0.9rem; }
.podium-block {
  width: 100%; padding: 0.5rem 0.25rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--secondary); color: var(--muted-foreground);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.podium-step.place-1 .podium-block { min-height: 4.5rem; background: var(--badge-pending); color: var(--badge-pending-foreground); }
.podium-step.place-2 .podium-block { min-height: 3.25rem; }
.podium-step.place-3 .podium-block { min-height: 2.25rem; }

/* Killer board */
.killer-list { margin: 0; padding: 0; list-style: none; }
.killer-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(5.5rem, auto);
  align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border);
}
.killer-row:last-child { border-bottom: 0; }
.killer-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.killer-row.out .killer-name { color: var(--muted-foreground); text-decoration: line-through; }
.killer-row.out .killer-name a { color: inherit; }
.killer-row.winner { background: var(--badge-pending); color: var(--badge-pending-foreground); margin: 0 -0.5rem; padding: 0.55rem 0.5rem; border-radius: var(--radius-lg); }
.killer-lives { display: inline-flex; gap: 0.1rem; color: var(--pop-coral); font-size: 1.05rem; letter-spacing: 0.05em; }
.killer-lives .life.lost { color: var(--border); }
.killer-status { justify-self: end; text-align: right; white-space: nowrap; }
.killer-status form { margin: 0; }
.killer-status .btn { min-width: 5rem; }
.killer-undo { margin-top: 0.75rem; }
@media (max-width: 480px) {
  .killer-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .killer-status { grid-column: 2 / -1; justify-self: start; }
}

.narrow-input { max-width: 6rem; }

/* Signup entrants */
.entrant-list { list-style: none; margin: 0; padding: 0; }
.entrant-list li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-weight: 550;
}
.entrant-list li:last-child { border-bottom: 0; }
.entrant-seed {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; border-radius: var(--radius);
  background: var(--muted); color: var(--muted-foreground);
  font-size: 0.75rem; font-weight: 700;
}

/* Admin: the season form, a challenge's staff box, the manage-player page */
.season-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.staff-box { border-top: 3px solid var(--pop-blue); margin-top: 1rem; }
.manage-entry + .manage-entry { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.manage-leave { margin: 0; padding: 0; list-style: none; }
.manage-leave li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }

/* A bordered follow-on section inside a card, e.g. organiser actions */
.divided { margin-top: 1.15rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }

/* Round-robin fixtures — one scoreboard-style grid row per match:
   name | score | vs | score | name | action */
.fixture-round-label {
  margin: 1.1rem 0 0.2rem; color: var(--muted-foreground);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.fixture-list { list-style: none; margin: 0; padding: 0; }
.fixture-list > li { border-bottom: 1px solid var(--border); }
.fixture-list > li:last-child { border-bottom: 0; }
.fixture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.1rem auto 3.1rem minmax(0, 1fr) minmax(2.5rem, auto);
  align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.5rem 0; font-size: 0.9rem;
}
.fixture .side-1 { justify-self: end; text-align: right; }
.fixture .side-2 { justify-self: start; }
.fixture-side { min-width: 0; }
.fixture-side.won { font-weight: 700; }
.fixture .set-count { justify-self: center; }
.fixture-vs { color: var(--muted-foreground); font-size: 0.8rem; text-align: center; }
.fixture-score-input[type="number"] {
  width: 100%; min-width: 0; padding: 0.3rem 0.25rem; text-align: center; font-weight: 700;
}
.fixture-action { justify-self: end; display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
/* A score being entered uses the same columns as a played fixture. */
.fixture .scoreline { display: contents; }
.fixture .scoreline-name { font-weight: inherit; }
.fixture-list > li.mine { background: color-mix(in oklch, var(--primary-tint) 55%, transparent); }
.fixture-round + .fixture-round { margin-top: 0.25rem; }
.fixture-round > summary { display: flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; }
.fixture-round > summary::-webkit-details-marker { display: none; }
.fixture-round > summary::before {
  content: ""; flex: none; width: 0.4em; height: 0.4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s;
}
.fixture-round[open] > summary::before { transform: rotate(45deg); }
.fixture-round-state { font-weight: 600; text-transform: none; letter-spacing: 0; }
.only-mine .fixture-list > li:not(.mine), .only-mine .fixture-round.not-mine { display: none; }
.toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.fixture-lock { cursor: help; }

/* ✎ popover for correcting an already-saved result */
.fixture-edit { position: relative; }
.fixture-edit > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap;
}
/* Beside a Save button the forfeit toggle is a quiet button of the same height. */
:is(.match-actions, .fixture-action) > .fixture-edit > summary {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
.match-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fixture-edit > summary::-webkit-details-marker { display: none; }
.fixture-edit > summary:hover { color: var(--foreground); }
.fixture-edit-pop {
  position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 20;
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.6rem; background: var(--popover);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.fixture-edit-pop .fixture-score-input[type="number"] { width: 3.1rem; }
/* Inside a bracket match the popover would be clipped by overflow: hidden —
   expand in-flow within the report row instead. */
.bracket-match .fixture-edit-pop {
  position: static; box-shadow: none; border: 0;
  padding: 0.45rem 0 0.05rem; background: transparent;
}

/* On phones a score row becomes a two-line scorecard: each name with its score,
   and a fixture's buttons to the right. Played fixtures share the same areas. */
@media (max-width: 520px) {
  .scoreline { grid-template-columns: minmax(0, 1fr) 3.5rem; grid-template-areas: "n1 s1" "n2 s2"; row-gap: 0.4rem; }
  .scoreline.large { grid-template-columns: minmax(0, 1fr) 4.25rem; }
  .fixture {
    grid-template-columns: minmax(0, 1fr) 2.75rem auto;
    grid-template-areas: "n1 s1 act" "n2 s2 act"; row-gap: 0.3rem;
  }
  :is(.scoreline, .fixture) .side-1 { grid-area: n1; justify-self: start; text-align: left; }
  :is(.scoreline, .fixture) .side-2 { grid-area: n2; }
  .scoreline > input:nth-of-type(1), .fixture > :nth-child(2) { grid-area: s1; }
  .scoreline > input:nth-of-type(2), .fixture > :nth-child(4) { grid-area: s2; }
  .scoreline-dash, .fixture-vs { display: none; }
  .fixture-action { grid-area: act; }
}

/* ==========================================================================
   Help & FAQ
   ========================================================================== */
.help-intro { max-width: 46rem; margin-top: -0.5rem; }

.help-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0.75rem;
}
.topic-card {
  --topic-accent: var(--primary);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem 0.7rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--topic-accent);
  border-radius: var(--radius-lg);
  color: var(--foreground);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.topic-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: var(--topic-accent);
}
.topic-card.amber { --topic-accent: var(--pop-amber); }
.topic-card.coral { --topic-accent: var(--pop-coral); }
.topic-card.blue { --topic-accent: var(--pop-blue); }
.topic-card .glyph { font-size: 1.55rem; line-height: 1.2; }
.topic-card strong { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; }

/* Sections scroll to just below the sticky navbar */
.help-section { scroll-margin-top: 5rem; }

/* One question per accordion; native <details> so no JS is needed */
.faq {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 0.5rem;
}
.faq > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: var(--radius-lg);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.faq[open] > summary::before { transform: rotate(45deg); border-color: var(--primary); }
.faq > summary:hover { background: var(--secondary); }
.faq[open] > summary { color: var(--primary-text); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.faq-body { padding: 0.35rem 1rem 0.5rem; }
.faq-body > p:first-child, .faq-body > ul:first-child { margin-top: 0.5rem; }
.faq-body ul { padding-left: 1.2rem; }

.reach-table { max-width: 22rem; margin: 0.5rem 0 0.75rem; }

/* ==========================================================================
   Misc
   ========================================================================== */
.stat { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.rank-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius);
  background: var(--secondary); font-weight: 700; font-size: 0.85rem;
}
/* Podium colours for the top three */
.rank-chip.p1 { background: linear-gradient(135deg, oklch(0.88 0.13 90), oklch(0.76 0.14 80)); color: oklch(0.35 0.08 80); }
.rank-chip.p2 { background: linear-gradient(135deg, oklch(0.90 0.005 260), oklch(0.76 0.01 260)); color: oklch(0.35 0.02 260); }
.rank-chip.p3 { background: linear-gradient(135deg, oklch(0.78 0.09 60), oklch(0.66 0.10 55)); color: oklch(0.28 0.06 55); }
.auth-card { max-width: 420px; margin: 3rem auto; }
footer.site { text-align: center; color: var(--muted-foreground); font-size: 0.8rem; padding: 2rem 0; }