: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;
}

/* Team hub: title + subtitle (left column) vs season picker (right), one row band. */
.hero-team-hub { padding-bottom: 8px; }
.hero-team-hub .team-hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 28px;
  margin-bottom: 16px;
}
.hero-team-hub .team-hero-text {
  flex: 1 1 min(460px, 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-team-hub .team-hero-text h1 {
  margin-bottom: 0;
}
.hero-team-hub .team-hero-text p.lead {
  margin: 0;
  max-width: none;
}

/* Editorial bridge — continues the headline block instead of floating as orphaned meta. */
.hero-team-hub .team-hero-summary {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(168, 85, 247, 0.14);
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 38rem;
  letter-spacing: 0.01em;
}
.hero-team-hub .team-hero-head .search-card.team-year-pick {
  margin-top: 0;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .hero-team-hub .team-hero-head {
    flex-direction: column;
    align-items: stretch;
  }
}

.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);
}

/* Native selects — match inputs; chevron replaces OS default arrow. */
.field select {
  --season-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath stroke='%23a89bd9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l3 3 3-3'/%3E%3C/svg%3E");
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.28);
  background-image: var(--season-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 40px 11px 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  font-family: inherit;
  min-width: 7.5rem;
  color-scheme: dark;
}
.field select:hover {
  border-color: var(--border-strong);
  background-color: rgba(0, 0, 0, 0.38);
}
.field select:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22);
}
.field select option {
  background: var(--bg-card);
  color: var(--text);
}

/* Team hub — season picker: compact pill-in-card, not a full enquiry form block. */
.search-card.team-year-pick {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  padding: 14px 18px;
  margin-top: 0;
  max-width: 100%;
  box-shadow: 0 12px 40px -24px rgba(124, 58, 237, 0.5);
}
.search-card.team-year-pick .field {
  margin-bottom: 0;
  gap: 8px;
  max-width: none;
}
.search-card.team-year-pick label {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 700;
}
.search-card.team-year-pick select {
  min-width: 7.75rem;
  padding-block: 10px;
  border-radius: 999px;
  border-color: rgba(168, 85, 247, 0.28);
  background-color: rgba(26, 19, 53, 0.85);
  background-position: right 16px center;
}
.search-card.team-year-pick select:hover {
  border-color: rgba(168, 85, 247, 0.45);
  background-color: rgba(26, 19, 53, 0.95);
}
.search-card.team-year-pick select:focus-visible {
  border-color: var(--primary-strong);
}

@media (max-width: 520px) {
  .search-card.team-year-pick {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .search-card.team-year-pick select {
    width: 100%;
  }
}

.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);
  text-decoration: none;
}
.team-pill.mine { background: rgba(168, 85, 247, 0.18); border-color: var(--primary); color: white; font-weight: 700; }
.team-pill.team-pill--stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  text-align: center;
  max-width: 8.75rem;
  line-height: 1.2;
  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.45);
}
.team-pill.mine.team-pill--stack {
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.35),
    0 6px 18px -8px rgba(168, 85, 247, 0.55);
}
.team-pill.team-pill--stack:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 4px 16px -4px rgba(124, 58, 237, 0.35);
}
.team-pill.mine.team-pill--stack:hover {
  box-shadow:
    0 0 0 1px rgba(216, 180, 254, 0.45),
    0 8px 22px -8px rgba(168, 85, 247, 0.65);
}
.team-pill.team-pill--stack .team-pill-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.team-pill.team-pill--stack .team-pill-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.team-pill.mine.team-pill--stack .team-pill-name {
  color: rgba(255,255,255,0.93);
}

.playlist-hero-teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 16px;
  margin: 10px 0 8px;
  align-items: stretch;
}
.playlist-hero-team {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  min-width: 0;
  min-height: 100%;
  background: linear-gradient(165deg, rgba(168, 85, 247, 0.12) 0%, var(--bg-card) 52%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px -12px rgba(124, 58, 237, 0.35);
}
.playlist-hero-num {
  font-size: clamp(20px, 4.2vw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  flex-shrink: 0;
}
.playlist-hero-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  width: 100%;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-top: 8px;
  border-top: 1px dashed rgba(168, 85, 247, 0.28);
}
.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 .k.scouting-peer-heading {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: normal;
  color: var(--text-muted);
}
.kv .k.scouting-peer-heading .scouting-team-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}
.kv .k.scouting-peer-heading .standing-team-name {
  font-size: 13px;
}
.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; line-height: 1.5; }
ul.awards li:last-child { border-bottom: 0; }
ul.awards .award-team { color: var(--text-muted); }
ul.awards .award-hub-link.standing-team:hover { text-decoration: underline; }
ul.awards .award-team .standing-team-name { font-size: 12px; }

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: start;
  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; align-self: start; }
.standing-team {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
  text-decoration: none;
}
.standing-team:hover { text-decoration: underline; }
.standing-team-num { font-weight: 700; }
.standing-team-sep {
  color: var(--text-dim);
  font-weight: 500;
}
.standing-team-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.25;
}
.standing-record {
  align-self: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.standing-played {
  align-self: center;
  color: var(--text-dim);
  font-size: 12px;
  text-align: right;
}
.opr-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(72px, 1fr) 52px;
  align-items: start;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.opr-list .opr-bar,
.opr-list .opr-num { align-self: center; }
.opr-list .opr-list-team { min-width: 0; align-self: start; }

/* Championship: team number on its own line, nickname wraps below — keeps grids tidy */
.leaderboard .standing-team.standing-team--stack,
.champ-deep-card .standing-team.standing-team--stack,
ul.awards .standing-team.standing-team--stack {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  line-height: 1.25;
}
.leaderboard .standing-team.standing-team--stack .standing-team-name,
.champ-deep-card .standing-team.standing-team--stack .standing-team-name,
ul.awards .standing-team.standing-team--stack .standing-team-name {
  display: block;
  font-size: 12px;
  line-height: 1.38;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: var(--text-muted);
}
.leaderboard .leaderboard-rank-cell--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.leaderboard-seed {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}
ul.awards .award-recipient-slot {
  display: inline-flex;
  vertical-align: top;
  max-width: min(260px, 100%);
}
ul.awards .award-multi-sep { vertical-align: top; }
.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: start;
  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 .leaderboard-rank-cell .standing-team.standing-team--stack {
  min-width: 0;
  align-self: stretch;
}
.leaderboard .value {
  color: var(--primary-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  justify-self: end;
  align-self: center;
}
.leaderboard .hint {
  color: var(--text-dim);
  font-size: 12px;
  justify-self: end;
  text-align: right;
  align-self: center;
}

@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-landing { max-width: 720px; margin: 0 auto; }

.hero-compare-compact {
  padding-top: 28px;
  padding-bottom: 14px;
}
.compare-hero-heading {
  margin: 8px 0 0;
  font-size: clamp(1.2rem, 2.65vw, 1.62rem);
  line-height: 1.42;
  font-weight: 600;
  color: var(--text);
  max-width: 40rem;
}
.compare-hero-heading .compare-hero-nums {
  font-weight: 700;
  white-space: normal;
}
.compare-hero-heading .compare-hero-num {
  display: inline;
  font-weight: 800;
  font-size: clamp(1.38rem, 3.05vw, 1.88rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-compare-compact .compare-hero-season {
  margin: 10px 0 0;
  max-width: 40rem;
}

.compare-form-bar {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.compare-form-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
}
.compare-form-bar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.compare-form-bar-input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  padding: 8px 12px;
  font-size: 15px;
}
.compare-form-bar-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
section.compare-edit-strip {
  padding: 14px 0 20px;
}
@media (max-width: 520px) {
  .compare-form-bar-inner .btn,
  .compare-form-bar-inner .btn.ghost {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

.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: 12px 14px 14px;
}
.h2h-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.h2h-team-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: min(160px, 42vw);
  text-align: center;
}
.h2h-team-num {
  font-size: 22px;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.h2h-team-nick {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.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;
}

/* Helpful-counts page-row card. Used by /admin/helpful.php. Sits next to
   .admin-lead in the language: same chrome, but the row body is a label-
   plus-count instead of a message thread. The thin bar at the bottom shows
   share of the leader so the relative volume across pages is visible at
   a glance without a separate chart. */
.admin-page-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-page {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.admin-page:hover { border-color: var(--border-strong); }
.admin-page.is-leader {
  border-left: 3px solid rgba(168, 85, 247, 0.85);
  padding-left: 15px;
}
.admin-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-page-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.admin-page-slug {
  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;
  text-decoration: none;
}
.admin-page-slug:hover {
  color: var(--primary-strong);
  text-decoration: none;
}
.admin-page-count {
  margin-left: auto;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.admin-page-share {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}
.admin-page-bar {
  margin-top: 10px;
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
}
.admin-page-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.65), rgba(236, 72, 153, 0.65));
  border-radius: 999px;
  transition: width 0.3s ease;
}

@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; }
  .admin-page-count { font-size: 18px; }
}

/* ---------- Per-team consistency drill-down ----------
   Click "Form X" under a partner/opponent row on /results.php?my_team=<n>
   to expand a small per-match list that "shows the work" behind the
   consistency score. Each row is one played match: our score, opponent
   score, signed margin, W/L/T. Outlier rows (margin >1.5σ from the team's
   own mean, σ floor 12) get a small chip so the strategist can spot
   "they had one bad match" vs. "they're genuinely streaky". The HTML is
   rendered by ViewHelpers::consistencyDrillHtml; data comes from
   MyTeamInsightsService::teamMatchSamples. */
.consistency-drill {
  margin-top: 6px;
}
.consistency-drill > .cd-summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  list-style: none;
  padding: 2px 0;
  user-select: none;
}
.consistency-drill > .cd-summary::-webkit-details-marker { display: none; }
.consistency-drill > .cd-summary::before {
  content: "\25B8";
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
  display: inline-block;
}
.consistency-drill[open] > .cd-summary::before { transform: rotate(90deg); }
.consistency-drill .cd-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.consistency-drill .cd-score-value {
  color: var(--primary-strong);
  font-weight: 600;
  font-size: 13px;
}
.consistency-drill .cd-meta { color: var(--text-dim); }
.consistency-drill .cd-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.05);
  font-size: 12px;
}
.consistency-drill .cd-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  color: var(--text);
}
.consistency-drill .cd-row + .cd-row { border-top: 1px dashed var(--border); }
.consistency-drill .cd-match { color: var(--text-muted); }
.consistency-drill .cd-score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.consistency-drill .cd-dash { color: var(--text-dim); margin: 0 3px; }
.consistency-drill .cd-margin {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 36px;
  text-align: right;
}
.consistency-drill .cd-result {
  display: inline-block;
  width: 18px;
  text-align: center;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 0;
  font-size: 11px;
}
.consistency-drill .cd-row.cd-win .cd-result {
  background: rgba(52, 211, 153, 0.18);
  color: var(--good);
}
.consistency-drill .cd-row.cd-loss .cd-result {
  background: rgba(248, 113, 113, 0.16);
  color: var(--bad);
}
.consistency-drill .cd-row.cd-tie .cd-result {
  background: rgba(168, 85, 247, 0.12);
  color: var(--text-muted);
}
.consistency-drill .cd-outlier {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}
.consistency-drill .cd-row.is-outlier .cd-margin {
  color: var(--warn);
  font-weight: 600;
}

/* ---------- Print stylesheet ----------
   Pit-friendly print mode: when a strategist hits "Print scouting card"
   on /results.php?my_team=<n>, the page reflows for laser-printer reality:
   single column, dark text on white, no images / gradients / shadows, page
   breaks placed so a match card never splits across two pages. Interactive
   chrome (nav, footer, buttons, spinner, share, helpful prompt) is hidden
   entirely — paper has no use for them.

   Designed for B&W printing on A4 / US Letter portrait. We don't try to be
   page-perfect; we try to be readable, scannable in a pit, and not waste
   paper. Tune typography in person via Cmd+P preview if a clipboard run
   reveals something misformatted. */

@media print {
  /* Reset palette to print-friendly. CSS variables fall through cleanly so
     any utility class using them just works without per-class overrides. */
  :root {
    --bg: #ffffff;
    --bg-card: #ffffff;
    --border: #cfcfcf;
    --border-strong: #999999;
    --text: #111111;
    --text-muted: #444444;
    --text-dim: #666666;
    --primary: #5b21b6;
    --primary-strong: #5b21b6;
    --gradient: #5b21b6;
  }

  html, body {
    background: white !important;
    color: var(--text) !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
  }

  /* Page margins: browsers default to ~0.5in which is fine. We just hint
     the paper geometry so subtle elements (e.g. card borders) don't graze
     the margin edge. */
  @page {
    margin: 0.5in;
  }

  /* Things that never print. Anything interactive or chrome-shaped — the
     print button itself goes here so it doesn't appear in the printout. */
  .site-header,
  .site-footer,
  .helpful-row,
  .share-btn,
  .share-toast,
  .loading-overlay,
  .hero-actions,
  .examples,
  .site-nav,
  .site-nav-icon,
  .site-nav-cta,
  .btn,
  button,
  .empty,
  .error {
    display: none !important;
  }

  /* Strip purple-gradient hero text — there's no gradient ink. Replace
     with solid color we can actually print. */
  .hero h1,
  h1, h2, h3 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: var(--text) !important;
  }

  /* Compress the hero so it doesn't eat half of page 1. */
  .hero {
    padding: 0 0 8pt !important;
  }
  .hero h1 {
    font-size: 18pt !important;
    margin: 0 0 4pt !important;
    letter-spacing: 0 !important;
  }
  .hero p.lead {
    font-size: 11pt !important;
    color: var(--text-muted) !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .hero .eyebrow { display: none !important; }

  /* Cards: light hairline borders, no shadows, no gradients, no rounded
     corners (which look weirdly soft in print). Page-break-inside avoid
     so a match card never splits across pages. */
  .card,
  .match,
  .insight,
  .next-up,
  .playoff-outlook,
  .schedule-diff {
    background: white !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    padding: 8pt !important;
    margin-bottom: 6pt !important;
  }

  /* Tighten the surrounding section spacing. Paper is short, ink is finite. */
  .section {
    padding: 6pt 0 !important;
  }
  .section.tight {
    padding: 3pt 0 !important;
  }

  /* Container is full-width on paper. The web's centered max-width hurts
     printable density without adding readability at 10pt. */
  .container {
    max-width: none !important;
    padding: 0 !important;
  }

  /* All links print as plain text. We deliberately do NOT append the
     URL after external links — most external links on the scouting view
     (TBA, streams) are interactive chrome, and a long URL with
     word-break: break-all wraps aggressively, inflating its grid column
     and squeezing the alliance team-pill row into a thin vertical
     column. The reader has a phone if they really need the URL. */
  a {
    color: var(--text) !important;
    text-decoration: none !important;
  }

  /* Per-match action links (Stream / TBA) are pure interactive chrome.
     Hiding them lets the .match grid's third "auto" column collapse,
     restoring full width to the middle column where the alliance pills
     live. This pairs with the no-URL-after-link rule above to keep team
     numbers on a single horizontal row per alliance. */
  .match .actions {
    display: none !important;
  }
  /* The match-grid third column is empty now; let the middle column
     reclaim the slack so alliance pills lay out cleanly side-by-side. */
  .match {
    grid-template-columns: 90pt 1fr !important;
  }
  .alliance {
    flex-wrap: wrap !important;
  }

  /* Make sure status pills and similar inline badges read on paper:
     borders only, no fills, no glows. */
  .status-pill,
  .tag,
  .confidence {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
  }

  /* Progress-bar style elements: replaced with a solid dark bar so the
     filled portion is visible on B&W ink. */
  .bar-track,
  .playoff-bar .bar-track {
    background: #eeeeee !important;
    border: 1px solid var(--border) !important;
  }
  .bar-fill {
    background: #333333 !important;
    box-shadow: none !important;
  }

  /* Consistency drill-down: force-expand on paper. The per-match table
     is the "show your work" the strategist actually wants printed; in
     interactive mode it's hidden behind a <details> chevron, but that
     chevron has no meaning on paper. Override the user-agent rule that
     hides children of a closed <details> by displaying the inner list
     unconditionally. Strip the chevron, remove the tinted background,
     and flatten the outlier chip so it reads cleanly in B&W. */
  .consistency-drill > .cd-summary {
    cursor: default !important;
    color: var(--text) !important;
  }
  .consistency-drill > .cd-summary::before,
  .consistency-drill > .cd-summary::-webkit-details-marker {
    display: none !important;
  }
  .consistency-drill > .cd-list {
    display: block !important;
    background: white !important;
    border: 1px solid var(--border) !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .consistency-drill .cd-row { color: var(--text) !important; }
  .consistency-drill .cd-row.is-outlier .cd-margin {
    color: var(--text) !important;
    font-weight: 700 !important;
  }
  .consistency-drill .cd-outlier {
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
    background: transparent !important;
  }
  .consistency-drill .cd-row.cd-win .cd-result,
  .consistency-drill .cd-row.cd-loss .cd-result,
  .consistency-drill .cd-row.cd-tie .cd-result {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
  }
}