/* Replay Room visual system for the seven public navigation destinations.
 * Loaded last by apply_site_shell.py; legacy page layouts and behavior remain intact. */
body.pp-site-system.pp-nav-page {
  color-scheme: dark;
  --pp-nav-night: #031a2c;
  --pp-nav-studio: #06243a;
  --pp-nav-cream: #f7f1e7;
  --pp-nav-muted: #b8d3df;
  --pp-nav-orange: #ff5b23;
  --pp-nav-blue: #54c8ff;
  --pp-nav-line: rgba(84, 200, 255, 0.35);
  --pp-paper: #031a2c;
  --pp-paper-light: #06243a;
  --pp-ink: #f7f1e7;
  --pp-ink-2: #021522;
  --pp-text: #f7f1e7;
  --pp-sub: #b8d3df;
  --pp-muted: #b8d3df;
  --pp-line: rgba(84, 200, 255, 0.35);
  --pp-orange: #ff5b23;
  --pp-orange-dark: #ff5b23;
  --pp-orange-wash: rgba(255, 91, 35, 0.14);
  --pp-lime: #54c8ff;
  --bg: #031a2c;
  --page: #031a2c;
  --app: #031a2c;
  --surface: #06243a;
  --surface-1: #06243a;
  --surface-2: #021522;
  --surface-3: #0b3552;
  --card: #06243a;
  --panel: rgba(2, 21, 34, 0.8);
  --panel-2: #06243a;
  --border: rgba(84, 200, 255, 0.35);
  --line: rgba(84, 200, 255, 0.35);
  --line-strong: rgba(84, 200, 255, 0.72);
  --text: #f7f1e7;
  --text-1: #f7f1e7;
  --text-2: #b8d3df;
  --text-3: #b8d3df;
  --text-primary: #f7f1e7;
  --text-secondary: #b8d3df;
  --text-tertiary: #b8d3df;
  --muted: #b8d3df;
  --faint: #9bddff;
  --brand: #ff5b23;
  --brand-2: #54c8ff;
  --accent: #ff5b23;
  --blue: #54c8ff;
  --green: #6ee7b7;
  --success: #6ee7b7;
  --loss: #fb7185;
  --danger: #fb7185;
  --red: #fb7185;
  --display: var(--pp-display);
  --body: var(--pp-body);
  --mono: var(--pp-mono);
  --tool-bg: #031a2c;
  --tool-panel: #06243a;
  --tool-panel-2: #021522;
  --tool-line: rgba(84, 200, 255, 0.35);
  --tool-orange: #ff5b23;
  --tool-green: #54c8ff;
}

body.pp-site-system.pp-nav-page,
body.pp-site-system.pp-nav-page .shell,
body.pp-site-system.pp-nav-page .results-shell,
body.pp-site-system.pp-nav-page .method-shell,
body.pp-site-system.pp-nav-page.tools-page,
body.pp-site-system.pp-nav-page .tools-page {
  background: #031a2c !important;
  color: #f7f1e7 !important;
  font-family: var(--pp-body);
}

body.pp-site-system.pp-nav-page .grain,
body.pp-site-system.pp-nav-page .grain-overlay,
body.pp-site-system.pp-nav-page .bg-orbs,
body.pp-site-system.pp-nav-page .bg-orb {
  display: none !important;
}

body.pp-site-system.pp-nav-page :is(main, .shell, .tools-page, .container),
body.pp-site-system.pp-nav-page :is(main, .shell, .tools-page, .container) :is(section, article) {
  background-image: none !important;
}

body.pp-site-system.pp-nav-page :is(h1, h2, h3, h4, h5, h6) {
  color: #f7f1e7 !important;
  font-family: var(--pp-display) !important;
  text-shadow: none !important;
  font-weight: 700;
}

body.pp-site-system.pp-nav-page :is(h1, h2, h3, h4, h5, h6) {
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

body.pp-site-system.pp-nav-page :is(p, li, dd, small, .section-subtitle, .hero-subtitle, .results-lede, .record-updated, .record-total-label, .terminal-note, .proof-copy, .sport-meta, .bucket-note, .bucket-record, .method-panel p, .method-equation p, .tools-hero p, .tools-proof-row span, .tool-card-modern p, .results-meta, .faq-answer, .brief-copy, .brief-note, .link-card-sub, .pick-team, .pick-line-label) {
  color: #b8d3df !important;
}

body.pp-site-system.pp-nav-page :where(a:not(.btn):not(.cta):not(.tool-primary-link):not(.sport-tab):not(.sort-btn):not(.search-clear)) {
  color: #54c8ff;
  text-underline-offset: 0.18em;
}

body.pp-site-system.pp-nav-page :is(.kicker, .label, .section-label, .record-label, .tools-kicker, .guide-card-label, .platform-card-label, .pathway-card-label, .brief-kicker, .confidence-label, .platform-label, .sort-label) {
  color: #54c8ff !important;
  font-family: var(--pp-mono) !important;
}

body.pp-site-system.pp-nav-page :is(.results-hero, .method-hero, .tools-hero, .hero) {
  border-bottom-color: rgba(84, 200, 255, 0.35) !important;
}

body.pp-site-system.pp-nav-page .results-hero::before,
body.pp-site-system.pp-nav-page .method-hero::before {
  background: rgba(84, 200, 255, 0.35) !important;
}

body.pp-site-system.pp-nav-page :is(.record-ledger-card, .method-equation, .method-panel, .tools-proof-panel, .tool-card-modern, .tool-card-featured, .sport-card, .platform-card, .pathway-card, .how-step, .stat-card, .guide-card, .bucket-card, .rule-card, .confidence-card, .faq-card, .split-panel, .founder-proof, .track-record-card, .agent-card, .pick-card, .search-card, .cta-card, .link-card, .example-panel, .next-step-panel, .research-brief, .results-empty, .lock-cta) {
  border-color: rgba(84, 200, 255, 0.35) !important;
  border-radius: 14px !important;
  background: #06243a !important;
  box-shadow: none !important;
}

body.pp-site-system.pp-nav-page :is(.method-proof-grid, .bucket-grid, .sports-grid, .platforms-grid, .guides-grid, .pathways-grid, .agent-grid, .results-grid, .tools-grid, .tools-link-grid, .rules-grid, .confidence-strip) {
  border-color: rgba(84, 200, 255, 0.35) !important;
  background: transparent !important;
}

body.pp-site-system.pp-nav-page :is(.method-proof-grid > *, .bucket-grid > *, .sports-grid > *, .platforms-grid > *, .guides-grid > *, .pathways-grid > *, .agent-grid > *, .results-grid > *, .tools-grid > *, .tools-link-grid > *, .rules-grid > *, .confidence-strip > *) {
  background: #06243a !important;
}

body.pp-site-system.pp-nav-page :is(.btn, .cta, .tool-primary-link, .sport-card-cta, .platform-card-link, .guide-card-link, .also-see-cta, .search-clear, .sort-btn, .sport-tab) {
  border-color: #54c8ff !important;
  border-radius: 10px !important;
  background: #021522 !important;
  box-shadow: none !important;
  color: #f7f1e7 !important;
  font-family: var(--pp-body) !important;
}

body.pp-site-system.pp-nav-page :is(.btn-primary, .cta:not(.ghost), .tool-primary-link, .sport-card-cta:hover, .platform-card-link:hover, .guide-card-link:hover, .also-see-cta:hover) {
  border-color: #ff5b23 !important;
  background: #ff5b23 !important;
  color: #ffffff !important;
}

body.pp-site-system.pp-nav-page :is(.btn, .cta, .tool-primary-link, .sport-card-cta, .platform-card-link, .guide-card-link, .also-see-cta, .search-clear, .sort-btn, .sport-tab):hover {
  background: #0b3552 !important;
  color: #ffffff !important;
}

body.pp-site-system.pp-nav-page :is(.btn, .cta, .tool-primary-link, .sport-card-cta, .platform-card-link, .guide-card-link, .also-see-cta, .search-clear, .sort-btn, .sport-tab):focus-visible,
body.pp-site-system.pp-nav-page :is(input, select, textarea):focus-visible {
  outline: 3px solid #ff5b23 !important;
  outline-offset: 4px;
}

body.pp-site-system.pp-nav-page :is(input, select, textarea, .search-input) {
  border-color: rgba(84, 200, 255, 0.72) !important;
  border-radius: 10px !important;
  background: #021522 !important;
  color: #f7f1e7 !important;
  caret-color: #ff5b23;
}

body.pp-site-system.pp-nav-page :is(input, textarea)::placeholder {
  color: #b8d3df !important;
  opacity: 0.8;
}

body.pp-site-system.pp-nav-page :is(table, .ledger-table) {
  border-color: rgba(84, 200, 255, 0.35) !important;
  background: #06243a !important;
  color: #f7f1e7 !important;
}

body.pp-site-system.pp-nav-page :is(th, td) {
  border-color: rgba(84, 200, 255, 0.2) !important;
  background: #06243a !important;
  color: #b8d3df !important;
}

body.pp-site-system.pp-nav-page th {
  color: #54c8ff !important;
  font-family: var(--pp-mono) !important;
}

body.pp-site-system.pp-nav-page :is(.api-pill, .live-badge, .sport-badge, .platform-chip, .tier-badge, .weight-badge, .pick-direction-badge) {
  border-color: rgba(84, 200, 255, 0.72) !important;
  background: rgba(84, 200, 255, 0.1) !important;
  color: #54c8ff !important;
}

body.pp-site-system.pp-nav-page :is(.record-total, .hero-stat-value, .stat-card-value, .win-rate, .confidence-value, .bucket-topline strong, .tool-metrics strong) {
  color: #ff5b23 !important;
  font-family: var(--pp-display) !important;
}

body.pp-site-system.pp-nav-page :is(.record-divider, .hero-stat-divider) {
  background: rgba(84, 200, 255, 0.35) !important;
}

body.pp-site-system.pp-nav-page :is(.confidence-bar-track, .sport-progress) {
  background: rgba(84, 200, 255, 0.16) !important;
}

body.pp-site-system.pp-nav-page :is(.confidence-bar-fill, .sport-progress span) {
  background: #ff5b23 !important;
}

body.pp-site-system.pp-nav-page :is(.skeleton-card, .skeleton-line, .skeleton-bar) {
  background: rgba(84, 200, 255, 0.16) !important;
}

body.pp-site-system.pp-nav-page :is(.result-win, .over) {
  color: #6ee7b7 !important;
}

body.pp-site-system.pp-nav-page :is(.result-loss, .loss) {
  color: #fb7185 !important;
}

@media (max-width: 760px) {
  body.pp-site-system.pp-nav-page :is(.container, .results-container, .tools-page .shell) {
    width: min(100% - 28px, 680px) !important;
  }

  body.pp-site-system.pp-nav-page :is(.results-hero, .method-hero, .tools-hero, .hero) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  body.pp-site-system.pp-nav-page :is(.results-copy h1, .method-hero h1, .tools-hero h1, .hero h1) {
    font-size: clamp(42px, 13vw, 64px) !important;
    line-height: 0.92 !important;
  }

  body.pp-site-system.pp-nav-page :is(.results-hero-grid, .method-hero-grid, .tools-hero-grid, .proof-layout, .method-split) {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.pp-site-system.pp-nav-page :is(.bucket-grid, .method-proof-grid, .agent-grid, .sports-grid, .platforms-grid, .guides-grid, .pathways-grid, .results-grid, .tools-grid, .tools-link-grid, .rules-grid, .confidence-strip) {
    grid-template-columns: 1fr !important;
  }

  body.pp-site-system.pp-nav-page :is(.record-ledger-card, .method-equation, .method-panel, .tools-proof-panel, .tool-card-modern, .tool-card-featured, .sport-card, .platform-card, .pathway-card, .how-step, .stat-card, .guide-card, .bucket-card, .rule-card, .confidence-card, .faq-card, .split-panel, .founder-proof, .track-record-card, .agent-card, .pick-card, .search-card, .cta-card, .link-card, .example-panel, .next-step-panel, .research-brief, .results-empty, .lock-cta) {
    padding: 20px !important;
  }
}

body.pp-site-system.pp-nav-page .pp-site-nav {
  border-bottom-color: var(--pp-nav-line);
  background: rgba(3, 26, 44, 0.96);
  color: var(--pp-nav-cream);
  font-family: var(--pp-body);
  backdrop-filter: blur(16px);
}

body.pp-site-system.pp-nav-page .pp-brand,
body.pp-site-system.pp-nav-page .pp-site-nav__links > a {
  color: var(--pp-nav-cream);
}

body.pp-site-system.pp-nav-page .pp-site-nav__links {
  color: var(--pp-nav-cream);
}

body.pp-site-system.pp-nav-page .pp-site-nav__links > a:not(.pp-site-nav__cta)::after {
  background: var(--pp-nav-orange);
}

body.pp-site-system.pp-nav-page .pp-site-nav__links > a:not(.pp-site-nav__cta):hover,
body.pp-site-system.pp-nav-page .pp-site-nav__links > a:not(.pp-site-nav__cta):focus-visible,
body.pp-site-system.pp-nav-page .pp-site-nav__links > a[aria-current="page"] {
  color: #ffffff;
}

body.pp-site-system.pp-nav-page .pp-site-nav__links > .pp-site-nav__cta {
  border-color: var(--pp-nav-orange);
  border-radius: 10px;
  background: var(--pp-nav-orange);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(255, 91, 35, 0.2);
  font-family: var(--pp-display);
}

body.pp-site-system.pp-nav-page .pp-site-nav__links > .pp-site-nav__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(255, 91, 35, 0.28);
}

body.pp-site-system.pp-nav-page .pp-site-nav__links > .pp-site-nav__cta:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(255, 91, 35, 0.2);
}

body.pp-site-system.pp-nav-page .pp-site-nav__menu {
  border-color: var(--pp-nav-line);
  border-radius: 12px;
  background: transparent;
  color: var(--pp-nav-cream);
}

body.pp-site-system.pp-nav-page .pp-site-nav :focus-visible {
  outline: 3px solid var(--pp-nav-orange);
  outline-offset: 4px;
}

body.pp-site-system.pp-nav-page .pp-site-footer {
  border-top-color: var(--pp-nav-line);
  background: #02121f;
  color: var(--pp-nav-cream);
  font-family: var(--pp-body);
}

body.pp-site-system.pp-nav-page .pp-site-footer .pp-brand,
body.pp-site-system.pp-nav-page .pp-site-footer__column a {
  color: var(--pp-nav-cream);
}

body.pp-site-system.pp-nav-page .pp-site-footer__column h2 {
  color: var(--pp-nav-blue);
}

body.pp-site-system.pp-nav-page .pp-site-footer__copy,
body.pp-site-system.pp-nav-page .pp-site-footer__legal {
  color: var(--pp-nav-muted);
}

body.pp-site-system.pp-nav-page .pp-site-footer__legal {
  border-top-color: rgba(84, 200, 255, 0.2);
}

body.pp-site-system.pp-nav-page .pp-site-footer__column a:hover,
body.pp-site-system.pp-nav-page .pp-site-footer__column a:focus-visible {
  color: var(--pp-nav-blue);
}

@media (max-width: 1080px) {
  body.pp-site-system.pp-nav-page .pp-site-nav__links {
    border-color: var(--pp-nav-line);
    border-radius: 14px;
    background: var(--pp-nav-studio);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  }

  body.pp-site-system.pp-nav-page .pp-site-nav__links > a {
    border-bottom-color: rgba(84, 200, 255, 0.2);
  }

  body.pp-site-system.pp-nav-page .pp-site-nav__links > a:not(.pp-site-nav__cta):hover,
  body.pp-site-system.pp-nav-page .pp-site-nav__links > a:not(.pp-site-nav__cta):focus-visible,
  body.pp-site-system.pp-nav-page .pp-site-nav__links > a[aria-current="page"] {
    background: #0b3552;
    color: #ffffff;
  }

  body.pp-site-system.pp-nav-page .pp-site-nav__links > .pp-site-nav__cta {
    margin-top: 9px;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pp-site-system.pp-nav-page .pp-site-nav__links > .pp-site-nav__cta {
    transition: none;
  }
}

/* Keep selected research controls distinct after adopting the shared theme. */
body.pp-site-system.pp-nav-page :is(.sport-tab.active, .sort-btn.active, [aria-selected="true"]) {
  border-color: var(--pp-nav-orange) !important;
  background: var(--pp-nav-studio) !important;
  color: var(--pp-nav-orange) !important;
  box-shadow: inset 0 -3px var(--pp-nav-orange) !important;
}

body.pp-site-system.pp-nav-page .fade-in {
  opacity: 1;
  transform: none;
}

body.pp-site-system.pp-nav-page .hero h1 span {
  background: none;
  color: var(--pp-nav-orange);
  -webkit-text-fill-color: currentColor;
}

body.pp-site-system.pp-nav-page :is(.guide-card-link, .platform-card-link, .sport-card-cta) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
}

body.pp-site-system.pp-nav-page ::selection {
  color: var(--pp-nav-night);
  background: var(--pp-nav-blue);
}

html:has(body.pp-nav-page) {
  color-scheme: dark;
  background: #031a2c;
  scrollbar-color: #54c8ff #031a2c;
}
