/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #f0e8d6;
  --surface:     #fffcf5;
  --border:      #ddd0b8;
  --border-light:#e8dcc8;
  --text:        #1c1c18;
  --text-muted:  #7a7060;
  --red:         #9a1c1c;
  --red-light:   #f5eaea;
  --row-hover:   #f5eedd;
  --row-alt:     rgba(240,232,214,0.35);
  --radius:      5px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --adv-bg:  #1c1c18; --adv-fg:  #ffffff;
  --int-bg:  #e8e2d6; --int-fg:  #3a3830;
  --beg-bg:  #f2ece0; --beg-fg:  #7a7060;
  /* semantic diff colors (positive = green, negative = red) */
  --pos: #3a6e3a; --neg: #c0392b;
  /* chart theming (read by JS via getComputedStyle) */
  --chart-bar:        rgba(154,28,28,0.85);
  --chart-bar-border: rgba(154,28,28,1);
  --chart-grid:       rgba(221,208,184,0.55);
  --chart-zero:       rgba(0,0,0,0.75);
  --tier-adv-bg: rgba(0,0,0,0.82);     --tier-adv-bd: rgba(0,0,0,1);
  --tier-int-bg: rgba(130,75,25,0.82); --tier-int-bd: rgba(110,60,15,1);
  --map-nodata: #e8dcc8; --map-stroke: #ffffff;
  --shadow: rgba(0,0,0,0.06);
  /* solid-red surfaces that carry white text (table headers, active toggles) */
  --th-bg: var(--red);
  /* compare-button glow (pulses to draw the eye) */
  --compare-shadow: rgba(154,28,28,0.28);
  --compare-glow:   rgba(154,28,28,0.60);
  /* season-leader card accents — one distinct hue per box for scannability */
  --lead-1: #9a1c1c; --lead-2: #b06d12; --lead-3: #2f7d5a;
  --lead-4: #1f6f95; --lead-5: #6d4a9c; --lead-6: #b0492e;
}

/* ── Dark theme ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #1b1813;
  --surface:     #252017;
  --border:      #3b3428;
  --border-light:#322c22;
  --text:        #efe6d2;
  --text-muted:  #b0a68f;
  --red:         #c04747;
  --red-light:   #3a2222;
  --row-hover:   #2d2820;
  --row-alt:     rgba(255,255,255,0.035);
  --adv-bg:  #e8dcc0; --adv-fg:  #1b1813;
  --int-bg:  #39332a; --int-fg:  #ddd3bd;
  --beg-bg:  #2c271f; --beg-fg:  #b0a68f;
  --pos: #6bb06b; --neg: #e07a6a;
  --chart-bar:        rgba(215,90,90,0.85);
  --chart-bar-border: rgba(215,90,90,1);
  --chart-grid:       rgba(255,255,255,0.09);
  --chart-zero:       rgba(255,255,255,0.6);
  --tier-adv-bg: rgba(235,225,205,0.88); --tier-adv-bd: rgba(235,225,205,1);
  --tier-int-bg: rgba(200,140,70,0.88);  --tier-int-bd: rgba(210,150,80,1);
  --map-nodata: #322c22; --map-stroke: #1b1813;
  --shadow: rgba(0,0,0,0.45);
  --th-bg: #a83333;   /* deeper red so white header text stays legible */
  --compare-shadow: rgba(0,0,0,0.45);
  --compare-glow:   rgba(215,90,90,0.70);
  /* brighter leader accents for legibility on the dark parchment */
  --lead-1: #d76a6a; --lead-2: #d9a441; --lead-3: #5cbd94;
  --lead-4: #58aed4; --lead-5: #a889d6; --lead-6: #e08a6a;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}

/* ── Sticky top bar ───────────────────────────────────────────────────────── */
.sticky-top { position: sticky; top: 0; z-index: 200; }

/* ── Header ───────────────────────────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 22px 48px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.header-left h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; }
.header-sub { display: inline-block; background: #9a1c1c; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 4px; letter-spacing: 0.02em; white-space: nowrap; }

/* ── Gender toggle ────────────────────────────────────────────────────────── */
.gender-toggle { display: flex; background: var(--bg); border: 1.5px solid var(--red); border-radius: 20px; overflow: hidden; }
.gender-btn {
  background: transparent; border: none; padding: 5px 18px;
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--red);
  transition: background 0.12s, color 0.12s; white-space: nowrap;
}
.gender-btn + .gender-btn { border-left: 1.5px solid var(--red); }
.gender-btn.active { background: var(--th-bg); color: #fff; }
.gender-btn:not(.active):hover { background: var(--red-light); }

/* Emphasized Male/Female toggle: a red-tinted drop shadow lifts it off the
   page, it scales up on hover, and the newly-selected button pops on click. */
#global-gender {
  box-shadow: 0 2px 8px rgba(154,28,28,0.22);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
#global-gender:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 16px rgba(154,28,28,0.34);
}
#global-gender .gender-btn {
  transition: background 0.22s ease, color 0.22s ease, transform 0.16s ease;
}
#global-gender .gender-btn.active { animation: genderPop 0.28s ease; }
/* Scales up to 1 (never past it) so the button stays inside the clipped pill. */
@keyframes genderPop {
  0%   { transform: scale(0.8); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}
[data-theme="dark"] #global-gender { box-shadow: 0 2px 10px rgba(215,90,90,0.35); }
[data-theme="dark"] #global-gender:hover { box-shadow: 0 5px 18px rgba(215,90,90,0.5); }

/* ── Theme (dark mode) toggle ─────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  background: var(--bg); border: 1.5px solid var(--red); border-radius: 50%;
  color: var(--red); cursor: pointer; line-height: 0;
  transition: background 0.12s, color 0.12s;
}
.theme-toggle:hover { background: var(--red-light); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }

/* Dark-mode recolor for the inline tier-difficulty SVG (presentation attrs) */
[data-theme="dark"] .tier-curve-wrap svg line { stroke: #6b6455; }
[data-theme="dark"] .tier-curve-wrap svg polygon { fill: #6b6455; }
[data-theme="dark"] .tier-curve-wrap svg path:nth-of-type(2) { fill: rgba(235,225,205,0.28); stroke: rgba(235,225,205,0.85); }
[data-theme="dark"] .tier-curve-wrap svg text[fill="rgba(0,0,0,1)"] { fill: #efe6d2; }
[data-theme="dark"] .tier-curve-wrap svg text[fill="#666"],
[data-theme="dark"] .tier-curve-wrap svg text[fill="#7a7060"] { fill: #b0a68f; }

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; align-items: center; padding: 0 32px 0 48px;
  background: var(--surface); border-bottom: 1px solid var(--border); gap: 2px;
  overflow: visible;
}
.tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; margin-bottom: -1px; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--red); border-bottom-color: var(--red); font-weight: 600; }
.tab-sep { width: 1px; background: var(--border); margin: 0 8px; height: 22px; align-self: center; flex-shrink: 0; }
.tab-bar-toggle { margin-left: auto; padding-left: 16px; flex-shrink: 0; display: flex; align-items: center; }

/* ── Tab dropdown groups ──────────────────────────────────────────────────── */
.tab-group { position: relative; display: flex; align-items: center; }
.tab-group-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-group-btn:hover  { color: var(--text); }
.tab-group-btn.active { color: var(--red); border-bottom-color: var(--red); font-weight: 600; }
.tab-caret {
  font-size: 19px; line-height: 1; margin-left: 2px;
  color: var(--red); font-weight: 700; opacity: 0.85;
  transition: transform 0.15s, opacity 0.15s;
}
.tab-group-btn:hover .tab-caret { opacity: 1; }
.tab-group.open .tab-caret,
.tab-group:hover .tab-caret { transform: rotate(180deg); opacity: 1; }
.tab-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 300;
  display: none; flex-direction: column;
  min-width: 190px; max-width: calc(100vw - 24px); padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.tab-group.open .tab-dropdown,
.tab-group:hover .tab-dropdown { display: flex; }
.tab-dropdown .tab-btn {
  border-bottom: none; margin-bottom: 0; text-align: left;
  padding: 9px 12px; border-radius: 6px;
}
.tab-dropdown .tab-btn:hover  { background: var(--row-hover); color: var(--text); }
.tab-dropdown .tab-btn.active {
  background: var(--red-light); color: var(--red);
  border-bottom: none; font-weight: 600;
}

/* ── Tab content ──────────────────────────────────────────────────────────── */
.tab-content        { display: none; padding: 42px 48px; max-width: 1600px; margin: 0 auto; }
.tab-content.active { display: block; }

/* ── Controls bar ─────────────────────────────────────────────────────────── */
.controls-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }

/* ── Search ───────────────────────────────────────────────────────────────── */
.search-input {
  width: 320px; padding: 8px 13px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; font-family: var(--font);
  background: var(--surface); color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--red); }
.search-input::placeholder { color: var(--text-muted); }

/* ── Detail card ──────────────────────────────────────────────────────────── */
.detail-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--red); border-radius: var(--radius);
  padding: 24px 28px; margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.detail-card.hidden { display: none; }
.card-close-btn {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--text-muted);
  padding: 3px 7px; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.card-close-btn:hover { background: var(--red-light); color: var(--red); border-color: var(--border); }
.card-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; padding-right: 32px; }
.card-title    { font-size: 18px; font-weight: 700; }
.card-subtitle { font-size: 13px; color: var(--text-muted); }
/* Stats grid on the left, athlete photo set apart on the right. */
.card-stats-row { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 14px; }
.card-stats-row .card-stats { flex: 1; min-width: 0; margin-bottom: 0; }
.card-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px; margin-bottom: 18px;
}
.stat-box {
  background: var(--bg); border-radius: var(--radius); padding: 10px 14px;
  border: 1px solid var(--border-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.stat-box:hover {
  border-color: var(--red); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px var(--shadow);
}
.stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; }
.stat-value { font-size: 18px; font-weight: 700; }
/* Leader stat boxes hold a name (often long) rather than a number, so shrink
   the value a touch and let it wrap instead of overflowing the box. */
.stat-value--name { font-size: 15px; line-height: 1.25; }
.stat-value--name .nav-link { font-weight: 700; }
.stat-rank  { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat-box.clickable { cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s; }
.stat-box.clickable:hover { background: var(--red-light); border-color: var(--red); }
/* Athlete headshot: a square set apart to the right of the stats grid.
   A silhouette is painted as the box background; when a real photo loads it
   covers the silhouette, and when no photo exists (img removed via onerror)
   the silhouette shows through as a placeholder. */
.stat-photo {
  flex: 0 0 auto; width: 192px; height: 192px; align-self: flex-start;
  border-radius: var(--radius); border: 1px solid var(--border-light);
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='23'%20r='12'%20fill='%23cbbda3'/%3E%3Cpath%20d='M13%2058c0-11%208-19%2019-19s19%208%2019%2019z'%20fill='%23cbbda3'/%3E%3C/svg%3E") center 60% / 48% no-repeat var(--bg);
}
[data-theme="dark"] .stat-photo {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='23'%20r='12'%20fill='%234a4335'/%3E%3Cpath%20d='M13%2058c0-11%208-19%2019-19s19%208%2019%2019z'%20fill='%234a4335'/%3E%3C/svg%3E");
}
.stat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-section-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--red); margin: 34px 0 12px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 11px; font-size: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pill-count { font-weight: 600; color: var(--text-muted); font-size: 11px; }
.pill-score { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Tier badges ──────────────────────────────────────────────────────────── */
.tier-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.tier-Advanced     { background: var(--adv-bg); color: var(--adv-fg); }
.tier-Intermediate { background: var(--int-bg); color: var(--int-fg); border: 1px solid var(--border); }
.tier-Beginner     { background: var(--beg-bg); color: var(--beg-fg); border: 1px solid var(--border); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.data-table tbody.summary-body td { background: var(--bg); border-bottom: 2px solid var(--border); padding: 8px 14px; font-size: 12px; color: var(--text-muted); cursor: default; white-space: nowrap; }
.data-table tbody.summary-body td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.data-table tbody.summary-body td.name-cell { font-weight: 700; color: var(--text); }
.table-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table-wrapper--sticky { max-height: 72vh; overflow: hidden; display: flex; flex-direction: column; }
.table-wrapper--sticky .data-table tbody.summary-body td { position: sticky; top: 0; z-index: 4; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
  padding: 10px 14px; text-align: left; font-weight: 600; font-size: 11px;
  letter-spacing: 0.3px; color: #fff; background: var(--th-bg);
  border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none;
}
.data-table thead th.num { text-align: right; }
.data-table thead th:hover { color: rgba(255,255,255,0.8); }
.data-table thead th[title] { cursor: help; }
.data-table thead th.sort-asc::after  { content: " ↑"; color: #fff; }
.data-table thead th.sort-desc::after { content: " ↓"; color: #fff; }
.data-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.1s; }
.data-table tbody tr:nth-child(even) { background: var(--row-alt); }
.data-table tbody tr:last-child  { border-bottom: none; }
.data-table tfoot tr { border-top: 2px solid var(--border); background: rgba(240,232,214,0.5); }
.data-table tfoot td { padding: 9px 14px; font-size: 13px; vertical-align: middle; color: var(--text-muted); }
.data-table tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover       { background: var(--row-hover); cursor: pointer; }
.data-table tbody tr.highlighted { background: var(--red-light); }
.data-table td { padding: 9px 14px; vertical-align: middle; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .row-num { color: var(--text-muted); font-size: 11px; width: 1%; white-space: nowrap; }
.data-table td.row-num, .data-table th.row-num, .data-table thead th.row-num { text-align: left; padding-left: 12px; padding-right: 4px; }
.data-table .row-num + td, .data-table .row-num + th { padding-left: 8px; }
.data-table thead .row-num { color: #fff; }
.data-table td.name-cell { font-weight: 500; }
#missing-table-male tbody tr:hover,
#missing-table-female tbody tr:hover { background: none; cursor: default; }

/* ── Findings ─────────────────────────────────────────────────────────────── */
.findings-grid { display: flex; flex-direction: column; gap: 48px; }
.findings-page-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; line-height: 1.6; }
.findings-leaderboard { margin-bottom: 44px; }
/* Leader cards run larger than the detail-card stat boxes, with extra space
   between them. Scoped here so the detail cards keep their tighter size. */
.findings-leaderboard .card-stats {
  grid-template-columns: repeat(auto-fill, minmax(173px, 1fr));
  gap: 59px;
}
.findings-leaderboard .stat-box { padding: 14px 20px; border-left-width: 4px; }
/* Give each leader box its own accent so the six are easy to tell apart. */
.findings-leaderboard .stat-box:nth-child(6n+1) { border-left-color: var(--lead-1); }
.findings-leaderboard .stat-box:nth-child(6n+2) { border-left-color: var(--lead-2); }
.findings-leaderboard .stat-box:nth-child(6n+3) { border-left-color: var(--lead-3); }
.findings-leaderboard .stat-box:nth-child(6n+4) { border-left-color: var(--lead-4); }
.findings-leaderboard .stat-box:nth-child(6n+5) { border-left-color: var(--lead-5); }
.findings-leaderboard .stat-box:nth-child(6n+6) { border-left-color: var(--lead-6); }
/* Keep the accent on hover instead of overriding it with the global red. */
.findings-leaderboard .stat-box:hover { border-color: var(--border-light); }
.findings-leaderboard .stat-box:nth-child(6n+1):hover { border-left-color: var(--lead-1); }
.findings-leaderboard .stat-box:nth-child(6n+2):hover { border-left-color: var(--lead-2); }
.findings-leaderboard .stat-box:nth-child(6n+3):hover { border-left-color: var(--lead-3); }
.findings-leaderboard .stat-box:nth-child(6n+4):hover { border-left-color: var(--lead-4); }
.findings-leaderboard .stat-box:nth-child(6n+5):hover { border-left-color: var(--lead-5); }
.findings-leaderboard .stat-box:nth-child(6n+6):hover { border-left-color: var(--lead-6); }
.findings-leaderboard .stat-label { font-size: 14px; }
.findings-leaderboard .stat-value--name { font-size: 22px; }
.findings-leaderboard .stat-rank { font-size: 16px; }
.findings-leader-note {
  font-size: 12px; color: var(--text-muted); font-style: italic;
  margin-top: 14px;
}
.finding-block {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--radius);
  padding: 30px 34px; box-shadow: 0 1px 5px rgba(0,0,0,0.05);
  transition: border-left-color 0.2s;
}
.finding-block:hover { border-left-color: var(--red); }
.fig-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); margin-bottom: 6px; }
.finding-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.finding-desc  { font-size: 13px; color: var(--text-muted); margin-bottom: 26px; line-height: 1.65; }

.chart-wrap          { position: relative; width: 100%; height: 320px; }
.chart-wrap.tall     { height: 600px; }
.chart-wrap.medium   { height: 420px; }
.chart-wrap.small    { height: 260px; }
.chart-wrap--square  { height: auto; aspect-ratio: 11 / 6; max-width: min(1470px, 100%); }

.tier-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.tier-charts .chart-wrap { height: 260px; }

/* ── Welcome tab ──────────────────────────────────────────────────────────── */
.welcome-layout { display: flex; flex-direction: column; gap: 52px; }
.welcome-body { display: block; }

.welcome-timeline-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 36px; }
.welcome-hero { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 32px 36px; }
.welcome-hero h2 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.welcome-hero p  { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 10px; }
.welcome-hero p:last-child { margin-bottom: 0; }

.welcome-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.welcome-stat-card {
  background: var(--red); border-radius: var(--radius);
  padding: 28px 20px; text-align: center; cursor: pointer;
  border: none; color: #fff; font-family: var(--font);
  transition: background 0.15s, transform 0.1s;
  text-decoration: none; display: block;
}
.welcome-stat-card:hover { background: #7a1515; transform: translateY(-2px); }
.welcome-stat-card .stat-num   { font-size: 42px; font-weight: 700; color: #fff; line-height: 1.1; }
.welcome-stat-card .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: rgba(255,255,255,0.8); margin-top: 8px; }

.welcome-basics { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.welcome-basics > summary { list-style: none; cursor: pointer; padding: 20px 28px; display: flex; align-items: baseline; gap: 12px; }
.welcome-basics > summary::-webkit-details-marker { display: none; }
.welcome-basics > summary:hover { background: var(--red-light); }
.welcome-basics-title { font-size: 18px; font-weight: 700; }
.welcome-basics-hint { font-size: 13px; color: var(--text-muted); font-style: italic; }
/* plus drawn with two centered bars (not a glyph) so it stays centered when
   rotated into an × on open */
.welcome-basics-toggle { flex-shrink: 0; margin-left: auto; align-self: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--red), var(--red)) center / 8px 1.6px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 1.6px 8px no-repeat,
    var(--red-light);
  transition: background 0.12s, transform 0.2s; }
.welcome-basics[open] > summary { border-bottom: 1px solid var(--border); }
.welcome-basics[open] > summary .welcome-basics-hint { display: none; }
.welcome-basics[open] > summary .welcome-basics-toggle {
  background:
    linear-gradient(#fff, #fff) center / 8px 1.6px no-repeat,
    linear-gradient(#fff, #fff) center / 1.6px 8px no-repeat,
    var(--red);
  transform: rotate(45deg); }
.welcome-basics-body { padding: 18px 28px 24px; }
.welcome-basics-body p { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; }
.welcome-basics-body p:last-child { margin-bottom: 0; }

.welcome-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.video-header { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; text-align: center; }
.welcome-section > p { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 10px; }
.welcome-section > p:last-child { margin-bottom: 0; }

/* ── Kata tier system (Welcome) ── */
.tier-list { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 4px 0 12px; padding-left: 20px; }
.tier-list li { margin-bottom: 5px; font-size: 13px; color: var(--text-muted); }
.tier-curve-wrap { max-width: 495px; margin: 18px auto 0; }
.tier-curve-wrap svg { display: block; width: 100%; height: auto; }
.tier-curve-caption { font-size: 12px; color: var(--text-muted); font-style: italic; text-align: center; line-height: 1.5; margin: 6px auto 0; max-width: 520px; }

.how-to-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.how-to-group { grid-column: 1 / -1; margin: 10px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); }
.how-to-group:first-child { margin-top: 0; }
.how-to-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  cursor: pointer; user-select: none;
}
.how-to-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.09); transform: translateY(-1px); border-color: var(--red); }
.how-to-card.open { border-color: var(--red); cursor: default; }
.how-to-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; width: 28px; text-align: center; }
.how-to-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.how-to-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.how-to-body > strong { display: block; font-size: 13px; font-weight: 700; }
.how-to-toggle { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--red), var(--red)) center / 8px 1.6px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 1.6px 8px no-repeat,
    var(--red-light);
  cursor: pointer; transition: background 0.12s, transform 0.2s; }
.how-to-card.open .how-to-toggle {
  background:
    linear-gradient(#fff, #fff) center / 8px 1.6px no-repeat,
    linear-gradient(#fff, #fff) center / 1.6px 8px no-repeat,
    var(--red);
  transform: rotate(45deg); }
.how-to-detail { display: none; margin-top: 8px; }
.how-to-card.open .how-to-detail { display: block; }
.how-to-card p { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0 0 6px; }
.how-to-card p:last-child { margin-bottom: 0; }
.how-to-card ul { margin: 0; padding-left: 18px; list-style: disc; }
.how-to-card li { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0 0 5px; }
.how-to-card li:last-child { margin-bottom: 0; }
.how-to-q { margin-top: 8px !important; margin-bottom: 0 !important; padding-top: 8px; border-top: 1px solid var(--border-light); color: var(--text) !important; font-style: italic; }
.how-to-card.open .how-to-q { margin-top: 0 !important; padding-top: 10px; }

/* ── Split table: fixed header + scrollable body ─────────────────────────── */
.dt-fixed-header { overflow-x: hidden; flex-shrink: 0; }
.dt-scroll-body  { flex: 1; overflow-y: auto; overflow-x: auto; min-height: 0; }
/* Transient state used only to measure each column's natural width */
.dt-measuring { table-layout: auto !important; width: max-content !important;
  max-width: none !important; align-self: flex-start !important; }
.dt-measuring th, .dt-measuring td { white-space: nowrap !important; }
/* Keep split-table cells on one line so columns never overlap; the table gets
   a min-width in JS and scrolls horizontally when the viewport is too narrow */
.table-wrapper--sticky .data-table th,
.table-wrapper--sticky .data-table td,
.card-table-wrap .data-table th,
.card-table-wrap .data-table td { white-space: nowrap; }
/* Detail-card tables: match the kata master table's # column. Inherit its
   padding (the .row-num rules further up) and pin the # column to a fixed
   width so the gap to the next column is identical across every card instead
   of tracking each table's largest row number (see splitTableScroll). */
.card-table-wrap .data-table .row-num { width: 28px; }
.dt-scroll-body::-webkit-scrollbar { width: 6px; height: 6px; }
.dt-scroll-body::-webkit-scrollbar-track { background: transparent; }
.dt-scroll-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.dt-scroll-body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── About tab ────────────────────────────────────────────────────────────── */
.about-layout { display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: start; }
.about-main   { display: flex; flex-direction: column; gap: 40px; }
.about-sidebar { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; }
.about-sidebar h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; }
blockquote.dedication {
  border-left: 3px solid var(--red); background: var(--red-light);
  border-radius: var(--radius); padding: 16px 20px;
  font-size: 14px; font-style: italic; color: var(--text); line-height: 1.7; margin: 0;
}
.download-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--red);
  text-decoration: none; transition: background 0.12s, border-color 0.12s;
  align-self: flex-start;
}
.download-link:hover { background: var(--red-light); border-color: var(--red); }

/* ── Important Notes ──────────────────────────────────────────────────────── */
.notes-content { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.note-section.full-width { grid-column: 1 / -1; }
.note-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05); color: var(--text);
}
.note-section h2 { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.note-section h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--text-muted); }
.note-section p  { font-size: 13px; color: var(--text); line-height: 1.7; margin-bottom: 10px; }
.note-section p:last-child { margin-bottom: 0; }
.note-section ul { font-size: 13px; color: var(--text); line-height: 1.7; padding-left: 20px; }
.note-section li { margin-bottom: 6px; }
.note-section strong { color: var(--text); font-weight: 600; }
.note-section h3 + ul { margin-top: 4px; }
.note-section code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: 3px; padding: 1px 5px; color: var(--text); white-space: nowrap; }
.missing-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* ── Card inner table ─────────────────────────────────────────────────────── */
.card-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 6px; margin-bottom: 14px; max-height: 340px; overflow: hidden; display: flex; flex-direction: column; }
.card-table-wrap .data-table tbody tr:hover { background: var(--row-hover); cursor: default; }

/* ── Performed/unperformed kata grid ──────────────────────────────────────── */
.performed-kata-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.performed-kata-grid > * { min-width: 0; }
.performed-kata-section h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 10px; }

/* ── Compare tab ──────────────────────────────────────────────────────────── */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.compare-col  { min-width: 0; }
.compare-head { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ── Collapsible findings boxes ───────────────────────────────────────────── */
.finding-collapsible > .finding-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}
.finding-collapsible[open] > .finding-summary { margin-bottom: 12px; }
.finding-collapsible > .finding-summary::-webkit-details-marker { display: none; }
.finding-hint { font-style: italic; font-weight: 400; font-size: 13px; color: var(--text-muted); margin-left: 10px; }
.finding-collapsible[open] > .finding-summary .finding-hint { display: none; }
/* red plus badge — plus is drawn with two centered bars (not a glyph) so it
   stays perfectly centered when rotated into an × on open */
.finding-collapsible > .finding-summary::after {
  content: "";
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--red), var(--red)) center / 8px 1.6px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 1.6px 8px no-repeat,
    var(--red-light);
  transition: background 0.12s, transform 0.2s;
}
.finding-collapsible[open] > .finding-summary::after {
  background:
    linear-gradient(#fff, #fff) center / 8px 1.6px no-repeat,
    linear-gradient(#fff, #fff) center / 1.6px 8px no-repeat,
    var(--red);
  transform: rotate(45deg);
}

/* ── Kata status table (Figure G-2 combined) ─────────────────────────────── */
.ks-legend { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 20px; }
.ks-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #000; white-space: nowrap; }
.ks-pill-both   { background: #bbf7d0; }
.ks-pill-male   { background: #bfdbfe; }
.ks-pill-female { background: #e9d5ff; }
.ks-pill-none   { background: #fecaca; }
.ks-pill-count { font-weight: 700; opacity: 0.65; margin-left: 2px; }
.ks-three-col { display: grid; grid-template-columns: 5fr 5fr 6fr; gap: 16px; }
.ks-three-col > * { min-width: 0; overflow: hidden; }
.ks-three-col .data-table { table-layout: fixed; width: 100%; }
.ks-three-col .data-table td:not(.row-num), .ks-three-col .data-table th:not(.row-num) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-three-col .data-table .row-num { width: 40px; }
@media (max-width: 700px) { .ks-three-col { grid-template-columns: 1fr; } }

/* ── Navigation confirmation modal ───────────────────────────────────────── */
.nav-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.nav-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.14); max-width: 360px; width: 90%; }
.nav-modal-msg { font-size: 14px; color: var(--text); margin-bottom: 20px; line-height: 1.6; }
.nav-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.nav-modal-cancel { padding: 7px 18px; border: 1px solid var(--border); background: var(--bg); border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); }
.nav-modal-go { padding: 7px 18px; background: var(--red); border: none; border-radius: 6px; font-size: 13px; cursor: pointer; color: #fff; font-weight: 600; }
.nav-modal-cancel:hover { background: var(--border); }
.nav-modal-go:hover { opacity: 0.88; }
.nav-link { color: var(--red); text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font: inherit; font-size: inherit; }
.nav-link:hover { text-decoration: underline; }

/* ── Compare (two-entity head-to-head) ────────────────────────────────────── */
.compare-btn {
  position: relative; top: -6px; overflow: hidden;
  margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--red); border: 1px solid var(--red); color: #fff;
  border-radius: 22px; padding: 13px 22px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px var(--compare-shadow);
  transition: filter 0.12s, background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s;
  animation: compare-glow 2.6s ease-in-out infinite;
}
/* Diagonal light sweep that periodically slides across the button */
.compare-btn::after {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: compare-shine 2.8s ease-in-out infinite;
}
.compare-btn:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--compare-glow);
}
@keyframes compare-glow {
  0%, 100% { box-shadow: 0 2px 8px var(--compare-shadow); }
  50%      { box-shadow: 0 2px 18px var(--compare-glow); }
}
@keyframes compare-shine {
  0%   { left: -80%; }
  55%  { left: 135%; }
  100% { left: 135%; }
}
@media (prefers-reduced-motion: reduce) {
  .compare-btn { animation: none; }
  .compare-btn::after { display: none; }
}
.compare-modal-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18); width: min(620px, 94%);
  max-height: 88vh; display: flex; flex-direction: column;
}
/* Athlete comparisons are wider to give the headshots room to breathe. The
   headshots make this modal taller, so lift the height cap and tighten the
   vertical rhythm a touch so the whole card fits without any scroll. */
.compare-modal-box--athletes { width: min(760px, 94%); max-height: 92vh; }
.compare-modal-box--athletes .compare-modal-body { padding-top: 11px; padding-bottom: 11px; }
.compare-modal-box--athletes .compare-photo { margin-bottom: 6px; }
.compare-modal-box--athletes .compare-table thead th { padding-bottom: 8px; }
/* Headshot above each athlete's name in the comparison header. Mirrors the
   detail-card .stat-photo: a silhouette background shows through when the img
   is absent (removed via onerror) so missing photos still look intentional. */
.compare-photo {
  width: 116px; height: 116px; margin: 0 auto 10px; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border-light);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='23'%20r='12'%20fill='%23cbbda3'/%3E%3Cpath%20d='M13%2058c0-11%208-19%2019-19s19%208%2019%2019z'%20fill='%23cbbda3'/%3E%3C/svg%3E") center 60% / 48% no-repeat var(--bg);
}
[data-theme="dark"] .compare-photo {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='23'%20r='12'%20fill='%234a4335'/%3E%3Cpath%20d='M13%2058c0-11%208-19%2019-19s19%208%2019%2019z'%20fill='%234a4335'/%3E%3C/svg%3E");
}
.compare-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-light);
}
.compare-modal-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--red); margin-right: auto; }
.compare-modal-head .card-close-btn { position: static; }
/* The compare-btn's -6px nudge is tuned for card headers; in the modal's
   flex-centered head bar it just pushes the button above center, so drop it. */
.compare-modal-head .compare-btn { top: 0; }
.compare-modal-body { padding: 16px 18px; overflow: auto; }
.compare-search {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; margin-bottom: 12px; background: var(--bg); color: var(--text); box-sizing: border-box;
}
.compare-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 56vh; overflow: auto; }
.compare-pick-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius); cursor: pointer; font-size: 14px; border: 1px solid transparent;
}
.compare-pick-item:hover { background: var(--red-light); border-color: var(--red); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-light); }
.compare-table thead th { text-align: center; padding-bottom: 12px; }
/* The entity name lives in an inner flex span so the <th> stays a real table
   cell — otherwise a flex <th> won't equalize header heights and the bottom
   border under a one-line name (e.g. Unsu) sits higher than a two-line name. */
.compare-entity { text-align: center; vertical-align: middle; font-weight: 800; font-size: 15px; }
.compare-entity .ce-inner { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.compare-metric { text-align: center; color: var(--text-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.compare-val { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; width: 36%; }
.compare-val.win { color: var(--pos); font-weight: 800; background: rgba(58,110,58,0.10); }
[data-theme="dark"] .compare-val.win { background: rgba(107,176,107,0.14); }
.compare-val.tie { color: #8a6d3b; font-weight: 800; background: rgba(200,164,100,0.20); }
[data-theme="dark"] .compare-val.tie { color: #d9be86; background: rgba(200,164,100,0.16); }
.compare-foot { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 14px; line-height: 1.5; }

/* ── References tab ───────────────────────────────────────────────────────── */
.ref-section-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.ref-layout   { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ref-layout.single { grid-template-columns: 1fr; }
.ref-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 26px 30px; box-shadow: 0 1px 5px rgba(0,0,0,0.05); }
.ref-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 6px; }
.ref-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ref-meta  { font-size: 12px; color: var(--text-muted); margin-bottom: 0; }
.ref-link  { color: var(--red); text-decoration: none; }
.ref-link:hover { text-decoration: underline; }

@media (max-width: 700px) {
  header { padding: 14px 16px; }
  .tab-content { padding: 16px; }
  .tier-charts, .missing-tables, .performed-kata-grid,
  .how-to-grid, .compare-grid, .notes-content { grid-template-columns: 1fr; }
  .search-input { width: 100%; }
  .finding-block { padding: 16px; }
  .how-to-grid { grid-template-columns: 1fr; }
  .ref-layout { grid-template-columns: 1fr; }

  /* Search wraps to its own full-width row instead of overflowing */
  .header-right { flex-wrap: wrap; }
  .global-search-wrap { flex: 1 1 100%; }
  #global-search { width: 100%; box-sizing: border-box; }

  /* Shrink the athlete headshot so the stats grid keeps room on narrow screens */
  .card-stats-row { gap: 14px; }
  .stat-photo { width: 139px; height: 139px; }

  /* Keep the three stat cards side by side, just more compact */
  .welcome-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .welcome-stat-card { padding: 16px 6px; }
  .welcome-stat-card .stat-num   { font-size: 26px; }
  .welcome-stat-card .stat-label { font-size: 10px; letter-spacing: 0.3px; margin-top: 5px; }

  /* Compact the top-level tabs + gender toggle so they fit one row without the
     Male/Female toggle spilling off the right edge */
  .tab-bar { padding: 0 6px; gap: 0; }
  .tab-btn, .tab-group-btn { padding: 9px 6px; font-size: 12px; }
  .tab-group-btn { gap: 2px; }
  .tab-caret { font-size: 13px; margin-left: 0; }
  .tab-bar-toggle { padding-left: 4px; }
  .gender-btn { padding: 4px 8px; font-size: 11px; }

  /* Detail-card compare button sits under the name at the left, not pushed
     to the far right on its own row */
  .card-header .compare-btn { margin-left: 0; }

  /* Head-to-head comparison table fits the modal width instead of overflowing
     (which forced the right entity off-screen) */
  .compare-table { table-layout: fixed; }
  .compare-table th, .compare-table td { padding: 8px 5px; }
  .compare-metric { white-space: normal; }
  .compare-entity { font-size: 14px; }
  .compare-val { font-size: 14px; width: 34%; }
  .compare-photo { width: 84px; height: 84px; margin-bottom: 7px; }

  /* Timelines are a fixed-width graphic — let them scroll instead of squashing
     the tournament pills on top of each other */
  #welcome-timeline-wrap, #tourn-timeline-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  #welcome-timeline-wrap .tl-real, #tourn-timeline-wrap .tl-real {
    width: 940px !important; margin: 0 !important;
  }
}

/* ── Global search ────────────────────────────────────────────────────────── */
#global-search {
  width: 350px; padding: 7px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; font-family: var(--font);
  background: var(--surface); color: var(--text); outline: none;
  transition: border-color 0.15s;
}
#global-search:focus { border-color: var(--red); }
#global-search::placeholder { color: var(--text-muted); }

.global-search-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 320px; max-height: 440px; overflow-y: auto;
  z-index: 1000;
}
.gsd-group-label {
  padding: 8px 14px 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted);
  background: var(--bg); border-top: 1px solid var(--border-light);
}
.gsd-group-label:first-child { border-top: none; }
.gsd-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 9px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border-light); transition: background 0.1s;
}
.gsd-item:last-child { border-bottom: none; }
.gsd-item:hover { background: var(--row-hover); }
.gsd-name { font-size: 13px; font-weight: 500; color: var(--text); }
.gsd-sub  { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.gsd-empty { padding: 18px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ── Back button ──────────────────────────────────────────────────────────── */
#nav-back-btn {
  position: fixed; bottom: 28px; left: 28px; z-index: 500;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--red);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
#nav-back-btn:hover { background: var(--red-light); border-color: var(--red); transform: translateY(-1px); }

/* ── Medals two-column layout ─────────────────────────────────────────────── */
.medals-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { .medals-two-col { grid-template-columns: 1fr; } }

/* ── Tournament timeline ──────────────────────────────────────────────────── */
.tourn-timeline {
  display: flex; gap: 24px; overflow-x: auto; padding: 12px 0 18px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  align-items: flex-start;
}
.tourn-timeline::-webkit-scrollbar { height: 5px; }
.tourn-timeline::-webkit-scrollbar-track { background: transparent; }
.tourn-timeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tl-year-group { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.tl-year {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
  padding-bottom: 4px; border-bottom: 1px solid var(--border-light);
}
.tl-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 14px; font-size: 12px;
  font-family: var(--font); cursor: pointer; color: var(--text);
  white-space: nowrap; transition: background 0.12s, border-color 0.12s;
}
.tl-chip:hover { background: var(--red-light); border-color: var(--red); color: var(--red); }
.tl-chip-real {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px; font-size: 11px;
  font-family: var(--font); cursor: pointer; color: var(--text);
  white-space: nowrap; transition: background 0.12s, border-color 0.12s;
}
.tl-chip-real:hover { background: var(--red-light); border-color: var(--red); color: var(--red); }

/* ── Site credit ──────────────────────────────────────────────────────────── */
#site-credit {
  text-align: right;
  margin-top: -12px;
  padding: 0 48px 16px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}
#site-credit a { color: inherit; text-decoration: none; }
#site-credit a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── Medals tab ───────────────────────────────────────────────────────────── */