/* ============================================================
   GLTA — editorial sports magazine design system
   ============================================================
   §  Tokens
   §  Base
   §  Type (display + labels + prose)
   §  Layout (wrap, sections, grids, stacks, rows)
   §  Surfaces (cards, boxes, callouts, placeholders)
   §  Chrome (topbar, nav, brand, footer, drawer)
   §  Controls (btn, chip, input, tabs)
   §  Misc (pride strip, divider, court SVG, table)
   §  Palette + density variants
   §  Mobile (≤900) + tiny (≤520)
   ============================================================ */

/* ───────────────── Tokens ───────────────── */
:root {
  --cream: #F7F7F6;
  --cream-deep: #E9E9E7;
  --ink: #161513;
  --ink-soft: #2A2722;
  --muted: #8A857A;
  --ink-muted: #5A564F;
  --line: #1615131a;
  --line-strong: #16151333;
  --chart: oklch(0.88 0.17 113);
  --chart-deep: oklch(0.78 0.18 113);
  --chart-dark: oklch(63.24% 0.12872 112.194);
  --clay: oklch(0.62 0.14 40);
  --pride-1:  #3c3c3c;
  --pride-2:  #613915;
  --pride-3:  #74D7EE;
  --pride-4:  #FFAFC8;
  --pride-5:  #FFFFFF;
  --pride-6:  #E40303;
  --pride-7:  #FF8C00;
  --pride-8:  #FFED00;
  --pride-9:  #008026;
  --pride-10: #004DFF;
  --pride-11: #750787;

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: 32px;
  --section-pad: 96px;
  --topbar-h: 70px;

  --radius: 8px;
  --radius-sm: 4px;
}

/* ───────────────── Base ───────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: clip; }
html { overflow-x: clip; }
a { color: var(--clay); text-decoration: none; cursor: pointer; }
button { color: inherit; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--chart-deep);
  outline-offset: 2px;
}
img { max-width: 100%; display: block; }

/* ───────────────── Type ───────────────── */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; }
.mono  { font-family: var(--mono); letter-spacing: 0.05em; }
.italic { font-style: italic; }
.accent-clay { color: var(--clay); }
.accent-chart { color: var(--chart); }
.accent-muted { color: var(--muted); }
.accent-soft { color: var(--ink-soft); }

/* Editorial display scale — all serif, paddingBottom keeps descenders */
.display-hero,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  padding-bottom: 0.18em;
}
.display-hero { font-size: clamp(56px, 9.5vw, 168px); letter-spacing: -0.035em; line-height: 1; padding-bottom: 0.35em; }
.display-1    { font-size: clamp(64px, 9vw, 140px); letter-spacing: -0.03em; line-height: 1; padding-bottom: 0.3em; }
.display-2    { font-size: clamp(48px, 7vw, 112px); letter-spacing: -0.03em; line-height: 1; padding-bottom: 0.3em; }
.display-3    { font-size: 64px; line-height: 1.05; }
.display-4    { font-size: 56px; line-height: 1.05; }
.display-5    { font-size: 48px; line-height: 1.05; }
.display-6    { font-size: 40px; line-height: 1.1; }
.display-stat { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.display-stat-lg { font-size: clamp(40px, 6vw, 72px); }
.display-card-title { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.display-card-sm { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }

/* Labels: small mono uppercase. Variants by letter-spacing or color */
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-block;
}
.label-md { font-size: 12px; letter-spacing: 0.12em; }
.label-ink { color: var(--ink); }
.label-chart { color: var(--chart); }
.label-clay { color: var(--clay); }
.label-tight { letter-spacing: 0.1em; }
.label-soft { color: var(--ink-soft); }

/* Eyebrow — kept for back-compat: small ink-color label */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow-muted { color: var(--muted); }

/* Body copy used outside .prose */
.lede { font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.copy { font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.copy-sm { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* Prose blocks (rulebook content) */
.prose h2 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-top: 56px;
  margin-bottom: 16px;
  line-height: 1.05;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 32px;
  padding-top: 32px;
  margin-bottom: 12px;
  border-top: 1px solid var(--line);
}
.prose h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.prose h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--clay);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 24px;
  margin-bottom: 12px;
}
.section-title { border-top: 1px solid var(--line); padding-top: 32px; }
.prose p { margin-bottom: 12px; color: var(--ink-soft); max-width: 65ch; }
.prose ul { padding-left: 20px; margin-bottom: 12px; max-width: 65ch; }
.prose ol { padding-left: 16px; }
.prose li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; padding-bottom: 8px; color: var(--ink-soft); }
.prose li:not(:last-child) { border-bottom: 1px solid var(--line); }
.prose li::marker { color: var(--chart-deep); }
.prose strong { color: var(--ink); }

/* ───────────────── Layout ───────────────── */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.section-sm { padding-top: calc(var(--section-pad) * 0.6); padding-bottom: calc(var(--section-pad) * 0.6); }
.section-xs { padding-top: 56px; padding-bottom: 56px; }
.border-bottom { border-bottom: 1px solid var(--line); }
.border-top { border-top: 1px solid var(--line); }
.surface-deep { background: var(--cream-deep); }
.surface-ink { background: var(--ink); color: var(--cream); }
.surface-ink .accent-soft { color: #D9D5C8; }

/* Flex helpers */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; }
.end { align-items: flex-end; }
.wrap-row { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; } .gap-64 { gap: 64px; }

/* Grid templates — these are what mobile flattens */
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
/* asymmetric content/aside */
.grid-hero    { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.grid-asym    { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
.grid-content-rail { display: grid; grid-template-columns: 1fr 260px; gap: 64px; min-width: 0; }
.grid-content-rail > * { min-width: 0; }
.grid-text-aside  { display: grid; grid-template-columns: 1fr 1.5fr; gap: 96px; }
.grid-text-aside--mission { }
.grid-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; }
.grid-wtc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.gap-y-32 > * + * { margin-top: 32px; }

/* Reusable page header */
.page-head { padding-top: 56px; padding-bottom: 80px; }
.page-head-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 64px;
  flex-wrap: wrap;
}
.page-head-row > p { max-width: 380px; }

/* Section header — eyebrow + display title + action */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.section-head-eyebrow { display: block; margin-bottom: 16px; }

/* ───────────────── Surfaces ───────────────── */
.box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}
.box-strong { border-color: var(--line-strong); }
.box-padded { padding: 20px; }
.box-padded-lg { padding: 28px; }
.box-padded-sm { padding: 16px; }
.box-scroll-outer { position: relative; }
.box-scroll { overflow-x: auto; }
/* Scroll shadow: right-edge fade hints at overflow content.
   Rendered as a sibling overlay (not a pseudo-element of the scrolling
   div) so it never scrolls with the table content — only the toggled
   class controls its visibility. */
.box-scroll-fade {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, var(--cream));
  pointer-events: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  opacity: 1;
}
.box-scroll-outer.scrolled .box-scroll-fade { opacity: 0; }
@media (min-width: 901px) {
  .box-scroll-fade { display: none; }
}

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: all 0.2s;
}
.card-tight { padding: 16px; }
.card-hoverable:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card-clay { background: var(--clay); color: var(--cream); border-color: var(--clay); }
.card-ink  { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.card-deep { background: var(--cream-deep); }

/* Stat block — repeated giant number + label */
.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.stat-borderless { border: 0; padding: 0; border-left: 1px solid var(--line-strong); padding-left: 24px; }
.stat-num {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-num-sm { font-size: 48px; }
.stat-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
  display: block;
}

/* Placeholder (image slot stand-in) */
.placeholder {
  position: relative;
  max-width: 100%;
  background:
    repeating-linear-gradient(135deg,
      rgba(22,21,19,0.04) 0,
      rgba(22,21,19,0.04) 8px,
      rgba(22,21,19,0.07) 8px,
      rgba(22,21,19,0.07) 16px);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.placeholder-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream);
  padding: 4px 8px;
  border: 1px solid var(--line);
}

.callout {
  background: var(--cream-deep);
  border-left: 3px solid var(--chart-deep);
  padding: 20px 20px 20px 20px;
  margin: 16px 0 16px 0;
  border-radius: 0 4px 4px 0;
  max-width: 65ch;
}
.callout-clay { border-left-color: var(--clay); }
.callout .mono { font-size: 14px; color: var(--muted); display: block; margin-bottom: 4px; }

/* ───────────────── Chrome ───────────────── */
.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px var(--gutter);
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-name, .brand-tag { white-space: nowrap; color: var(--ink); }
.brand-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--chart);
  display: inline-block;
  align-self: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #00000010;
}
.brand-mark::before, .brand-mark::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid #ffffff90; border-radius: 50%;
  transform: scale(1.6);
}
.brand-mark::after { transform: scale(1.6) rotate(90deg); border-color: transparent #ffffff90 transparent #ffffff90; }
.brand-name { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.brand-tag { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; }

.nav {
  display: flex; gap: 4px; justify-self: center;
  background: #16151308; border-radius: 999px; padding: 4px;
}
.nav button {
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  padding: 8px 16px; border-radius: 999px; border: 0;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background 0.15s;
}
.nav button:hover { background: #16151310; }
.nav button.active { background: var(--ink); color: var(--cream); }

.cta { justify-self: end; display: flex; gap: 8px; align-items: center; }

.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 80px 0 0;
  margin-top: 80px;
}
.footer .wrap { display: grid; gap: 48px; padding-bottom: 32px; }
.footer-big {
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.footer a:hover { color: var(--chart); }
.footer .btn-ghost-dark:hover { color: var(--ink); }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-cols h4 {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--muted); margin-bottom: 16px; font-weight: 500;
}
.footer-cols ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid #ffffff20;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

.rail { position: sticky; top: 80px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.rail-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.rail-card.surface-ink { background: var(--ink); color: var(--cream); border-color: #ffffff15; }
.rail-card.surface-ink .label-chart { color: var(--chart); }
.rail-card.surface-ink .accent-chart { color: var(--chart); }
.rail-list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rail-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Floating sub-cards on home hero */
.hero-float { position: absolute; min-width: 200px; max-width: 240px; }
.hero-float-tr { top: -16px; right: -16px; }
.hero-float-bl { bottom: -16px; left: -16px; }

/* WTC banner stats overlay */
.wtc-stats {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.wtc-stat { background: var(--ink); border: 1px solid #ffffff20; padding: 10px 12px; border-radius: var(--radius-sm); }
.wtc-stat-num { font-family: var(--serif); font-size: 24px; color: var(--chart); line-height: 1; }
.wtc-stat-label { font-family: var(--mono); font-size: 9px; color: #ffffff80; letter-spacing: 0.1em; margin-top: 2px; display: block; }

/* Masters list */
.masters-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.masters-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: padding 0.15s;
}
.masters-row:hover { padding-left: 8px; }

/* Path cards (home → rulebook) */
.path-card { position: relative; overflow: hidden; cursor: pointer; }
.path-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.path-items { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.path-items li { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }

/* Filter bar (sticky-ish row of search + pills) */
.filter-bar {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--topbar-h);
  background: var(--cream);
  z-index: 10;
}
.filter-divider { width: 1px; height: 24px; background: var(--line-strong); }

/* Calendar month header */
.calendar-month-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }

/* Division/level cards */
.division-card { border-radius: var(--radius); padding: 16px; background: var(--cream-deep); }


/* Category pills (inline labels) */
.cat-pill { padding: 5px 10px; background: var(--surface-mid, rgba(0,0,0,0.05)); border-radius: 6px; font-size: 13px; white-space: nowrap; color: var(--muted); font-family: var(--mono); letter-spacing: 0.04em; }

/* Disciplinary step rows */
.step-row { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.step-num { font-family: var(--serif); font-size: 28px; color: var(--clay); }

/* Two-column dot checklist (TD planning) */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 12px 0; }
.checklist-item { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.checklist-item .dot { width: 4px; height: 4px; border-radius: 2px; display: inline-block; }

/* Sticky calendar table headers */
.tbl-cal thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cream);
  box-shadow: 0 1px 0 var(--line);
}
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--cream-deep); color: var(--ink); border: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab.active { background: var(--ink); color: var(--cream); }

/* Ticker (hero strip) */
.ticker { overflow: hidden; width: 100%; position: relative; }
.ticker-track {
  display: flex; gap: 48px; white-space: nowrap; width: max-content;
  animation: tickerScroll 50s linear infinite;
}
.ticker-item { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.05em; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Footer extras */
.footer-cta { margin-top: -16px; flex-wrap: wrap; }
.footer-divider { height: 1px; width: 100%; background: #ffffff20; margin: 16px 0; }
.footer-brand { margin-bottom: 16px; display: inline-flex; }
.footer-tagline { font-size: 14px; color: #D9D5C880; max-width: 280px; margin-top: 12px; line-height: 1.5; }

/* Mobile drawer contact block */
.mobile-drawer-contact { margin-top: 8px; padding-top: 24px; }

/* ───────────────── Controls ───────────────── */
.btn {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-primary:hover { background: var(--chart); color: var(--ink); border-color: var(--chart); }
.btn-chart { background: var(--chart); color: var(--ink); border-color: var(--chart); }
.btn-chart:hover { background: var(--ink); color: var(--chart); border-color: var(--ink); }
.btn-ghost-dark { color: var(--cream); border-color: #ffffff30; }
.btn-ghost-dark:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
.btn-link { background: transparent; border: 0; color: var(--ink); padding: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--cream);
  white-space: nowrap;
}
.chip-chart { background: var(--chart); color: var(--ink); }
.chip-clay { background: var(--clay); color: var(--cream); }
.chip-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.chip-muted { background: var(--cream-deep); color: var(--muted); border: 1px solid var(--line); }

input.search, select.filter {
  font-family: var(--sans); font-size: 14px;
  padding: 10px 14px; background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); outline: none;
}
input.search:focus, select.filter:focus { border-color: var(--ink); }
input.search { min-width: 240px; }

/* Pill-tab (used for filter regions, prose section nav) */
.pill {
  font-size: 12px; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.pill.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pill.chart.active { background: var(--chart); color: var(--ink); border-color: var(--chart); }

/* ───────────────── Sync activity indicator ───────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.sync-spinner {
  width: 12px; height: 12px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--chart-deep);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block; flex-shrink: 0;
}
.sync-spinner.on-ink { border-color: #ffffff30; border-top-color: var(--chart); }

@keyframes syncSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.sync-bar {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; overflow: hidden; pointer-events: none;
}
.sync-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, var(--chart-deep), transparent);
  animation: syncSweep 1.05s ease-in-out infinite;
}

@keyframes syncPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.sync-label { animation: syncPulse 1.2s ease-in-out infinite; }

@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.live-dot { animation: liveBlink 1.8s ease-in-out infinite; }

/* ───────────────── Misc ───────────────── */
.pride-strip {
  height: 4px;
  background: linear-gradient(90deg,
    var(--pride-1)  0%,     var(--pride-1)  9.09%,
    var(--pride-2)  9.09%,  var(--pride-2)  18.18%,
    var(--pride-3)  18.18%, var(--pride-3)  27.27%,
    var(--pride-4)  27.27%, var(--pride-4)  36.36%,
    var(--pride-5)  36.36%, var(--pride-5)  45.45%,
    var(--pride-6)  45.45%, var(--pride-6)  54.54%,
    var(--pride-7)  54.54%, var(--pride-7)  63.63%,
    var(--pride-8)  63.63%, var(--pride-8)  72.72%,
    var(--pride-9)  72.72%, var(--pride-9)  81.81%,
    var(--pride-10) 81.81%, var(--pride-10) 90.9%,
    var(--pride-11) 90.9%,  var(--pride-11) 100%);
}
.divline { height: 1px; background: var(--line); width: 100%; }
.divline-strong { background: var(--line-strong); }

/* Table */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.tbl th {
  text-align: left;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  padding: 12px 16px; border-bottom: 1px solid var(--line-strong);
}
.tbl td { font-size: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: #16151306; }
.tbl tr[style*="cursor: pointer"]:hover td { background: var(--surface-deep, #16151310); }
.tbl tr:last-child td { border-bottom: 0; }

/* ───────────────── Palette variants ───────────────── */
body[data-palette="court"] {
  --chart: oklch(0.88 0.17 113);
  --chart-deep: oklch(0.78 0.18 113);
  --clay: oklch(0.62 0.14 40);
}
body[data-palette="clay"] {
  --cream: #F1E9DD; --cream-deep: #E6DBC8;
  --chart: oklch(0.62 0.14 40); --chart-deep: oklch(0.55 0.16 40);
  --clay: oklch(0.55 0.16 30);
}
body[data-palette="midnight"] {
  --cream: #15161A; --cream-deep: #1F2026;
  --ink: #F2EFE7; --ink-soft: #D9D5C8;
  --muted: #7A7567;
  --line: #ffffff10; --line-strong: #ffffff22;
  --chart: oklch(0.85 0.2 113); --chart-deep: oklch(0.78 0.2 113);
  --clay: oklch(0.7 0.15 40);
}

body[data-density="cozy"] { --gutter: 24px; --section-pad: 72px; }
body[data-density="airy"] { --gutter: 48px; --section-pad: 128px; }

/* ============================================================
   MOBILE  (≤900)
   ============================================================ */
.mobile-only { display: none; }
.desktop-only { display: initial; }
.mobile-drawer { display: none; }
.hamburger { display: none; }
.topbar-mobile-controls { display: none; }

@media (max-width: 900px) {
  :root { --gutter: 18px; --section-pad: 56px; }

  .mobile-only { display: initial; }
  .desktop-only { display: none !important; }

  /* topbar — fixed on mobile so top-based hide works */
  :root { --topbar-h: 61px; }
  .topbar {
    position: fixed;
    width: 100%;
    top: 0;
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .topbar--hidden { top: calc(-1 * var(--topbar-h)); }
  /* compensate for fixed topbar: push content down */
  main { padding-top: var(--topbar-h); }
  /* filter bar follows the topbar smoothly */
  .filter-bar { top: var(--topbar-h); transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
  body.topbar-hidden .filter-bar { top: 0; }
  .topbar-inner {
    grid-template-columns: 1fr auto;
    gap: 0;
    padding: 0 var(--gutter);
    height: var(--topbar-h);
  }
  .topbar-inner .nav,
  .topbar-inner .cta { display: none; }
  .brand-tag { display: none; }

  /* mobile right-side controls: search icon + hamburger */
  .topbar-mobile-controls {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* hamburger */
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: transparent;
    color: var(--ink); cursor: pointer; padding: 0;
  }
  .hamburger span { width: 16px; height: 1.5px; background: var(--ink); position: relative; display: block; }
  .hamburger span::before, .hamburger span::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 1.5px;
    background: var(--ink); transition: transform 0.2s;
  }
  .hamburger span::before { top: -5px; }
  .hamburger span::after { top: 5px; }
  .hamburger.open span { background: transparent; }
  .hamburger.open span::before { top: 0; transform: rotate(45deg); }
  .hamburger.open span::after { top: 0; transform: rotate(-45deg); }

  /* drawer — slide down from topbar */
  .mobile-drawer {
    position: fixed; inset: var(--topbar-h) 0 0 0;
    background: var(--cream); z-index: 49;
    padding: 32px var(--gutter) 40px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 0;
    /* hidden state */
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .mobile-drawer.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-drawer .mobile-link {
    font-family: var(--serif); font-size: 40px; line-height: 1; letter-spacing: -0.02em;
    padding: 18px 0; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; color: var(--ink); user-select: none;
    transition: color 0.15s, padding-left 0.15s;
  }
  .mobile-drawer .mobile-link:hover { padding-left: 6px; }
  .mobile-drawer .mobile-link.active { color: var(--clay); font-style: italic; }
  .mobile-drawer .mobile-link.active svg { opacity: 0; }

  /* Accordion items (Players, Directors) */
  .mobile-accordion { border-bottom: 1px solid var(--line); }
  .mobile-accordion .mobile-link { border-bottom: none; }
  .mobile-accordion-chevron { transition: transform 0.2s ease; flex-shrink: 0; opacity: 1 !important; }
  .mobile-accordion-chevron.open { transform: rotate(180deg); }
  .mobile-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .mobile-accordion-body.open { max-height: 600px; }
  .mobile-sub-link {
    display: block;
    font-family: var(--sans); font-size: 15px; font-weight: 500;
    color: var(--ink); opacity: 0.7;
    padding: 10px 16px;
    cursor: pointer;
    transition: opacity 0.15s, padding-left 0.15s;
    border-top: 1px solid var(--line);
  }
  .mobile-sub-link:hover { opacity: 1; padding-left: 22px; }

  .mobile-drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
  .mobile-drawer-cta .btn { justify-content: center; padding: 14px 18px; font-size: 14px; }

  /* All grids → stack */
  .grid-2, .grid-3, .grid-4, .grid-5,
  .grid-hero, .grid-asym, .grid-content-rail, .grid-text-aside,
  .grid-split, .grid-wtc {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .grid-text-aside--mission { gap: 0 !important; }
  .hero-wrap { padding-top: 32px !important; padding-bottom: 24px !important; }
  .hero-wrap .grid-hero { row-gap: 8px !important; }
  /* Court: full width, proportional height on mobile */
  .hero-wrap .grid-hero > div:last-child > div:first-child { height: auto !important; aspect-ratio: 950 / 521; }
  /* Stats: 2-col on tablets, 1-col on phones */
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  /* Division 5-col → 2-col */
  .grid-5 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Display scale: dial back */
  .display-hero { font-size: clamp(48px, 13vw, 72px); line-height: 0.98; }
  .display-1 { font-size: clamp(48px, 12vw, 72px); line-height: 0.98; }
  .display-2 { font-size: 48px; line-height: 0.98; }
  .display-3 { font-size: 40px; }
  .display-4 { font-size: 36px; }
  .display-5 { font-size: 32px; }
  .display-6 { font-size: 26px; }
  .display-stat { font-size: 40px; }
  .stat-num { font-size: 40px; }
  .stat-num-sm { font-size: 32px; }
  .footer-big { font-size: 56px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .footer { padding: 56px 0 0; margin-top: 56px; }

  /* prose */
  .prose h2 { font-size: 32px; margin-top: 40px; }
  .rail { display: none; }

  /* tables */
  .box { width: 100%; box-sizing: border-box; }
  .box-scroll-outer, .box-scroll { width: 100%; min-width: 0; }
  .tbl { font-size: 12px; table-layout: auto; min-width: 100%; }
  .tbl th { font-size: 10px; }
  .tbl th, .tbl td { padding: 10px 12px; }
  .box-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .box-scroll::-webkit-scrollbar { height: 4px; }
  .box-scroll::-webkit-scrollbar-track { background: transparent; }
  .box-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

  /* cards & boxes */
  .card { padding: 16px; }
  .box-padded-lg { padding: 20px; }

  /* row defaults — chip rows wrap */
  .row.gap-12 { gap: 8px; flex-wrap: wrap; }
  .wrap-row .flex-1 { flex: 1 1 100%; }
  .between { flex-wrap: wrap; gap: 16px; }
  .section-head { gap: 16px; }
  .page-head-row { gap: 24px; align-items: flex-start; }
  .page-head { padding-bottom: 48px; }

  /* stat borderless: drop the border-left treatment on mobile (looks like an orphan rule) */
  .stat-borderless { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }

  /* Hero floating cards: pin inline */
  .hero-btn-row { margin-bottom: 32px; }
  .hero-float { position: static; margin-top: 16px; max-width: none; }
  .hero-float-tr, .hero-float-bl { top: auto; right: auto; bottom: auto; left: auto; }

  /* WTC stats: stack inline below the placeholder */
  .wtc-stats { position: static; margin-top: 16px; }
  .wtc-stat-num { font-size: 22px; }

  /* Path items single column */
  .path-items { grid-template-columns: 1fr; }

  /* Filter bar: re-stick below topbar on mobile — handled above */
  .filter-divider { display: none; }

  /* Step rows: compress index column */
  .step-row { grid-template-columns: 48px 1fr; gap: 12px; }

  /* Checklist: stack to single column */
  .checklist { grid-template-columns: 1fr; }

  /* Race leaderboard rows: shrink pts column, compress status */
  .race-row-pts { width: 64px !important; padding: 10px 8px !important; }
  .race-row-status { width: 110px !important; padding: 10px 8px !important; font-size: 10px; }
  .race-row-status span[style] { font-size: 8px !important; padding: 2px 6px !important; letter-spacing: 0.08em !important; }


}

@media (max-width: 520px) {
  .grid-4, .grid-3, .grid-5 { grid-template-columns: 1fr !important; }
  .footer-cols { grid-template-columns: 1fr; }
  .display-hero { font-size: 48px; }
  .ticker-item { font-size: 10px; }

  /* Race leaderboard rows: tighten further on phones */
  .race-row-pts { width: 56px !important; padding: 10px 6px !important; }
  .race-row-status { width: 90px !important; padding: 10px 6px !important; font-size: 9px; }
  .race-row-status span[style] { font-size: 7px !important; padding: 2px 5px !important; letter-spacing: 0.06em !important; }
  .display-1 { font-size: 44px; }
  .display-2 { font-size: 40px; }
  .mobile-drawer .mobile-link { font-size: 32px; }

  /* Scrollable tables */
  .box-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Map toolbar — suppress focus ring on filter pills */
.map-toolbar button:focus,
.map-toolbar button:focus-visible { outline: none !important; box-shadow: none !important; }

/* Leaflet map tooltip */
.glta-map-tip {
  background: var(--cream) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 6px !important;
  padding: 7px 11px !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.glta-map-tip::before { display: none !important; }

/* Draw size calculator — always show spin buttons on number inputs */
.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button {
  opacity: 1;
}
/* ============================================================
   §  Anchors · Global search · AI assistant  (added)
   ============================================================ */

/* Anchored headings: offset for sticky topbar + highlight flash */
[id^="players-"], [id^="directors-"],
#home-upcoming, #home-wtc, #home-masters, #home-paths,
#about-mission, #about-board, #about-contact, #race-scoring {
  scroll-margin-top: calc(var(--topbar-h) + 24px);
}
@keyframes anchorFlash {
  0%   { background: transparent; }
  18%  { background: oklch(0.88 0.17 113 / 0.45); }
  100% { background: transparent; }
}
.anchor-flash {
  animation: anchorFlash 1.8s ease-out;
  border-radius: var(--radius-sm);
}

/* ─────────────── Search trigger (top bar) ─────────────── */
.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-muted);
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.search-trigger:hover { border-color: var(--ink); color: var(--ink); }
.search-trigger-text { font-size: 13px; }
.search-trigger-kbd {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 5px; background: var(--cream-deep);
  color: var(--muted); border: 1px solid var(--line);
}
.search-trigger-compact { display: none; padding: 0; width: 40px; height: 40px; justify-content: center; }

/* ─────────────── Search modal ─────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0 0 0 / 0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  animation: searchFade 0.14s ease-out;
}
@keyframes searchFade { from { opacity: 0; } to { opacity: 1; } }
.search-panel {
  width: 100%; max-width: 620px; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 24px 70px oklch(0 0 0 / 0.35);
  animation: searchPop 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes searchPop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--muted);
}
.search-input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--sans); font-size: 18px; color: var(--ink);
}
.search-input::placeholder { color: var(--muted); }
.search-esc {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line-strong); background: transparent;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
}
.search-esc:hover { color: var(--ink); border-color: var(--ink); }
.search-results { overflow-y: auto; padding: 8px; }
.search-group-label, .search-suggest .search-group-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); padding: 10px 12px 6px;
}
.search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font-family: var(--sans);
}
.search-row.active, .search-row:hover { background: var(--cream-deep); }
.search-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-row-title { font-size: 15px; font-weight: 500; }
.search-row-meta { font-size: 12px; color: var(--muted); }
.search-kind-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px;
  flex-shrink: 0;
}
.search-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.search-footer {
  display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted);
}
.search-footer kbd {
  font-family: var(--mono); font-size: 10px; padding: 1px 5px; margin-right: 2px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: var(--cream-deep);
}

/* ─────────────── AI assistant (chat) ─────────────── */
.chat-launch-ring {
  position: fixed; right: 24px; bottom: 24px; z-index: 180;
  border-radius: 999px; padding: 3px;
  background: conic-gradient(
    var(--pride-1)  0%,     var(--pride-1)  9.09%,
    var(--pride-2)  9.09%,  var(--pride-2)  18.18%,
    var(--pride-3)  18.18%, var(--pride-3)  27.27%,
    var(--pride-4)  27.27%, var(--pride-4)  36.36%,
    var(--pride-5)  36.36%, var(--pride-5)  45.45%,
    var(--pride-6)  45.45%, var(--pride-6)  54.54%,
    var(--pride-7)  54.54%, var(--pride-7)  63.63%,
    var(--pride-8)  63.63%, var(--pride-8)  72.72%,
    var(--pride-9)  72.72%, var(--pride-9)  81.81%,
    var(--pride-10) 81.81%, var(--pride-10) 90.9%,
    var(--pride-11) 90.9%,  var(--pride-11) 100%);
  box-shadow: 0 8px 28px oklch(0 0 0 / 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.chat-launch-ring:hover { transform: translateY(-2px); box-shadow: 0 12px 34px oklch(0 0 0 / 0.34); }
.chat-launch-ring.hidden { display: none; }
.chat-launch {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 14px; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--cream); border: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
}
.chat-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 34px oklch(0 0 0 / 0.34); }
.chat-launch.hidden { display: none; }

.chat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 181;
  width: 390px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 24px 70px oklch(0 0 0 / 0.32);
  opacity: 0; transform: translateY(16px) scale(0.98);
  pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.chat-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--cream-deep);
}
.chat-header-id { display: flex; align-items: center; gap: 10px; }
.chat-name { font-family: var(--serif); font-size: 20px; line-height: 1; }
.chat-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.chat-close {
  width: 30px; height: 30px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
}
.chat-close:hover { background: var(--line); color: var(--ink); }

.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.chat-intro .chat-p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.chat-suggest-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.chat-suggest {
  text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 13px; line-height: 1.4; transition: all 0.14s;
}
.chat-suggest:hover { background: var(--cream-deep); border-color: var(--ink); }

.chat-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.chat-msg-user { align-items: flex-end; }
.chat-msg-user .chat-bubble {
  background: var(--ink); color: var(--cream); border-radius: 14px 14px 4px 14px;
  max-width: 85%;
}
.chat-msg-assistant .chat-bubble {
  background: var(--cream-deep); color: var(--ink); border-radius: 14px 14px 14px 4px;
}
.chat-bubble { padding: 11px 14px; font-size: 14px; line-height: 1.6; }
.chat-bubble .chat-p { margin: 0 0 8px; }
.chat-bubble .chat-p:last-child { margin-bottom: 0; }
.chat-ul { margin: 4px 0 8px; padding-left: 18px; }
.chat-ul li { margin-bottom: 4px; }
.chat-related { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-jump {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--chart); background: oklch(0.88 0.17 113 / 0.15); color: var(--ink);
  transition: background 0.14s;
}
.chat-jump:hover { background: var(--chart); }

.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: chatBlink 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatBlink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.chat-input-row {
  display: flex; align-items: flex-end; gap: 8px; padding: 12px;
  border-top: 1px solid var(--line);
}
.chat-input {
  flex: 1; resize: none; max-height: 120px; font-family: var(--sans); font-size: 14px;
  line-height: 1.5; padding: 10px 12px; border-radius: 12px; color: var(--ink);
  border: 1px solid var(--line-strong); background: transparent; outline: none;
}
.chat-input:focus { border-color: var(--ink); }
.chat-send {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center; transition: background 0.14s;
}
.chat-send:hover:not(:disabled) { background: var(--chart); color: var(--ink); }
.chat-send:disabled { opacity: 0.4; cursor: default; }
.chat-disclaimer {
  font-size: 10px; color: var(--muted); text-align: center;
  padding: 0 12px 10px; line-height: 1.4;
}

@media (max-width: 900px) {
  .search-trigger-compact { display: inline-flex; }
  .search-overlay { padding: 8vh 12px 12px; }
  .search-input { font-size: 16px; }
  .chat-launch-ring { right: 16px; bottom: 16px; }
  .chat-launch { padding: 12px; }
  .chat-launch span:not(.brand-mark) { display: none; }
  .chat-panel {
    right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
    height: 88vh; max-height: 88vh; border-radius: 18px 18px 0 0;
  }
}

/* ── Accessibility: respect user's motion preference ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Pause the continuous ticker and court animations */
  .ticker-track { animation: none !important; }
}