/* ============================================================
   arcvest.css — ArcVest Shared Stylesheet
   Step 1 of SITE-PASS-1 | Mountain Engineering
   Version 1.0 | April 2026
   ============================================================
   ARCHITECTURE RULES:
   - All CSS custom properties live here. Never hardcode in page files.
   - All type scale classes live here. Never define font-size per-page.
   - All spacing uses the 4px-base scale. No arbitrary values.
   - Page files may only contain layout-specific overrides, clearly marked.
   - Components are assembled from these primitives. Never rebuilt per-page.
   ============================================================ */

/* ── Google Fonts Import ──────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500&family=Syne:wght@800&display=swap');

/* ── Lucide Icons (CDN) ───────────────────────────────────── */
/* Usage: <i data-lucide="icon-name" class="icon-sm"></i>
   Call lucide.createIcons() once per page after DOM load.     */

/* ============================================================
   1. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */

:root {

  /* ── Backgrounds ── */
  --bg:           #0a0c10;   /* Deep Dark — every page background */
  --bg-surface:   #0f1117;   /* Slightly lifted — nav, footer shells */
  --bg-card:      #141720;   /* Card / panel / drawer surfaces */
  --bg-card-hover:#1a1f2e;   /* Card hover state */
  --bg-input:     #1a1f2e;   /* Input fields, select elements */

  /* ── Borders ── */
  --border:       #1a2238;   /* Primary border — cards, dividers */
  --border-light: #242d45;   /* Secondary border — inner separators */
  --border-focus: #c9a84c;   /* Focus ring — Arc Gold */

  /* ── Brand Accent ── */
  --gold:         #c9a84c;   /* Arc Gold — primary accent. Use sparingly. */
  --gold-dim:     #8a6e30;   /* Dimmed gold — decorative, disabled states */
  --teal:         #2dd4bf;   /* Teal — data values, charts, secondary accent */
  --teal-dim:     #1a7a6e;   /* Dimmed teal — chart fills, backgrounds */

  /* ── Semantic Signals ── */
  --green:        #22c55e;   /* Positive P&L, WIN, QUALIFIED */
  --green-dim:    #14532d;   /* Green background tint */
  --red:          #ef4444;   /* Negative P&L, LOSS, CRITICAL */
  --red-dim:      #450a0a;   /* Red background tint */
  --amber:        #f59e0b;   /* Warning, ELEVATED NOISE, OPEN POSITION */
  --amber-dim:    #451a03;   /* Amber background tint */

  /* ── Text ── */
  --text:         #e8eaf0;   /* Off-White — primary text, body copy */
  --muted:        #9aa3b2;   /* Secondary text — min 12px, must pass WCAG AA */
  --dim:          #6b7794;   /* Tertiary — timestamps, footnotes, decorative only */

  /* ── Typography ── */
  --font-syne:    'Syne', sans-serif;        /* Logo/wordmark ONLY */
  --font-head:    'Bebas Neue', sans-serif;  /* All section headers */
  --font-body:    'DM Sans', sans-serif;     /* Body text, card titles */
  --font-mono:    'DM Mono', monospace;      /* All data, labels, badges, nav */

  /* ── Spacing Scale (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ── Layout ── */
  --max-width:       1280px;
  --page-padding-x:  clamp(1rem, 4vw, 2.5rem);
  --nav-height:      60px;

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 100px;

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;

  /* ── Shadows ── */
  --shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
  --shadow-drawer: 0 8px 40px rgba(0,0,0,0.6);
  --shadow-nav:    0 1px 0 rgba(26,34,56,0.6);

  /* ── Z-Index Scale ── */
  --z-base:    1;
  --z-card:    10;
  --z-drawer:  50;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;

  /* ── Sport Color Tokens ── */
  /* Single source of truth for all sport icon and label colors site-wide. */
  /* currentColor sports inherit active/inactive state from parent element. */
  --sport-mlb:    currentColor;   /* MLB — neutral, label carries identity */
  --sport-nba:    #fde68a;        /* NBA — yellow */
  --sport-wnba:   #86efac;        /* WNBA — green */
  --sport-ncaab:  #7dd3fc;        /* NCAAB — light blue */
  --sport-ncaaw:  #ff6b6b;        /* NCAAW — light red */
  --sport-nhl:    currentColor;   /* NHL — neutral */
  --sport-soccer: currentColor;   /* Soccer — neutral */
  --sport-atp:    #fde68a;        /* ATP — yellow (pro men's tennis) */
  --sport-wta:    #86efac;        /* WTA — green (pro women's tennis) */
  --sport-cha:    #7dd3fc;        /* CHA — light blue (Challenger) */
  --sport-nfl:    currentColor;   /* NFL — neutral */
  --sport-ncaaf:  #7dd3fc;        /* NCAAF — light blue */
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar          { width: 4px; height: 4px; }
::-webkit-scrollbar-track    { background: var(--bg); }
::-webkit-scrollbar-thumb    { background: var(--border-light); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

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

/* Lists */
ul, ol {
  list-style: none;
}

/* Inputs */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Focus ring — accessible, brand-consistent */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   3. TYPOGRAPHY SYSTEM
   ============================================================ */

/* ── Page Title ── */
.t-page-title {
  font-family: var(--font-head);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
}

/* ── Section Header ── */
.t-section-header {
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--text);
}

/* ── Card Title ── */
.t-card-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
}

/* ── Body Text ── */
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.t-body-light {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

/* ── Data Values ── */
.t-data-lg {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--teal);  /* Override with .gold or .text as needed */
}

.t-data {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
}

/* ── Data Label (minimum size — WCAG) ── */
.t-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Nav Label ── */
.t-nav {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Badge Text ── */
.t-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Eyebrow (decorative — never primary info) ── */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Disclaimer / Footnote ── */
.t-disclaimer {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Logo / Wordmark (Syne — ONLY used here) ── */
.t-wordmark {
  font-family: var(--font-syne);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

.t-wordmark em {
  color: var(--gold);
  font-style: normal;
}

/* ── Color Utility Classes ── */
.c-gold    { color: var(--gold) !important; }
.c-teal    { color: var(--teal) !important; }
.c-green   { color: var(--green) !important; }
.c-red     { color: var(--red) !important; }
.c-amber   { color: var(--amber) !important; }
.c-muted   { color: var(--muted) !important; }
.c-dim     { color: var(--dim) !important; }
.c-text    { color: var(--text) !important; }

/* ── Text alignment ── */
.t-left    { text-align: left; }
.t-center  { text-align: center; }
.t-right   { text-align: right; }

/* ── Text truncation ── */
.t-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

/* ── Page Container ── */
.page-container {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}

/* ── Section ── */
.section {
  padding: var(--space-7) 0;
}

.section-sm {
  padding: var(--space-6) 0;
}

/* ── Page Content Offset (clears fixed nav) ── */
.page-offset {
  padding-top: calc(var(--nav-height) + var(--space-7));
}

/* ── Grid ── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

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

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* ── Flex Utilities ── */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-start    { display: flex; align-items: center; justify-content: flex-start; }
.flex-wrap     { flex-wrap: wrap; }
.gap-1         { gap: var(--space-1); }
.gap-2         { gap: var(--space-2); }
.gap-3         { gap: var(--space-3); }
.gap-4         { gap: var(--space-4); }
.gap-5         { gap: var(--space-5); }

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--border);
  width: 100%;
  margin: var(--space-5) 0;
}

.divider-light {
  height: 1px;
  background: var(--border-light);
  width: 100%;
  margin: var(--space-4) 0;
}

/* ── Spacers ── */
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }

/* ============================================================
   5. NAVIGATION COMPONENT
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-padding-x);
  background: rgba(10, 12, 16, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(26, 34, 56, 0.6);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 7.5rem;
}

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition-base);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a.active {
  color: var(--gold);
}

/* CTA button */
.nav-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--gold);
  color: var(--bg);
}

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-1);
  background: none;
  border: none;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--muted);
  border-radius: 2px;
  transition: all var(--transition-base);
}

/* Mobile menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: rgba(10, 12, 16, 0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  padding: var(--space-5) var(--page-padding-x);
  flex-direction: column;
  gap: var(--space-4);
  z-index: calc(var(--z-nav) - 1);
}

.nav-mobile.open {
  display: flex;
}

.nav-mobile a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(26, 34, 56, 0.4);
  transition: color var(--transition-base);
}

.nav-mobile a:hover  { color: var(--text); }
.nav-mobile a.active { color: var(--gold); }

/* ── Mobile: Show hamburger, hide desktop links ── */
@media (max-width: 768px) {
  .nav-links      { display: none; }
  .nav-cta        { display: none; }
  .nav-hamburger  { display: flex; }
}

/* ============================================================
   6. PAGE HEADER COMPONENT
   ============================================================ */

.page-header {
  padding-top: calc(var(--nav-height) + var(--space-7));
  padding-bottom: var(--space-5);
}

.page-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

.page-title {
  font-family: var(--font-head);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.page-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
}

/* ============================================================
   7. CARD COMPONENT
   ============================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--transition-base);
}

.card:hover {
  border-color: var(--border-light);
}

.card-sm {
  padding: var(--space-4);
}

.card-lg {
  padding: var(--space-6);
}

/* Card with top accent bar */
.card-accent {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* Card header row */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card-header-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   8. BADGE SYSTEM
   ============================================================ */

/* Base badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  line-height: 1;
  white-space: nowrap;
  font-weight: 400;
}

/* Result badges */
.badge-win {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.badge-loss {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-push {
  background: rgba(155, 163, 178, 0.1);
  color: var(--muted);
  border: 1px solid rgba(155, 163, 178, 0.2);
}

.badge-open {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-void {
  background: rgba(107, 119, 148, 0.1);
  color: var(--dim);
  border: 1px solid rgba(107, 119, 148, 0.15);
}

/* Filter badges */
.badge-qualified {
  background: rgba(34, 197, 94, 0.1);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-below-threshold {
  background: rgba(107, 119, 148, 0.08);
  color: var(--dim);
  border: 1px solid rgba(107, 119, 148, 0.15);
}

/* Noise / sigma state badges */
.badge-standard-noise {
  background: rgba(34, 197, 94, 0.1);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-elevated-noise {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-critical-sigma {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Accent badges */
.badge-gold {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.25);
}

.badge-teal {
  background: rgba(45, 212, 191, 0.1);
  color: var(--teal);
  border: 1px solid rgba(45, 212, 191, 0.2);
}

/* Sport badge — icon + label, no color accent */
.badge-sport {
  background: rgba(26, 34, 56, 0.6);
  color: var(--muted);
  border: 1px solid var(--border);
  gap: var(--space-1);
}

/* Bet type badge */
.badge-type {
  background: rgba(26, 34, 56, 0.4);
  color: var(--dim);
  border: 1px solid var(--border);
}

/* Dot indicator (for live / active states) */
.badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-dot-pulse .badge-dot {
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ============================================================
   9. ICON SYSTEM (Lucide)
   ============================================================ */

/* Size classes — matches WEB-SCOPE-1 spec */
.icon-sm {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

.icon-md {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

.icon-lg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* Context-specific colors */
.icon-gold   { color: var(--gold); }
.icon-teal   { color: var(--teal); }
.icon-muted  { color: var(--muted); }
.icon-text   { color: var(--text); }
.icon-green  { color: var(--green); }
.icon-red    { color: var(--red); }
.icon-amber  { color: var(--amber); }

/* Lucide SVG reset — ensures icons inherit color via currentColor */
.icon-sm svg, .icon-md svg, .icon-lg svg,
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

/* Phosphor sport icon SVGs — rendered as direct <svg> elements with icon-* class */
svg.icon-sm, svg.icon-md, svg.icon-lg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============================================================
   10. SPORT SECTION HEADER COMPONENT
   ============================================================ */

.sport-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.sport-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text);
  flex-shrink: 0;
}

.sport-section-title {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
}

.sport-section-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ============================================================
   11. DRAWER COMPONENT
   ============================================================ */

.drawer-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  text-align: left;
}

.drawer-trigger .drawer-chevron {
  width: 16px;
  height: 16px;
  color: var(--dim);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.drawer-trigger[aria-expanded="true"] .drawer-chevron {
  transform: rotate(180deg);
}

.drawer-content {
  display: none;
  overflow: hidden;
}

.drawer-content.open {
  display: block;
}

/* Animated drawer */
.drawer-content-animated {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.drawer-content-animated.open {
  max-height: 2000px; /* Large enough for any content */
}

/* ============================================================
   12. FILTER BAR COMPONENT
   ============================================================ */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
}

.filter-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  cursor: pointer;
  background: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--border-light);
  color: var(--text);
}

.filter-pill.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}

.filter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

/* ============================================================
   13. STAT / KPI DISPLAY
   ============================================================ */

/* Inline stat row */
.stat-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.1;
  color: var(--teal);
}

.stat-value-lg {
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1;
  color: var(--teal);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Stat card — standalone KPI block */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.stat-card-value {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1.1;
  color: var(--teal);
  margin-bottom: var(--space-1);
}

.stat-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Positive / negative state modifiers */
.stat-positive .stat-value,
.stat-positive .stat-card-value { color: var(--green); }

.stat-negative .stat-value,
.stat-negative .stat-card-value { color: var(--red); }

.stat-gold .stat-value,
.stat-gold .stat-card-value     { color: var(--gold); }

/* ============================================================
   14. BUTTON SYSTEM
   ============================================================ */

/* Primary — Arc Gold */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.btn-primary:hover {
  background: #d4b05a;
  border-color: #d4b05a;
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

.btn-outline:hover {
  background: var(--gold);
  color: var(--bg);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-light);
}

.btn-sm {
  font-size: 11px;
  padding: var(--space-2) var(--space-3);
}

.btn-lg {
  font-size: 13px;
  padding: var(--space-4) var(--space-6);
}

/* ============================================================
   15. FORM ELEMENTS
   ============================================================ */

.input {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--transition-base);
  appearance: none;
}

.input:focus {
  outline: none;
  border-color: var(--gold);
}

.input::placeholder {
  color: var(--dim);
}

.select {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
}

.select:focus {
  outline: none;
  border-color: var(--gold);
}

/* ============================================================
   16. DATA TABLE COMPONENT
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}

.data-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 400;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid rgba(26, 34, 56, 0.5);
  color: var(--text);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: rgba(26, 34, 56, 0.3);
}

/* ============================================================
   17. CHART WRAPPERS
   ============================================================ */

/* Equity curve container */
.chart-equity {
  position: relative;
  width: 100%;
  height: 200px;
}

.chart-equity canvas {
  width: 100% !important;
}

/* Sport performance bar */
.perf-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.perf-bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  width: 60px;
  flex-shrink: 0;
}

.perf-bar-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--green);
  transition: width var(--transition-slow);
}

.perf-bar-fill.negative {
  background: var(--red);
}

.perf-bar-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  width: 52px;
  text-align: right;
  flex-shrink: 0;
}

/* Process score dial placeholder */
.dial-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
}

/* Sample integrity bar */
.integrity-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.integrity-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--transition-slow);
}

/* Color bands by value — applied via JS or inline style */
/* 0–39: red, 40–59: amber, 60–79: gold, 80–100: green */

/* Attribution decomposition bar */
.attribution-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: flex;
}

.attribution-segment-pca   { background: var(--teal); }
.attribution-segment-sel   { background: var(--gold); }
.attribution-segment-chance { background: var(--dim); }

/* ============================================================
   18. ARTICLE BODY COMPONENT (EdgeVault)
   ============================================================ */

.article-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  max-width: 700px;
}

.article-body h2 {
  font-family: var(--font-head);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: var(--space-6) 0 var(--space-3);
  line-height: 1.1;
}

.article-body h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--text);
  margin: var(--space-5) 0 var(--space-2);
}

.article-body p {
  margin-bottom: var(--space-4);
}

.article-body a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-base);
}

.article-body a:hover {
  text-decoration-color: var(--gold);
}

/* Callout block */
.article-callout {
  border-left: 3px solid var(--gold);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  background: rgba(201, 168, 76, 0.05);
  margin: var(--space-5) 0;
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ============================================================
   19. TOOL CARD COMPONENT (EdgeVault calculators)
   ============================================================ */

.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tool-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 168, 76, 0.1);
  border-radius: var(--radius-md);
  color: var(--gold);
  flex-shrink: 0;
}

.tool-card-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
}

.tool-card-description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--space-1);
}

.tool-result {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(10, 12, 16, 0.6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.tool-result-value {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--teal);
  line-height: 1.1;
}

.tool-result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: var(--space-1);
}

/* ============================================================
   20. AD SLOT COMPONENT
   ============================================================ */

.ad-slot {
  background: rgba(26, 34, 56, 0.3);
  border: 1px dashed rgba(26, 34, 56, 0.8);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  position: relative;
}

.ad-slot-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.5;
  position: absolute;
  top: var(--space-2);
  left: var(--space-3);
}

/* Leaderboard (728×90) */
.ad-slot-leaderboard {
  min-height: 90px;
  max-width: 728px;
}

/* Rectangle (300×250) */
.ad-slot-rectangle {
  min-height: 250px;
  max-width: 300px;
}

/* ============================================================
   21. FOOTER COMPONENT
   ============================================================ */

.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding: var(--space-6) var(--page-padding-x);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-5);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-disclaimer {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 560px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.footer-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-links a:hover {
  color: var(--muted);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  margin-top: var(--space-2);
  opacity: 0.6;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-links {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* ============================================================
   22. EMPTY STATE COMPONENT
   ============================================================ */

/* Graceful empty state — for fields not yet in engine output */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  gap: var(--space-3);
}

.empty-state-icon {
  color: var(--border-light);
  opacity: 0.6;
}

.empty-state-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.empty-state-message {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--dim);
  max-width: 320px;
  line-height: 1.6;
}

/* Inline empty (for table cells, card sections) */
.empty-inline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  font-style: italic;
}

/* ── Empty state dash — for individual missing data fields ── */
.data-empty::before {
  content: '—';
  color: var(--dim);
  font-family: var(--font-mono);
}

/* ============================================================
   23. TOAST / NOTIFICATION
   ============================================================ */

.toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-drawer);
  max-width: 320px;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast-message {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  flex: 1;
}

/* ============================================================
   24. RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .page-header {
    padding-top: calc(var(--nav-height) + var(--space-6));
  }

  .section {
    padding: var(--space-6) 0;
  }

  .card-lg {
    padding: var(--space-4);
  }

  .stat-card-value {
    font-size: 24px;
  }

  /* Tables — horizontal scroll on mobile */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .filter-bar {
    gap: var(--space-1);
  }

  .filter-pill {
    font-size: 10px;
    padding: var(--space-1) var(--space-2);
  }
}

/* ============================================================
   25. UTILITY — VISIBILITY
   ============================================================ */

.hide-mobile  { display: none; }
.show-mobile  { display: block; }

@media (min-width: 769px) {
  .hide-mobile  { display: revert; }
  .show-mobile  { display: none; }
}

.hide-tablet  { display: none; }

@media (min-width: 1025px) {
  .hide-tablet  { display: revert; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   26. LUCIDE INTEGRATION — PAGE SCRIPT TEMPLATE
   ============================================================
   Add this to every page <head>, after other scripts:

   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>

   Add this before </body>:

   <script>lucide.createIcons();</script>

   Usage in HTML:
   <i data-lucide="trending-up" class="icon-sm icon-teal"></i>
   <i data-lucide="basketball" class="icon-md icon-text"></i>
   <i data-lucide="chevron-down" class="icon-sm drawer-chevron"></i>
   ============================================================ */

/* ============================================================
   END OF arcvest.css v1.0
   Mountain Engineering | Mountain Capital, LLC | April 2026
   ============================================================ */