/* ─────────────────────────────────────────────────────────────────────────
   design-system.css · v1.6 · 2026-05-10
   GleamingGymnast — single stylesheet consumed by build_site.py.
   Every generated page links exactly one copy of this file.

   Reference: DESIGN_SYSTEM.md v1.4 (2026-05-07). Every token here mirrors
   a token specified there. Change DESIGN_SYSTEM.md first, then this file.

   v1.6 (2026-05-10) — B-redo CSS regression resync (combined fix-and-ship
   leg). Re-applies the 2026-05-07 Workstream-B-redo edits whose disk
   state regressed back to the v1.4 pre-redo baseline; the post-redo md5
   c2ce115344bd6eb836c054e33f8b5078 was claimed but never persisted (see
   _reports/2026-05-07_wd_audit_workstream_b_redo_admission_delta.md and
   the 2026-05-08 regression note in LCP_INDEX). The numeric v1.5 was
   claimed but never landed; v1.6 marks the actually-shipped version of
   the B-redo edits + redesign work that landed in between (§5.32 /
   §5.34 / §5.38–§5.42, all verified non-conflicting). Re-applied edits:
     D1/D2 contrast pass:
       --gg-color-link token (#EBB3C2; AA-body 5.58:1 on plum-900)
       global a {} re-tokened to var(--gg-color-link)
       .gg-hero__subtitle / .gg-otd-hero__context → rgba(255,255,255,0.86)
       .gg-empty-state__icon / .gg-provenance a → var(--gg-color-link)
       (plum-500 retained on decorative stats, chips, gradients, hovers
        per the B § 2 "non-text reservation" policy)
     D5/D6 focus indicator fixes:
       .gg-header__signin:focus-visible split out from combined
         :hover, :focus-visible rule. outline:none removed; replaced with
         a 3px gold outline + 2px offset (AAA on plum-900, ≥7:1).
       .gg-search__input outline:0 → 2px transparent (Windows
         high-contrast-mode users get a system-Highlight repaint; the
         wrapper's :focus-within ring remains the visible cue).
     D3 previously-undefined classes (append-only block, see §8 below):
       .gg-pagination__controls / __link / __link--prev / --next /
         --disabled + .gg-pagination__ellipsis (44×44 min touch targets)
       .gg-skills + descendants (gold-rail boxed surface-1 wrapper)
       .gg-otd-anchor + descendants (link-tone-rail paired companion)
       .gg-page-section (64ch prose container)
       .gg-404 (gold-rail boxed error card)
       .coverage-grid + .coverage-grid .gg-stat (4-col ≥768px / 2-col below)
       .gg-table:not(.gg-table--interactive) tbody tr:hover td (D11 revert)
     D12 polish: .gg-otd-hero__og display:none override (kept under
       @media (min-width:1200px) so the OG-render pipeline can override
       once a real OG image lands).
     D24 polish: .gg-skeleton reduced-motion override (animation:none +
       fall back to surface-2).

   v1.5 (claimed 2026-05-07; NOT shipped) — same edits as v1.6 above; the
   redo specialist's md5 verifications were against a sandbox path that
   did not propagate to host disk. v1.5 is intentionally skipped to keep
   the version history honest about what's actually in production.

   v1.3 (2026-05-04) — Workstream 2 v2: per Josh rulings D10/D11/D12/D14/D15/D16
   on chrome elements, wireframes win over W1 chrome synthesis spec. §4 Header
   rewritten to publication-style solid plum-900 (D10) + 2-stop gold→plum-500
   wordmark (D11) + .gg-pub-link text-on-bar nav (D14). DROPPED: .gg-nav-chip
   + variants (Option B delete-now per Josh approval); .gg-footer--three-col
   + subclasses (D15 — wireframes use simple 1-row footer); .gg-watermark
   + --dense (D16). KEPT from v1.2:
   F/M tag tokens; rem-based type scale; .gg-header__hamburger (D13). Net
   ~80 LOC churn (promotes ≈ removes).

   v1.4 (2026-05-21) — L1 leg: body.gg-silhouette §5.10 retired per owner
   directive 2026-05-20. Stick-figure background watermark removed sitewide.
   §5.10 block + TOC entry + D16 reference comment deleted.

   v1.7 (2026-05-21) — L4.1 leg: .gg-chip mobile polish per the filter
   consistency pass. min-height 32px → 44px (Rule 11 touch-target floor);
   added inline-flex + align-items:center; padding-block bumped 8→10px.
   No new components; no new tokens. Hover + active doctrine (v1.5)
   unchanged.

   v1.1 (2026-04-23) — promotes 20 components from wireframes/_proposed_v11.css
   into the canonical design system. Zero new tokens (all 25 v11 tokens
   already existed in v1.0). Promoted components, in authoring order:

                                       §5.20 .gg-empty-state
     §5.11 .gg-hero (+ variants)       §5.21 .gg-subnav
     §5.12 .gg-eyebrow                 §5.22 .gg-entry-card
     §5.13 .gg-defining-stat           §5.23 .gg-otd-hero
     §5.14 .gg-rail (+ header)         §5.24 .gg-prose
     §5.15 .gg-named-card              §5.25 .gg-disclosure
     §5.16 .gg-era-band                §5.26 .gg-provenance
     §5.17 .gg-score-with-era          §5.27 .gg-chip--removable
     §5.18 .gg-breadcrumb              §5.28 .gg-skeleton
     §5.19 .gg-pagination              §5.29 .gg-header__signin
                                              + .gg-header__avatar
     §5.7  .gg-table mobile-cards variant (extends v1.0 §5.7)

   Structure:
     1. :root token block
     2. Reset + base
     3. Inter font load (via @import; build_site may prefer <link>)
     4. Header
     5. Components (5.1–5.29)
     6. Mobile-first media queries
     7. Reduced-motion override
   ───────────────────────────────────────────────────────────────────────── */


/* 1 ── Root token block ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  color-scheme: dark;

  /* Core palette */
  --gg-color-plum-900: #7A1E48;
  --gg-color-plum-700: #8E2E52;
  --gg-color-plum-500: #C87D90;
  --gg-color-surface-1: #1E1B2E;
  --gg-color-surface-2: #2A2640;
  --gg-color-border: #5C4468;
  --gg-color-text-primary: #F0ECF4;
  --gg-color-text-muted: #B8B0C4;
  --gg-color-text-dark: #1E1B2E;
  --gg-color-white: #FFFFFF;

  /* Medal palette (medals-only rule — see DESIGN_SYSTEM.md § 2.2) */
  --gg-color-medal-gold: #FFD700;
  --gg-color-medal-silver: #C0C8D8;
  --gg-color-medal-bronze: #CD7F32;
  --gg-color-gold: var(--gg-color-medal-gold);

  /* Functional */
  --gg-color-focus-ring: var(--gg-color-medal-gold);
  --gg-color-success: #5DDC9E;
  --gg-color-danger: #F08080;
  --gg-color-info: #7BB4E0;

  /* Link / inline-text accent (v1.6 — was plum-500 inline; re-tokened
     for D1/D2 contrast). Measured 5.58:1 on plum-900 (AA-body PASS) and
     9.40:1 on surface-1 (AAA). Plum-500 is reserved for non-text uses
     (decorative stat values, gradient stops, hover borders, chip tints).
     If you reach for plum-500 on body copy, use --gg-color-link instead. */
  --gg-color-link: #EBB3C2;

  /* F/M tag chip colors (W2 v1.2 additions per DESIGN_SYSTEM.md § 2.3 + chrome synthesis spec § 5) */
  --gg-color-tag-female: #E8728A; /* plum-500 family for cohesion; pair with --gg-color-text-dark; AA-body 5.76:1 */
  --gg-color-tag-male:   #7BB4E0; /* same hex as --gg-color-info; pair with --gg-color-text-dark; AAA 7.55:1 */

  /* Gradients */
  --gg-gradient-header: linear-gradient(
    135deg,
    #7A1E48 0%, #8E2E52 25%, #A83D5E 50%, #BE5570 75%, #C87D90 100%
  );
  --gg-gradient-hero: linear-gradient(
    135deg,
    #7A1E48 0%, #2A2640 55%, #1E1B2E 100%
  );

  /* Type scale (W2 v1.2 CF-5: rem-based; respects user-set browser default font size) */
  --gg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --gg-font-mono: "Menlo", "Consolas", "Monaco", monospace;
  --gg-text-h1: 1.75rem;    /* 28px @ 16px default */
  --gg-text-h2: 1.375rem;   /* 22px */
  --gg-text-h3: 1.125rem;   /* 18px */
  --gg-text-body: 1rem;     /* 16px */
  --gg-text-small: 0.875rem;/* 14px */
  --gg-text-micro: 0.6875rem;/* 11px */
  --gg-text-mono: 0.8125rem;/* 13px */
  --gg-text-stat: 1.75rem;  /* 28px */

  /* Spacing */
  --gg-space-1: 4px;
  --gg-space-2: 8px;
  --gg-space-3: 12px;
  --gg-space-4: 16px;
  --gg-space-5: 24px;
  --gg-space-6: 32px;
  --gg-space-7: 48px;
  --gg-space-8: 64px;

  /* Radius */
  --gg-radius-sm: 4px;
  --gg-radius-md: 8px;
  --gg-radius-lg: 12px;
  --gg-radius-pill: 999px;

  /* Shadow */
  --gg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --gg-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.3);
  --gg-shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.38);

  /* Motion */
  --gg-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gg-duration-fast: 160ms;
  --gg-duration-base: 220ms;
}


/* 2 ── Reset + base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--gg-font-sans);
  font-size: var(--gg-text-body);
  line-height: 1.55;
  background: var(--gg-color-plum-900);
  color: var(--gg-color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: var(--gg-text-h1); font-weight: 700; }
h2 { font-size: var(--gg-text-h2); font-weight: 700; }
h3 { font-size: var(--gg-text-h3); font-weight: 600; }
p  { margin: 0; }
a  { color: var(--gg-color-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gg-color-text-primary); }

/* Shared focus-ring mixin — used on every interactive element. */
:focus-visible {
  outline: 3px solid var(--gg-color-focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}


/* 4 ── Header ──────────────────────────────────────────────────────── */
/* W2 v2 (2026-05-04) per Josh rulings D10/D11/D12: ESPN-publication-style
   solid plum-900 bar with 2-stop gold→plum-500 wordmark. Authority:
   _archive/reports/design_alignment/2026-04-21_home_page_design_lock.md §1.
   Nav class = .gg-pub-link text-on-bar with gold underline-current (D14;
   replaces v1.2 .gg-nav-chip chip pattern, deleted). */
.gg-header {
  background: var(--gg-color-plum-900);
  padding: 0 var(--gg-space-5);
  min-height: 64px;
  display: flex;
  align-items: stretch;
  gap: var(--gg-space-5);
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 10;
}
.gg-header__title {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  align-self: center;
  line-height: 1;
}
.gg-header__title:hover,
.gg-header__title:focus-visible {
  text-decoration: none;
}
.gg-header__title:hover .gg-header__brand { filter: brightness(1.08); }
.gg-header__brand {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #FFD700 0%, #C87D90 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  /* Breathing room so descenders on 'g' / 'y' aren't clipped by text-fill box. */
  line-height: 1.2;
  padding-bottom: 3px;
  display: inline-block;
  white-space: nowrap;
}
.gg-header__star {
  color: var(--gg-color-medal-gold);
  -webkit-text-fill-color: var(--gg-color-medal-gold);
  margin: 0 3px;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
}
@media (min-width: 768px) {
  .gg-header__brand { font-size: 28px; }
  .gg-header__star { font-size: 22px; }
}
.gg-header__nav {
  display: flex;
  gap: 0;
  margin-left: var(--gg-space-3);
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.gg-header__nav::-webkit-scrollbar { display: none; }


/* .gg-pub-link — text-on-bar publication nav (W2 v2 D14).
   Gold underline marks current page (.is-current OR [aria-current="page"]).
   44×44 min touch target per Rule 11 + grandmother-test floor. */
.gg-pub-link {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  transition: color 140ms var(--gg-ease), border-color 140ms var(--gg-ease);
}
.gg-pub-link:hover { color: #fff; }
.gg-pub-link.is-current,
.gg-pub-link[aria-current="page"] {
  color: var(--gg-color-medal-gold);
  border-bottom-color: var(--gg-color-medal-gold);
}
/* Ask elevation — the only pill on the bar. */
.gg-pub-link--ask {
  align-self: center;
  background: var(--gg-color-medal-gold);
  color: var(--gg-color-plum-900);
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 6px;
  border-bottom: none;
  min-height: auto; /* pill sizes from padding, not min-height */
}
.gg-pub-link--ask:hover {
  background: #FFE85C;
  color: var(--gg-color-plum-900);
}

@media (max-width: 767px) {
  .gg-header { padding: 0 var(--gg-space-3); gap: var(--gg-space-2); min-height: 58px; }
  .gg-header__brand { font-size: 22px; letter-spacing: -0.4px; }
  .gg-header__star { font-size: 18px; margin: 0 2px; }
  .gg-pub-link { padding: 0 10px; font-size: 12.5px; }
  .gg-pub-link--ask { padding: 6px 12px; }
}


/* 5 ── Card ────────────────────────────────────────────────────────── */
.gg-card {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-5);
  box-shadow: var(--gg-shadow-sm);
  color: var(--gg-color-text-primary);
}
.gg-card__title {
  font-size: var(--gg-text-h3);
  font-weight: 600;
  margin-bottom: var(--gg-space-3);
}
.gg-card--elevated { box-shadow: var(--gg-shadow-md); }
.gg-card--gold-border { border-left: 3px solid var(--gg-color-medal-gold); }


/* 6 ── Stat callout ────────────────────────────────────────────────── */
.gg-stat {
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-1);
}
.gg-stat__value {
  font-size: var(--gg-text-stat);
  font-weight: 700;
  color: var(--gg-color-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gg-stat__value--medal { color: var(--gg-color-medal-gold); }
.gg-stat__label {
  font-size: var(--gg-text-small);
  font-weight: 400;
  color: var(--gg-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gg-stat--inline {
  flex-direction: row;
  align-items: baseline;
  gap: var(--gg-space-2);
}


/* 7 ── Medal chip ──────────────────────────────────────────────────── */
.gg-medal-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-pill);
  padding: var(--gg-space-1) var(--gg-space-3);
  min-height: 28px;
}
.gg-medal-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.gg-medal-chip__dot--gold { background: var(--gg-color-medal-gold); }
.gg-medal-chip__dot--silver { background: var(--gg-color-medal-silver); }
.gg-medal-chip__dot--bronze { background: var(--gg-color-medal-bronze); }
.gg-medal-chip__count {
  font-size: var(--gg-text-body);
  font-weight: 700;
  color: var(--gg-color-text-primary);
  font-variant-numeric: tabular-nums;
}
.gg-medal-chip__label {
  font-size: var(--gg-text-micro);
  font-weight: 600;
  color: var(--gg-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* 8 ── Tag / chip ──────────────────────────────────────────────────── */
.gg-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  color: var(--gg-color-text-primary);
  font-size: var(--gg-text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--gg-space-1) 10px;
  border-radius: var(--gg-radius-pill);
}
.gg-tag--muted { background: rgba(255, 255, 255, 0.06); color: var(--gg-color-text-muted); }

.gg-chip {
  /* 2026-05-21 L4.1 [athletes-filter-pill-redesign]: visual polish on the
     canonical chip. min-height bumped 32px → 44px so the touch target
     meets Rule 11 (44×44 floor) at 375px viewport — was failing on
     iPhone-sized screens. inline-flex + align-items: center keeps the
     chip label vertically centred at the new height without padding
     hacks. Font-size held at 12px to keep visual density on dense
     chip rows; padding-block bumped slightly to balance the taller
     box. Border tone (rgba .15) and hover tone (rgba .12 gold)
     unchanged — the Item 49 / v1.5 chip-canonical doctrine stands. */
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.88);
  padding: 10px 14px;
  border-radius: var(--gg-radius-pill);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--gg-duration-fast) var(--gg-ease),
              border-color var(--gg-duration-fast) var(--gg-ease),
              color var(--gg-duration-fast) var(--gg-ease),
              transform var(--gg-duration-fast) var(--gg-ease);
  min-height: 44px;
}
.gg-chip:hover {
  /* 2026-05-18 [chip-canonical-hover-bounce-still-present]: drop
     translateY(-1px). Item 49 R1 doctrine codified non-bounce as
     canonical (DESIGN_SYSTEM.md v1.5) but the CSS edit failed to
     ship; this is the analogous Item-50-shape drift, smaller. The
     §3191-3195 comment block on the comps-filters chip-hover
     already documents the rationale: across 18+ chips per page the
     per-chip translateY reads as visual noise; background tint is
     the canonical hover signal. Background+border+color carry the
     affordance; transform removed. */
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.5);
  color: var(--gg-color-medal-gold);
}
.gg-chip--active {
  background: rgba(255, 215, 0, 0.18);
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
}


/* 9 ── Button ──────────────────────────────────────────────────────── */
.gg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gg-space-2);
  font-family: inherit;
  font-size: var(--gg-text-small);
  font-weight: 600;
  line-height: 1;
  padding: 12px 14px;
  border-radius: var(--gg-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: background var(--gg-duration-fast) var(--gg-ease),
              border-color var(--gg-duration-fast) var(--gg-ease),
              color var(--gg-duration-fast) var(--gg-ease),
              transform var(--gg-duration-fast) var(--gg-ease),
              box-shadow var(--gg-duration-fast) var(--gg-ease);
  text-decoration: none;
}
.gg-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.gg-btn--primary {
  background: linear-gradient(135deg, var(--gg-color-plum-500) 0%, var(--gg-color-plum-900) 100%);
  color: var(--gg-color-white);
  box-shadow: var(--gg-shadow-sm);
}
.gg-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--gg-shadow-md);
}

.gg-btn--secondary {
  background: transparent;
  border-color: var(--gg-color-border);
  color: var(--gg-color-text-primary);
}
.gg-btn--secondary:hover:not(:disabled) {
  border-color: var(--gg-color-plum-500);
  color: var(--gg-color-white);
}

.gg-btn--ghost {
  background: transparent;
  color: var(--gg-color-text-muted);
}
.gg-btn--ghost:hover:not(:disabled) { color: var(--gg-color-text-primary); }


/* 5.7 ── Table (.gg-table) ─────────────────────────────────────────── */
.gg-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  background: var(--gg-color-surface-2);
}
.gg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--gg-color-text-primary);
}
.gg-table thead { background: var(--gg-color-surface-2); }
.gg-table th {
  text-align: left;
  padding: var(--gg-space-3) 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  border-bottom: 1px solid var(--gg-color-border);
  white-space: nowrap;
}
.gg-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(92, 68, 104, 0.35);
}
.gg-table tr:last-child td { border-bottom: none; }
.gg-table tr:hover td { background: rgba(232, 114, 138, 0.06); }
.gg-table__num { text-align: right; }
.gg-table__place--gold { color: var(--gg-color-medal-gold); font-weight: 700; }
.gg-table__place--silver { color: var(--gg-color-medal-silver); font-weight: 700; }
.gg-table__place--bronze { color: var(--gg-color-medal-bronze); font-weight: 700; }

/* B23 / D23 (Josh ruling 2026-05-12) — `.gg-table-cards` (the parallel
   mobile <ul> that paired with every `.gg-table-wrap`) is retired. The
   only caller was render_medals(); it now uses `.gg-medals-table` with
   a CSS-only responsive card-stack via `td::before { content: attr(data-label) }`
   (see § B23/D23 at the bottom of this file). The dual-emit + responsive
   visibility-toggle pattern also broke competition-detail tables silently
   (hidden on mobile, no card fallback) — collapsing to a single table
   per page fixes that drift too. `.gg-table-wrap` now stays visible at
   all widths (its own `overflow-x: auto` handles narrow viewports). */


/* 11 ── Form input ─────────────────────────────────────────────────── */
.gg-input {
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  color: var(--gg-color-text-primary);
  font-family: inherit;
  font-size: var(--gg-text-body);
  padding: 0 var(--gg-space-4);
  border-radius: var(--gg-radius-md);
  min-height: 44px;
  width: 100%;
  transition: border-color var(--gg-duration-fast) var(--gg-ease),
              box-shadow var(--gg-duration-fast) var(--gg-ease);
}
.gg-input::placeholder { color: var(--gg-color-text-muted); }
.gg-input:focus {
  outline: none;
  border-color: var(--gg-color-focus-ring);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}


/* 12 ── Utilities ──────────────────────────────────────────────────── */

/* .sr-only — lifted verbatim from ask.html:343–351.
   Hides content visually while keeping it available to screen readers.
   Used by #gg-live (aria-live region) and any SR-only label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focusable variant — invisible until focused (keyboard skip-to-content links).
   2026-04-23 bug-fix #2 (design-lock §5): previously only the :focus state
   was defined; the base class had no rules, so <a class="sr-only-focusable">
   rendered inline by default. Now the base state applies the same visually-
   hidden rules as `.sr-only`, and :focus/:focus-visible paint a visible
   focus link with a clear outline against plum-900. */
.sr-only-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: var(--gg-space-2) var(--gg-space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--gg-color-plum-900);
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  text-decoration: none;
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
  border-radius: var(--gg-radius-sm);
}

/* Live-region landmark — one per page.
   Pages write state-change announcements into this element; the
   aria-live='polite' contract ensures SR users hear exactly one
   announcement per real change. */
.gg-live {
  /* intentionally .sr-only; class pair is .sr-only .gg-live in HTML */
}


/* Global layout scaffolds */
.gg-page {
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--gg-space-6) var(--gg-space-6) var(--gg-space-8);
}

.gg-footer {
  padding: var(--gg-space-5) var(--gg-space-6);
  background: var(--gg-color-surface-2);
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-micro);
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-4);
  border-top: 1px solid var(--gg-color-border);
}
/* 2026-05-14 audit fix L12: sectioned footer with primary-section pivots.
   Stacks on mobile, 3-column on tablet+, with a separator stamp line. */
.gg-footer__sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-5);
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .gg-footer__sections { grid-template-columns: repeat(3, 1fr); }
}
.gg-footer__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gg-footer__col-h {
  color: var(--gg-color-text-strong, #F5F2F0);
  font-weight: 600;
  font-size: var(--gg-text-small);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.gg-footer__col a {
  color: var(--gg-color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  transition: color 120ms ease, border-color 120ms ease;
}
.gg-footer__col a:hover,
.gg-footer__col a:focus-visible {
  color: var(--gg-color-medal-gold, #FFD700);
  border-bottom-color: rgba(255, 215, 0, 0.45);
}
.gg-footer__stamp {
  border-top: 1px solid var(--gg-color-border);
  padding-top: var(--gg-space-3, 12px);
  text-align: center;
  font-size: var(--gg-text-micro);
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────────────
   v1.1 components — promoted from wireframes/_proposed_v11.css 2026-04-23.
   Authoring order preserved (no alphabetisation, no recategorisation).
   ───────────────────────────────────────────────────────────────────── */


/* 5.10 ── [retired 2026-05-21] body.gg-silhouette removed per L1 leg.
   Was: page-level stick-figure watermark. */


/* 5.11 ── .gg-hero ───────────────────────────────────────────────────
   Dark-glass plum hero block. Four variants:
     (default)        listing-page hero band
     --full-bleed     marquee pages (Home, OTD) — largest padding
     --compact        tight utility pages (Medals header)
     --profile        detail pages, with accent left-border rail
*/
.gg-hero {
  background: var(--gg-gradient-hero);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: 36px 24px 32px;
  margin-bottom: var(--gg-space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--gg-shadow-lg);
}
.gg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255, 215, 0, 0.10), transparent 55%);
  pointer-events: none;
}
.gg-hero > * { position: relative; }

.gg-hero--full-bleed { padding: 48px 24px 40px; }
.gg-hero--compact { padding: 28px 24px; }
.gg-hero--profile::after {
  content: "";
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 4px;
  background: linear-gradient(180deg, var(--gg-color-medal-gold), var(--gg-color-plum-500));
  border-radius: 0 4px 4px 0;
}

@media (min-width: 768px) {
  .gg-hero { padding: 44px 48px 38px; }
  .gg-hero--full-bleed { padding: 64px 48px 52px; }
  .gg-hero--compact { padding: 36px 48px; }
}

/* Hero title + subtitle — Inter-800 title (32px mobile, 44–56px desktop)
   + plum-500 subtitle. */
.gg-hero__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.08;
}
.gg-hero__title .star { color: var(--gg-color-medal-gold); }

.gg-hero__subtitle {
  /* v1.6: re-tokened from plum-500 (3.22:1 on plum-900, FAIL) to white-86
     (≥10:1 AAA on plum-900). Subtitle sits on hero plum-900 background. */
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 var(--gg-space-4);
  max-width: 60ch;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .gg-hero__title { font-size: 44px; }
  .gg-hero--full-bleed .gg-hero__title { font-size: 56px; }
  .gg-hero__subtitle { font-size: 17px; }
}


/* 5.12 ── .gg-eyebrow ────────────────────────────────────────────────
   Uppercase gold label preceding a hero title. Consistent across every
   hero. */
.gg-eyebrow {
  font-size: 11px;
  color: var(--gg-color-medal-gold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

/* L29 (2026-05-29) [item-41-followup-team-logos] A.2 — national-program
   flag chip. The flag sits inline at the head of the hero eyebrow
   ("National program · SRB"); when present, the eyebrow becomes a flex
   row so the 48×36 flag aligns with the uppercase label. NOCs with no
   1:1 ISO mapping (dissolved / neutral / Chinese Taipei) emit no <img>,
   so the eyebrow falls back to the plain typographic chip unchanged.
   Asset library: lipis/flag-icons (MIT) via jsDelivr — see provenance
   report _reports/2026-05-29_L29_team_logo_provenance.md. */
.gg-eyebrow:has(.gg-noc-flag) {
  display: flex;
  align-items: center;
  gap: var(--gg-space-2);
}
.gg-noc-flag {
  width: 48px;
  height: 36px;
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}
@media (max-width: 480px) {
  .gg-noc-flag { width: 36px; height: 27px; }
}


/* 5.13 ── .gg-defining-stat ──────────────────────────────────────────
   One big number + tight caption. Replaces the 4-tile stats row on
   profile/detail pages. Gold by default; --plum variant for non-medal
   counts (so the gold-rule stays load-bearing). */
.gg-defining-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--gg-space-5) 0 0;
}
.gg-defining-stat__value {
  font-size: 48px;
  font-weight: 800;
  color: var(--gg-color-medal-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.gg-defining-stat__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  letter-spacing: 0.2px;
  max-width: 48ch;
}
.gg-defining-stat__follow {
  font-size: 13px;
  color: var(--gg-color-text-muted);
  margin-top: 6px;
  max-width: 60ch;
  line-height: 1.45;
}
.gg-defining-stat--plum .gg-defining-stat__value { color: var(--gg-color-plum-500); }

@media (min-width: 768px) {
  .gg-defining-stat__value { font-size: 56px; }
}


/* 5.14 ── .gg-rail ───────────────────────────────────────────────────
   Horizontal-scroll curated row. Used on Home + Athletes Explorer
   editorial rails. Mobile: scrollable; desktop: can be scrollable or
   wrap depending on parent. */
.gg-rail {
  display: flex;
  gap: var(--gg-space-3);
  overflow-x: auto;
  padding: var(--gg-space-2) 0 var(--gg-space-4);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gg-color-border) transparent;
}
.gg-rail::-webkit-scrollbar { height: 6px; }
.gg-rail::-webkit-scrollbar-thumb { background: var(--gg-color-border); border-radius: 3px; }
.gg-rail::-webkit-scrollbar-track { background: transparent; }
.gg-rail > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 240px;
  max-width: 280px;
}

.gg-rail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gg-space-3);
  margin: var(--gg-space-6) 0 var(--gg-space-2);
}
.gg-rail__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--gg-color-text-primary);
  letter-spacing: -0.01em;
}
.gg-rail__sublabel {
  font-size: 12px;
  color: var(--gg-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gg-rail__more {
  font-size: 13px;
  color: var(--gg-color-medal-gold);
  text-decoration: none;
  white-space: nowrap;
}
.gg-rail__more:hover { text-decoration: underline; }

/* 2026-05-12: "See all →" link on keep-exploring rails. Pulls the
   reader from the curated 24-card scroll into the full filtered
   athletes-list page. Lives in the rail header, right-aligned via
   .gg-rail__header's space-between. */
.gg-rail__see-all {
  font-size: 13px;
  font-weight: 500;
  color: var(--gg-color-medal-gold);
  text-decoration: none;
  white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.18s ease;
}
.gg-rail__see-all:hover,
.gg-rail__see-all:focus-visible {
  background-size: 100% 1px;
  outline: none;
}


/* 5.15 ── .gg-named-card ─────────────────────────────────────────────
   Replaces the dropped .gg-initials-tile concept. Named-card
   typography — name does the visual work, not an initials disc.
   Flag-code + discipline pill below. */
.gg-named-card {
  background: linear-gradient(135deg, var(--gg-color-plum-700), var(--gg-color-plum-900));
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-4);
  color: var(--gg-color-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-2);
  text-decoration: none;
  min-height: 140px;
  box-shadow: var(--gg-shadow-sm);
  transition: transform 160ms var(--gg-ease), box-shadow 160ms var(--gg-ease), border-color 160ms var(--gg-ease);
  position: relative;
  overflow: hidden;
}
.gg-named-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255, 215, 0, 0.08), transparent 50%);
  pointer-events: none;
}
.gg-named-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gg-shadow-md);
  border-color: rgba(255, 215, 0, 0.3);
}
.gg-named-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.85);
  font-variant-numeric: tabular-nums;
}
.gg-named-card__name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
.gg-named-card__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.gg-named-card__pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}


/* 5.16 ── .gg-era-band ───────────────────────────────────────────────
   Vertical-timeline component for Competitions Archive era groupings.
   Label column + content column, with editorial caption slot. */
.gg-era-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
  padding: var(--gg-space-5) 0;
  border-top: 1px solid var(--gg-color-border);
}
.gg-era-band:first-of-type { border-top: none; }
.gg-era-band__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gg-color-medal-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.gg-era-band__caption {
  font-size: 14px;
  color: var(--gg-color-text-muted);
  max-width: 60ch;
  line-height: 1.55;
}
.gg-era-band__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
  margin-top: var(--gg-space-3);
}

@media (min-width: 768px) {
  .gg-era-band {
    grid-template-columns: 140px 1fr;
    gap: var(--gg-space-5);
  }
  .gg-era-band__body {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .gg-era-band__body { grid-template-columns: repeat(3, 1fr); }
}


/* 5.17 ── .gg-score-with-era ─────────────────────────────────────────
   Score cell that carries its scoring-era badge. Solves the ambiguity
   between 10.000 (Perfect 10 era, pre-2006) and 15.800 (open-ended,
   post-2006). */
.gg-score-with-era {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.gg-score-with-era__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gg-color-text-primary);
}
.gg-score-with-era__era {
  /* WD-2026-05-09 Josh feedback: was a pill (gold background + border
     + rounded), which read as a clickable affordance ("what did she
     score a perfect 10 in?"). De-pilled to a quiet meta-label — small
     uppercase muted text, no background, no border. The era is now
     unambiguously a passive marker, not a UI control. The label text
     in build_site.py was also clarified from "Perfect 10" (the score)
     to "Perfect-10 era" (the scoring era). */
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-color-medal-gold);
  opacity: 0.62;
  line-height: 1.4;
}
.gg-score-with-era__era--open {
  /* Open-ended era marker (post-2006 scoring scale). Same de-pilled
     treatment as the Perfect-10 era marker, plum-tinted. */
  color: var(--gg-color-plum-500);
  opacity: 0.62;
}


/* 5.18 ── .gg-breadcrumb ─────────────────────────────────────────────
   Uppercase, muted, small. Above detail-page headings. */
.gg-breadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--gg-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--gg-space-3);
  flex-wrap: wrap;
}
.gg-breadcrumb a { color: var(--gg-color-text-muted); text-decoration: none; }
.gg-breadcrumb a:hover { color: var(--gg-color-medal-gold); text-decoration: underline; }
.gg-breadcrumb__sep { opacity: 0.5; }
.gg-breadcrumb__current { color: var(--gg-color-text-primary); }


/* 5.19 ── .gg-pagination ─────────────────────────────────────────────
   Prev/next + info text. URL-driven; each anchor carries the target
   page. */
.gg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gg-space-2);
  margin-top: var(--gg-space-7);
  flex-wrap: wrap;
}
.gg-pagination__info {
  color: var(--gg-color-text-muted);
  font-size: 13px;
  margin: 0 var(--gg-space-3);
  font-variant-numeric: tabular-nums;
}


/* 5.20 ── .gg-empty-state ────────────────────────────────────────────
   Dashed-border card for no-results / no-facet-coverage / db-error. */
.gg-empty-state {
  text-align: center;
  padding: var(--gg-space-7) var(--gg-space-5);
  color: var(--gg-color-text-muted);
  border: 1px dashed var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  background: rgba(30, 27, 46, 0.4);
}
.gg-empty-state__icon {
  font-size: 36px;
  margin-bottom: var(--gg-space-3);
  /* v1.6: re-tokened to link accent (5.58:1 on plum-900, 9.40:1 on
     surface-1; AA-body / AAA respectively). Icon sits on surface-1. */
  color: var(--gg-color-link);
  line-height: 1;
}
.gg-empty-state__title {
  color: var(--gg-color-text-primary);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--gg-space-2);
}
.gg-empty-state__body { font-size: 14px; max-width: 40ch; margin: 0 auto var(--gg-space-4); }


/* 5.21 ── .gg-subnav ─────────────────────────────────────────────────
   Sticky within-page navigator for long scroll pages (Athlete Profile).
   Replaces the 4-tab panel. Highlights current section on scroll. */
.gg-subnav {
  position: sticky;
  top: 0;
  background: rgba(30, 27, 46, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gg-color-border);
  padding: var(--gg-space-3) var(--gg-space-4);
  margin: 0 calc(-1 * var(--gg-space-4)) var(--gg-space-5);
  z-index: 5;
  display: flex;
  gap: var(--gg-space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.gg-subnav::-webkit-scrollbar { display: none; }
.gg-subnav a {
  color: var(--gg-color-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: var(--gg-space-1) 0;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gg-subnav a:hover { color: var(--gg-color-text-primary); }
.gg-subnav a.is-current {
  color: var(--gg-color-medal-gold);
  border-bottom-color: var(--gg-color-medal-gold);
}

/* L37.5 [teams-landing-tab-scope-unification] 2026-06-03: the /teams/
   scope ribbon renders <button> tabs (role="tablist") rather than <a>
   anchors so switching scope filters in place instead of anchor-jumping
   down a long scroll. The base .gg-subnav rules above target `a`; mirror
   the visual (muted → gold-underline active) for the tab buttons. The
   .gg-subnav .gg-subnav__count base rule is element-agnostic so it
   already covers the count spans. Non-sticky per the locked design pick —
   these tabs are a scope control, not a scroll-spy. */
.gg-subnav--teams-tabs {
  position: static;
  top: auto;
}
.gg-subnav--teams-tabs button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
  color: var(--gg-color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: var(--gg-space-1) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.gg-subnav--teams-tabs button:hover { color: var(--gg-color-text-primary); }
.gg-subnav--teams-tabs button.is-current {
  color: var(--gg-color-medal-gold);
  border-bottom-color: var(--gg-color-medal-gold);
}
.gg-subnav--teams-tabs button.is-current .gg-subnav__count {
  color: rgba(255, 215, 0, 0.7);
}


/* 5.22 ── .gg-entry-card ─────────────────────────────────────────────
   The "Start with a name / moment / era" entry-point tiles on Home.
   Tall, plum-gradient, big gold verb + short invitation line. */
.gg-entry-card {
  background: linear-gradient(155deg, var(--gg-color-plum-700) 0%, var(--gg-color-surface-1) 100%);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-5);
  text-decoration: none;
  color: var(--gg-color-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-2);
  min-height: 180px;
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--gg-ease), box-shadow 180ms var(--gg-ease);
}
.gg-entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 110%, rgba(255, 215, 0, 0.14), transparent 60%);
  pointer-events: none;
}
.gg-entry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gg-shadow-md);
}
.gg-entry-card__kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gg-color-medal-gold);
}
.gg-entry-card__verb {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.gg-entry-card__body {
  font-size: 14px;
  color: var(--gg-color-text-muted);
  margin-top: auto;
  line-height: 1.45;
}


/* 5.23 ── .gg-otd-hero ───────────────────────────────────────────────
   Marquee OTD card used on Home and OTD pages — matches the 1200×630
   OG template shape so social and site feel continuous. */
.gg-otd-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-5);
  align-items: center;
}
.gg-otd-hero__date {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gg-color-medal-gold);
}
.gg-otd-hero__headline {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: var(--gg-space-2) 0 var(--gg-space-3);
}
.gg-otd-hero__context {
  /* v1.6: re-tokened from plum-500 → white-86 (AAA on the OTD-hero
     plum-900 panel). Same rationale as .gg-hero__subtitle. */
  font-size: 15px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
  max-width: 58ch;
  font-weight: 500;
}
.gg-otd-hero__quote {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  border-left: 3px solid var(--gg-color-medal-gold);
  padding-left: var(--gg-space-3);
  margin-top: var(--gg-space-4);
  font-style: italic;
  max-width: 52ch;
}
.gg-otd-hero__og {
  display: none;
}

@media (min-width: 1200px) {
  .gg-otd-hero { grid-template-columns: 1fr auto; }
  .gg-otd-hero__headline { font-size: 42px; }
  .gg-otd-hero__og {
    display: block;
    width: 280px; height: 147px;
    background:
      radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.15), transparent 55%),
      linear-gradient(135deg, var(--gg-color-plum-900), var(--gg-color-surface-1));
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: var(--gg-radius-md);
    position: relative;
    flex-shrink: 0;
  }
  .gg-otd-hero__og::after {
    content: "1200×630 OG TEMPLATE";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* v1.6 D12: hide the OG-image debug placeholder until a real OG render
   ships. The desktop @media (min-width: 1200px) block above is preserved
   intentionally so the OG-rendering pipeline can override display:none
   once a real image lands (just remove this override or scope it to
   ":not([data-og-loaded])"). Currently the placeholder's "1200×630 OG
   TEMPLATE" text leaks onto desktop OTD pages; this override suppresses
   it everywhere until the asset is real. */
.gg-otd-hero__og,
.gg-otd-hero__og::after {
  display: none !important;
}


/* 5.23a ── L9 Phase A OTD sectional layout (added 2026-05-23) ────────
   Per `_drafts/2026-05-22_otd_dual_banner_design_brief.md` v2 (approved
   2026-05-23 with Design Decision §A = featured+compact ≤6,
   equal-weight stacked ≥7). Replaces the single-marquee `.gg-otd-hero`
   pattern. Old `.gg-otd-hero` rules above are kept for graceful fall-
   back during transition; no current render references them. */

.gg-otd-date-chrome {
  margin: 0 0 var(--gg-space-6);
  text-align: left;
}
.gg-otd-date-chrome__eyebrow {
  margin: 0 0 var(--gg-space-2);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gg-color-text-muted);
}
.gg-otd-date-chrome__h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--gg-color-text-primary);
}
@media (min-width: 768px) {
  .gg-otd-date-chrome__h1 { font-size: 44px; }
}
/* L19 [otd-landing-richer-fallback] (2026-05-26): landing-only lede line
   below the H1 surfacing the day's lead item ("Today: Simone Biles turns
   29." or "Today: 2025 European Artistic Championships — opens."). Sits
   between H1 and the body sections; per-day pages don't render it. */
.gg-otd-date-chrome__lede {
  margin: var(--gg-space-2) 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--gg-color-text-primary);
  max-width: 60ch;
}
@media (min-width: 768px) {
  .gg-otd-date-chrome__lede { font-size: 18px; }
}

.gg-otd-section {
  margin: 0 0 var(--gg-space-8);
}
.gg-otd-section__head {
  margin: 0 0 var(--gg-space-4);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gg-color-medal-gold);
  font-weight: 600;
}
.gg-otd-section__cards {
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-3);
}
.gg-otd-section--empty .gg-otd-section__empty {
  margin: 0;
  padding: var(--gg-space-5);
  color: var(--gg-color-text-muted);
  font-size: 15px;
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
}

/* L9 Phase C.2 — cross-year refs section. Lighter visual treatment than
   Events + Born sections (these are context entries, not the headline
   content). Olympic events whose event_date matches today's MM-DD across
   years; section omits entirely when zero matches. */
.gg-otd-section--xrefs {
  margin-top: var(--gg-space-6);
  padding: var(--gg-space-5);
  background: rgba(30, 27, 46, 0.4);
  border-radius: var(--gg-radius-md);
}
.gg-otd-xrefs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gg-otd-xrefs li {
  padding: var(--gg-space-2) 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gg-color-text-primary);
  border-bottom: 1px solid var(--gg-color-border);
}
.gg-otd-xrefs li:last-child { border-bottom: none; }
.gg-otd-xrefs__year {
  font-weight: 700;
  color: var(--gg-color-medal-gold);
  margin-right: var(--gg-space-2);
}

.gg-otd-card {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-4) var(--gg-space-5);
}
.gg-otd-card__head {
  margin: 0 0 var(--gg-space-2);
  line-height: 1.25;
  color: var(--gg-color-text-primary);
  font-weight: 600;
}
.gg-otd-card__head-link {
  color: inherit;
  text-decoration: none;
}
.gg-otd-card__head-link:hover {
  color: var(--gg-color-medal-gold);
}
.gg-otd-card__body {
  margin: 0 0 var(--gg-space-3);
  line-height: 1.55;
  color: var(--gg-color-text-muted);
  font-size: 15px;
}
.gg-otd-card__cta-inline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gg-color-medal-gold);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gg-otd-card__cta-inline:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Featured card — first card in a featured+compact section (N ≤ 6).
   Larger headline; full primary-button CTA; slightly more padding. */
.gg-otd-card--featured {
  padding: var(--gg-space-5) var(--gg-space-6);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gg-color-surface-1) 92%, var(--gg-color-medal-gold)) 0%,
    var(--gg-color-surface-1) 80%
  );
  border-color: color-mix(in srgb, var(--gg-color-border) 50%, var(--gg-color-medal-gold));
}
.gg-otd-card--featured .gg-otd-card__head {
  font-size: 22px;
}
@media (min-width: 768px) {
  .gg-otd-card--featured .gg-otd-card__head { font-size: 26px; }
}
.gg-otd-card--featured .gg-otd-card__body {
  font-size: 16px;
}

/* Compact card — items 2-N in a featured+compact section, or ALL cards
   in an equal-weight section (N ≥ 7). */
.gg-otd-card--compact .gg-otd-card__head {
  font-size: 17px;
}

/* Birthday card visual differentiation — slightly muted left border so
   the eye separates the Born/Events sections without needing different
   page chrome between them. */
.gg-otd-card--birthday {
  border-left: 3px solid color-mix(in srgb, var(--gg-color-border) 60%, var(--gg-color-medal-gold));
}


/* 5.24 ── .gg-prose ──────────────────────────────────────────────────
   Typographic prose block for About and editorial-dense sections. */
.gg-prose { max-width: 64ch; color: var(--gg-color-text-muted); }
.gg-prose p { margin: 0 0 var(--gg-space-4); line-height: 1.65; font-size: 16px; }
.gg-prose p strong { color: var(--gg-color-text-primary); font-weight: 600; }
.gg-prose h2 {
  font-size: 20px;
  color: var(--gg-color-text-primary);
  margin: var(--gg-space-6) 0 var(--gg-space-3);
}
.gg-prose h3 {
  font-size: 15px;
  color: var(--gg-color-medal-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--gg-space-5) 0 var(--gg-space-2);
}
.gg-prose a { color: var(--gg-color-medal-gold); text-decoration: underline; text-underline-offset: 3px; }
.gg-prose a:hover { color: #fff; }


/* 5.25 ── .gg-disclosure ─────────────────────────────────────────────
   Native <details>/<summary> treatment for "Browse A–Z" on Athletes
   Explorer and "Filters" utility drawers. Keeps progressive-narrowing
   alive but demoted to secondary affordance. */
.gg-disclosure {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  padding: 0;
  margin-top: var(--gg-space-6);
}
.gg-disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--gg-space-4) var(--gg-space-5);
  display: flex;
  align-items: center;
  gap: var(--gg-space-3);
  color: var(--gg-color-text-primary);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--gg-radius-md);
}
.gg-disclosure > summary::-webkit-details-marker { display: none; }
.gg-disclosure > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--gg-color-medal-gold);
  font-size: 12px;
  transition: transform 160ms var(--gg-ease);
}
.gg-disclosure[open] > summary::after { transform: rotate(180deg); }
.gg-disclosure > summary:hover { background: rgba(255, 255, 255, 0.03); }
.gg-disclosure__body {
  padding: var(--gg-space-2) var(--gg-space-5) var(--gg-space-5);
  border-top: 1px solid var(--gg-color-border);
}

/* L25 (2026-05-29) [athletes-discipline-chip-multi-select] (b): the
   athletes A–Z browse disclosure (#browse-all) is the only facet state
   that wraps the chip rows + grid in a .gg-disclosure surface — the
   canonical /athletes/ page renders it, but every filter-variant page
   (/athletes/d/wag/ …) renders the grid bare on the page background.
   That made the grid surface flip between the All state (raised
   surface-1 panel) and any narrowed state (page background) — the filed
   (b) bug. Fix (brief § 2(b), option B): drop the surface treatment on
   #browse-all only, so the All grid sits on the uniform page background
   like the variant pages and every other index surface (/competitions/,
   /medals/, /teams/). Scoped to #browse-all so the shared .gg-disclosure
   component (Filters drawers, etc.) is untouched. */
.gg-disclosure#browse-all {
  background: transparent;
  border: 0;
}
.gg-disclosure#browse-all > .gg-disclosure__body {
  border-top: 0;
  padding-left: 0;
  padding-right: 0;
}


/* 5.26 ── .gg-provenance ─────────────────────────────────────────────
   Footer-of-page source citation block. Muted, mono, T1-verifiable. */
.gg-provenance {
  margin-top: var(--gg-space-7);
  padding: var(--gg-space-4) var(--gg-space-5);
  background: rgba(30, 27, 46, 0.6);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  font-family: var(--gg-font-mono);
  font-size: 12px;
  color: var(--gg-color-text-muted);
  line-height: 1.6;
}
.gg-provenance__label {
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  margin-bottom: var(--gg-space-2);
  display: block;
}
/* v1.6: re-tokened to link accent for AA-body contrast on surface-1. */
.gg-provenance a { color: var(--gg-color-link); }
/* L10 (2026-05-23) [sources-block-per-event-labels]: keep link + coverage
   hint as a no-wrap unit so a mid-source line break doesn't separate
   "olympedia.org" from "(FX, VT, AA)". Multiple items still wrap as a group
   on the &middot; separator. */
.gg-provenance__item {
  display: inline-block;
  white-space: nowrap;
}
.gg-provenance__coverage {
  color: var(--gg-color-text-muted);
  font-size: 11px;
  opacity: 0.85;
  margin-left: 2px;
}


/* 5.27 ── .gg-chip--removable ────────────────────────────────────────
   Active-filter chip variant (tiny delta on shipped .gg-chip). Adds ✕
   affordance. Used in the facet disclosure drawer. */
.gg-chip--removable { padding-right: 8px; }
.gg-chip--removable::after {
  content: "✕";
  margin-left: 8px;
  font-size: 10px;
  opacity: 0.6;
}
.gg-chip--removable:hover::after { opacity: 1; }


/* 5.28 ── .gg-skeleton ───────────────────────────────────────────────
   Image lazy-load placeholder. Reduced-motion override inherits from
   the global @media (prefers-reduced-motion) block at the bottom. */
.gg-skeleton {
  background: linear-gradient(
    90deg,
    var(--gg-color-surface-1),
    var(--gg-color-surface-2),
    var(--gg-color-surface-1)
  );
  background-size: 200% 100%;
  animation: gg-skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--gg-radius-md);
  min-height: 120px;
}
@keyframes gg-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* 5.29 ── .gg-header__signin (+ .gg-header__avatar) ──────────────────
   Right-anchored pill in .gg-header that flips between signed-out and
   signed-in renderings based on GET /auth/me. Added by prompt #8 (OAuth
   stack) on 2026-04-22; promoted verbatim from _proposed_v11.css here.

   DOM shape (see ask.html + wireframes/01_home_v3_proposed.html):
     <div class="gg-header__signin gg-header__signin--out" id="ggSignin"
          role="button" tabindex="0" aria-haspopup="true" aria-expanded="false">
       <span class="gg-header__signin__label">Sign in</span>
       <span class="gg-header__signin__caret">▾</span>
       <div class="gg-header__signin__panel" role="menu">…</div>
     </div>
   Signed-in state replaces __label contents with a <.gg-header__avatar>
   + <.gg-header__signin__name>. */
.gg-header__signin {
  /* 2026-05-18 [item-50-full-css-leg-rebuild] H3 visual: per the
     Round-4 brief + admission delta § 3 — drop the soft-grey pill
     background + border so the wrapper reads as transparent inline-
     flex matching the `.gg-pub-link` family. The avatar + name +
     caret now sit inline with the rest of the nav rather than
     calling out as a separate UI surface. */
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-1);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.gg-header__signin[hidden] { display: none; }
.gg-header__signin:hover {
  /* 2026-05-18 [item-50-full-css-leg-rebuild] H3 visual: hover
     paints a gold underline via the inner button's ::after pseudo
     (see .gg-header__signin__btn::after below). The wrapper itself
     now just shifts color; the background tint that mimicked a pill
     is gone. Aligns the surface with `.gg-pub-link:hover`. */
  color: var(--gg-color-medal-gold);
}
/* v1.6 D5/D6: split focus-visible out of the combined :hover, :focus-visible
   rule. The previous outline:none stripped the keyboard focus indicator;
   this rule paints a 3px gold outline + 2px offset (gold ≥7:1 on plum-900
   header background → AAA). 2026-05-18 [item-50-full-css-leg-rebuild]:
   background + border-color restoration removed so focus state stays
   visually consistent with the transparent-inline-flex hover state per
   the Round-4 H3 brief (the gold outline + color shift are sufficient
   focus signal without re-introducing the pill chrome). */
.gg-header__signin:focus-visible {
  color: var(--gg-color-medal-gold);
  outline: 3px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
}
.gg-header__signin__caret { font-size: 9px; opacity: 0.7; }
.gg-header__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gg-color-medal-gold), var(--gg-color-plum-500));
  color: var(--gg-color-plum-900);
  font-size: 11px;
  font-weight: 800;
}
.gg-header__signin__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gg-header__signin__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--gg-color-surface-1);
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-1);
  box-shadow: var(--gg-shadow-lg);
  z-index: 100;
  display: none;
}
/* Item-50 hotfix (2026-05-15 night): aria-expanded was moved onto the
   inner <button> in the v2 JS refactor, so the wrapper-attribute
   selector below stopped matching. Dual selector reads the JS-set
   `.is-open` class (legacy + :has()-less browsers — Firefox <121,
   Safari <15.4) AND the modern :has() form that tracks the button's
   aria-expanded directly. Reconstructed from `_reports/2026-05-15_round4_admission_delta.md` § 3 after the original Item 50 CSS edit
   failed to land in the commit (see LESSONS_LEARNED.md 2026-05-15). */
.gg-header__signin.is-open .gg-header__signin__panel,
.gg-header__signin:has(.gg-header__signin__btn[aria-expanded="true"]) .gg-header__signin__panel {
  display: block;
}
.gg-header__signin__panel form { margin: 0; }
.gg-header__signin__panel button,
.gg-header__signin__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--gg-color-text-primary);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--gg-radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: inherit;
}
.gg-header__signin__panel button:hover,
.gg-header__signin__panel a:hover {
  background: rgba(255, 215, 0, 0.10);
  color: var(--gg-color-medal-gold);
}
.gg-header__signin__panel hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 6px 4px;
}
.gg-header__signin__email {
  padding: 8px 12px 4px;
  font-size: 11px;
  color: var(--gg-color-text-muted);
  word-break: break-all;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .gg-header__signin { padding: 5px 10px; font-size: 12.5px; }
  .gg-header__signin__name { max-width: 80px; }
}


/* 6 ── Mobile-first media queries ──────────────────────────────────── */

/* Baseline above is mobile-first (≥ 375 px).
   Tablet — adjusts page gutter and typography for wider screens. */
@media (min-width: 768px) {
  .gg-page { padding: var(--gg-space-7) var(--gg-space-7) var(--gg-space-8); }
  h1 { font-size: 32px; }
}

/* Desktop — additional breathing room; no token overrides. */
@media (min-width: 1200px) {
  .gg-page { padding: var(--gg-space-7) 0 var(--gg-space-8); }
}

/* Narrow-mobile safety net — keeps 375 px layouts from breaking. */
@media (max-width: 420px) {
  .gg-header { padding: 0 var(--gg-space-3); }
  .gg-header__nav { gap: 0; }
  .gg-pub-link { padding: 0 8px; font-size: 12px; }
  .gg-card { padding: var(--gg-space-4); }
  .gg-table { font-size: 12px; }
  .gg-table th, .gg-table td { padding: 8px 10px; }
}


/* 7 ── Reduced-motion override ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* v1.6 D24: explicit override on the skeleton shimmer. The wildcard
     above already squashes animation-duration, but skeleton-shimmer
     loops and reads as "stuck" rather than "off" with the wildcard alone
     on some engines. Drop the animation entirely and fall back to a
     flat surface-2 fill so the placeholder still reads as content-loading
     state rather than glitching. */
  .gg-skeleton {
    animation: none !important;
    background: var(--gg-color-surface-2) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   .gg-quiz-* — quiz answer-option modifiers (Prompt #18 Web Developer leg).
   These extend .gg-btn for the post-answer reveal state on /quiz/play/.
   Lifted from wireframes/12_quiz_play.html; rgba success/danger backgrounds
   + full-opacity borders preserve the visual contract from the Designer leg.
   Anti-cheat: the modifier classes are added by the controller AFTER a
   successful /quiz/answer POST — never before.
   ───────────────────────────────────────────────────────────────────────── */
.gg-quiz-option {
  /* Post-answer locked state — lock visual without removing focus rings. */
}
.gg-quiz-option:disabled { opacity: 1; cursor: default; }
.gg-quiz-option--correct {
  background: rgba(93, 220, 158, 0.14);
  border-color: var(--gg-color-success);
  color: var(--gg-color-text-primary);
}
.gg-quiz-option--picked-wrong {
  background: rgba(240, 128, 128, 0.14);
  border-color: var(--gg-color-danger);
  color: var(--gg-color-text-primary);
}
.gg-quiz-option__indicator {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: var(--gg-space-2);
  border-radius: 999px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
}
.gg-quiz-option__indicator--ok {
  background: var(--gg-color-success);
  color: var(--gg-color-text-dark);
}
.gg-quiz-option__indicator--no {
  background: var(--gg-color-danger);
  color: var(--gg-color-text-dark);
}


/* ─────────────────────────────────────────────────────────────────────
   v1.2/v1.3 — Workstream 2 chrome additions retained.
   - F/M tag tokens + classes (v1.2; W1 chrome synthesis Element C).
   - Hamburger sheet (v1.2; D13 retained per Josh ruling 2026-05-04).
   DROPPED in v1.3 per Josh rulings 2026-05-04:
   - .gg-watermark + --dense (D16)
   - .gg-footer--three-col + .gg-footer__columns/__column/__column-header/
     __bottom/__tagline/__legal (D15 — wireframes use simple 1-row footer)
   - .gg-nav-chip + --current + --accent (D14 — wireframes use .gg-pub-link
     text-on-bar; deleted per Option B grep audit confirming all callers
     migrated this leg).
   ───────────────────────────────────────────────────────────────────── */

/* F/M tag chip variants — extend `.gg-tag`. Pair with `--gg-color-text-dark`. */
.gg-tag--female { background: var(--gg-color-tag-female); color: var(--gg-color-text-dark); }
.gg-tag--male   { background: var(--gg-color-tag-male);   color: var(--gg-color-text-dark); }

/* Hamburger sheet (Element A mobile + tablet reflow at <=899px; D15 raised from
   599px → 899px per Josh ruling 2026-05-12 — iPad-portrait + small laptop
   windows previously got a clipping nav between 600 and 899px).
   Pure CSS via <details>; no JS dependency. Desktop nav hides; sheet shows full
   nav slate + Sign in + secondary links (Teams, Glossary, Privacy, Terms). */
.gg-header__hamburger { display: none; }
@media (max-width: 899px) {
  .gg-header__nav { display: none; }
  .gg-header__signin { display: none; }
  .gg-header__hamburger { display: block; margin-left: auto; position: relative; }
  .gg-header__hamburger summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--gg-color-text-primary); font-size: 1.5rem; }
  .gg-header__hamburger summary::-webkit-details-marker { display: none; }
  .gg-header__hamburger[open] .gg-header__hamburger-sheet { display: flex; flex-direction: column; }
  .gg-header__hamburger-sheet { display: none; position: absolute; top: 100%; right: 0; min-width: 240px; background: var(--gg-color-surface-1); border: 1px solid var(--gg-color-border); padding: var(--gg-space-4); gap: var(--gg-space-2); box-shadow: var(--gg-shadow-md); z-index: 100; border-radius: var(--gg-radius-md); }
  .gg-header__hamburger-sheet a { color: var(--gg-color-text-primary); text-decoration: none; padding: var(--gg-space-3); min-height: 44px; display: flex; align-items: center; border-radius: var(--gg-radius-md); }
  .gg-header__hamburger-sheet a:hover { background: rgba(255,255,255,0.06); }
}


/* ─────────────────────────────────────────────────────────────────────
   v1.3 — Page-local CSS promoted from wireframes (per W2 v2 spec § 7).
   Each section corresponds to a wireframe + render_* function it serves.
   Ordering: home → athletes-list → competitions → competition-detail →
   athlete-profile → medals → otd → legal pages → stub pages.
   ───────────────────────────────────────────────────────────────────── */


/* 5.30 ── Home (.home-marketing-hero + .home-stat-tiles + .home-featured-rail
   + .home-entry-grid + .home-ask-strip Voice 3). Source:
   wireframes/01_home_v3_proposed.html lines 280-522. The home hero search
   bar moved to canonical .gg-search in §5.30b per L17 (2026-05-26). ── */

.home-marketing-hero { padding: 56px 28px 44px; }
@media (min-width: 768px) { .home-marketing-hero { padding: 76px 56px 60px; } }

.home-marketing-hero__headline {
  font-size: 34px;
  line-height: 1.06;
  max-width: 22ch;
}
@media (min-width: 768px) { .home-marketing-hero__headline { font-size: 52px; } }
@media (min-width: 1200px) { .home-marketing-hero__headline { font-size: 60px; } }

.home-marketing-hero__subline {
  max-width: 56ch;
  margin-top: 14px;
  margin-bottom: var(--gg-space-6);
}

.home-stat-tiles {
  display: grid;
  /* minmax(0, 1fr) lets columns shrink below intrinsic min-content; without
     this the third tile's "50,582" value forces grid wider than .gg-hero,
     which then clips it via overflow:hidden on the hero (mobile only). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gg-space-3);
  margin: var(--gg-space-5) 0 var(--gg-space-6);
  max-width: 620px;
}
@media (min-width: 768px) {
  .home-stat-tiles { gap: var(--gg-space-4); max-width: 680px; }
}
.home-stat-tile {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: var(--gg-radius-md);
  padding: 14px 16px;
  /* Pair with grid-template-columns minmax(0, 1fr): allow the tile box to
     shrink below its content's min-content width. */
  min-width: 0;
}
@media (max-width: 480px) {
  /* Tighten hero+tile padding on narrow viewports so the third stat tile
     ("50,582") fits. Previously the column content area was ~45px, which
     forced "50,582" at 26px/800 to overflow the hero clip-edge. */
  .home-marketing-hero { padding-left: 16px; padding-right: 16px; }
  .home-stat-tiles { gap: var(--gg-space-2); }
  .home-stat-tile { padding: 12px 8px; }
}
.home-stat-tile__value {
  display: block;
  /* Scale value with viewport so "50,582" at 800-weight always fits the
     tile content area on small screens. Floor 20px keeps it readable; the
     ≥768px override below sets the desktop size. */
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 800;
  color: var(--gg-color-medal-gold);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .home-stat-tile__value { font-size: 32px; } }
.home-stat-tile__label {
  display: block;
  margin-top: 8px;
  /* L36 (2026-06-03): the prior clamp(11px,3vw,12px) + 0.06em was tuned for
     "RESULTS" (7 chars); "COMPETITIONS" (12 chars) overflowed the tile at the
     clamp floor on ~360px Android viewports. Floor dropped to 9px + mobile
     tracking to 0.01em so the trailing "S" clears the tile's inner edge (the
     first 10px/0.02em pass fit but kissed the border). Desktop size + spacing
     restored at >=768px below. */
  font-size: clamp(9px, 2.6vw, 12px);
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 600;
}
@media (min-width: 768px) {
  .home-stat-tile__label { font-size: 12px; letter-spacing: 0.08em; }
}

/* 5.30b ── Canonical search-bar family (.gg-search). Consolidates the
   three previously-drifted families (home hero search, athletes index
   search, competitions type-page filter search) into a single rule
   set. Modifier .gg-search--filter carries the in-place-filter
   variant's __clear reset button. See DESIGN_SYSTEM.md v1.5
   "search-bar pattern split" doctrine — search-and-go (home + athletes)
   vs in-place filter (competitions type-pages) — for the conceptual
   basis. L17 admission delta:
   _reports/2026-05-26_L17_search_bar_css_consolidation_admission_delta.md.
   Per-call-site margin lives inline on the emission HTML (the canonical
   rule drops margin so the component is layout-agnostic). ── */
.gg-search {
  display: flex;
  gap: 0;
  max-width: 720px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.gg-search:focus-within {
  border-color: var(--gg-color-medal-gold);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22);
}
.gg-search__input {
  flex: 1;
  background: transparent;
  border: 0;
  /* v1.4 D6 — outline:0 replaced with 2px transparent so Windows
     high-contrast-mode users get a system-Highlight repaint. The
     wrapper :focus-within ring (gold + 3px shadow, defined above)
     remains the visible cue for sighted users. L17 propagates this
     to all three call sites via the canonical rule (was home-only
     pre-L17). */
  outline: 2px solid transparent;
  outline-offset: 0;
  padding: 14px 22px;
  font-size: 15px;
  color: #fff;
  font-family: var(--gg-font-sans);
  min-width: 0;
  min-height: 44px;
}
.gg-search__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.gg-search__btn {
  background: var(--gg-color-medal-gold);
  color: var(--gg-color-plum-900);
  border: 0;
  padding: 0 22px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: var(--gg-font-sans);
  min-height: 44px;
  /* L17 propagates flex-shrink:0 from athletes + comps to the home
     submit button — defensive against weird parent-flex contexts. */
  flex-shrink: 0;
}
.gg-search__btn:hover {
  background: #FFE85C;
}
.gg-search__btn:focus-visible {
  /* L17 propagates the focus-ring to the home submit button. */
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
}

/* In-place-filter modifier — carries the __clear reset affordance.
   Search-and-go bars (home + athletes) do not render a Clear button
   per the v1.5 search-bar pattern split doctrine. */
.gg-search--filter .gg-search__clear {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 0;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: var(--gg-font-sans);
  min-height: 44px;
  flex-shrink: 0;
}
.gg-search--filter .gg-search__clear:hover {
  color: var(--gg-color-medal-gold);
}
.gg-search--filter .gg-search__clear:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: -2px;
}

.home-featured-rail {
  margin-top: var(--gg-space-4);
  max-width: 100%;
}
.home-featured-rail__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 215, 0, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.home-featured-rail__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.home-featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  transition: background 160ms var(--gg-ease), border-color 160ms var(--gg-ease);
}
.home-featured-pill:hover {
  background: rgba(255, 215, 0, 0.16);
  border-color: rgba(255, 215, 0, 0.55);
}

.home-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-4);
  margin: var(--gg-space-7) 0 var(--gg-space-6);
}
@media (min-width: 768px) { .home-entry-grid { grid-template-columns: repeat(3, 1fr); } }

.gg-entry-card__date {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gg-color-medal-gold);
  margin-bottom: 6px;
}

.home-ask-strip {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-5);
  margin-top: var(--gg-space-6);
  display: grid;
  gap: var(--gg-space-3);
  position: relative;
  overflow: hidden;
}
.home-ask-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.08), transparent 45%);
  pointer-events: none;
}
.home-ask-strip > * { position: relative; }
@media (min-width: 768px) {
  .home-ask-strip {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--gg-space-5) var(--gg-space-6);
  }
}
.home-ask-strip__pitch {
  font-size: 17px;
  font-weight: 700;
  color: var(--gg-color-text-primary);
  line-height: 1.35;
}
.home-ask-strip__pitch em {
  font-style: italic;
  color: var(--gg-color-medal-gold);
  font-weight: 700;
}
.home-ask-strip__pitch .gg-ask-verb {
  color: var(--gg-color-medal-gold);
  font-weight: 800;
}
.home-ask-strip__sub {
  font-size: 14px;
  color: var(--gg-color-text-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.home-ask-strip__sub .name {
  color: var(--gg-color-medal-gold);
  font-weight: 600;
  opacity: 0.92;
}
.home-ask-strip__cta.gg-btn--primary {
  background: var(--gg-color-medal-gold);
  color: var(--gg-color-plum-900);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.22);
}
.home-ask-strip__cta.gg-btn--primary:hover {
  background: #FFE85C;
  color: var(--gg-color-plum-900);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.32);
}
.home-ask-strip__cta { justify-self: start; }
@media (min-width: 768px) { .home-ask-strip__cta { justify-self: end; } }


/* 5.31 ── Athletes list + Eras rail (.gg-era-card + .az-grid + .az-facet-row).
   Source: wireframes/02_athletes.html lines 147-193. ── */

.gg-era-card {
  background: linear-gradient(145deg, var(--gg-color-plum-900), var(--gg-color-surface-1) 80%);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-4);
  color: var(--gg-color-text-primary);
  text-decoration: none;
  min-height: 160px;
  display: flex; flex-direction: column; gap: var(--gg-space-2);
  position: relative; overflow: hidden;
  transition: transform 160ms var(--gg-ease), box-shadow 160ms var(--gg-ease);
}
.gg-era-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 110%, rgba(255, 215, 0, 0.12), transparent 55%);
  pointer-events: none;
}
.gg-era-card:hover { transform: translateY(-2px); box-shadow: var(--gg-shadow-md); }
.gg-era-card__years {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gg-color-medal-gold);
  font-variant-numeric: tabular-nums;
}
.gg-era-card__title { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.15; }
.gg-era-card__sub { font-size: 12px; color: var(--gg-color-text-muted); margin-top: auto; line-height: 1.5; }

.az-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
  margin-top: var(--gg-space-4);
}
/* B22 2026-05-11 D9 fix: 2-col now kicks in at 480px instead of 768,
   so landscape phones (414-480px wide) and small tablets get a two-
   column grid instead of a long single column. 3-col stays at 1200+. */
@media (min-width: 480px) { .az-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .az-grid { grid-template-columns: repeat(3, 1fr); } }

.az-facet-row {
  display: flex; flex-wrap: wrap; gap: var(--gg-space-2);
  margin-bottom: var(--gg-space-3);
}
.az-facet-row__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gg-color-text-muted);
  align-self: center; margin-right: var(--gg-space-2);
}

/* 5.31.1 ── Athletes index zero-count chip styling. Lifted from
   wireframes/02_athletes.html lines 108-145 (was page-local) +
   filter_state_machine.md § 3.2 (zero-count chips). prompt22 § 3.7.
   The athletes search bar lives in canonical .gg-search (§5.30b) per
   L17 (2026-05-26). ── */

/* Zero-count facet chips per filter_state_machine.md § 3.2: rendered with
   reduced opacity + not-allowed cursor, retained in the DOM (no layout
   shift) but not navigable. Screen-reader-friendly — the chip text still
   reads with the "(0)" count and aria-disabled flips the announcement. */
.gg-chip[aria-disabled="true"] {
  /* B22 2026-05-11 D18 fix: bumped from 0.45 → 0.6 so disabled chips
     remain visually readable while still clearly inactive. The 0.45
     state combined with the already-low-contrast chip text
     (rgba 0.88) was producing effective contrast ≈ 2.5:1, failing AA
     for visible-but-inactive content. 0.6 lifts it to ~3.7:1 which
     stays within the SC 1.4.3 exemption window for inactive controls
     while remaining readable. */
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* JS-driven `card.hidden = true` (athletes-search.js filter) needs to win
   over the explicit `display: flex/grid` on .gg-named-card and .az-grid.
   Without this, the user-agent default `[hidden] { display: none }` is
   overridden by the author rule, so cards stay visible and the search
   appears broken. Universal rule, !important to guarantee precedence. */
[hidden] {
  display: none !important;
}


/* 5.32 ── Competitions list (.gg-meet-card + .view-toggle).
   Source: wireframes/04_competitions.html lines 107-141. ── */

.gg-meet-card {
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-2);
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-3) var(--gg-space-4);
  text-decoration: none;
  color: var(--gg-color-text-primary);
  transition: transform 140ms var(--gg-ease), border-color 140ms var(--gg-ease);
  min-height: 44px;
}
/* Hover treatment — only on linked cards (the <a> form). Spans get
   a distinct treatment below so the user sees that the card is data-
   only and not navigable. WD-2026-05-10 Round 7 fix: prior CSS
   targeted .gg-meet-card universally, including the .gg-unlinked-comp
   span fallback for competitions whose detail page isn't rendered.
   That made unbuilt cards highlight on hover, suggesting clickability
   they didn't have. Affordance-honesty fix per Josh feedback. */
a.gg-meet-card:hover { border-color: var(--gg-color-plum-500); transform: translateY(-1px); }
a.gg-meet-card:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
  border-color: var(--gg-color-medal-gold);
}
/* Span fallback — visually distinct, no hover, dimmed slightly. The
   "(coming soon)" affordance lives in CSS pseudo so we don't need to
   change the build-emit markup. */
.gg-meet-card.gg-unlinked-comp {
  cursor: default;
  opacity: 0.62;
  background: var(--gg-color-surface-2);
  border-style: dashed;
}
.gg-meet-card.gg-unlinked-comp:hover {
  /* Explicitly NO hover transform — flat span. */
  border-color: var(--gg-color-border);
  transform: none;
}
.gg-meet-card.gg-unlinked-comp .gg-meet-card__title::after {
  content: " · detail page pending";
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}
.gg-meet-card__year {
  font-size: 11px; font-weight: 700; color: var(--gg-color-medal-gold);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.gg-meet-card__title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.gg-meet-card__sub { font-size: 12px; color: var(--gg-color-text-muted); }
.gg-meet-card--marquee { border-left: 3px solid var(--gg-color-medal-gold); }
.gg-meet-card--marquee .gg-meet-card__title { color: var(--gg-color-medal-gold); }

.view-toggle {
  display: flex; gap: var(--gg-space-2);
  margin: var(--gg-space-4) 0;
  align-items: center;
  flex-wrap: wrap;
}
.view-toggle__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gg-color-text-muted);
  margin-right: var(--gg-space-2);
}


/* 5.33 ── Competition detail (.aa-card + .aa-podium + .apparatus-section
   + .summary-prose + .stats-trio + section[id] scroll-margin).
   Source: wireframes/05_competition_detail.html lines 107-194. ── */

.stats-trio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-4) var(--gg-space-6);
  margin-top: var(--gg-space-4);
  align-items: baseline;
}
.stats-trio .gg-stat { min-width: 80px; }

.aa-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-4);
  margin-top: var(--gg-space-3);
}
@media (min-width: 1200px) { .aa-hero-grid { grid-template-columns: repeat(2, 1fr); } }

.aa-card {
  background: linear-gradient(135deg, var(--gg-color-plum-900), var(--gg-color-surface-1));
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-5);
  position: relative;
  overflow: hidden;
}
.aa-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 95% 5%, rgba(255, 215, 0, 0.08), transparent 60%);
  pointer-events: none;
}
.aa-card__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gg-color-medal-gold);
  margin-bottom: 6px;
}
.aa-card__title {
  font-size: 20px; font-weight: 800; color: #fff;
  letter-spacing: -0.01em; margin-bottom: var(--gg-space-3);
}
.aa-podium { display: flex; flex-direction: column; gap: var(--gg-space-2); position: relative; }
.aa-podium__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--gg-space-3);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(92, 68, 104, 0.35);
}
.aa-podium__row:last-child { border-bottom: none; }
.aa-podium__place { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.aa-podium__athlete { color: #fff; font-weight: 600; font-size: 15px; }
.aa-podium__country { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gg-color-text-muted); margin-left: 6px; }

.apparatus-section { display: grid; grid-template-columns: 1fr; gap: var(--gg-space-5); margin-top: var(--gg-space-5); }
.apparatus-section details {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
}
.apparatus-section summary {
  cursor: pointer; list-style: none;
  padding: var(--gg-space-4) var(--gg-space-5);
  display: flex; align-items: center; gap: var(--gg-space-3);
  font-size: 15px; font-weight: 700;
  min-height: 44px;
  transition: background 0.15s ease;
}
.apparatus-section summary:hover {
  background: rgba(255, 215, 0, 0.04);
}
.apparatus-section summary:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: -2px;
}
.apparatus-section summary::-webkit-details-marker { display: none; }
.apparatus-section summary::marker { display: none; }
/* 2026-05-11 B20 — bump the chevron from a 12px glyph into a pill
   button so the expand affordance is obvious. The previous treatment
   was too subtle; readers didn't realize the rows were clickable. */
.apparatus-section summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--gg-color-medal-gold);
  font-size: 16px;
  line-height: 1;
  background: rgba(255, 215, 0, 0.10);
  border: 1px solid rgba(255, 215, 0, 0.30);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
}
.apparatus-section summary:hover::after {
  background: rgba(255, 215, 0, 0.20);
  border-color: rgba(255, 215, 0, 0.55);
}
.apparatus-section details[open] summary::after {
  transform: rotate(180deg);
  background: rgba(255, 215, 0, 0.18);
}
.apparatus-section__kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gg-color-text-muted);
}

/* 2026-05-11 B20 — team-event rendering on competition pages.
   .gg-team-row--headline is the per-medal team summary (place + team
   name + NOC + aggregate score). .gg-team-row--members is the inline
   members list rendered immediately below, sharing a soft bottom
   border that visually attaches it to the headline. */
.gg-table--team .gg-team-row--headline > td {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.gg-table--team .gg-team-row__team {
  font-weight: 700;
  color: var(--gg-color-text-primary);
}
.gg-table--team .gg-team-row--members > td {
  padding-top: 4px;
  padding-bottom: var(--gg-space-4);
  color: var(--gg-color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.gg-table--team .gg-team-row--members a {
  color: var(--gg-color-text-secondary, var(--gg-color-text-primary));
}
.gg-table--team .gg-team-row--members a:hover {
  color: var(--gg-color-medal-gold);
}

main section[id] { scroll-margin-top: 72px; padding-top: var(--gg-space-5); }
main section[id] > h2 { font-size: 22px; margin-bottom: var(--gg-space-3); letter-spacing: -0.01em; }

.summary-prose {
  color: var(--gg-color-text-primary);
  font-size: 16px;
  line-height: 1.7;
  max-width: 64ch;
  background: rgba(255, 215, 0, 0.04);
  border-left: 3px solid var(--gg-color-medal-gold);
  padding: var(--gg-space-4) var(--gg-space-5);
  border-radius: 0 var(--gg-radius-md) var(--gg-radius-md) 0;
}
.summary-prose strong { color: var(--gg-color-medal-gold); }


/* 5.34 ── Athlete profile (.timeline + .profile-hero__lede + .apparatus-grid).
   Source: wireframes/03_athlete_profile.html lines 107-168. ── */

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
  padding: var(--gg-space-4) 0;
}
.timeline__year {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--gg-space-4);
  padding: var(--gg-space-3) 0;
  border-top: 1px solid rgba(92, 68, 104, 0.4);
}
.timeline__year:first-child { border-top: none; }
.timeline__label {
  font-size: 18px; font-weight: 800;
  color: var(--gg-color-medal-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.timeline__entry {
  display: flex; flex-wrap: wrap;
  gap: var(--gg-space-2);
  /* B22 2026-05-11 D17 fix: bumped from 13px → 14px so the timeline
     entry text doesn't read as fine-print under the 18px gold year
     label. Better hierarchy on dense entries. */
  font-size: 14px;
  color: var(--gg-color-text-primary);
}
.timeline__entry strong { color: #fff; }
.timeline__meet { color: var(--gg-color-text-muted); font-size: 12px; display: block; }

.profile-hero__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gg-space-2) var(--gg-space-3);
}
.profile-hero__lede {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  margin: var(--gg-space-4) 0 0;
  max-width: 58ch;
  line-height: 1.55;
  font-weight: 400;
}
@media (min-width: 768px) {
  .profile-hero__lede { font-size: 18px; }
}

.apparatus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
}
@media (min-width: 768px) { .apparatus-grid { grid-template-columns: repeat(2, 1fr); } }
.apparatus-grid .gg-card { padding: var(--gg-space-4); }
.apparatus-grid h3 { font-size: 15px; color: var(--gg-color-medal-gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--gg-space-2); }


/* 5.35 ── Medals (.scope-summary + .rollup-pullout + table aria-sort).
   Source: wireframes/06_medals.html lines 107-191. ── */

.gg-table th[aria-sort] a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gg-table th[aria-sort]:hover a { color: #fff; }
.gg-table th[aria-sort="descending"] a::after { content: "▾"; opacity: 0.8; }
.gg-table th[aria-sort="ascending"] a::after { content: "▴"; opacity: 0.8; }
.gg-table th[aria-sort="none"] a::after { content: "⇅"; opacity: 0.4; font-size: 10px; }

.scope-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.scope-summary__pill {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rollup-pullout {
  margin-top: var(--gg-space-6);
  background: rgba(255, 215, 0, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-5);
  max-width: 70ch;
}
.rollup-pullout h3 {
  color: var(--gg-color-medal-gold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--gg-space-2);
}
.rollup-pullout p {
  font-size: 15px;
  color: var(--gg-color-text-primary);
  line-height: 1.65;
  margin-bottom: var(--gg-space-2);
}
.rollup-pullout p:last-child { margin-bottom: 0; color: var(--gg-color-text-muted); font-size: 13px; }


/* 5.36 ── On This Day (.otd-support-list + .otd-support-row + .calendar-utility).
   Source: wireframes/07_ontd.html lines 107-174. ── */

.otd-support-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-2);
  margin: var(--gg-space-5) 0 var(--gg-space-6);
}
.otd-support-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--gg-space-3);
  align-items: baseline;
  padding: var(--gg-space-3) var(--gg-space-4);
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  text-decoration: none;
  color: var(--gg-color-text-primary);
  transition: border-color 140ms var(--gg-ease);
  min-height: 44px;
}
.otd-support-row:hover { border-color: var(--gg-color-plum-500); }
.otd-support-row__year {
  font-size: 14px; font-weight: 800;
  color: var(--gg-color-medal-gold);
  font-variant-numeric: tabular-nums;
}
.otd-support-row__title { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.otd-support-row__sub { font-size: 12px; color: var(--gg-color-text-muted); margin-top: 2px; }

.calendar-utility {
  margin-top: var(--gg-space-7);
  padding: var(--gg-space-5);
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
}
.calendar-utility__label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gg-color-text-muted);
  margin-bottom: var(--gg-space-3);
}
.calendar-utility__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-2);
  align-items: center;
}
.calendar-utility__date-input {
  padding: 8px 12px;
  font-family: var(--gg-font-mono);
  font-size: 13px;
  width: auto;
}
.calendar-nav__kbd {
  font-family: var(--gg-font-mono);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--gg-color-text-muted);
}


/* 5.37 ── Legal pages (.legal-meta + .arb-callout) + Stub pages
   (.stub-callout + .stub-cta-row + .starter-glossary).
   Sources: wireframes/09_privacy.html, 10_terms.html, 14_teams_stub.html,
   15_glossary_stub.html. ── */

.legal-meta {
  font-size: 13px;
  color: var(--gg-color-text-muted);
  margin-bottom: var(--gg-space-4);
  padding-bottom: var(--gg-space-3);
  border-bottom: 1px solid var(--gg-color-border);
}
.legal-meta strong { color: var(--gg-color-text-primary); }

.arb-callout {
  border: 1px solid var(--gg-color-medal-gold);
  background: rgba(255, 215, 0, 0.05);
  padding: var(--gg-space-4);
  border-radius: var(--gg-radius-md);
  margin: var(--gg-space-4) 0;
  font-size: 14.5px;
}
.arb-callout strong { color: var(--gg-color-medal-gold); }

.stub-callout {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-5);
  margin-top: var(--gg-space-5);
  max-width: 64ch;
}
.stub-callout__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gg-color-medal-gold);
  display: block;
  margin-bottom: var(--gg-space-2);
}
.stub-callout p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gg-color-text-primary);
  margin: 0 0 var(--gg-space-3);
}
.stub-callout p:last-child { margin-bottom: 0; }
.stub-cta-row {
  margin-top: var(--gg-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-3);
}

/* L38 2026-06-03 [glossary-redesign]: sticky sidebar TOC + reading-flow
   definition list. The prior layout ran a horizontal .gg-subnav over a
   rigid 80px/1fr <dl> grid — fine for 2-letter apparatus codes but it
   crammed phrase terms ("Code of Points", "Acrobatic gymnastics") into an
   80px column where they wrapped 3-4 lines. Reading-flow stacks term over
   definition; the TOC moves to a sticky left rail on desktop (≥768px) and
   falls back to the base horizontal sticky subnav on mobile. All per-term
   ids preserved (the /glossary/#vt deep-link contract). Reuses
   subnav-spy.js (binds site-wide on any .gg-subnav) — no new JS. */
.gg-glossary-layout { margin-top: var(--gg-space-6); }

.starter-glossary { max-width: 64ch; }
.starter-glossary__h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gg-color-text-primary);
  margin: var(--gg-space-6) 0 var(--gg-space-3);
}
.starter-glossary__h2:first-child { margin-top: 0; }
.starter-glossary dl { margin: 0; }
.starter-glossary dt {
  font-weight: 700;
  color: var(--gg-color-medal-gold);
  font-size: 15px;
  margin-top: var(--gg-space-4);
}
.starter-glossary dd {
  margin: var(--gg-space-1) 0 var(--gg-space-4);
  padding-bottom: var(--gg-space-4);
  font-size: 15px;
  color: var(--gg-color-text-primary);
  line-height: 1.6;
  max-width: 60ch;
  border-bottom: 1px solid var(--gg-color-border);
}
.starter-glossary dl dd:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Pure-acronym apparatus codes stay mono — that section is all 2-letter
   codes, so monospace reads as a code key without cramping phrase terms. */
.starter-glossary h2#apparatus-codes + dl dt {
  font-family: var(--gg-font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* Desktop: TOC becomes a sticky left rail beside the definition column.
   align-items:start keeps the rail from stretching to grid-row height,
   which is what lets position:sticky actually engage. */
@media (min-width: 768px) {
  .gg-glossary-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--gg-space-7);
    align-items: start;
  }
  .gg-subnav--glossary-rail {
    position: sticky;
    top: var(--gg-space-6);
    flex-direction: column;
    gap: var(--gg-space-1);
    margin: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    overflow: visible;
  }
  .gg-subnav--glossary-rail a {
    padding: var(--gg-space-2) var(--gg-space-3);
    border-bottom: none;
    border-left: 2px solid var(--gg-color-border);
    white-space: normal;
    letter-spacing: 0.04em;
  }
  .gg-subnav--glossary-rail a.is-current {
    border-left-color: var(--gg-color-medal-gold);
    background: rgba(255, 215, 0, 0.05);
  }
}


/* 5.38 ── NCAA postseason — per-athlete profile section
   audit-NCAA 2026-05-08 (web-developer).

   Renders the new `<section id="ncaa">` block in render_athlete_profile
   for the ~3,450 athletes with NCAA roster entries (Chiles, Lee, Dunne,
   Thomas, O'Keefe, Wong, Bowers, Bryant, Davis, etc.). Layout is:

     gg-ncaa                     section wrapper
       └─ gg-ncaa__intro         lede paragraph (phrasing helper)
       └─ gg-ncaa-seasons        vertical stack of season blocks
            └─ gg-ncaa-season    one season — h3 head + meet list
                 └─ gg-ncaa-meet-list
                      └─ gg-ncaa-meet
                           ├─ gg-ncaa-meet__header (date · label)
                           └─ gg-ncaa-meet__scores (apparatus pills)

   Tokens used: --gg-color-medal-gold (Perfect 10 highlight, season
   accent border) + --gg-color-surface-1 / surface-2 / border /
   text-primary / text-muted + --gg-space-* + --gg-radius-*. All v1.4
   tokens — no new tokens introduced. ── */

.gg-ncaa {
  margin: var(--gg-space-6) 0;
}
.gg-ncaa__intro {
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--gg-color-text-primary);
  margin: 0 0 var(--gg-space-5);
}

.gg-ncaa-seasons {
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.gg-ncaa-season {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-5);
}
.gg-ncaa-season__head {
  font-family: var(--gg-font-mono, ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Consolas, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gg-color-medal-gold);
  margin: 0 0 var(--gg-space-4);
}

.gg-ncaa-meet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-3);
}

.gg-ncaa-meet {
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-sm);
  padding: var(--gg-space-3) var(--gg-space-4);
}
.gg-ncaa-meet__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gg-space-3);
  margin-bottom: var(--gg-space-3);
}
.gg-ncaa-meet__date {
  font-family: var(--gg-font-mono, ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Consolas, monospace);
  font-size: 13px;
  color: var(--gg-color-text-muted);
  white-space: nowrap;
  min-width: 56px;
}
.gg-ncaa-meet__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--gg-color-text-primary);
  line-height: 1.3;
}

.gg-ncaa-meet__scores {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-2);
}

.gg-ncaa-score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-pill);
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--gg-color-text-primary);
}
.gg-ncaa-score__app {
  font-family: var(--gg-font-mono, ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-color-text-muted);
}
.gg-ncaa-score__val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.gg-ncaa-score__tag {
  font-size: 10.5px;
  font-style: italic;
  color: var(--gg-color-text-muted);
  letter-spacing: 0.04em;
  margin-left: 2px;
}

/* Perfect 10 — the top mark in NCAA's Perfect-10 system
   (GYMNASTICS_FLUENCY.md § 5/§ 7). Subtle gold treatment matching
   the medals page accent. */
.gg-ncaa-score--p10 {
  background: rgba(255, 215, 0, 0.10);
  border-color: var(--gg-color-medal-gold);
}
.gg-ncaa-score--p10 .gg-ncaa-score__val {
  color: var(--gg-color-medal-gold);
  font-weight: 700;
}
.gg-ncaa-score--p10 .gg-ncaa-score__app {
  color: var(--gg-color-medal-gold);
}

/* Non-counting routine (5-of-6 lineup drop) — muted but legible. */
.gg-ncaa-score--noncount {
  opacity: 0.72;
}
.gg-ncaa-score--noncount .gg-ncaa-score__val {
  color: var(--gg-color-text-muted);
}

/* Exhibition routine (lineup add-on, doesn't count toward total). */
.gg-ncaa-score--exh {
  opacity: 0.78;
  font-style: italic;
}
.gg-ncaa-score--exh .gg-ncaa-score__val {
  color: var(--gg-color-text-muted);
  font-style: normal;
}

/* Narrow-viewport stacking: meet header wraps cleanly already, but
   on phones the apparatus pills wrap into 2 rows of 2 for WAG (4
   apparatus) and 3 rows of 2 for MAG (6 apparatus). The flex-wrap
   above handles that without extra rules. */


/* 5.39 ── Athlete-profile redesign primitives — full-career Timeline,
   per-tier meet cards, qual+final phase fold-in, tier chips.
   Source authority: _drafts/2026-05-08_athlete_page_redesign_proposal.md.
   Companion mockup: _drafts/2026-05-08_chiles_redesign_mockup.html.
   Approved by Josh 2026-05-08 with all §8 question recommended-defaults.
   STAGE 1 of multi-session implementation: CSS only — render path in
   build_site.py is NOT yet wired to use these classes. Wiring lands in
   Stage 2. Adding the primitives in advance keeps the design-system.css
   diff clean per the ADR-style commit cadence used through prompts 18-22.

   Naming convention:
     .gg-timeline-v2        — vertical year-spine (replaces .timeline §5.34)
     .gg-event-card          — per-meet card used by Olympic/World/etc tabs
     .gg-event-card__row     — one row per event inside a meet card
     .gg-phase-pair         — qual+final fold-in inside a meet-card row
     .gg-phase              — single phase row (qual or final)
     .gg-phase__label       — uppercase Qual/Final chip
     .gg-tier-chip          — Olympic/World/Continental/NCAA chip on Timeline
   ── */

/* Tier color tokens — added here vs §1 so the redesign owns its palette
   and they're co-located with consumers. If multiple sections need
   them later, promote to §1 (root :root). */
.gg-tier-chip,
.gg-timeline-v2__entry {
  --gg-tier-color-olympic:    var(--gg-color-medal-gold);
  --gg-tier-color-world:      #c8c8d0;
  --gg-tier-color-continental:#cd7f32;
  --gg-tier-color-ncaa:       var(--gg-color-plum-500, #8a4fbf);
  --gg-tier-color-domestic:   rgba(255, 255, 255, 0.32);
}

/* ── .gg-timeline-v2 — full-career chronology spine ── */
.gg-timeline-v2 {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0;
  margin: 0 0 var(--gg-space-6);
  padding: 0;
  list-style: none;
}
@media (max-width: 600px) {
  .gg-timeline-v2 { grid-template-columns: 48px 1fr; }
}
.gg-timeline-v2__year {
  font-family: var(--gg-font-display, var(--gg-font-sans));
  font-size: 22px;
  font-weight: 800;
  color: var(--gg-color-medal-gold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  padding-top: 14px;
  padding-right: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* When the same year has multiple entries, second+ year-cells render
   the year in a muted gold so the eye doesn't read "two 2022s" as a
   visual glitch. The first instance is solid gold; repeats are muted. */
.gg-timeline-v2__year--repeat {
  color: rgba(255, 215, 0, 0.32);
}
.gg-timeline-v2__entry {
  background: var(--gg-color-surface-2);
  border-left: 4px solid rgba(255, 255, 255, 0.10);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gg-timeline-v2__entry--olympic     { border-left-color: var(--gg-tier-color-olympic); }
.gg-timeline-v2__entry--world       { border-left-color: var(--gg-tier-color-world); }
.gg-timeline-v2__entry--continental { border-left-color: var(--gg-tier-color-continental); }
.gg-timeline-v2__entry--ncaa        { border-left-color: var(--gg-tier-color-ncaa); }
.gg-timeline-v2__entry--domestic    { border-left-color: var(--gg-tier-color-domestic); }

.gg-timeline-v2__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.94);
}
.gg-timeline-v2__date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.56);
  font-variant-numeric: tabular-nums;
}
.gg-timeline-v2__summary {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}
/* L20 (2026-05-27) [ia-section-e-inline-teammates]: subtle "with
   {teammate-1}, {teammate-2}, …" line below the summary on Team-medal
   entries. Italic, muted, smaller — does not crowd the gold summary
   above it. */
.gg-timeline-v2__teammates {
  margin: 4px 0 0;
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.gg-timeline-v2__teammates__label {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-right: 4px;
}
.gg-timeline-v2__teammates a {
  color: var(--gg-color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gg-timeline-v2__teammates a:hover {
  border-bottom-color: var(--gg-color-link);
}
.gg-timeline-v2__teammates__more {
  font-style: normal;
  font-size: 11px;
  color: var(--gg-color-text-muted);
}

/* ── .gg-tier-chip — small uppercase chip used on Timeline entries
      and on category-tab headings. ── */
.gg-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.gg-tier-chip--olympic     { color: var(--gg-tier-color-olympic); }
.gg-tier-chip--world       { color: var(--gg-tier-color-world); }
.gg-tier-chip--continental { color: var(--gg-tier-color-continental); }
.gg-tier-chip--ncaa        { color: #c198eb; /* plum, brighter for chip readability */ }
.gg-tier-chip--domestic    { color: rgba(255, 255, 255, 0.62); }

/* Inline medal pill used inside Timeline summaries ("Team gold"). */
.gg-medal {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.gg-medal--gold   { background: rgba(255, 215, 0, 0.15); color: var(--gg-color-medal-gold); }
.gg-medal--silver { background: rgba(200, 200, 208, 0.15); color: #d8d8e0; }
.gg-medal--bronze { background: rgba(205, 127, 50, 0.15); color: #e0a070; }

/* ── .gg-event-card — per-meet card for Olympic / World / Continental /
      Domestic-Elite tabs. Mirrors the §5.38 NCAA postseason card
      visually, with one row per event inside (not row-per-event-per-
      apparatus the way the legacy Results table is). ── */
.gg-event-card {
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  border-radius: 10px;
  /* 2026-05-11 Issue-3 fix: tighten padding + margin so the post-timeline
     event cards read closer to the timeline's clean cadence above
     them. Pre-fix the gg-event-card chunks ate ~50% more vertical
     space than they needed. Was: padding 18px 20px, margin-bottom 16px.
     Now: 12px 16px / 10px — a ~33% reduction in card chrome. */
  padding: 12px 16px;
  margin-bottom: 10px;
}
.gg-event-card__title {
  font-size: 16px;       /* was 18px — half-step down keeps hierarchy with h2 above */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 2px;       /* was 0 0 4px */
  line-height: 1.25;
}
/* WD-2026-05-09 task #23 cross-linking: meet-card title becomes a link
   to /competitions/<slug>/ when the competition page exists. Underline
   on hover only — keeps the title visually clean while signaling
   interactivity. .gg-unlinked-comp is the fallback when the competition
   page isn't built (no underline, slightly muted color, cursor:default). */
.gg-event-card__title-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.18s ease, color 0.18s ease;
}
.gg-event-card__title-link:hover,
.gg-event-card__title-link:focus-visible {
  color: var(--gg-color-medal-gold);
  background-size: 100% 1px;
  outline: none;
}
.gg-event-card__title .gg-unlinked-comp {
  color: rgba(255, 255, 255, 0.78);
  cursor: default;
}
.gg-event-card__date {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;     /* 2026-05-11 Issue-3 fix: was 14px */
  letter-spacing: 0.02em;
}
.gg-event-card__row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  gap: 12px;
  padding: 6px 0;          /* 2026-05-11 Issue-3 fix: was 10px 0 */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: baseline;
}
.gg-event-card__row:first-of-type { border-top: 0; }
@media (max-width: 600px) {
  /* Mobile: 2-column collapse — event name + result on the top row,
     phase detail spans full width on row 2. Keeps the result visually
     tied to its event without horizontal scroll. */
  .gg-event-card__row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .gg-event-card__row > .gg-event-card__detail { grid-column: 1 / -1; font-size: 12px; }
}
.gg-event-card__event {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
}
.gg-event-card__detail {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.gg-event-card__result {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  text-align: right;
  white-space: nowrap;
}
.gg-event-card__result--gold   { color: var(--gg-color-medal-gold); }
.gg-event-card__result--silver { color: #d8d8e0; }
.gg-event-card__result--bronze { color: #e0a070; }

/* Footnote callout inside a meet-card row — used for things like the
   CAS Floor reassignment annotation on Chiles' Paris 2024 card.
   Distinct visual treatment so it reads as authoritative editorial,
   not optional fluff. */
.gg-event-card__note {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 215, 0, 0.78);
  line-height: 1.5;
  background: rgba(255, 215, 0, 0.06);
  border-left: 2px solid var(--gg-color-medal-gold);
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
}

/* ── .gg-phase-pair — one-row-per-event qual+final fold-in inside
      a .gg-event-card__row. Per Josh feedback 2026-05-08:
      collapsing two phases into one row reads as a single event
      story. Each phase gets a small uppercase Qual/Final chip
      so the eye groups them as one unit. ── */
.gg-phase-pair {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gg-phase {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.74);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.gg-phase__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.84);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* L27 (2026-05-29) [event-card-compact-format]: on high-volume profiles
   (>25 event rows) the per-event qual+final pair renders inline —
   "Final 14.866 (Qual 14.733 — 1st)" — instead of the default stacked
   column, to cut vertical scroll. The renderer promotes the final phase
   and wraps the folded qual/semi phase(s) in .gg-event-card__phase--compact-qual.
   When a row contains that span, lay the .gg-phase-pair out in a wrapping
   row; the parenthetical is de-emphasized (secondary color, slightly
   smaller). Rows without it keep the stacked-column default above. */
.gg-phase-pair:has(.gg-event-card__phase--compact-qual) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.gg-event-card__phase--compact-qual {
  color: var(--gg-color-text-secondary, rgba(255, 255, 255, 0.55));
  font-size: 0.92em;
}
/* L28 (2026-05-29) [de-44-followup-paired-web-dev-archaic-render-scoping]:
   "Historical" badge on athlete-profile event rows whose apparatus was retired
   before the modern Olympic era (events.is_archaic=1). Small, muted, inline
   with the event name. Copy doctrine: user-facing word is "Historical". */
.gg-event-card__archaic-badge {
  display: inline-block;
  margin-left: var(--gg-space-2);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-color-text-muted);
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-sm);
  vertical-align: middle;
}
/* Hero eyebrow chip for athletes whose ENTIRE record is historical-era. */
.gg-hero__archaic-only-badge {
  display: inline-block;
  margin: var(--gg-space-2) 0 0;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-color-text-muted);
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-sm);
}
/* Optional sub-line for team-event apparatus contributions
   (e.g., "VT 14.566 · UB 14.866 · BB 14.000 · FX 13.766" under the
   Team Final row). Always a sub-line on the same row, never a
   sibling row. */
.gg-phase-pair__sub {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: 0.02em;
}

/* Tab-strip count badges on the new derived breakout tabs.
   Currently the .gg-subnav rules in §5.34 render the tab strip; this
   adds the numeric "(2)" / "(4 seasons)" badge styling without
   touching the existing nav layout. Stage 3 wires it in. */
.gg-subnav .gg-subnav__count {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.gg-subnav a.is-current .gg-subnav__count {
  color: rgba(255, 215, 0, 0.7);
}

/* WD-2026-05-09 Competitions Stage A — small additions: discipline tag
   on legacy .gg-meet-card cards + section-heading pattern for the new
   NCAA postseason section below the era bands. */
.gg-meet-card__disc {
  display: inline;
  color: rgba(255, 215, 0, 0.7);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* WD-2026-05-09 Competitions Stage B — filter chip UI above era bands.
   Chip rows stack vertically with a label on the left and chips
   wrapping right. Hidden gracefully under prefers-reduced-motion (no
   transitions). The competitions search bar lives in canonical
   .gg-search + .gg-search--filter modifier (§5.30b) per L17
   (2026-05-26); the submit pill shipped 2026-05-11 (Path A) is now
   carried by .gg-search__btn — visually identical. */

/* WD-2026-05-10 Round 7 — chip filter visual redesign per Josh feedback
   ("don't like the way the filter pills look"). Applied design heuristics:
   - Nielsen #6 Recognition: active state must be unambiguous at a glance
     across 18+ chips (3 rows). Solid gold + dark text inversion.
   - Reduced motion: drop the per-chip transform: translateY hover —
     across 18 chips it's visually noisy. Replace with a simple
     background-color tint.
   - Visual hierarchy: filter container reads as "controls" not "content".
     Subtle plum-tinted background + tighter padding distinguishes from
     the meet-card grid below.
   - Krug "make it obvious": "All" chip is visually distinct (italic +
     muted) so the user reads it as "default state" not "another value".

   Scoped to .gg-comps-filters so it doesn't override the .gg-chip
   styling on Athletes index where the existing treatment is already
   established. */
.gg-comps-filters {
  margin-bottom: var(--gg-space-5);
  padding: var(--gg-space-4) var(--gg-space-4);
  background: rgba(76, 32, 90, 0.32); /* subtle plum tint */
  border: 1px solid rgba(255, 215, 0, 0.14);
  border-radius: var(--gg-radius-md);
}
.gg-comps-filter-row {
  display: flex;
  align-items: center;
  gap: var(--gg-space-3);
  padding: 4px 0;
  flex-wrap: wrap;
}
.gg-comps-filter-row + .gg-comps-filter-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
  padding-top: 8px;
}
.gg-comps-filter-row__label {
  flex: 0 0 76px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 215, 0, 0.82);
}
.gg-comps-filter-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}
@media (max-width: 600px) {
  .gg-comps-filters { padding: var(--gg-space-3); }
  .gg-comps-filter-row { gap: var(--gg-space-2); }
  .gg-comps-filter-row__label { flex: 0 0 100%; margin-bottom: 4px; }
  .gg-comps-filter-row + .gg-comps-filter-row { padding-top: 10px; }
}

/* Chip overrides scoped to the comps filter — leaves Athletes index
   chip styling untouched. Active state inverts to solid gold + dark
   plum text (max-contrast tap-state); inactive state is a thin
   transparent border for low visual noise; hover is a quiet bg tint
   with no translate so 18 chips don't all bounce on cursor sweep. */
.gg-comps-filters .gg-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 28px;
  line-height: 1.4;
  transition: background var(--gg-duration-fast) var(--gg-ease),
              border-color var(--gg-duration-fast) var(--gg-ease),
              color var(--gg-duration-fast) var(--gg-ease);
  cursor: pointer;
  text-decoration: none;
}
.gg-comps-filters .gg-chip:hover {
  background: rgba(255, 215, 0, 0.10);
  border-color: rgba(255, 215, 0, 0.40);
  color: var(--gg-color-medal-gold);
  transform: none; /* override base .gg-chip hover translate */
}
.gg-comps-filters .gg-chip--active {
  background: var(--gg-color-medal-gold);
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-plum-900, #2A1538);
  font-weight: 700;
}
.gg-comps-filters .gg-chip--active:hover {
  background: #FFE85C;
  border-color: #FFE85C;
  color: var(--gg-color-plum-900, #2A1538);
}
.gg-comps-filters .gg-chip:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
}
/* "All" chip — visually distinct as the reset / default value.
   Italic + slightly muted reads as "default state" while still being
   a regular chip. */
.gg-comps-filters .gg-chip[data-filter-discipline="all"],
.gg-comps-filters .gg-chip[data-filter-level="all"],
.gg-comps-filters .gg-chip[data-filter-era="all"] {
  font-style: italic;
}
.gg-comps-filters .gg-chip[data-filter-discipline="all"]:not(.gg-chip--active),
.gg-comps-filters .gg-chip[data-filter-level="all"]:not(.gg-chip--active),
.gg-comps-filters .gg-chip[data-filter-era="all"]:not(.gg-chip--active) {
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.62);
}

.gg-comps-filters__status {
  margin: var(--gg-space-3) 0 0;
  font-size: 12px;
  color: var(--gg-color-text-muted);
  font-style: italic;
}

.gg-comps-empty {
  text-align: center;
  padding: var(--gg-space-7) var(--gg-space-5);
  background: var(--gg-color-surface-2);
  border: 1px dashed var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  margin-bottom: var(--gg-space-5);
}
.gg-comps-empty p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--gg-space-3);
}

.gg-section-heading {
  margin-top: var(--gg-space-7);
  margin-bottom: var(--gg-space-2);
  color: var(--gg-color-medal-gold);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.gg-section-heading__count {
  color: rgba(255, 215, 0, 0.55);
  font-weight: 500;
  font-size: 0.6em;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: 6px;
  white-space: nowrap;
}
.gg-section-heading__lede {
  color: var(--gg-color-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: var(--gg-space-5);
  max-width: 60ch;
}

/* ── .gg-meet-section — wrapper around the per-tier meet-card lists
      (Olympic / World / Continental / Domestic-Elite). The h2 carries a
      muted count subhead ("— 2 appearances"). Stage 3 step 1-3. ── */
.gg-meet-section {
  margin-top: var(--gg-space-6);
  margin-bottom: var(--gg-space-6);
}

/* 2026-05-11 Issue-2 fix — per-season collapsibles inside an athlete's
   NCAA section. Distinct from .gg-ncaa-season (§5.40) on the
   /competitions/ncaa-postseason/ page to avoid the class-collision
   flagged in CLAUDE.md carry-forwards. Same visual vocabulary —
   year + title + meta + toggle pill — so the affordance reads
   consistently to a reader who arrives from either path. */
.gg-athlete-season {
  border-top: 1px solid var(--gg-color-border);
  padding: 0;
  margin: 0;
}
.gg-athlete-season:first-of-type { border-top: none; }
.gg-athlete-season__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  user-select: none;
  border-radius: var(--gg-radius-md, 8px);
  transition: background 0.15s ease;
}
.gg-athlete-season__summary::-webkit-details-marker { display: none; }
.gg-athlete-season__summary::marker { display: none; }
.gg-athlete-season__summary:hover { background: rgba(255, 215, 0, 0.04); }
.gg-athlete-season__summary:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
  background: rgba(255, 215, 0, 0.04);
}
.gg-athlete-season__year {
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 56px;
}
.gg-athlete-season__title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.gg-athlete-season__meta {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  flex: 1;
}
.gg-athlete-season__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-pill, 999px);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  background: var(--gg-color-surface-2);
  margin-left: auto;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gg-athlete-season__summary:hover .gg-athlete-season__toggle,
.gg-athlete-season__summary:focus-visible .gg-athlete-season__toggle {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
  background: rgba(255, 215, 0, 0.06);
}
.gg-athlete-season__toggle-icon { transition: transform 0.18s ease; flex-shrink: 0; }
.gg-athlete-season[open] .gg-athlete-season__toggle-icon { transform: rotate(180deg); }
.gg-athlete-season__toggle-text--hide { display: none; }
.gg-athlete-season[open] .gg-athlete-season__toggle-text--show { display: none; }
.gg-athlete-season[open] .gg-athlete-season__toggle-text--hide { display: inline; }
.gg-athlete-season__body {
  padding: 8px 0 16px;
}
.gg-athlete-season__body > .gg-event-card:first-child { margin-top: 0; }


/* 2026-05-11 follow-up — .gg-ncaa-detail__* — styling for per-NCAA-meet
   detail pages at /competitions/<ncaa-slug>/. Three blocks:
     .gg-ncaa-detail__standings — the team standings table
     .gg-ncaa-detail__lineups   — wrapper around per-team lineup sections
     .gg-ncaa-detail__team      — one team's apparatus-grouped lineups
   Builds on existing .gg-table + .gg-event-card vocabulary so this
   page reads as part of the same design system. */

.gg-ncaa-detail__standings {
  margin: var(--gg-space-6) 0;
}
.gg-ncaa-detail__standings h2,
.gg-ncaa-detail__lineups h2 {
  margin-top: 0;
  margin-bottom: var(--gg-space-3);
}
.gg-table--standings {
  width: 100%;
  border-collapse: collapse;
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  border-radius: 8px;
  overflow: hidden;
}
.gg-table--standings th,
.gg-table--standings td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
}
.gg-table--standings tbody tr:last-child td { border-bottom: none; }
.gg-table--standings th {
  color: rgba(255, 215, 0, 0.7);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.18);
}
.gg-table__num {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap;
}
.gg-table--standings tbody tr:hover {
  background: rgba(255, 215, 0, 0.03);
}

.gg-ncaa-detail__lineups {
  margin: var(--gg-space-6) 0;
}
.gg-ncaa-detail__team {
  margin-bottom: var(--gg-space-5);
}
.gg-ncaa-detail__team-h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: var(--gg-space-4) 0 var(--gg-space-2);
  font-size: 17px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
}
.gg-ncaa-detail__place {
  color: var(--gg-color-medal-gold);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}
.gg-ncaa-detail__team-name { flex: 1; }
.gg-ncaa-detail__team-total {
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}
.gg-ncaa-detail__team .gg-event-card { margin-bottom: 8px; }
.gg-ncaa-detail__team .gg-event-card__title { font-size: 14px; }


.gg-meet-section h2 {
  /* Match the heading rhythm of other sections (.gg-skills, .gg-ncaa,
     .gg-otd-anchor) — gold uppercase via the page's default h2 styling
     in the athlete-profile context. */
}
.gg-meet-section__count {
  color: rgba(255, 215, 0, 0.6);
  font-weight: 500;
  font-size: 0.55em;     /* relative to h2 font-size, reads as a subhead */
  letter-spacing: 0.02em;
  text-transform: none;  /* override h2 uppercase if present */
  margin-left: 8px;
  white-space: nowrap;
}


/* 5.40 ── NCAA postseason on Competitions page (.gg-ncaa-season +
            .gg-ncaa-round-group) ─────────────────────────────────────
   audit-NCAA-cleanup 2026-05-10. Replaces the prior per-season
   gg-era-band wrapper that stacked all 12-22 meets in a flat 3-column
   grid (the "jumble of meets" the owner flagged 2026-05-10). Each
   season is now a native <details>/<summary> element — all collapsed
   by default — and an expanded season groups its meets under three
   or four h3 sub-headings (Finals / Semifinals / Regionals /
   Qualifying).

   Token usage: --gg-color-medal-gold / --gg-color-surface-2 /
   --gg-color-border / --gg-color-text-{primary,muted} /
   --gg-space-{2..5} / --gg-radius-{md,pill}. No new tokens.
   ───────────────────────────────────────────────────────────────────── */

.gg-ncaa-season {
  border-top: 1px solid var(--gg-color-border);
  padding: 0;
}
.gg-ncaa-season:first-of-type { border-top: none; }
/* 2026-05-11 Issue-4 fix: when this <details> is the URL target (e.g.,
   arriving from an athlete page's NCAA meet link to `#season-2025`),
   the user-agent toggles :target — we use it to force-open the
   season block and visually highlight it for ~2s. The athlete page
   builds its NCAA meet links as `/competitions/ncaa-postseason/#season-<yr>`,
   so this rule guarantees the target section is open on arrival. */
.gg-ncaa-season:target[open],
.gg-ncaa-season:target {
  /* Force-open is achieved via the open attribute being set by the
     anchor — but a sibling rule isn't enough. Use scroll-margin and
     a brief highlight to make the landing obvious. */
  scroll-margin-top: 24px;
  animation: gg-ncaa-season-flash 2s ease-out 1;
}
@keyframes gg-ncaa-season-flash {
  0%   { background: rgba(255, 215, 0, 0.18); }
  100% { background: transparent; }
}

.gg-ncaa-season__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--gg-space-4) var(--gg-space-2);
  display: flex;
  align-items: center;
  gap: var(--gg-space-3);
  flex-wrap: wrap;
  user-select: none;
  border-radius: var(--gg-radius-md);
  transition: background var(--gg-duration-fast, 0.15s) var(--gg-ease, ease);
}
.gg-ncaa-season__summary::-webkit-details-marker { display: none; }
.gg-ncaa-season__summary::marker { display: none; }
.gg-ncaa-season__summary:hover { background: rgba(255, 215, 0, 0.04); }
.gg-ncaa-season__summary:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
  background: rgba(255, 215, 0, 0.04);
}

.gg-ncaa-season__year {
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 56px;
}
.gg-ncaa-season__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gg-color-text-primary);
}
.gg-ncaa-season__meta {
  color: var(--gg-color-text-muted);
  font-size: 13px;
  flex: 1;
}

/* "Show meets / Hide meets" pill — replaces a bare chevron with a
   labeled affordance so cold users immediately read what the row
   does. Pill borrows the chip-row visual vocabulary already used by
   the comps filter chips above; on hover it lights gold. The two
   label spans are mutually-toggled by the [open] attribute on the
   parent <details> (no JS). */
.gg-ncaa-season__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--gg-color-text-primary);
  background: var(--gg-color-surface-2);
  transition: background var(--gg-duration-fast, 0.15s) var(--gg-ease, ease),
              border-color var(--gg-duration-fast, 0.15s) var(--gg-ease, ease),
              color var(--gg-duration-fast, 0.15s) var(--gg-ease, ease);
  margin-left: auto;
  white-space: nowrap;
}
.gg-ncaa-season__summary:hover .gg-ncaa-season__toggle {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
  background: rgba(255, 215, 0, 0.06);
}
.gg-ncaa-season__summary:focus-visible .gg-ncaa-season__toggle {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
}
.gg-ncaa-season__toggle-icon {
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.gg-ncaa-season[open] .gg-ncaa-season__toggle-icon {
  transform: rotate(180deg);
}
/* Visibility swap — "Show meets" when collapsed, "Hide meets" when
   expanded. CSS-only, no JS round-trip. */
.gg-ncaa-season .gg-ncaa-season__toggle-text--hide { display: none; }
.gg-ncaa-season[open] .gg-ncaa-season__toggle-text--show { display: none; }
.gg-ncaa-season[open] .gg-ncaa-season__toggle-text--hide { display: inline; }

/* Body visibility is controlled by author CSS, not relying on the UA
   stylesheet — modern Chromium uses `::details-content` with
   content-visibility instead of the older
   `details:not([open]) > *:not(summary) { display: none }`, so the
   scoped-to-[open] fix alone wasn't sufficient on first hotfix
   2026-05-10. Belt-and-suspenders: explicitly hide when closed,
   explicitly lay out when open. */
.gg-ncaa-season:not([open]) > .gg-ncaa-season__body {
  display: none;
}
.gg-ncaa-season[open] > .gg-ncaa-season__body {
  padding: var(--gg-space-3) 0 var(--gg-space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-5);
}

/* Round group inside an expanded season — Finals / Semifinals /
   Regionals / Qualifying. Mirrors the .gg-era-band's two-column
   "label column + body grid" pattern at desktop width so the NCAA
   section reads as one visual family with the era bands above. */
.gg-ncaa-round-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
}
.gg-ncaa-round-group__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gg-color-medal-gold);
}
.gg-ncaa-round-group__count {
  color: var(--gg-color-text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.gg-ncaa-round-group__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
}
@media (min-width: 768px) {
  .gg-ncaa-round-group {
    grid-template-columns: 140px 1fr;
    gap: var(--gg-space-5);
    align-items: start;
  }
  .gg-ncaa-round-group__label { padding-top: 6px; }
  .gg-ncaa-round-group__body { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .gg-ncaa-round-group__body { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: the meta line wraps under the year/title to keep the
   summary row from overflowing on narrow viewports. The toggle pill
   stays right-aligned so the affordance stays visible. */
@media (max-width: 600px) {
  .gg-ncaa-season__summary { gap: var(--gg-space-2); }
  .gg-ncaa-season__meta {
    flex-basis: 100%;
    order: 4;
    padding-left: 64px;
    margin-top: 4px;
    font-size: 12px;
  }
  .gg-ncaa-season__toggle { font-size: 12px; padding: 5px 10px; }
}


/* 5.41 ── Competitions type-first redesign — sub-nav, overview cards,
            type-page hero, decade collapsibles ─────────────────────────
   2026-05-10. Replaces the prior single-page competitions render with
   a tabbed-nav IA: /competitions/ as a landing page + four type pages
   at /competitions/{olympics,worlds,continental,ncaa-postseason}/.
   Each type page collapses cards by decade (one-level <details>);
   NCAA preserves its per-season collapsibles (§5.40).

   New class prefixes deliberately chosen to avoid the .gg-ncaa-season
   §5.38↔§5.40 collision pattern:
     .gg-comp-subnav       — sticky tab strip below the site header
     .gg-overview-card     — landing-page type entry card
     .gg-type-hero         — type-page hero band
     .gg-decade            — decade-level collapsible on type pages

   Token-only (no new tokens introduced). Belt-and-suspenders
   `:not([open]) > __body { display: none }` mirrors the §5.40 lesson —
   modern Chromium uses ::details-content not the older UA selector,
   so author CSS must explicitly hide.
   ───────────────────────────────────────────────────────────────────── */

/* ── Sub-nav tab strip ── */
.gg-comp-subnav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--gg-color-plum-900);
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
  margin: 0 calc(-1 * var(--gg-space-5)) var(--gg-space-5);
  padding: 0 var(--gg-space-5);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.gg-comp-subnav::-webkit-scrollbar { display: none; }
.gg-comp-subnav__tab {
  display: inline-flex;
  align-items: center;
  padding: var(--gg-space-3) var(--gg-space-4);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  transition: color var(--gg-duration-fast) var(--gg-ease),
              border-color var(--gg-duration-fast) var(--gg-ease);
}
.gg-comp-subnav__tab:hover { color: #fff; }
.gg-comp-subnav__tab:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: -2px;
  color: var(--gg-color-medal-gold);
}
.gg-comp-subnav__tab.is-current,
.gg-comp-subnav__tab[aria-current="page"] {
  color: var(--gg-color-medal-gold);
  border-bottom-color: var(--gg-color-medal-gold);
}
@media (max-width: 599px) {
  .gg-comp-subnav {
    margin-left: calc(-1 * var(--gg-space-3));
    margin-right: calc(-1 * var(--gg-space-3));
    padding: 0 var(--gg-space-3);
  }
  .gg-comp-subnav__tab {
    padding: var(--gg-space-2) var(--gg-space-3);
    font-size: 12.5px;
  }
}

/* ── Landing-page type-card grid ── */
.gg-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-3);
  margin: var(--gg-space-5) 0;
}
@media (min-width: 768px) {
  .gg-overview-grid { grid-template-columns: repeat(2, 1fr); }
}
.gg-overview-card {
  display: flex;
  flex-direction: column;
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-5);
  text-decoration: none;
  color: var(--gg-color-text-primary);
  transition: transform var(--gg-duration-base) var(--gg-ease),
              box-shadow var(--gg-duration-base) var(--gg-ease),
              border-color var(--gg-duration-base) var(--gg-ease);
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.gg-overview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%,
                              rgba(255, 215, 0, 0.08), transparent 50%);
  pointer-events: none;
}
.gg-overview-card > * { position: relative; }
.gg-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gg-shadow-md);
  border-color: rgba(255, 215, 0, 0.3);
}
.gg-overview-card:focus-visible {
  outline: 3px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
}
.gg-overview-card--marquee {
  border-left: 3px solid var(--gg-color-medal-gold);
}
.gg-overview-card__eyebrow {
  font-size: 11px;
  color: var(--gg-color-medal-gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-bottom: var(--gg-space-2);
}
.gg-overview-card__title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 0 var(--gg-space-2);
  line-height: 1.15;
}
.gg-overview-card__sub {
  font-size: 14px;
  color: var(--gg-color-text-muted);
  margin: 0 0 var(--gg-space-4);
  line-height: 1.5;
  flex: 1;
}
.gg-overview-card__cta {
  font-size: 13px;
  color: var(--gg-color-medal-gold);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* "Most recent" strip on the landing page */
.gg-overview-recent {
  margin-top: var(--gg-space-7);
}
.gg-section-h {
  font-size: 22px;
  color: var(--gg-color-medal-gold);
  margin: 0 0 var(--gg-space-2);
  letter-spacing: -0.01em;
}
.gg-section-h__sub {
  font-size: 14px;
  color: var(--gg-color-text-muted);
  margin: 0 0 var(--gg-space-4);
  max-width: 60ch;
}
/* L18 (2026-05-26) sub-section heading inside a .gg-section-h section.
   Used for the per-discipline roster split on dual-program NCAA teams
   (Oklahoma, Stanford, etc.) — same gold color as .gg-section-h but
   smaller font + top-margin so it reads as a sibling sub-heading. */
.gg-section-h--sub {
  font-size: 17px;
  margin: var(--gg-space-5) 0 var(--gg-space-2);
}
/* L18 — "See full women's/men's program →" overflow link on the
   combined-roster main page of dual-program teams. */
.gg-team-roster__more {
  margin: var(--gg-space-2) 0 0;
  font-size: 14px;
}
.gg-team-roster__more a {
  color: var(--gg-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gg-team-roster__more a:hover {
  color: var(--gg-color-medal-gold);
}
.gg-recent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-2);
}
@media (min-width: 768px) {
  .gg-recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .gg-recent-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Type-page hero (for /competitions/{type}/) ── */
.gg-type-hero {
  background: var(--gg-gradient-hero);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  padding: var(--gg-space-6) var(--gg-space-5);
  margin: var(--gg-space-5) 0 var(--gg-space-4);
  position: relative;
  overflow: hidden;
  box-shadow: var(--gg-shadow-md);
}
.gg-type-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%,
                              rgba(255, 215, 0, 0.10), transparent 55%);
  pointer-events: none;
}
.gg-type-hero > * { position: relative; }
.gg-type-hero__title {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin: 0 0 var(--gg-space-2);
  line-height: 1.05;
}
@media (min-width: 768px) {
  .gg-type-hero__title { font-size: 48px; }
}
.gg-type-hero__sub {
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  max-width: 60ch;
  margin: 0 0 var(--gg-space-4);
  line-height: 1.45;
}
@media (min-width: 768px) {
  .gg-type-hero__sub { font-size: 17px; }
}
.gg-type-hero__stats {
  display: flex;
  gap: var(--gg-space-5);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gg-color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--gg-space-3);
}
.gg-type-hero__stats strong {
  color: var(--gg-color-medal-gold);
  font-weight: 700;
}
.gg-type-hero__stats-disc {
  font-style: italic;
  opacity: 0.85;
}

/* Optional lede paragraph block — used by Worlds, Continental, NCAA */
.gg-type-lede {
  margin: var(--gg-space-4) 0 var(--gg-space-5);
  padding: var(--gg-space-4) var(--gg-space-5);
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: 0 var(--gg-radius-sm) var(--gg-radius-sm) 0;
}
.gg-type-lede p {
  margin: 0;
  font-size: 14px;
  color: var(--gg-color-text-muted);
  line-height: 1.55;
  max-width: 70ch;
}
.gg-type-lede strong { color: var(--gg-color-text-primary); }

/* ── Decade-level collapsible (one click level on type pages) ── */
.gg-decades {
  margin-top: var(--gg-space-5);
}
.gg-decade {
  border-top: 1px solid var(--gg-color-border);
}
.gg-decade:first-of-type { border-top: none; }
.gg-decade__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--gg-space-4) var(--gg-space-2);
  display: flex;
  align-items: center;
  gap: var(--gg-space-3);
  flex-wrap: wrap;
  user-select: none;
  border-radius: var(--gg-radius-md);
  transition: background var(--gg-duration-fast) var(--gg-ease);
}
.gg-decade__summary::-webkit-details-marker { display: none; }
.gg-decade__summary::marker { display: none; }
.gg-decade__summary:hover { background: rgba(255, 215, 0, 0.04); }
.gg-decade__summary:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
  background: rgba(255, 215, 0, 0.04);
}
.gg-decade__label {
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 56px;
}
.gg-decade__meta {
  color: var(--gg-color-text-muted);
  font-size: 13px;
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.gg-decade__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--gg-color-text-primary);
  background: var(--gg-color-surface-2);
  white-space: nowrap;
  margin-left: auto;
  transition: background var(--gg-duration-fast) var(--gg-ease),
              border-color var(--gg-duration-fast) var(--gg-ease),
              color var(--gg-duration-fast) var(--gg-ease);
}
.gg-decade__summary:hover .gg-decade__toggle,
.gg-decade__summary:focus-visible .gg-decade__toggle {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
  background: rgba(255, 215, 0, 0.06);
}
.gg-decade__toggle-icon {
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.gg-decade[open] .gg-decade__toggle-icon {
  transform: rotate(180deg);
}
.gg-decade .gg-decade__toggle-text--hide { display: none; }
.gg-decade[open] .gg-decade__toggle-text--show { display: none; }
.gg-decade[open] .gg-decade__toggle-text--hide { display: inline; }

/* Belt-and-suspenders: explicitly hide body when closed (don't trust
   the UA stylesheet across browser versions — modern Chromium uses
   ::details-content with content-visibility, not display:none). Same
   lesson as §5.40. */
.gg-decade:not([open]) > .gg-decade__body { display: none; }
.gg-decade[open] > .gg-decade__body {
  display: block;
  padding: 0 0 var(--gg-space-5);
}
.gg-decade__caption {
  margin: 0 0 var(--gg-space-3);
  font-size: 13px;
  color: var(--gg-color-text-muted);
  line-height: 1.55;
  max-width: 64ch;
}
.gg-decade__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gg-space-2);
}
@media (min-width: 768px) {
  .gg-decade__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .gg-decade__cards { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile tighten — meta line wraps under label so the toggle pill
   stays visible on the right edge. */
@media (max-width: 600px) {
  .gg-decade__summary { gap: var(--gg-space-2); }
  .gg-decade__meta {
    flex-basis: 100%;
    order: 4;
    padding-left: 64px;
    margin-top: 4px;
    font-size: 12px;
  }
  .gg-decade__toggle {
    font-size: 12px;
    padding: 5px 10px;
  }
}


/* 5.42 ── Competitions type-page toolbar (search + discipline dropdown)
            v2 — 2026-05-10 ──────────────────────────────────────────────
   Owner feedback on v1: search disappeared on type pages, no filter
   was wired. v2 adds a single toolbar row below the sub-nav on every
   type page. The search input reuses #comps-q so the existing
   competitions-search.js autocomplete attaches without code changes.
   Discipline narrowing is a native <select> per owner preference over
   chip pills (chips would be too big across 5 disciplines × N
   decades × the existing sub-nav chip-style language).

   Token-only. No new tokens introduced.
   ───────────────────────────────────────────────────────────────────── */

.gg-comp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-3);
  align-items: center;
  margin: 0 0 var(--gg-space-5);
}
.gg-comp-toolbar .gg-search--filter {
  /* Trim the search-form margin since the toolbar gap handles spacing. */
  margin-top: 0;
  margin-bottom: 0;
  flex: 1 1 360px;
  max-width: 540px;
}
.gg-comp-toolbar__status {
  margin: 0;
  font-size: 12px;
  color: var(--gg-color-text-muted);
  font-style: italic;
  flex-basis: 100%;
}

.gg-comp-filterbar {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  padding: 4px 6px 4px 14px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: var(--gg-radius-pill);
  flex: 0 0 auto;
}
.gg-comp-filterbar:focus-within {
  border-color: var(--gg-color-medal-gold);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22);
}
.gg-comp-filterbar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gg-color-medal-gold);
  white-space: nowrap;
}
.gg-comp-filterbar__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--gg-color-surface-2);
  color: var(--gg-color-text-primary);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-pill);
  padding: 8px 32px 8px 14px;
  font-family: var(--gg-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  /* Custom chevron rendered via background-image so the native arrow
     is hidden across browsers — keeps the pill shape consistent with
     the rest of the design vocabulary. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12' fill='none' stroke='%23FFD700' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 8 11 13 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color var(--gg-duration-fast) var(--gg-ease),
              color var(--gg-duration-fast) var(--gg-ease);
}
.gg-comp-filterbar__select:hover {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
}
.gg-comp-filterbar__select:focus {
  outline: none;
  border-color: var(--gg-color-medal-gold);
}
.gg-comp-filterbar__select::-ms-expand { display: none; }

@media (max-width: 600px) {
  .gg-comp-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gg-space-2);
  }
  .gg-comp-toolbar .gg-search--filter {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .gg-comp-filterbar {
    align-self: flex-start;
  }
  .gg-comp-toolbar__status {
    margin-top: 4px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §8 — v1.6 D3 append-only block
   New classes that were referenced by build_site.py templates but had no
   styling rule. Append-only by convention so the file diff against v1.4
   reads as additive. Order: pagination → skills → otd-anchor → page-section
   → 404 → coverage-grid → table-hover-revert.
   ───────────────────────────────────────────────────────────────────────── */

/* §8.1 .gg-pagination__* ─────────────────────────────────────────────
   Distinct from §5.19 .gg-pagination (the wrapper). These are the
   inner controls + numeric/prev/next links emitted by the Python
   pagination helper. 44×44 minimum touch target so mobile thumbs
   land cleanly. Active = gold rail + gold text + default cursor.
   Disabled = 40% opacity + pointer-events:none. */
.gg-pagination__controls {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  flex-wrap: wrap;
}
.gg-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--gg-space-3);
  background: var(--gg-color-surface-1);
  color: var(--gg-color-text-primary);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-pill);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.gg-pagination__link:hover {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
}
.gg-pagination__link.gg-chip--active,
.gg-pagination__link.gg-chip--current,
.gg-pagination__link[aria-current="page"] {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
  cursor: default;
  pointer-events: none;
}
.gg-pagination__link--disabled,
.gg-pagination__link[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
.gg-pagination__link--prev,
.gg-pagination__link--next {
  padding-left: var(--gg-space-3);
  padding-right: var(--gg-space-3);
  min-width: 56px;
  letter-spacing: 0.02em;
}
.gg-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  color: var(--gg-color-text-muted);
  letter-spacing: 0.12em;
  font-size: 14px;
}

/* §8.2 .gg-skills + companion .gg-otd-anchor ────────────────────────
   "Boxed surface-1 wrapper with a coloured rail" pattern. Skills
   block uses a gold rail (it's the eponymous-skills + signature-events
   box on athlete profiles — gold reads as "achievement"). The OTD
   anchor block uses a link-tone rail (it's a paired companion block
   on On-This-Day pages — pink reads as "context"). */
.gg-skills {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-4) var(--gg-space-5);
  margin: var(--gg-space-4) 0;
}
.gg-skills > h2,
.gg-skills > h3 {
  color: var(--gg-color-medal-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--gg-space-2);
}
.gg-skills__summary {
  color: var(--gg-color-text-primary);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 var(--gg-space-2);
}
.gg-skills__note {
  color: var(--gg-color-text-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}
.gg-otd-anchor {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-left: 3px solid var(--gg-color-link);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-4) var(--gg-space-5);
  margin: var(--gg-space-4) 0;
}
.gg-otd-anchor > h2,
.gg-otd-anchor > h3 {
  color: var(--gg-color-link);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--gg-space-2);
}
.gg-otd-anchor__summary {
  color: var(--gg-color-text-primary);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.gg-otd-anchor__note {
  color: var(--gg-color-text-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  margin: var(--gg-space-2) 0 0;
}

/* §8.3 .gg-page-section — 64ch prose container ──────────────────────
   Used on About / Glossary / Methodology pages. Sets the max-width
   to 64ch so body copy stays scannable, then re-establishes the
   typographic rhythm for h1/h2/p/ul/ol that .gg-prose set up but with
   slightly tighter spacing for these structured pages. */
.gg-page-section {
  max-width: 64ch;
  margin: 0 auto;
  padding: var(--gg-space-6) 0;
  color: var(--gg-color-text-primary);
}
.gg-page-section h1 {
  font-size: var(--gg-text-h1);
  margin: 0 0 var(--gg-space-3);
  line-height: 1.15;
}
.gg-page-section h2 {
  font-size: var(--gg-text-h2);
  margin: var(--gg-space-6) 0 var(--gg-space-2);
  line-height: 1.2;
}
.gg-page-section p {
  margin: 0 0 var(--gg-space-3);
  font-size: 16px;
  line-height: 1.65;
  color: var(--gg-color-text-muted);
}
.gg-page-section p strong { color: var(--gg-color-text-primary); }
.gg-page-section ul,
.gg-page-section ol {
  margin: 0 0 var(--gg-space-4);
  padding-left: var(--gg-space-5);
  color: var(--gg-color-text-muted);
}
.gg-page-section li { margin-bottom: var(--gg-space-2); line-height: 1.6; }

/* §8.4 .gg-404 — gold-rail boxed error card ────────────────────────
   404 / 410 / static-error pages. Centered card on a surface-1
   panel with a gold rail to match the design vocabulary. */
.gg-404 {
  max-width: 56ch;
  margin: var(--gg-space-7) auto;
  padding: var(--gg-space-6);
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: var(--gg-radius-md);
  text-align: center;
}
.gg-404 h1 {
  color: var(--gg-color-medal-gold);
  font-size: 28px;
  margin: 0 0 var(--gg-space-3);
}
.gg-404 p {
  color: var(--gg-color-text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 var(--gg-space-3);
}

/* §8.5 .coverage-grid — KPI grid for About / coverage stats ───────
   4-column ≥768px, 2-column below. Each cell is a .gg-stat-style
   tile (already styled as .gg-stat globally — we just enforce the
   grid here without redefining the cell). */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gg-space-3);
  margin: var(--gg-space-4) 0;
}
@media (min-width: 768px) {
  .coverage-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.coverage-grid .gg-stat {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-3) var(--gg-space-4);
  text-align: center;
}

/* §8.6 .gg-table hover revert (D11) ─────────────────────────────────
   Static .gg-table (not .gg-table--interactive) was inheriting a row
   hover bg from a global selector. Static results tables don't need
   the affordance — only sortable/clickable ones do. Revert. */
.gg-table:not(.gg-table--interactive) tbody tr:hover td {
  background: transparent;
}

/* §8.7 .gg-keep-exploring — profile-page peer-rails zone ─────────────
   2026-05-11. Sits between the On-This-Day section and Sources on every
   athlete profile page. Hosts two .gg-rail blocks (country peers + era
   peers) under a single zone heading "Keep exploring." Per IA spec at
   _drafts/2026-05-10_profile_exploration_sections_ia_spec.md.
   Minimal styling: zone heading rhythm + extra top margin to separate
   it from the On-This-Day block above. The .gg-rail + .gg-named-card
   pattern inside it inherits all existing styling. */
.gg-keep-exploring {
  margin: var(--gg-space-7) 0 var(--gg-space-5);
}
.gg-keep-exploring > h2 {
  font-size: var(--gg-text-h2);
  color: var(--gg-color-text-primary);
  margin: 0 0 var(--gg-space-4);
}
.gg-keep-exploring .gg-rail__header {
  margin-top: var(--gg-space-5);
}
.gg-keep-exploring .gg-rail__header:first-of-type {
  margin-top: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   End of design-system.css v1.6 (was v1.4 → v1.6; v1.5 was claimed but
   never landed — see header changelog).

   v1.6 (2026-05-10) churn (B-redo CSS regression resync):
     ADDED:
       --gg-color-link token (#EBB3C2)
       §8 D3 append-only block (~210 LOC):
         .gg-pagination__controls / __link (+ states) / __ellipsis
         .gg-skills + .gg-otd-anchor (paired companion blocks)
         .gg-page-section (64ch prose container)
         .gg-404
         .coverage-grid (4-col ≥768px / 2-col below)
         .gg-table:not(.gg-table--interactive) tbody tr:hover td revert
       .gg-skeleton reduced-motion override (in §7)
       .gg-otd-hero__og display:none override (suppresses debug placeholder)
       .gg-header__signin:focus-visible — split out, gold outline restored
     RE-TOKENED (plum-500 → contrast-clear alternative):
       global a {} → var(--gg-color-link)
       .gg-empty-state__icon → var(--gg-color-link)
       .gg-provenance a → var(--gg-color-link)
       .gg-hero__subtitle → rgba(255,255,255,0.86)
       .gg-otd-hero__context → rgba(255,255,255,0.86)
     PRESERVED (plum-500 retained — non-text decorative use):
       .gg-defining-stat--plum .gg-defining-stat__value
       .gg-score-with-era__era--open
       gradient stops (avatar, era-band, etc.)
       hover border colors (.gg-meet-card, .otd-support-row, etc.)
       --gg-tier-color-ncaa fallback
     UPDATED:
       .gg-search__input outline:0 → 2px transparent (HCM repaint)

   v1.3 (2026-05-04) churn:
     PROMOTED from wireframe page-local CSS:
       .gg-pub-link + .is-current + [aria-current="page"] + --ask  (~50 LOC, in §4 Header)
       Publication-style .gg-header solid plum-900 + 2-stop wordmark gradient (D10/D11)
     REMOVED:
       .gg-nav-chip + --current + --accent  (D14)
       .gg-watermark + --dense + media       (D16)
       .gg-footer--three-col + .gg-footer__*  (D15)
     RETAINED from v1.2: F/M tag tokens + classes; rem-based type scale;
       11px micro reservation policy; .gg-header__hamburger + sheet (D13).
     UPDATED: narrow-mobile media query references .gg-pub-link (was .gg-nav-chip).

   Token count: 51 (50 + --gg-color-link).
   Component count: ~37 (~30 in v1.4 + 7 D3 components).
   ───────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────
   B23 / T20 (Josh ruling 2026-05-12) — .gg-comp-list / .gg-comp-list__*
   Flat chronological competitions list at /competitions/list/. Minimal
   styling: year-grouped sections, link-per-meet, muted meta. Reuses
   tokens; no new vars.
   ───────────────────────────────────────────────────────────────────── */
.gg-comp-list { margin-top: var(--gg-space-5); }
.gg-comp-list__year { margin-bottom: var(--gg-space-5); }
.gg-comp-list__year-h {
  font-size: var(--gg-text-h3);
  color: var(--gg-color-medal-gold);
  margin: 0 0 var(--gg-space-3);
  font-weight: 700;
}
.gg-comp-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-2);
}
.gg-comp-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gg-space-3);
  padding: var(--gg-space-2) 0;
  border-bottom: 1px solid var(--gg-color-border);
}
.gg-comp-list__link {
  color: var(--gg-color-text-primary);
  text-decoration: none;
  font-weight: 600;
}
.gg-comp-list__link:hover,
.gg-comp-list__link:focus-visible {
  color: var(--gg-color-medal-gold);
  text-decoration: underline;
}
.gg-comp-list__link--pending {
  color: var(--gg-color-text-muted);
  font-style: italic;
  font-weight: 400;
}
.gg-comp-list__meta {
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-small);
}


/* ─────────────────────────────────────────────────────────────────────
   B23 / D10 (Josh ruling 2026-05-12) — Inline-style strip utilities.
   Three classes that replace recurring `style="…"` attributes in
   template emits across homepage / about / medals / athletes / OTD /
   glossary. Goal: zero inline `style=` in shipped HTML (with the
   exception of dynamic values like decade-caption colors that genuinely
   need to be inline).

   `.gg-note--muted` — small muted note text (replaces inline
       `style="color: var(--gg-color-text-muted); font-size: 13px; …"`).
   `.gg-tag--inline-after` — modifier for the dagger superscript pattern
       (replaces `style="margin-left:4px"` after a `.gg-tag`).
   `.gg-hero__title--restrained` — smaller/lighter variant of the
       `.gg-hero__title` used on the about-page lead (replaces inline
       `style="font-size:22px; font-weight:700; …"`).
   ───────────────────────────────────────────────────────────────────── */
.gg-note--muted {
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-small);
  margin-top: var(--gg-space-3);
  line-height: 1.5;
}
.gg-tag--inline-after { margin-left: var(--gg-space-1); }
.gg-hero__title--restrained {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* D10 — about-page narrow-prose lead/sub/cta. The about page is restrained
   by design (per Josh's direction) — short lead, max 62ch column, dad/
   daughter framing. These three classes pull the about-wireframe inline
   styles out of the rendered HTML. */
.gg-about__lead { max-width: 62ch; margin: var(--gg-space-2) 0 var(--gg-space-3); }
.gg-about__sub {
  font-size: var(--gg-text-body);
  color: var(--gg-color-text-muted);
  max-width: 62ch;
  margin: 0;
}
.gg-about__cta-row { margin-top: var(--gg-space-7); }

/* D10 — generic text-color utility for one-off accents. Used by the
   homepage hero's "And thousands you should." span and the decade-caption
   "Perfect-10 era ends in 2006" call-out. Static color (medal-gold);
   distinct from the dynamic-color inline-styles carve-out. */
.gg-text-medal-gold { color: var(--gg-color-medal-gold); }

/* D10 — `.gg-stat__value--lg` modifier for the 28px stat-value variant
   (3 sites on competition-detail pages). Reuses `.gg-stat__value` base
   styling, just bumps the size. */
.gg-stat__value--lg { font-size: var(--gg-text-stat); }

/* D10 — `.gg-otd-hero__cta-row` flex row of CTAs under the OTD hero.
   Replaces an inline `style="margin-top: var(--gg-space-5); display:flex;
   flex-wrap:wrap; gap: var(--gg-space-2);"` on the wrapper div. */
.gg-otd-hero__cta-row {
  margin-top: var(--gg-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-2);
}

/* D10 — `.apparatus-section__body` is the inner-padding wrapper inside
   competition-detail `<details>` apparatus blocks. Was an inline padding
   style on a generic div; now a class so the rule lives with its siblings. */
.apparatus-section__body { padding: 0 var(--gg-space-5) var(--gg-space-5); }

/* D10 — `.gg-empty-state` for the no-results card used by athletes filter
   pages when a country×discipline×era combo has zero matches. Replaces
   the inline text-align + padding combo on a `.gg-card`. */
.gg-empty-state {
  text-align: center;
  padding: var(--gg-space-7) var(--gg-space-5);
}
.gg-empty-state__title {
  font-size: var(--gg-text-h3);
  font-weight: 700;
  color: var(--gg-color-text-primary);
  margin-bottom: var(--gg-space-2);
}
.gg-empty-state__body {
  color: var(--gg-color-text-muted);
  margin-bottom: var(--gg-space-4);
}

/* D10 — `.gg-otd-support__h` + `__count`: the H2 + supporting-count span
   on the OTD page's support entries section. Replaces inline font/weight
   styling on both elements. */
.gg-otd-support__h {
  font-size: var(--gg-text-h3);
  font-weight: 700;
  color: var(--gg-color-text-primary);
  margin: var(--gg-space-6) 0 var(--gg-space-3);
  letter-spacing: -0.01em;
}
.gg-otd-support__count {
  font-size: var(--gg-text-small);
  font-weight: 500;
  color: var(--gg-color-text-muted);
  margin-left: var(--gg-space-2);
}

/* D10 — `.gg-link--gold` for the "Sort Z–A" / "see all" affordances on
   the athletes index. Replaces inline `style="color: var(--gg-color-medal-gold);
   margin-left: 8px;"`. */
.gg-link--gold {
  color: var(--gg-color-medal-gold);
  margin-left: var(--gg-space-2);
}

/* D10 — `.gg-kbd` keyboard-key chip (mono + bordered + small-rounded).
   Replaces inline font/background/border styling on the `<kbd>` used in
   the athletes search hint to show the `/` focus shortcut. */
.gg-kbd {
  font-family: var(--gg-font-mono);
  font-size: var(--gg-text-micro);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1px 5px;
  border-radius: var(--gg-radius-sm);
}


/* ─────────────────────────────────────────────────────────────────────
   B23 / D23 (Josh ruling 2026-05-12) — single-table medals page.
   Replaces the prior `<table>` + duplicate `<ul class="gg-table-cards">`
   pattern (where one was hidden via display:none per viewport) with a
   single `<table class="gg-medals-table">`. On mobile (≤767px) the
   table is restyled into a card-stack via display:block on tr/td plus
   ::before pseudo-elements that pick up the column label from each td's
   `data-label="…"` attribute. SR users read each row once, not twice.
   ───────────────────────────────────────────────────────────────────── */
.gg-medals-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gg-color-surface-1);
}
.gg-medals-table th,
.gg-medals-table td {
  padding: var(--gg-space-3) var(--gg-space-4);
  text-align: left;
  border-bottom: 1px solid var(--gg-color-border);
}
.gg-medals-table th {
  color: var(--gg-color-text-muted);
  font-weight: 600;
  font-size: var(--gg-text-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gg-medals-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.gg-medals-table .gg-medals-table__rank {
  color: var(--gg-color-text-muted);
  font-variant-numeric: tabular-nums;
  width: 3rem;
}
.gg-medals-table .gg-medals-table__total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gg-medals-table__noc-link {
  color: var(--gg-color-text-primary);
  font-weight: 600;
  text-decoration: none;
}
.gg-medals-table__noc-link:hover,
.gg-medals-table__noc-link:focus-visible {
  color: var(--gg-color-medal-gold);
  text-decoration: underline;
}
/* D10 — `.gg-callout--note` modifier: subtle inset note used on the medals
   page data-window callout. Replaces the inline
   `style="background:rgba(...); border-left: 3px solid …"` block. */
.gg-callout--note {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--gg-color-text-muted);
  padding: var(--gg-space-3) var(--gg-space-4);
  margin: var(--gg-space-4) 0;
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-small);
}
@media (max-width: 767px) {
  /* L37.2 [medals-mobile-card-stack-rank-noc-treatment] 2026-06-03:
     each row reads as a medal-tile — rank badge top-left + NOC link as
     the bold card title + four medal label-value rows below — instead of
     a uniform 6-row label-value flex stack where the NOC name landed
     mid-card. Scoped to ≤767px; desktop (≥768px) table render untouched. */
  .gg-medals-table { border: 0; }
  .gg-medals-table thead {
    /* Visually hide but keep accessible to SR users. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  .gg-medals-table tr {
    display: block;
    margin-bottom: var(--gg-space-4);
    border: 1px solid var(--gg-color-border);
    border-radius: var(--gg-radius-md);
    padding: var(--gg-space-3);
    background: var(--gg-color-surface-1);
    /* Positioned context isn't strictly needed (badge flows inline with
       the NOC title row), but keep it for any future absolute corner
       treatment. */
    position: relative;
  }
  /* Rank → small circular badge. Intentionally NO `color` here so the
     .gg-table__place--gold/silver/bronze (specificity 0,1,0) classes on
     the rank <td> win for ranks 1-3; rank 4+ inherits the row's text
     color. A `color` declaration on this (0,2,0) selector would override
     the medal tint and flatten the badge. */
  .gg-medals-table .gg-medals-table__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--gg-radius-full, 999px);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 0 var(--gg-space-3) var(--gg-space-2) 0;
    padding: 0;
    text-align: center;
    border: 0;
  }
  .gg-medals-table .gg-medals-table__rank::before {
    /* No data-label prefix — the badge IS the rank. (Also covered by the
       narrowed td.gg-table__num::before below, but kept explicit.) */
    content: "";
    display: none;
  }
  /* NOC cell → block-level card title with a hairline separator below. */
  .gg-medals-table td[data-label="NOC"] {
    display: block;
    text-align: left;
    padding: 0 0 var(--gg-space-2) 0;
    border: 0;
    border-bottom: 1px solid var(--gg-color-border);
    margin-bottom: var(--gg-space-2);
  }
  .gg-medals-table td[data-label="NOC"]::before {
    content: "";
    display: none;
  }
  .gg-medals-table__noc-link {
    font-size: 1.125rem;   /* ~18px card title */
    font-weight: 700;
  }
  /* Medal cells (Gold / Silver / Bronze / Total) keep the label-value
     flex pattern. Narrowed from the old blanket `td` selector to
     `td.gg-table__num` so the new rank/NOC rules above aren't clobbered
     by the broad cascade. */
  .gg-medals-table td.gg-table__num {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
    padding: var(--gg-space-2) 0;
    border: 0;
  }
  .gg-medals-table td.gg-table__num::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--gg-color-text-muted);
    text-transform: uppercase;
    font-size: var(--gg-text-small);
    letter-spacing: 0.04em;
    margin-right: var(--gg-space-3);
    text-align: left;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   2026-05-14 — Full-site audit additions.
   Extend the existing design system with new components: calendar grid
   for /on-this-day/, secondary team-link on /medals/, teams-filter
   search box, medals sortable header indicators. All scoped tightly to
   avoid bleed into other surfaces.
   ───────────────────────────────────────────────────────────────────── */

/* ── /medals/ secondary "Team →" link ─────────────────────────────── */
.gg-medals-table__team-link {
  margin-left: 8px;
  font-size: var(--gg-text-small);
  color: var(--gg-color-text-muted);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 215, 0, 0.4);
  padding: 0 2px;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.gg-medals-table__team-link:hover,
.gg-medals-table__team-link:focus-visible {
  color: var(--gg-color-medal-gold, #FFD700);
  border-bottom-color: var(--gg-color-medal-gold, #FFD700);
}

/* ── L9B day-nav (prev/next + date picker) ────────────────────────────
   2026-05-23: retired .gg-cal* 12-month grid in favor of this 3-control
   row. Per `_drafts/2026-05-23_L9B_otd_phase_b_brief.md` § B.2. */
.gg-otd-day-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--gg-space-3);
  margin-top: var(--gg-space-6);
  padding: var(--gg-space-4) 0;
  border-top: 1px solid var(--gg-color-border);
}
.gg-otd-day-nav__form {
  display: flex;
  gap: var(--gg-space-2);
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 220px;
}
.gg-otd-day-nav__date-input {
  flex: 1 1 auto;
  min-width: 0;
}
.gg-otd-day-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 110px;
  flex: 0 0 auto;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
@media (max-width: 599px) {
  .gg-otd-day-nav { flex-direction: column; }
  .gg-otd-day-nav__form { order: 0; }
  .gg-otd-day-nav__arrow--prev { order: 1; }
  .gg-otd-day-nav__arrow--next { order: 2; }
}

/* ── /teams/ filter search box ────────────────────────────────────── */
.gg-teams-filter {
  margin: var(--gg-space-4) 0 var(--gg-space-5);
  display: flex;
  gap: var(--gg-space-3);
  align-items: stretch;
  flex-wrap: wrap;
}
.gg-teams-filter__input {
  flex: 1 1 320px;
  min-width: 240px;
  padding: 10px 14px;
  border: 1px solid var(--gg-color-border);
  border-radius: 999px;
  background: var(--gg-color-surface-2);
  color: var(--gg-color-text-strong, #F5F2F0);
  font: inherit;
}
.gg-teams-filter__input::placeholder { color: var(--gg-color-text-muted); }
.gg-teams-filter__input:focus-visible {
  border-color: var(--gg-color-medal-gold, #FFD700);
  outline: 2px solid rgba(255, 215, 0, 0.3);
  outline-offset: 1px;
}
.gg-teams-filter__count {
  align-self: center;
  font-size: var(--gg-text-small);
  color: var(--gg-color-text-muted);
}
/* L37.5 [teams-landing-tab-scope-unification]: the .gg-teams-filter__group-
   buttons pill row + its .gg-teams-filter__btn styling were removed — scope
   is now the three-tab ribbon (.gg-subnav--teams-tabs, §5.21). The search
   bar carries text-filter only. */
.gg-team-empty {
  margin: var(--gg-space-5) 0;
  padding: var(--gg-space-4);
  background: var(--gg-color-surface-1);
  border: 1px dashed var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  color: var(--gg-color-text-muted);
  text-align: center;
}

/* ── /medals/ sortable header indicators ──────────────────────────── */
.gg-medals-table th[data-sort-key] {
  cursor: pointer;
  user-select: none;
}
.gg-medals-table th[data-sort-key]::after {
  content: " \2195";
  opacity: 0.35;
  font-size: 0.85em;
}
.gg-medals-table th[aria-sort="ascending"]::after {
  content: " \2191";
  opacity: 1;
  color: var(--gg-color-medal-gold, #FFD700);
}
.gg-medals-table th[aria-sort="descending"]::after {
  content: " \2193";
  opacity: 1;
  color: var(--gg-color-medal-gold, #FFD700);
}


/* ─────────────────────────────────────────────────────────────────────
   2026-05-18 — [item-50-full-css-leg-rebuild] (combined CSS leg)
   Reconstructs the Item 50 CSS work that silently failed to land in
   commit 45be906. Source spec: `_reports/2026-05-15_round4_admission_delta.md`
   § 3 (H3 visual + mobile) + § 4 (A8 athlete-card density) + § 5 (P3
   athlete-profile collapsibility). Paired tickets: chip-canonical hover
   bounce (resolved in-place at .gg-chip:hover above), H3 visual pill +
   underline (resolved in-place at .gg-header__signin above). Remaining
   rules — caret rotation, name-row, hamburger sign-in slot, A8 career-
   window, P3 <details> chrome + chevron + section controls + timeline-
   link hover — landed here at end-of-file per the project's accretive-
   addition convention.
   ───────────────────────────────────────────────────────────────────── */

/* H3 — sign-in caret rotation (dual selector tracks the JS .is-open
   class for legacy/:has()-less browsers AND the modern :has() form
   that reads the button's aria-expanded directly; same pattern as the
   Item 51 hotfix panel-show selector). */
.gg-header__signin__caret {
  display: inline-block;
  transition: transform 160ms var(--gg-ease);
}
.gg-header__signin.is-open .gg-header__signin__caret,
.gg-header__signin:has(.gg-header__signin__btn[aria-expanded="true"]) .gg-header__signin__caret {
  transform: rotate(180deg);
}

/* H3 — button gold-underline on hover (paints under the visible label
   span; mirrors .gg-pub-link:hover's underline-on-hover pattern but
   confined to the inner button so the caret + avatar don't get an
   underline). Button is the focusable element; ::after lives on the
   .gg-header__signin__label so the underline tracks the text width. */
.gg-header__signin__btn {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-1);
  cursor: pointer;
  padding: 0;
}
/* Underline uses native text-decoration rather than an absolutely-
   positioned ::after pseudo so the existing .gg-header__signin__name
   `overflow: hidden` (ellipsis truncation, §5.29) doesn't clip it.
   Visual result is the same: gold 2px line under the text on hover
   and keyboard focus. */
.gg-header__signin:hover .gg-header__signin__label,
.gg-header__signin:hover .gg-header__signin__name,
.gg-header__signin__btn:focus-visible .gg-header__signin__label,
.gg-header__signin__btn:focus-visible .gg-header__signin__name {
  text-decoration: underline;
  text-decoration-color: var(--gg-color-medal-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* H3 — name-row block at the top of the signed-in dropdown panel
   (name primary + email secondary, max-width truncation matches the
   inline name). */
.gg-header__signin__name-row {
  padding: 8px 12px 4px;
  line-height: 1.25;
}
.gg-header__signin__name-row .gg-header__signin__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gg-color-text-primary);
  max-width: 220px;
}

/* H3 — mobile hamburger sheet sign-in slot. The build_site.py page-
   shell already emits <div class="gg-header__hamburger-signin"
   id="ggSigninMobile" role="menu"> at the top of the open sheet plus a
   .gg-header__hamburger-sheet__nav-divider below it; this gives the
   slot a tap-friendly menu treatment so it reads as a distinct zone
   from the nav links. */
.gg-header__hamburger-signin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gg-space-2) 0;
}
.gg-header__hamburger-signin:empty { display: none; }
.gg-header__hamburger-signin button,
.gg-header__hamburger-signin a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--gg-color-text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  border-radius: var(--gg-radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.gg-header__hamburger-signin button:hover,
.gg-header__hamburger-signin a:hover {
  background: rgba(255, 215, 0, 0.10);
  color: var(--gg-color-medal-gold);
}
.gg-header__hamburger-sheet__nav-divider {
  height: 1px;
  margin: var(--gg-space-2) 0;
  background: rgba(255, 255, 255, 0.08);
}

/* A8 — athlete-card career-window line (muted secondary; sits below
   the name on every tile). The chip below in .gg-named-card__meta is
   unchanged (existing .gg-named-card__pill). */
.gg-named-card__career-window {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

/* A8 — ≤380px: drop the career-window + chip to keep the tile lean
   on the narrowest viewports per the brief. */
@media (max-width: 380px) {
  .gg-named-card__career-window,
  .gg-named-card__meta .gg-named-card__pill { display: none; }
}

/* P3 — .gg-event-card promoted from <article> to <details>. Default
   browser disclosure-triangle hidden; chevron sits to the right of
   the title row and rotates on [open]. .gg-event-card itself was a
   plain padded card before; the <summary> inherits the title-row
   chrome. */
details.gg-event-card { padding: 0; }
details.gg-event-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
}
details.gg-event-card > summary::-webkit-details-marker { display: none; }
details.gg-event-card > summary:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
  border-radius: var(--gg-radius-md);
}
.gg-event-card__chevron {
  display: inline-block;
  /* 2026-05-21 L2 [event-card-chevron-render-bug]: bumped from 12px / 56%
     opacity → 14px / 76% so the ▾ glyph reads as a chevron on first
     glance rather than as a misplaced comma at small sizes / dim contrast. */
  font-size: 14px;
  color: rgba(255, 255, 255, 0.76);
  transition: transform 160ms var(--gg-ease);
}
details.gg-event-card[open] > summary .gg-event-card__chevron {
  transform: rotate(180deg);
}
details.gg-event-card > .gg-event-card__rows {
  padding: 0 16px 12px;
}
details.gg-event-card[open] > .gg-event-card__rows {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

/* P3 — section-level expand-all / collapse-all controls. Two ghost-
   text buttons floated to the right of the section H2. Utility chrome,
   not primary CTAs — keep them subtle. */
.gg-meet-section__controls {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}
.gg-meet-section__controls button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--gg-radius-sm);
  cursor: pointer;
}
.gg-meet-section__controls button:hover {
  color: var(--gg-color-medal-gold);
  background: rgba(255, 215, 0, 0.08);
}
.gg-meet-section__controls button:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
}
/* L37.7 [competitions-expand-collapse-all-controls] 2026-06-03: on the
   per-competition apparatus section the subtle grey utility treatment
   above read as instructional prose and went unnoticed (Josh review).
   This modifier promotes them to the gold pill controls the design pick
   ("inline gold-link controls") actually intended — scoped to the
   apparatus section so the athlete-profile controls stay subtle. Same
   (0,1,1) specificity as the base button rule but later in the file, so
   it wins. */
.gg-meet-section__controls--apparatus {
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 14px;
}
.gg-meet-section__controls--apparatus button {
  color: var(--gg-color-medal-gold);
  border: 1px solid rgba(255, 215, 0, 0.45);
  background: rgba(255, 215, 0, 0.07);
  font-size: 13px;
  padding: 6px 12px;
}
.gg-meet-section__controls--apparatus button:hover {
  background: rgba(255, 215, 0, 0.16);
  color: var(--gg-color-medal-gold);
}

/* P3 — timeline entry hover treatment for entries that link to a
   matching event card. Underline-on-hover via background-size sweep
   (same technique used by .gg-event-card__title-link above) so the
   timeline doesn't grow vertically on hover. */
.gg-timeline-v2__head--link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.18s ease, color 0.18s ease;
}
.gg-timeline-v2__head--link:hover,
.gg-timeline-v2__head--link:focus-visible {
  color: var(--gg-color-medal-gold);
  background-size: 100% 1px;
  outline: none;
}

/* 2026-05-19 [gg-named-card-display-style-override] (Item 55):
   teams-filter.js hides non-matching .gg-named-card tiles via a
   data-teams-hidden attribute (was inline `card.style.display='none'`).
   Selector lives at the canonical .gg-named-card layer so any future
   visual-designer override can re-style the hidden state via the
   attribute without fighting an inline style. */
.gg-named-card[data-teams-hidden="true"] { display: none; }

/* 2026-05-19 [medals-sort-rank-medal-stripe] (Item 57): when the
   medals table is sorted by anything other than rank, drop the gold/
   silver/bronze color stripe on the rank-1/2/3 cells. The medal-color
   classes are source-order-bound (rank position in the unfiltered
   table); under a non-rank sort they read as random row highlighting.
   `medals-sort.js` sets data-sort-key="<key>" on the table on each
   sort; this selector drops the rank-cell coloring when key != rank.
   The medal-COUNT column cells keep their coloring (those are
   column-driven semantics, not rank-driven). */
.gg-medals-table[data-sort-key]:not([data-sort-key="rank"]) .gg-medals-table__rank.gg-table__place--gold,
.gg-medals-table[data-sort-key]:not([data-sort-key="rank"]) .gg-medals-table__rank.gg-table__place--silver,
.gg-medals-table[data-sort-key]:not([data-sort-key="rank"]) .gg-medals-table__rank.gg-table__place--bronze {
  color: var(--gg-color-text-muted);
  font-weight: 400;
}

/* L23 (2026-05-27) [ncaa-team-roster-archetype-chip]: gold achievement
   pill rendered inline after the (last YYYY) span on NCAA team roster
   rows where the athlete has ≥1 perfect-10 score recorded on that team.
   Small + visually distinctive — a positive marker, not a primary
   element. Renders only when N > 0 (per Q2 default). */
.gg-roster-p10-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.10);
  border: 1px solid rgba(255, 215, 0, 0.40);
  color: var(--gg-color-medal-gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: baseline;
  white-space: nowrap;
}

/* 2026-05-21 L5.1 [teams-national-roster-redesign] Phase A: filter
   chip row + sort dropdown above the per-discipline athletes lists
   on national-team pages. Layout: horizontal flex with chips wrapping
   on narrow viewports; sort dropdown sits at the right (or wraps below
   on mobile). Chips inherit canonical .gg-chip (L4.1 44×44 floor). */
.gg-team-roster-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 20px;
}
.gg-team-roster-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.gg-team-roster-filter__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--gg-text-small);
  color: var(--gg-color-text-muted);
}
.gg-team-roster-filter__sort label {
  white-space: nowrap;
}
.gg-team-roster-filter__sort-select {
  min-height: 44px;
  padding: 8px 28px 8px 12px;
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: 8px;
  color: var(--gg-color-text);
  font-family: inherit;
  font-size: var(--gg-text-small);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff99'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.gg-team-roster-filter__sort-select:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
  border-color: var(--gg-color-medal-gold);
}

/* L5.3 archetype-aware notables on national-team pages. Each <li>
   carries a three-line label: eyebrow + name + detail. The eyebrow
   reads small/uppercase with a gold tint so the archetype band is
   scannable at a glance. */
.gg-team-roster--archetypes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.gg-team-roster--archetypes > li {
  padding: 12px 14px;
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: 10px;
}
.gg-team-roster--archetypes > li > a,
.gg-team-roster--archetypes > li > span {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gg-team-roster--archetypes > li:hover {
  border-color: rgba(255, 215, 0, 0.4);
}
.gg-team-archetype-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gg-color-medal-gold);
  margin-bottom: 4px;
}
.gg-team-archetype-name {
  display: block;
  font-size: var(--gg-text-body);
  font-weight: 600;
  color: var(--gg-color-text);
  margin-bottom: 2px;
}
.gg-team-archetype-detail {
  display: block;
  font-size: 12px;
  color: var(--gg-color-text-muted);
}

@media (max-width: 480px) {
  .gg-team-roster-filter {
    flex-direction: column;
    align-items: stretch;
  }
  .gg-team-roster-filter__sort {
    justify-content: flex-end;
  }
}

/* L15 (2026-05-25 evening) [teams-national-pagination-phase-b]:
   pagination nav at the bottom of /teams/national/<noc>/ rosters
   when the NOC has >50 athletes. Pattern: prev / numbered / next
   inside a flex row, 44px touch-target, current-page in gold. */
.gg-pagination {
  margin: 24px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--gg-color-border);
}
.gg-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.gg-pagination li {
  display: inline-flex;
}
.gg-pagination a,
.gg-pagination .gg-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--gg-color-border);
  border-radius: 8px;
  background: var(--gg-color-surface-1);
  color: var(--gg-color-text);
  font-size: var(--gg-text-small);
  text-decoration: none;
  line-height: 1;
}
.gg-pagination a:hover {
  border-color: rgba(255, 215, 0, 0.4);
  background: var(--gg-color-surface-2, var(--gg-color-surface-1));
}
.gg-pagination a:focus-visible {
  outline: 2px solid var(--gg-color-medal-gold);
  outline-offset: 2px;
}
.gg-pagination .gg-pagination__current {
  border-color: var(--gg-color-medal-gold);
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  cursor: default;
}
.gg-pagination .gg-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-small);
}
.gg-pagination__prev a,
.gg-pagination__next a {
  font-weight: 600;
}
@media (max-width: 480px) {
  .gg-pagination ul {
    gap: 4px;
  }
  .gg-pagination a,
  .gg-pagination .gg-pagination__current {
    min-width: 40px;
    padding: 8px 10px;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   L7 (2026-05-22) — Mobile + touch-target pass.
   Closes [touch-target-44px-restore] + [mobile-375px-reflow-pass] +
   [national-team-table-mobile-wrap] per the 10★ roadmap.

   Phase 2 audit (_reports/2026-05-20_phase2_synthesis.md § Pattern 7)
   surfaced:
   - .gg-header__signin computed ~22px tall; lacked min-height.
   - .gg-subnav a (athlete-profile in-page subnav) computed ~30px tall;
     lacked min-height. Both miss the WCAG 2.5.8 AA 24×24 floor and
     the project's own DESIGN_SYSTEM § 5.1 44×44 promise.
   - Athlete card names ("Vanwalleghem", "Lunardoni") overflow mid-word
     at 375px because .gg-named-card lacks overflow-wrap.
   - Tab strips (.gg-subnav, .gg-comp-subnav, .gg-header__nav) scroll
     horizontally with no visual cue; users don't know more is hidden.
   - Timeline year gutter on athlete profile (.timeline__year) reads
     too-wide at 375px; no mobile-specific column tightening.
   - Bare <table class="gg-table"> emissions in build_site.py 4 sites
     (national-team Olympic results, NCAA postseason, NCAA top-apparatus,
     athlete-profile event results) lack the .gg-table-wrap container
     so they overflow viewport at <480px instead of horizontal-scrolling.

   Strategy: belt-and-suspenders min-heights + CSS gradient mask for
   scroll cue + word-break for long surnames + reduced year gutter at
   ≤480px. Table-wrap is fixed in build_site.py.
   ───────────────────────────────────────────────────────────────────── */

/* L7.1 — touch-target floor on the sign-in pill. Pre-L7 it had
   padding:6px 12px and no min-height → computed ~22-28px depending on
   sign-in state (text-only "Sign in" shorter than avatar+name+caret).
   44px matches .gg-pub-link family for visual + tactile parity. */
.gg-header__signin {
  min-height: 44px;
  box-sizing: border-box;
}

/* L7.2 — touch-target floor on athlete-profile in-page subnav. Pre-L7
   `.gg-subnav a` had padding:var(--gg-space-1) 0 + font-size:13px →
   computed ~30px tall. The flex parent stretches children so adding
   min-height + display:inline-flex grows the click target without
   needing extra padding (which would push the underline indicator
   off-baseline relative to .is-current). */
.gg-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* L7.3 — scroll cue for horizontally-scrollable nav strips. CSS
   gradient mask fades the right edge so users see content is clipped
   and learn to swipe. Applied to .gg-subnav (athlete-profile in-page
   nav), .gg-comp-subnav (competitions type strip), .gg-header__nav
   (primary nav). Mask preserves keyboard + screen-reader behavior;
   only the visual fade changes. Mobile-only — at ≥768px the strips
   typically fit without scrolling.

   Note: -webkit-mask-image needed for Safari ≤15.3 (most current
   users now on 17+; kept for graceful degradation through the 2-year
   support window). */
@media (max-width: 767px) {
  .gg-subnav,
  .gg-comp-subnav,
  .gg-header__nav {
    mask-image: linear-gradient(
      to right,
      #000 calc(100% - 24px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }
}

/* L7.4 — athlete card long-surname overflow. Some athlete display
   names (Vanwalleghem, Lunardoni, Korobchinskyi) exceed the 1-up card
   width at 375px and visibly clipped/overflowed pre-L7. min-width:0
   on the grid item lets flex/grid shrink it below intrinsic content;
   overflow-wrap:anywhere lets the name break inside a long token
   (preferred over break-word which only breaks at allowed points). */
.gg-named-card { min-width: 0; }
.gg-named-card__name {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* L7.5 — timeline year-gutter compression at ≤480px. Pre-L7 the
   .timeline__year used grid-template-columns:64px 1fr at every width.
   At 375px viewport (343px content area after page padding) the 64px
   gutter + 16px gap left only 263px for the entry — long competition
   names then wrapped to 3-4 lines. Trim to 48px gutter + 12px gap at
   ≤480px so the entry gets ~283px. The 4-digit year label ("2024")
   at 18px/800 measures ~46px rendered; 48px column accommodates
   without clipping. */
@media (max-width: 480px) {
  .timeline__year {
    grid-template-columns: 48px 1fr;
    gap: var(--gg-space-2);
  }
}

/* L7.6 — make .gg-table-wrap a more obvious mobile horizontal-scroll
   surface. The existing class already sets overflow-x:auto; add a
   right-edge gradient cue at ≤767px so users perceive the table
   extends offscreen. -webkit-overflow-scrolling for momentum on iOS.
   Per build_site.py edits (L7-side), all four bare <table class="gg-table">
   sites now ship wrapped, so this rule lights up across:
   - /teams/national/<noc>/ Olympic results
   - /teams/ncaa/<slug>/ postseason + top apparatus
   - /competitions/<slug>/ per-event results
   - /athletes/<slug>/ event-card tables (already wrapped pre-L7) */
.gg-table-wrap {
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .gg-table-wrap {
    mask-image: linear-gradient(
      to right,
      #000 calc(100% - 18px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      #000 calc(100% - 18px),
      transparent 100%
    );
  }
}


/* ─────────────────────────────────────────────────────────────────────
   L11 — K9 custom combobox (athletes-page country + competitions-type
   discipline) + active-filter summary bar + era-group split.
   Authored 2026-05-24 alongside _drafts/2026-05-19_athletes_filter_redesign_brief.md.
   New tokens scoped here (popover surface + popover row height) — these
   are the only L11 root additions; everything else composes on existing
   --gg-color-* / --gg-radius-* tokens.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --gg-popover-bg: var(--gg-color-surface-1);
  --gg-popover-border: rgba(255, 215, 0, 0.28);
  --gg-popover-shadow: var(--gg-shadow-lg);
  --gg-popover-max-height: 320px;
  --gg-popover-row-min-height: 44px;
}

/* 5.43 ── .gg-combobox — generic listbox+input combobox (WAI-ARIA 1.1).
   Used on /athletes/ for the country picker and on /competitions/<type>/
   for the discipline picker. The container is position:relative so the
   absolutely-positioned __listbox anchors to it. */
.gg-combobox {
  position: relative;
  display: inline-flex;
  width: 100%;
  max-width: 360px;
  align-items: stretch;
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  transition: border-color var(--gg-duration-fast) var(--gg-ease);
}
.gg-combobox:focus-within {
  border-color: var(--gg-color-medal-gold);
}
.gg-combobox__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--gg-color-text-primary);
  font-family: inherit;
  font-size: var(--gg-text-small);
  outline: none;
}
.gg-combobox__input::placeholder {
  color: var(--gg-color-text-muted);
}
.gg-combobox__chevron {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--gg-color-border);
  color: var(--gg-color-text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--gg-duration-fast) var(--gg-ease),
              transform var(--gg-duration-fast) var(--gg-ease);
}
.gg-combobox__chevron:hover {
  color: var(--gg-color-medal-gold);
}
.gg-combobox[data-open="true"] .gg-combobox__chevron {
  color: var(--gg-color-medal-gold);
  transform: rotate(180deg);
}
.gg-combobox__listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  margin: 0;
  padding: 6px;
  background: var(--gg-popover-bg);
  border: 1px solid var(--gg-popover-border);
  border-radius: var(--gg-radius-md);
  box-shadow: var(--gg-popover-shadow);
  max-height: var(--gg-popover-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.gg-combobox__listbox[hidden] { display: none; }
.gg-combobox__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--gg-popover-row-min-height);
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--gg-color-text-primary);
  font-size: var(--gg-text-small);
  cursor: pointer;
  text-decoration: none;
}
.gg-combobox__option[hidden] { display: none; }
.gg-combobox__option:hover,
.gg-combobox__option.is-active,
.gg-combobox__option[aria-selected="true"] {
  background: rgba(255, 215, 0, 0.14);
  color: var(--gg-color-medal-gold);
  outline: none;
}
.gg-combobox__option-name { flex: 1 1 auto; }
.gg-combobox__option-noc {
  flex: 0 0 auto;
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gg-combobox__option-count {
  flex: 0 0 auto;
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-micro);
  font-variant-numeric: tabular-nums;
}
.gg-combobox__option-rollup {
  margin-left: 4px;
  color: var(--gg-color-medal-gold);
}
.gg-combobox__empty {
  margin: 0;
  padding: 12px;
  text-align: center;
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-small);
}
.gg-combobox__loading {
  margin: 0;
  padding: 12px;
  text-align: center;
  color: var(--gg-color-text-muted);
  font-size: var(--gg-text-small);
}

/* 5.44 ── .gg-filter-summary — active-filter summary bar above the
   athletes-page chip rows. Hidden when no filters are active. Each
   active-filter chip is a real link that removes that one dimension. */
.gg-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  padding: 10px 12px;
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: var(--gg-radius-md);
}
.gg-filter-summary[hidden] { display: none; }
.gg-filter-summary__label {
  font-size: var(--gg-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gg-color-text-muted);
  margin-right: 4px;
}
.gg-filter-summary__clear {
  margin-left: auto;
  color: var(--gg-color-link);
  font-size: var(--gg-text-small);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}
.gg-filter-summary__clear:hover {
  color: var(--gg-color-medal-gold);
}

/* 5.45 ── .gg-filter-era-group — All-time / Modern split heading
   inside the era facet row. The heading sits inline at the start of
   each group's chip cluster. */
.gg-filter-era-group__label {
  font-size: var(--gg-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gg-color-text-muted);
  margin-right: 8px;
  flex: 0 0 auto;
}

/* 5.46 ── .gg-country-combobox-wrap — single-row layout that pairs
   the country combobox with a short caption above the existing
   country chip row. */
.gg-country-combobox-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.gg-country-combobox-wrap__caption {
  font-size: var(--gg-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gg-color-text-muted);
}

/* 5.47 ── .gg-result-headline — plainspoken count line above the
   athletes grid. Replaces the prior "Showing N–M of total" hero
   subtitle on filtered variants per brief § 4.6. */
.gg-result-headline {
  margin: 8px 0 16px;
  font-size: var(--gg-text-body);
  color: var(--gg-color-text-primary);
}
.gg-result-headline strong {
  color: var(--gg-color-medal-gold);
  font-weight: 600;
}
.gg-result-headline__empty-clear {
  color: var(--gg-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 8px;
}

/* Mobile polish — combobox stretches to full width, summary bar wraps. */
@media (max-width: 600px) {
  .gg-combobox { max-width: 100%; }
  .gg-filter-summary { padding: 8px 10px; }
  .gg-filter-summary__clear { margin-left: 0; }
}


/* ─────────────────────────────────────────────────────────────────────
   §5.48 ── Ask page (page-local)
   ─────────────────────────────────────────────────────────────────────
   Migrated 2026-05-27 by L22 [ask-page-style-block-migration] from
   ask.html's 916-line inline <style> block (closes the Item 49 v1.5
   carry-forward filed during the design-system harmonization pass).

   Scoping discipline:
   - All element selectors are scoped under `body.gg-ask-page` so they do
     NOT leak globally. The `<body>` element on ask.html carries
     class="gg-ask-page" — every other page lacks the class.
   - The `.ask-*` family was rebadged to `.gg-ask-*` in L32 (2026-05-31,
     closes [ask-page-rebadge-ask-to-gg]) — body class, hero, eyebrow,
     title, subtitle, coverage, coverage-lead, input, input-icon,
     input-wrap, btn, examples, example-label, chip. The remaining
     page-local families (`.result-*`, `.modal-*`, `.row-chip*`,
     `.flag-*`, `.btn-primary`, `.btn-secondary`, `.spinner`,
     `.loading-card`, `.error-card`, `.status-bar`, `.status-counts`,
     `.status-dot`, `.model-switcher*`, `.sql-*`, `.top-row-card`) were
     never `.ask-*`-prefixed and are out of scope for that ticket; they
     stay page-local until a future consolidation leg, if any.
   - `.gg-header__signin*` page-local overrides preserved (Q4 default
     2026-05-27) — ask.html's brand-pink header is intentionally
     distinct from the canonical publication-style header.

   Token reconciliation:
   - var(--bg) → var(--gg-color-plum-900)
   - var(--surface) → var(--gg-color-surface-1)
   - var(--surface2) → var(--gg-color-surface-2)
   - var(--border) → var(--gg-color-border)
   - var(--text) → var(--gg-color-text-primary)
   - var(--muted) → var(--gg-color-text-muted)
   - var(--gold) → var(--gg-color-medal-gold)
   - var(--gold-soft) → var(--gg-color-plum-500)
   - var(--navy) → var(--gg-color-surface-1) (same hex; collapsed)
   - var(--danger) → var(--gg-color-danger)
   - var(--accent), var(--rose) (both #E8728A) → page-local --gg-ask-accent
     (no clean canonical match — #E8728A only exists as the unrelated
     --gg-color-tag-female; kept page-local, renamed in L32)
   - var(--accent2) → page-local --gg-ask-accent2 (#F0A0B4; no canonical)
   - var(--green) (#5DDC9E) → L32 hoisted to canonical --gg-color-success
     (exact hex + semantic match; the L22-era --ask-green token is gone)
   - var(--blue) (#7BB4E0) → matched canonical --gg-color-info, but the
     L22 --ask-blue token had zero usages (dead) — declaration removed in L32

   @keyframes prefixed `gg-ask-` to mark page-locality (was bare `pulse`
   and `spin` inline → `ask-pulse`/`ask-spin` in L22 → `gg-ask-pulse`/
   `gg-ask-spin` in L32; renamed here + at usage sites).

   Dropped from the inline block (duplicates of design-system.css
   globals):
   - `* { box-sizing: border-box; margin: 0; padding: 0; }`
     (lines 219-227 above cover *, *::before, *::after + html, body)
   - `html, body { height: 100%; }` (overlaps with the global)
   - `.sr-only { … }` (already canonical — see §5.4-ish area, line 610)
   ─────────────────────────────────────────────────────────────────── */

/* Page-local tokens — non-canonical colors specific to ask.html.
   Scoped to body.gg-ask-page so they don't leak globally; prefix
   --gg-ask-* so it's obvious these aren't part of the canonical token
   set. (The L22 --ask-green/--ask-blue tokens were retired in L32:
   green hoisted to canonical --gg-color-success, blue was dead.) */
body.gg-ask-page {
  --gg-ask-accent: #E8728A;
  --gg-ask-accent2: #F0A0B4;
}

/* Body-level page settings (overrides the canonical font + adds
   line-height/font-size). Preserved verbatim from the inline block. */
body.gg-ask-page {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  overflow-x: hidden;
}

/* ── Header ──
   L24 (2026-05-28) [ask-page-header-consistency]: the page-local pink/
   magenta header chrome was removed so the canonical .gg-header (§5.29,
   solid plum-900 + gold border) renders through on /ask/ — matching every
   other page. ask.html already carries canonical .gg-header markup (since
   the 2026-05-10 chrome-cohesion fix), so this is purely a CSS-override
   removal. Dropped here: `body.gg-ask-page header { background: <pink
   gradient> … }`, the dead `.hdr-*` / `header h1` child rules (referenced
   the pre-2026-05-10 standalone header, no longer in the markup), and the
   `body.gg-ask-page .gg-header__signin*` page-local overrides (Q4-default
   2026-05-27, preserved only to suit the pink header — now obsolete). The
   shared gg-header-signin.js drives the dropdown via canonical selectors
   (`.is-open` / `:has(.gg-header__signin__btn[aria-expanded="true"])`), so
   the sign-in pill behaves identically to other pages after removal. */

body.gg-ask-page main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 36px 28px 80px;
  position: relative;
  z-index: 1;
}

/* ── Hero / Ask panel ── */
.gg-ask-hero {
  background: linear-gradient(135deg, #7A1E48 0%, #2A2640 55%, #1E1B2E 100%);
  border: 1px solid var(--gg-color-border);
  border-radius: 16px;
  padding: 44px 48px 38px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(0,0,0,0.38);
}
.gg-ask-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,215,0,0.10), transparent 55%);
  pointer-events: none;
}
.gg-ask-eyebrow {
  font-size: 11px;
  color: #FFD700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin-bottom: 10px;
}
.gg-ask-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.1;
}
.gg-ask-title .star { color: #FFD700; }
.gg-ask-subtitle {
  color: #C87D90;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
  max-width: 620px;
}

/* Small coverage note — "what's in this database", not a banner */
.gg-ask-coverage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(255,255,255,0.72);
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.22);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
  letter-spacing: 0.2px;
  max-width: 100%;
  line-height: 1.4;
}
.gg-ask-coverage .star { color: #FFD700; font-size: 12px; }
.gg-ask-coverage-lead {
  color: #FFD700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10.5px;
}
.gg-ask-coverage .sep {
  color: rgba(255,255,255,0.32);
  margin: 0 2px;
}

.gg-ask-input-wrap {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.gg-ask-input {
  flex: 1;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  padding: 18px 22px 18px 54px;
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 2px 14px rgba(0,0,0,0.2) inset;
}
.gg-ask-input::placeholder { color: rgba(255,255,255,0.5); }
.gg-ask-input:focus {
  outline: none;
  border-color: #FFD700;
  background: rgba(0,0,0,0.5);
  box-shadow: 0 0 0 3px rgba(255,215,0,0.18), 0 2px 14px rgba(0,0,0,0.3) inset;
}
.gg-ask-input-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  pointer-events: none;
  color: rgba(255,255,255,0.55);
}
.gg-ask-btn {
  background: linear-gradient(135deg, #FFD700 0%, #E8728A 100%);
  color: #1E1B2E;
  border: none;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  min-width: 130px;
}
.gg-ask-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255,215,0,0.3);
}
.gg-ask-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.gg-ask-examples {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gg-ask-example-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  align-self: center;
  margin-right: 4px;
}
/* 2026-05-15 v1.5 design-system harmonization (closes K25): aligned
   to the canonical .gg-chip visual (translateY hover dropped, denser
   padding, font-weight 600). .gg-ask-chip kept as a distinct page-local
   class through L22; a future leg can rebadge to canonical .gg-chip
   markup if owner wants further consolidation. */
.gg-ask-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.82);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  min-height: 32px;
  line-height: 1.4;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gg-ask-chip:hover {
  background: rgba(255, 215, 0, 0.10);
  border-color: rgba(255, 215, 0, 0.40);
  color: #FFD700;
}
.gg-ask-chip:focus-visible {
  outline: 2px solid #FFD700;
  outline-offset: 2px;
}

/* ── DB status bar ── */
.status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--gg-color-text-muted);
  flex-wrap: wrap;
}
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gg-color-text-muted);
  margin-right: 6px;
}
.status-dot.ok { background: var(--gg-color-success); box-shadow: 0 0 10px rgba(93,220,158,0.5); }
.status-dot.err { background: var(--gg-color-danger); }
.status-dot.pending { background: var(--gg-color-medal-gold); animation: gg-ask-pulse 1.2s infinite; }
@keyframes gg-ask-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.status-counts { color: var(--gg-color-text-primary); font-weight: 600; }
/* 2026-05-19 P1-14: dev-only spans inside the status bar (Database +
   Claude API state) are hidden by default. A future Settings toggle
   can flip body[data-dev="1"] to surface them for development. */
body.gg-ask-page .status-bar .is-dev-only { display: none; }
body.gg-ask-page[data-dev="1"] .status-bar .is-dev-only { display: inline-flex; align-items: center; }

/* Inline model switcher in the status bar. */
.model-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--gg-color-text-primary);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 12px;
  min-height: 28px;
  margin-left: 4px;
  border-radius: 999px;
  cursor: pointer;
  vertical-align: baseline;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.model-switcher:hover,
.model-switcher:focus-visible {
  background: rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.5);
  outline: none;
}
.model-switcher:hover .status-counts,
.model-switcher:focus-visible .status-counts { color: #FFD700; }
.model-switcher-caret {
  font-size: 10px;
  line-height: 1;
  opacity: 0.55;
}
.model-switcher:hover .model-switcher-caret,
.model-switcher:focus-visible .model-switcher-caret { opacity: 1; }

/* ── Result card ── */
.result-card {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: 14px;
  padding: 30px 34px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  margin-bottom: 22px;
  position: relative;
}
.result-card::before {
  content: "";
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 4px;
  background: linear-gradient(180deg, #FFD700, #C87D90);
  border-radius: 0 4px 4px 0;
}
.result-eyebrow {
  font-size: 10px;
  color: #FFD700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  margin-bottom: 8px;
}
.result-question {
  font-size: 20px;
  color: var(--gg-color-text-primary);
  margin-bottom: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.result-summary {
  color: var(--gg-color-text-primary);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(255,215,0,0.05);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: 0 8px 8px 0;
}
.result-summary strong { color: var(--gg-color-medal-gold); }
.result-summary.fallback { font-style: italic; color: var(--gg-color-text-muted); }

/* "Top row" structured fallback card. */
.top-row-card {
  background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.22);
  border-left: 3px solid var(--gg-color-medal-gold);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.top-row-card .tr-title {
  font-size: 10px;
  color: var(--gg-color-medal-gold);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 700;
  margin-bottom: 8px;
}
.top-row-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 12.5px;
}
.top-row-card dt {
  color: var(--gg-color-text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.7px;
  padding-top: 2px;
  font-weight: 700;
}
.top-row-card dd {
  color: var(--gg-color-text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.top-row-card dd.is-null { color: var(--gg-color-text-muted); }

/* Team-row chip for rows where event_type='Team' and athlete is null. */
.row-chip {
  display: inline-block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: baseline;
  line-height: 1.3;
}
.row-chip-team {
  color: var(--gg-color-medal-gold);
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.35);
}
.result-table td em.team-name {
  font-style: italic;
  color: var(--gg-color-text-primary);
}

.result-meta-row {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--gg-color-text-muted);
}
.result-meta-row span {
  background: var(--gg-color-surface-2);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--gg-color-border);
  letter-spacing: 0.3px;
}
.result-meta-row strong { color: var(--gg-color-text-primary); font-weight: 700; }
.result-meta-row .cached-badge {
  background: rgba(93,220,158,0.12);
  border: 1px solid rgba(93,220,158,0.45);
  color: var(--gg-color-success);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 10px;
}

/* Flag-as-wrong link/button at the bottom of the result card. */
.flag-row {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.flag-btn {
  background: transparent;
  border: 1px solid var(--gg-color-border);
  color: var(--gg-color-text-muted);
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.flag-btn:hover {
  color: var(--gg-color-danger);
  border-color: var(--gg-color-danger);
}
.flag-btn.flagged {
  color: var(--gg-color-success);
  border-color: rgba(93,220,158,0.5);
  background: rgba(93,220,158,0.08);
  cursor: default;
}

.result-table-wrap {
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--gg-color-border);
  border-radius: 8px;
  background: var(--gg-color-surface-2);
}
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.result-table thead {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #2A2640 0%, #1E1B2E 100%);
  z-index: 2;
}
.result-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gg-color-medal-gold);
  font-weight: 700;
  border-bottom: 1px solid var(--gg-color-border);
  white-space: nowrap;
}
.result-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(92,68,104,0.35);
  color: var(--gg-color-text-primary);
}
.result-table tr:last-child td { border-bottom: none; }
.result-table tr:hover td { background: rgba(232,114,138,0.06); }
.result-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.result-table td.medal-Gold { color: #FFD700; font-weight: 700; }
.result-table td.medal-Silver { color: #C0C8D8; font-weight: 700; }
.result-table td.medal-Bronze { color: #CD7F32; font-weight: 700; }

.sql-details {
  margin-top: 18px;
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  border-radius: 8px;
  overflow: hidden;
}
.sql-details summary {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--gg-color-text-muted);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sql-details .copy-sql-btn {
  margin-left: auto;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.35);
  color: var(--gg-color-medal-gold);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  transition: all 0.18s;
}
.sql-details .copy-sql-btn:hover {
  background: rgba(255,215,0,0.18);
  color: #fff;
}
.sql-details .copy-sql-btn.copied {
  background: rgba(93,220,158,0.18);
  border-color: rgba(93,220,158,0.55);
  color: var(--gg-color-success);
}
.sql-details summary::-webkit-details-marker { display: none; }
.sql-details summary::before {
  content: "▸";
  transition: transform 0.2s;
  color: var(--gg-ask-accent);
}
.sql-details[open] summary::before { transform: rotate(90deg); }
.sql-details summary:hover { color: var(--gg-ask-accent); }
.sql-details pre {
  padding: 14px 18px;
  background: #0f0d1a;
  color: #F0ECF4;
  font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  margin: 0;
  border-top: 1px solid var(--gg-color-border);
}
.sql-keyword { color: var(--gg-ask-accent); font-weight: 700; }
.sql-string  { color: var(--gg-color-success); }
.sql-number  { color: #FFD700; }

/* ── History — removed L24.2 (2026-05-28) [ask-remove-recent-questions]:
   the page-local "Recent questions" list was dropped per Josh; rules for
   .history / .history-item / .hi-q / .hi-meta / .history-empty removed. ── */

/* ── Loading / empty states ── */
.loading-card {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: 14px;
  padding: 40px 30px;
  text-align: center;
  color: var(--gg-color-text-muted);
  font-size: 14px;
}
.spinner {
  display: inline-block;
  width: 32px; height: 32px;
  border: 3px solid var(--gg-color-border);
  border-top-color: var(--gg-color-medal-gold);
  border-radius: 50%;
  animation: gg-ask-spin 0.8s linear infinite;
  margin-bottom: 14px;
}
@keyframes gg-ask-spin { to { transform: rotate(360deg); } }

.error-card {
  background: rgba(240,128,128,0.08);
  border: 1px solid rgba(240,128,128,0.4);
  border-left: 4px solid var(--gg-color-danger);
  border-radius: 10px;
  padding: 18px 22px;
  color: var(--gg-color-text-primary);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.error-card strong { color: var(--gg-color-danger); }
.error-card code {
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
}

/* ── Settings modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,13,26,0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--gg-color-surface-1);
  border: 1px solid var(--gg-color-border);
  border-radius: 16px;
  padding: 32px 36px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.modal h2 {
  font-size: 20px;
  color: var(--gg-color-text-primary);
  margin-bottom: 10px;
  font-weight: 700;
}
.modal p {
  color: var(--gg-color-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.modal p a { color: var(--gg-color-medal-gold); text-decoration: none; font-weight: 600; }
.modal p a:hover { text-decoration: underline; }
.modal label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gg-color-text-muted);
  margin-bottom: 6px;
  font-weight: 700;
}
.modal input[type=password], .modal input[type=text], .modal select {
  width: 100%;
  background: var(--gg-color-surface-2);
  border: 1px solid var(--gg-color-border);
  color: var(--gg-color-text-primary);
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 16px;
}
.modal input:focus, .modal select:focus {
  outline: none;
  border-color: var(--gg-color-medal-gold);
  box-shadow: 0 0 0 3px rgba(255,215,0,0.18);
}
.modal-privacy {
  font-size: 11px;
  color: var(--gg-color-text-muted);
  background: rgba(0,0,0,0.25);
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--gg-ask-accent);
  margin-bottom: 18px;
  line-height: 1.55;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.btn-primary {
  background: linear-gradient(135deg, #FFD700 0%, #E8728A 100%);
  color: #1E1B2E;
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,215,0,0.3); }
.btn-secondary {
  background: var(--gg-color-surface-2);
  color: var(--gg-color-text-primary);
  border: 1px solid var(--gg-color-border);
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--gg-ask-accent); color: var(--gg-ask-accent); }

@media (max-width: 720px) {
  .gg-ask-title { font-size: 26px; }
  .gg-ask-hero { padding: 28px 22px; }
  body.gg-ask-page main { padding: 24px 16px 60px; }
  .gg-ask-input-wrap { flex-direction: column; }
  .gg-ask-btn { padding: 14px; }
}