@charset "utf-8";
/*!
 * CFB Zeitgeist — global stylesheet (Stage S.0, 2026-04-23)
 * Generated from src/cfb_rankings/reporting.py at build time.
 * Mechanical migration of inline <style> blocks; refactor lands in S.1+.
 */

/* === Particle motion primitives (doc 94, move 6) === */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.2s ease-in both pk-fade-out}
::view-transition-new(root){animation:.2s ease-in both pk-fade-in}
@keyframes pk-fade-out{from{opacity:1}to{opacity:0}}
@keyframes pk-fade-in {from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes riseIn {from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}
@layer reset, tokens, base, typography, components, utilities, overrides;

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/InterDisplay-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/InterDisplay-Bold.woff2') format('woff2');
}
/* 538/Pudding light migration (2026-06-16): Fraunces serif headlines +
   Archivo sans UI/data. Both OFL, variable woff2 (latin subset). See
   docs/design-system/91-light-migration-playbook.md Appendix D. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Fraunces-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-Variable-Italic.woff2') format('woff2-variations'),
       url('/assets/fonts/Fraunces-Variable-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Archivo-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Archivo-Variable.woff2') format('woff2');
}

/* === Legacy site CSS (verbatim from _site_css()) === */

      /* =======================================================
         FAN INTEL — Premium Editorial Sports UI
         Figma theme tokens
         ======================================================= */
      .skip-link {
        position: absolute;
        top: -40px;
        left: 8px;
        background: #222222;
        color: #FFFFFF;
        padding: 8px 14px;
        text-decoration: none;
        font-weight: 600;
        border-radius: 4px;
        z-index: 1000;
      }
      .skip-link:focus {
        top: 8px;
        outline: 2px solid #008fd5;
        outline-offset: 2px;
      }
      @media print {
        .skip-link, script { display: none !important; }
        body { background: #fff !important; color: #000 !important; }
      }
      /* Keyboard focus — visible ring on all interactive elements */
      a:focus-visible, button:focus-visible, input:focus-visible,
      select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
        outline: 2px solid #008fd5;
        outline-offset: 2px;
        border-radius: 2px;
      }
      .team-link.is-unlinked {
        color: var(--muted-foreground, #4a4a4a);
        text-decoration: none;
        cursor: default;
      }
      /* 538/Pudding migration (Phase 4): Bebas Neue retired in favor of
         Fraunces (self-hosted @font-face). Google-Fonts @import removed. */

      :root {
        /* Core surface palette (Figma) */
        /* 538/Pudding light migration (Phase 4): align global neutrals to doc-90. */
        --background: #ffffff;
        --foreground: #222222;
        --card: #FFFFFF;
        --card-foreground: #222222;
        --popover: #FFFFFF;
        --popover-foreground: #222222;

        --primary: #222222;
        --primary-foreground: #FFFFFF;
        --secondary: #F5F5F5;
        --secondary-foreground: #222222;

        --muted: #f0f0f0;
        --muted-foreground: #5b5b5b;
        --accent-surface: #222222;
        --accent-foreground: #FFFFFF;

        --destructive: #DC2626;
        --destructive-foreground: #FFFFFF;
        --success: #16A34A;
        --success-foreground: #FFFFFF;
        --warning: #EA580C;
        --warning-foreground: #FFFFFF;

        --gradient-start: #0A0A0A;
        --gradient-end: #262626;
        --gradient-accent: #DC2626;

        --team-red: #DC2626;
        --team-blue: #2563EB;
        --team-green: #16A34A;
        --team-orange: #EA580C;
        --team-purple: #9333EA;
        --team-gold: #D97706;

        --border: #e4e4e1;
        --border-strong: #d7d7d4;
        --input-background: #F5F5F5;

        --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
        --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
        --font-display-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
        --font-body: 'Fraunces', Georgia, serif;
        --font-sans: 'Archivo', 'Inter', -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
        --font-numeral: 'Archivo', 'Inter', system-ui, sans-serif;  /* big stat NUMBERS — sans + tnum, never serif */

        --radius-sm: 2px;
        --radius-md: 3px;
        --radius-lg: 3px;
        --radius-xl: 3px;

        /* Back-compat tokens referenced by inline styles in HTML */
        --bg: var(--background);
        --ink: var(--foreground);
        --panel: var(--card);
        --line: var(--border);
        --accent: var(--foreground);
        --accent-2: #3f3f3f;
        --gold: var(--team-gold);
        --positive: var(--success);
        --negative: var(--destructive);
        --missing: var(--muted-foreground);

        --board-columns: 72px 72px minmax(240px, 1.6fr) 92px 100px 100px 88px;
      }

      * { box-sizing: border-box; }

      html { scroll-behavior: smooth; }

      body {
        margin: 0;
        background: var(--background);
        color: var(--foreground);
        font-family: var(--font-sans);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
      }

      a { color: inherit; text-decoration: none; }
      button { font-family: inherit; cursor: pointer; }

      img, svg { max-width: 100%; display: block; }

      /* Editorial display-font utility */
      .display-head,
      .hero h1, .hero-mast h1,
      .section-head h2, .board-heading h2,
      .team-hero h1,
      .feature-card h3, .scenario-card h3, .story-card h3, .archive-card h3,
      .compare-team-card h2,
      .team-mark {
        font-family: var(--font-display);
        letter-spacing: 0.01em;
      }
      /* Big stat numbers: sans + tabular, never serif (doc-90/91 Appendix C). */
      .summary-value,
      .team-rank-chip {
        font-family: var(--font-numeral);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
      }

      ::selection { background: var(--foreground); color: #fff; }

      .team-hero-heading {
        display: flex;
        align-items: center;
        gap: 18px;
      }
      .team-hero-logo {
        width: 96px;
        height: 96px;
        object-fit: contain;
        flex: 0 0 auto;
        border-radius: 6px;
        background: transparent;
      }
      @media (min-width: 768px) {
        .team-hero-logo { width: 120px; height: 120px; }
      }

      /* =======================================================
         Layout shell
         ======================================================= */
      .site-shell {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 16px 80px;
      }
      @media (min-width: 768px) {
        .site-shell { padding: 0 24px 96px; }
      }
      @media (min-width: 1024px) {
        .site-shell { padding: 0 32px 120px; }
      }

      .home-shell,
      .team-shell {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      @media (min-width: 768px) {
        .home-shell, .team-shell { gap: 48px; }
      }

      /* Full-bleed helper for hero sections */
      .hero-mast,
      .premium-home-hero,
      .hero.team-hero,
      .hero.premium-team-hero {
        position: relative;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: max(16px, calc(50vw - 700px));
        padding-right: max(16px, calc(50vw - 700px));
      }

      /* =======================================================
         Navigation
         ======================================================= */
      .brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        text-decoration: none;
        color: var(--foreground);
        border: none;
      }
      .brand__lockup { display: block; width: 200px; height: auto; }
      .brand::before { content: none; }
      .brand::after  { content: none; }

      .nav {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        min-width: 0;
        justify-content: flex-start;
      }

      .nav-link {
        display: inline-flex;
        align-items: center;
        padding: 8px 14px;
        font: 500 14px/1 var(--font-sans);
        color: var(--foreground);
        border-bottom: 2px solid transparent;
        transition: background .15s ease, color .15s ease, border-bottom-color .15s ease;
        white-space: nowrap;
      }
      .nav-link:hover { background: var(--secondary); }
      .nav-link.is-current {
        color: var(--ink);
        border-bottom-color: var(--blue, #008fd5);
      }

      .nav-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
      }

      .nav-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        border-radius: var(--radius-md);
        font: 600 13px/1 var(--font-sans);
        background: transparent;
        color: var(--foreground);
        border: 1px solid transparent;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
        white-space: nowrap;
      }
      .nav-action + .nav-action,
      .nav-action:last-child {
        background: var(--primary);
        color: var(--primary-foreground);
      }
      .nav-action + .nav-action:hover,
      .nav-action:last-child:hover { opacity: 0.9; }
      .nav-action:first-of-type { background: transparent; color: var(--foreground); border-color: transparent; }
      .nav-action:first-of-type:hover { background: var(--secondary); }
      .nav-action.is-current { background: var(--accent-surface); color: var(--accent-foreground); }

      .nav-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 12px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-strong);
        background: var(--card);
        color: var(--foreground);
        font: 600 12px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
      }

      @media (max-width: 900px) {
        .nav { flex-direction: column; gap: 2px; }
        .nav-link { width: 100%; padding: 12px 14px; }
        .nav-actions { flex-direction: column; gap: 6px; align-items: stretch; }
        .nav-action { justify-content: center; width: 100%; }
        .nav-toggle { display: inline-flex; }
        .brand__lockup { width: 130px; }
      }

      /* =======================================================
         Typography primitives
         ======================================================= */
      h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--foreground); }

      .eyebrow {
        display: inline-block;
        margin: 0 0 14px;
        padding: 4px 12px;
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(6px);
        border-radius: 3px;
        font: 500 12px/1.4 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: inherit;
      }

      .hero-mast .eyebrow,
      .premium-home-hero .eyebrow,
      .team-hero .eyebrow {
        background: rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.9);
      }

      .lede {
        margin: 18px 0 0;
        max-width: 760px;
        color: inherit;
        font: 400 17px/1.6 var(--font-sans);
      }
      .mast-copy { margin-left: auto; margin-right: auto; }

      /* Section scaffolding */
      .section {
        margin: 0;
      }
      .section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 20px;
      }
      .section-head h2 {
        font-family: var(--font-display);
        font-size: clamp(28px, 4.2vw, 42px);
        line-height: 1;
        letter-spacing: 0.01em;
        text-transform: none;
      }
      .section-head .section-note {
        margin: 8px 0 0;
        max-width: 680px;
        color: var(--muted-foreground);
        font-size: 15px;
      }
      .compact-head h2 { font-size: clamp(22px, 2.5vw, 28px); }

      /* Dashboard hero-finding: per docs/design-system/30-page-archetypes.md:67-98.
         Single big number + 1-sentence finding + caption. Sits ABOVE the
         existing .hero on Dashboard pages (/, /heisman/, /rankings/, /hub/). */
      .hero-finding {
        padding: clamp(24px, 5vw, 56px) clamp(20px, 4vw, 48px);
        border-bottom: 1px solid var(--rule, rgba(28,28,31,0.12));
        text-align: left;
      }
      .hero-finding__eyebrow {
        font-family: var(--font-ui);
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: none;
        color: var(--muted-foreground);
        font-weight: 600;
        margin: 0 0 12px;
      }
      .hero-finding__number {
        font-family: var(--font-display);
        font-size: clamp(36px, 9vw, 88px);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.01em;
        margin: 0 0 12px;
        font-variant-numeric: tabular-nums;
      }
      .hero-finding__sentence {
        font-family: var(--font-serif, "Source Serif Pro", Georgia, serif);
        font-size: clamp(16px, 2.2vw, 22px);
        line-height: 1.35;
        margin: 0 0 8px;
        max-width: 60ch;
      }
      .hero-finding__caption {
        font-family: var(--font-ui);
        font-size: 12px;
        color: var(--muted-foreground);
        margin: 0;
      }

      /* Dashboard methodology footer: per the archetype spec, every
         Dashboard page should close with a small footer linking to
         methodology + sample-size + "Updated" timestamp. */
      .methodology-footer {
        margin: clamp(32px, 6vw, 64px) 0 0;
        padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 48px);
        border-top: 1px solid var(--rule, rgba(28,28,31,0.12));
      }
      .methodology-footer__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: clamp(12px, 2vw, 28px);
        font-family: var(--font-ui);
        font-size: 12px;
        color: var(--muted-foreground);
      }
      .methodology-footer__link {
        color: var(--foreground);
        text-decoration: none;
        border-bottom: 1px solid currentColor;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: none;
      }
      .methodology-footer__sample,
      .methodology-footer__updated {
        font-variant-numeric: tabular-nums;
      }

      /* Filter widget heads: visually subordinate to editorial sections.
         A filter form is a utility — its label should NOT shout at the
         same hierarchy as "Fast Read" or other content sections. */
      .filter-strip-head {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--rule, rgba(28,28,31,0.12));
      }
      .filter-strip-label {
        font-family: var(--font-ui);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: none;
        color: var(--muted-foreground);
        font-weight: 600;
        margin: 0;
      }
      .filter-strip-head .section-note {
        margin: 0;
        font-size: 13px;
      }

      .footer-note,
      .muted-note,
      .section-note {
        color: var(--muted-foreground);
        font-size: 14px;
        line-height: 1.55;
      }
      .footer-note { margin-top: 16px; }

      .text-link {
        color: var(--foreground);
        font-weight: 600;
        font-size: 14px;
        border-bottom: 1px solid currentColor;
        padding-bottom: 1px;
      }
      .text-link:hover { opacity: 0.7; }

      /* =======================================================
         Hero: home (premium-home-hero / hero-mast)
         ======================================================= */
      .hero-mast,
      .premium-home-hero {
        padding-top: 56px;
        padding-bottom: 64px;
        background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 50%, var(--gradient-start) 100%);
        color: #fff;
        overflow: hidden;
        text-align: left;
      }
      @media (min-width: 768px) {
        .hero-mast,
        .premium-home-hero { padding-top: 80px; padding-bottom: 104px; }
      }
      .hero-mast::before,
      .premium-home-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 20%;
        width: 420px; height: 420px;
        background: var(--gradient-accent);
        opacity: 0.18;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
      }
      .hero-mast::after,
      .premium-home-hero::after {
        content: '';
        position: absolute;
        bottom: 0; right: 20%;
        width: 420px; height: 420px;
        background: var(--team-blue);
        opacity: 0.18;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
      }
      .hero-mast > *,
      .premium-home-hero > * { position: relative; z-index: 1; }

      .hero-mast h1,
      .premium-home-hero h1 {
        font-family: var(--font-display);
        font-size: clamp(32px, 7vw, 76px);
        line-height: 1.02;
        letter-spacing: 0.01em;
        max-width: 14ch;
        color: #fff;
        margin: 0 0 8px;
        text-transform: none;
        overflow-wrap: break-word;
      }
      .premium-home-hero .lede,
      .hero-mast .lede { color: rgba(255,255,255,0.82); font-size: 18px; max-width: 680px; }

      .home-meta-row,
      .premium-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 28px;
      }
      .meta-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 3px;
        color: #fff;
        font-size: 13px;
      }
      .meta-pill span {
        color: rgba(255,255,255,0.7);
        text-transform: none;
        letter-spacing: 0.08em;
        font-size: 11px;
      }
      .meta-pill strong { font-weight: 600; }
      .panel .meta-pill,
      .section .panel .meta-pill {
        background: var(--secondary);
        border-color: var(--border);
        color: var(--foreground);
        backdrop-filter: none;
      }
      .panel .meta-pill span,
      .section .panel .meta-pill span {
        color: var(--muted-foreground);
      }

      /* =======================================================
         Hero: team / program / player pages
         ======================================================= */
      .hero {
        position: relative;
        padding: 40px 24px;
        border-radius: 0;
        background: var(--card);
        border: none;
        box-shadow: none;
      }

      .hero.team-hero,
      .hero.premium-team-hero {
        padding: 48px max(16px, calc(50vw - 700px));
        margin-top: 0;
        background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 60%, #000 100%);
        color: #fff;
        border-radius: 0;
        overflow: hidden;
      }
      @media (min-width: 768px) {
        .hero.team-hero,
        .hero.premium-team-hero { padding-top: 72px; padding-bottom: 72px; }
      }
      .hero.team-hero::before,
      .hero.premium-team-hero::before {
        content: '';
        position: absolute;
        top: 10%; right: 10%;
        width: 360px; height: 360px;
        background: var(--gradient-accent);
        opacity: 0.18;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
      }
      .hero.team-hero > *,
      .hero.premium-team-hero > * { position: relative; z-index: 1; }

      .team-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 16px;
        font-size: 13px;
        color: var(--muted-foreground);
      }
      .team-breadcrumbs a { color: var(--muted-foreground); }
      .team-breadcrumbs a:hover { color: var(--foreground); }
      .team-breadcrumbs strong { color: var(--foreground); font-weight: 600; }
      .team-shell .team-breadcrumbs { padding: 24px 0 0; }

      .team-hero-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 24px;
      }
      .team-hero h1 {
        font-family: var(--font-display);
        font-size: clamp(42px, 8vw, 72px);
        line-height: 1;
        color: #fff;
        text-transform: none;
      }
      .team-hero-sub {
        margin: 8px 0 0;
        color: rgba(255,255,255,0.8);
        font-size: 15px;
      }
      .team-rank-chip {
        padding: 10px 16px;
        background: rgba(255,255,255,0.14);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 3px;
        color: #fff;
        font-family: var(--font-display);
        font-size: 18px;
        letter-spacing: 0.04em;
      }

      .team-stat-ribbon {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 24px;
      }
      @media (min-width: 680px) {
        .team-stat-ribbon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }
      .team-stat-tile {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: var(--radius-lg);
      }
      .team-stat-tile .team-mark {
        flex: 0 0 auto;
        width: 36px; height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: var(--radius-md);
        font-family: var(--font-display);
        font-size: 15px;
        color: #fff;
      }
      .team-stat-tile > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
      .team-stat-tile span { color: rgba(255,255,255,0.7); font-size: 11px; text-transform: none; letter-spacing: 0.08em; }
      .team-stat-tile strong { color: #fff; font: 600 22px/1.1 var(--font-sans); }
      .team-stat-tile .submetric { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 400; }

      .team-hero-actions,
      .cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      /* =======================================================
         Buttons & pills
         ======================================================= */
      .button,
      .button-primary,
      .button-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: var(--radius-md);
        font: 600 14px/1 var(--font-sans);
        border: 1px solid transparent;
        transition: all .15s ease;
        white-space: nowrap;
      }
      .button-primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
      .button-primary:hover { opacity: 0.9; }
      .button-secondary { background: color-mix(in srgb, var(--foreground) 10%, transparent); color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 18%, transparent); backdrop-filter: blur(6px); }
      .button-secondary:hover { background: color-mix(in srgb, var(--foreground) 20%, transparent); }

      /* When buttons appear on light backgrounds (non-hero), flip palette */
      .site-shell > .home-shell .button-primary,
      .site-shell > .home-shell .button-secondary,
      .panel .button-primary, .panel .button-secondary,
      .section .button-primary, .section .button-secondary {
        /* default white-on-dark */
      }
      .panel .button-primary,
      .section .button-primary,
      .mini-panel .button-primary {
        background: var(--primary);
        color: var(--primary-foreground);
      }
      .panel .button-primary:hover,
      .section .button-primary:hover { opacity: 0.9; }
      .panel .button-secondary,
      .section .button-secondary,
      .mini-panel .button-secondary {
        background: transparent;
        color: var(--foreground);
        border-color: var(--border-strong);
      }
      .panel .button-secondary:hover,
      .section .button-secondary:hover { background: var(--secondary); }

      .pill,
      .phase-summary-chip,
      .metric-guide-pill,
      .mini-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 3px;
        background: var(--secondary);
        color: var(--foreground);
        font-size: 12px;
        font-weight: 500;
      }
      .metric-guide-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
      .phase-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

      /* State colors */
      .up, .impact-up, .is-positive { color: var(--success); }
      .down, .impact-down, .is-negative { color: var(--destructive); }
      .flat { color: var(--muted-foreground); }

      /* =======================================================
         Panels / cards (generic)
         ======================================================= */
      .panel,
      .mini-panel {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        padding: 24px;
        transition: box-shadow .18s ease, transform .18s ease;
      }
      @media (max-width: 600px) {
        .panel, .mini-panel { padding: 20px; border-radius: var(--radius-lg); }
      }
      .mini-panel { padding: 18px; border-radius: var(--radius-lg); }

      .prose-panel { padding: 28px; }
      .prose-panel p { color: var(--muted-foreground); line-height: 1.7; font-size: 15px; }

      .panel-kicker {
        font: 600 11px/1.2 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: none;
        color: var(--muted-foreground);
        margin: 0 0 6px;
      }

      /* Dashboard grids */
      .dashboard-grid,
      .premium-dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }
      @media (min-width: 1024px) {
        .dashboard-grid,
        .premium-dashboard-grid {
          grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
          gap: 28px;
        }
      }
      .main-column,
      .side-column,
      .premium-side-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .two-up {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }
      @media (min-width: 880px) {
        .two-up { grid-template-columns: 1fr 1fr; }
      }

      .feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      @media (min-width: 640px) {
        .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (min-width: 1024px) {
        .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
      }
      .scenario-grid,
      .archive-card-grid,
      .pulse-grid,
      .history-level-grid,
      .counts-grid,
      .historical-dna-grid,
      .story-card-grid,
      .impact-card-grid,
      .efficiency-dashboard-grid,
      .history-snapshot-grid,
      .compare-verdict-grid,
      .compare-shortcuts,
      .compare-factor-grid,
      .compare-team-grid,
      .compare-stat-grid,
      .matchup-team-grid,
      .projection-stat-grid,
      .result-pair-grid,
      .team-story-grid,
      .impact-stat-grid,
      .profile-bar-grid,
      .mini-team-stat-grid,
      .journey-tooltip-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      @media (min-width: 720px) {
        .scenario-grid,
        .archive-card-grid,
        .pulse-grid,
        .counts-grid,
        .history-level-grid,
        .historical-dna-grid,
        .story-card-grid,
        .impact-card-grid,
        .efficiency-dashboard-grid,
        .history-snapshot-grid,
        .compare-verdict-grid,
        .compare-shortcuts,
        .compare-factor-grid,
        .compare-stat-grid,
        .matchup-team-grid,
        .team-story-grid,
        .impact-stat-grid,
        .profile-bar-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .compare-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .result-pair-grid { grid-template-columns: 1fr 1fr; }
      }
      @media (min-width: 1024px) {
        .scenario-grid,
        .pulse-grid,
        .history-level-grid,
        .story-card-grid,
        .impact-card-grid,
        .compare-factor-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .counts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }

      .premium-team-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }
      @media (min-width: 960px) {
        .premium-team-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; }
      }
      .premium-team-grid .panel.prose-panel,
      .premium-team-grid .panel.narrative-panel { grid-column: 1 / -1; }

      /* =======================================================
         Summary strip (home side rail)
         ======================================================= */
      .summary-strip,
      .summary-strip-rail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .summary-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 16px;
        padding: 18px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        color: var(--foreground);
        transition: box-shadow .18s ease, transform .18s ease;
        position: relative;
      }
      .summary-card:hover { box-shadow: none; }
      .summary-label {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .summary-detail {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        font-size: 12px;
        color: var(--muted-foreground);
        text-align: right;
      }
      .summary-value {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        font-family: var(--font-display);
        font-size: 28px;
        line-height: 1;
        color: var(--foreground);
      }
      .summary-spark {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        align-self: center;
        color: var(--muted-foreground);
      }

      /* Count cards (subdivision footprint) */
      .count-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 20px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
      }
      .count-kicker {
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .count-card strong { font-family: var(--font-display); font-size: 32px; line-height: 1; }
      .count-card small { color: var(--muted-foreground); font-size: 12px; }

      /* =======================================================
         Team board / smart board
         ======================================================= */
      .team-board { padding: 24px; }
      .board-heading { align-items: flex-start; }
      .board-utility {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 16px 0 12px;
        padding: 16px;
        background: var(--secondary);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
      }
      .board-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      @media (min-width: 720px) {
        .board-controls { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
      }
      .board-control {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .board-control > span {
        font: 500 11px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .board-control input,
      .board-control select {
        appearance: none;
        background: var(--card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: 10px 12px;
        font: 500 14px/1.2 var(--font-sans);
        color: var(--foreground);
        outline: none;
        transition: border-color .15s;
        min-width: 0;
        width: 100%;
      }
      .board-control input:focus,
      .board-control select:focus { border-color: var(--foreground); }
      .board-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }
      .jump-group {
        display: inline-flex;
        gap: 4px;
        padding: 3px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 3px;
      }
      .jump-chip {
        border: 0;
        background: transparent;
        color: var(--foreground);
        padding: 6px 14px;
        border-radius: 3px;
        font: 500 13px/1 var(--font-sans);
      }
      .jump-chip.is-active { background: var(--accent-surface); color: var(--accent-foreground); }
      .board-status {
        font-size: 13px;
        color: var(--muted-foreground);
        margin-left: auto;
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
      }
      .board-status strong { color: var(--foreground); font-family: var(--font-display); font-size: 18px; }
      .clear-filters {
        border: 1px solid var(--border-strong);
        background: transparent;
        color: var(--foreground);
        padding: 8px 14px;
        border-radius: var(--radius-md);
        font: 500 13px/1 var(--font-sans);
      }
      .clear-filters:hover { background: var(--secondary); }
      .active-filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .active-filter-row .filter-chip {
        display: inline-flex;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 3px;
        background: var(--card);
        border: 1px solid var(--border-strong);
        font-size: 12px;
      }

      .board-topline {
        padding: 0 12px;
      }
      .board-column-head {
        display: grid;
        grid-template-columns: var(--board-columns);
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .board-column-head span:nth-child(3) { text-align: left; }
      .board-column-head span { text-align: right; }
      .board-column-head span:first-child,
      .board-column-head span:nth-child(2),
      .board-column-head span:nth-child(3) { text-align: left; }

      .team-board-list {
        display: flex;
        flex-direction: column;
      }

      .board-row {
        border-bottom: 1px solid var(--border);
      }
      .board-row[open] { background: rgba(0,0,0,0.015); }
      .board-row > summary {
        display: grid;
        grid-template-columns: var(--board-columns);
        gap: 8px;
        padding: 14px 16px;
        align-items: center;
        cursor: pointer;
        list-style: none;
        transition: background .12s ease;
      }
      .board-row > summary::-webkit-details-marker { display: none; }
      .board-row > summary:hover { background: var(--secondary); }

      .board-cell {
        font-size: 14px;
        color: var(--foreground);
        text-align: right;
      }
      .board-cell.rank-cell-home {
        font-family: var(--font-display);
        font-size: 20px;
        color: var(--foreground);
        text-align: left;
      }
      .board-cell.board-delta { text-align: left; font-weight: 600; }
      .board-cell.board-delta.up { color: var(--success); }
      .board-cell.board-delta.down { color: var(--destructive); }
      .board-cell.board-delta.flat { color: var(--muted-foreground); }
      .board-cell.board-team-cell {
        display: flex;
        flex-direction: column;
        text-align: left;
        min-width: 0;
      }
      .board-team-name {
        font: 600 15px/1.2 var(--font-sans);
        color: var(--foreground);
      }
      .board-team-meta {
        font-size: 12px;
        color: var(--muted-foreground);
      }
      .board-cell.board-trend { display: flex; justify-content: flex-end; color: var(--muted-foreground); }

      .board-row-body {
        padding: 16px;
        background: var(--secondary);
        border-top: 1px solid var(--border);
      }
      .board-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      @media (min-width: 840px) {
        .board-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .detail-bestwins { grid-column: span 2; }
      }
      .board-detail-grid h3 {
        font-family: var(--font-display);
        font-size: 18px;
        letter-spacing: 0.01em;
        text-transform: none;
        margin-bottom: 10px;
      }
      .detail-watch p { font-size: 14px; color: var(--muted-foreground); margin: 4px 0; }
      .detail-watch p strong { color: var(--foreground); font-weight: 600; }
      .result-slab { padding: 12px; background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--border); }
      .result-slab-wide { grid-column: 1 / -1; }
      .result-kicker { font-size: 11px; text-transform: none; letter-spacing: 0.1em; color: var(--muted-foreground); }
      .result-slab p { margin: 4px 0; font-size: 14px; color: var(--foreground); }

      .board-row-footer {
        padding: 12px 4px 0;
        border-top: 1px solid var(--border);
        margin-top: 14px;
      }

      @media (max-width: 820px) {
        .board-column-head { display: none; }
        .board-row > summary {
          grid-template-columns: 64px 60px 1fr;
          grid-template-rows: auto auto;
          row-gap: 6px;
        }
        .board-row > summary .rank-cell-home { grid-column: 1 / 2; grid-row: 1 / 2; }
        .board-row > summary .board-delta { grid-column: 2 / 3; grid-row: 1 / 2; }
        .board-row > summary .board-team-cell { grid-column: 3 / 4; grid-row: 1 / 2; }
        .board-row > summary .board-record { grid-column: 1 / 2; grid-row: 2 / 3; }
        .board-row > summary .board-power { grid-column: 2 / 3; grid-row: 2 / 3; text-align: left; }
        .board-row > summary .board-resume { grid-column: 3 / 4; grid-row: 2 / 3; text-align: left; }
        .board-row > summary .board-trend { display: none; }
      }

      /* Rankings page full board */
      .team-board + .team-board-list { /* noop */ }

      /* =======================================================
         Feature cards (home: scenarios, archives, etc)
         ======================================================= */
      .feature-card,
      .scenario-card,
      .archive-card,
      .conference-card,
      .pulse-card,
      .history-snapshot-card,
      .stat-card,
      .impact-card,
      .efficiency-card,
      .reminiscence-card,
      .peer-item,
      .compare-team-card,
      .compare-factor-card,
      .story-card,
      .team-mini-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        color: var(--foreground);
        transition: box-shadow .18s ease, transform .18s ease;
        text-decoration: none;
      }
      .feature-card:hover,
      .scenario-card:hover,
      .archive-card:hover,
      .conference-card:hover,
      .story-card:hover,
      .compare-team-card:hover,
      .team-mini-card:hover,
      .peer-item:hover {
        box-shadow: none;
      }

      .feature-rank,
      .panel-kicker,
      .reminiscence-sub {
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.1em;
        text-transform: none;
        color: var(--muted-foreground);
      }

      .feature-card h3,
      .scenario-card h3,
      .archive-card h3,
      .story-card h3,
      .conference-card h3,
      .stat-card h3,
      .impact-card h3,
      .reminiscence-title,
      .compare-team-card h2,
      .compare-factor-top h3 {
        font-family: var(--font-display);
        font-size: 22px;
        line-height: 1.1;
        letter-spacing: 0.01em;
        text-transform: none;
      }

      .feature-card p,
      .scenario-card p,
      .archive-card p,
      .story-card p,
      .conference-card p,
      .pulse-card p,
      .impact-card p,
      .stat-card p,
      .reminiscence-card p,
      .team-mini-card p {
        margin: 0;
        color: var(--muted-foreground);
        font-size: 14px;
        line-height: 1.55;
      }

      .story-card { border-left: 4px solid var(--border); }
      .story-card.is-positive { border-left-color: var(--success); }
      .story-card.is-negative { border-left-color: var(--destructive); }
      .story-card.is-neutral { border-left-color: var(--muted-foreground); }
      .story-tail {
        margin-top: 8px;
        font-size: 12px;
        color: var(--muted-foreground);
      }

      /* Conference card accents by level */
      .conference-card .conference-level,
      .conference-card .conference-note {
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.1em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .conference-stat-line {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: var(--muted-foreground);
        padding-top: 8px;
        border-top: 1px solid var(--border);
      }
      .conference-stat-line strong { color: var(--foreground); font-weight: 600; }

      /* ── Conference index redesign ───────────────────── */
      .conf-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 32px;
        align-items: end;
      }
      .hero-copy { max-width: 640px; }
      .hero-meta { flex-shrink: 0; }
      .hero-tally {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
      .tally-cell {
        background: var(--background);
        padding: 14px 18px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .tally-n { font-size: 28px; font-weight: 800; line-height: 1; }
      .tally-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted-foreground);
      }

      /* Conf spotlight grid */
      .conf-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .conf-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 20px;
        text-decoration: none;
        color: var(--foreground);
        display: flex;
        flex-direction: column;
        gap: 0;
        transition: border-color 0.12s;
      }
      .conf-card:hover { border-color: var(--muted-foreground); }
      .conf-card.is-top { border-left: 4px solid var(--team-gold, #e5ae38); }
      .conf-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
      }
      .conf-level {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted-foreground);
      }
      .conf-rank {
        font-size: 11px;
        font-weight: 700;
        color: var(--muted-foreground);
        font-variant-numeric: tabular-nums;
      }
      .conf-name {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin-bottom: 6px;
      }
      .conf-note {
        font-size: 12px;
        color: var(--muted-foreground);
        line-height: 1.45;
        margin-bottom: 16px;
      }
      .strength-bar-wrap { margin-bottom: 14px; }
      .strength-bar-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 6px;
      }
      .bar-metric {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted-foreground);
      }
      .bar-value {
        font-size: 22px;
        font-weight: 800;
        color: var(--team-blue, #008fd5);
        line-height: 1;
        font-variant-numeric: tabular-nums;
      }
      .bar-track {
        height: 4px;
        background: var(--muted);
        border-radius: 2px;
        overflow: hidden;
      }
      .bar-fill {
        height: 100%;
        background: var(--team-gold, #e5ae38);
        border-radius: 2px;
      }
      .conf-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        margin-top: auto;
      }
      .footer-item { display: flex; flex-direction: column; gap: 3px; }
      .footer-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted-foreground);
      }
      .footer-value { font-size: 13px; font-weight: 600; }

      /* Division toggle */
      .section-head.with-toggle {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }
      .div-toggle {
        display: inline-flex;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        flex-shrink: 0;
      }
      .div-toggle button {
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--muted-foreground);
        background: var(--background);
        border: none;
        border-left: 1px solid var(--border);
        padding: 7px 14px;
        cursor: pointer;
      }
      .div-toggle button:first-child { border-left: none; }
      .div-toggle button:hover { color: var(--foreground); }
      .div-toggle button.active { background: var(--foreground); color: var(--background); }

      /* Metrics glossary */
      .metrics-key {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 20px;
        overflow: hidden;
      }
      .metrics-key dt {
        background: var(--card);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--foreground);
        padding: 12px 14px 0;
      }
      .metrics-key dd {
        background: var(--card);
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted-foreground);
        padding: 4px 14px 12px;
      }

      /* RR50 inline bar in table */
      .conf-link {
        font-weight: 600;
        color: var(--foreground);
        text-decoration: none;
      }
      .conf-link:hover { color: var(--team-blue, #008fd5); }
      .rr-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }
      .rr-num { font-variant-numeric: tabular-nums; font-weight: 600; }
      .rr-track {
        width: 56px;
        height: 3px;
        background: var(--muted);
        border-radius: 2px;
      }
      .rr-fill {
        height: 100%;
        background: var(--team-gold, #e5ae38);
        border-radius: 2px;
      }
      /* Division header rows in all-conferences table */
      .div-row { background: var(--card) !important; }
      .div-row td {
        padding: 6px 12px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted-foreground);
      }
      @media (max-width: 900px) {
        .conf-hero { grid-template-columns: 1fr; }
        .hero-meta { display: none; }
        .conf-grid { grid-template-columns: repeat(2, 1fr); }
        .metrics-key { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 560px) {
        .conf-grid { grid-template-columns: 1fr; }
        .section-head.with-toggle { flex-direction: column; align-items: flex-start; }
      }

      /* Level tags */
      .level-FBS { color: var(--team-blue); }
      .level-FCS { color: var(--team-green); }
      .level-DII { color: var(--team-orange); }
      .level-DIII { color: var(--team-purple); }

      /* Pulse cards */
      .pulse-card h3 { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.01em; }
      .pulse-card strong { font-family: var(--font-display); font-size: 28px; line-height: 1; }

      /* =======================================================
         Impact cards / stats
         ======================================================= */
      .impact-card {
        gap: 12px;
      }
      .impact-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .impact-card-top h3 { font-family: var(--font-display); font-size: 18px; }
      .impact-week {
        font: 600 11px/1 var(--font-sans);
        text-transform: none;
        letter-spacing: 0.1em;
        color: var(--muted-foreground);
      }
      .impact-stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .impact-stat {
        padding: 10px 12px;
        background: var(--secondary);
        border-radius: var(--radius-md);
      }
      .impact-stat-wide { grid-column: 1 / -1; }
      .impact-stat span {
        display: block;
        font-size: 11px;
        color: var(--muted-foreground);
        text-transform: none;
        letter-spacing: 0.08em;
      }
      .impact-stat strong {
        display: block;
        margin-top: 4px;
        font: 600 16px/1.1 var(--font-sans);
      }
      .impact-meta { font-size: 12px; color: var(--muted-foreground); }
      .impact-up { color: var(--success); }
      .impact-down { color: var(--destructive); }

      /* =======================================================
         Efficiency bars
         ======================================================= */
      .efficiency-card { gap: 8px; }
      .efficiency-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--muted-foreground); }
      .efficiency-line strong { color: var(--foreground); font-family: var(--font-display); font-size: 20px; }
      .efficiency-track {
        height: 8px;
        background: var(--muted);
        border-radius: 3px;
        overflow: hidden;
      }
      .efficiency-fill {
        height: 100%;
        background: var(--primary);
        border-radius: 3px;
      }
      .offense .efficiency-fill { background: var(--team-blue); }
      .defense .efficiency-fill { background: var(--team-red); }

      /* Profile bars (compare) */
      .profile-bars { display: flex; flex-direction: column; gap: 6px; }
      .profile-row { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
      .profile-label { color: var(--muted-foreground); text-transform: none; font-size: 11px; letter-spacing: 0.08em; }
      .profile-self, .profile-comp {
        display: block;
        height: 8px;
        border-radius: 3px;
        background: var(--primary);
      }
      .profile-comp { background: var(--team-blue); }
      .bar-self, .bar-comp {
        display: block;
        height: 8px;
        min-width: 2px;
        border-radius: 3px;
        background: var(--primary);
      }
      .bar-comp { background: var(--team-blue); opacity: 0.85; }
      .profile-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted-foreground); }
      .profile-legend span::before {
        content: '';
        display: inline-block;
        width: 8px; height: 8px;
        background: currentColor;
        margin-right: 6px;
        border-radius: 50%;
      }

      /* Compare bar (compare factors) */
      .compare-factor-card { display: flex; flex-direction: column; gap: 10px; }
      .compare-factor-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }
      .compare-factor-bars {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .compare-bar-row {
        display: grid;
        grid-template-columns: 100px 1fr 50px;
        gap: 10px;
        align-items: center;
        font-size: 13px;
      }
      .compare-bar-team { color: var(--muted-foreground); font-size: 12px; text-transform: none; letter-spacing: 0.08em; }
      .compare-bar-track { height: 8px; background: var(--muted); border-radius: 3px; overflow: hidden; }
      .compare-bar,
      .compare-bar-a,
      .compare-bar-b {
        display: block;
        height: 100%;
        background: var(--primary);
        border-radius: 3px;
      }
      .compare-bar-b { background: var(--team-blue); }
      .compare-bar-value { font-family: var(--font-display); font-size: 18px; text-align: right; }

      /* =======================================================
         Matchup tool / compact
         ======================================================= */
      .matchup-tool,
      .compact-matchup-tool {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .matchup-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      @media (min-width: 720px) {
        .matchup-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      }
      .matchup-controls label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font: 500 11px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .matchup-controls select,
      .matchup-controls input {
        appearance: none;
        padding: 10px 12px;
        background: var(--card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        font: 500 14px/1.1 var(--font-sans);
        color: var(--foreground);
      }
      .matchup-team-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 14px;
        align-items: center;
      }
      @media (max-width: 680px) {
        .matchup-team-grid { grid-template-columns: 1fr; }
      }
      .compare-team-card {
        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
        color: #fff;
        border: 0;
        padding: 22px;
      }
      .compare-team-card h2, .compare-team-card h3 { color: #fff; }
      .compare-team-card .stat-card,
      .compare-team-card .compare-stat-grid { color: #fff; }
      .compare-team-card .stat-card { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #fff; }
      .compare-team-card .stat-card span { color: rgba(255,255,255,0.7); }

      .projection-shell {
        padding: 20px;
        background: var(--secondary);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
      }
      .projection-band { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
      .projection-copy { margin: 6px 0 0; color: var(--muted-foreground); font-size: 14px; }

      /* =======================================================
         Historical DNA / reminiscence
         ======================================================= */
      .historical-dna { margin-top: 14px; }
      .historical-dna-summary { color: var(--muted-foreground); font-size: 13px; margin-bottom: 10px; }
      .reminiscence-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .reminiscence-title { font-size: 18px; }
      .reminiscence-sub { color: var(--muted-foreground); }

      /* =======================================================
         History mini panel / Journey chart
         ======================================================= */
      .history-chart-wrap { padding-top: 8px; }
      .history-svg,
      .journey-svg,
      .identity-svg,
      .spark-svg { max-width: 100%; height: auto; display: block; }

      .journey-frame {
        position: relative;
        padding: 8px 0 6px;
      }
      .journey-topline { margin-bottom: 8px; color: var(--muted-foreground); font-size: 13px; }
      .journey-axis-strip { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-foreground); }
      .journey-axis-label { padding: 0 2px; }
      .journey-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--muted-foreground); }
      .journey-legend-item { display: inline-flex; align-items: center; gap: 6px; }
      .journey-swatch {
        display: inline-block;
        width: 10px; height: 10px;
        border-radius: 50%;
        background: currentColor;
      }
      .journey-marker-layer { pointer-events: none; position: absolute; inset: 0; }
      .journey-point {
        position: absolute;
        width: var(--point-size, 14px);
        height: var(--point-size, 14px);
        padding: 0;
        margin: 0;
        border-radius: 50%;
        background: var(--muted-foreground);
        border: 2px solid var(--card);
        transform: translate(-50%, -50%);
        cursor: pointer;
        pointer-events: auto;
        appearance: none;
        -webkit-appearance: none;
        box-shadow: none;
        transition: transform 120ms ease, box-shadow 120ms ease;
      }
      .journey-point.up    { background: #2f9e5a; }
      .journey-point.down  { background: #c43d2a; }
      .journey-point.flat  { background: #9aa0a6; }
      .journey-point.start { background: var(--foreground); }
      .journey-point.opp-FBS  { border-color: var(--team-blue); }
      .journey-point.opp-FCS  { border-color: var(--team-green); }
      .journey-point.opp-DII  { border-color: var(--team-orange); }
      .journey-point.opp-DIII { border-color: var(--team-purple); }
      .journey-point.opp-NA   { border-color: var(--card); }
      .journey-point:hover,
      .journey-point:focus-visible {
        transform: translate(-50%, -50%) scale(1.25);
        outline: none;
        box-shadow: none;
        z-index: 4;
      }
      .journey-point.is-selected {
        transform: translate(-50%, -50%) scale(1.35);
        box-shadow: 0 0 0 2px var(--foreground);
        z-index: 5;
      }
      .journey-swatch.up    { background: #2f9e5a; }
      .journey-swatch.down  { background: #c43d2a; }
      .journey-swatch.flat  { background: #9aa0a6; }
      .journey-swatch.ring  {
        background: transparent;
        border: 2px solid var(--team-blue);
        width: 12px; height: 12px;
      }

      .journey-tooltip {
        position: absolute;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 10px 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        font-size: 12px;
        pointer-events: none;
        transform: translate(-50%, -100%);
        max-width: 260px;
        z-index: 6;
      }
      .journey-tooltip[data-place="below"] { transform: translate(-50%, 0); }
      .journey-tooltip-kicker { font-size: 11px; text-transform: none; letter-spacing: 0.08em; color: var(--muted-foreground); }
      .journey-tooltip-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 14px;
        margin-top: 6px;
      }
      .journey-tooltip-stat-wide { grid-column: 1 / -1; }
      .journey-tooltip-meta { color: var(--muted-foreground); font-size: 11px; }

      .journey-highlight-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
      .journey-highlight-card {
        flex: 1 1 180px;
        min-width: 180px;
        padding: 12px;
        background: var(--secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
      }
      .journey-highlight-kicker {
        font-size: 11px;
        text-transform: none;
        letter-spacing: 0.08em;
        color: var(--muted-foreground);
      }
      .journey-highlight-meta { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; }

      /* Power vs Resume plot */
      .power-resume-module {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .power-resume-topline {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .power-resume-topline .section-note { margin: 0; font-size: 13px; }
      .power-resume-search {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .power-resume-search span {
        font: 500 11px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .power-resume-search input {
        appearance: none;
        padding: 10px 12px;
        background: var(--card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        font: 500 14px/1.2 var(--font-sans);
        color: var(--foreground);
        width: 100%;
      }
      .power-resume-levels {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 3px;
        background: var(--secondary);
        border: 1px solid var(--border);
        border-radius: 3px;
        align-self: flex-start;
      }
      .power-resume-level {
        border: 0;
        background: transparent;
        color: var(--foreground);
        padding: 6px 12px;
        border-radius: 3px;
        font: 500 12px/1 var(--font-sans);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .power-resume-level.is-active { background: var(--accent-surface); color: var(--accent-foreground); }
      .power-resume-level span {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 3px;
        background: rgba(0,0,0,0.06);
        color: inherit;
      }
      .power-resume-level.is-active span { background: rgba(255,255,255,0.2); }

      .power-resume-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
        color: var(--muted-foreground);
      }
      .power-resume-legend-item { display: inline-flex; align-items: center; gap: 6px; }
      .power-resume-legend-point { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
      .power-resume-legend-point.level-FBS { background: var(--team-blue); }
      .power-resume-legend-point.level-FCS { background: var(--team-green); }
      .power-resume-legend-point.level-DII { background: var(--team-orange); }
      .power-resume-legend-point.level-DIII { background: var(--team-purple); }

      .power-resume-point {
        position: absolute;
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0;
        border: 1.5px solid rgba(255,255,255,0.85);
        border-radius: 50%;
        background: var(--team-blue);
        transform: translate(-50%, 50%);
        cursor: pointer;
        box-shadow: none;
        transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
        appearance: none;
        -webkit-appearance: none;
      }
      .power-resume-point.level-FBS { background: var(--team-blue); }
      .power-resume-point.level-FCS { background: var(--team-green); }
      .power-resume-point.level-DII { background: var(--team-orange); }
      .power-resume-point.level-DIII { background: var(--team-purple); }
      .power-resume-point:hover,
      .power-resume-point:focus-visible {
        transform: translate(-50%, 50%) scale(1.6);
        z-index: 4;
        outline: none;
        box-shadow: none;
      }
      .power-resume-point.is-selected {
        transform: translate(-50%, 50%) scale(1.8);
        z-index: 5;
        border-color: var(--foreground);
        box-shadow: 0 0 0 2px var(--card);
      }
      .power-resume-point.is-muted { opacity: 0.18; }

      .power-resume-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      @media (min-width: 960px) {
        .power-resume-layout { grid-template-columns: minmax(0, 1fr) 240px; }
      }
      .power-resume-stage {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .power-resume-plot-shell {
        position: relative;
        background: var(--secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 16px 18px 8px 38px;
      }
      .power-resume-plot {
        position: relative;
        width: 100%;
        aspect-ratio: 1.4 / 1;
        min-height: 260px;
      }
      .power-resume-field {
        position: absolute;
        inset: 0;
      }
      .power-resume-axis-y {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: left center;
        font-size: 10px;
        color: var(--muted-foreground);
        text-transform: none;
        letter-spacing: 0.1em;
        white-space: nowrap;
      }
      .power-resume-quadrant {
        position: absolute;
        width: 50%; height: 50%;
        opacity: 0.55;
        pointer-events: none;
        font-size: 10px;
        text-transform: none;
        letter-spacing: 0.08em;
        color: var(--muted-foreground);
        padding: 8px 10px;
        display: flex;
      }
      .power-resume-quadrant-nw { top: 0; left: 0; align-items: flex-start; justify-content: flex-start; }
      .power-resume-quadrant-ne { top: 0; right: 0; align-items: flex-start; justify-content: flex-end; text-align: right; }
      .power-resume-quadrant-sw { bottom: 0; left: 0; align-items: flex-end; justify-content: flex-start; }
      .power-resume-quadrant-se { bottom: 0; right: 0; align-items: flex-end; justify-content: flex-end; text-align: right; }
      .power-resume-midline { position: absolute; background: var(--border-strong); z-index: 1; }
      .power-resume-midline-x { left: 0; right: 0; top: 50%; height: 1px; }
      .power-resume-midline-y { top: 0; bottom: 0; left: 50%; width: 1px; }
      .power-resume-points { position: absolute; inset: 0; z-index: 2; }
      .power-resume-tag {
        position: absolute;
        z-index: 3;
        padding: 4px 8px;
        background: var(--card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        font-size: 11px;
        pointer-events: none;
        white-space: nowrap;
        transform: translate(-50%, calc(100% + 14px));
      }
      .power-resume-tag.is-left { transform: translate(-100%, calc(100% + 14px)); }
      .power-resume-tag.is-low { transform: translate(-50%, -14px); }
      .power-resume-tag.is-left.is-low { transform: translate(-100%, -14px); }
      .power-resume-axis-footer {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 11px;
        color: var(--muted-foreground);
        padding: 4px 0 0;
      }
      .power-resume-axis-footer strong { color: var(--foreground); text-transform: none; letter-spacing: 0.08em; font-size: 10px; font-weight: 600; }
      .power-resume-scale {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: var(--muted-foreground);
        padding-top: 2px;
      }

      .power-resume-focus {
        padding: 16px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        min-height: 180px;
      }
      .power-resume-focus .feature-rank { font-size: 10px; }
      .power-resume-focus h3 {
        font-family: var(--font-display);
        font-size: 22px;
        letter-spacing: 0.01em;
        margin: 6px 0 8px;
      }
      .power-resume-focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
      .power-resume-focus-sub { font-size: 12px; color: var(--muted-foreground); }
      .power-resume-tag { font-size: 11px; color: var(--muted-foreground); }
      .power-resume-empty { padding: 16px; color: var(--muted-foreground); font-size: 13px; }
      .power-resume-link { color: var(--foreground); font-weight: 600; }
      .power-resume-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
      }

      /* Strength ladder */
      .ladder-wrap { display: flex; flex-direction: column; gap: 10px; }
      .ladder-band {
        display: grid;
        grid-template-columns: 56px 1fr 72px;
        grid-template-areas: "label bar value";
        align-items: center;
        gap: 12px;
        padding: 6px 0;
      }
      .ladder-label {
        grid-area: label;
        font: 600 12px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: var(--foreground);
      }
      .ladder-fill {
        grid-area: bar;
        height: 10px;
        min-width: 4px;
        border-radius: 3px;
        background: var(--primary);
      }
      .ladder-value {
        grid-area: value;
        text-align: right;
        color: var(--muted-foreground);
        font-family: var(--font-display);
        font-size: 18px;
        letter-spacing: 0.02em;
      }

      /* =======================================================
         Tables (rankings, history, schedules)
         ======================================================= */
      /* Cheap Win #1 (2026-05-21): horizontal-scroll wrappers used by the
         legacy .table-wrap family on team/program/canon pages now expose
         a sticky first column so the identity cell (year / player / team)
         stays anchored as the body scrolls right. Pairs with the tabular-
         numerals lock in the consolidated rule block. See
         docs/research/cfb-stats-antipatterns.md Cheap Win #1. */
      .table-wrap,
      .compact-table-wrap,
      .game-impact-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* iOS Safari: position:sticky inside overflow-x:auto is fragile;
           promoting the wrapper to its own compositing layer fixes it. */
        transform: translateZ(0);
      }

      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
      }
      th {
        text-align: left;
        padding: 10px 12px;
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: var(--muted-foreground);
        border-bottom: 1px solid var(--border);
        background: var(--secondary);
      }
      td {
        padding: 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }
      tbody tr:hover td { background: var(--secondary); }

      /* Sticky first column on all legacy tables wrapped in
         .table-wrap / .compact-table-wrap / .game-impact-table-wrap.
         Background color is mandatory (prevents text bleed-through);
         right-edge box-shadow signals the seam to the eye. */
      .table-wrap > table > thead > tr > th:first-child,
      .table-wrap > table > tbody > tr > td:first-child,
      .compact-table-wrap > table > thead > tr > th:first-child,
      .compact-table-wrap > table > tbody > tr > td:first-child,
      .game-impact-table-wrap > table > thead > tr > th:first-child,
      .game-impact-table-wrap > table > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--background);
        box-shadow: none;
      }
      .table-wrap > table > thead > tr > th:first-child,
      .compact-table-wrap > table > thead > tr > th:first-child,
      .game-impact-table-wrap > table > thead > tr > th:first-child {
        /* Header cells need the secondary tone, not background, to match
           the rest of the header row. */
        background: var(--secondary);
        z-index: 3; /* Above body sticky cells when scrolled */
      }
      /* Hover row background should override the sticky cell background. */
      .table-wrap > table > tbody > tr:hover > td:first-child,
      .compact-table-wrap > table > tbody > tr:hover > td:first-child,
      .game-impact-table-wrap > table > tbody > tr:hover > td:first-child {
        background: var(--secondary);
      }

      .heisman-row td {
        font-weight: 500;
      }

      .game-impact-table th,
      .game-impact-table td { padding: 10px; font-size: 13px; }
      .game-impact-table .game-prefix { color: var(--muted-foreground); }

      /* =======================================================
         Team story grid / mini cards
         ======================================================= */
      .team-mini-card { padding: 16px; }
      .team-mini-meta, .team-mini-note {
        font-size: 12px;
        color: var(--muted-foreground);
      }
      .team-link { color: var(--foreground); font-weight: 600; border-bottom: 1px solid currentColor; }

      /* Peer list */
      .peer-list { display: flex; flex-direction: column; gap: 10px; }
      .peer-item { padding: 14px 16px; }
      .peer-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
      .peer-kicker { font-size: 11px; text-transform: none; letter-spacing: 0.08em; color: var(--muted-foreground); }
      .peer-gap-line { font-size: 13px; color: var(--muted-foreground); }
      .peer-context-note { font-size: 13px; color: var(--muted-foreground); margin-top: 8px; }
      .compare-shortcut {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: var(--secondary);
        border-radius: 3px;
        font-size: 12px;
        color: var(--foreground);
      }
      .compare-shortcut:hover { background: var(--muted); }

      /* =======================================================
         Section & card layout helpers
         ======================================================= */
      .feature-card,
      .stat-card,
      .scenario-card,
      .archive-card,
      .conference-card,
      .history-snapshot-card,
      .compare-team-card,
      .compare-factor-card,
      .story-card,
      .pulse-card,
      .impact-card,
      .efficiency-card,
      .reminiscence-card,
      .count-card,
      .peer-item,
      .team-mini-card,
      .summary-card {
        min-width: 0;
      }

      /* =======================================================
         Player / Heisman / players index specifics (light)
         ======================================================= */
      .heisman-row .board-team-name { font-weight: 600; }
      .compact-head h2 { font-size: 24px; }

      /* =======================================================
         Footer / small
         ======================================================= */
      .page-footer,
      .site-footer {
        margin-top: 64px;
        padding: 32px 0;
        border-top: 1px solid var(--border);
        color: var(--muted-foreground);
        font-size: 13px;
      }

      /* =======================================================
         Misc
         ======================================================= */
      .highlight-panel h2 { font-size: 20px; }

      /* SVG path color hook for sparklines on summary */
      .summary-spark .spark-svg polyline { stroke: var(--muted-foreground); }
      .summary-card:hover .spark-svg polyline { stroke: var(--foreground); }

      /* Generic first-of-type color for navigation shortcut (matchups stays ghost) */
      .nav-actions .nav-action:first-of-type:last-of-type {
        background: var(--primary);
        color: var(--primary-foreground);
      }

      /* Compact rails */
      .conference-card-grid-compact { gap: 12px; }
      .conference-card-grid-compact .conference-card { padding: 14px 16px; }
      .conference-card-grid-compact .conference-card h3 { font-size: 18px; }

      /* Narrow shell for prose-only pages */
      .narrative-panel h2 { font-size: clamp(24px, 3vw, 32px); }

      /* =======================================================
         Responsive fallbacks
         ======================================================= */
      @media (max-width: 520px) {
        .team-hero-top { flex-direction: column; }
        .team-rank-chip { align-self: flex-start; }
        .section-head { flex-direction: column; align-items: flex-start; }
        .meta-pill { font-size: 12px; }
        .summary-card { grid-template-columns: 1fr auto; }
        .summary-value { grid-column: 1 / 2; }
        .summary-spark { grid-column: 2 / 3; grid-row: 1 / 3; }
      }

      /* Print stylesheet — extended 2026-05-21 to handle stats tables.
         Per docs/research/cfb-stats-mobile-playbook.md §15.2: print must
         drop sticky positioning (sticky breaks paginated print), remove
         overflow wrappers (print is a single canvas, not a scroll viewport),
         hide filter / nav chrome, repeat thead on each page, and avoid
         row breaks. */
      @media print {
        /* Chrome: nav, buttons, share/sort affordances. */
        .nav-toggle, .button, .button-primary, .button-secondary,
        .nav-action, .cmdk-trigger, .theme-toggle,
        .wcfb-stats-sort-button, .wcfb-def-trigger {
          display: none !important;
        }

        /* Tables: drop sticky, drop overflow, let the table breathe. */
        .table-wrap,
        .compact-table-wrap,
        .game-impact-table-wrap {
          overflow: visible !important;
          transform: none !important;
        }
        .table-wrap > table > thead > tr > th:first-child,
        .table-wrap > table > tbody > tr > td:first-child,
        .compact-table-wrap > table > thead > tr > th:first-child,
        .compact-table-wrap > table > tbody > tr > td:first-child,
        .game-impact-table-wrap > table > thead > tr > th:first-child,
        .game-impact-table-wrap > table > tbody > tr > td:first-child {
          position: static !important;
          box-shadow: none !important;
          background: transparent !important;
        }

        /* Repeat thead on each printed page; avoid breaking rows. */
        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
        tr { page-break-inside: avoid; }

        /* Conservative typography for print readability. */
        body {
          background: white !important;
          color: black !important;
        }
        table {
          font-size: 11pt;
          color-adjust: exact;
          -webkit-print-color-adjust: exact;
        }
      }

      /* =======================================================
         Fan Intelligence — Team Mood Card & editorial modules
         ======================================================= */

      .mood-card-section { margin-top: 8px; }

      .mood-card {
        position: relative;
        overflow: hidden;
        padding: 28px;
        border-radius: var(--radius-xl);
        background:
          radial-gradient(120% 140% at 0% 0%, rgba(220, 38, 38, 0.10) 0%, rgba(220, 38, 38, 0.00) 55%),
          radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0.00) 55%),
          linear-gradient(180deg, #0A0A0A 0%, #1a1a1a 100%);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.08);
      }
      @media (min-width: 768px) { .mood-card { padding: 36px; } }
      .mood-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(
          135deg,
          rgba(255,255,255,0.015) 0 2px,
          transparent 2px 6px
        );
        pointer-events: none;
      }
      .mood-card > * { position: relative; z-index: 1; }

      .mood-card-head {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 22px;
      }
      .mood-card-title { max-width: 620px; }
      .mood-eyebrow {
        background: rgba(255,255,255,0.10);
        color: rgba(255,255,255,0.85);
      }
      .mood-card h2 {
        font-family: var(--font-display);
        font-size: clamp(26px, 3.4vw, 38px);
        line-height: 1.05;
        color: #fff;
        text-transform: none;
        letter-spacing: 0.015em;
        margin-top: 6px;
      }
      .mood-card-subtitle {
        margin: 10px 0 0;
        color: rgba(255,255,255,0.72);
        font-size: 14px;
        max-width: 56ch;
      }
      .mood-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
        justify-content: flex-end;
      }
      .mood-meta-chip {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: #fff;
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 3px;
      }
      .mood-meta-chip-muted {
        background: transparent;
        color: rgba(255,255,255,0.65);
        border-color: rgba(255,255,255,0.12);
      }
      .mood-archetype-chip {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        font-family: var(--font-display);
        font-size: 14px;
        letter-spacing: 0.06em;
        text-transform: none;
        background: var(--gradient-accent);
        color: #fff;
        border-radius: 3px;
        box-shadow: none;
      }

      .mood-waiting-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 18px;
        padding: 12px 16px;
        background: rgba(234, 88, 12, 0.10);
        border: 1px dashed rgba(234, 88, 12, 0.45);
        border-radius: var(--radius-md);
        color: rgba(255,255,255,0.82);
        font-size: 13.5px;
        line-height: 1.5;
      }
      .mood-waiting-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        background: #EA580C;
        box-shadow: none;
        flex: 0 0 auto;
      }

      .mood-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
        margin-bottom: 22px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: var(--radius-lg);
      }
      @media (min-width: 720px) {
        .mood-hero { grid-template-columns: minmax(180px, 260px) 1fr; gap: 28px; align-items: center; }
      }
      .mood-hero-score { display: flex; flex-direction: column; gap: 4px; }
      .mood-hero-score-label {
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.1em;
        text-transform: none;
        color: rgba(255,255,255,0.65);
      }
      .mood-hero-score-value {
        font-family: var(--font-display);
        font-size: clamp(32px, 5vw, 48px);
        line-height: 1;
        text-transform: none;
        color: #fff;
      }
      .mood-hero-score-number {
        font: 600 15px/1 var(--font-sans);
        color: rgba(255,255,255,0.7);
        letter-spacing: 0.02em;
      }
      .mood-hero-meter { display: flex; flex-direction: column; gap: 10px; }
      .mood-meter-track {
        position: relative;
        height: 10px;
        border-radius: 3px;
        background: linear-gradient(90deg, rgba(220, 38, 38, 0.45) 0%, rgba(255,255,255,0.10) 50%, rgba(22, 163, 74, 0.55) 100%);
        overflow: visible;
      }
      .mood-meter-fill {
        position: absolute;
        top: -4px;
        width: 18px;
        height: 18px;
        background: #fff;
        border-radius: 50%;
        transform: translateX(-9px);
        box-shadow: none;
      }
      .mood-meter-markers {
        display: flex;
        justify-content: space-between;
        font: 500 10px/1 var(--font-sans);
        letter-spacing: 0.1em;
        text-transform: none;
        color: rgba(255,255,255,0.55);
        padding: 0 2px;
      }
      .mood-hero-narrative {
        margin: 0;
        color: rgba(255,255,255,0.84);
        font-size: 15px;
        line-height: 1.55;
      }

      .mood-axis-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 22px;
      }
      @media (min-width: 640px) { .mood-axis-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
      @media (min-width: 960px) { .mood-axis-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
      .mood-axis {
        padding: 16px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: var(--radius-md);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .mood-axis header { display: flex; flex-direction: column; gap: 4px; }
      .mood-axis header span {
        font: 600 11px/1 var(--font-sans);
        letter-spacing: 0.1em;
        text-transform: none;
        color: rgba(255,255,255,0.55);
      }
      .mood-axis header strong {
        font-family: var(--font-display);
        font-size: 22px;
        line-height: 1.05;
        color: #fff;
        text-transform: none;
        letter-spacing: 0.015em;
      }
      .mood-axis p {
        margin: 0;
        color: rgba(255,255,255,0.72);
        font-size: 13.5px;
        line-height: 1.5;
      }
      .mood-axis-detail {
        font: 600 11px/1 var(--font-sans);
        color: rgba(255,255,255,0.55);
        letter-spacing: 0.08em;
        text-transform: none;
      }
      .mood-cohesion-stack {
        display: flex;
        width: 100%;
        height: 8px;
        border-radius: 3px;
        overflow: hidden;
        background: rgba(255,255,255,0.08);
        margin-top: 4px;
      }
      .mood-cohesion-seg { display: block; height: 100%; }
      .mood-cohesion-pos { background: #16A34A; }
      .mood-cohesion-neu { background: rgba(255,255,255,0.25); }
      .mood-cohesion-neg { background: #DC2626; }

      .mood-storylines {
        padding: 20px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: var(--radius-lg);
        margin-bottom: 18px;
      }
      .mood-storylines h3 {
        margin: 0 0 12px;
        font-family: var(--font-display);
        font-size: 22px;
        text-transform: none;
        letter-spacing: 0.02em;
        color: #fff;
      }
      .mood-storylines-empty p {
        margin: 0;
        color: rgba(255,255,255,0.65);
        font-size: 14px;
      }
      .mood-storyline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
      .mood-storyline-item { display: flex; gap: 12px; padding: 10px 0; border-top: 1px dashed rgba(255,255,255,0.08); }
      .mood-storyline-item:first-child { border-top: none; padding-top: 0; }
      .mood-storyline-rank {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: var(--radius-sm);
        font-family: var(--font-display);
        font-size: 14px;
        color: #fff;
      }
      .mood-storyline-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
      .mood-storyline-body strong { color: #fff; font-size: 15px; }
      .mood-storyline-body p { margin: 0; color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.5; }

      .mood-card-footer {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,0.08);
        font: 500 11px/1.5 var(--font-sans);
        letter-spacing: 0.06em;
        text-transform: none;
        color: rgba(255,255,255,0.50);
      }

      .offseason-radar .section-head .eyebrow {
        background: rgba(249, 115, 22, 0.10);
        color: #C2410C;
        border: 1px solid rgba(249, 115, 22, 0.22);
      }
      .offseason-now-card {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
        margin-bottom: 18px;
        border-radius: var(--radius-xl);
        border: 1px solid rgba(194, 65, 12, 0.18);
        background:
          radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 38%),
          linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(250, 204, 21, 0.10));
      }
      @media (min-width: 900px) {
        .offseason-now-card { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); align-items: start; }
      }
      .offseason-now-kicker,
      .offseason-card-month {
        display: inline-flex;
        align-items: center;
        font: 700 11px/1 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: none;
        color: #C2410C;
      }
      .offseason-now-card h3,
      .offseason-card h3 {
        margin: 8px 0 0;
        font-family: var(--font-display);
        font-size: clamp(22px, 3vw, 30px);
        line-height: 1.05;
        text-transform: none;
        letter-spacing: 0.02em;
      }
      .offseason-now-card p,
      .offseason-card p {
        margin: 10px 0 0;
        color: var(--muted-foreground);
        font-size: 14px;
        line-height: 1.6;
      }
      .offseason-now-note {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px 18px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(15, 23, 42, 0.10);
        background: rgba(255,255,255,0.58);
      }
      .offseason-now-note strong {
        font: 700 11px/1 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: none;
        color: #0F172A;
      }
      .offseason-now-note span {
        color: var(--foreground);
        font-size: 13px;
        line-height: 1.55;
      }
      .offseason-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      @media (min-width: 720px) { .offseason-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
      @media (min-width: 1080px) { .offseason-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
      .offseason-card {
        position: relative;
        overflow: hidden;
        padding: 20px;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: var(--card);
      }
      .offseason-card::after {
        content: '';
        position: absolute;
        inset: auto -40px -40px auto;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(59,130,246,0.10), transparent 68%);
        pointer-events: none;
      }
      .offseason-card-current {
        border-color: rgba(194, 65, 12, 0.26);
        box-shadow: none;
        background:
          linear-gradient(180deg, rgba(249, 115, 22, 0.04), rgba(255,255,255,0.95)),
          var(--card);
      }
      .offseason-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .offseason-card-status {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 3px;
        background: #C2410C;
        color: #fff;
        font: 700 10px/1 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: none;
      }
      .offseason-module-list {
        list-style: none;
        margin: 14px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .offseason-module-list li {
        position: relative;
        padding-left: 14px;
        color: var(--foreground);
        font-size: 13.5px;
        line-height: 1.45;
      }
      .offseason-module-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.55em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: linear-gradient(135deg, #C2410C, #2563EB);
        transform: translateY(-50%);
      }

      /* Home-page fan intelligence grid */
      .fan-intel-home { margin-top: 4px; }
      .fan-intel-home .section-head .eyebrow {
        background: rgba(220, 38, 38, 0.10);
        color: #DC2626;
        border: 1px solid rgba(220, 38, 38, 0.18);
      }
      .intel-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }
      @media (min-width: 720px) { .intel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
      @media (min-width: 1080px) { .intel-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
      .intel-card {
        padding: 20px;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: var(--card);
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: box-shadow .15s ease, transform .15s ease;
      }
      .intel-card:hover { box-shadow: none; }
      .intel-card-head h3 {
        font-family: var(--font-display);
        font-size: 22px;
        letter-spacing: 0.02em;
        text-transform: none;
        color: var(--foreground);
      }
      .intel-card-head .section-note { margin-top: 4px; font-size: 13px; }
      .intel-card-shift { border-top: 3px solid #DC2626; }
      .intel-card-respect { border-top: 3px solid #2563EB; }
      .intel-card-doubt { border-top: 3px solid #EA580C; }
      .intel-card-rival { border-top: 3px solid #9333EA; }
      .intel-card-main { border-top: 3px solid #16A34A; }
      .intel-card-panic { border-top: 3px solid #0A0A0A; }
      .intel-card-civil { border-top: 3px solid #0F766E; }

      .intel-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
      .intel-card-row + .intel-card-row { border-top: 1px solid var(--border); }
      .intel-row-inner {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 12px;
        padding: 12px 2px;
        color: var(--foreground);
      }
      .intel-row-inner:hover { background: var(--secondary); border-radius: var(--radius-sm); }
      .intel-row-rank {
        font-family: var(--font-display);
        font-size: 16px;
        line-height: 1;
        color: var(--muted-foreground);
        align-self: center;
        text-align: right;
      }
      .intel-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
      .intel-row-body strong {
        font: 600 15px/1.2 var(--font-sans);
        color: var(--foreground);
      }
      .intel-row-level {
        font: 600 10px/1 var(--font-sans);
        letter-spacing: 0.08em;
        text-transform: none;
        color: var(--muted-foreground);
      }
      .intel-row-headline {
        font-family: var(--font-display);
        font-size: 16px;
        color: #DC2626;
        letter-spacing: 0.01em;
      }
      .intel-card-respect .intel-row-headline { color: #2563EB; }
      .intel-card-rival .intel-row-headline { color: #9333EA; }
      .intel-card-main .intel-row-headline { color: #16A34A; }
      .intel-card-doubt .intel-row-headline { color: #EA580C; }
      .intel-card-panic .intel-row-headline { color: #0A0A0A; }
      .intel-card-civil .intel-row-headline { color: #0F766E; }
      .intel-row-sub {
        color: var(--muted-foreground);
        font-size: 12.5px;
        line-height: 1.45;
      }
      .intel-empty {
        margin: 0;
        padding: 18px;
        color: var(--muted-foreground);
        font-size: 13.5px;
        background: var(--secondary);
        border-radius: var(--radius-md);
        border: 1px dashed var(--border-strong);
      }

      .fan-intel-home-empty .section-head .eyebrow {
        background: rgba(234, 88, 12, 0.10);
        color: #EA580C;
        border: 1px solid rgba(234, 88, 12, 0.30);
      }
      .intel-empty-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      @media (min-width: 720px) { .intel-empty-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (min-width: 1080px) { .intel-empty-grid { grid-template-columns: repeat(4, 1fr); } }
      .intel-empty-card {
        padding: 18px;
        border-radius: var(--radius-lg);
        border: 1px dashed var(--border-strong);
        background: var(--card);
      }
      .intel-empty-card h3 {
        font-family: var(--font-display);
        font-size: 18px;
        letter-spacing: 0.02em;
        text-transform: none;
      }
      .intel-empty-card p {
        margin: 6px 0 0;
        color: var(--muted-foreground);
        font-size: 13px;
      }

      .argument-theater .section-head .eyebrow {
        background: rgba(37, 99, 235, 0.10);
        color: #2563EB;
        border: 1px solid rgba(37, 99, 235, 0.20);
      }
      .argument-grid { grid-template-columns: 1fr; }
      @media (min-width: 720px) { .argument-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
    
/* === Figma v5 token canon (S.2 prep) === */

:root {
  /* Fluid clamp typography scale */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  --fs-h1: clamp(1.75rem, 2.5vw + 0.5rem, 3rem);
  --fs-h2: clamp(1.25rem, 1.5vw + 0.25rem, 1.75rem);
  --fs-body: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);
  --fs-meta: clamp(0.75rem, 0.1vw + 0.75rem, 0.8125rem);

  /* 8-step spacing scale (powers of 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius (3 values: 8/12/16) — overrides legacy 6/10/12 from _site_css() */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Elevation (3 levels) — light defaults; .dark overrides below */
  --elevation-1: 0 2px 8px oklch(0 0 0 / 0.04);
  --elevation-2: 0 8px 16px oklch(0 0 0 / 0.08);
  --elevation-3: 0 16px 32px oklch(0 0 0 / 0.12);

  /* Motion roles (4 — collapse to instant under prefers-reduced-motion) */
  --motion-reveal: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-state: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-data-entry: 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-delight: 800ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Percentile ramp: red → grey → blue (OKLCH-interpolated) */
  --percentile-0: oklch(0.55 0.18 12);
  --percentile-10: oklch(0.56 0.14 18);
  --percentile-25: oklch(0.58 0.09 30);
  --percentile-50: oklch(0.6 0.02 250);
  --percentile-75: oklch(0.62 0.09 240);
  --percentile-90: oklch(0.65 0.15 250);
  --percentile-100: oklch(0.68 0.18 255);

  /* Belief ramp: red → grey → green */
  --belief-negative: oklch(0.5 0.15 20);
  --belief-neutral: oklch(0.6 0.02 250);
  --belief-positive: oklch(0.6 0.15 145);

  /* Accolade gold */
  --accolade-gold-base: oklch(0.7 0.12 85);
  --accolade-gold-highlight: oklch(0.8 0.1 90);

  /* Confidence ramp for inline chips (Signature Bets S1.2) — green
   * (sample ≥ 40), amber (12 ≤ n < 40), red (4 ≤ n < 12), muted grey
   * (n < 4 or below_floor flag). Tuned to stay subtle against --fs-meta. */
  --confidence-high: oklch(0.65 0.15 145);
  --confidence-medium: oklch(0.72 0.12 85);
  --confidence-low: oklch(0.65 0.15 20);
  --confidence-below-floor: oklch(0.5 0.02 250);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-reveal: 0ms linear;
    --motion-state: 0ms linear;
    --motion-data-entry: 0ms linear;
    --motion-delight: 0ms linear;
  }
}

/* === Rhythm utilities (S1.5) === */

@layer base {
  body {
    /* Numbers line up across modules by default — legacy templates
     * without .tabular-num still get aligned digits. */
    font-variant-numeric: tabular-nums lining-nums;
  }
}

@layer utilities {
  .tabular-num {
    font-feature-settings: "tnum", "lnum";
    font-variant-numeric: tabular-nums lining-nums;
  }
  .eyebrow-label {
    text-transform: none;
    letter-spacing: 0.08em;
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
    font-weight: 500;
  }
  .metric-value {
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 700;
    font-size: var(--fs-h2, 1.25rem);
  }

  /* S4.11 rhythm-sweep — apply tabular-nums to every well-known
   * number-bearing selector site-wide. Zero-risk additive rules; the
   * template still ships its own font-sizes / weights, this just
   * aligns the digit stems. */
  .stat-card strong,
  .stat-card .value,
  .team-stat-tile strong,
  .team-stat-tile .value,
  .player-stat-summary-tile .value,
  .player-stat-summary-tile strong,
  .team-rank-chip,
  .feature-rank,
  .feature-card .value,
  .player-stats-topline strong,
  .cohort-score,
  .cohort-n,
  .hero-fingerprint__value,
  .the-room__score,
  .the-room__meta-value,
  .signature-story__stat-value,
  .signature-story__rank-value,
  .csp__stat-value,
  .csp__pct-pill,
  .scenario-explorer__metric-value,
  .rival-radar__metric-value,
  .mirror-match__headline,
  .mirror-match__sub,
  .achievement__rarity,
  .prediction-markets__implied,
  .change-log__list li,
  .hot-take__text,
  .hot-take__meta {
    font-variant-numeric: tabular-nums lining-nums;
  }
}

/* === Team-archetype module — moved from reporting.py:~9019 === */

.team-archetype-section { padding: 2rem 0; }
.team-archetype-module { background: var(--card); border: 1px solid var(--border-strong); padding: 2rem; font-family: var(--font-serif, 'Fraunces', Georgia, serif); color: var(--card-foreground); }
.team-archetype-eyebrow { font-family: 'IBM Plex Mono', 'SFMono-Regular', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: none; color: var(--muted-foreground); margin-bottom: .75rem; }
.team-archetype-name { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: -.005em; margin: 0 0 .25rem 0; }
.team-archetype-confidence { font-family: 'IBM Plex Mono', monospace; font-size: .875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.team-archetype-desc { font-size: 1rem; line-height: 1.55; margin: 0 0 1.25rem 0; }
.team-archetype-phrase, .team-archetype-modifier-block, .team-archetype-migration { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1rem; }
.team-archetype-phrase-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted-foreground); letter-spacing: 0.1em; text-transform: none; margin-bottom: .5rem; }
.team-archetype-phrase-body { font-family: 'IBM Plex Mono', monospace; font-style: italic; font-size: .95rem; }
.team-archetype-modifier-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.modifier-chip { display: inline-flex; align-items: center; gap: .25rem; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--foreground); background: var(--muted); border: 1px solid var(--border-strong); padding: .25rem .6rem; border-radius: 3px; }
.hub-gold-dot { color: var(--team-gold); }
.team-archetype-link { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; border-bottom: 1px dotted currentColor; text-decoration: none; color: inherit; }
.team-archetype-spark { width: 100%; max-width: 360px; height: auto; }
.team-archetype-empty .team-archetype-blurb { font-size: 1rem; color: var(--muted-foreground); }

/* === Attributions page — moved from reporting.py:~467, scoped to .attributions-page === */

.attributions-page { background: #F3EEE4; color: #0B0F14; font-family: var(--font-serif, 'Fraunces', Georgia, serif); margin: 0; padding: 0 24px 96px; }
.attributions-page .rule { height: 4px; background: #E0A300; margin: 0 -24px 48px; }
.attributions-page main { max-width: 720px; margin: 0 auto; }
.attributions-page h1 { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 56px; letter-spacing: -0.01em; margin: 48px 0 8px; }
.attributions-page h2 { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 22px; letter-spacing: 0em; text-transform: none; color: #6b6a63; margin: 40px 0 12px; }
.attributions-page .eyebrow { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: none; color: #6b6a63; margin: 0; }
.attributions-page p { line-height: 1.65; font-size: 17px; }
.attributions-page a { color: #0B0F14; }
.attributions-page .back { margin-top: 64px; font-size: 14px; color: #6b6a63; }

/* === Cohort panel — moved from reporting.py:~16163 === */

.cohort-panel { padding: 1.5rem 0; }
.cohort-list { list-style: none; padding: 0; margin: 1rem 0 0; font-family: "IBM Plex Mono", monospace; font-size: .85rem; }
.cohort-row { display: grid; grid-template-columns: 140px 1fr 60px 60px; gap: .75rem; align-items: center; padding: .25rem 0; }
.cohort-label { text-transform: none; letter-spacing: .05em; color: var(--muted-foreground); }
.cohort-bar-track { background: var(--muted); height: 10px; position: relative; }
.cohort-bar { display: block; height: 100%; }
.cohort-bar--pos { background: var(--success, #2f7d32); }
.cohort-bar--neg { background: var(--destructive, #b23a3a); }
.cohort-bar--mute { background: var(--border); }
.cohort-score--mute { color: var(--muted-foreground); }
.cohort-row--volume-only .cohort-label { color: var(--muted-foreground); }
.cohort-score { text-align: right; font-variant-numeric: tabular-nums; }
.cohort-n { text-align: right; color: var(--muted-foreground); font-size: .75rem; }
.cohort-n--thin { color: var(--team-gold, #b07a00); }
.cohort-panel-empty-body { padding: 1rem 0; color: var(--muted-foreground); font-family: var(--font-serif, 'Fraunces', Georgia, serif); }

/* === Signature Story v5 (S.2) === */

.signature-story {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}

.signature-story__header {
  margin-bottom: var(--space-8);
}

.signature-story__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-2) 0;
}

.signature-story__headline {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.1;
  color: var(--foreground);
  margin: 0;
}

.signature-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@container (min-width: 720px) {
  .signature-story__grid {
    grid-template-columns: 1fr 1.6fr;
  }
}

.signature-story__hero-stat {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--elevation-2);
  margin-bottom: var(--space-6);
}

.signature-story__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--percentile-100);
  margin: 0 0 var(--space-2) 0;
}

.signature-story__stat-unit {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 var(--space-1) 0;
}

.signature-story__stat-context {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0;
}

.signature-story__rank {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.signature-story__rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.signature-story__rank-label {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
}

.signature-story__rank-value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.signature-story__rank-value--top {
  color: var(--percentile-100);
}

.signature-story__rank-value--high {
  color: var(--percentile-90);
}

.signature-story__rank-value--mid {
  color: var(--percentile-50);
}

.signature-story__rank-value--low {
  color: var(--percentile-10);
}

.signature-story__why-label,
.signature-story__cohort-label {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-3) 0;
}

.signature-story__narrative {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--foreground);
  opacity: 0.9;
  margin: 0 0 var(--space-6) 0;
}

.signature-story__cohort {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.signature-story__cohort-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.signature-story__cohort-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
}

.signature-story__cohort-name {
  color: var(--muted-foreground);
}

.signature-story__cohort-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.signature-story__cohort-track {
  position: relative;
  height: var(--space-2);
  background: var(--muted);
  border-radius: 3px;
  overflow: hidden;
}

.signature-story__cohort-bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  transition: width var(--motion-data-entry);
}

.signature-story__confidence {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: var(--space-4) 0 0 0;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
}
.signature-story__confidence-sub {
  color: var(--muted-foreground);
}
.signature-story__era-context {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: var(--space-2) 0 0 0;
  font-style: italic;
  line-height: 1.45;
  max-width: 38ch;
}

.signature-story__runners {
  list-style: none;
  padding: var(--space-4) 0 0 0;
  margin: var(--space-4) 0 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.signature-story__runners-label {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-2) 0;
}

.signature-story__runner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
}

.signature-story__runner-name {
  color: var(--foreground);
  opacity: 0.85;
}

/* Empty / skeleton state */
.signature-story--empty .signature-story__headline {
  color: var(--muted-foreground);
  font-weight: 500;
}

.signature-story__empty-body {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-body);
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

/* === Current Season Production v5 (S.3) === */

.csp {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}

.csp__header {
  margin-bottom: var(--space-8);
}

.csp__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}

.csp__sub {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0;
}

.csp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@container (min-width: 900px) {
  .csp__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.csp__stat-card-label {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-3) 0;
}

.csp__stat-card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.csp__stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.csp__stat-row-label {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  flex: 1 1 auto;
}

.csp__stat-row-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.csp__stat-value {
  font-weight: 600;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  min-width: 3.5rem;
  text-align: right;
}

.csp__pct-pill {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: oklch(0.18 0.01 250);
  border-radius: 3px;
  min-width: 2.5rem;
  text-align: center;
}

.csp__pct-pill--top { background: var(--percentile-100); }
.csp__pct-pill--high { background: var(--percentile-90); }
.csp__pct-pill--mid { background: var(--percentile-75); }
.csp__pct-pill--low { background: var(--percentile-25); }

.csp__pct-pill-suffix {
  font-size: 9px;
  margin-left: 1px;
  opacity: 0.85;
}

.csp__pct-pill-empty {
  display: inline-block;
  min-width: 2.5rem;
}

/* === Supporting Cast v5 (S.3b) === */

.sc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}

.sc__header {
  margin-bottom: var(--space-8);
}

.sc__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}

.sc__sub {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0;
}

.sc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@container (min-width: 720px) {
  .sc__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 1200px) {
  .sc__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sc__card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.sc__card-eyebrow {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-2) 0;
}

.sc__card-headline {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 var(--space-3) 0;
}

.sc__card-grade {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--percentile-90);
  margin: 0 0 var(--space-2) 0;
}

.sc__card-narrative {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
}

.sc__rcv-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sc__rcv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
}

.sc__rcv-label {
  color: var(--muted-foreground);
}

.sc__rcv-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.sc__card-scheme {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0 0 var(--space-2) 0;
}

.sc__empty-body {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
}

/* === The Room on [Player] v5 (S.4) === */

.the-room {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}

.the-room__header {
  margin-bottom: var(--space-8);
}

.the-room__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}

.the-room__sub {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0;
}

.the-room__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.the-room__pill {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--motion-state), color var(--motion-state), border-color var(--motion-state);
}

.the-room__pill:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--foreground);
}

.the-room__pill[aria-pressed="true"],
.the-room__pill.is-active {
  background: var(--secondary);
  color: var(--foreground);
  border-color: transparent;
}

.the-room__pill:disabled,
.the-room__pill[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.the-room__pill-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.the-room__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@container (min-width: 720px) {
  .the-room__grid {
    grid-template-columns: 1fr 1.5fr;
  }
}

.the-room__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-3) 0;
}

.the-room__dial {
  position: relative;
  height: var(--space-4);
  background: var(--muted);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.the-room__dial-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  transition: width var(--motion-data-entry), background var(--motion-state);
}

.the-room__dial-fill--positive {
  background: linear-gradient(90deg, var(--belief-neutral) 0%, var(--belief-positive) 100%);
}

.the-room__dial-fill--neutral {
  background: var(--belief-neutral);
}

.the-room__dial-fill--negative {
  background: linear-gradient(90deg, var(--belief-negative) 0%, var(--belief-neutral) 100%);
}

.the-room__dial-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: var(--space-6);
  background: var(--foreground);
  border-radius: 2px;
  transition: left var(--motion-data-entry);
}

.the-room__score {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}

.the-room__score--positive { color: var(--belief-positive); }
.the-room__score--negative { color: var(--belief-negative); }

.the-room__archetype {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0 0 var(--space-6) 0;
}

.the-room__meta-card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.the-room__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
  gap: var(--space-3);
}

.the-room__meta-label {
  color: var(--muted-foreground);
}

.the-room__meta-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.the-room__meta-value--high { color: var(--belief-positive); }
.the-room__meta-value--low { color: var(--belief-negative); }

.the-room__quote-card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--elevation-1);
  margin-bottom: var(--space-6);
}

.the-room__quote {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--foreground);
}

.the-room__quote-attrib {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
}

.the-room__quote-attrib a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

.the-room__trajectory svg {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 60;
  display: block;
}

.the-room__trajectory-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
}

.the-room__awaiting {
  background: var(--secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
}

.the-room--empty .the-room__title {
  color: var(--muted-foreground);
  font-weight: 500;
}

.the-room__empty-body {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
}

/* === Player Standing v5 (S.5a) === */

.standing {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}

.standing__header { margin-bottom: var(--space-8); }

.standing__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}

.standing__sub {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0;
}

.standing__current-rung {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  text-transform: none;
  line-height: 1;
  color: var(--accolade-gold-base);
  margin: 0 0 var(--space-6) 0;
}

.standing__rail-wrap { position: relative; margin-bottom: var(--space-8); }

.standing__rail {
  position: relative;
  height: var(--space-2);
  background: var(--muted);
  border-radius: 3px;
}

.standing__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--border-strong) 0%, var(--accolade-gold-base) 100%);
  transition: width var(--motion-data-entry);
}

.standing__rail-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: var(--space-4);
  background: var(--border-strong);
  border-radius: 1px;
}

.standing__rail-tick--passed { background: var(--muted-foreground); }

.standing__rail-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.25rem;
  height: 1.25rem;
  background: var(--accolade-gold-base);
  border: 2px solid var(--accolade-gold-highlight);
  border-radius: 50%;
  box-shadow: var(--elevation-2);
  transition: left var(--motion-data-entry);
}

.standing__rail-ghost {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-3);
  height: var(--space-3);
  background: transparent;
  border: 2px solid var(--muted-foreground);
  border-radius: 50%;
  opacity: 0.4;
  transition: left var(--motion-data-entry);
}

.standing__tier-row {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  font-size: 10px;
  color: var(--muted-foreground);
  text-align: center;
}

.standing__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.standing__pill {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--motion-state), color var(--motion-state), border-color var(--motion-state);
}

.standing__pill[aria-pressed="true"],
.standing__pill.is-active {
  background: var(--accolade-gold-base);
  color: oklch(0.18 0.01 250);
  border-color: var(--accolade-gold-highlight);
}

.standing__pill:hover:not([aria-pressed="true"]):not(.is-active) {
  border-color: var(--border-strong);
  color: var(--foreground);
}

.standing__drawer {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--elevation-1);
}

.standing__drawer-eyebrow {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-4) 0;
}

.standing__drawer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

@container (min-width: 720px) {
  .standing__drawer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.standing__drawer-cell-label {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}

.standing__drawer-cell-body {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
}

.standing__awaiting {
  background: var(--secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
  margin-bottom: var(--space-8);
}

.standing__accolade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.standing__accolade-tab {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 44px;
  cursor: pointer;
  transition: background var(--motion-state), color var(--motion-state);
}

.standing__accolade-tab[aria-pressed="true"],
.standing__accolade-tab.is-active {
  background: var(--secondary);
  color: var(--foreground);
  border-color: transparent;
}

.standing__accolade-body {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
}

/* === Splits v5 (S.5b) === */

.splits {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}
.splits__header { margin-bottom: var(--space-8); }
.splits__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}
.splits__sub { font-size: var(--fs-meta); color: var(--muted-foreground); margin: 0; }
.splits__pair-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@container (min-width: 720px) {
  .splits__pair-grid { grid-template-columns: repeat(2, 1fr); }
}
.splits__pair {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.splits__pair-eyebrow {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  margin: 0 0 var(--space-3) 0;
}
.splits__pair-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-meta); padding: var(--space-2) 0;
}
.splits__pair-row + .splits__pair-row { border-top: 1px solid var(--border); }
.splits__pair-label { color: var(--muted-foreground); }
.splits__pair-value { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.splits__drawer-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--motion-state), color var(--motion-state);
}
.splits__drawer-toggle:hover { color: var(--foreground); border-color: var(--border-strong); }
.splits__awaiting {
  background: var(--secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
}

/* === Bio/Recruiting/Transfer/Roster v5 (S.5c) === */

.biotabs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}
.biotabs__header { margin-bottom: var(--space-6); }
.biotabs__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}
.biotabs__sub { font-size: var(--fs-meta); color: var(--muted-foreground); margin: 0; }
.biotabs__tablist {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.biotabs__tab {
  appearance: none; -webkit-appearance: none;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--motion-state), color var(--motion-state);
}
.biotabs__tab[aria-selected="true"] {
  background: var(--secondary);
  color: var(--foreground);
  border-color: transparent;
}
.biotabs__tabpanel { padding: var(--space-2) 0; }
.biotabs__tabpanel[hidden] { display: none; }
.biotabs__panel-body {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--foreground);
}
.biotabs__panel-meta {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0;
}
.biotabs__panel-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-2) 0; gap: var(--space-3);
  font-size: var(--fs-meta);
}
.biotabs__panel-row + .biotabs__panel-row { border-top: 1px solid var(--border); }
.biotabs__panel-label { color: var(--muted-foreground); flex: 0 0 auto; }
.biotabs__panel-value { color: var(--foreground); font-weight: 600; text-align: right; }
.biotabs__awaiting {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
  font-style: italic;
}

/* === Peer Comparator v5 (S.5d) === */

.peers {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}
.peers__header { margin-bottom: var(--space-6); }
.peers__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}
.peers__sub { font-size: var(--fs-meta); color: var(--muted-foreground); margin: 0; }
.peers__search {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--foreground);
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.peers__search:focus {
  outline: none;
  border-color: var(--accolade-gold-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accolade-gold-base) 20%, transparent);
}
.peers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@container (min-width: 720px) {
  .peers__grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 1100px) {
  .peers__grid { grid-template-columns: repeat(4, 1fr); }
}
.peers__card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.peers__card-name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}
.peers__card-meta {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: 0;
}
.peers__awaiting {
  background: var(--secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
}

/* === Advanced Savant v5 (S.5e) === */

.savant {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
}
.savant__header { margin-bottom: var(--space-6); }
.savant__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0 0 var(--space-2) 0;
}
.savant__sub { font-size: var(--fs-meta); color: var(--muted-foreground); margin: 0; }
.savant__filter {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.savant__filter-pill {
  appearance: none; -webkit-appearance: none;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--motion-state), color var(--motion-state);
}
.savant__filter-pill[aria-pressed="true"] {
  background: var(--secondary);
  color: var(--foreground);
  border-color: transparent;
}
.savant__awaiting {
  background: var(--secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  line-height: 1.5;
}
.savant__metrics {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.savant__metric-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-meta);
}
.savant__metric-name { color: var(--muted-foreground); text-transform: none; letter-spacing: 0.06em; }
.savant__metric-value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  text-align: right;
}
.savant__metric-placement { color: var(--foreground); font-weight: 600; }
.savant__metric-placement em { color: var(--muted-foreground); font-style: normal; font-weight: 400; font-size: 11px; margin-left: var(--space-1); }

/* === Hero strip v5 (S.5f) === */

.hero-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-12);
  container-type: inline-size;
  font-family: var(--font-sans);
  margin-bottom: var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@container (min-width: 720px) {
  .hero-strip { grid-template-columns: 1fr auto; align-items: center; }
}
.hero-strip__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--foreground);
  margin: 0;
}
.hero-strip__meta {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  margin: var(--space-2) 0 0 0;
}
.hero-strip__stats {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center;
}
.hero-strip__stat {
  display: flex; flex-direction: column;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 6rem;
}
.hero-strip__stat-label {
  font-size: var(--fs-meta);
  color: var(--muted-foreground);
  letter-spacing: 0.06em;
  text-transform: none;
}
.hero-strip__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

/* === Subnav v5 (S.5g) === */

.player-subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 0;
  margin: 0 calc(50% - 50vw) var(--space-6);
  padding-left: max(16px, calc(50vw - 700px));
  padding-right: max(16px, calc(50vw - 700px));
  font-family: var(--font-sans);
  transition: box-shadow var(--motion-state);
}
.player-subnav.is-stuck {
  box-shadow: var(--elevation-1);
}
.player-subnav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.player-subnav__list::-webkit-scrollbar { display: none; }
.player-subnav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
  text-decoration: none;
  min-height: 40px;
  transition: background var(--motion-state), color var(--motion-state), border-color var(--motion-state);
}
.player-subnav__link:hover {
  color: var(--foreground);
  border-color: var(--border-strong);
}
.player-subnav__link[aria-current="page"] {
  background: var(--secondary);
  color: var(--foreground);
  border-color: transparent;
}

/* === Phase banner (P.0) === */

.phase-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--muted);
  background: transparent;
  margin-bottom: var(--space-4);
}

.phase-banner__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--accolade-gold-base);
  text-align: center;
}

/* === FI glossary popover (Bet #5, S1.1) === */

@layer components {
  .fi-glossary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    margin-left: 0.35em;
    padding: 0 0.4em;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 3px;
    background: transparent;
    color: var(--muted-foreground, #555);
    font: inherit;
    font-size: var(--fs-meta, 0.72rem);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: help;
    vertical-align: baseline;
    transition: background-color 180ms, border-color 180ms, color 180ms;
  }
  .fi-glossary:hover,
  .fi-glossary:focus-visible {
    background: color-mix(in srgb, var(--foreground, #222) 10%, transparent);
    border-color: var(--border-strong, var(--muted-foreground, #888));
    color: var(--foreground, #222);
  }
  .fi-glossary:focus-visible {
    outline: 2px solid var(--foreground, #222);
    outline-offset: 2px;
  }

  .fi-glossary-popover {
    max-width: min(480px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-lg, 16px);
    background: var(--popover, var(--card, #fff));
    color: var(--popover-foreground, var(--foreground, #222));
    box-shadow: var(--elevation-3, 0 16px 32px rgba(0,0,0,0.16));
  }
  .fi-glossary-popover::backdrop {
    background: color-mix(in srgb, #000 48%, transparent);
  }
  .fi-glossary-popover__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem) var(--space-4, 1rem);
    margin: 0;
  }
  .fi-glossary-popover__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--space-2, 0.5rem);
  }
  .fi-glossary-popover__eyebrow {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
  }
  .fi-glossary-popover__name {
    margin: 0;
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
    font-size: var(--fs-h2, 1.35rem);
    line-height: 1.2;
  }
  .fi-glossary-popover__close {
    grid-row: 2;
    grid-column: 2;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--muted-foreground, #666);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    align-self: start;
  }
  .fi-glossary-popover__close:hover,
  .fi-glossary-popover__close:focus-visible {
    color: var(--foreground, #222);
  }
  .fi-glossary-popover__one-line {
    margin: 0;
    font-size: var(--fs-body, 1rem);
    font-weight: 600;
    color: var(--foreground, #222);
  }
  .fi-glossary-popover__full {
    margin: 0;
    font-size: var(--fs-body, 0.95rem);
    color: var(--muted-foreground, #555);
  }
  .fi-glossary-popover__micro,
  .fi-glossary-popover__see-also,
  .fi-glossary-popover__footer {
    margin: 0;
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
  }
  .fi-glossary-popover__micro-label,
  .fi-glossary-popover__see-label {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--foreground, #222);
  }
  .fi-glossary-popover__see-link {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: var(--foreground, #222);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .fi-glossary-popover__see-link:hover,
  .fi-glossary-popover__see-link:focus-visible {
    color: var(--accent-foreground, var(--foreground, #222));
  }
  .fi-glossary-popover__method-link {
    color: inherit;
  }

  @media (max-width: 520px) {
    .fi-glossary-popover {
      max-width: 100vw;
      width: 100vw;
      margin: 0;
      position: fixed;
      inset: auto 0 0 0;
      border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fi-glossary { transition: none; }
  }
}

/* === Inline confidence chips (S1.2) === */

@layer components {
  .fi-confidence {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.04em;
    color: var(--muted-foreground, #666);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .fi-confidence__dot {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--confidence-below-floor);
    transform: translateY(-0.05em);
  }
  /* doc-90 §3.5 confidence-band remap: blue=high/gold=medium/gray=low.
     Deliberately NOT var(--confidence-high/medium/low) -- those custom
     properties are shared, overloaded tokens reused as a generic
     positive/neutral/negative signal by several unrelated features
     (cohort-divergence fan/rival dots, opp-strength stripes, rival-radar
     sentiment, prediction-markets move up/down, scenario-explorer shift).
     Recoloring them would have silently reskinned all of those. */
  .fi-confidence--high   .fi-confidence__dot { background: var(--blue, #008fd5); }
  .fi-confidence--medium .fi-confidence__dot { background: var(--gold, #e5ae38); }
  .fi-confidence--low    .fi-confidence__dot { background: var(--gray, #8b8b8b); }
  .fi-confidence--below-floor .fi-confidence__dot { background: var(--confidence-below-floor); }

  .fi-confidence__label {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .fi-confidence--high   .fi-confidence__label { color: var(--blue, #008fd5); }
  .fi-confidence--medium .fi-confidence__label { color: var(--gold, #e5ae38); }
  .fi-confidence--low    .fi-confidence__label { color: var(--gray, #8b8b8b); }
  .fi-confidence--below-floor .fi-confidence__label { color: var(--confidence-below-floor); }

  .fi-confidence__sample {
    color: var(--muted-foreground, #666);
  }

  /* When the chip sits inside a section-head (Heisman Lens, etc.) or
     directly under a hero section-note paragraph (Heisman Tracker hero,
     etc.), give it a small top margin so it tucks neatly under the
     prior paragraph instead of butting against the previous line. */
  .section-head > .fi-confidence,
  .hero > .fi-confidence {
    margin-top: var(--space-2, 0.5rem);
  }
}

/* ---------------------------------------------------------------------------
   confidence.py :: render_confidence_chip() primitive
   ---------------------------------------------------------------------------
   Styles the `.confidence confidence--{high,medium,low,unset}` chip emitted by
   src/cfb_rankings/confidence.py (the doc-33 "v5-7.5 foundation" chip, distinct
   from the reporting.py `.fi-confidence` chip above). doc-90 §3.5 mandate:
   HIGH=blue / MEDIUM=gold / LOW=gray, each carrying a redundant glyph (and low
   set italic) so the band survives color-blindness — never color alone.

   As with .fi-confidence, this deliberately references the doc-90 global
   tokens --blue/--gold/--gray (with hardcoded hex fallbacks) rather than the
   shared, overloaded --confidence-high/medium/low custom properties, which are
   reused as a generic positive/neutral/negative signal by five unrelated
   features and must not be reskinned here.
   --------------------------------------------------------------------------- */
@layer components {
  .confidence {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    font-size: var(--fs-meta, 0.72rem);
    font-weight: 600;
    line-height: 1.2;
    padding: 0.12em 0.5em;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.01em;
  }

  /* Redundant per-band glyph so the signal never relies on color alone. */
  .confidence::before {
    font-weight: 700;
    margin-right: 0.15em;
  }

  .confidence--high {
    color: var(--blue, #008fd5);
    background: color-mix(in srgb, var(--blue, #008fd5) 12%, transparent);
  }
  .confidence--high::before { content: "\2713"; }        /* ✓ */

  .confidence--medium {
    color: var(--gold, #e5ae38);
    background: color-mix(in srgb, var(--gold, #e5ae38) 14%, transparent);
  }
  .confidence--medium::before { content: "\2022"; }      /* • */

  .confidence--low {
    color: var(--gray, #8b8b8b);
    background: color-mix(in srgb, var(--gray, #8b8b8b) 14%, transparent);
    font-style: italic;
  }
  .confidence--low::before { content: "?"; }

  /* "Awaiting signal" / insufficient-data — neutral, de-emphasized, not
     one of the three band colors and never alarming. */
  .confidence--unset {
    color: var(--muted-foreground, #888);
    background: transparent;
    font-weight: 500;
  }
  .confidence--unset::before { content: "\25CB"; font-weight: 400; }  /* ○ */
}

/* === What-Changed diff card (S1.4) === */

@layer components {
  .what-changed {
    margin: 0 0 var(--space-6, 1.5rem) 0;
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    border-left: 3px solid var(--accolade-gold-base, #d1a23a);
    background: color-mix(in srgb, var(--accolade-gold-base) 8%, var(--card));
    border-radius: var(--radius-md, 12px);
    color: var(--card-foreground, var(--foreground, #222));
    animation: what-changed-reveal var(--motion-reveal, 240ms) ease-out;
  }
  .what-changed__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-2, 0.5rem);
  }
  .what-changed__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--accolade-gold-base, #d1a23a);
    font-weight: 600;
  }
  .what-changed__dismiss {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--muted-foreground, #666);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }
  .what-changed__dismiss:hover,
  .what-changed__dismiss:focus-visible {
    color: var(--foreground, #222);
  }
  .what-changed__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-1, 0.25rem);
    font-size: var(--fs-body, 0.95rem);
    font-variant-numeric: tabular-nums;
  }
  .what-changed__bullets li::before {
    content: '\25B8';
    color: var(--accolade-gold-base, #d1a23a);
    margin-right: 0.5em;
  }
  @keyframes what-changed-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .what-changed { animation: none; }
  }
}

/* === Live Signal Flow bar (S1.6) === */

@layer components {
  .signal-flow {
    margin: 0 0 var(--space-4, 1rem) 0;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    border-left: 3px solid var(--accolade-gold-base, #d1a23a);
    background: color-mix(in srgb, var(--accolade-gold-base) 6%, var(--card));
    border-radius: var(--radius-md, 12px);
    font-size: var(--fs-body, 0.95rem);
    display: grid;
    gap: var(--space-2, 0.5rem);
  }
  .signal-flow[aria-expanded="false"] .signal-flow__sub {
    display: none;
  }
  .signal-flow__event {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-2, 0.5rem);
    transition: opacity var(--motion-state, 180ms) linear;
  }
  .signal-flow__dot {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--destructive, #c43a3a);
    animation: signal-flow-pulse 1.8s infinite;
  }
  .signal-flow__headline {
    font-weight: 600;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .signal-flow__meta {
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
    letter-spacing: 0.08em;
    text-transform: none;
  }
  .signal-flow__sub {
    grid-column: 1 / -1;
    color: var(--muted-foreground, #666);
    font-size: var(--fs-meta, 0.78rem);
    padding-left: 1.05em;
  }
  .signal-flow__toggle {
    justify-self: end;
    min-width: 44px;
    min-height: 24px;
    padding: 0 var(--space-2, 0.5rem);
    border: none;
    background: transparent;
    color: var(--muted-foreground, #666);
    font-size: var(--fs-meta, 0.72rem);
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: none;
  }
  .signal-flow__toggle:hover,
  .signal-flow__toggle:focus-visible {
    color: var(--foreground, #222);
  }
  .signal-flow__source {
    color: var(--accolade-gold-base, #d1a23a);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  @keyframes signal-flow-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
  @media (prefers-reduced-motion: reduce) {
    .signal-flow__dot { animation: none; }
    .signal-flow__event { transition: none; }
  }
}

/* === Hot-Take card (S2.2) === */

@layer components {
  .hot-take {
    margin: 0 0 var(--space-6, 1.5rem) 0;
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    background: var(--card, #fff);
    border: 1px solid var(--border, #d0d0d0);
    border-left: 3px solid var(--accolade-gold-base, #d1a23a);
    border-radius: var(--radius-lg, 16px);
    display: grid;
    gap: var(--space-2, 0.5rem);
  }
  .hot-take__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--accolade-gold-base, #d1a23a);
    font-weight: 600;
  }
  .hot-take__text {
    margin: 0;
    font-size: var(--fs-h2, 1.25rem);
    line-height: 1.35;
    color: var(--card-foreground, var(--foreground, #222));
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    max-width: 62ch;
  }
  .hot-take__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
  }
  .hot-take__meta-label {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--foreground, #222);
  }
  .hot-take__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-2, 0.5rem);
  }
  .hot-take__action {
    border: 1px solid var(--border, #d0d0d0);
    background: transparent;
    color: var(--foreground, #222);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.04em;
    cursor: pointer;
    min-height: 32px;
  }
  .hot-take__action:hover,
  .hot-take__action:focus-visible {
    border-color: var(--foreground, #222);
  }
  .hot-take + .anti-take {
    margin-top: calc(-1 * var(--space-4, 1rem));
    border-top: 1px dashed var(--border, #d0d0d0);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .anti-take {
    margin: 0 0 var(--space-6, 1.5rem) 0;
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    background: color-mix(in srgb, var(--muted, #eee) 35%, var(--card));
    border: 1px solid var(--border, #d0d0d0);
    border-left: 3px solid var(--muted-foreground, #666);
    border-radius: var(--radius-lg, 16px);
    display: grid;
    gap: var(--space-1, 0.25rem);
  }
  .anti-take__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 0.5rem);
  }
  .anti-take__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .anti-take__tag {
    display: inline-block;
    padding: 0 var(--space-2, 0.5rem);
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 3px;
    font-size: calc(var(--fs-meta, 0.72rem) * 0.9);
    letter-spacing: 0.06em;
    color: var(--muted-foreground, #666);
    font-weight: 500;
  }
  .anti-take__text {
    margin: 0;
    font-size: var(--fs-body, 0.95rem);
    color: var(--card-foreground, var(--foreground, #222));
    line-height: 1.45;
    max-width: 62ch;
  }
}

/* === Rival Radar (S2.4) === */

@layer components {
  .rival-radar {
    margin: 0 0 var(--space-6, 1.5rem) 0;
    padding: var(--space-6, 1.5rem);
    background: var(--card, #fff);
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-lg, 16px);
    display: grid;
    gap: var(--space-4, 1rem);
  }
  .rival-radar__header { display: grid; gap: var(--space-1, 0.25rem); }
  .rival-radar__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
  }
  .rival-radar__title {
    margin: 0;
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
    font-size: var(--fs-h2, 1.35rem);
    line-height: 1.2;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .rival-radar__score-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4, 1rem);
  }
  .rival-radar__metric {
    display: grid;
    gap: 2px;
    padding: var(--space-3, 0.75rem);
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--muted, #eee) 30%, var(--card));
  }
  .rival-radar__metric-label {
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--muted-foreground, #666);
  }
  .rival-radar__metric-value {
    font-size: var(--fs-h2, 1.25rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .rival-radar__sentiment {
    display: grid;
    gap: var(--space-1, 0.25rem);
  }
  .rival-radar__sentiment-bar {
    display: flex;
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--border, #d0d0d0);
  }
  .rival-radar__sentiment-bar > span {
    display: block;
    height: 100%;
  }
  .rival-radar__sentiment-bar--pos { background: var(--confidence-high, #3fa35b); }
  .rival-radar__sentiment-bar--neu { background: var(--muted-foreground, #999); }
  .rival-radar__sentiment-bar--neg { background: var(--confidence-low, #c43a3a); }
  .rival-radar__sentiment-legend {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
    font-variant-numeric: tabular-nums;
  }
  .rival-radar__awaiting {
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    color: var(--muted-foreground, #666);
    font-size: var(--fs-body, 0.95rem);
    font-style: italic;
  }
}

/* === Mirror Match (S2.5) === */

@layer components {
  .mirror-match {
    margin: 0;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: color-mix(in srgb, var(--muted, #eee) 20%, var(--card));
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-md, 12px);
    display: grid;
    gap: var(--space-2, 0.5rem);
  }
  .mirror-match__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
  }
  .mirror-match__headline {
    margin: 0;
    font-size: var(--fs-h2, 1.15rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .mirror-match__sub {
    margin: 0;
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
  }
  .mirror-match__drivers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    list-style: none;
    padding: 0;
  }
  .mirror-match__driver-chip {
    padding: 2px var(--space-2, 0.5rem);
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 3px;
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
    font-variant-numeric: tabular-nums;
  }
  .mirror-match__drawer {
    margin-top: var(--space-2, 0.5rem);
    border-top: 1px dashed var(--border, #d0d0d0);
    padding-top: var(--space-2, 0.5rem);
  }
  .mirror-match__drawer summary {
    cursor: pointer;
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
    letter-spacing: 0.04em;
  }
  .mirror-match__drawer-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2, 0.5rem) 0 0 0;
    display: grid;
    gap: var(--space-1, 0.25rem);
  }
  .mirror-match__drawer-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2, 0.5rem);
    font-size: var(--fs-meta, 0.78rem);
    font-variant-numeric: tabular-nums;
  }
}

/* === Achievements ribbon (S2.7) === */

@layer components {
  .achievements {
    margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem) 0;
    display: grid;
    gap: var(--space-2, 0.5rem);
  }
  .achievements__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .achievements__ribbon {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
  }
  .achievement {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border: 1px solid var(--accolade-gold-base, #d1a23a);
    border-radius: 3px;
    background: color-mix(in srgb, var(--accolade-gold-base) 10%, var(--card));
    color: var(--card-foreground, var(--foreground, #222));
    font-size: var(--fs-meta, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: help;
    min-height: 32px;
  }
  .achievement__medallion {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
      var(--accolade-gold-highlight, #f2c866) 0%,
      var(--accolade-gold-base, #d1a23a) 70%);
    display: inline-block;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accolade-gold-base) 40%, transparent);
  }
  .achievement__rarity {
    font-size: calc(var(--fs-meta, 0.72rem) * 0.85);
    letter-spacing: 0.06em;
    color: var(--muted-foreground, #666);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .achievement__tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-1, 0.25rem));
    left: 0;
    min-width: 240px;
    max-width: 320px;
    padding: var(--space-3, 0.75rem);
    background: var(--popover, var(--card, #fff));
    color: var(--popover-foreground, var(--foreground, #222));
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--elevation-2, 0 8px 16px rgba(0,0,0,0.12));
    font-size: var(--fs-meta, 0.78rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    display: none;
    z-index: 20;
  }
  .achievement:hover .achievement__tooltip,
  .achievement:focus-visible .achievement__tooltip,
  .achievement:focus-within .achievement__tooltip {
    display: grid;
    gap: var(--space-1, 0.25rem);
  }
  .achievement__tooltip strong {
    font-weight: 700;
    color: var(--accolade-gold-base, #d1a23a);
  }
  .achievements--empty {
    color: var(--muted-foreground, #666);
    font-style: italic;
    font-size: var(--fs-meta, 0.78rem);
  }
}

/* === Prediction Markets (S2.8) === */

@layer components {
  .prediction-markets {
    margin: 0 0 var(--space-4, 1rem) 0;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: var(--card, #fff);
    border: 1px solid var(--border, #d0d0d0);
    border-left: 3px solid var(--belief-neutral, #888);
    border-radius: var(--radius-md, 12px);
    display: grid;
    gap: var(--space-1, 0.25rem);
  }
  .prediction-markets__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .prediction-markets__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3, 0.75rem);
    flex-wrap: wrap;
  }
  .prediction-markets__implied {
    margin: 0;
    font-size: var(--fs-h2, 1.25rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .prediction-markets__move {
    font-size: var(--fs-meta, 0.78rem);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .prediction-markets__move--up { color: var(--confidence-high, #3fa35b); }
  .prediction-markets__move--down { color: var(--confidence-low, #c43a3a); }
  .prediction-markets__meta {
    margin: 0;
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
  }
  .prediction-markets--empty .prediction-markets__implied {
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
    font-size: var(--fs-body, 1rem);
    font-weight: 500;
    font-style: italic;
    color: var(--muted-foreground, #666);
  }
}

/* === Coaching Lineage (S2.9) === */

@layer components {
  .coaching-lineage {
    margin: 0 0 var(--space-6, 1.5rem) 0;
    padding: var(--space-5, 1.25rem);
    background: var(--card, #fff);
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-lg, 16px);
    display: grid;
    gap: var(--space-3, 0.75rem);
  }
  .coaching-lineage__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .coaching-lineage__title {
    margin: 0;
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
    font-size: var(--fs-h2, 1.15rem);
    line-height: 1.2;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .coaching-lineage__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3, 0.75rem);
  }
  .coaching-lineage__col h3 {
    margin: 0 0 var(--space-1, 0.25rem) 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
  }
  .coaching-lineage__coach {
    margin: 0;
    font-size: var(--fs-body, 0.95rem);
    font-weight: 700;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .coaching-lineage__scheme {
    margin: 0;
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
  }
  .coaching-lineage__chip {
    display: inline-block;
    padding: 2px var(--space-2, 0.5rem);
    border-radius: 3px;
    border: 1px solid var(--accolade-gold-base, #d1a23a);
    color: var(--accolade-gold-base, #d1a23a);
    background: color-mix(in srgb, var(--accolade-gold-base) 8%, transparent);
    font-size: calc(var(--fs-meta, 0.72rem) * 0.9);
    letter-spacing: 0.08em;
    text-transform: none;
    font-weight: 600;
  }
  .coaching-lineage__lineage {
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
    font-style: italic;
  }
  .coaching-lineage__comparative {
    font-size: var(--fs-body, 0.9rem);
    color: var(--card-foreground, var(--foreground, #222));
    line-height: 1.4;
    border-top: 1px dashed var(--border, #d0d0d0);
    padding-top: var(--space-2, 0.5rem);
  }
  .coaching-lineage__system {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
    font-variant-numeric: tabular-nums;
  }
  .coaching-lineage--empty {
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
    font-style: italic;
  }
}

/* === Player Pages v2 (2026-05-23): Standing Rail / Mirror Match / Coaching Lineage / Live Signal Flow === */

/* Player-page semantic ramps — Brief §8.3 */
:root {
  /* Percentile ramp — red (low) → neutral → blue (high), Savant convention.
     Five steps + interpolated mid; oklch interpolation guarantees continuous
     luminance and ordered perception under common colorblindness models. */
  --pct-r0:   oklch(0.62 0.20 25);   /* red bottom (#d93a4a base) */
  --pct-r1:   oklch(0.60 0.13 22);   /* dim red */
  --pct-mid:  oklch(0.55 0.02 250);  /* neutral grey */
  --pct-b1:   oklch(0.60 0.13 240);  /* dim blue */
  --pct-b0:   oklch(0.55 0.22 245);  /* blue top (#1e6fd9 base) */
  --pct-gradient: linear-gradient(
    90deg,
    var(--pct-r0) 0%,
    var(--pct-r1) 22%,
    var(--pct-mid) 50%,
    var(--pct-b1) 78%,
    var(--pct-b0) 100%
  );
  --pct-gradient-inverted: linear-gradient(
    90deg,
    var(--pct-b0) 0%,
    var(--pct-b1) 22%,
    var(--pct-mid) 50%,
    var(--pct-r1) 78%,
    var(--pct-r0) 100%
  );

  /* Belief ramp — red (doom) → neutral → green (bullish), FI sentiment only. */
  --belief-low:  oklch(0.58 0.19 25);   /* red, doomposting */
  --belief-mid:  oklch(0.55 0.02 250);  /* neutral */
  --belief-high: oklch(0.60 0.16 150);  /* green, bullish (#2d8659 base) */
  --belief-gradient: linear-gradient(
    90deg,
    var(--belief-low) 0%,
    var(--belief-mid) 50%,
    var(--belief-high) 100%
  );

  /* Accolade gold — reserved for award status / "named to" highlights only.
     Never decorative. */
  --accolade-gold-base:      oklch(0.74 0.13 85);
  --accolade-gold-highlight: oklch(0.86 0.13 90);
  --accolade-gold-shadow:    oklch(0.45 0.10 80);

  /* Surface / text neutrals — light system (doc-90). */
  --pp-surface:        #ffffff;
  --pp-surface-raised: #f0f0f0;
  --pp-stroke-subtle:  #e4e4e1;
  --pp-text-bright:    #222222;
  --pp-text-soft:      #5b5b5b;
  --pp-text-quiet:     #8b8b8b;
}

/* Reduced-motion fallback — disable any decorative transitions inside
   player-page modules. Module-level CSS still controls focus rings. */
@media (prefers-reduced-motion: reduce) {
  .player-game-log *,
  .box-savant *,
  .player-splits *,
  .peer-comparator * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Player-page component registry (audit item 14) ─────────────────────── */
/* Card tiers. Doc 90 §2.7: white surface + mandatory 1px --line hairline,
   --r-2 radius, no shadow. The panel gray is chart-plot fill and never a
   card background -- that ban is what tier 2 encodes. */
.pc-card {
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: var(--r-2, 3px);
  padding: 16px 20px;
  margin: 0 0 24px;
}
/* Tier 1 -- "the site stands behind this": 4px accent ribbon. --pc-ribbon is
   injected inline per card (strict hex only); the blue fallback is the
   production accent from the doc-90 palette. */
.pc-card--t1 { border-left: 4px solid var(--pc-ribbon, var(--blue, #008fd5)); }
/* Tier 2 -- "context / derived": white + hairline, NO ribbon, NO fill.
   Quietness is the absence of the ribbon plus the eyebrow-register title
   (P4 §7 disagreement #1 overriding P1 §5.1's gray-panel proposal). */
.pc-card--t2 { padding: 14px 18px; }
.pc-card--t2 .pc-card__title {
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #5b5b5b);
}
/* Tier 3 -- "model opinion / thin sample, labeled": thin box + the chip. */
.pc-card--t3 { padding: 12px 16px; border-color: var(--line, #e4e4e1); }
.pc-card--t3 .pc-card__title {
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #222222);
}
.pc-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 10px;
}
.pc-card__head > .pc-kicker { flex: 1 0 100%; }
.pc-card__title {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #222222);
  margin: 0;
}
.pc-card__sub {
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--ink-3, #8b8b8b);
  margin: 0;
}
.pc-card__conf { margin-left: auto; }
.pc-card__body { font-family: var(--sans, 'Archivo', system-ui, sans-serif); }

/* Kicker / eyebrow. Sentence case -- doc 90 bans all-caps tracked labels, so
   there is deliberately no text-transform here. */
.pc-kicker {
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink-3, #8b8b8b);
  margin: 0 0 2px;
}
.pc-kicker--accent { color: var(--gold, #e5ae38); }
.pc-kicker--quiet  { color: var(--ink-3, #8b8b8b); opacity: .8; }

/* Stat-hero numeral -- doc 90 data-hero row: Archivo 30-74 / .85, weight 800,
   tabular-nums. Owner ruling 2026-08-06: Archivo, never Fraunces. */
.pc-hero { display: block; margin: 0 0 8px; }
.pc-hero__num {
  display: block;
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-weight: 800;
  line-height: .85;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink, #222222);
}
.pc-hero--sm .pc-hero__num { font-size: 30px; }
.pc-hero--md .pc-hero__num { font-size: 40px; }
.pc-hero--lg .pc-hero__num { font-size: clamp(40px, 4vw, 56px); }
.pc-hero--xl .pc-hero__num { font-size: clamp(48px, 6vw, 74px); }
.pc-hero__label {
  display: block;
  margin-top: 6px;
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #5b5b5b);
}
.pc-hero__sub {
  display: block;
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3, #8b8b8b);
}

/* Receipt card -- pass 3 §5. The quote-tweet contract, flat: 1px border,
   <=3px radius, no shadow, and a mandatory date. */
.pc-receipt {
  border: 1px solid var(--line, #e4e4e1);
  border-radius: var(--r-2, 3px);
  background: var(--page, #ffffff);
  padding: 12px 14px;
  margin: 0 0 12px;
}
.pc-receipt__quote {
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink, #222222);
  margin: 0 0 8px;
  quotes: '\201C' '\201D';
}
.pc-receipt__quote::before { content: open-quote; }
.pc-receipt__quote::after  { content: close-quote; }
.pc-receipt__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 12px;
  color: var(--ink-3, #8b8b8b);
}
.pc-receipt__source { font-weight: 600; color: var(--ink-2, #5b5b5b); }
a.pc-receipt__source { text-decoration: none; }
a.pc-receipt__source:hover { text-decoration: underline; color: var(--ink, #222); }
.pc-receipt__sep { color: var(--ink-3, #8b8b8b); }
.pc-receipt__date { font-variant-numeric: tabular-nums lining-nums; }

/* Field position -- "who's around you" on a rank ladder (part 10).
   A list, not a chart: no fills, no bars, no plot area. The only visual weight
   is on the subject row, and it comes from type weight plus a 2px identity
   accent -- doc 90 keeps team color to a thin accent that carries data, never
   a fill or a section tint. */
.pc-field { margin: 8px 0 0; }
.pc-field__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line, #e4e4e1);
}
.pc-field__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0 4px 8px;
  border-bottom: 1px solid var(--line, #e4e4e1);
  border-left: 2px solid transparent;
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2, #5b5b5b);
}
.pc-field__row--subject {
  border-left-color: var(--pc-field-accent, var(--ink, #222222));
  color: var(--ink, #222222);
  font-weight: 700;
}
.pc-field__rank {
  min-width: 3.2em;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-3, #8b8b8b);
}
.pc-field__row--subject .pc-field__rank { color: var(--ink, #222222); }
.pc-field__name { flex: 1; min-width: 0; }
.pc-field__name a { color: inherit; text-decoration: none; }
.pc-field__name a:hover { text-decoration: underline; }
.pc-field__you {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-3, #8b8b8b);
}
/* The elision row states the count it swallowed -- a bare ellipsis would hide
   how big the gap is, which is exactly the number a reader is judging. */
.pc-field__gap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0 3px 8px;
  border-bottom: 1px solid var(--line, #e4e4e1);
}
.pc-field__gap-rule {
  flex: 1;
  height: 0;
  border-top: 1px dotted var(--line, #e4e4e1);
}
.pc-field__gap-n {
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 11px;
  color: var(--ink-3, #8b8b8b);
  font-variant-numeric: tabular-nums lining-nums;
}
.pc-field__more {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 12px;
  color: var(--blue, #008fd5);
  text-decoration: none;
}
.pc-field__more:hover { text-decoration: underline; }

/* Keep-reading bar -- P4 §5.1. One row, hairline-topped, eyebrow register. */
.pc-keep {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e4e4e1);
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2, #5b5b5b);
}
.pc-keep a { color: var(--ink, #222222); text-decoration: none; }
.pc-keep a:hover { text-decoration: underline; }
.pc-keep__next { font-weight: 600; }
.pc-keep__teaser { font-weight: 400; color: var(--ink-2, #5b5b5b); }
.pc-keep__arrow { color: var(--ink-3, #8b8b8b); }
.pc-keep__pagers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pc-keep__eyebrow { flex: 1 0 100%; font-size: 11.5px; color: var(--ink-3, #8b8b8b); }
.pc-keep__pager { white-space: nowrap; }
.pc-keep__pager--prev { margin-right: auto; }
.pc-keep__pager--next { margin-left: auto; }
.pc-keep__more { color: var(--ink-3, #8b8b8b); }
.pc-keep__more-label { font-weight: 600; color: var(--ink-2, #5b5b5b); }
@media (max-width: 600px) {
  .pc-keep { flex-direction: column; align-items: flex-start; }
}

/* -- Inline annotation popover (audit item 16) ---------------------------- */
/* Doc 90: radius <=3px, flat, no shadow -- a hairline border does the
   separation work a shadow would elsewhere. Positioned via plain CSS
   (relative wrapper + absolute panel), no JS-computed geometry. */
.pc-pop {
  position: relative;
  display: inline-block;
}
.pc-pop__trigger {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* "term" trigger -- pass 3 §6: "a subtle inline highlight (thin underline or
   the faintest tint -- flat, no pill)". */
.pc-pop__trigger--term {
  border-bottom: 1px dotted var(--ink-3, #8b8b8b);
}
.pc-pop__trigger--term:hover,
.pc-pop__trigger--term:focus-visible {
  border-bottom-color: var(--ink, #222222);
}
/* "icon" trigger -- a small circular info glyph, not a pill (doc 90 bans
   pills outright; a circle at this size reads as a glyph, not a button). */
.pc-pop__trigger--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--ink-3, #8b8b8b);
  color: var(--ink-3, #8b8b8b);
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
}
.pc-pop__trigger--icon:hover,
.pc-pop__trigger--icon:focus-visible {
  border-color: var(--ink, #222222);
  color: var(--ink, #222222);
}
.pc-pop__panel {
  position: absolute;
  /* Above .tp-tabbar-wrap's sticky z-index:800 (player_pages_tabbed/css.py)
     -- the only other stacking context in the player-page bundle a popover
     could visually collide with (e.g. a crown-chip popover opened while the
     page is scrolled enough for the sticky tab bar to sit near the crown). */
  z-index: 900;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: min(300px, 84vw);
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: var(--r-2, 3px);
  padding: 12px 14px;
  font-family: var(--sans, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2, #5b5b5b);
  text-align: left;
  white-space: normal;
}
.pc-pop__panel[hidden] { display: none; }
/* Cohort strip payload -- one line, no card chrome of its own (it lives
   inside the popover's own bordered panel already). */
.pc-pop__cohort { margin: 0; color: var(--ink, #222222); }
.pc-pop__cohort-pctl { font-weight: 700; }
.pc-pop__cohort-sep { color: var(--ink-3, #8b8b8b); }
.pc-pop__cohort-set { color: var(--ink-3, #8b8b8b); }
/* Glossary payload */
.pc-pop__glossary-term {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #222222);
  margin: 0 0 4px;
}
.pc-pop__glossary-def { margin: 0; color: var(--ink, #222222); }
.pc-pop__glossary-scale { margin: 6px 0 0; color: var(--ink-3, #8b8b8b); font-size: 12px; }
.pc-pop__glossary-link { margin: 8px 0 0; }
.pc-pop__glossary-link a {
  font-weight: 600;
  color: var(--blue, #008fd5);
  text-decoration: none;
}
.pc-pop__glossary-link a:hover { text-decoration: underline; }
/* Receipt-card payload needs nothing extra here -- it ships its own
   .pc-receipt styling from PLAYER_COMPONENTS_CSS; the popover panel is just
   its positioned frame. */
@media (max-width: 600px) {
  .pc-pop__panel { max-width: min(260px, 80vw); }
}

/* Player Standing 17-rung Rail */
.player-standing {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  /* Module ribbon per docs/design-system/100-accent-semantics-contract.md
     (2026-08-06): this card's outer accent is a decorative default, not tied
     to a specific meaning -- blue (verified production), matching the other
     7 production/record modules the same audit flagged. The internal gold
     usage below (tier-label, filled/current/projected rungs) is untouched:
     it's a deliberate, already-documented EARNED-recognition encoding (see
     the Production-track comment further down), which the contract's own
     honors/discourse binding endorses, not a violation of it. */
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
/* Round 4 (2026-08-07): `.player-standing__head` (a flex row holding the
   eyebrow and a "Tier 5 · Apex" badge) and `.player-standing__tier-label`
   (the badge itself) are both GONE, along with the rule that separated them
   from the headline.
   Why the badge went: the card was naming the same fact three times before
   the reader reached any prose -- "17 rungs" (eyebrow), "Tier 5" (badge),
   "R15" (headline) -- and the badge's tier word was ALSO the rightmost label
   of the axis directly below the rail, so "Apex" was printed twice on one
   card. The axis is the honest home for tier vocabulary (it is a scale
   legend), so the tier read now lives there and only there, carried by
   __tier-marker--current below.
   Why the rule went with it: with the badge deleted the border-bottom was
   separating the eyebrow from its OWN headline. An eyebrow and the headline
   it introduces are one unit; a rule between them reads as a divider between
   two things. The eyebrow is now a plain block sitting directly on the
   headline, which is also the 538/Pudding treatment. */
.player-standing__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0 0 3px 0;
}
.player-standing__rung-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 1.6vw + 8px, 30px);
  letter-spacing: 0.02em;
  color: #222222;
  margin: 0 0 4px 0;
  line-height: 1;
}
.player-standing__story {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #5b5b5b;
  margin: 0 0 12px 0;
  max-width: 56ch;
}
.player-standing__rail {
  display: flex;
  gap: 3px;
  align-items: stretch;
  margin-top: 8px;
}
.player-standing__rung {
  flex: 1;
  min-width: 0;
  height: 14px;
  border-radius: 2px;
  background: #e4e4e1;
  position: relative;
}
.player-standing__rung--filled {
  background: #e5ae38;
}
.player-standing__rung--current {
  /* Flat fill, not a gradient -- doc 90 SS1.1 forbids gradients outright
     (doc 100 SS4.3 Kind C flagged this exact rule). The "current rung" read
     is carried by the box-shadow ring alone, same as before. */
  background: #e5ae38;
  box-shadow: 0 0 0 1px rgba(229, 174, 56, 0.6);
}
/* Two-track redesign (2026-07-25): a projected/model-elevated rung (Wave 2B
   is_projected) is EARNED-adjacent but not earned -- dashed/hollow instead
   of the solid gold fill above, so "how sure are we" is legible on the rail
   itself instead of a floating "PROJECTED" text badge (retired this pass).
   Cells before it stay solid-filled: only the rung actually in question is
   hollow. */
.player-standing__rung--projected {
  background: transparent;
  border: 1.5px dashed #e5ae38;
}
/* `.player-standing__rung-id` was deleted here 2026-08-07. It styled a
   per-cell R-ordinal caption that this module has never once emitted -- the
   class appears in no render and in no commit in the file's history (checked
   with `git log -S`). The rail's `data-rung-id="R00".."R16"` ATTRIBUTE is a
   different thing and is still emitted, unchanged; only the never-used class
   rule is gone. Zero rendered-output difference. */
/* gap MUST stay 3px to match .player-standing__rail's own gap -- the whole
   alignment argument in the tier_markers builder depends on the two rows
   sharing one gap budget. `justify-content` is gone: with weighted flex the
   markers fill the row exactly, and space-between would have redistributed
   any rounding remainder into the gaps and re-introduced the drift. */
.player-standing__tier-row {
  display: flex;
  margin-top: 18px;
  gap: 3px;
}
/* No `flex: 1` here -- the per-marker `style="flex:N"` inline weight is the
   whole point (see the builder comment). min-width:0 lets a marker narrower
   than its text stay at its true geometric width instead of being pushed
   wide by its own content, which would drag every marker after it out of
   alignment. Overflow spills rather than wraps: a wrapped two-line label
   changes the row height and, at 9px, is less legible than one that simply
   extends past its box. */
.player-standing__tier-marker {
  min-width: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: none;
  text-align: center;
  color: #8b8b8b;
  white-space: nowrap;
}
/* The current tier -- gold, per doc 100's EARNED binding, the same meaning
   the filled gold rail cells above carry. This one rule is what allows the
   "Tier N · <name>" badge to be deleted without losing the tier read: the
   axis is now simultaneously the scale legend and the you-are-here marker,
   where before those were two separate pieces of UI naming the same fact. */
.player-standing__tier-marker--current {
  color: #e5ae38;
  font-weight: 700;
}
/* Narrow widths. At ~390px a rail cell is ~16px, so a 2-rung tier's marker
   box is ~35px while "Not on team" needs ~52px -- all six labels cannot be
   legible at once, and six colliding 9px gray strings is worse than fewer.
   `visibility` rather than `display`/`width` deliberately: a hidden marker
   KEEPS its box, so the surviving current-tier label stays at exactly the
   x-position it occupies on desktop, still centred over its own tier's
   cells. The scale's range is still readable off the rail itself; what a
   phone reader needs from this row is "which tier am I in", and that is the
   one label left standing. */
/* 2026-08-07: the endpoints survive too. Hiding everything but the current
   marker left a single gold word alone in the row -- an axis with no start and
   no end is not an axis, it is a label, and the reader lost the one thing this
   row exists to give them (where the player sits ALONG a progression). Keeping
   the first and last markers restores both anchors for two more ~30px strings.
   When the current tier IS an endpoint the two rules simply agree. */
@media (max-width: 560px) {
  .player-standing__tier-marker { visibility: hidden; }
  .player-standing__tier-marker--current,
  .player-standing__tier-marker--edge { visibility: visible; }
}
.player-standing--empty {
  color: #8b8b8b;
  font-style: italic;
  font-size: var(--fs-meta, 0.78rem);
  font-family: 'Fraunces', Georgia, serif;
}
/* Two-track redesign (2026-07-25): axis labels above each track ("RECOGNITION"
   above the existing rung rail, "PRODUCTION" above the new percentile bar
   below). Only rendered when both tracks are present -- a lone "Recognition"
   label above the only track is chrome nobody asked for; see
   player_standing__track-label--first below. */
.player-standing__track-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #8b8b8b;
  margin: 16px 0 6px 0;
}
.player-standing__track-label--first {
  margin-top: 4px;
}
/* Production track (CFB Index Score) -- deliberately BLUE, not gold: gold on
   this component means EARNED recognition (accolades), blue is the sitewide
   convention for a model/computed claim (same reasoning as .player-standing__
   synergy-tag above). A continuous percentile bar, not 17 discrete cells --
   the composite score is a continuous 0-100 number, not an ordinal ladder. */
.player-standing__prod-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.player-standing__prod-bar {
  flex: 1;
  min-width: 0;
}
/* Track/fill/dot markup now comes from the shared theme/percentile_bar.py
   component (render_percentile_track(), Phase 3 item 13 consolidation,
   2026-08-06) -- .player-standing__prod-bar above is now just an
   accessibility wrapper (role="img"/aria-label), not the visual box.
   .player-standing__prod-track uses the same compound-selector pattern as
   box_savant.py's own override: a taller track that always wins over the
   shared component's default height regardless of stylesheet load order
   (two classes on one selector beats one). */
.wcfb-percentile-bar__track.player-standing__prod-track {
  height: 14px;
  background: #e4e4e1;
}
/* This rail is deliberately BLUE, not diverging red/grey/blue: color
   already carries fixed meaning on this component (gold cells above =
   earned recognition, blue = a model/computed claim -- see the module
   docstring's Wave 2B note), and the value here is a continuous CFB Index
   Score, not a peer percentile where "red = bad" is the right read. A
   mid-range score rendering red would misstate that. The 3-component
   selector (class + class + attribute) always outranks the shared
   component's own 2-component data-pct-* rules regardless of load order --
   same technique as the height override above, applied to background. */
.player-standing .wcfb-percentile-bar__fill[data-pct-low="true"],
.player-standing .wcfb-percentile-bar__fill[data-pct-medium="true"],
.player-standing .wcfb-percentile-bar__fill[data-pct-high="true"] {
  background: #008fd5;
}
.player-standing__prod-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #222222;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Narrow widths (2026-08-07). The label is `white-space: nowrap` beside a
   `flex: 1` bar, so a long summary -- "38 · #382 of 544 safeties" is ~150px --
   takes its space out of the bar, and below ~480px the bar collapses to a
   stub that can no longer show a fill position. Stacking gives the label its
   full width and the bar the row's, and puts the number FIRST (order: -1),
   which is the reading order everywhere else on the site: the value, then the
   scale it sits on. */
@media (max-width: 480px) {
  .player-standing__prod-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .player-standing__prod-label {
    order: -1;
    white-space: normal;
  }
}
/* Origin line -- recruiting pedigree vs. current rank. Gray, because it is
   context for the Production number directly above rather than a claim of its
   own (doc 100 binds gray to context). The "Now #N of M" half is ink and
   tabular: it is the same measured fact the bar above draws, and the whole
   point of the line is that the eye can land on it against the pedigree. */
.player-standing__origin {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #8b8b8b;
  margin: 6px 0 0 0;
  max-width: 62ch;
}
.player-standing__origin-now {
  color: #222222;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Collection callout -- a navigation offer, not a claim, so it takes the
   link blue the rest of the card already uses for its one other outbound
   link (the market's "full market ›") rather than introducing a hue. Sits on
   a hairline rule so it reads as a footer to the card rather than a fifth
   track. */
.player-standing__collection {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  margin: 12px 0 0 0;
  padding-top: 8px;
  border-top: 1px solid #e4e4e1;
}
.player-standing__collection a {
  color: #008fd5;
  text-decoration: none;
}
.player-standing__collection a:hover { text-decoration: underline; }
/* The model qualifier on a projected headline. Deliberately quiet -- it is a
   caveat on the word beside it, not a second headline -- but it is real text
   in the h3, which is the whole point: the dashed rail cell it accompanies is
   not a disclosure a reader can read. */
.player-standing__rung-qualifier {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8b8b8b;
  vertical-align: 0.35em;
}
/* No-rung headline slot for the partial render (see the `standing_rung` arg
   docstring). Matches .player-standing--empty's voice -- this IS that copy,
   just no longer the only thing on the card. */
.player-standing__no-rung {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--fs-meta, 0.78rem);
  color: #8b8b8b;
  margin: 2px 0 0 0;
}
/* Wave 2B (2026-07-21): synergy note (fable §21) -- "~our read" gap between
   the accolade rung and the archetype profile. Blue, not gold: the whole
   rail is gold for EARNED recognition (filled/current cells above); blue is
   reserved sitewide for a model claim, and this line is exactly that claim
   (see fable Round 5 R4.2C ruling on the ghost/bracket hue). Not the shared
   .ttag trust-tag component (common/components.py) -- its CSS is not wired
   into the player-page bundle (verified 2026-07-21: no player_pages module
   imports render_trust_tag), so a bespoke, self-contained tag avoids an
   unstyled cross-module dependency. */
.player-standing__synergy {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #5b5b5b;
  margin: 0 0 12px 0;
  max-width: 62ch;
}
.player-standing__synergy-tag {
  display: inline-block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #008fd5;
  margin-right: 3px;
}
.player-standing__synergy-season {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-style: italic;
  color: #8b8b8b;
}
/* Gap bracket (fable R6.1 bend #2) -- replaces the illegibly-small ghost-cell
   idea (Round 5 verdict: a 1px dashed outline on a ~17x14px cell is a speck).
   A thin dashed span drawn ABOVE the rung cells, from the earned rung to the
   R09 cap, with a "playing like" label at its far (right) end. Dashed keeps
   the earned(solid)-vs-unearned(dashed) encoding already in play on this
   rail (--filled/--current are solid); blue keeps it in the model's voice,
   never gold (gold already means "earned" on this component). Percentage
   geometry approximates the 17 equal-flex cells + gaps -- an annotation, not
   a pixel-exact chart. */
.player-standing__rail {
  position: relative;
}
.player-standing__rail--has-bracket {
  margin-top: 30px;
}
.player-standing__bracket {
  position: absolute;
  top: -13px;
  height: 8px;
  border-left: 1px dashed #008fd5;
  border-right: 1px dashed #008fd5;
  border-top: 1px dashed #008fd5;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}
.player-standing__bracket-label {
  position: absolute;
  right: 0;
  top: -17px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #8b8b8b;
  white-space: nowrap;
}

/* ── The Ladder: next-season award outlook (2026-08-06) ──────────────────────
   A THIRD signal on a component that already carries two, so the first design
   question was where to put it without making the other two ambiguous. What is
   already spoken for:
     - solid gold cell        = rung EARNED
     - dashed gold cell       = current rung, model-elevated (is_projected)
     - dashed BLUE bracket    = "playing like" a higher rung (synergy; a claim
                                about how he plays NOW)
     - solid blue percentile  = Production track (CFB Index Score)
   The new signal is none of those: it is a base-rate ODDS estimate that a
   specific future rung gets reached NEXT season.

   Three treatments were built out on paper before this one was chosen:

   (1) Ghost-fill the target cells on the rail, weighted by probability.
       Rejected, and rejected once before -- the fable Round 5 verdict on the
       original ghost-cell idea stands: a rail cell is ~17x14px, and a
       low-opacity fill or 1px dashed outline at that size is a speck, not a
       signal. It would also collide head-on with the dashed-gold "projected"
       cell, which is the same size, the same shape, and means something else.

   (2) A second bracket above the rail, hue-shifted from the synergy bracket.
       Rejected as the worst of the three: two dashed annotated brackets
       drawn in the same 8px band, both anchored at the earned rung, both
       spanning rightward. They would literally overlap for any player who has
       both, and a reader would have no way to learn which dash means "plays
       like a first-teamer" and which means "might be named one". That is
       exactly the conflation this feature must not create.

   (3) A third labeled TRACK below the rail -- chosen. The component already
       established an axis-label-plus-row grammar when the Production track
       landed (2026-07-25), so this reuses a vocabulary the reader has already
       been taught on this exact card rather than inventing a fourth overlay
       idiom. It is legible at any width, it cannot geometrically collide with
       the bracket, and it puts the three claims in three physically separate
       bands: what he EARNED (rail), how he PLAYS (bracket), what is NEXT
       (this). The rail then gets one small, unambiguous companion mark -- see
       __rung-target below.

       This bracket-plus-outlook case is LIVE, not hypothetical -- measured
       2026-08-07: 19 players carry both an ahead_of_recognition synergy bracket
       and a 2026 outlook row, and all 19 were rendered and inspected at 900px
       and 390px. Worth stating because the co-occurrence is easy to conclude is
       impossible and it is not: an earlier check found zero and read that as
       the two features being mutually exclusive. They are not. Sitewide the
       bracket fires for 72 of 11,109 profiled players (0.65%), and the gate is
       `rung < 8` (similarity_engine.standing_vs_profile) -- which overlaps the
       outlook population heavily rather than excluding it, since 554 of a
       600-player outlook sample also sit at rung < 8. The zero was a base-rate
       artifact of the sample size, nothing structural. Do not "simplify" this
       section on the assumption the two never appear together.

   Hue: blue. Per docs/design-system/100-accent-semantics-contract.md this is a
   model claim, not earned recognition, so gold is out -- gold here would read
   as "already his", the single most damaging misread available. Blue is
   already this component's model-claim hue (synergy tag, Production fill), and
   the contract binds hue to MEANING, not to uniqueness: two model-claim
   surfaces sharing blue is the contract working, not a collision. The two are
   still told apart by form -- Production is a solid blue FILL, the outlook is
   blue only on a hollow ring and a single word of label. */
.player-standing__outlook {
  margin-top: 6px;
}
.player-standing__outlook-line {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #5b5b5b;
  margin: 0 0 1px 0;
}
.player-standing__outlook-tier {
  font-weight: 700;
  color: #008fd5;
}
/* not_in_range is deliberately gray, not red: doc 100 binds red to LOSSES.
   A long-odds award projection is not a loss, it is context. */
.player-standing__outlook-tier--not_in_range { color: #8b8b8b; }
.player-standing__outlook-award { font-weight: 700; color: #222222; }
/* The basis line is its own block now, not a trailing clause on the award
   sentence -- see the outlook_html comment on why the year/conference collision
   needed a line break rather than a shorter sentence. Gray per doc 100: it is
   context for the claim above, not a claim. */
.player-standing__outlook-basis {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #8b8b8b;
  margin: 0;
  max-width: 62ch;
  font-variant-numeric: tabular-nums;
}
/* "#8 of 16" in ink, as ONE unit. This is the card's only differentiation
   between a dominant returner and a coin-flip, and it is spent here because the
   rank is a measured fact while the four p_estimate values it maps to have
   overlapping intervals (see the _cohort_figure comment). Ink rather than blue:
   the figure is an observation about last season, not a model claim, and doc 100
   binds blue to the claim. */
.player-standing__outlook-figure {
  font-weight: 700;
  color: #222222;
}
/* Realignment note. Inherits the gray of the basis line it now closes, because
   it is the same KIND of thing -- context for the number, not a claim of its
   own, and doc 100 binds gray to context. Deliberately NOT one of the
   meaning-bound hues:
   a conference move is neither a win nor a loss nor a model claim, and coloring
   it would assert a judgement the site has not made. Italic is the only
   differentiation, so the eye separates "where he ranked" from "where he is
   going" without a second color entering a card that already carries two. */
.player-standing__outlook-move {
  font-style: italic;
}
/* The exact percentage lives here and ONLY here -- owner constraint: compute
   the number exactly, show a qualitative tier, keep the number one tap away.
   A <details> rather than a title= tooltip so it is reachable on touch and by
   keyboard; tooltips are neither. */
.player-standing__outlook-detail {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  color: #8b8b8b;
  margin: 4px 0 0 0;
}
.player-standing__outlook-detail > summary {
  cursor: pointer;
  color: #008fd5;
  font-size: 11.5px;
  list-style: none;
}
.player-standing__outlook-detail > summary::-webkit-details-marker { display: none; }
.player-standing__outlook-detail > summary::after { content: ' ›'; }
.player-standing__outlook-detail[open] > summary::after { content: ' ‹'; }
.player-standing__outlook-detail p {
  margin: 6px 0 0 0;
  line-height: 1.5;
  max-width: 62ch;
  font-variant-numeric: tabular-nums;
}
/* Market line (Heisman) -- the LEDE of the outlook block, not its footnote.
   Kept visually distinct from the curve-derived claim below because its
   PROVENANCE is different (a real sportsbook price, not our base rate), and a
   reader who cannot tell those apart cannot judge either. The rule now sits
   BELOW it rather than above, because it separates a market quote from our
   estimate in that reading order. Only ever rendered when the player is
   actually in the priced field; heisman_trajectory.py owns that gate and this
   module never invents a line.

   SOLID, not dotted, and that is a measured choice rather than a style
   preference: `1px dotted #e4e4e1` computed to a 0.67px dot pattern and was
   invisible in the real 900px and 390px renders, which would have left this
   comment asserting a separation the page did not actually draw. Solid at the
   same token is the treatment __head already uses a few rules up, and that one
   demonstrably renders.

   The percentage is the largest thing in the outlook block and still clearly
   subordinate to the rung headline above (13px vs the headline's clamped
   22-30px Fraunces) -- promoted, not shouting. */
.player-standing__outlook-market {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: #5b5b5b;
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e4e1;
}
.player-standing__outlook-market-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #008fd5;
  margin-bottom: 1px;
}
/* Wraps so the "full market" link can sit at the far end on a wide card and
   fall under the number on a narrow one, instead of forcing a horizontal
   overflow at 390px. */
.player-standing__outlook-market-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
}
.player-standing__outlook-market-num {
  font-size: 17px;
  font-weight: 800;
  color: #008fd5;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.player-standing__outlook-market-meta {
  color: #5b5b5b;
  font-variant-numeric: tabular-nums;
}
/* Deep-links to the Scout tab (`?tab=scout`), which owns the full market block
   -- the American price, the book count and the movement chips. Was
   `#accolade-trajectory` until 2026-08-07: that id exists only in reporting.py's
   legacy pre-tabbed player card and appears in 0 of 400 sampled built pages,
   so the link was a no-op on every real page. margin-left:auto parks it at the
   trailing edge when the row fits on one line and collapses harmlessly when it
   wraps. */
.player-standing__outlook-market-more {
  margin-left: auto;
  font-size: 11.5px;
  color: #008fd5;
  text-decoration: none;
  white-space: nowrap;
}
.player-standing__outlook-market-more:hover { text-decoration: underline; }

/* The rail's companion mark: a hollow blue ring inside the TARGET rung cell.
   A ring rather than a fill, an outline rather than a dash, and blue rather
   than gold -- so it is confusable with neither the solid-gold earned cell nor
   the dashed-gold projected cell. Unlike the rejected ghost-fill (1) above, a
   centred ring survives the 17x14px cell because it is a shape at the cell's
   centre rather than a treatment of its edge. Rendered only when the target
   rung is genuinely AHEAD of the earned rung; a player already at or past it
   gets the outlook track without a rail mark, because there is nothing ahead
   of him to point at. */
.player-standing__rung-target {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid #008fd5;
  background: transparent;
  pointer-events: none;
}

/* Coaching Lineage module */
.coaching-lineage {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.coaching-lineage__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.coaching-lineage__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0;
}
.coaching-lineage__total {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
}
.coaching-lineage__rows {
  display: grid;
  gap: 8px;
}
.coaching-lineage__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 6px 10px;
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
}
.coaching-lineage__row--era-change {
  border-left: 4px solid #e5ae38;
}
.coaching-lineage__year {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  color: #e5ae38;
  font-weight: 600;
  min-width: 50px;
}
.coaching-lineage__coach {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #222222;
}
.coaching-lineage__coach a { color: inherit; text-decoration: underline; text-decoration-color: #e5ae38; }
.coaching-lineage__coach a:hover { text-decoration-color: #222222; }
.coaching-lineage__team {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  color: #8b8b8b;
}
.coaching-lineage__story {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #5b5b5b;
  margin: 8px 0 0 0;
  max-width: 56ch;
}
.coaching-lineage--empty {
  color: #8b8b8b;
  font-style: italic;
  font-size: var(--fs-meta, 0.78rem);
  font-family: 'Fraunces', Georgia, serif;
}

/* Mirror Match module */
.mirror-match {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.mirror-match__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.mirror-match__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8b8b8b;
  margin: 0;
}
.mirror-match__similarity {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(36px, 3vw + 12px, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #e5ae38;
  margin: 0;
}
.mirror-match__match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 22px;
  align-items: center;
}
.mirror-match__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 1.6vw + 8px, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #222222;
  margin: 0 0 4px 0;
}
.mirror-match__meta {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  color: #8b8b8b;
}
.mirror-match__story {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #5b5b5b;
  margin: 8px 0 0 0;
  max-width: 56ch;
}
.mirror-match__sim-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #8b8b8b;
  text-align: right;
  display: block;
}
.mirror-match--empty {
  color: #8b8b8b;
  font-style: italic;
  font-size: 0.78rem;
  font-family: 'Fraunces', Georgia, serif;
}

/* Live Signal Flow placeholder */
.live-signal-flow {
  margin: var(--space-3, 0.75rem) 0 var(--space-4, 1rem) 0;
  padding: clamp(10px, 1.4vw, 14px) clamp(14px, 1.8vw, 20px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.live-signal-flow__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0;
}
.live-signal-flow__bands {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.live-signal-flow__band {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #e4e4e1;
}
.live-signal-flow__band-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
}
.live-signal-flow__band-value {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  color: var(--foreground, #5b5b5b);
}
.live-signal-flow__band-value--awaiting {
  font-style: italic;
  color: #8b8b8b;
}
.live-signal-flow__status {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 11px;
  font-style: italic;
  color: #8b8b8b;
}

/* Heisman Trajectory sparkline */
.heisman-traj {
  margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem) 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.heisman-traj__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.heisman-traj__eyebrow {
  font-family: 'Archivo', var(--font-sans, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--fg-muted, #8b8b8b);
  margin: 0;
}
.heisman-traj__peak {
  font-family: 'Fraunces', var(--font-serif, Georgia, serif);
  font-size: clamp(22px, 1.6vw + 8px, 30px);
  font-weight: 600;
  color: #e5ae38;
  margin: 0;
  line-height: 1;
}
.heisman-traj__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 22px;
  align-items: center;
}
.heisman-traj__chart {
  width: 100%;
  height: 90px;
}
.heisman-traj__chart .traj-line {
  stroke: #e5ae38;
  stroke-width: 2;
  fill: none;
}
.heisman-traj__chart .traj-fill {
  fill: rgba(229, 174, 56, 0.15);
}
.heisman-traj__chart .traj-axis-line {
  stroke: rgba(34, 34, 34, 0.12);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.heisman-traj__chart .traj-end-dot {
  fill: #e5ae38;
  stroke: rgba(34, 34, 34, 0.2);
  stroke-width: 2;
}
.heisman-traj__meta {
  display: grid;
  gap: 4px;
  font-family: 'Archivo', var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  color: var(--fg-secondary, #5b5b5b);
  text-align: right;
}
.heisman-traj__meta-value {
  font-family: 'Fraunces', var(--font-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-primary, #222222);
}
.heisman-traj__story {
  font-family: 'Archivo', var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-secondary, #5b5b5b);
  margin: 8px 0 0 0;
  max-width: 56ch;
}
.heisman-traj--empty {
  color: var(--fg-muted, #8b8b8b);
  font-style: italic;
  font-size: 0.78rem;
  font-family: 'Archivo', var(--font-sans, system-ui, sans-serif);
}
/* Preseason Heisman futures odds block */
.heisman-odds {
  margin: 0 0 var(--space-4, 1rem) 0;
  padding: clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 24px);
  background: rgba(229, 174, 56, 0.06);
  border: 1px solid rgba(229, 174, 56, 0.25);
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.heisman-odds__left { display: grid; gap: 2px; }
.heisman-odds__eyebrow {
  font-family: 'Archivo', var(--font-sans, system-ui, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--fg-muted, #8b8b8b); margin: 0;
}
.heisman-odds__label {
  font-family: 'Archivo', var(--font-sans, system-ui, sans-serif);
  font-size: 13px; color: var(--fg-secondary, #5b5b5b); margin: 0;
}
.heisman-odds__odds {
  font-family: 'Fraunces', var(--font-serif, Georgia, serif);
  font-size: clamp(22px, 1.4vw + 8px, 28px);
  font-weight: 600; color: #e5ae38; line-height: 1;
}
.heisman-odds__meta {
  font-family: 'Archivo', var(--font-sans, system-ui, sans-serif);
  font-size: 11px; color: var(--fg-muted, #8b8b8b);
  text-align: right; display: grid; gap: 2px;
}

/* Career Arc module */
.career-arc {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.career-arc__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8b8b8b;
  margin: 0 0 14px 0;
}
.career-arc__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  position: relative;
}
.career-arc__rail::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #e4e4e1;
  z-index: 0;
}
.career-arc__beat {
  display: grid;
  gap: 8px;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 8px;
}
.career-arc__beat-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e4e4e1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  color: #8b8b8b;
  font-weight: 700;
}
.career-arc__beat--has-data .career-arc__beat-dot {
  background: #e5ae38;
  color: #222222;
}
.career-arc__beat-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #8b8b8b;
}
.career-arc__beat-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(15px, 0.9vw + 9px, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #222222;
}
.career-arc__beat-meta {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  color: #8b8b8b;
}
.career-arc--empty {
  color: #8b8b8b;
  font-style: italic;
  font-size: 0.78rem;
  font-family: 'Fraunces', Georgia, serif;
}

/* Development Trajectory chart */
.dev-traj {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.dev-traj__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.dev-traj__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8b8b8b;
  margin: 0;
}
.dev-traj__metric {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: #8b8b8b;
}
.dev-traj__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 20px;
  align-items: stretch;
}
.dev-traj__bars {
  display: flex;
  gap: 8px;
  align-items: end;
  min-width: 140px;
  height: 80px;
}
.dev-traj__bar {
  flex: 1;
  background: linear-gradient(
    to top,
    #e5ae38 0%,
    color-mix(in srgb, #e5ae38 50%, transparent) 100%
  );
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  position: relative;
}
.dev-traj__bar-year {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 9px;
  color: #8b8b8b;
  text-align: center;
}
.dev-traj__bar-value {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 9px;
  color: #5b5b5b;
  text-align: center;
  margin-bottom: 2px;
}
.dev-traj__story {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #5b5b5b;
  margin: 0;
  max-width: 56ch;
}
.dev-traj__delta {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 1.4vw + 8px, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #222222;
  margin: 0 0 4px 0;
  line-height: 1;
}
.dev-traj__delta--positive { color: #6d904f; }
.dev-traj__delta--negative { color: #fc4f30; }

/* Selector Grid module */
.selector-grid {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.selector-grid__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0 0 12px 0;
}
.selector-grid__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 540px) {
  .selector-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.selector-grid__cell {
  display: grid;
  gap: 4px;
  padding: 8px 4px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
}
.selector-grid__cell--gold {
  background: color-mix(in srgb, #e5ae38 18%, transparent);
  border-color: #e5ae38;
}
.selector-grid__cell--silver {
  background: rgba(192, 192, 200, 0.10);
  border-color: rgba(192, 192, 200, 0.40);
}
.selector-grid__cell--bronze {
  background: rgba(176, 132, 95, 0.10);
  border-color: rgba(176, 132, 95, 0.40);
}
.selector-grid__cell-name {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #222222;
  text-transform: none;
}
.selector-grid__cell-medal {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  color: #8b8b8b;
  letter-spacing: 0.04em;
}
.selector-grid__cell--gold .selector-grid__cell-medal { color: #e5ae38; }
.selector-grid__cell--silver .selector-grid__cell-medal { color: #C0C0C8; }
.selector-grid__cell--bronze .selector-grid__cell-medal { color: #B0845F; }
.selector-grid__story {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #5b5b5b;
  margin: 12px 0 0 0;
}
.selector-grid--empty {
  color: #8b8b8b;
  font-style: italic;
  font-size: var(--fs-meta, 0.78rem);
  font-family: 'Fraunces', Georgia, serif;
}

/* Player Game Log module */
.player-game-log {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.player-game-log__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.player-game-log__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  color: #8b8b8b;
  margin: 0;
}
.player-game-log__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: #222222;
}
.player-game-log__meta {
  font-size: 0.78rem;
  color: #8b8b8b;
}
.player-game-log__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.player-game-log__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 540px;
}
.player-game-log__table th,
.player-game-log__table td {
  padding: 7px 9px;
  text-align: right;
  border-bottom: 1px solid #e4e4e1;
  white-space: nowrap;
}
.player-game-log__table th {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #8b8b8b;
  font-weight: 600;
  border-bottom: 1px solid #d7d7d4;
}
.player-game-log__table th:first-child,
.player-game-log__table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: linear-gradient(90deg, #ffffff 80%, transparent);
  z-index: 1;
}
.player-game-log__table th:nth-child(2),
.player-game-log__table td:nth-child(2) { text-align: left; }
.player-game-log__table tr:hover td { background: #f7f7f6; }
.player-game-log__week {
  font-weight: 600;
  color: #222222;
}
.player-game-log__opp {
  color: #5b5b5b;
}
.player-game-log__result {
  display: inline-block;
  min-width: 50px;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 6px;
}
.player-game-log__result--win {
  background: #ecf3ec;
  color: #2e6b30;
}
.player-game-log__result--loss {
  background: #fce8e8;
  color: #9b2020;
}
.player-game-log__result--tie {
  background: #f4f4f4;
  color: #5b5b5b;
}
.player-game-log__result--na {
  background: #f4f4f4;
  color: #8b8b8b;
}
.player-game-log__note {
  font-size: 0.74rem;
  color: #8b8b8b;
  font-style: italic;
  text-align: left;
  min-width: 160px;
  max-width: 240px;
  white-space: normal;
}
.player-game-log__note-col {
  text-align: left;
}
.player-game-log__total-row td {
  border-top: 1px solid #d7d7d4;
  font-weight: 600;
  color: #222222;
  background: #f0f0f0;
}
.player-game-log__empty {
  padding: 14px;
  color: #8b8b8b;
  font-size: 0.88rem;
  font-style: italic;
}
@media (max-width: 720px) {
  .player-game-log__table { font-size: 0.78rem; min-width: 480px; }
  .player-game-log__table th,
  .player-game-log__table td { padding: 6px 7px; }
}

/* Box-Score Savant card */
.box-savant {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid var(--team-color, #222222);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.box-savant__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.box-savant__title {
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: #222222;
}
.box-savant__subtitle {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.78rem;
  color: #8b8b8b;
  margin: 2px 0 0 0;
}
.box-savant__head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.box-savant__meta {
  font-size: 0.74rem;
  color: #8b8b8b;
}
.box-savant__lede {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #5b5b5b;
  margin: 8px 0 14px 0;
}
.box-savant__lede strong { color: #222222; }
.box-savant__band-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8b8b8b;
  margin: 14px 0 8px 0;
}
.box-savant__band-label:first-child { margin-top: 0; }
.box-savant__bars { display: flex; flex-direction: column; gap: 9px; }
.box-savant__bar-row {
  display: grid;
  grid-template-columns: 11.5rem 1fr 4rem;
  gap: 14px;
  align-items: center;
}
.box-savant__bar-label {
  font-size: 0.86rem;
  color: #5b5b5b;
}
.box-savant__bar-label small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #8b8b8b;
  margin-top: 1px;
}
/* Track/fill/dot markup itself now comes from the shared
   theme/percentile_bar.py component (render_percentile_track(),
   .wcfb-percentile-bar__track/__fill/__dot — Phase 3 item 13 consolidation,
   2026-08-06). This block only carries box_savant's own modifiers on top of
   that shared element: a taller track + quartile tick marks. The compound
   selectors (two classes required) are deliberate, not decorative — the
   shared component's own `.wcfb-percentile-bar__track { height: 4px }`
   rule ships in the SAME cascade (via _player_pages_v2_css() ->
   cfb-index.<hash>.css, which loads before stats_table.css on both player
   renderers), so a single-class `.box-savant__bar-track { height: 12px }`
   override would depend on stylesheet load order to win. Two classes on
   one selector always outranks one class on specificity, regardless of
   order. */
.wcfb-percentile-bar__track.box-savant__bar-track {
  height: 12px;
  overflow: visible;
}
.box-savant__bar-track::before,
.box-savant__bar-track::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(34,34,34,0.15);
}
.box-savant__bar-track::before { left: 25%; }
.box-savant__bar-track::after  { left: 75%; }
.box-savant__bar-value {
  text-align: right;
  font-weight: 600;
  font-size: 0.88rem;
  color: #222222;
}
.box-savant__bar-value small {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: #8b8b8b;
  font-weight: 500;
}
.box-savant__details {
  margin-top: 4px;
}
.box-savant__details summary {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b5b5b;
  cursor: pointer;
  padding: 6px 0;
}
.box-savant__details .box-savant__bars { margin-top: 8px; }
.box-savant__trend {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e4e4e1;
}
.box-savant__trend-title {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8b8b8b;
  margin: 0 0 8px 0;
}
.box-savant__trend-null {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: baseline;
  gap: 8px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12.5px;
  color: #8b8b8b;
  padding: 3px 0;
}
.box-savant__trend-null-label { font-weight: 600; color: #222222; }
.box-savant__footnote {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e4e4e1;
  font-size: 0.74rem;
  color: #8b8b8b;
  line-height: 1.45;
}
.box-savant--empty {
  color: #8b8b8b;
  font-style: italic;
  padding: 14px;
}
@media (max-width: 640px) {
  .box-savant__bar-row {
    grid-template-columns: 9rem 1fr 3.4rem;
    gap: 10px;
  }
  .box-savant__bar-label { font-size: 0.80rem; }
  .box-savant__bar-value { font-size: 0.80rem; }
  .box-savant__trend-null { grid-template-columns: 1fr; }
}

/* Player Splits module */
.player-splits {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.player-splits__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.player-splits__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0;
}
.player-splits__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: #222222;
}
.player-splits__meta {
  font-size: 0.74rem;
  color: #8b8b8b;
}
.player-splits__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
/* No gray fill -- matches the dna_match.py/aura_module.py/trophy_case.py
   precedent (commit 41049da4 / item 13). */
.player-splits__panel {
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  padding: 12px 14px;
}
.player-splits__panel-title {
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0 0 6px 0;
}
.player-splits__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.player-splits__table th,
.player-splits__table td {
  padding: 5px 6px;
  text-align: right;
  border-bottom: 1px solid #e4e4e1;
}
.player-splits__table th:first-child,
.player-splits__table td:first-child {
  text-align: left;
  color: #5b5b5b;
  font-weight: 500;
}
.player-splits__table th {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #8b8b8b;
  font-weight: 600;
}
.player-splits__games-pill {
  display: inline-block;
  padding: 1px 6px;
  background: #f0f0f0;
  border-radius: 3px;
  font-size: 0.66rem;
  color: #8b8b8b;
  margin-left: 6px;
}
.player-splits__delta {
  display: inline-block;
  font-size: 0.68rem;
  color: #8b8b8b;
  margin-top: 4px;
}
.player-splits__empty {
  padding: 12px;
  color: #8b8b8b;
  font-size: 0.86rem;
  font-style: italic;
}

/* Peer Comparator module */
.peer-comparator {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.peer-comparator__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.peer-comparator__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0;
}
.peer-comparator__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: #222222;
}
.peer-comparator__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px 0;
}
.peer-comparator__pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 3px;
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  font-size: 0.78rem;
  color: #5b5b5b;
}
.peer-comparator__pill--focal {
  background: #e5ae38;
  color: #15161a;
  font-weight: 600;
  border-color: #e5ae38;
}
.peer-comparator__pill-team {
  font-size: 0.70rem;
  color: #8b8b8b;
}
.peer-comparator__pill--focal .peer-comparator__pill-team {
  color: rgba(0,0,0,0.55);
}
.peer-comparator__pill-sim {
  font-size: 0.66rem;
  color: #8b8b8b;
  margin-left: 4px;
}
.peer-comparator__pill--focal .peer-comparator__pill-sim {
  color: rgba(0,0,0,0.55);
}
.peer-comparator__grid {
  display: grid;
  gap: 8px;
}
.peer-comparator__metric {
  display: grid;
  grid-template-columns: 10rem 1fr;
  align-items: center;
  gap: 12px;
}
.peer-comparator__metric-label {
  font-size: 0.80rem;
  color: #5b5b5b;
}
.peer-comparator__bars {
  display: grid;
  gap: 4px;
}
.peer-comparator__bar {
  display: grid;
  grid-template-columns: 1fr 3.5rem;
  align-items: center;
  gap: 8px;
}
.peer-comparator__bar-fill {
  position: relative;
  height: 8px;
  border-radius: 3px;
  background: #e4e4e1;
  overflow: hidden;
}
.peer-comparator__bar-fill > span {
  display: block;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--pct-mid, #6b7280) 0%,
    var(--pct-b1, #4a78c4) 60%,
    var(--pct-b0, #1e6fd9) 100%
  );
  border-radius: 3px;
}
.peer-comparator__bar--focal .peer-comparator__bar-fill > span {
  background: #e5ae38;
}
.peer-comparator__bar-value {
  text-align: right;
  font-size: 0.74rem;
  color: #8b8b8b;
  font-weight: 500;
}
.peer-comparator__bar--focal .peer-comparator__bar-value {
  color: #e5ae38;
  font-weight: 600;
}
.peer-comparator__bar-label {
  font-size: 0.66rem;
  color: #8b8b8b;
}
/* CFB Index Score row -- visually distinct from the box-rate percentile
   rows above/below it: different fill color (green, matching the score's
   established tone elsewhere on the site) + a dashed rule under it, so a
   reader scanning the stack has a cue that row is a different KIND of
   number (a composite rank, not a raw box-stat percentile) even though it
   shares the same bar geometry. */
.peer-comparator__metric--score {
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px dashed #e4e4e1;
}
.peer-comparator__metric--score .peer-comparator__metric-label {
  font-weight: 700;
  color: #222222;
}
.peer-comparator__metric--score .peer-comparator__bar-fill > span {
  background: #6d904f;
}
.peer-comparator__metric--score .peer-comparator__bar--focal .peer-comparator__bar-fill > span {
  background: #4f7538;
}
.peer-comparator__metric--score .peer-comparator__bar--focal .peer-comparator__bar-value {
  color: #4f7538;
}
.peer-comparator__footnote {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #e4e4e1;
  font-size: 0.72rem;
  color: #8b8b8b;
  line-height: 1.45;
}
.peer-comparator--empty {
  color: #8b8b8b;
  font-style: italic;
  padding: 14px;
}
@media (max-width: 640px) {
  .peer-comparator__metric {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .peer-comparator__metric-label { font-size: 0.74rem; }
}

/* Supporting Cast module */
.supporting-cast {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.supporting-cast__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.supporting-cast__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.supporting-cast__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.supporting-cast__staff-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
/* Tier-2 container (audit item 13 continuation, 2026-08-06): white + hairline,
   no gray fill -- matches player_pages/components.py's `.pc-card--t2` and the
   dna_match.py/aura_module.py precedent (commit 41049da4). */
.supporting-cast__staff-card {
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  padding: 10px 12px;
}
.supporting-cast__staff-role {
  font-size: 0.66rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0 0 4px 0;
}
.supporting-cast__staff-name {
  font-size: 0.92rem; font-weight: 600;
  color: #222222;
}
.supporting-cast__scheme {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
/* Tier-2 container, same treatment as .supporting-cast__staff-card above. */
.supporting-cast__scheme-tile {
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  padding: 9px 12px;
}
.supporting-cast__scheme-label {
  font-size: 0.66rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b;
}
.supporting-cast__scheme-value {
  font-size: 1.05rem; font-weight: 600;
  color: #222222;
}
.supporting-cast__scheme-note {
  font-size: 0.72rem; color: #8b8b8b;
}
/* Tier-2 container, same treatment as the two rules above. Previously had
   no border at all under the gray fill; a hairline is added here (not just
   dropped to bare white) so the element keeps a visible boundary. */
.supporting-cast__tagline {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  font-size: 0.86rem;
  color: #5b5b5b;
  font-style: italic;
}
.supporting-cast--empty {
  color: #8b8b8b;
  font-style: italic;
  padding: 14px;
}

/* Narrative Arc — 3-act season story */
.narrative-arc-v2 {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
}
.narrative-arc-v2__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 14px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.narrative-arc-v2__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.narrative-arc-v2__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.narrative-arc-v2__acts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) {
  .narrative-arc-v2__acts { grid-template-columns: 1fr; gap: 10px; }
}
.narrative-arc-v2__act {
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 14px 16px;
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.narrative-arc-v2__act::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px;
  background: #e5ae38;
  opacity: 0.45;
}
.narrative-arc-v2__act--opening::before { opacity: 0.30; }
.narrative-arc-v2__act--pivot::before   { opacity: 0.55; }
.narrative-arc-v2__act--finish::before  { opacity: 0.85; }
.narrative-arc-v2__act-num {
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: none;
  color: #e5ae38;
  font-weight: 600;
  padding-left: 10px;
}
.narrative-arc-v2__act-label {
  font-size: 0.80rem; font-weight: 600;
  color: #222222;
  padding-left: 10px;
}
.narrative-arc-v2__act-text {
  font-size: 0.92rem; line-height: 1.5;
  color: #5b5b5b;
  padding-left: 10px;
  margin: 0;
}
.narrative-arc-v2__footnote {
  margin-top: 10px;
  font-size: 0.66rem; color: #8b8b8b;
  font-style: italic;
}
.narrative-arc-v2--empty {
  color: #8b8b8b;
  font-style: italic;
  padding: 14px;
}

/* NIL + Draft card */
.nil-draft {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.nil-draft__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 6px;
}
.nil-draft__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.nil-draft__title {
  font-size: 1.0rem; font-weight: 600; margin: 0;
  color: #222222;
}
.nil-draft__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.nil-draft__tile {
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 9px 12px;
}
.nil-draft__tile-label {
  font-size: 0.66rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b;
  margin: 0 0 2px 0;
}
.nil-draft__tile-value {
  font-size: 1.05rem; font-weight: 600;
  color: #222222;
  margin: 0;
}
.nil-draft__tile-sub {
  font-size: 0.72rem; color: #8b8b8b;
}
.nil-draft__tile--gold {
  border-color: #e5ae38;
  background: rgba(209, 162, 58, 0.06);
}
.nil-draft__tile--gold .nil-draft__tile-value {
  color: #e5ae38;
}
.nil-draft__stars {
  display: inline-flex; gap: 2px; color: #e5ae38;
  font-size: 0.90rem; letter-spacing: 1px;
}
.nil-draft__note {
  margin-top: 8px;
  font-size: 0.66rem; color: #8b8b8b;
  font-style: italic;
}

/* Scenario Explorer / Season Pace */
.scenario-explorer-v2 {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.scenario-explorer-v2__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.scenario-explorer-v2__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.scenario-explorer-v2__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.scenario-explorer-v2__rows {
  display: grid; gap: 8px;
}
.scenario-explorer-v2__row {
  display: grid; grid-template-columns: 9rem 1fr;
  gap: 12px; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid #e4e4e1;
}
.scenario-explorer-v2__row:last-child { border-bottom: 0; }
.scenario-explorer-v2__row-label {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #8b8b8b;
}
.scenario-explorer-v2__row-values {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  gap: 12px;
}
.scenario-explorer-v2__row-value {
  font-size: 1.0rem; font-weight: 600;
  color: #222222;
}
.scenario-explorer-v2__row-sub {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #8b8b8b;
  font-weight: 500;
  margin-top: 2px;
}
.scenario-explorer-v2__row--pace .scenario-explorer-v2__row-value {
  color: #e5ae38;
}
.scenario-explorer-v2__lede {
  font-size: 0.86rem; line-height: 1.45;
  color: #5b5b5b;
  margin: 0 0 10px 0;
}
.scenario-explorer-v2__milestones {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e4e4e1;
}
.scenario-explorer-v2__milestone-line {
  font-size: 0.78rem;
  color: #5b5b5b;
  margin: 4px 0;
}
.scenario-explorer-v2__milestone-line strong {
  color: #e5ae38;
}
.scenario-explorer-v2--empty {
  color: #8b8b8b;
  font-style: italic;
  padding: 14px;
}

/* Career-retrospective Standing */
.career-standing {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.career-standing__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.career-standing__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.career-standing__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.career-standing__peak {
  font-size: 0.80rem;
  color: #e5ae38;
  font-weight: 600;
}
.career-standing__seasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.career-standing__season {
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 12px 14px;
  position: relative;
}
.career-standing__season--peak {
  border-color: #e5ae38;
  background: rgba(209, 162, 58, 0.06);
}
.career-standing__season-year {
  font-size: 0.70rem; letter-spacing: 0.12em;
  color: #8b8b8b;
}
.career-standing__season-team {
  font-size: 0.78rem;
  color: #5b5b5b;
  margin: 2px 0;
}
.career-standing__season-rung {
  font-size: 1.0rem;
  font-weight: 700;
  color: #222222;
  margin: 4px 0 0 0;
}
.career-standing__season--peak .career-standing__season-rung {
  color: #e5ae38;
}
.career-standing__season-tier {
  font-size: 0.70rem;
  color: #8b8b8b;
  margin-top: 2px;
}
.career-standing__peak-pin {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: #e5ae38;
  color: #15161a;
  border-radius: 50%;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0;
}
.career-standing__nfl-badge {
  display: inline-block;
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #5b5b5b;
  margin-top: 8px;
}

/* Trophy Case v2 */
.trophy-case-v2 {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: linear-gradient(
    135deg,
    rgba(209, 162, 58, 0.04) 0%,
    #e4e4e1 60%
  );
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
}
.trophy-case-v2__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.trophy-case-v2__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #e5ae38; margin: 0;
  font-weight: 600;
}
.trophy-case-v2__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.trophy-case-v2__count {
  font-size: 0.76rem; color: #8b8b8b;
}
.trophy-case-v2__streams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
/* Tier-2 container (audit item 13 continuation, 2026-08-06): white + hairline,
   no gray fill -- matches the dna_match.py/aura_module.py precedent (commit
   41049da4). --top's gold tint is untouched: that's a real semantic highlight
   (this stream is the player's best), not the plain-gray fill this fixes. */
.trophy-case-v2__stream {
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  padding: 12px 14px;
  position: relative;
}
.trophy-case-v2__stream--top {
  border-color: #e5ae38;
  background: rgba(209, 162, 58, 0.08);
}
.trophy-case-v2__stream-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0 0 6px 0;
}
.trophy-case-v2__stream--top .trophy-case-v2__stream-label {
  color: #e5ae38;
}
.trophy-case-v2__stream-headline {
  font-size: 1.0rem; font-weight: 700;
  color: #222222;
}
.trophy-case-v2__stream--top .trophy-case-v2__stream-headline {
  color: #e5ae38;
}
.trophy-case-v2__stream-detail {
  margin-top: 4px;
  font-size: 0.74rem;
  color: #5b5b5b;
  line-height: 1.4;
}
.trophy-case-v2__stream-medal {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
.trophy-case-v2__empty {
  padding: 14px;
  color: #8b8b8b;
  font-style: italic;
}

.conf-recognition {
  margin: 0.75rem 0 1.25rem 0;
  padding: 10px 14px;
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-left: 3px solid #e5ae38;
  border-radius: 3px;
}
.conf-recognition__eyebrow {
  font-size: 0.68rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0 0 6px 0; font-weight: 600;
}
.conf-recognition__list {
  display: flex; flex-direction: column; gap: 4px;
}
.conf-recognition__row {
  display: flex; align-items: baseline; gap: 8px; font-size: 0.86rem;
}
.conf-recognition__name {
  color: #222222; font-weight: 600;
}
.conf-recognition__year {
  color: #8b8b8b; font-variant-numeric: tabular-nums;
}
.conf-recognition__cite {
  color: #8b8b8b; text-decoration: none; font-size: 0.72em;
  border-bottom: 1px dotted #8b8b8b;
}
.conf-recognition__cite:hover { color: #008fd5; border-bottom-color: #008fd5; }

/* Stat-ribbon sparklines */
.stat-spark {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 6px;
  overflow: visible;
}
.stat-spark__line {
  fill: none;
  stroke: #e5ae38;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.stat-spark__fill {
  fill: #e5ae38;
  opacity: 0.12;
}
.stat-spark__dot {
  fill: #e5ae38;
  stroke: #15161a;
  stroke-width: 1.0;
}
.stat-spark__baseline {
  stroke: #e4e4e1;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* Pass Profile (PBP depth buckets + Adjusted ANY/A) */
.pass-profile {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #008fd5;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.pass-profile__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.pass-profile__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.pass-profile__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.pass-profile__coverage {
  margin: 2px 0 12px 0;
}
.pass-profile__anya {
  margin-bottom: 14px;
}
.pass-profile__anya-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 560px) {
  .pass-profile__anya-grid { grid-template-columns: 1fr; }
}
/* No gray fill -- matches the dna_match.py/aura_module.py/trophy_case.py
   precedent (commit 41049da4 / item 13). */
.pass-profile__anya-tile {
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  padding: 10px 14px;
}
.pass-profile__anya-label {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: none;
  color: #8b8b8b; margin: 0 0 4px 0;
}
.pass-profile__anya-value {
  font-size: 1.5rem; font-weight: 800; color: #222222;
}
.pass-profile__anya-rank {
  font-size: 0.76rem; color: #5b5b5b; margin-left: 6px;
}
.pass-profile__pctbar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: #e4e4e1; margin-top: 8px;
}
.pass-profile__pctbar > span {
  display: block; height: 100%; background: #1e6fd9;
}
.pass-profile__pctbar--inverted > span { background: #6d904f; }
.pass-profile__take {
  font-size: 0.86rem; line-height: 1.5; color: #5b5b5b;
  margin: 10px 0 0 0;
}
.pass-profile__anya-source {
  font-size: 0.72rem; line-height: 1.4; color: #8b8b8b;
  margin: 8px 0 0 0;
}
.pass-profile__buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .pass-profile__buckets { grid-template-columns: 1fr; }
}
.pass-profile__bucket {
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  padding: 12px 14px;
}
.pass-profile__bucket-label {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: none;
  color: #8b8b8b;
  margin: 0 0 6px 0;
}
.pass-profile__bucket-range {
  font-size: 0.70rem;
  color: #8b8b8b;
  display: block;
  margin-bottom: 6px;
}
.pass-profile__cmp {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 4px;
}
.pass-profile__cmp-pct {
  font-size: 1.4rem; font-weight: 700;
  color: #222222;
}
.pass-profile__cmp-sub {
  font-size: 0.74rem;
  color: #8b8b8b;
}
.pass-profile__counts {
  display: flex; gap: 10px;
  font-size: 0.78rem;
  color: #5b5b5b;
  margin-top: 4px;
}
.pass-profile__count-td  { color: #e5ae38; }
.pass-profile__count-int { color: #ee8a92; }
.pass-profile__count-comp{ color: #4a78c4; }
.pass-profile__bar {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: #e4e4e1;
  margin-top: 8px;
}
.pass-profile__bar > span {
  display: block; height: 100%;
  background: var(--pct-b0, #1e6fd9);
}
.pass-profile__lede {
  font-size: 0.86rem; line-height: 1.5;
  color: #5b5b5b;
  margin: 10px 0 0 0;
}
.pass-profile--empty {
  color: #8b8b8b;
  font-style: italic;
  padding: 14px;
}

/* Situational (Phase 3: By down / Yardage DNA / Third-down role) */
.situational {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid var(--team-color, #222222);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.situational__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.situational__title {
  font-family: "Fraunces", serif;
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.situational__subtitle {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.78rem; color: #8b8b8b; margin: 2px 0 0 0;
}
.situational__meta {
  font-size: 0.74rem; color: #8b8b8b;
}
.situational__note {
  font-size: 0.86rem; line-height: 1.5; color: #5b5b5b;
  margin: 10px 0 0 0;
}

/* Panel 1 -- By down: hero stat + paired-row (baseline vs. situation) */
.situational__hero {
  margin: 4px 0 16px 0;
}
.situational__hero-delta {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: #222222;
  margin: 0; line-height: 1;
}
.situational__hero-sub {
  font-size: 0.9rem; color: #5b5b5b; margin: 4px 0 0 0;
}
.situational__hero-none {
  font-size: 0.92rem; line-height: 1.45; color: #5b5b5b;
  margin: 4px 0 16px 0;
}
.situational__hatched {
  font-size: 0.82rem; color: #8b8b8b; padding: 6px 0;
  background-image: repeating-linear-gradient(
    -45deg, rgba(139,139,139,0.08), rgba(139,139,139,0.08) 4px,
    transparent 4px, transparent 8px
  );
}

/* Panel 2 -- Yardage DNA */
.situational__bands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.situational__band {
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 10px 14px;
  text-align: center;
}
.situational__band-pct {
  font-size: 1.4rem; font-weight: 800; color: #222222;
}
.situational__band-label {
  font-size: 0.72rem; color: #5b5b5b; margin-top: 4px;
}

/* Panel 3 -- Third-down role */
.situational__fraction {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.situational__fraction-pct {
  font-size: 1.8rem; font-weight: 800; color: #222222;
}
.situational__fraction-sub {
  font-size: 0.84rem; color: #5b5b5b;
}

@media (max-width: 640px) {
  /* Paired-pin rows (dumbbell_stack, Panel 1) collide on a narrow track at
     typical delta sizes -- go label-above-track full-width, matching doc 31's
     existing percentile-bar mobile variant. */
  .situational .dbs-row { grid-template-columns: 1fr; }
}
.ttag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:2px;vertical-align:middle;line-height:1.6;
  font-family:"Archivo",system-ui,sans-serif}
.ttag.fact{color:#0a5a86;background:#e7f3fb}
.ttag.read{color:#7a5a00;background:#faf3e0}
.ttag .td{width:6px;height:6px;border-radius:50%;display:inline-block}
.ttag.fact .td{background:var(--blue,#008fd5)}
.ttag.read .td{background:var(--gold,#e5ae38)}
.xp{border:1px solid var(--rule,#d7d7d4);border-radius:2px}
.xp-btn{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;
  gap:10px;background:none;border:none;padding:10px 14px;
  font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:600;
  color:var(--ink,#222);cursor:pointer;transition:background .12s ease}
.xp-btn:hover{background:var(--row,#f7f7f6)}
.xp-chev{font-size:15px;flex:0 0 auto;transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  display:inline-block}
.xp.open .xp-chev{transform:rotate(180deg)}
.xp-body{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .24s ease}
.xp.open .xp-body{grid-template-rows:1fr}
.xp-inner{min-height:0;padding:0 14px}
.xp.open .xp-inner{padding:10px 14px 14px}
.hfoot{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;line-height:1.5;
  color:var(--ink-3,#8b8b8b);font-family:"Archivo",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;border-top:1px solid var(--line,#e4e4e1);
  padding-top:6px;margin-top:8px}
.hfoot b{color:var(--ink-2,#5b5b5b);font-weight:600}.dotstrip-svg{width:100%;height:auto;display:block}
.dotstrip-sticks{stroke:var(--ink-3,#8b8b8b);stroke-width:1.5;stroke-dasharray:3 3}
.dotstrip-sticks-label{font-family:"Archivo",system-ui,sans-serif;font-size:10px;fill:var(--ink-3,#8b8b8b)}
.dotstrip-dot--made{fill:var(--blue,#008fd5);opacity:.85}
.dotstrip-dot--short{fill:var(--red,#fc4f30);opacity:.85}
/* Claim cards (Phase 4A: Defensive / Punter / Boom vs consistent) */
.claim-card {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #8b8b8b;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.claim-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.claim-card__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.claim-card__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.claim-card__stats {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 4px 0 10px 0;
}
.claim-card__stat {
  display: flex; flex-direction: column; gap: 2px;
}
.claim-card__stat-value {
  font-size: 1.3rem; font-weight: 800; color: #222222;
}
.claim-card__stat-label {
  font-size: 0.68rem; letter-spacing: 0.10em; color: #8b8b8b;
}
.claim-card__take {
  font-size: 0.86rem; line-height: 1.5; color: #5b5b5b;
  margin: 8px 0 0 0;
}
.claim-card__note {
  font-size: 0.74rem; color: #8b8b8b;
  margin: 8px 0 0 0;
}
.claim-card__ledger {
  list-style: none; margin: 10px 0 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.claim-card__ledger-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.82rem; color: #5b5b5b;
  padding: 6px 8px;
  background: #f7f7f6;
  border-radius: 2px;
}
.claim-card__ledger-chip {
  color: #8b8b8b; font-size: 0.76rem;
}

/* Season Context strip */
.season-context {
  margin: var(--space-3, 0.75rem) 0 var(--space-4, 1rem) 0;
  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 18px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.season-context__head {
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  text-transform: none;
  color: #8b8b8b;
  margin: 0 0 6px 0;
}
.season-context__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.season-context__row {
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 0.82rem;
}
.season-context__year {
  display: inline-block;
  font-weight: 700;
  color: #e5ae38;
  margin-right: 6px;
}
.season-context__team {
  color: #222222;
  font-weight: 600;
}
.season-context__record {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 0.70rem;
  background: #f0f0f0;
  border-radius: 3px;
  color: #5b5b5b;
}
.season-context__detail {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  color: #8b8b8b;
  line-height: 1.4;
}

/* Player Status Strip — Wave 25 / Module 1 */
.player-status-strip {
  margin: var(--space-3, 0.75rem) 0 var(--space-4, 1rem) 0;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid var(--pss-accent, #8b8b8b);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  contain: layout;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.player-status-strip__badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--pss-badge-fg, #15161a);
  background: var(--pss-accent, #e4e4e1);
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.player-status-strip__detail {
  font-size: 0.92rem;
  color: #222222;
  line-height: 1.35;
  font-weight: 500;
}
.player-status-strip__detail-sub {
  display: block;
  font-size: 0.72rem;
  color: #8b8b8b;
  font-weight: 400;
  margin-top: 1px;
}
.player-status-strip__as-of {
  font-size: 0.66rem;
  color: #8b8b8b;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.player-status-strip__as-of--override {
  background: rgba(209, 162, 58, 0.15);
  color: #e5ae38;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
}
/* Archetype accents — 538 palette (doc-90) */
.player-status-strip--returning_2026         { --pss-accent: #6d904f; --pss-badge-fg: #ffffff; }
.player-status-strip--transferred_college    { --pss-accent: #8b8b8b; --pss-badge-fg: #ffffff; }
.player-status-strip--nfl_drafted_2026       { --pss-accent: #008fd5; --pss-badge-fg: #ffffff; }
.player-status-strip--nfl_drafted_prior      { --pss-accent: #008fd5; --pss-badge-fg: #ffffff; }
.player-status-strip--nfl_udfa               { --pss-accent: #8b8b8b; --pss-badge-fg: #ffffff; }
.player-status-strip--portal_open            { --pss-accent: #8b8b8b; --pss-badge-fg: #ffffff; }
.player-status-strip--portal_withdrew        { --pss-accent: #6d904f; --pss-badge-fg: #ffffff; }
.player-status-strip--exhausted_eligibility  { --pss-accent: #5b5b5b; --pss-badge-fg: #ffffff; }
.player-status-strip--medical_retirement     { --pss-accent: #5b5b5b; --pss-badge-fg: #ffffff; }
.player-status-strip--historical_alum        { --pss-accent: #8b8b8b; --pss-badge-fg: #ffffff; }
.player-status-strip--hs_recruit_only        { --pss-accent: #8b8b8b; --pss-badge-fg: #ffffff; }
.player-status-strip--unknown                { --pss-accent: #e4e4e1; --pss-badge-fg: #f4f4f5; }
/* Mobile */
@media (max-width: 640px) {
  .player-status-strip {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    padding: 10px 14px;
  }
  .player-status-strip__badge { justify-self: start; }
  .player-status-strip__as-of { justify-self: start; font-size: 0.62rem; }
}

/* Where They Ended Up — Wave 25 / Module 3 */
.where-ended-up {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.where-ended-up--nfl       { border-left-color: #008fd5; }
.where-ended-up--transfer  { border-left-color: #e5ae38; }

.where-ended-up__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.where-ended-up__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.where-ended-up__title {
  font-size: 1.15rem; font-weight: 700; margin: 0;
  color: #222222;
}
.where-ended-up__title small {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: #8b8b8b;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Variant 5A — NFL destination */
.where-ended-up__pick {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 12px 0;
}
.where-ended-up__pick-chip {
  display: inline-flex; flex-direction: column;
  background: #222222;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 3px;
  text-align: center;
  min-width: 84px;
}
.where-ended-up__pick-chip--first-overall {
  background: #e5ae38;
  color: #15161a;
  box-shadow: none;
}
.where-ended-up__pick-overall {
  font-family: var(--font-numeral, 'Archivo', system-ui, sans-serif);
  font-size: 1.7rem; line-height: 1;
  font-weight: 700;
}
.where-ended-up__pick-round {
  font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: none;
  margin-top: 2px;
  opacity: 0.85;
}
.where-ended-up__destination {
  display: flex; flex-direction: column; gap: 2px;
}
.where-ended-up__destination-name {
  font-size: 1.1rem; font-weight: 600;
  color: #222222;
}
.where-ended-up__destination-sub {
  font-size: 0.78rem;
  color: #8b8b8b;
}

/* Variant 5B — transfer flow */
.where-ended-up__flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 14px 0;
}
/* No gray fill -- matches the dna_match.py/aura_module.py/trophy_case.py
   precedent (commit 41049da4 / item 13). */
.where-ended-up__from,
.where-ended-up__to {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
}
.where-ended-up__from { text-align: right; }
.where-ended-up__team-label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: none;
  color: #8b8b8b;
}
.where-ended-up__team-name {
  font-size: 1.0rem; font-weight: 600;
  color: #222222;
}
.where-ended-up__arrow {
  font-size: 1.4rem;
  color: #e5ae38;
  font-weight: 700;
}

/* Role projection block (both variants) */
.where-ended-up__projection {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
}
.where-ended-up__projection-label {
  font-size: 0.66rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0 0 4px 0;
}
.where-ended-up__projection-text {
  font-size: 0.88rem; line-height: 1.45;
  color: #5b5b5b;
  margin: 0;
}

.where-ended-up__legacy {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e4e4e1;
  font-size: 0.78rem;
}
.where-ended-up__legacy-link {
  color: #e5ae38;
  text-decoration: none;
  font-weight: 500;
}
.where-ended-up__legacy-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .where-ended-up__pick {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .where-ended-up__pick-chip { align-self: start; }
  .where-ended-up__flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .where-ended-up__from { text-align: left; }
  .where-ended-up__arrow { display: none; }
}

/* 2026 Outlook — Wave 25 / Module 2 */
.outlook-2026 {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 3px solid oklch(0.60 0.16 150);  /* green = returning */
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.outlook-2026__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
  border-bottom: 1px solid #e4e4e1;
  padding-bottom: 8px;
}
.outlook-2026__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: none;
  color: #8b8b8b; margin: 0;
}
.outlook-2026__title {
  font-size: 1.05rem; font-weight: 600; margin: 0;
  color: #222222;
}
.outlook-2026__updated {
  font-size: 0.66rem; letter-spacing: 0.06em;
  color: #8b8b8b;
  background: #f0f0f0;
  padding: 2px 8px; border-radius: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.outlook-2026__lede {
  font-size: 0.88rem; line-height: 1.5;
  color: #5b5b5b;
  margin: 8px 0 14px 0;
}
.outlook-2026__cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .outlook-2026__cells { grid-template-columns: 1fr; }
}
.outlook-2026__cell {
  background: #f0f0f0;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.outlook-2026__cell-label {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: none;
  color: #8b8b8b;
  margin: 0;
}
.outlook-2026__cell-value {
  font-size: 1.05rem; font-weight: 700;
  color: #222222;
  line-height: 1.25;
}
.outlook-2026__cell-value--projected {
  color: #e5ae38;
}
.outlook-2026__cell-value--confirmed {
  color: #6d904f;
}
.outlook-2026__cell-value--competition {
  color: #fc4f30;
}
.outlook-2026__cell-sub {
  font-size: 0.74rem;
  color: #8b8b8b;
  line-height: 1.4;
}
.outlook-2026__cast-list {
  list-style: none; padding: 0; margin: 4px 0 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.outlook-2026__cast-list li {
  font-size: 0.78rem;
  color: #5b5b5b;
  line-height: 1.4;
  display: flex; gap: 6px; align-items: baseline;
}
.outlook-2026__cast-list strong {
  color: #222222;
  font-weight: 600;
}
.outlook-2026__award-list {
  list-style: none; padding: 0; margin: 4px 0 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.outlook-2026__award {
  font-size: 0.70rem; letter-spacing: 0.04em;
  padding: 3px 8px;
  background: #e5ae38;
  color: #15161a;
  border-radius: 3px;
  font-weight: 600;
}
.outlook-2026__no-awards {
  font-size: 0.74rem;
  color: #8b8b8b;
  font-style: italic;
}
.outlook-2026__team-context {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e4e4e1;
  font-size: 0.76rem;
  color: #8b8b8b;
  line-height: 1.5;
}

/* Score + confidence sit together (spec 15 §12): one visual unit so the
   reader never sees the number without its confidence. Flat, no radius. */
.composite-score-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Composite Score badge inside Box Savant header */
.composite-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border-radius: 3px;
  background: var(--badge-bg, #e4e4e1);
  border: 1px solid var(--badge-border, #e4e4e1);
}
.composite-score-badge__num {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--badge-color, var(--text-bright, #fff));
}
.composite-score-badge__label {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: none;
  color: var(--badge-color, #8b8b8b);
}
.composite-score-badge__rank {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  opacity: .85;
}
/* Sub-gate ("keep-but-filter", spec 15 §15.1) — score still shows, but a
   visibly distinct pending state, never the tier-badge chrome. */
.composite-score-badge--pending {
  background: var(--panel, #f0f0f0);
  border: 1px solid var(--line, #e4e4e1);
}
.composite-score-badge--pending .composite-score-badge__num,
.composite-score-badge--pending .composite-score-badge__label {
  color: var(--ink-2, #5b5b5b);
}
/* Info affordance — matches the site's established .fi-glossary ? button
   shape (3px radius, not a circle; doc-90 caps radius at 3px, no pills). */
.composite-score-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  min-height: 16px;
  padding: 0 0.3em;
  margin-left: 2px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  opacity: .55;
  transition: opacity .1s ease-in;
}
.composite-score-info:hover,
.composite-score-info:focus-visible {
  opacity: 1;
}
.composite-score-info:focus-visible {
  outline: 2px solid var(--ink, #222222);
  outline-offset: 2px;
  border-radius: 2px;
}
.composite-score-trajectory-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  background: var(--page, #ffffff);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2, #5b5b5b);
  cursor: help;
}

.acc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px 0; }
.acc-tab {
  background: transparent;
  border: 1px solid color-mix(in srgb, #e5ae38 30%, transparent);
  color: var(--foreground, #222);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: none;
  padding: 6px 12px; border-radius: 3px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.acc-tab.is-active, .acc-tab[aria-pressed="true"] {
  background: color-mix(in srgb, #e5ae38 22%, transparent);
  border-color: #e5ae38;
  color: var(--accolade-gold-highlight, #e4c76b);
}
.acc-tab[data-state="empty"] { opacity: 0.55; }
.acc-body {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 18px;
  padding: 14px 16px;
  background: #f0f0f0;
  border: 1px solid color-mix(in srgb, #e5ae38 18%, transparent);
  border-radius: 3px;
}
@media (max-width: 640px) {
  .acc-body { grid-template-columns: 1fr; }
}
.acc-tile { display: flex; flex-direction: column; gap: 4px; }
.acc-tile-label {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none;
  color: var(--muted-foreground, #888);
}
.acc-tile-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 4vw, 42px); letter-spacing: 0.02em; line-height: 1;
  color: var(--accolade-gold-highlight, #e4c76b);
}
.acc-tile-sub {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px; color: var(--muted-foreground, #888); margin-top: 4px;
}
.acc-spark { color: #e5ae38; margin-top: 6px; }
.acc-copy {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px; line-height: 1.45; color: var(--foreground, #222);
}
.acc-sel-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px;
}
@media (max-width: 520px) { .acc-sel-grid { grid-template-columns: repeat(3, 1fr); } }
.acc-sel-cell {
  display: grid; gap: 2px; text-align: center; padding: 6px 4px;
  background: #f0f0f0;
  border: 1px solid #e4e4e1; border-radius: 3px;
}
.acc-sel--gold {
  background: color-mix(in srgb, #e5ae38 18%, transparent);
  border-color: #e5ae38;
}
.acc-sel--silver { background: rgba(192,192,200,0.10); border-color: rgba(192,192,200,0.40); }
.acc-sel--bronze { background: rgba(176,132,95,0.10); border-color: rgba(176,132,95,0.40); }
.acc-sel-key {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: none;
}
.acc-sel-medal {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px; letter-spacing: 0.04em;
}
.acc-sel--gold .acc-sel-medal { color: #e5ae38; }
.acc-sel--silver .acc-sel-medal { color: #c0c0c8; }
.acc-sel--bronze .acc-sel-medal { color: #b0845f; }

/* Player Story Card ("Dossier Noir") — doc 41. Raw css; the player page wraps it. */
.psc-card {
  /* 538/Pudding light migration (Phase 6 2026-06-16): card-scoped palette
   * flipped from dark to 538 light. Ink ramp -> white surfaces, cream text ->
   * 538 inks, hairlines -> 538 lines. Gold accents kept (data/accolade). */
  --psc-ink-900: #ffffff;
  --psc-ink-850: #ffffff;
  --psc-ink-800: #ffffff;
  --psc-hairline: #e4e4e1;
  --psc-hairline-strong: #d7d7d4;
  --psc-gold: #b58a2b;
  --psc-gold-deep: #8a6713;
  --psc-text-hi: #222222;
  --psc-text-body: #5b5b5b;
  --psc-text-mut: #8b8b8b;
  --psc-team: var(--psc-gold);
  /* Motion tokens (doc 41 §8.5) */
  --psc-ease-out: cubic-bezier(.22,.61,.36,1);
  --psc-ease-in: cubic-bezier(.55,.06,.68,.19);
  --psc-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --psc-t-micro: 120ms;
  --psc-t-state: 320ms;
  --psc-t-entrance: 450ms;
  --psc-t-ban: 420ms;

  position: relative;
  display: flex;
  margin: 0 0 clamp(16px, 2.5vw, 24px) 0;
  background: var(--psc-ink-800);
  border: 1px solid var(--psc-hairline);
  border-radius: 3px;
  overflow: hidden;
  color: var(--psc-text-body);
  font-family: 'Archivo', system-ui, sans-serif;
}
.psc-card--narrative {
  /* Resting state must be legible unconditionally -- visibility never
     depends on an entrance animation reaching its end state (reproduced
     ghosted/near-invisible on t2-tier cards when it didn't -- a good story
     nobody can read isn't a story). Entrance is an optional enhancement,
     applied via .psc-reveal by JS, never assumed by the base rule. */
}
.psc-card--narrative.psc-reveal {
  animation: psc-card-in var(--psc-t-entrance) var(--psc-ease-out) both;
}
@keyframes psc-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tier rail (tier-is-texture, §1/§4) */
.psc-card__rail {
  flex: 0 0 4px;
  align-self: stretch;
  background: var(--psc-hairline);
}
.psc-card[data-tier="s"]  .psc-card__rail { background: var(--psc-gold); }
.psc-card[data-tier="t1"] .psc-card__rail { background: #C7CBD1; }
.psc-card[data-tier="t2"] .psc-card__rail { background: #B08D57; }
.psc-card[data-tier="t3"] .psc-card__rail { background: var(--psc-hairline); }
/* S-tier one-time top->bottom sweep, tied to the entrance gesture. */
.psc-card--narrative[data-tier="s"] .psc-card__rail {
  background: linear-gradient(180deg,
    var(--psc-gold-deep) 0%, var(--psc-gold) 50%, var(--psc-gold-deep) 100%);
  background-size: 100% 220%;
  background-position: 0 100%;
  animation: psc-rail-sweep var(--psc-t-entrance) var(--psc-ease-out) forwards;
}
@keyframes psc-rail-sweep { to { background-position: 0 0; } }

.psc-card__inner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 16px);
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 24px);
}
.psc-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* Identity anchor (team-color touch only) */
.psc-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* .psc-identity__crest removed 2026-08-06 (cohort audit pass 4, item 13):
   it was an empty 40px circle -- a placeholder for a crest image that never
   arrived, so it shipped as pure decoration with nothing inside it. The
   team-color signal it carried is already on .psc-identity__name's 2px
   underline, and .psc-identity's gap simply goes inert with one child. */
.psc-identity__text { min-width: 0; }
.psc-identity__name {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--psc-text-hi);
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--psc-team);
  display: inline-block;
  padding-bottom: 2px;
  overflow-wrap: anywhere;
}
.psc-identity__meta {
  margin: 4px 0 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--psc-text-mut);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Chapter chip + freshness */
.psc-chapter {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end;
}
.psc-chapter__chip {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: none;
  color: var(--psc-gold);
  padding: 4px 10px;
  border: 1px solid var(--psc-hairline-strong);
  border-radius: 3px;
  white-space: nowrap;
}
.psc-chapter__fresh {
  font-size: 12px; color: var(--psc-text-mut);
  letter-spacing: 0.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Logline — mixed-case serif (NEVER all-caps) */
.psc-logline {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(18px, 3.2vw, 23px);
  line-height: 1.35;
  color: var(--psc-text-hi);
  overflow-wrap: anywhere;
}

/* Key-stat chips — STATIC (reads as fact, §8.5) */
.psc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.psc-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px;
  background: var(--psc-ink-850);
  border: 1px solid var(--psc-hairline);
  border-radius: 9px;
  transition: transform var(--psc-t-micro) var(--psc-ease-out),
              border-color var(--psc-t-micro) var(--psc-ease-out);
}
.psc-chip:hover { transform: translateY(-1px); border-color: var(--psc-hairline-strong); }
.psc-chip__value {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--psc-text-hi);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.psc-chip__label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: none;
  color: var(--psc-text-mut);
}

/* BAN — the single big honest number, number welded to label (§6) */
.psc-ban {
  background: var(--psc-ink-850);
  border: 1px solid var(--psc-hairline);
  border-radius: 3px;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
}
.psc-ban__label {
  margin: 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: none;
  color: var(--psc-text-mut);
}
.psc-ban__number {
  margin: 4px 0 0 0;
  font-family: var(--font-display, 'Fraunces', sans-serif);
  font-size: clamp(44px, 9vw, 68px);
  line-height: 0.92;
  color: var(--psc-gold);              /* default = rank/rarity register (doc 60 §2) */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.01em;
}
/* BAN color-by-register (doc 60 §2/§6): perception = violet, production = up/down
   by sign, rank/rarity = gold (default above). Locked Noir semantic accents. */
.psc-ban[data-ban-accent="aura"] .psc-ban__number { color: var(--psc-aura, #B794FF); }
.psc-ban[data-ban-accent="production"][data-ban-dir="up"] .psc-ban__number { color: var(--psc-up, #2EE07C); }
.psc-ban[data-ban-accent="production"][data-ban-dir="down"] .psc-ban__number { color: var(--psc-down, #FF4E42); }
/* The BAN is the ONE animated numeric hero in the view (§8.5). */
.psc-card--narrative .psc-ban__number {
  transform: scale(1.1);
  opacity: 0;
  animation: psc-ban-settle var(--psc-t-ban) var(--psc-ease-spring) 150ms forwards;
}
@keyframes psc-ban-settle { to { transform: scale(1); opacity: 1; } }
.psc-ban__receipt { margin: 8px 0 0 0; }

/* Receipts — hoverable source markers (doc 41 §1.3) */
.psc-receipt {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px; color: var(--psc-text-mut);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.psc-receipt__mark {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: none;
  color: var(--psc-gold);
  border: 1px solid var(--psc-hairline-strong);
  border-radius: 3px;
  padding: 1px 4px;
}
a.psc-receipt:hover { color: var(--psc-text-body); text-decoration: underline; }

/* Dominant take + confidence meter (compile, don't adjudicate) */
.psc-take {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: clamp(10px, 1.6vw, 14px);
  border-top: 1px solid var(--psc-hairline);
}
.psc-take__text {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.45;
  color: var(--psc-text-body);
}
.psc-take__meter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.psc-take__meter {
  flex: 1 1 120px; min-width: 100px; max-width: 220px;
  height: 6px; border-radius: 2px;
  background: var(--psc-ink-850);
  border: 1px solid var(--psc-hairline);
  overflow: hidden;
}
.psc-take__meter-fill {
  display: block; height: 100%;
  background: var(--psc-gold);
  border-radius: 2px;
}
.psc-take__meter-fill[data-band="medium"] { background: var(--psc-gold-deep); }
.psc-take__meter-fill[data-band="low"]    { background: var(--psc-hairline-strong); }
.psc-take__meter-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: none;
  color: var(--psc-text-mut);
}
.psc-take__meter-label[data-band="high"] { color: var(--psc-gold); }
.psc-take__sources {
  font-size: 11px; color: var(--psc-text-mut);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.psc-take__minority {
  margin: 0;
  font-size: 13px; line-height: 1.45;
  color: var(--psc-text-mut);
  font-family: 'Fraunces', Georgia, serif;
}
.psc-take__minority-tag {
  display: inline-block; margin-right: 6px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: none;
  color: var(--psc-text-mut);
  border: 1px solid var(--psc-hairline-strong);
  border-radius: 3px;
  padding: 1px 6px;
}

/* Tension line — serif italic */
.psc-tension {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.5;
  color: var(--psc-text-body);
}

/* Expand affordance — native <details>/<summary>, ≥44px target */
.psc-details { margin: 0; }
.psc-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  margin-top: clamp(8px, 1.4vw, 12px);
  background: var(--psc-ink-850);
  border: 1px solid var(--psc-hairline-strong);
  border-radius: 3px;
  cursor: pointer;
  list-style: none;
  color: var(--psc-gold);
  user-select: none;
  transition: transform var(--psc-t-micro) var(--psc-ease-out);
}
.psc-summary::-webkit-details-marker { display: none; }
.psc-summary:active { transform: scale(.98); }
.psc-summary:focus-visible {
  outline: 2px solid var(--psc-gold);
  outline-offset: 2px;
}
.psc-summary__label {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: none;
}
.psc-summary__chevron {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--psc-t-micro) var(--psc-ease-out);
}
.psc-details[open] .psc-summary__chevron { transform: rotate(-135deg); }

/* Expand panel — grid-template-rows:0fr->1fr (intrinsic height, no magic number) */
.psc-expand {
  display: grid;
  grid-template-rows: 1fr;       /* open state; details[open] reveals this node */
  transition: grid-template-rows var(--psc-t-state) var(--psc-ease-out);
}
.psc-expand__inner {
  overflow: hidden;
  min-height: 0;
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.6vw, 14px);
  padding-top: clamp(12px, 1.8vw, 16px);
  opacity: 1;
  animation: psc-reveal var(--psc-t-state) var(--psc-ease-out);
}
@keyframes psc-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.psc-recap__para {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; line-height: 1.6;
  color: var(--psc-text-body);
}
.psc-recap__kicker {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; font-style: italic; line-height: 1.5;
  color: var(--psc-text-hi);
}

/* Succession (Filling-the-Shoes + the Clock) */
.psc-succ {
  background: var(--psc-ink-850);
  border: 1px solid var(--psc-hairline);
  border-radius: 3px;
  padding: 12px 14px;
}
.psc-succ__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.psc-succ__eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: none;
  color: var(--psc-text-mut);
}
.psc-succ__read {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: none;
  color: var(--psc-gold);
  border: 1px solid var(--psc-hairline-strong);
  border-radius: 3px;
  padding: 2px 10px;
}
.psc-succ__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.psc-succ__line { display: flex; align-items: baseline; gap: 8px; }
.psc-succ__role {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: none;
  color: var(--psc-text-mut);
  flex: 0 0 auto;
}
.psc-succ__name {
  font-size: 14px; color: var(--psc-text-body);
}
.psc-succ__stars { color: var(--psc-gold); font-variant-numeric: tabular-nums; }
.psc-succ__line--clock { margin-top: 2px; }
.psc-succ__clock {
  font-size: 13px; font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--psc-text-hi);
}

/* Why-now heartbeat */
.psc-whynow {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-top: 4px;
}
.psc-whynow__tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: none;
  color: var(--psc-gold);
  border: 1px solid var(--psc-hairline-strong);
  border-radius: 3px;
  padding: 1px 6px;
}
.psc-whynow__text {
  font-size: 14px; line-height: 1.45; color: var(--psc-text-body);
}

/* Provenance footer */
.psc-cites { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.psc-cite { display: inline-flex; }
.psc-foot { padding-top: clamp(8px, 1.4vw, 12px); }
.psc-disclosure {
  margin: clamp(8px, 1.4vw, 12px) 0 0 0;
  font-size: 11px; color: var(--psc-text-mut);
  letter-spacing: 0.04em;
}

/* Tribal-Lens POV toggle (doc 49 §2) — sits just under the logline. A Noir
   pill row; only rendered when >= 2 lenses qualify (else no toggle at all).
   Static text swap (no animation beyond the micro border transition). */
.psc-lens {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0;
}
.psc-lens__tab {
  appearance: none;
  display: inline-flex; align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  background: var(--psc-ink-850);
  border: 1px solid var(--psc-hairline);
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: none;
  color: var(--psc-text-mut);
  transition: border-color var(--psc-t-micro) var(--psc-ease-out),
              color var(--psc-t-micro) var(--psc-ease-out);
}
.psc-lens__tab:hover { border-color: var(--psc-hairline-strong); color: var(--psc-text-body); }
.psc-lens__tab[aria-selected="true"] {
  color: var(--psc-gold);
  border-color: var(--psc-gold);
}
.psc-lens__tab:focus-visible {
  outline: 2px solid var(--psc-gold);
  outline-offset: 2px;
}

/* Changelog / EKG ("how this story shifted") — inside the expand panel; small,
   static, motionless. Hairline left-border per row, tabular date. */
.psc-ekg {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 4px;
}
.psc-ekg__eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: none;
  color: var(--psc-text-mut);
}
.psc-ekg__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.psc-ekg__row {
  display: flex; align-items: baseline; gap: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--psc-hairline-strong);
}
.psc-ekg__date {
  flex: 0 0 auto;
  font-size: 11px; color: var(--psc-text-mut);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
.psc-ekg__delta {
  font-size: 13px; line-height: 1.45;
  color: var(--psc-text-body);
  overflow-wrap: anywhere;
}

/* Low-data stats strip (§5) — motionless always */
.psc-card--strip { animation: none; opacity: 1; transform: none; }
.psc-card--strip .psc-card__inner { gap: 8px; }
.psc-strip__note {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px; line-height: 1.5;
  color: var(--psc-text-body);
}
.psc-strip__stat {
  margin: 0;
  font-size: 13px; color: var(--psc-text-mut);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Composed "story so far" card (cohort audit item 12) — the strip's chrome
   with the assembled sentence promoted to the lead. Reads a step above the
   bare note (this is a story) and a step below the narrative logline (this is
   the verified-record rail, not the discourse one) — pass 6 §S5, visual weight
   follows evidence class. */
.psc-composed__story {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.5;
  color: var(--psc-text-hi);
  overflow-wrap: anywhere;
}
.psc-composed__note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--psc-text-mut);
}

/* Mobile-first: stack head when narrow */
@media (max-width: 520px) {
  .psc-card__head { flex-direction: column; gap: 8px; }
  .psc-chapter { justify-content: flex-start; }
}

/* prefers-reduced-motion: kill ALL motion (entrance, BAN, sweep, reveal) */
@media (prefers-reduced-motion: reduce) {
  .psc-card--narrative,
  .psc-card--narrative[data-tier="s"] .psc-card__rail,
  .psc-card--narrative .psc-ban__number,
  .psc-expand,
  .psc-expand__inner,
  .psc-chip,
  .psc-lens__tab,
  .psc-summary,
  .psc-summary__chevron {
    animation: none !important;
    transition: none !important;
  }
  .psc-card--narrative { opacity: 1; transform: none; }
  .psc-card--narrative .psc-ban__number { opacity: 1; transform: none; }
}

/* prefers-contrast: more — bump borders + text (doc 41 §2) */
@media (prefers-contrast: more) {
  .psc-card { border-color: var(--psc-hairline-strong); }
  .psc-chip, .psc-ban, .psc-succ, .psc-take__meter { border-color: var(--psc-hairline-strong); }
  .psc-identity__meta, .psc-take__meter-label, .psc-chip__label,
  .psc-ban__label, .psc-receipt, .psc-disclosure, .psc-strip__stat {
    color: var(--psc-text-hi);
  }
}

/* Print ink-saver (doc 41 §2): white bg, near-black ink, gold -> #8a6d10 */
@media print {
  .psc-card {
    --psc-ink-900: #ffffff;
    --psc-ink-850: #f4f2ec;
    --psc-ink-800: #ffffff;
    --psc-text-hi: #14130f;
    --psc-text-body: #2a2823;
    --psc-text-mut: #4a463d;
    --psc-gold: #8a6d10;
    --psc-gold-deep: #8a6d10;
    --psc-hairline: #cfcabd;
    --psc-hairline-strong: #aaa494;
    border-color: #cfcabd;
    color: #2a2823;
    animation: none;
    opacity: 1; transform: none;
  }
  .psc-card--narrative .psc-ban__number { animation: none; opacity: 1; transform: none; }
  .psc-details[open] .psc-expand,
  .psc-details:not([open]) .psc-expand__inner { display: block; }
}

/* ── DNA Match — 538/Pudding light ── */
/* Tier-2 container (audit item 13, P4 §7 disagreement #1): white + hairline,
   NO ribbon, NO gray fill. This card is a derived/context read (a similarity
   model's opinion about who a player resembles), so its quietness has to come
   from the absence of the ribbon, never from a --panel tint. Until 2026-08-06
   this rule carried both an off-white gray fill AND a 4px accent ribbon on the
   left border -- the two things tier 2 forbids. Matches
   player_pages/components.py's `.pc-card` / `.pc-card--t2`.
   --dna-accent survives: ~6 other rules (badge, hero bar, sim bar, hero
   ribbon) still consume it as semantic data color, which tier 2 permits. */
.dna-match {
  margin: 1.25rem 0 1.75rem;
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

/* ── Header ── */
.dna-match__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #e8e8e8;
}
.dna-match__module-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #aaa;
  margin: 0 0 5px;
}
.dna-match__archetype {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(17px, 1.4vw + 8px, 22px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 3px;
}
.dna-match__arch-desc {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  color: #777;
  line-height: 1.4;
  margin: 0;
  max-width: 44ch;
}
.dna-match__badge {
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
}
.dna-match__badge-pos {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--dna-accent, #008fd5);
  opacity: 0.18;
  letter-spacing: -0.03em;
}

/* ── Tabs ── */
.dna-match__tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid #e8e8e8;
}
.dna-match__tab {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #bbb;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 14px 9px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
  letter-spacing: 0.01em;
}
.dna-match__tab:hover { color: #666; }
.dna-match__tab--active {
  color: var(--dna-tab-color, #008fd5);
  border-bottom-color: var(--dna-tab-color, #008fd5);
}

/* ── Panel ── */
.dna-match__panel { display: none; }
.dna-match__panel--active { display: block; }
.dna-match__body { padding: 16px 20px 4px; }

/* Lede */
.dna-match__lede {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.875rem;
  font-style: italic;
  color: #666;
  line-height: 1.55;
  margin: 0 0 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e8e8e8;
}

/* ── Comp list ── */
.dna-match__comps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
}

/* Hero (#1) */
.dna-match__hero {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 3px solid var(--dna-accent, #008fd5);
  border-radius: 2px;
  padding: 12px 14px;
}
.dna-match__hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.dna-match__hero-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #222;
  margin: 0;
  line-height: 1.2;
}
.dna-match__comp-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #d7d7d4;
}
.dna-match__comp-link:hover { border-color: currentColor; }
.dna-match__hero-sim-wrap { text-align: right; flex-shrink: 0; }
.dna-match__hero-sim {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--dna-accent, #008fd5);
  line-height: 1;
  display: block;
}
.dna-match__hero-sim-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #c0c0c0;
  display: block;
  text-align: right;
  margin-top: 2px;
}
.dna-match__hero-bar-track {
  width: 100%;
  height: 3px;
  background: #eee;
  margin: 0 0 9px;
  overflow: hidden;
}
.dna-match__hero-bar-fill {
  height: 100%;
  background: var(--dna-accent, #008fd5);
}
.dna-match__hero-meta {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.70rem;
  color: #aaa;
  margin: 0 0 7px;
}

/* Credentials row (honors + draft) — shared by hero and secondary */
.dna-match__creds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}
/* Honors: text only, star prefix via ::before — no chip fill */
.dna-match__honor {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #777;
}
.dna-match__honor::before {
  content: '°5  ';
  color: #ccc;
  font-size: 0.58rem;
}
/* Draft: the ONLY colored chip */
.dna-match__draft {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
/* Draft round is ordinal (round 1/2/3+), not a production/perception/wins/
   losses signal -- doc 100 §4.3 flags the old gold/blue/green fills as
   three semantic hues spent on an ordinal value. Neutral/gray treatment
   for every drafted round; "ud" (undrafted) stays visually distinct via a
   quieter tint, not a fourth hue, and the round number in the chip text
   already carries the ordinal information. */
.dna-match__draft--r1 { background: #e0e0e0; color: #222; }
.dna-match__draft--r2 { background: #e0e0e0; color: #222; }
.dna-match__draft--r3 { background: #e0e0e0; color: #222; }
.dna-match__draft--ud { background: #f0f0f0; color: #888; }

/* Secondary comp rows */
.dna-match__comp-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 3.5rem;
  gap: 0 8px;
  align-items: start;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  transition: background 0.1s;
}
.dna-match__comp-row:hover { background: #fafafa; }
.dna-match__comp-rank {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.60rem;
  font-weight: 700;
  color: #d0d0d0;
  text-align: right;
  padding-top: 3px;
}
.dna-match__comp-body { min-width: 0; }
.dna-match__comp-name {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dna-match__comp-meta {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.67rem;
  color: #aaa;
  margin: 0 0 5px;
}
.dna-match__comp-sim { text-align: right; }
.dna-match__sim-pct {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1.0rem;
  font-weight: 800;
  color: #333;
  line-height: 1;
  display: block;
  text-align: right;
}
.dna-match__sim-bar-track {
  width: 100%;
  height: 3px;
  background: #eee;
  margin-top: 5px;
  overflow: hidden;
}
.dna-match__sim-bar-fill {
  height: 100%;
  background: var(--dna-accent, #008fd5);
}

/* ── Drivers ── */
.dna-match__drivers {
  border-top: 1px solid #ebebeb;
  padding: 12px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dna-match__driver-group-label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #bbb;
  margin: 0 0 5px;
}
.dna-match__driver-items {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
}
.dna-match__driver-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.73rem;
  line-height: 1.3;
}
.dna-match__driver-item--match  { color: #3a6b2a; }
.dna-match__driver-item--differ { color: #bbb; }
.dna-match__driver-pip {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dna-match__driver-pip--match  { background: #6d904f; }
.dna-match__driver-pip--differ { background: #e0e0e0; }

/* ── Career trajectory spark ── */
.dna-match__trajectory {
  height: 48px;
  margin: 4px 0 12px;
  padding-top: 10px;
  border-top: 1px solid #ebebeb;
}
@media (max-width: 480px) {
  .dna-match__trajectory { display: none; }
}

/* ── Footer ── */
.dna-match__footer {
  padding: 10px 20px 13px;
  border-top: 1px solid #ebebeb;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.62rem;
  color: #c0c0c0;
  line-height: 1.4;
}

/* ── Empty state ── */
.dna-match--empty {
  padding: 20px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: #aaa;
}

/* ── Responsive ── */
@media (max-width: 540px) {
  .dna-match__head,
  .dna-match__body,
  .dna-match__footer { padding-left: 14px; padding-right: 14px; }
  .dna-match__tabs { padding: 0 14px; overflow-x: auto; }
  .dna-match__tab { padding: 9px 10px 8px; font-size: 0.68rem; }
  .dna-match__hero-sim { font-size: 1.4rem; }
  .dna-match__comp-row { grid-template-columns: 1.4rem 1fr; }
  .dna-match__comp-sim { display: none; }
}

/* ── Comp Echo — reverse DNA Match, 538/Pudding light ── */
/* Tier-2 container, same treatment as `.dna-match` above and for the same
   reason: this module is `.dna-match`'s sibling (it ships from this file, via
   render_comp_echo) and carried a byte-identical fill+ribbon violation. Fixing
   one and not the other would leave the two halves of one idea visually
   disagreeing on the same page. --dna-accent survives on the inner rows. */
.comp-echo {
  margin: 1.25rem 0 1.75rem;
  background: var(--page, #ffffff);
  border: 1px solid var(--line, #e4e4e1);
  border-radius: 3px;
  padding: 16px 20px 18px;
  font-variant-numeric: tabular-nums;
}
.comp-echo__label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #aaa;
  margin: 0 0 3px;
}
.comp-echo__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(15px, 1.1vw + 8px, 18px);
  font-weight: 600;
  color: #222;
  margin: 0 0 12px;
}
.comp-echo__rows { display: grid; gap: 6px; }

/* Send-off sentence -- deterministic career closer for terminal-status players */
.player-send-off {
  margin: 0 0 1.25rem 0;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #222222;
  border-radius: 3px;
}
.player-send-off__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8b8b8b;
  margin: 0 0 8px 0;
}
.player-send-off__sentence {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(19px, 1.1vw + 13px, 24px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #222222;
  margin: 0;
}

/* Terminal tentpole hero -- item 18. This fragment is the page's one earned
   >=48px numeral moment (S9's display-numeral budget) -- it stays a bespoke,
   module-scoped size rather than joining the shared registry, because the
   whole point is that nothing else on the site looks like this. */
.tp-tentpole-hero {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: clamp(34px, 3vw + 20px, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink, #222222);
  margin: 2px 0 0 0;
}

.player-record-bar {
  margin: 0 0 1.25rem 0;
}
.player-record-bar__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8b8b8b;
  margin: 0 0 8px 0;
}
.beat-since-banner {
  display: none;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #008fd5;
  background: rgba(0, 143, 213, 0.08);
  border-radius: 3px;
  padding: 5px 10px;
  margin: 0 0 8px 0;
}
.beat-since-banner.visible { display: inline-block; }
.player-record-bar .beat-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* The banner now lives INSIDE .beat-timeline (storylines-since.js scopes its
   lookup to the timeline element -- a preceding sibling was never found, see
   the render_record_bar docstring). That makes it a flex item in the same
   wrapped row as the .beat cards; flex-basis:100% forces it onto its own
   line above them instead of squeezing in beside the first card. */
.player-record-bar .beat-timeline > .beat-since-banner {
  flex-basis: 100%;
}
/* Since-you-looked polish (Phase 3-4 item 19; pass 6 S2, scoping-memo lines
   231-234): "the since-you-looked banner stops being a separate banner --
   it is the Latest line's returning-visitor state. One component, two
   states, not three surfaces." The banner must stay a DOM child of
   .beat-timeline (storylines-since.js's bootThreadTimeline() scopes its
   querySelector('.beat-since-banner') to the timeline element it just
   found -- a sibling is invisible to that lookup; tests/test_record_bar.py
   TestMarkupShape pins the nesting) and the JS's own copy ("N new beats
   since you last looked") is shared with Storylines pages and stays
   untouched -- so the fix here is presentational only: on wide viewports
   the banner floats up to sit level with "The record" eyebrow instead of
   forcing its own full-width row above the beat cards, closing the gap
   between the shipped stacked-row layout and the spec's "one row, not
   three surfaces" intent. Below the site's standard 600px breakpoint it
   reverts to the original stacked block -- pass 6 S1's own mobile note
   ("record bar stays; total chrome above the tab bar must fit one 390px
   screen minus banner") assumes the banner still claims its own row on a
   phone-width screen, so the cutover is deliberate, not an oversight.

   Anchored to .beat-timeline, NOT .player-record-bar: the outer element's
   padding/border are declared a second time, in band context, by
   player_pages_tabbed/css.py's `.tp-idband > .player-record-bar` rule
   (13px/24px there, 11px/16px under its own 600px breakpoint) -- anchoring
   there would need those exact numbers duplicated and re-synced across two
   files every time either changes. .beat-timeline sits inside that padding
   already, so `right: 0` lines up with the real content-column edge (the
   same edge .tp-crown__inner / .tp-tabbar / .id-strip are byte-matched to)
   with no magic numbers, and `bottom: 100%` puts the banner directly above
   the beat cards -- which is exactly the eyebrow's row, since the eyebrow
   is the only other thing above the timeline. */
@media (min-width: 601px) {
  .player-record-bar .beat-timeline {
    position: relative;
  }
  .player-record-bar .beat-timeline > .beat-since-banner.visible {
    position: absolute;
    bottom: 100%;
    right: 0;
    flex-basis: auto;
    margin: 0 0 2px 0;
  }
}
.player-record-bar .beat {
  flex: 1 1 auto;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 8px 11px;
  font-family: 'Archivo', system-ui, sans-serif;
}
.player-record-bar .beat.is-new {
  border-color: #008fd5;
  background: rgba(0, 143, 213, 0.05);
}
.player-record-bar .beat__label {
  font-size: 12.5px;
  font-weight: 600;
  color: #222222;
  line-height: 1.3;
}
.player-record-bar .beat__meta {
  font-size: 10.5px;
  color: #8b8b8b;
  margin-top: 2px;
}

.fork-card { border: 1px solid rgba(34,34,34,0.14); border-radius: 2px; background: #ffffff; padding: 18px 20px; margin: 24px 0; }
.fork-card__title { font: 600 20px/1.2 'Fraunces', Georgia, serif; color: #222222; margin: 0 0 2px; }
.fork-card__kicker { font: 400 13px/1.4 'Archivo', system-ui, sans-serif; color: #6b6b6b; margin: 0 0 16px; }
.fork-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fork-card__side { min-width: 0; }
.fork-card__label { display: block; font: 700 11px/1 'Archivo', system-ui, sans-serif; letter-spacing: 0.08em; color: #6b6b6b; margin-bottom: 8px; }
.fork-card__claim, .fork-card__outcome { font: 400 15px/1.5 'Archivo', system-ui, sans-serif; color: #222222; margin: 0 0 10px; }
.fork-card__outcome { font-variant-numeric: tabular-nums; }
.fork-card__assertion { font: 400 13px/1.45 'Archivo', system-ui, sans-serif; color: #6b6b6b; margin: 0; font-variant-numeric: tabular-nums; }
.fork-card__verdict { display: inline-block; font: 700 12px/1 'Archivo', system-ui, sans-serif; padding: 5px 10px; border-radius: 2px; letter-spacing: 0.06em; }
.fork-card__verdict.hit { background: rgba(109,144,79,0.15); color: #6d904f; }
.fork-card__verdict.miss { background: rgba(252,79,48,0.15); color: #fc4f30; }
.fork-card__verdict.push { background: rgba(229,174,56,0.15); color: #e5ae38; }
.fork-card__verdict.pending { background: rgba(149,160,173,0.15); color: #6b6b6b; }
.fork-card__accent { height: 4px; border-radius: 0; margin: -18px -20px 16px; background: #008fd5; }
.fork-card__accent.hit { background: #6d904f; }
.fork-card__accent.miss { background: #fc4f30; }
.fork-card__accent.push { background: #e5ae38; }
.fork-card__accent.pending { background: #d5d5d5; }
@media (max-width: 640px) { .fork-card__grid { grid-template-columns: 1fr; gap: 16px; } }
/* Inline fork badge popover payload (item 17b) -- lives inside a
   .pc-pop__panel frame (popover.py), so no border/background of its own. */
.fork-badge-pop { margin: 0; }
.fork-badge-pop__outcome { margin: 0 0 8px; color: #222222; }
.ppt-svg{width:100%;height:100%;display:block}
.ppt-grid{stroke:rgba(0,0,0,.08);stroke-width:1}
.ppt-axis{font-family:"Archivo",system-ui,sans-serif;font-size:10px;fill:var(--ink-2,#5b5b5b)}
.ppt-line{fill:none;stroke:var(--ppt-color,#222);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ppt-dot{stroke:#fff;stroke-width:1.5;cursor:default}
.ppt-baseline{stroke:#8a8a84;stroke-width:1.25;stroke-dasharray:4 3}
.ppt-baseline-lab{font-family:"Archivo",system-ui,sans-serif;font-size:9.5px;font-weight:600;fill:#8a8a84}.chart-card { margin: 0 0 1.5rem; padding: 0; border: 0; }
.chart-card__head { margin-bottom: .6rem; }
.chart-card__eyebrow {
  margin: 0 0 .2rem; font-size: .68rem; letter-spacing: .14em;
  text-transform: none; font-weight: 700;
  color: var(--chart-card-eyebrow, var(--fg-muted, #7a7a7a));
}
.chart-card__headline {
  margin: 0; font-size: 1.18rem; line-height: 1.2; font-weight: 700;
  color: var(--chart-card-fg, var(--fg, #1a1a1a));
}
.chart-card__lede {
  margin: .25rem 0 0; font-size: .9rem; line-height: 1.45;
  color: var(--chart-card-muted, var(--fg-secondary, #555));
}
.chart-card__body {
  display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "ylabel plot" ".  xlabel";
  align-items: center; gap: .35rem .5rem;
}
.chart-card__plot { grid-area: plot; position: relative; min-width: 0; }
.chart-card__plot > svg { max-width: 100%; height: auto; display: block; }
.chart-card__overlay { position: absolute; inset: 0; pointer-events: none; }
.chart-card__overlay > svg { width: 100%; height: 100%; display: block; }
.chart-card__ylabel {
  grid-area: ylabel; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .68rem; letter-spacing: .1em; text-transform: none;
  color: var(--chart-card-muted, var(--fg-muted, #7a7a7a)); white-space: nowrap;
}
.chart-card__xlabel {
  grid-area: xlabel; text-align: center;
  font-size: .68rem; letter-spacing: .1em; text-transform: none;
  color: var(--chart-card-muted, var(--fg-muted, #7a7a7a));
}
.chart-card__source {
  margin-top: .5rem; font-size: .72rem; line-height: 1.4;
  color: var(--chart-card-muted, var(--fg-muted, #7a7a7a));
}
.chart-card__source-label {
  text-transform: none; letter-spacing: .1em; font-weight: 700;
  margin-right: .35rem;
}
@media (max-width: 360px) {
  .chart-card__body { grid-template-columns: 1fr; grid-template-areas: "plot" "xlabel"; }
  .chart-card__ylabel { display: none; }
}
/* In-chart annotation overlay — WS-08 (NYT-Upshot callout) */
.chart-ann__leader {
  stroke: var(--ann-accent, #c9a24a);
  stroke-width: 1;
  stroke-opacity: 0.7;
}
.chart-ann__dot {
  fill: var(--ann-accent, #c9a24a);
  stroke: #fff;
  stroke-width: 1.5;
}
.chart-ann__box {
  fill: rgba(20, 20, 24, 0.92);
  stroke: var(--ann-accent, #c9a24a);
  stroke-opacity: 0.45;
  stroke-width: 1;
}
.chart-ann__text {
  font-family: var(--font-serif, 'Fraunces', 'Source Serif Pro', Georgia, serif);
  font-size: 11px;
  fill: #e9e6dc;
}
.roster-nav{margin:0 0 16px;padding:10px 0;border-top:1px solid rgba(34,34,34,.1);
  border-bottom:1px solid rgba(34,34,34,.1)}
.roster-nav__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.roster-nav__link{display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;
  min-width:0;font-family:"Archivo",sans-serif}
.roster-nav__link--prev{flex-direction:row}
.roster-nav__link--next{flex-direction:row;text-align:right;justify-content:flex-end}
.roster-nav__arrow{color:#8a8a84;font-size:14px;flex-shrink:0}
.roster-nav__name{font-weight:700;font-size:13px;color:#222;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:140px}
.roster-nav__pos{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#8a8a84;flex-shrink:0}
.roster-nav__disabled{color:#c4c4c0;font-size:13px;flex:1;text-align:center}
.roster-nav__back{font-size:11px;font-weight:700;letter-spacing:.06em;color:#8a8a84;
  text-decoration:none;flex-shrink:0;text-align:center}
.roster-nav__back:hover{color:#222}
.roster-nav__comp{display:block;margin-top:8px;font-size:12px;color:#4a4a44;text-decoration:none}
.roster-nav__comp-label{font-weight:700;color:#8a8a84}
.roster-nav__comp:hover .roster-nav__comp-label{color:#4a4a44}
@media (max-width:480px){
  .roster-nav__pos{display:none}
  .roster-nav__name{max-width:90px}
}.dts-svg{width:100%;height:100%;display:block}
.dts-line-primary{stroke:var(--dts-primary,#e5ae38);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dts-line-secondary{stroke:var(--dts-secondary,#aaa);stroke-width:1.5;stroke-dasharray:4 3;stroke-linecap:round;stroke-linejoin:round}
.dts-dot-primary{fill:var(--dts-primary,#e5ae38)}
.dts-label{font-family:"Archivo",system-ui,sans-serif;font-size:9.5px;font-weight:500;fill:#999}.db-svg{width:100%;height:auto;display:block}
.db-conn{stroke:var(--rule,#d7d7d4);stroke-width:2}
.db-taper{fill:var(--rule,#d7d7d4)}
.db-tick{stroke:var(--rule,#d7d7d4);stroke-width:1;stroke-dasharray:2 2}
.db-band{stroke-dasharray:3 3;stroke-width:1}
.db-lab{font-family:"Archivo",system-ui,sans-serif;font-size:11.5px;font-weight:600}
.db-end{font-family:"Archivo",system-ui,sans-serif;font-size:10.5px;fill:var(--ink-3,#8b8b8b)}.dbs-stack{display:flex;flex-direction:column;gap:10px}
.dbs-legend{display:flex;gap:14px;font-family:"Archivo",system-ui,sans-serif;
  font-size:12px;font-weight:600;color:var(--ink-2,#5b5b5b);margin-bottom:2px}
.dbs-leg-item{display:inline-flex;align-items:center;gap:5px}
.dbs-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dbs-row{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:8px}
.dbs-label{font-family:"Archivo",system-ui,sans-serif;font-size:12.5px;
  font-weight:600;color:var(--ink,#222)}
.dbs-annotation{grid-column:2;font-family:"Archivo",system-ui,sans-serif;
  font-size:11px;color:var(--ink-3,#8b8b8b);margin-top:-4px}.bt-card{position:relative;padding:16px 18px 14px;background:#fff;border:1px solid #e4e4e1;border-radius:3px;overflow:hidden}
.bt-card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--bt-ribbon,#c9c9c6)}
.bt-eyebrow{margin:0 0 4px;font-size:.68rem;letter-spacing:.06em;font-weight:700;color:#7a7a7a;font-family:"Archivo",system-ui,sans-serif}
.bt-headline{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.18rem;line-height:1.25;color:#222;text-wrap:balance}
.bt-lede{margin:.3rem 0 0;font-size:.9rem;line-height:1.45;color:#555;font-family:"Archivo",system-ui,sans-serif}
.bt-body{margin-top:12px}
.bt-hero-numbers{display:flex;gap:32px;align-items:baseline;flex-wrap:wrap}
.bt-hero-num{display:flex;flex-direction:column;font-family:"Archivo",system-ui,sans-serif}
.bt-hero-figure{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums}
.bt-hero-ord{font-size:.95rem;font-weight:600;margin-left:1px}
.bt-hero-tag{margin-top:3px;font-size:.7rem;letter-spacing:.02em;color:#7a7a7a}
.bt-hero-chart{margin:10px 0 2px;max-width:380px}
.bt-secondary-heading{margin:14px 0 4px;font-size:.68rem;letter-spacing:.05em;text-transform:none;color:#8b8b8b;font-family:"Archivo",system-ui,sans-serif;font-weight:700}
.bt-secondary-row{margin:8px 0;max-width:280px;opacity:.72}
.bt-secondary-row--bare{max-width:340px;opacity:1}
.bt-secondary-row--emphasis{opacity:1}
.bt-quote{margin:12px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--bt-ribbon,#c9c9c6);font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:.92rem;line-height:1.4;color:#333}
.bt-quote p{margin:0}
.bt-quote cite{display:block;margin-top:4px;font-family:"Archivo",system-ui,sans-serif;font-style:normal;font-size:.75rem;color:#7a7a7a}
.bt-quote cite a{color:inherit}
@media (prefers-reduced-motion: no-preference){
  .bt-hero-chart svg{animation:bt-settle .35s ease-out both}
}
@keyframes bt-settle{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
/* Discourse Arcs — "What fans are saying" (Phase 6, doc-90 light) */
.da{margin:clamp(20px,3vw,30px) 0;}
.da-head{margin-bottom:14px;}
.da-title{font:600 1.15rem/1.25 'Fraunces',Georgia,serif;color:var(--ink,#222222);margin:0 0 4px;}
.da-honesty{font:400 .78rem/1.4 'Archivo',sans-serif;color:var(--ink-2,#5b5b5b);margin:0;}
.da-cards{display:flex;flex-direction:column;gap:12px;}
.da-card{background:var(--panel,#f0f0f0);border:1px solid var(--line,#e4e4e1);
  border-radius:3px;padding:14px 16px;border-left:2px solid var(--red,#fc4f30);
  scroll-margin-top:52px;}
.da-card.da-media{border-left-color:var(--ink-3,#8b8b8b);}
.da-card:focus-visible{outline:2px solid var(--ink,#222222);outline-offset:2px;}
.da-eyebrow{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.da-aspect{font:600 .68rem/1 'Archivo',sans-serif;letter-spacing:.04em;
  text-transform:capitalize;color:var(--ink-2,#5b5b5b);}
.da-prevalence{font:600 .72rem/1 'Archivo',sans-serif;color:var(--ink-2,#5b5b5b);
  border-left:1px solid var(--line,#e4e4e1);padding-left:8px;}
.da-headline{font:600 1.05rem/1.3 'Fraunces',Georgia,serif;color:var(--ink,#222222);
  margin:0 0 8px;text-wrap:balance;}
.da-receipt{margin:0 0 10px;padding-left:12px;border-left:2px solid var(--line,#e4e4e1);}
.da-receipt p{font:400 .92rem/1.5 'Archivo',sans-serif;color:var(--ink,#222222);margin:0;}
.da-provenance{font:400 .75rem/1.4 'Archivo',sans-serif;color:var(--ink-2,#5b5b5b);margin:0;}
.da-more{margin-top:10px;}
.da-more summary{font:600 .82rem/1 'Archivo',sans-serif;color:#1a5dad;cursor:pointer;
  list-style:none;padding:6px 0;}
.da-more summary::-webkit-details-marker{display:none;}
.da-more summary:focus-visible{outline:2px solid var(--ink,#222222);outline-offset:2px;}
.da-extra{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
@media(prefers-reduced-motion:reduce){.da-card{transition:none;}}

/* === Cohort Divergence Map (S3.1) === */

@layer components {
  .cohort-divergence {
    margin: var(--space-4, 1rem) 0 0 0;
    padding: var(--space-4, 1rem);
    border: 1px dashed var(--border, #d0d0d0);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--muted, #eee) 15%, var(--card));
  }
  .cohort-divergence > summary {
    cursor: pointer;
    font-size: var(--fs-meta, 0.78rem);
    letter-spacing: 0.06em;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .cohort-divergence[open] > summary {
    color: var(--foreground, #222);
  }
  .cohort-divergence__plot {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: var(--space-3, 0.75rem) auto;
    height: auto;
  }
  .cohort-divergence__axis-label {
    font-size: var(--fs-meta, 0.72rem);
    fill: var(--muted-foreground, #666);
    font-family: 'Inter', sans-serif;
  }
  .cohort-divergence__axis-line {
    stroke: var(--border, #d0d0d0);
    stroke-width: 1;
  }
  .cohort-divergence__dot {
    stroke-width: 1.5;
    stroke: var(--card, #fff);
  }
  .cohort-divergence__dot--fan      { fill: var(--confidence-high, #3fa35b); }
  .cohort-divergence__dot--rival    { fill: var(--confidence-low, #c43a3a); }
  .cohort-divergence__dot--national { fill: var(--belief-neutral, #888); }
  .cohort-divergence__dot--media    { fill: var(--accolade-gold-base, #d1a23a); }
  .cohort-divergence__dot-label {
    font-size: var(--fs-meta, 0.7rem);
    fill: var(--foreground, #222);
    font-weight: 600;
  }
  .cohort-divergence__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-meta, 0.72rem);
    color: var(--muted-foreground, #666);
    font-variant-numeric: tabular-nums;
  }
  .cohort-divergence__legend li {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .cohort-divergence__legend li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted-foreground, #666);
  }
  .cohort-divergence__legend li.fan::before       { background: var(--confidence-high, #3fa35b); }
  .cohort-divergence__legend li.rival::before     { background: var(--confidence-low, #c43a3a); }
  .cohort-divergence__legend li.national::before  { background: var(--belief-neutral, #888); }
  .cohort-divergence__legend li.media::before     { background: var(--accolade-gold-base, #d1a23a); }
  .cohort-divergence__awaiting {
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
    font-style: italic;
    margin: var(--space-2, 0.5rem) 0 0;
  }
}

/* === Signature Moment (S3.2) === */

@layer components {
  .signature-play {
    margin: var(--space-4, 1rem) 0 0 0;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: color-mix(in srgb, var(--muted, #eee) 18%, var(--card));
    border: 1px solid var(--border, #d0d0d0);
    border-left: 3px solid var(--percentile-100, #5985ff);
    border-radius: var(--radius-md, 12px);
    display: grid;
    gap: var(--space-1, 0.25rem);
  }
  .signature-play__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .signature-play__headline {
    margin: 0;
    font-size: var(--fs-h2, 1.1rem);
    line-height: 1.25;
    color: var(--card-foreground, var(--foreground, #222));
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .signature-play__sub {
    margin: 0;
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
  }
  .signature-play__gloss {
    margin: 0;
    font-size: var(--fs-body, 0.95rem);
    line-height: 1.4;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .signature-play--empty .signature-play__headline {
    font-weight: 500;
    font-style: italic;
    color: var(--muted-foreground, #666);
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
  }
}

/* === Scenario Explorer (S3.3) === */

@layer components {
  .scenario-explorer {
    margin: 0 0 var(--space-6, 1.5rem) 0;
    padding: var(--space-5, 1.25rem);
    background: var(--card, #fff);
    border: 1px solid var(--border, #d0d0d0);
    border-left: 3px solid var(--percentile-75, #8aa3ff);
    border-radius: var(--radius-lg, 16px);
    display: grid;
    gap: var(--space-3, 0.75rem);
  }
  .scenario-explorer__eyebrow {
    margin: 0;
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .scenario-explorer__title {
    margin: 0;
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
    font-size: var(--fs-h2, 1.15rem);
    color: var(--card-foreground, var(--foreground, #222));
  }
  .scenario-explorer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3, 0.75rem);
  }
  .scenario-explorer__slider {
    display: grid;
    gap: 4px;
  }
  .scenario-explorer__slider label {
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--muted-foreground, #666);
  }
  .scenario-explorer__slider input[type="range"] {
    width: 100%;
    accent-color: var(--percentile-100, #5985ff);
  }
  .scenario-explorer__slider-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .scenario-explorer__output {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3, 0.75rem);
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px dashed var(--border, #d0d0d0);
  }
  .scenario-explorer__metric {
    display: grid;
    gap: 2px;
  }
  .scenario-explorer__metric-label {
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--muted-foreground, #666);
  }
  .scenario-explorer__metric-value {
    font-size: var(--fs-h2, 1.2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--card-foreground, var(--foreground, #222));
  }
  .scenario-explorer__shift--pos { color: var(--confidence-high, #3fa35b); }
  .scenario-explorer__shift--neg { color: var(--confidence-low, #c43a3a); }
  .scenario-explorer--empty {
    color: var(--muted-foreground, #666);
    font-style: italic;
    font-size: var(--fs-body, 0.95rem);
  }
}

/* === Narrative Arc Board (S3.4) === */

.narrative-arc {
  margin: 1rem 0 1.5rem 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px);
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-left: 4px solid #222222;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.narrative-arc--empty {
  color: #8b8b8b;
  font-style: italic;
}
.narrative-arc__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8b8b8b;
  margin: 0 0 8px 0;
}
.narrative-arc__badge {
  font-weight: 600;
  color: #8b8b8b;
  font-style: normal;
}
.narrative-arc__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #222222;
  margin: 0 0 14px 0;
}
.narrative-arc__acts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .narrative-arc__acts { grid-template-columns: 1fr; gap: 10px; }
}
.narrative-arc__act {
  background: #ffffff;
  border: 1px solid #e4e4e1;
  border-radius: 3px;
  padding: 12px 14px;
}
.narrative-arc__act h3 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.80rem;
  font-weight: 700;
  color: #222222;
  margin: 0 0 4px 0;
}
.narrative-arc__meta {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #8b8b8b;
  margin: 0 0 8px 0;
}
.narrative-arc__inflection {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #222222;
  margin: 0 0 8px 0;
}
.narrative-arc__synthesis {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #5b5b5b;
  font-style: italic;
  margin: 0;
}

/* === Keyboard shortcuts + screenshot mode (S4.1 / S4.6) === */

@layer utilities {
  body[data-screenshot-mode="on"] .topbar,
  body[data-screenshot-mode="on"] .player-subnav,
  body[data-screenshot-mode="on"] .site-footer,
  body[data-screenshot-mode="on"] .phase-banner,
  body[data-screenshot-mode="on"] .hot-take__actions,
  body[data-screenshot-mode="on"] .scenario-explorer,
  body[data-screenshot-mode="on"] [data-what-changed],
  body[data-screenshot-mode="on"] [data-kb-toast] {
    display: none !important;
  }
  body[data-screenshot-mode="on"] {
    padding-top: 0 !important;
  }
  [data-kb-toast] {
    position: fixed;
    bottom: var(--space-4, 1rem);
    right: var(--space-4, 1rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: var(--popover, var(--card, #222));
    color: var(--popover-foreground, var(--foreground, #fff));
    border-radius: var(--radius-md, 12px);
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.04em;
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--motion-state, 180ms), transform var(--motion-state, 180ms);
  }
  [data-kb-toast][data-open="true"] {
    opacity: 1;
    transform: translateY(0);
  }
  .cfb-kb-help {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000 60%, transparent);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 1rem);
  }
  .cfb-kb-help[data-open="true"] { display: flex; }
  .cfb-kb-help__inner {
    width: min(560px, 100%);
    background: var(--popover, var(--card, #fff));
    color: var(--popover-foreground, var(--foreground, #222));
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-5, 1.25rem);
    box-shadow: var(--elevation-3, 0 16px 32px rgba(0,0,0,0.18));
    max-height: 85vh;
    overflow-y: auto;
  }
  .cfb-kb-help__inner header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2, 0.5rem);
    border-bottom: 1px solid var(--border, #d0d0d0);
    padding-bottom: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
  }
  .cfb-kb-help__inner h2 {
    margin: 0;
    font-family: var(--font-display, 'Inter Display', 'Inter', sans-serif);
    font-size: var(--fs-h2, 1.2rem);
  }
  .cfb-kb-help__close {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--muted-foreground, #666);
    font-size: 1.4rem;
    cursor: pointer;
  }
  .cfb-kb-help__close:hover,
  .cfb-kb-help__close:focus-visible { color: var(--foreground, #222); }
  .cfb-kb-help dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin: 0;
    font-size: var(--fs-body, 0.95rem);
  }
  .cfb-kb-help dt {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-weight: 700;
    padding: 2px var(--space-2, 0.5rem);
    background: color-mix(in srgb, var(--muted-foreground, #666) 15%, transparent);
    border-radius: var(--radius-sm, 8px);
    color: var(--foreground, #222);
    align-self: start;
  }
  .cfb-kb-help dd {
    margin: 0;
    color: var(--muted-foreground, #666);
  }
}

/* === Page-change log footer (S4.2) === */

@layer components {
  .change-log {
    margin: var(--space-6, 1.5rem) 0 var(--space-8, 2rem) 0;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: color-mix(in srgb, var(--muted, #eee) 25%, var(--card));
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-md, 12px);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: var(--fs-meta, 0.78rem);
    color: var(--muted-foreground, #666);
  }
  .change-log__eyebrow {
    margin: 0 0 var(--space-2, 0.5rem);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--fs-meta, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted-foreground, #666);
    font-weight: 600;
  }
  .change-log__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
  }
  .change-log__list li {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .change-log__ts {
    color: var(--accolade-gold-base, #d1a23a);
    margin-right: 0.75em;
  }
  .change-log__kind {
    color: var(--foreground, #222);
    font-weight: 600;
    margin-right: 0.5em;
  }
  .change-log--empty {
    font-style: italic;
    color: var(--muted-foreground, #666);
  }
}

/* === This-day chip (S4.3) === */

@layer components {
  .this-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: var(--space-1, 0.25rem) 0 0 0;
    padding: 2px var(--space-2, 0.5rem);
    background: color-mix(in srgb, var(--accolade-gold-base, #d1a23a) 10%, transparent);
    border: 1px solid var(--accolade-gold-base, #d1a23a);
    border-radius: 3px;
    font-size: var(--fs-meta, 0.78rem);
    color: var(--foreground, #222);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    max-width: 100%;
  }
  .this-day-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accolade-gold-base, #d1a23a);
    flex-shrink: 0;
  }
}

/* === Opponent-strength stripe (S4.4) === */

@layer utilities {
  .opp-stripe {
    position: relative;
  }
  .opp-stripe::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    background: var(--muted-foreground, #999);
  }
  .opp-stripe--top      ::after,
  .opp-stripe--top::after    { background: var(--confidence-high, #3fa35b); }
  .opp-stripe--p4       ::after,
  .opp-stripe--p4::after     { background: var(--accolade-gold-base, #d1a23a); }
  .opp-stripe--g5       ::after,
  .opp-stripe--g5::after     { background: var(--muted-foreground, #999); }
  .opp-stripe--fcs      ::after,
  .opp-stripe--fcs::after    { background: var(--confidence-low, #c43a3a); }
}

/* === Gilded Section (S4.5) === */

@layer utilities {
  .gilded {
    position: relative;
    isolation: isolate;
  }
  .gilded::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg,
      var(--accolade-gold-highlight, #f2c866) 0%,
      var(--accolade-gold-base, #d1a23a) 40%,
      var(--accolade-gold-highlight, #f2c866) 100%);
    border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
    z-index: 2;
  }
  .gilded-badge {
    position: absolute;
    top: var(--space-3, 0.75rem);
    right: var(--space-3, 0.75rem);
    font-size: calc(var(--fs-meta, 0.72rem) * 0.85);
    letter-spacing: 0.1em;
    text-transform: none;
    color: var(--accolade-gold-base, #d1a23a);
    font-weight: 700;
    pointer-events: none;
  }
}

/* === Right-click context menu (S4.12) === */

@layer components {
  .cfb-ctx-menu {
    position: fixed;
    z-index: 100;
    display: grid;
    gap: 0;
    min-width: 240px;
    background: var(--popover, var(--card, #fff));
    color: var(--popover-foreground, var(--foreground, #222));
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--elevation-3, 0 16px 32px rgba(0,0,0,0.18));
    padding: var(--space-1, 0.25rem);
    font-size: var(--fs-body, 0.95rem);
  }
  .cfb-ctx-menu button {
    text-align: left;
    border: none;
    background: transparent;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    color: inherit;
    font: inherit;
    min-height: 36px;
  }
  .cfb-ctx-menu button:hover,
  .cfb-ctx-menu button:focus-visible {
    background: color-mix(in srgb, var(--muted-foreground, #666) 12%, transparent);
  }
  [data-metric] {
    cursor: context-menu;
  }
}

/* === World-class rankings controls (tier toggles, quick filters, movement dashboard) === */

@layer components {
  /* Tier toggles ------------------------------------------------ */
  .rankings-tier-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 12px;
    justify-content: center;
  }
  .tier-toggle {
    padding: 8px 16px;
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: var(--radius-md, 10px);
    font-family: var(--font-display, "Inter Display", "Inter", sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground, #555);
    cursor: pointer;
    transition: all var(--motion-state, 180ms cubic-bezier(.2,.7,.25,1));
    text-transform: none;
    letter-spacing: 0.05em;
  }
  .tier-toggle:hover {
    background: var(--muted, #f5f5f7);
    border-color: var(--border-strong, rgba(0,0,0,0.2));
    color: var(--foreground, #111);
  }
  .tier-toggle--active {
    background: var(--primary, #3570b5);
    color: var(--primary-foreground, #fff);
    border-color: var(--primary, #3570b5);
  }

  /* Quick-filter chips ----------------------------------------- */
  .rankings-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 24px;
    padding: 12px 16px;
    background: var(--muted, #fafafa);
    border: 1px solid var(--border, rgba(0,0,0,0.06));
    border-radius: var(--radius-lg, 14px);
    justify-content: center;
  }
  .filter-chip {
    padding: 6px 12px;
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: var(--radius-md, 10px);
    font-family: var(--font-display, "Inter Display", "Inter", sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground, #555);
    cursor: pointer;
    transition: all var(--motion-state, 180ms cubic-bezier(.2,.7,.25,1));
    text-transform: none;
    letter-spacing: 0.05em;
  }
  .filter-chip:hover {
    background: var(--background, #fff);
    border-color: var(--primary, #3570b5);
    color: var(--foreground, #111);
  }
  .filter-chip--active {
    background: var(--primary, #3570b5);
    border-color: var(--primary, #3570b5);
    color: var(--primary-foreground, #fff);
  }

  /* Movement dashboard ----------------------------------------- */
  .movement-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0;
  }
  .movement-panel {
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: var(--radius-lg, 14px);
    padding: 16px;
  }
  .movement-panel__title {
    font-family: var(--font-display, "Inter Display", "Inter", sans-serif);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.1em;
    margin: 0 0 12px;
    color: var(--muted-foreground, #555);
  }
  .movement-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  }
  .movement-card:last-child { border-bottom: none; }
  .movement-card__rank {
    font-family: var(--font-display, "Inter Display", "Inter", sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--primary, #3570b5);
    min-width: 40px;
  }
  .movement-card__team {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .movement-card__team .team-link {
    font-weight: 600;
    color: var(--foreground, #111);
  }
  .movement-card__team .submetric {
    font-size: 11px;
    color: var(--muted-foreground, #777);
  }
  .movement-card__change {
    min-width: 60px;
    text-align: right;
  }

  /* Tiered row styling ----------------------------------------- */
  .rankings-row--elite {
    background: linear-gradient(90deg, rgba(53,112,181,0.10) 0%, transparent 30%);
    font-weight: 600;
  }
  .rankings-row--elite .rank-cell {
    font-size: 1.15em;
    color: var(--primary, #3570b5);
    font-weight: 700;
  }
  .rankings-row--power { background: transparent; }
  .rankings-row--all { opacity: 0.85; font-size: 0.95em; }

  /* Team cell: logo + name + conference (in-cell layout) ------- */
  .team-cell .team-link {
    vertical-align: middle;
  }
  .team-cell .submetric {
    display: block;
    font-size: 11px;
    color: var(--muted-foreground, #777);
    margin-top: 2px;
    margin-left: 32px;  /* align under team name, past logo */
  }
  .rankings__team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
  }
  @media (max-width: 640px) {
    .rankings__team-logo {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
    .team-cell .submetric {
      margin-left: 26px;
    }
  }

  .rank-sparkline {
    display: block;
    margin-top: 4px;
    opacity: 0.8;
  }
  .rank-change-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .rankings-tier-toggles { flex-wrap: wrap; }
  .tier-toggle {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    min-width: 100px;
  }
  .movement-dashboard { grid-template-columns: 1fr; }
  .rankings-quick-filters { gap: 4px; padding: 8px; }
  .filter-chip {
    font-size: 10px;
    padding: 4px 8px;
    flex: 1 1 calc(33% - 4px);
    text-align: center;
  }
  .rank-sparkline { width: 60px; height: 18px; }
}

/* === Design-system baseline (tabular nums + reduced motion) === */

/* === Design-system baseline (Top-5 #2 + #5 — 2026-05-18) ===
 *
 * Two locked rules from docs/design-system/00-tokens.md:
 *
 * 1. Tabular numerals on every stat-class element. The cardinal
 *    typography rule: data points must be tabular-nums so columns
 *    of numbers don't jitter as digits change width.
 *
 * 2. Reduced motion respect. Global collapse to instant-state for
 *    users who requested less motion (prefers-reduced-motion: reduce).
 */

/* Tabular numerals on data-point elements site-wide.
 * Extended 2026-05-21 to close the gaps identified by
 * docs/research/cfb-stats-audit-2026-05-21.md (P0): biotabs__panel-value
 * and the rank-delta family were rendering proportional figures. */
.metric-cell,
.metric-cell *,
.stat-card strong,
.stat-card .submetric,
.team-stat-tile strong,
.csp__stat-value,
.csp__pct-pill,
.signature-story__stat-value,
.heisman-row td.metric-cell,
td.metric-cell,
.rank-cell,
.player-stat-value,
.player-stat-context,
.percentile-pill,
.confidence-pill,
.sample-chip,
.biotabs__panel-value,
.rank-delta,
[data-tabular-nums="true"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Reduced motion: respect user opt-in */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Profile-archetype primitives (Session 5, 2026-05-22) === */

/* Profile primitives — shared with team_pages aesthetic */

.profile-identity-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 32px) clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  margin-bottom: clamp(16px, 2vw, 24px);
}
.profile-identity-strip__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--fg-muted, #8a90a1);
  margin: 0;
}
.profile-identity-strip__name {
  font-family: var(--font-display, "Inter Display", "Inter", system-ui, sans-serif);
  font-size: clamp(22px, 1.8vw + 14px, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg-primary, inherit);
}
.profile-identity-strip__meta {
  font-size: clamp(14px, 0.4vw + 12px, 16px);
  color: var(--fg-secondary, #c6cad6);
  margin: 0;
}
.profile-identity-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.profile-identity-strip__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-secondary, #c6cad6);
}

.profile-awaiting {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  margin: clamp(16px, 2vw, 24px) 0;
}
.profile-awaiting__title {
  font-family: var(--font-display, "Inter Display", "Inter", system-ui, sans-serif);
  font-size: clamp(16px, 0.6vw + 14px, 20px);
  margin: 0 0 8px;
  color: var(--fg-primary, inherit);
}
.profile-awaiting__body {
  font-size: clamp(14px, 0.4vw + 12px, 16px);
  line-height: 1.5;
  color: var(--fg-secondary, #c6cad6);
  margin: 0;
}
.profile-awaiting__cta {
  margin-left: 4px;
  color: var(--accent-primary, currentColor);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.profile-awaiting__cta:hover,
.profile-awaiting__cta:focus-visible {
  opacity: 0.85;
}

.profile-module-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin: clamp(16px, 2vw, 24px) 0;
}
.profile-module-grid--1col { grid-template-columns: 1fr; }
.profile-module-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-module-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .profile-module-grid--2col,
  .profile-module-grid--3col {
    grid-template-columns: 1fr;
  }
}

.profile-meta-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: clamp(12px, 1.6vw, 20px) clamp(12px, 2vw, 24px);
  margin: clamp(24px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  font-size: 13px;
  color: var(--fg-muted, #8a90a1);
}
.profile-meta-footer__link {
  font-weight: 600;
  color: var(--fg-secondary, #c6cad6);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.profile-meta-footer__link:hover,
.profile-meta-footer__link:focus-visible {
  border-bottom-color: currentColor;
}
.profile-meta-footer__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.05));
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Dashboard archetype mobile thumb-zone filter strip — Session 5.
 * Per docs/design-system/30-page-archetypes.md, Dashboard pages should
 * expose a bottom sticky filter shortcut on mobile. Hidden on desktop
 * because the existing inline filter UI is already in view at 768px+. */
.dashboard-mobile-filter-strip {
  display: none;
}
@media (max-width: 767px) {
  .dashboard-mobile-filter-strip {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 56px;
    background: var(--bg-overlay, rgba(11, 13, 18, 0.92));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  /* When the strip is rendered, push the bottom of <main> so its
   * contents don't sit underneath the fixed bar. */
  body:has(.dashboard-mobile-filter-strip) main {
    padding-bottom: 72px;
  }
}
.dashboard-mobile-filter-strip__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 64px;
  padding: 8px 16px;
  border-radius: 3px;
  background: var(--bg-card, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.10));
  color: var(--fg-primary, inherit);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.dashboard-mobile-filter-strip__chip:hover,
.dashboard-mobile-filter-strip__chip:focus-visible {
  background: var(--bg-card-raised, rgba(255, 255, 255, 0.10));
  border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
}
.dashboard-mobile-filter-strip__summary {
  margin-left: auto;
  font-size: 12px;
  color: var(--fg-secondary, #c6cad6);
  font-variant-numeric: tabular-nums;
}

/* === Database + Article archetype primitives (Session 6, 2026-05-22) === */

/* Database archetype primitives */

.database-archetype__filter-strip {
  position: sticky;
  top: 64px;
  z-index: 5;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border-bottom: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  padding: clamp(8px, 1vw, 12px) clamp(16px, 3vw, 40px);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.database-archetype__filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.database-archetype__filter-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 3px;
  background: var(--bg-card-raised, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  color: var(--fg-secondary, #c6cad6);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.database-archetype__filter-link:hover,
.database-archetype__filter-link:focus-visible {
  border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
  color: var(--fg-primary, inherit);
}
.database-archetype__filter-state {
  font-size: 10px;
  color: var(--fg-muted, #8a90a1);
  letter-spacing: 0.06em;
  text-transform: none;
}
.database-archetype__table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  font-variant-numeric: tabular-nums;
}
.database-archetype__meta-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(16px, 3vw, 40px);
  margin-top: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  font-size: 12px;
  color: var(--fg-secondary, #c6cad6);
}
.database-archetype__meta-link {
  font-weight: 700;
  color: var(--accent-primary, #c9a24a);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}
.database-archetype__meta-link:hover { text-decoration: underline; }
.database-archetype__meta-pill {
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--bg-card-raised, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  font-size: 11px;
  letter-spacing: 0.04em;
}
.database-archetype__empty {
  padding: clamp(20px, 3vw, 40px);
  border: 1px dashed var(--stroke-default, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  background: var(--bg-card, rgba(255, 255, 255, 0.02));
  text-align: center;
  margin: clamp(20px, 3vw, 40px) 0;
}
.database-archetype__empty-headline {
  font-family: var(--font-display, "Inter Display", "Inter", system-ui, sans-serif);
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--fg-primary, inherit);
}
.database-archetype__empty-body {
  font-size: 14px;
  color: var(--fg-secondary, #c6cad6);
  margin: 0;
}
.database-archetype__empty-cta {
  font-weight: 700;
  color: var(--accent-primary, #c9a24a);
  margin-left: 4px;
  text-decoration: none;
}
.database-archetype__empty-cta:hover { text-decoration: underline; }

/* Article archetype primitives */

.article-archetype__chrome {
  padding: clamp(16px, 2.4vw, 32px) clamp(16px, 3vw, 40px) clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  margin-bottom: clamp(20px, 3vw, 40px);
}
.article-archetype__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: none;
  color: var(--fg-muted, #8a90a1);
  margin: 0 0 12px;
}
.article-archetype__kind-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: none;
  background: var(--fg-primary, #222222);
  color: var(--bg-primary, #ffffff);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.article-archetype__headline {
  font-family: var(--font-display-serif, "Source Serif Pro", Georgia, serif);
  font-size: clamp(28px, 2.8vw + 16px, 56px);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 16px;
}
.article-archetype__dek {
  font-family: var(--font-display-serif, "Source Serif Pro", Georgia, serif);
  font-size: clamp(16px, 0.6vw + 14px, 22px);
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 24px;
  color: var(--fg-secondary, #c6cad6);
}
.article-archetype__byline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--fg-secondary, #c6cad6);
}
.article-archetype__byline-edition {
  margin-left: auto;
  color: var(--fg-muted, #8a90a1);
}
.article-archetype__aside-callout {
  border-left: 4px solid var(--accent-primary, #c9a24a);
  padding: 16px 24px;
  margin: clamp(24px, 4vw, 48px) 0;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border-radius: 0 12px 12px 0;
}
.article-archetype__aside-quote {
  font-family: var(--font-display-serif, "Source Serif Pro", Georgia, serif);
  font-style: italic;
  font-size: clamp(18px, 0.6vw + 14px, 22px);
  line-height: 1.5;
  margin: 0;
}
.article-archetype__aside-attribution {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--fg-muted, #8a90a1);
}
.article-archetype__continue-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
}
@media (max-width: 600px) {
  .article-archetype__continue-row { grid-template-columns: 1fr; }
}
.article-archetype__nav-link {
  display: block;
  padding: 16px;
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.article-archetype__nav-link:hover,
.article-archetype__nav-link:focus-visible {
  border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
}
.article-archetype__nav-link--next { text-align: right; }
.article-archetype__nav-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: none;
  color: var(--fg-muted, #8a90a1);
  margin-bottom: 4px;
}
.article-archetype__nav-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary, inherit);
}
.article-archetype__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  font-size: 12px;
}
.article-archetype__footer-methodology,
.article-archetype__footer-share {
  font-weight: 700;
  color: var(--accent-primary, #c9a24a);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}
.article-archetype__footer-methodology:hover,
.article-archetype__footer-share:hover { text-decoration: underline; }

/* === Profile identity-strip v2 — Phase 3 richer primitive (Session 6) === */

/* Profile-archetype identity-strip v2 — the richer variant with
 * team mark + stat tiles + action buttons + accent rail. Unblocks
 * the Phase 3 migration of program / unprofiled-team / player pages
 * away from their bespoke .premium-team-hero blocks.
 *
 * Custom properties:
 *   --profile-v2-accent       team accent color (default: global gold)
 *   --profile-v2-accent-soft  10%-alpha tint for stat-tile backgrounds
 */

.profile-identity-v2 {
  /* Sprint B 2026-05-22: read --team-accent / --team-accent-soft from the
   * enclosing .team-shell wrapper (set by reporting.py _team_theme()
   * inline style per program/player/team). Falls back to --accent-primary
   * if a non-team-shell ancestor sets it, then to default gold. This lets
   * Notre Dame's identity strip use ND navy/gold instead of every team
   * sharing the same generic gold accent. */
  --profile-v2-accent: var(--team-accent, var(--accent-primary, #c9a24a));
  --profile-v2-accent-2: var(--team-accent-soft, #c9a24a);
  --profile-v2-accent-soft: color-mix(in oklab, var(--profile-v2-accent) 8%, transparent);
  position: relative;
  padding: clamp(20px, 2.8vw, 40px) clamp(20px, 3.4vw, 48px);
  border-left: 6px solid var(--profile-v2-accent);
  border-bottom: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(
      135deg,
      color-mix(in oklab, var(--profile-v2-accent) 6%, transparent) 0%,
      color-mix(in oklab, var(--profile-v2-accent-2) 4%, transparent) 60%,
      transparent 100%
    );
  margin-bottom: clamp(20px, 3vw, 32px);
}
.profile-identity-v2__header {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.5vw, 20px);
  margin-bottom: clamp(12px, 1.5vw, 20px);
}
.profile-identity-v2__team-mark {
  /* Sprint B 2026-05-22: was 56px subtle box; promoted to 72px filled
   * accent tile so the abbreviation reads as a real wordmark, not a
   * tiny pill next to the page title. */
  flex: 0 0 auto;
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  border-radius: 12px;
  background: var(--profile-v2-accent);
  border: 1px solid var(--profile-v2-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: clamp(26px, 2.4vw + 10px, 36px);
  letter-spacing: 0.02em;
  color: #ffffff;
  overflow: hidden;
}
.profile-identity-v2__team-mark svg,
.profile-identity-v2__team-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile-identity-v2__wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.profile-identity-v2__eyebrow {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--fg-muted, #8a90a1);
  margin: 0;
}
.profile-identity-v2__name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(32px, 3vw + 16px, 56px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: none;
  margin: 0;
  color: var(--fg-primary, inherit);
}
.profile-identity-v2__sub-meta {
  font-size: clamp(13px, 0.3vw + 12px, 15px);
  color: var(--fg-secondary, #c6cad6);
  margin: 0;
}

/* Stat tile grid */
.profile-identity-v2__stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: clamp(12px, 1.5vw, 20px);
}
.profile-identity-v2__stat-tile {
  padding: 10px 12px;
  background: var(--profile-v2-accent-soft);
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.profile-identity-v2__stat-tile-label {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--fg-muted, #8a90a1);
}
.profile-identity-v2__stat-tile-value {
  font-family: var(--font-numeral, 'Archivo', system-ui, sans-serif);
  font-size: clamp(26px, 2.5vw + 12px, 36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fg-primary, inherit);
}
.profile-identity-v2__stat-tile-sub {
  font-size: 11px;
  color: var(--fg-secondary, #c6cad6);
}

/* Action row */
.profile-identity-v2__action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(8px, 1vw, 12px);
}
.profile-identity-v2__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.profile-identity-v2__action--primary {
  background: var(--profile-v2-accent);
  color: var(--bg-primary, #1a1a1a);
}
.profile-identity-v2__action--primary:hover {
  opacity: 0.92;
}
.profile-identity-v2__action--secondary {
  background: transparent;
  color: var(--fg-primary, inherit);
  border-color: var(--profile-v2-accent);
}
.profile-identity-v2__action--secondary:hover {
  background: var(--profile-v2-accent-soft);
}

/* Chip row (same look as v1 chips, kept for visual continuity) */
.profile-identity-v2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-identity-v2__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--stroke-default, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-secondary, #c6cad6);
}

/* Mobile: stack team-mark above wordmark, condense tile grid */
@media (max-width: 640px) {
  .profile-identity-v2__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-identity-v2__team-mark {
    width: 48px;
    height: 48px;
  }
  .profile-identity-v2__name {
    font-size: clamp(22px, 5vw, 30px);
  }
}

/* === QB Fingerprint hero — Sprint A (2026-05-22) === */

/* QB Fingerprint hero — Sprint A
 * PLAYER_PAGE_WORLD_CLASS_BRIEF.md §4.1
 *
 * Custom properties consumed (set by enclosing .team-shell):
 *   --team-accent       primary brand color
 *   --team-accent-soft  secondary brand color
 *
 * Layout:
 *   Desktop  ≥860px: 3-column grid [identity | fingerprint | accolades]
 *   Tablet   <860px: stacked. Fingerprint cells become snap-scroll row.
 *   Mobile   <540px: snap-scroll cells single-line, accolade chips inline.
 *
 * Every number is tabular-nums + Archivo (800) at hero scale.
 */

.qb-fingerprint {
  --qb-accent:        var(--team-accent, #c9a24a);
  --qb-accent-soft:   var(--team-accent-soft, #c9a24a);
  --qb-bg-card:       #f0f0f0;
  --qb-stroke:        #e4e4e1;
  --qb-fg-primary:    var(--fg-primary, #1a1a1a);
  --qb-fg-secondary:  var(--fg-secondary, #4a4a4a);
  --qb-fg-muted:      var(--fg-muted, #6f6f6f);

  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr minmax(180px, 260px);
  gap: clamp(20px, 2.4vw, 32px);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 36px);
  border-left: 6px solid var(--qb-accent);
  border-bottom: 1px solid var(--qb-stroke);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklab, var(--qb-accent) 7%, transparent) 0%,
      color-mix(in oklab, var(--qb-accent-soft) 5%, transparent) 55%,
      transparent 100%
    );
  margin-bottom: clamp(20px, 3vw, 32px);
  overflow: hidden;
}

@media (max-width: 860px) {
  .qb-fingerprint { grid-template-columns: 1fr; }
}

/* === Left column: identity === */

.qb-fingerprint__identity {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  min-width: 0;
}

.qb-fingerprint__team-mark {
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  border-radius: 12px;
  background: var(--qb-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(26px, 2.4vw + 10px, 36px);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  overflow: hidden;
}
.qb-fingerprint__team-mark img,
.qb-fingerprint__team-mark svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qb-fingerprint__photo {
  position: relative;
  width: clamp(72px, 7vw, 104px);
  height: clamp(72px, 7vw, 104px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--qb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}
.qb-fingerprint__monogram {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.qb-fingerprint__monogram--jersey {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.qb-fingerprint__eyebrow {
  font-family: var(--font-body, 'Archivo', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--qb-fg-muted);
  margin: 0;
}

.qb-fingerprint__name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(36px, 3.6vw + 14px, 64px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--qb-fg-primary);
  margin: 0;
}

.qb-fingerprint__sub-meta {
  font-family: var(--font-body, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  color: var(--qb-fg-secondary);
  margin: 0;
}

.qb-fingerprint__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qb-fingerprint__fact {
  font-family: var(--font-body, 'Archivo', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--qb-fg-secondary);
  padding: 4px 10px;
  background: var(--qb-bg-card);
  border: 1px solid var(--qb-stroke);
  border-radius: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* === Middle column: 5 vibe cells === */

.qb-fingerprint__cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  min-width: 0;
}

@media (max-width: 1180px) {
  .qb-fingerprint__cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .qb-fingerprint__cells {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin: 0 calc(-1 * clamp(20px, 2.6vw, 36px));
    padding: 0 clamp(20px, 2.6vw, 36px);
    scrollbar-width: none;
  }
  .qb-fingerprint__cells::-webkit-scrollbar { display: none; }
  .qb-fingerprint__cell {
    flex: 0 0 70%;
    min-width: 220px;
    scroll-snap-align: start;
  }
}

.qb-fingerprint__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(10px, 1vw, 14px) clamp(10px, 1vw, 14px);
  background: var(--qb-bg-card);
  border: 1px solid var(--qb-stroke);
  border-radius: 10px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.qb-fingerprint__cell-eyebrow {
  font-family: var(--font-body, 'Archivo', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--qb-fg-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qb-fingerprint__cell-value {
  font-family: var(--font-numeral, 'Archivo', system-ui, sans-serif);
  font-size: clamp(30px, 2.6vw + 14px, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--qb-fg-primary);
  margin: 0;
}

.qb-fingerprint__cell-narrative {
  font-family: var(--font-body, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.35;
  color: var(--qb-fg-secondary);
  margin: 0;
}

.qb-fingerprint__spark {
  display: block;
  width: 100%;
  height: 20px;
  color: var(--qb-accent);
  margin: 4px 0 2px;
}

.qb-fingerprint__cell-value--awaiting {
  color: var(--qb-fg-muted);
  font-size: clamp(20px, 1.6vw + 10px, 28px);
  letter-spacing: 0.04em;
}
.qb-fingerprint__cell-value--gap-pos { color: #3ea073; }
.qb-fingerprint__cell-value--gap-neg { color: #c04a4a; }
.qb-fingerprint__cell-value--gap-zero { color: var(--qb-fg-secondary); }

/* === Right column: accolade ribbon === */

.qb-fingerprint__accolades {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.qb-fingerprint__accolade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: baseline;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--qb-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--qb-accent) 30%, transparent);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.qb-fingerprint__accolade-eyebrow {
  grid-column: 1 / -1;
  font-family: var(--font-body, 'Archivo', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--qb-fg-muted);
  margin: 0;
}
.qb-fingerprint__accolade-label {
  font-family: var(--font-serif, 'Fraunces', Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--qb-fg-primary);
  margin: 0;
  line-height: 1.2;
}
.qb-fingerprint__accolade-value {
  font-family: var(--font-numeral, 'Archivo', system-ui, sans-serif);
  font-size: 22px;
  color: var(--qb-accent);
  line-height: 1;
  letter-spacing: 0.01em;
}

@media (max-width: 860px) {
  .qb-fingerprint__accolades {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Override desktop's 2-column grid layout — at ~33% width the label
   * column collides with the value column, causing the overlap users
   * saw on Mendoza's page (Heisman over 14.3%, Consensus over
   * All-American). Mobile uses a vertical stack: eyebrow → label →
   * value. */
  .qb-fingerprint__accolade {
    flex: 1 1 calc(33% - 6px);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }
  .qb-fingerprint__accolade-eyebrow { grid-column: auto; }
  .qb-fingerprint__accolade-label { font-size: 13px; line-height: 1.25; }
  .qb-fingerprint__accolade-value { font-size: 18px; line-height: 1.1; }
}

/* === Selector Grid — Sprint C (2026-05-22) === */

/* Selector Grid — Sprint C (PLAYER_PAGE_WORLD_CLASS_BRIEF §7.5)
 *
 * 11-pill grid. Each pill = one All-America selector. Pill state:
 *   1st team → gold (--selector-gold)
 *   2nd team → silver
 *   HM       → bronze
 *   empty    → grey-on-grey
 *
 * Pills use display font for the selector short label so the grid
 * reads as a single block of branding rather than a list of strings.
 */

.selector-grid {
  --selector-gold:    #c9a24a;
  --selector-silver:  #c5c8d0;
  --selector-bronze:  #b56a3c;
  --selector-empty-fg:rgba(255, 255, 255, 0.35);
  --selector-empty-bg:rgba(255, 255, 255, 0.04);
  --selector-stroke:  rgba(255, 255, 255, 0.10);

  display: grid;
  gap: 10px;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2.2vw, 28px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--selector-stroke);
  border-radius: 12px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.selector-grid__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 4px;
}
.selector-grid__title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(22px, 1.6vw + 12px, 30px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg-primary, #1a1a1a);
  margin: 0;
}
.selector-grid__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--fg-muted, #8a90a1);
  margin: 0;
}
.selector-grid__summary {
  font-family: var(--font-serif, 'Fraunces', Georgia, serif);
  font-size: 14px;
  color: var(--fg-secondary, #4a4a4a);
  margin: 0;
}

.selector-grid__pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 8px;
}

@media (max-width: 720px) {
  .selector-grid__pills {
    grid-template-columns: repeat(3, 1fr);
  }
}

.selector-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 6px;
  background: var(--selector-empty-bg);
  border: 1px solid var(--selector-stroke);
  border-radius: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-height: 64px;
}
.selector-pill__short {
  font-family: var(--font-numeral, 'Archivo', system-ui, sans-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--selector-empty-fg);
}
.selector-pill__state {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--selector-empty-fg);
}
.selector-pill__ncaa-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-muted, #8a90a1);
  opacity: 0.35;
}
.selector-pill[data-rank="1"] {
  background: color-mix(in oklab, var(--selector-gold) 18%, transparent);
  border-color: var(--selector-gold);
}
.selector-pill[data-rank="1"] .selector-pill__short,
.selector-pill[data-rank="1"] .selector-pill__state {
  color: var(--selector-gold);
}
.selector-pill[data-rank="2"] {
  background: color-mix(in oklab, var(--selector-silver) 14%, transparent);
  border-color: var(--selector-silver);
}
.selector-pill[data-rank="2"] .selector-pill__short,
.selector-pill[data-rank="2"] .selector-pill__state {
  color: var(--selector-silver);
}
.selector-pill[data-rank="HM"] {
  background: color-mix(in oklab, var(--selector-bronze) 14%, transparent);
  border-color: var(--selector-bronze);
}
.selector-pill[data-rank="HM"] .selector-pill__short,
.selector-pill[data-rank="HM"] .selector-pill__state {
  color: var(--selector-bronze);
}

.selector-grid__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--fg-muted, #8a90a1);
}
.selector-grid__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.selector-grid__legend-dot--gold   { background: var(--selector-gold); }
.selector-grid__legend-dot--silver { background: var(--selector-silver); }
.selector-grid__legend-dot--bronze { background: var(--selector-bronze); }
.selector-grid__legend-dot--ncaa   { background: var(--fg-muted, #8a90a1); }

/* === Player Savant Card — Sprint C (2026-05-22) === */

/* Player Savant Card — Sprint C (PLAYER_PAGE_WORLD_CLASS_BRIEF §4.5)
 *
 * Visual gradient bars in red→grey→blue OKLCH per brief §3 #1.
 * Each bar = one metric. Bar fill % = percentile placement; bar color
 * = pct-low / pct-mid / pct-high tokens; pin marker = exact value.
 *
 * Reads --team-accent from enclosing .team-shell for the cohort
 * toggle button.
 */

.player-savant {
  --psv-track:    rgba(255, 255, 255, 0.06);
  --psv-stroke:   rgba(255, 255, 255, 0.10);
  --psv-bar-low:  var(--pct-low,  #c04a4a);
  --psv-bar-mid:  var(--pct-mid,  #888780);
  --psv-bar-high: var(--pct-high, #3570b5);
  --psv-text:     var(--fg-primary, #1a1a1a);
  --psv-meta:     var(--fg-muted,   #6f6f6f);

  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--psv-stroke);
  border-radius: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
  font-variant-numeric: tabular-nums;
}

.player-savant__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.player-savant__eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--psv-meta);
  margin: 0;
}
.player-savant__title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(24px, 2vw + 10px, 32px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--psv-text);
  margin: 0;
}
.player-savant__narrative {
  font-family: var(--font-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(14px, 0.3vw + 13px, 16px);
  line-height: 1.5;
  color: var(--fg-secondary, var(--psv-text));
  margin: 0;
  max-width: 70ch;
}

/* === Cohort toggle pills === */
.player-savant__cohort {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--psv-stroke);
  border-radius: 8px;
  align-self: start;
}
.player-savant__cohort-pill {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--psv-meta);
  cursor: default;
  border-radius: 6px;
  min-height: 30px;
}
.player-savant__cohort-pill[data-active="true"] {
  background: var(--team-accent, var(--psv-bar-high));
  color: #ffffff;
}

/* === Bars === */

.player-savant__bars {
  display: grid;
  gap: 10px;
}

.player-savant__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 56px minmax(0, 2fr) 64px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--psv-stroke);
}
.player-savant__row:first-child { border-top: none; }

.player-savant__metric {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--psv-text);
}

.player-savant__value {
  font-family: var(--font-numeral, 'Archivo', system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  color: var(--psv-text);
  line-height: 1;
}

.player-savant__bar {
  position: relative;
  height: 14px;
  background: var(--psv-track);
  border-radius: 8px;
  overflow: hidden;
}
.player-savant__bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--psv-bar-low) 0%,
    var(--psv-bar-mid) 50%,
    var(--psv-bar-high) 100%
  );
  clip-path: inset(0 calc(100% - var(--pct, 50%)) 0 0 round 8px);
}
.player-savant__bar--inverted .player-savant__bar-fill {
  background: linear-gradient(
    90deg,
    var(--psv-bar-high) 0%,
    var(--psv-bar-mid) 50%,
    var(--psv-bar-low) 100%
  );
}
.player-savant__bar-pin {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--pct, 50%);
  width: 3px;
  background: var(--psv-text);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.player-savant__pct {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--psv-meta);
  text-align: right;
  white-space: nowrap;
}
.player-savant__pct[data-band="high"]  { color: var(--psv-bar-high); }
.player-savant__pct[data-band="mid"]   { color: var(--psv-bar-mid); }
.player-savant__pct[data-band="low"]   { color: var(--psv-bar-low); }

.player-savant__row--awaiting .player-savant__metric { color: var(--psv-meta); }
.player-savant__row--awaiting .player-savant__value,
.player-savant__row--awaiting .player-savant__bar-fill,
.player-savant__row--awaiting .player-savant__bar-pin {
  opacity: 0.45;
}
.player-savant__row--awaiting .player-savant__pct {
  font-style: italic;
}

@media (max-width: 600px) {
  .player-savant__row {
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-areas:
      "metric value"
      "bar    bar"
      "pct    pct";
    gap: 4px 8px;
  }
  .player-savant__metric { grid-area: metric; }
  .player-savant__value  { grid-area: value; }
  .player-savant__bar    { grid-area: bar; margin: 6px 0 0; }
  .player-savant__pct    { grid-area: pct; text-align: left; }
}

/* === World-class team-page pointer — Sprint F lite (2026-05-22) === */

/* World-Class Team Page pointer banner — /programs/ archive pages.
   Rewritten 2026-07-29 (site UX audit 2E) to doc-90 tokens: this page
   never wraps content in .cfb-rkx, so the old var(--accent-primary, #c9a24a)
   etc. never resolved to anything — every rule silently ran on its own
   fallback value (retired Inter font, 12px/8px radius, off-palette amber).
   Uses literal doc-90 hex values rather than custom properties for the
   same reason 404.html does: this page's own token scope can't be
   trusted, so don't depend on it. */
.world-class-pointer {
  margin: 0 0 clamp(20px, 3vw, 32px);
  padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 28px);
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #e5ae38;
  border-radius: 3px;
}
.world-class-pointer__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 880px;
}
.world-class-pointer__eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #666666;
}
.world-class-pointer__body {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(15px, 0.4vw + 13px, 17px);
  line-height: 1.5;
  color: #222222;
  margin: 0;
}
.world-class-pointer__cta {
  display: inline-flex;
  align-self: start;
  align-items: center;
  margin-top: 4px;
  padding: 10px 18px;
  background: #008fd5;
  color: #ffffff;
  text-decoration: none;
  border-radius: 3px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 44px;
  transition: filter 120ms ease;
}
.world-class-pointer__cta:hover,
.world-class-pointer__cta:focus-visible {
  filter: brightness(1.1);
}

/* === Touch-target a11y (WCAG 2.5.5 Level AAA, Session 6) === */

/* WCAG 2.5.5 (Level AAA) — interactive targets ≥44x44 CSS pixels.
 * The browser-MCP validation pass in session 6 caught 100% of
 * interactive elements rendering below 44px on every sampled page.
 * Fix: explicit min-height on standalone targets (top nav, action
 * buttons, methodology-footer links, theme toggle, cmdk trigger).
 * Inline text links inside body prose are intentionally exempt
 * per the 2.5.5 spec — wrapping every link in 44px-tall padding
 * would shred paragraph rhythm.
 */
.nav-link,
.nav-action,
.nav-toggle,
.cmdk-trigger,
.theme-toggle,
.profile-meta-footer__link,
.methodology-footer__link,
.database-archetype__meta-link,
.article-archetype__footer-methodology,
.article-archetype__footer-share,
.dashboard-mobile-filter-strip__chip,
.database-archetype__filter-link,
.savant-card__chip,
.button-primary,
.button-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Mobile-collapsed nav items still need the 44px floor when stacked. */
@media (max-width: 900px) {
  .nav-link,
  .nav-action,
  .nav-toggle {
    min-height: 44px;
  }
}

/* === Global footer column heading (Session 6 H4→H3 fix) === */

/* Global footer column heading — gold uppercase chrome treatment.
 * Session 6 fix: nav.render_global_footer uses
 * <h3 class="footer-col__heading">, but the original styling rule only
 * lived inline on the homepage. As a result, every other surface that
 * shipped the global footer (edition articles, team pages, etc.) got
 * default H3 styling instead of the intended chrome. Adding the rule
 * to the global stylesheet so it applies site-wide.
 */
.footer-col h4,
.footer-col h3,
.footer-col .footer-col__heading {
  font-family: var(--sans, "Archivo", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-3, #888);
  margin: 0 0 16px;
}