:root {
  --bg: #0b0816;
  --bg-elev: #15102a;
  --bg-card: #1a1335;
  --border: rgba(168, 85, 247, 0.18);
  --border-strong: rgba(168, 85, 247, 0.4);
  --text: #ece9ff;
  --text-muted: #a89bd9;
  --text-dim: #756aa6;
  --primary: #a855f7;
  --primary-strong: #c084fc;
  --primary-deep: #6b21a8;
  --gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --shadow: 0 20px 60px -20px rgba(124, 58, 237, 0.45);
  --radius: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  background-image:
    radial-gradient(900px circle at 0% -10%, rgba(168, 85, 247, 0.15), transparent 60%),
    radial-gradient(700px circle at 100% 10%, rgba(236, 72, 153, 0.10), transparent 60%);
}
a { color: var(--primary-strong); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: #d8b4fe; text-decoration: none; }
img { max-width: 100%; }

/* Horizontal inset for ALL .container blocks (header, footer, main content).
   24px felt too flush against the viewport edge for prominent corner items
   (logo, heart, copyright, footer links); 32px gives a bit of visual breathing
   room without making the design feel airy. */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.section { padding: 56px 0; }
.section.tight { padding: 32px 0; }

/* ---------- Header ----------
   Two-tier layout at ALL widths:
     row 1: brand (col 1, left) | icons cluster (col 2, right)
     row 2: nav links spanning full width
   Using CSS Grid uniformly means desktop and narrow share one mental model;
   only alignment/spacing/typography change at the breakpoint. */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 10px;
  /* Vertical-only — left/right padding comes from .container (32px) so the
     header's edge items align with the body content beneath. */
  padding-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}
.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.brand-text { font-weight: 700; font-size: 18px; }
.brand-text span { color: var(--text-muted); font-weight: 500; margin-left: 6px; }
/* Semantic wrapper around the nav + icon cluster. Always display:contents so
   its children (.site-nav and .site-header-icons) participate as direct
   grid items — the wrapper itself does no layout. */
.site-header-end { display: contents; }

/* Default grid placement (applies at all widths; narrow @media only tweaks
   alignment/spacing). Brand on row 1 col 1, icons on row 1 col 2 right,
   nav spans full width on row 2. */
.brand { grid-column: 1; grid-row: 1; }
.site-header-icons { grid-column: 2; grid-row: 1; justify-self: end; }
.site-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  /* Desktop: left-aligned under the brand. Narrow @media re-centers. */
  justify-content: flex-start;
}
.site-nav a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  /* Keep multi-word labels ("Match playlist") as one unit; if a label can't
     fit, wrap the whole link to the next row rather than splitting mid-phrase. */
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); }

/* Cluster wrapper for the two icon buttons (About + Heart). Keeps them
   side-by-side at a tight gap so they always read as a paired right-side
   utility. Shared parent at desktop AND narrow widths thanks to the
   display:contents trick we use for .site-header-end. */
.site-header-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Two matching circular icon buttons. .site-nav-icon is the quiet utility
   variant (About); .site-nav-cta is the team-mission CTA (Heart) which gets
   a bit more visual weight via a tinted background and a brighter color. */
.site-nav-icon,
.site-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.site-nav-icon svg,
.site-nav-cta svg { display: block; }

.site-nav-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.site-nav-icon:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.32);
  color: var(--text);
}

.site-nav-cta {
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.32);
  color: var(--primary-strong);
}
.site-nav-cta:hover {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.6);
  color: #f9a8d4;
  transform: scale(1.06);
}

/* At narrow widths we keep the same two-row grid but tighten spacing,
   stack the tagline beneath the brand text, and re-center the nav band so
   the menu reads as centered under the brand+heart row instead of being
   anchored to the left edge. */
@media (max-width: 940px) {
  .site-header {
    column-gap: 14px;
    row-gap: 12px;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .site-nav {
    justify-content: center;
    gap: 10px 22px;
  }
  .brand-text { font-size: 17px; line-height: 1.2; }
  .brand-text span {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 13px;
  }
  .site-nav a { font-size: 13.5px; }
}

/* ---------- Hero ---------- */
.hero { padding: 36px 0 32px; }
.hero h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #ffffff 0%, #d8b4fe 60%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 0 20px;
}
/* Tighter hero for prose-heavy pages (about, contribute) so longer headlines don't wrap awkwardly */
.hero.hero-prose h1 {
  font-size: clamp(24px, 2.4vw, 30px);
  max-width: none;
  text-wrap: balance;
}
.hero.hero-prose p.lead {
  font-size: 16px;
  /* Wide enough that a single-sentence lead like compare.php's "Profile,
     awards… for up to three FRC teams." fits on one line on typical
     desktops; multi-line leads (about, contribute) still wrap normally
     because they're well past this width. */
  max-width: 820px;
  /* Lets modern browsers reflow to avoid a single-word last line
     ("orphan"). Falls back gracefully to default wrapping. */
  text-wrap: pretty;
}
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 36px;
  align-items: center;
}
.hero-split .hero-text { min-width: 0; }
@media (max-width: 880px) {
  .hero-split { grid-template-columns: 1fr; gap: 24px; }
}
/* Compact in-flow card that links across pages (e.g. home -> scouting,
   scout -> match playlist). Reads as "here's another tool" without the
   visual weight of a full hero or form. Whole card is the click target. */
.cross-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.cross-link-card:hover {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.06);
  transform: translateY(-1px);
}
.cross-link-text { flex: 1 1 320px; min-width: 240px; }
.cross-link-card h3 {
  margin: 8px 0 6px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.cross-link-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.cross-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary-strong);
  white-space: nowrap;
}
.cross-link-card:hover .cross-link-cta { color: #f9a8d4; }
@media (max-width: 720px) {
  .cross-link-card { padding: 18px 18px; }
  .cross-link-card h3 { font-size: 18px; }
}

/* ---------- Loading overlay ----------
   IMPORTANT: this overlay must keep the GIF in the layout tree at all times.
   Browsers (especially Safari, but also Chrome under some conditions) freeze
   animated GIFs that live inside a `display: none` ancestor — when we then
   flip to `display: flex` on form submit, the browser snaps the GIF on its
   first frame and never starts the animation. Using `visibility` + `opacity`
   keeps the <img> rendered (just invisible and non-interactive), so the GIF
   is decoded and animating before the user ever clicks. */
.loading-overlay {
  position: fixed;
  inset: 0;
  /* Matches the GIF's flat #000019 background so the 200x200 frame
     blends seamlessly into the overlay (no visible square edges). */
  background: rgb(0, 0, 25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  padding: 24px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Activated state. We deliberately render the overlay opaque from frame 1 —
   no fade-in. With a fade animation, fast pages (e.g. scout → results with a
   warm cache) would commit to navigation mid-animation and freeze the overlay
   at partial opacity, making the underlying page show through. Instant
   opacity is reliable across slow + fast pages. */
.loading-overlay.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.loading-overlay .loading-art {
  width: 200px;
  height: 200px;
  margin-bottom: 18px;
}
.loading-overlay .loading-art img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.loading-overlay .loading-text {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 520px;
}
.loading-overlay .loading-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 6px;
}

.eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-strong);
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ---------- Forms ---------- */
.search-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.search-card h2 { margin: 0 0 6px; font-size: 22px; }
.search-card p.muted { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; }
.field input[type="text"], .field input[type="number"], .field input[type="email"], .field textarea {
  background: rgba(0,0,0,0.25);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient);
  color: white;
  border: 0;
  border-radius: 12px;
  padding: 13px 22px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-decoration: none;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: none;
}
.help { font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.examples a {
  display: inline-block;
  font-size: 13px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  margin: 4px 6px 0 0;
}

/* ---------- Cards / sections ---------- */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.section-title h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.section-title .meta { color: var(--text-muted); font-size: 14px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.community-card { position: relative; }
.community-card .community-mark {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  opacity: 0.85;
  border-radius: 12px;
  pointer-events: none;
}
.community-card h2,
.community-card p { padding-right: 72px; }
@media (max-width: 520px) {
  .community-card .community-mark { width: 44px; height: 44px; top: 12px; right: 12px; }
  .community-card h2, .community-card p { padding-right: 56px; }
}
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Strict 2-column grid that wraps to 1 column only on narrow screens (used for contribute cards) */
.grid.cols-2-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .grid.cols-2-fixed { grid-template-columns: 1fr; }
}
/* Strict 3-column grid (used for scout.php feature cards). Plain .cols-3 uses
   auto-fit and ends up rendering 4 columns at desktop widths which makes a
   6-card grid an awkward 4+2; this keeps it a clean 3+3, then collapses to
   2 columns at tablet width and 1 column at mobile. */
.grid.cols-3-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) {
  .grid.cols-3-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid.cols-3-fixed { grid-template-columns: 1fr; }
}

/* ---------- Match playlist list ---------- */
.next-up {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(236, 72, 153, 0.10));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.next-up .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary-strong); }
.next-up .title { font-size: 22px; font-weight: 700; margin: 6px 0 4px; }
.next-up .meta { color: var(--text-muted); font-size: 14px; }
.next-up .when {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  background: rgba(0,0,0,0.25);
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.match {
  display: grid;
  grid-template-columns: 124px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: 10px;
}
.match .when {
  color: var(--text);
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.25;
}
.match .when .day {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.match .when .clock {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}
.match .when small { font-size: 11px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.match .alliances { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.match .vs { color: var(--text-dim); font-weight: 700; font-size: 12px; }
.alliance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.alliance.red { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.25); }
.alliance.blue { background: rgba(96, 165, 250, 0.06); border-color: rgba(96, 165, 250, 0.25); }
.team-pill {
  font-size: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text);
}
.team-pill.mine { background: rgba(168, 85, 247, 0.18); border-color: var(--primary); color: white; font-weight: 700; }

.match .right { text-align: right; }
.match .event { font-size: 12px; color: var(--text-muted); }
.match .actions { margin-top: 6px; display: flex; gap: 8px; justify-content: flex-end; }
.match .actions a { font-size: 13px; }

/* ---------- Score badges ---------- */
.score-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.2);
}
.score-pill strong { color: var(--text); }
.score-pill.high { border-color: rgba(52, 211, 153, 0.35); color: var(--good); }
.score-pill.medium { border-color: rgba(251, 191, 36, 0.35); color: var(--warn); }
.score-pill.low { border-color: rgba(248, 113, 113, 0.35); color: var(--bad); }
.score-pill .win-pct {
  font-weight: 700;
  color: var(--text);
  font-size: 13px;
  padding-left: 4px;
  border-left: 1px solid rgba(255,255,255,0.12);
  margin-left: 2px;
}

.projected-score {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-align: right;
}
.projected-score strong { font-weight: 700; color: var(--text); font-size: 13px; }
.projected-score .vs { padding: 0 4px; color: var(--text-dim); }

/* ---------- Trajectory badge ---------- */
.traj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  margin-left: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  vertical-align: middle;
  cursor: help;
}
.traj-up      { background: rgba(52, 211, 153, 0.16); color: var(--good); }
.traj-down    { background: rgba(248, 113, 113, 0.16); color: var(--bad); }
.traj-steady  { background: rgba(168, 85, 247, 0.14); color: var(--primary-strong); }
.traj-forming { background: rgba(255,255,255,0.05); color: var(--text-dim); }

/* ---------- Schedule difficulty ---------- */
.schedule-diff {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(236, 72, 153, 0.03));
  padding: 18px 20px;
}
.schedule-diff-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.schedule-diff-title {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.schedule-diff-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--text-muted);
}
.schedule-diff-label.diff-above-average { color: var(--bad); border-color: rgba(248, 113, 113, 0.35); }
.schedule-diff-label.diff-average       { color: var(--text-muted); border-color: var(--border); }
.schedule-diff-label.diff-below-average { color: var(--good); border-color: rgba(52, 211, 153, 0.35); }

.schedule-diff-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin: 4px 0 14px;
}
.schedule-diff-bar .fill {
  display: block;
  height: 100%;
  background: var(--gradient);
  border-radius: 999px;
}
.schedule-diff-bar .median-tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
  transform: translateX(-50%);
}

.schedule-diff-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.schedule-diff-numbers > div {
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.schedule-diff-numbers .k {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.schedule-diff-numbers strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.schedule-diff-numbers small {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.confidence {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
}
.confidence.high { background: rgba(52, 211, 153, 0.16); color: var(--good); }
.confidence.medium { background: rgba(251, 191, 36, 0.16); color: var(--warn); }
.confidence.low { background: rgba(248, 113, 113, 0.16); color: var(--bad); }

/* ---------- Insight cards ---------- */
.insight {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 16px;
}
.insight .header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.insight .title { font-weight: 700; font-size: 17px; }
.insight .meta { color: var(--text-muted); font-size: 13px; }
.insight .highlight {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(236, 72, 153, 0.06));
  border: 1px solid var(--border-strong);
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.metric {
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.metric .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
.metric .value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.metric .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.bar > span { display: block; height: 100%; background: var(--gradient); border-radius: 999px; }

/* ---------- Team profile ---------- */
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 18px;
}
.team-card .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.team-card .head h2 {
  margin: 0;
  font-size: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  line-height: 1.2;
}
.team-card .head .nick {
  color: var(--text);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.team-card .head .where { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.tag {
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--text-muted);
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.kv { background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.kv .k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.kv .v { font-size: 16px; font-weight: 600; color: var(--text); }

ul.awards { list-style: none; padding: 0; margin: 8px 0 0; }
ul.awards li { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
ul.awards li:last-child { border-bottom: 0; }

ul.events { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
ul.events li {
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  /* Vertical-only — left/right padding stays from .container so the
     copyright and footer links align with the header above and the body. */
  padding-top: 32px;
  padding-bottom: 56px;
  margin-top: 60px;
  color: var(--text-muted);
  font-size: 14px;
}
.site-footer a { color: var(--text-muted); }
.site-footer .row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.support-strip {
  margin-top: 28px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(236, 72, 153, 0.06));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.support-strip .text { color: var(--text); font-size: 14px; }

.empty {
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--text-muted);
  text-align: center;
}
.error {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fecaca;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.hr-soft { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

/* ---------- Hero actions + Share button ---------- */
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.share-btn .share-icon {
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.share-btn:hover .share-icon {
  opacity: 1;
  transform: translateY(-1px);
}
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 14px);
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1100;
}
.share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* End-of-page share row: a subtle "send this to your team" affordance.
   Used on the homepage, scout, championship, and the 3 guide pages. */
.share-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.share-card .share-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.share-card .share-card-text strong {
  color: var(--text);
  font-weight: 600;
}
.share-card .share-card-text span {
  color: var(--text-muted);
  font-size: 0.95em;
}
@media (max-width: 520px) {
  .share-card { justify-content: flex-start; }
}

/* "Was this helpful?" prompt row. Sits above .share-card on result, scout,
   championship, and guide pages. Visually quieter than share-card so the
   page's primary CTA still wins attention; it should read as a small
   feedback nudge, not a button vying with the page's main actions. */
.helpful-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.helpful-row .helpful-prompt {
  font-weight: 500;
}
.helpful-row .helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.helpful-row .helpful-btn:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--primary-strong);
  transform: translateY(-1px);
}
.helpful-row .helpful-btn:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
}
.helpful-row .helpful-icon {
  opacity: 0.85;
  flex-shrink: 0;
}
.helpful-row .helpful-thanks {
  color: var(--text-muted);
  font-style: italic;
}
.helpful-row.is-done {
  /* The whole row visually steps back once the user has signaled. */
  opacity: 0.85;
}

/* Contribute / intake form. The shared .field/.btn styles do most of the
   heavy lifting; rules here are about layout and the form-specific bits
   (banners, two-column rows, optional/feature-ok affordances). */
.contact-form-card {
  max-width: 720px;
  margin: 0 auto;
}

/* Hide the contact form on first paint when JS is enabled and the page has
   no transient state (no ?sent, ?error, ?intent, no prefilled values). The
   four intent cards above already communicate the action; revealing the
   form only after a CTA click keeps the first impression cleaner. The
   `html.js` guard means a no-script user always sees the form (graceful).
   The intent-CTA click handler in footer.php removes data-collapsed to
   reveal the form before the native #contact-form scroll lands. */
html.js .contact-form-card[data-collapsed="true"] {
  display: none;
}
.contact-form-eyebrow {
  display: inline-block;
  margin-bottom: 4px;
}
.intent-card .intent-cta {
  margin-top: 4px;
}
.form-row {
  display: grid;
  gap: 14px;
}
.form-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 560px) {
  .form-row-2 { grid-template-columns: 1fr; }
}
.intake-form .field { margin-bottom: 18px; }
.intake-form .field label .optional {
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.intake-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.intake-form .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  line-height: 1.45;
}
.intake-form .checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  /* Native checkboxes look fine; just tint via accent color so the brand
     bleeds in without a custom-styled control we'd have to maintain. */
  accent-color: var(--accent, var(--primary));
  width: 16px;
  height: 16px;
}
.feature-ok-field[hidden] { display: none !important; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.form-actions-fallback {
  color: var(--text-muted);
  font-size: 13px;
}

.form-banner {
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-banner strong { color: var(--text); }
.form-banner span { color: var(--text-muted); }
.form-banner-success {
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.38);
}
.form-banner-success strong { color: rgb(134, 239, 172); }
.form-banner-error {
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.38);
}
.form-banner-error strong { color: rgb(252, 165, 165); }

/* ---------- Status pills (shared) ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  white-space: nowrap;
}
.status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}
.status-pill.status-in_progress {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
  background: rgba(248, 113, 113, 0.08);
}
.status-pill.status-in_progress .dot {
  background: #f87171;
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7);
  animation: pulse-red 1.6s ease-out infinite;
}
@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0   rgba(248, 113, 113, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0   rgba(248, 113, 113, 0); }
}
.status-pill.status-starting_soon {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fde68a;
  background: rgba(251, 191, 36, 0.08);
}
.status-pill.status-starting_soon .dot { background: #fbbf24; }
.status-pill.status-not_started {
  border-color: rgba(168, 85, 247, 0.4);
  color: #ddd6fe;
  background: rgba(168, 85, 247, 0.08);
}
.status-pill.status-not_started .dot { background: var(--primary-strong); }
.status-pill.status-completed {
  border-color: rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
  background: rgba(52, 211, 153, 0.08);
}
.status-pill.status-completed .dot { background: var(--good); }

/* ---------- Championship strip (homepage) ---------- */
.champ-strip-section {
  padding: 40px 0 16px;
}
.champ-strip-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.champ-strip-header h2 {
  margin: 8px 0 4px;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.01em;
}
.champ-strip-header .meta {
  color: var(--text-muted);
  font-size: 13px;
}
.champ-strip-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.champ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.champ-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  min-height: 130px;
}
.champ-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(168,85,247,0.06) 100%);
}
.champ-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.champ-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.champ-card-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.champ-card-body.muted { color: var(--text-muted); font-size: 13px; }
.champ-card-body .lead-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.champ-card-body .lead-team {
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
}
.champ-card-body .lead-record {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.champ-card-foot {
  margin-top: auto;
  font-size: 12px;
  color: var(--primary-strong);
  letter-spacing: 0.01em;
}

.champ-einstein {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(168,85,247,0.06) 0%, var(--bg-card) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Championship deep page ---------- */
.champ-deep-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.champ-deep-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.champ-deep-head h3 {
  margin: 4px 0 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 20px;
}
.champ-deep-head .meta {
  color: var(--text-muted);
  font-size: 13px;
}
.champ-deep-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.champ-deep-body {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 22px;
}
.sub-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 10px;
}
.standings, .opr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.standings li {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.standings li:last-child { border-bottom: 0; }
.standing-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.standing-team { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.standing-record { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.standing-played { color: var(--text-dim); font-size: 12px; text-align: right; }
.opr-list li {
  display: grid;
  grid-template-columns: 64px 1fr 56px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.opr-bar {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.opr-bar .fill {
  display: block;
  height: 100%;
  background: var(--gradient);
  border-radius: 999px;
}
.opr-num { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 13px; }
.empty-inline {
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}
.award-team { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.leaderboard {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.leaderboard li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard .rank { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.leaderboard .value { color: var(--primary-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.leaderboard .hint { color: var(--text-dim); font-size: 12px; text-align: right; }

@media (max-width: 980px) {
  .champ-deep-body { grid-template-columns: 1fr 1fr; }
}
.champ-einstein .eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-strong);
  margin-right: 10px;
}
.champ-einstein .meta {
  color: var(--text-muted);
  font-size: 13px;
  margin-left: 6px;
}

@media (max-width: 980px) {
  .champ-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .match { grid-template-columns: 110px 1fr; }
  .match .right { grid-column: 1 / -1; text-align: left; }
  .next-up { grid-template-columns: 1fr; }
  .champ-grid { grid-template-columns: 1fr; }
  .champ-strip-header { align-items: flex-start; }
  .champ-deep-body { grid-template-columns: 1fr; }
}

/* ---------- Playoff outlook card ---------- */
.playoff-outlook {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(236, 72, 153, 0.04));
  padding: 18px 20px;
}
.playoff-outlook.playoff-good   { border-color: rgba(52, 211, 153, 0.35); }
.playoff-outlook.playoff-mixed  { border-color: var(--border); }
.playoff-outlook.playoff-tough  { border-color: rgba(248, 113, 113, 0.30); }

.playoff-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.playoff-title {
  margin: 4px 0 2px;
  font-size: 16px;
  font-weight: 600;
}
.playoff-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.playoff-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.playoff-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 4px;
}
.playoff-bar-head .lbl {
  color: var(--text-muted);
  font-weight: 500;
}
.playoff-bar-head .val {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bar-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.bar-fill.captain  { background: linear-gradient(90deg, #fbbf24, #f97316); }
.bar-fill.alliance { background: var(--gradient); }

.playoff-rank-line {
  font-size: 14px;
  color: var(--text);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.playoff-rank-line strong { font-weight: 700; }
.playoff-rank-line .muted {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
  font-size: 13px;
}

.playoff-foot {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Hype pill (excitement score) ---------- */
.hype-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  white-space: nowrap;
  cursor: help;
}
.hype-pill .hype-glyph { font-size: 13px; line-height: 1; }
.hype-pill .hype-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
}
.hype-pill.hype-must-watch {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(168, 85, 247, 0.16));
  border-color: rgba(168, 85, 247, 0.45);
  color: #fff;
}
.hype-pill.hype-must-watch .hype-num { color: rgba(255, 255, 255, 0.78); }
.hype-pill.hype-worth-a-look {
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.28);
}

/* ---------- Compare page ---------- */
.compare-form { max-width: 720px; margin: 0 auto; }

.compare-grid {
  display: grid;
  gap: 16px;
}
.compare-grid.cols-1 { grid-template-columns: 1fr; max-width: 640px; }
.compare-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.compare-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.compare-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compare-card.error-card {
  border-color: rgba(248, 113, 113, 0.35);
}

.compare-head h2 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  line-height: 1.2;
}
.compare-head .num {
  font-size: 28px;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.compare-head .nick {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}
.compare-head .loc {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}
.compare-head .links {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  font-size: 13px;
}
.compare-head .links a {
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--text-muted);
}
.compare-head .links a:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.compare-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.compare-stats .stat {
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.compare-stats .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.compare-stats .v {
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.compare-events .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: block;
}
.compare-event {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.compare-event:first-of-type { border-top: 0; padding-top: 0; }
.compare-event .event-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.compare-event .event-name a { color: var(--text); }
.compare-event .event-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.compare-event .event-metrics strong {
  font-weight: 600;
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 3px;
}
.compare-card .muted { color: var(--text-muted); }
.compare-card .small { font-size: 13px; }

/* ---------- Head-to-head ---------- */
.h2h-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.h2h-card {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(236, 72, 153, 0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.h2h-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.h2h-team {
  font-size: 22px;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.h2h-vs {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.h2h-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.h2h-row:first-of-type { border-top: 0; }
.h2h-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.h2h-val {
  font-size: 14px;
  color: var(--text);
}
.h2h-val strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary-strong);
}
.h2h-val .muted {
  color: var(--text-muted);
  margin-left: 6px;
  font-size: 13px;
}
.h2h-recent {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.h2h-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 6px 0;
}

@media (max-width: 980px) {
  .compare-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .compare-grid.cols-2,
  .compare-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ---------- Admin views (intake, helpful) ----------
   Self-contained block. Anything namespaced .admin- is only used by pages
   under public/admin/. Color-coded per intent so a long list is scannable
   at a glance. Reuses the rgba palette from .status-pill above so the
   admin views feel native to the rest of the site. */

.admin-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.admin-stat {
  flex: 1 1 160px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.admin-stat-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 6px;
}
.admin-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.admin-stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  align-items: center;
}
.admin-filters-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 4px;
}
.admin-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.admin-filter:hover {
  color: var(--text);
  border-color: var(--border-strong);
  text-decoration: none;
}
.admin-filter.is-active {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.55);
  color: #ddd6fe;
}
.admin-filter-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.admin-filter.is-active .admin-filter-count {
  color: var(--primary-strong);
  background: rgba(168, 85, 247, 0.18);
}

.admin-lead-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-lead {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 18px;
  transition: border-color 0.15s ease;
}
.admin-lead:hover { border-color: var(--border-strong); }
.admin-lead.intent-experience { border-left-color: rgba(96, 165, 250, 0.7); }
.admin-lead.intent-sponsor    { border-left-color: rgba(251, 191, 36, 0.7); }
.admin-lead.intent-resources  { border-left-color: rgba(52, 211, 153, 0.7); }
.admin-lead.intent-kind-word  { border-left-color: rgba(168, 85, 247, 0.85); }

.admin-lead-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.admin-lead-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.admin-lead-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-lead-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}
.admin-lead-pill.intent-experience { border-color: rgba(96, 165, 250, 0.45);  color: #bfdbfe; background: rgba(96, 165, 250, 0.08); }
.admin-lead-pill.intent-sponsor    { border-color: rgba(251, 191, 36, 0.45);  color: #fde68a; background: rgba(251, 191, 36, 0.08); }
.admin-lead-pill.intent-resources  { border-color: rgba(52, 211, 153, 0.45);  color: #a7f3d0; background: rgba(52, 211, 153, 0.08); }
.admin-lead-pill.intent-kind-word  { border-color: rgba(168, 85, 247, 0.5);   color: #ddd6fe; background: rgba(168, 85, 247, 0.08); }
.admin-lead-pill.feature-ok        { border-color: rgba(244, 114, 182, 0.5);  color: #fbcfe8; background: rgba(244, 114, 182, 0.08); }

.admin-lead-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.admin-lead-meta a { color: var(--text); }
.admin-lead-meta a:hover { color: var(--primary-strong); }
.admin-lead-meta-sep { color: var(--text-dim); }
.admin-lead-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 1px 8px;
}

.admin-lead-body {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.admin-empty {
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
}
.admin-empty p { margin: 0; }

.admin-footnote {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
.admin-footnote code {
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .admin-lead-head { gap: 8px; }
  .admin-lead-time { margin-left: 0; flex-basis: 100%; order: 99; }
  .admin-stat { flex: 1 1 120px; padding: 12px 14px; }
  .admin-stat-value { font-size: 18px; }
}