/* ===========================================
   The Tape — design system (site.css)
   Single source of truth for all styling
   Terminal-inspired aesthetic, harmonized dark/light themes
   =========================================== */

/* ===========================================
   LEVEL 1: BASE TOKENS
   =========================================== */

:root {
  /* Typography Scale */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: 'SF Mono', 'Roboto Mono', 'Consolas', 'Monaco', monospace;
  --font-family-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing Scale */
  --spacing-0.5: 0.125rem; /* 2px */
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-1.5: 0.375rem; /* 6px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-t-lg: 0.5rem;  /* 8px - top corners only */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  
  /* Z-Index Layers */
  --z-ticker: 9999;
  --z-primary-nav: 40;
  --z-secondary-nav: 30;
  --z-context-bar: 20;
  --z-content: 10;
  --z-modal: 100;
  --z-tooltip: 90;
  --z-mobile-appbar: 9990;
  --z-mobile-nav-backdrop: 10048;
  --z-mobile-nav-drawer: 10060;
  --z-mobile-sections-backdrop: 10046;
  --z-mobile-sections-panel: 10056;

  /* Fixed ticker + spacer (aligned with sticky header stack) */
  --site-ticker-height: 2.5rem;
  
  /* Motion Durations */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ===========================================
   LEVEL 2: SEMANTIC TOKENS - DARK THEME
   Terminal-inspired: Green on dark (Quotron style)
   =========================================== */

:root {
  /* Backgrounds */
  --bg: #020617;              /* slate-950 - terminal black */
  --bg-primary: #020617;      /* slate-950 - terminal black (alias for compatibility) */
  --surface: #0f172a;          /* slate-900 - card background */
  --surface-2: #1e293b;        /* slate-800 - inner card */
  --surface-3: #334155;        /* slate-700 - subtle surface */
  
  /* Legacy aliases for custom.css compatibility */
  --bg-card: var(--surface);           /* alias for --surface */
  --bg-card-inner: var(--surface-2);   /* alias for --surface-2 */
  --bg-card-half: rgba(30, 41, 59, 0.5); /* slate-800/50 */
  
  /* Text */
  --text: #00e639;             /* Terminal green - primary text (toned down) */
  --text-primary: #f8fafc;     /* slate-50 - legacy alias (for custom.css compatibility) */
  --text-secondary: #cbd5e1;    /* slate-300 - secondary text */
  --text-muted: #64748b;       /* slate-500 - muted text */
  --text-inverse: #0f172a;     /* For light backgrounds */
  
  /* Borders */
  --border: #1e293b;            /* slate-800 */
  --border-light: #334155;      /* slate-700 */
  --border-focus: #00e639;     /* Terminal green for focus (toned down) */
  
  /* RGB values for rgba() usage */
  --border-rgb: 30, 41, 59;     /* slate-800 RGB */
  --surface-2-rgb: 30, 41, 59;  /* slate-800 RGB */
  --terminal-green-rgb: 0, 230, 57; /* Terminal green RGB (toned down) */
  
  /* Links */
  --link: #00e639;              /* Terminal green (toned down) */
  --link-hover: #39ff14;        /* Brighter green */
  
  /* Focus */
  --focus: #00e639;             /* Terminal green (toned down) */
  --focus-ring: rgba(0, 230, 57, 0.3);
  
  /* Semantic Colors */
  --positive: #00e639;          /* Terminal green (toned down) */
  --positive-bg: rgba(0, 230, 57, 0.1);
  --negative: #ff4444;          /* Bright red */
  --negative-bg: rgba(255, 68, 68, 0.1);
  --warning: #ffaa00;           /* Amber/orange */
  --warning-bg: rgba(255, 170, 0, 0.1);
  --info: #00aaff;              /* Cyan blue */
  --info-bg: rgba(0, 170, 255, 0.1);
  
  /* Aliases: templates use --semantic-* (dashboard, screeners, JS) */
  --semantic-error: var(--negative);
  --semantic-success: var(--positive);
  --semantic-warning: var(--warning);
  --semantic-info: var(--info);
  
  /* Accent (for buttons, highlights) */
  --accent: #00e639;            /* Terminal green (toned down) */
  --accent-hover: #39ff14;      /* Brighter green */
  --accent-active: #00cc33;     /* Darker green */
  --accent-glow: rgba(0, 230, 57, 0.3); /* Legacy alias for custom.css compatibility */
  
  /* Slider Colors */
  --slider-emerald: #00e639;
  --slider-amber: #ffaa00;
  --slider-cyan: #00aaff;
}

/* ===========================================
   LEVEL 2: SEMANTIC TOKENS - LIGHT THEME
   Harmonized retro-inspired, clean professional
   =========================================== */

[data-theme="light"] {
  /* Backgrounds */
  --bg: #f8fafc;               /* slate-50 */
  --bg-primary: #f8fafc;       /* slate-50 (alias for compatibility) */
  --surface: #ffffff;          /* white */
  --surface-2: #f1f5f9;        /* slate-100 */
  --surface-3: #e2e8f0;        /* slate-200 */
  
  /* Legacy aliases for custom.css compatibility */
  --bg-card: var(--surface);           /* alias for --surface */
  --bg-card-inner: var(--surface-2);   /* alias for --surface-2 */
  --bg-card-half: rgba(241, 245, 249, 0.5); /* slate-100/50 */
  
  /* Text */
  --text: #0f172a;             /* slate-900 - primary text */
  --text-primary: #0f172a;     /* slate-900 - legacy alias (for custom.css compatibility) */
  --text-secondary: #334155;    /* slate-700 - secondary text */
  --text-muted: #64748b;       /* slate-500 - muted text */
  --text-inverse: #f8fafc;     /* For dark backgrounds */
  
  /* Borders */
  --border: #e2e8f0;           /* slate-200 */
  --border-light: #cbd5e1;     /* slate-300 */
  --border-focus: #059669;     /* emerald-600 for focus */
  
  /* RGB values for rgba() usage */
  --border-rgb: 226, 232, 240; /* slate-200 RGB */
  --surface-2-rgb: 241, 245, 249; /* slate-100 RGB */
  
  /* Links */
  --link: #059669;             /* emerald-600 */
  --link-hover: #047857;       /* emerald-700 */
  
  /* Focus */
  --focus: #059669;            /* emerald-600 */
  --focus-ring: rgba(5, 150, 105, 0.3);
  
  /* Semantic Colors */
  --positive: #059669;          /* emerald-600 */
  --positive-bg: rgba(5, 150, 105, 0.1);
  --negative: #dc2626;          /* red-600 */
  --negative-bg: rgba(220, 38, 38, 0.1);
  --warning: #d97706;           /* amber-600 */
  --warning-bg: rgba(217, 119, 6, 0.1);
  --info: #0284c7;              /* sky-600 */
  --info-bg: rgba(2, 132, 199, 0.1);
  
  /* Aliases: templates use --semantic-* (dashboard, screeners, JS) */
  --semantic-error: var(--negative);
  --semantic-success: var(--positive);
  --semantic-warning: var(--warning);
  --semantic-info: var(--info);
  
  /* Accent */
  --accent: #059669;            /* emerald-600 */
  --accent-hover: #047857;      /* emerald-700 */
  --accent-active: #065f46;     /* emerald-800 */
  --accent-glow: rgba(5, 150, 105, 0.3); /* Legacy alias for custom.css compatibility */
  
  /* Slider Colors */
  --slider-emerald: #059669;
  --slider-amber: #d97706;
  --slider-cyan: #0284c7;
}

/* ===========================================
   COLOR PALETTE (12 colors, theme-agnostic)
   Same values in light and dark themes
   Used for charts, data series, highlights
   =========================================== */

:root {
  --color-1: #10b981;   /* Emerald - Positive, success, "cheap" signals */
  --color-2: #3b82f6;   /* Blue - Data series, neutral info */
  --color-3: #a855f7;   /* Purple - Data series, historical */
  --color-4: #f59e0b;   /* Amber - Warnings, "rich", highlights */
  --color-5: #ec4899;   /* Pink - Data series, highlights */
  --color-6: #06b6d4;   /* Cyan - Info, "cheap", data series */
  --color-7: #ef4444;   /* Red - Errors, negative, "rich" */
  --color-8: #6366f1;   /* Indigo - Data series */
  --color-9: #14b8a6;   /* Teal - Data series */
  --color-10: #eab308;  /* Yellow - Highlights, warnings */
  --color-11: #64748b;  /* Slate - UI elements, borders, grids */
  --color-12: #8b5cf6;  /* Violet - Data series */
  
  /* RGB values for color palette (for rgba() usage) */
  --color-1-rgb: 16, 185, 129;   /* Emerald */
  --color-2-rgb: 59, 130, 246;   /* Blue */
  --color-3-rgb: 168, 85, 247;   /* Purple */
  --color-4-rgb: 245, 158, 11;   /* Amber */
  --color-5-rgb: 236, 72, 153;    /* Pink */
  --color-6-rgb: 6, 182, 212;     /* Cyan */
  --color-7-rgb: 239, 68, 68;     /* Red */
  --color-8-rgb: 99, 102, 241;    /* Indigo */
  --color-9-rgb: 20, 184, 166;    /* Teal */
  --color-10-rgb: 234, 179, 8;    /* Yellow */
  --color-11-rgb: 101, 116, 139;  /* Slate */
  --color-12-rgb: 139, 92, 246;   /* Violet */

  /* Portfolio builder buckets (+ home pillars / daily opp cards): core=blue, overlay=green, capture=yellow */
  --portfolio-bucket-core: #2563eb;
  --portfolio-bucket-core-rgb: 37, 99, 235;
  --portfolio-bucket-overlay: #15803d;
  --portfolio-bucket-overlay-rgb: 21, 128, 61;
  --portfolio-bucket-capture: #ca8a04;
  --portfolio-bucket-capture-rgb: 202, 138, 4;
}

[data-theme="light"] {
  /* Same color values - no change (colors work in both themes) */
  --color-1: #10b981;
  --color-2: #3b82f6;
  --color-3: #a855f7;
  --color-4: #f59e0b;
  --color-5: #ec4899;
  --color-6: #06b6d4;
  --color-7: #ef4444;
  --color-8: #6366f1;
  --color-9: #14b8a6;
  --color-10: #eab308;
  --color-11: #64748b;
  --color-12: #8b5cf6;
  
  /* RGB values - same as dark theme */
  --color-1-rgb: 16, 185, 129;
  --color-2-rgb: 59, 130, 246;
  --color-3-rgb: 168, 85, 247;
  --color-4-rgb: 245, 158, 11;
  --color-5-rgb: 236, 72, 153;
  --color-6-rgb: 6, 182, 212;
  --color-7-rgb: 239, 68, 68;
  --color-8-rgb: 99, 102, 241;
  --color-9-rgb: 20, 184, 166;
  --color-10-rgb: 234, 179, 8;
  --color-11-rgb: 101, 116, 139;
  --color-12-rgb: 139, 92, 246;

  --portfolio-bucket-core: #2563eb;
  --portfolio-bucket-core-rgb: 37, 99, 235;
  --portfolio-bucket-overlay: #15803d;
  --portfolio-bucket-overlay-rgb: 21, 128, 61;
  --portfolio-bucket-capture: #ca8a04;
  --portfolio-bucket-capture-rgb: 202, 138, 4;
}

/* ===========================================
   LEVEL 3: CHART PALETTE TOKENS (Legacy - use --color-* instead)
   Maps to new color palette for backward compatibility
   =========================================== */

:root {
  --series-1: var(--color-1);   /* Emerald */
  --series-2: var(--color-2);   /* Blue */
  --series-3: var(--color-3);   /* Purple */
  --series-4: var(--color-4);   /* Amber */
  --series-5: var(--color-5);   /* Pink */
  --series-6: var(--color-6);   /* Cyan */
  --series-7: var(--color-7);   /* Red */
  --series-8: var(--color-4);   /* Amber (was Orange) */
  --series-9: var(--color-1);   /* Emerald */
  --series-10: var(--color-8);  /* Indigo */
  --series-11: var(--color-4);  /* Amber (was Orange-500) */
  --series-12: var(--color-9);  /* Teal */
}

[data-theme="light"] {
  /* Same as :root - colors are theme-agnostic */
  --series-1: var(--color-1);
  --series-2: var(--color-2);
  --series-3: var(--color-3);
  --series-4: var(--color-4);
  --series-5: var(--color-5);
  --series-6: var(--color-6);
  --series-7: var(--color-7);
  --series-8: var(--color-4);
  --series-9: var(--color-1);
  --series-10: var(--color-8);
  --series-11: var(--color-4);
  --series-12: var(--color-9);
}

/* ===========================================
   BASE STYLES
   =========================================== */

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
  transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0 0 var(--spacing-4) 0;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
  margin: 0 0 var(--spacing-4) 0;
  line-height: var(--line-height-relaxed);
}

/* ===========================================
   HEADER UTILITY CLASSES
   Typography utilities for headings with minimal margins
   (spacing controlled via mb-* utilities)
   =========================================== */

.header-1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

.header-lg {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

.header-md {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

.header-sm {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

/* Legacy header classes for custom.css compatibility */
.header-2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-3) 0;
}

.header-3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-2) 0;
}

.text-body {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

/* Tabular Numbers - for all numeric data */
.font-tabular,
.tabular-nums {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Typography Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Semantic Text Colors */
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ===========================================
   TEXT STYLES
   Harmonized: 4 base patterns with font modifiers
   =========================================== */

/* Text Primary - Primary text color */
.text-primary {
  color: var(--text);
}

/* Text Secondary - Secondary text color */
.text-secondary {
  color: var(--text-secondary);
}

/* Text Muted - Muted text color */
.text-muted {
  color: var(--text-muted);
}

/* Text Mono - Monospace font (can be combined with above) */
.text-mono {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}

/* Font Modifiers */
.font-mono {
  font-family: var(--font-family-mono);
}

.font-tabular {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Text Color Modifiers - Use 12-color palette */
.text-color-1 { color: var(--color-1); }
.text-color-2 { color: var(--color-2); }
.text-color-3 { color: var(--color-3); }
.text-color-4 { color: var(--color-4); }
.text-color-5 { color: var(--color-5); }
.text-color-6 { color: var(--color-6); }
.text-color-7 { color: var(--color-7); }
.text-color-8 { color: var(--color-8); }
.text-color-9 { color: var(--color-9); }
.text-color-10 { color: var(--color-10); }
.text-color-11 { color: var(--color-11); }
.text-color-12 { color: var(--color-12); }

/* ===========================================
   CARDS / PANELS
   Harmonized: 5 base patterns with size modifiers
   =========================================== */

/* Base Card - Standard padding */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

/* Size Modifiers */
.card-compact {
  padding: var(--spacing-2);
  border-radius: var(--radius-md);
}

.card-spacious {
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
}

/* Error page card - centered, for 404 / access denied etc. */
.error-page-card {
  max-width: 600px;
  margin: var(--spacing-8) auto;
  text-align: center;
}

.error-page-card .error-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: center;
  margin-top: var(--spacing-6);
}

.error-page-card .error-page-links a {
  text-decoration: none;
}

/* Inner Card - Nested cards */
.card-inner {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--spacing-2);
  transition: background-color var(--duration-normal) ease;
}

/* Alert Card - For alerts/warnings */
.card-alert {
  padding: var(--spacing-3);
  border-radius: var(--radius-lg);
  /* Colors applied via color modifiers below */
}

/* Login page error and flash message boxes */
.login-error-box,
.login-message-box {
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid;
}
.login-error-box {
  background: var(--negative-bg);
  border-color: var(--negative);
  color: var(--negative);
}
.login-error-box a {
  color: var(--accent);
  text-decoration: none;
}
.login-error-box a:hover {
  text-decoration: underline;
}
.login-message-box--error {
  background: var(--negative-bg);
  border-color: var(--negative);
  color: var(--negative);
}
.login-message-box--success {
  background: var(--positive-bg);
  border-color: var(--positive);
  color: var(--positive);
}
.login-message-box--info {
  background: var(--info-bg);
  border-color: var(--info);
  color: var(--info);
}

/* Color Modifiers - Border colors from 12-color palette */
.card-color-1 { border-color: var(--color-1); }
.card-color-2 { border-color: var(--color-2); }
.card-color-3 { border-color: var(--color-3); }
.card-color-4 { border-color: var(--color-4); }
.card-color-5 { border-color: var(--color-5); }
.card-color-6 { border-color: var(--color-6); }
.card-color-7 { border-color: var(--color-7); }
.card-color-8 { border-color: var(--color-8); }
.card-color-9 { border-color: var(--color-9); }
.card-color-10 { border-color: var(--color-10); }
.card-color-11 { border-color: var(--color-11); }
.card-color-12 { border-color: var(--color-12); }

/* Background Color Modifiers */
.card-bg-color-1 { background: rgba(var(--color-1-rgb), 0.1); border-color: rgba(var(--color-1-rgb), 0.3); }
.card-bg-color-2 { background: rgba(var(--color-2-rgb), 0.1); border-color: rgba(var(--color-2-rgb), 0.3); }
.card-bg-color-3 { background: rgba(var(--color-3-rgb), 0.1); border-color: rgba(var(--color-3-rgb), 0.3); }
.card-bg-color-4 { background: rgba(var(--color-4-rgb), 0.1); border-color: rgba(var(--color-4-rgb), 0.3); }
.card-bg-color-5 { background: rgba(var(--color-5-rgb), 0.1); border-color: rgba(var(--color-5-rgb), 0.3); }
.card-bg-color-6 { background: rgba(var(--color-6-rgb), 0.1); border-color: rgba(var(--color-6-rgb), 0.3); }
.card-bg-color-7 { background: rgba(var(--color-7-rgb), 0.1); border-color: rgba(var(--color-7-rgb), 0.3); }
.card-bg-color-8 { background: rgba(var(--color-8-rgb), 0.1); border-color: rgba(var(--color-8-rgb), 0.3); }
.card-bg-color-9 { background: rgba(var(--color-9-rgb), 0.1); border-color: rgba(var(--color-9-rgb), 0.3); }
.card-bg-color-10 { background: rgba(var(--color-10-rgb), 0.1); border-color: rgba(var(--color-10-rgb), 0.3); }
.card-bg-color-11 { background: var(--surface-2); border-color: var(--color-11); }
.card-bg-color-12 { background: rgba(var(--color-12-rgb), 0.1); border-color: rgba(var(--color-12-rgb), 0.3); }

/* Legacy - kept for backward compatibility */
.card-half {
  background: rgba(var(--surface-2-rgb), 0.5);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

[data-theme="light"] .card-half {
  background: rgba(var(--surface-2-rgb), 0.5);
}

/* ===========================================
   BUTTONS
   =========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: none;
  text-decoration: none;
}

.btn:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button - includes base layout so it works with or without .btn */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: 1px solid var(--accent);
  text-decoration: none;
  background: var(--accent);
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  background: var(--accent-active);
  transform: translateY(0);
}

.btn-primary:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

[data-theme="light"] .btn-primary {
  color: white;
}

/* Secondary Button - includes base layout so it works with or without .btn */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: 1px solid var(--border);
  text-decoration: none;
  background: var(--surface-2);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
  background: var(--surface-2);
  transform: translateY(0);
}

.btn-secondary:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Subtle Button */
.btn-subtle {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.btn-subtle:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

/* Toggle Button */
.toggle-btn {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  font-size: var(--font-size-sm);
}

.toggle-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
}

.toggle-btn.active {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

[data-theme="light"] .toggle-btn.active {
  color: white;
}

/* Tab Button */
.btn-tab {
  padding: var(--spacing-2) var(--spacing-4);
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-t-lg) var(--radius-t-lg) 0 0;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.btn-tab:hover {
  background: rgba(var(--surface-2-rgb), 0.5);
  color: var(--text-secondary);
}

.btn-tab.active {
  background: var(--surface-2);
  color: var(--color-1); /* Emerald for active tab */
  border-bottom-color: var(--color-1);
}

/* Button Size Modifiers */
.btn-sm {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
}

.btn-md {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-xl);
}

/* Button Width Modifier */
.btn-full {
  width: 100%;
}

/* Button Color Modifiers (for active states, etc.) */
.btn-color-1.active { background: var(--color-1); color: white; border-color: var(--color-1); }
.btn-color-2.active { background: var(--color-2); color: white; border-color: var(--color-2); }
.btn-color-3.active { background: var(--color-3); color: white; border-color: var(--color-3); }
.btn-color-4.active { background: var(--color-4); color: white; border-color: var(--color-4); }
.btn-color-5.active { background: var(--color-5); color: white; border-color: var(--color-5); }
.btn-color-6.active { background: var(--color-6); color: white; border-color: var(--color-6); }
.btn-color-7.active { background: var(--color-7); color: white; border-color: var(--color-7); }
.btn-color-8.active { background: var(--color-8); color: white; border-color: var(--color-8); }
.btn-color-9.active { background: var(--color-9); color: white; border-color: var(--color-9); }
.btn-color-10.active { background: var(--color-10); color: white; border-color: var(--color-10); }
.btn-color-11.active { background: var(--color-11); color: white; border-color: var(--color-11); }
.btn-color-12.active { background: var(--color-12); color: white; border-color: var(--color-12); }

/* Feedback category selector: 4 button boxes, one selected */
.feedback-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}
.feedback-category-label {
  grid-column: 1 / -1;
  margin-bottom: var(--spacing-2);
  color: var(--text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}
.feedback-category-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  text-align: center;
}
.feedback-category-option:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.feedback-category-option input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.feedback-category-option:has(input:checked) {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
[data-theme="light"] .feedback-category-option:has(input:checked) {
  color: white;
}

/* ===========================================
   FORM INPUTS
   =========================================== */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-family-base);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface);
}

/* Hide number input spinners */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Input Field Class */
.input-field {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  transition: border-color var(--duration-fast) ease;
}

.input-field:focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ===========================================
   PASSWORD FIELD WITH VISIBILITY TOGGLE
   =========================================== */
.password-field-wrapper {
  position: relative;
  width: 100%;
}

.password-field-wrapper .input-field {
  padding-right: var(--spacing-9, 2.25rem);
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: var(--spacing-2);
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: var(--spacing-1);
  margin: 0;
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 0.25rem);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
  color: var(--text);
  background-color: var(--surface-3, rgba(148, 163, 184, 0.1));
  outline: none;
}

.password-toggle-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.password-toggle-btn .password-eye-hide {
  display: none;
}

.password-toggle-btn[data-visible="true"] .password-eye-show {
  display: none;
}

.password-toggle-btn[data-visible="true"] .password-eye-hide {
  display: block;
}

/* IV Input - Uses standard input-text styling */
.iv-input {
  /* Extends .input-text - uses same base styles */
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-family-base);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.iv-input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ===========================================
   INPUT TYPES
   Harmonized: 3 base patterns
   =========================================== */

/* Input Text - Text input and select (unified base) */
.input-text {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-family-base);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.input-text:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Select adds dropdown arrow */
select.input-text {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 1rem;
  padding-right: var(--spacing-8);
  appearance: none;
}

/* Input Range - Range slider (unified) */
.input-range {
  width: 100%;
  height: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.input-range::-webkit-slider-runnable-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.375rem;
  background-color: var(--color-1); /* Default to emerald */
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  transition: background-color var(--duration-fast) ease;
}

.input-range::-moz-range-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

.input-range::-moz-range-thumb {
  background-color: var(--color-1);
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  cursor: pointer;
}

/* Range Color Modifiers */
.input-range-color-1::-webkit-slider-thumb { background-color: var(--color-1); }
.input-range-color-1::-moz-range-thumb { background-color: var(--color-1); }
.input-range-color-2::-webkit-slider-thumb { background-color: var(--color-2); }
.input-range-color-2::-moz-range-thumb { background-color: var(--color-2); }
.input-range-color-3::-webkit-slider-thumb { background-color: var(--color-3); }
.input-range-color-3::-moz-range-thumb { background-color: var(--color-3); }
.input-range-color-4::-webkit-slider-thumb { background-color: var(--color-4); }
.input-range-color-4::-moz-range-thumb { background-color: var(--color-4); }
.input-range-color-5::-webkit-slider-thumb { background-color: var(--color-5); }
.input-range-color-5::-moz-range-thumb { background-color: var(--color-5); }
.input-range-color-6::-webkit-slider-thumb { background-color: var(--color-6); }
.input-range-color-6::-moz-range-thumb { background-color: var(--color-6); }

/* Input Checkbox - Standard checkbox */
.input-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-1);
}

.input-checkbox:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Input Focus Color Modifiers */
.input-text-color-1:focus { border-color: var(--color-1); }
.input-text-color-2:focus { border-color: var(--color-2); }
.input-text-color-3:focus { border-color: var(--color-3); }
.input-text-color-4:focus { border-color: var(--color-4); }
.input-text-color-5:focus { border-color: var(--color-5); }
.input-text-color-6:focus { border-color: var(--color-6); }

/* Select Dropdown */
select.input-field,
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 1rem;
  padding-right: var(--spacing-8);
  appearance: none;
}

[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* ===========================================
   RANGE SLIDERS
   =========================================== */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.375rem;
  background-color: var(--slider-emerald);
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  transition: background-color var(--duration-fast) ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--accent-hover);
}

input[type="range"]::-moz-range-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

input[type="range"]::-moz-range-thumb {
  background-color: var(--slider-emerald);
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  cursor: pointer;
}

/* Colored Slider Variants */
input[type="range"].amber-slider::-webkit-slider-thumb {
  background-color: var(--slider-amber);
}

input[type="range"].amber-slider::-moz-range-thumb {
  background-color: var(--slider-amber);
}

input[type="range"].cyan-slider::-webkit-slider-thumb {
  background-color: var(--slider-cyan);
}

input[type="range"].cyan-slider::-moz-range-thumb {
  background-color: var(--slider-cyan);
}

/* ===========================================
   TABLES
   =========================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

thead {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
}

th {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

tbody tr:hover {
  background: var(--surface-2);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Numeric columns - right aligned, tabular */
td.numeric,
th.numeric {
  text-align: right;
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}

/* Zebra striping (optional) */
table.zebra tbody tr:nth-child(even) {
  background: var(--surface-2);
}

table.zebra tbody tr:nth-child(even):hover {
  background: var(--surface);
}

/* Dense table */
table.dense th,
table.dense td {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-xs);
}

/* ===========================================
   TABLE TYPES
   Harmonized: 2 base patterns with density modifiers
   =========================================== */

/* Table Standard - Default table styling */
.table-standard {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table-standard thead {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
}

.table-standard th {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  font-size: var(--font-size-xs);
}

.table-standard td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.table-standard tbody tr:hover {
  background: var(--surface-2);
}

/* Table Dense - Compact table */
.table-dense {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.table-dense thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.table-dense th {
  padding: var(--spacing-1.5) var(--spacing-1);
  text-align: center;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.table-dense td {
  padding: var(--spacing-1.5) var(--spacing-1);
  border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-family-mono);
}

.table-dense tbody tr:hover {
  background: rgba(var(--surface-2-rgb), 0.3);
}

/* Density Modifiers */
.table-spacious th,
.table-spacious td {
  padding: var(--spacing-3) var(--spacing-2);
}

/* Table Compact - Very tight columns with vertical dividers */
.table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  table-layout: auto;
  min-width: max-content;
}

.table-compact thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.table-compact th {
  padding: 0 2px !important;
  text-align: center;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  border-right: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-compact th:last-child {
  border-right: none;
}

.table-compact td {
  padding: 0 2px !important;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
  border-right: 1px solid var(--border);
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-family-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-compact th.numeric,
.table-compact td.numeric,
.table-compact th.font-tabular,
.table-compact td.font-tabular,
.table-compact th.font-mono,
.table-compact td.font-mono,
.table-compact th.text-mono,
.table-compact td.text-mono {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.table-compact td:last-child {
  border-right: none;
}

.table-compact tbody tr:hover {
  background: rgba(var(--surface-2-rgb), 0.3);
}

/* Column width classes for table-compact */
.table-compact th.text-left,
.table-compact td.text-left {
  text-align: left;
}

.table-compact th.text-right,
.table-compact td.text-right {
  text-align: right;
}

.table-compact th.text-center,
.table-compact td.text-center {
  text-align: center;
}

.screener-mobile-card-metric-value {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===========================================
   FROZEN COLUMNS
   Freeze first N columns when scrolling horizontally
   =========================================== */

/* Frozen column base - applies to both th and td */
.table-compact th.frozen-col,
.table-compact td.frozen-col {
  position: sticky;
  background: var(--surface-2);
  z-index: 5;
}

/* Frozen column 1 - Action (left: 0) */
.table-compact th.frozen-col-1,
.table-compact td.frozen-col-1 {
  left: 0;
  z-index: 6;
}

/* Frozen column 2 — left = width of col1 (default 80px) */
.table-compact th.frozen-col-2,
.table-compact td.frozen-col-2 {
  left: 80px;
  z-index: 6;
}

/* Frozen column 3 — left = col1 + col2 (default 80 + 50) */
.table-compact th.frozen-col-3,
.table-compact td.frozen-col-3 {
  left: 130px;
  z-index: 6;
}

/* Frozen column 4 — left = col1 + col2 + col3 (default 130 + 50) */
.table-compact th.frozen-col-4,
.table-compact td.frozen-col-4 {
  left: 180px;
  z-index: 6;
}

/* Frozen column 5 — left = sum of first four default widths (180 + 65) */
.table-compact th.frozen-col-5,
.table-compact td.frozen-col-5 {
  left: 245px;
  z-index: 6;
  border-right: 2px solid var(--border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* Ensure header background matches for frozen columns */
.table-compact thead th.frozen-col {
  background: var(--surface-2);
}

/* Ensure hover state works on frozen columns */
.table-compact tbody tr:hover td.frozen-col {
  background: var(--surface);
}

/*
 * Narrow frozen strip (Expensive Calls / Puts, Premium Condors):
 * col1 = trade, col2 = chart, col3–5 = ticker / stk px / expo.
 * Sticky `left` for each column = sum of widths of all columns to its left (same as default .table-compact frozen math).
 */
.table-compact.table-frozen-narrow-actions {
  --screener-frozen-w-trade: 32px;
  --screener-frozen-w-chart: 32px;
  --screener-frozen-w-ticker: 50px;
  --screener-frozen-w-stkpx: 65px;
  --screener-frozen-w-select: 32px;
  /* Offset applied to all frozen-col-1..5 left positions when the table has a
   * leading sticky select-column. Default 0; overridden by .has-select-col. */
  --screener-frozen-offset: 0px;
}

.table-compact.table-frozen-narrow-actions.has-select-col {
  --screener-frozen-offset: var(--screener-frozen-w-select);
}

/* Sticky checkbox column at the very left, used by the Edge screeners' Report
 * tabs to feed selections into the Portfolio Sizing tab. */
.table-compact.table-frozen-narrow-actions th.frozen-col-select,
.table-compact.table-frozen-narrow-actions td.frozen-col-select {
  position: sticky;
  left: 0;
  width: var(--screener-frozen-w-select);
  min-width: var(--screener-frozen-w-select);
  max-width: var(--screener-frozen-w-select);
  padding: 1px 2px;
  text-align: center;
  vertical-align: middle;
  background: var(--surface-2);
  z-index: 7;
  box-sizing: border-box;
}

.table-compact thead th.frozen-col-select {
  background: var(--surface-2);
}

.table-compact tbody tr:hover td.frozen-col-select {
  background: var(--surface);
}

.table-compact.table-frozen-narrow-actions th,
.table-compact.table-frozen-narrow-actions td {
  font-size: 0.85rem;
  font-family: var(--font-family-base);
  line-height: 1.35;
  padding: 2px 4px !important;
}

.table-compact.table-frozen-narrow-actions th.numeric,
.table-compact.table-frozen-narrow-actions td.numeric,
.table-compact.table-frozen-narrow-actions th.font-tabular,
.table-compact.table-frozen-narrow-actions td.font-tabular,
.table-compact.table-frozen-narrow-actions th.font-mono,
.table-compact.table-frozen-narrow-actions td.font-mono,
.table-compact.table-frozen-narrow-actions th.text-mono,
.table-compact.table-frozen-narrow-actions td.text-mono {
  font-family: var(--font-family-base);
}

.table-compact.table-frozen-narrow-actions th.frozen-col-1,
.table-compact.table-frozen-narrow-actions td.frozen-col-1 {
  left: var(--screener-frozen-offset);
  width: var(--screener-frozen-w-trade);
  min-width: var(--screener-frozen-w-trade);
  max-width: 36px;
  padding: 1px 2px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}

.table-compact.table-frozen-narrow-actions th.frozen-col-2,
.table-compact.table-frozen-narrow-actions td.frozen-col-2 {
  left: calc(var(--screener-frozen-offset) + var(--screener-frozen-w-trade));
  width: var(--screener-frozen-w-chart);
  min-width: var(--screener-frozen-w-chart);
  max-width: 36px;
  padding: 1px 2px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}

.table-compact.table-frozen-narrow-actions th.frozen-col-3,
.table-compact.table-frozen-narrow-actions td.frozen-col-3 {
  left: calc(var(--screener-frozen-offset) + var(--screener-frozen-w-trade) + var(--screener-frozen-w-chart));
}

.table-compact.table-frozen-narrow-actions th.frozen-col-4,
.table-compact.table-frozen-narrow-actions td.frozen-col-4 {
  left: calc(var(--screener-frozen-offset) + var(--screener-frozen-w-trade) + var(--screener-frozen-w-chart) + var(--screener-frozen-w-ticker));
}

.table-compact.table-frozen-narrow-actions th.frozen-col-5,
.table-compact.table-frozen-narrow-actions td.frozen-col-5 {
  left: calc(
    var(--screener-frozen-offset) + var(--screener-frozen-w-trade) + var(--screener-frozen-w-chart) +
      var(--screener-frozen-w-ticker) + var(--screener-frozen-w-stkpx)
  );
}

/* Dashboard watchlist / movers tables + screener chart trigger (shared with dashboard/index.html) */
.ticker-table th.stk-chart-col,
.ticker-table td.stk-chart-col {
  width: 1.625rem;
  max-width: 1.75rem;
  padding: 1px 0.1rem;
  text-align: center;
  vertical-align: middle;
}

.dashboard-stk-chart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 0;
}

.dashboard-stk-chart-btn:hover {
  color: var(--accent);
  background: rgba(var(--terminal-green-rgb, 0, 230, 57), 0.12);
}

.dashboard-stk-chart-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dashboard-stk-chart-btn svg {
  pointer-events: none;
}

.screener-trade-icon-btn {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
}

.screener-chart-col-heading {
  display: inline-flex;
  opacity: 0.4;
  color: var(--accent);
  vertical-align: middle;
}

.screener-trade-col-heading {
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  opacity: 0.85;
}

/* Layout Modifier - Grid-based table */
.table-grid {
  display: grid;
  gap: 0;
}

/* Row State Modifiers */
.table-row-selected {
  background: var(--positive-bg) !important;
}

.table-row-hover:hover {
  background: rgba(var(--surface-2-rgb), 0.3);
}

/* ===========================================
   LABORATORY - STRATEGY CARDS (My SkewPreme, My HedgeRoll, etc.)
   Shared list and card styling; position tables use .table-compact (white/secondary text)
   =========================================== */

.engaged-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.engaged-list li {
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
  background: var(--surface);
  border-left: 4px solid var(--positive);
}

/* Card title and details in accent green; position table keeps .table-compact (text-secondary) */
.engaged-list li > div > div:first-child {
  color: var(--text);
}

.engaged-list li .backtest-item-details,
.engaged-list li .backtest-item-details strong {
  color: var(--text);
}

/* Position tables in strategy cards: center all cells */
.engaged-list .table-compact th,
.engaged-list .table-compact td {
  text-align: center;
}

/* Currency columns in lab position tables: tabular numbers for alignment; value includes $ prefix from template */
.engaged-list .table-compact .cell-currency {
  font-variant-numeric: tabular-nums;
}

/* ===========================================
   BADGES
   =========================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.badge-neutral {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.badge-positive {
  background: var(--positive-bg);
  color: var(--positive);
  border: 1px solid var(--positive);
}

.badge-negative {
  background: var(--negative-bg);
  color: var(--negative);
  border: 1px solid var(--negative);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info);
}

/* ===========================================
   BADGE TYPES
   Harmonized: 2 base patterns with size modifiers
   =========================================== */

/* Badge Standard - Base badge with padding, border, rounded */
.badge-standard {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

/* Badge Text - Text-only badge (no background/border) */
.badge-text {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  /* No padding, border, or background */
}

/* Size Modifiers */
.badge-sm {
  padding: var(--spacing-0.5) var(--spacing-1.5);
  font-size: var(--font-size-xs);
}

.badge-md {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
}

/* Badge Color Modifiers */
.badge-color-1 { background: rgba(var(--color-1-rgb), 0.1); color: var(--color-1); border-color: rgba(var(--color-1-rgb), 0.5); }
.badge-color-2 { background: rgba(var(--color-2-rgb), 0.1); color: var(--color-2); border-color: rgba(var(--color-2-rgb), 0.5); }
.badge-color-3 { background: rgba(var(--color-3-rgb), 0.1); color: var(--color-3); border-color: rgba(var(--color-3-rgb), 0.5); }
.badge-color-4 { background: rgba(var(--color-4-rgb), 0.1); color: var(--color-4); border-color: rgba(var(--color-4-rgb), 0.5); }
.badge-color-5 { background: rgba(var(--color-5-rgb), 0.1); color: var(--color-5); border-color: rgba(var(--color-5-rgb), 0.5); }
.badge-color-6 { background: rgba(var(--color-6-rgb), 0.1); color: var(--color-6); border-color: rgba(var(--color-6-rgb), 0.5); }
.badge-color-7 { background: rgba(var(--color-7-rgb), 0.1); color: var(--color-7); border-color: rgba(var(--color-7-rgb), 0.5); }
.badge-color-8 { background: rgba(var(--color-8-rgb), 0.1); color: var(--color-8); border-color: rgba(var(--color-8-rgb), 0.5); }
.badge-color-9 { background: rgba(var(--color-9-rgb), 0.1); color: var(--color-9); border-color: rgba(var(--color-9-rgb), 0.5); }
.badge-color-10 { background: rgba(var(--color-10-rgb), 0.1); color: var(--color-10); border-color: rgba(var(--color-10-rgb), 0.5); }
.badge-color-11 { background: var(--surface-2); color: var(--color-11); border-color: var(--color-11); }
.badge-color-12 { background: rgba(var(--color-12-rgb), 0.1); color: var(--color-12); border-color: rgba(var(--color-12-rgb), 0.5); }

/* Text-only badge colors */
.badge-text-color-1 { color: var(--color-1); }
.badge-text-color-2 { color: var(--color-2); }
.badge-text-color-3 { color: var(--color-3); }
.badge-text-color-4 { color: var(--color-4); }
.badge-text-color-5 { color: var(--color-5); }
.badge-text-color-6 { color: var(--color-6); }
.badge-text-color-7 { color: var(--color-7); }
.badge-text-color-8 { color: var(--color-8); }
.badge-text-color-9 { color: var(--color-9); }
.badge-text-color-10 { color: var(--color-10); }
.badge-text-color-11 { color: var(--color-11); }
.badge-text-color-12 { color: var(--color-12); }

/* Context Badge (header) */
.context-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ===========================================
   DIVIDERS / SEPARATORS
   =========================================== */

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--spacing-4) 0;
  border: none;
}

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

.divider-light {
  background: var(--border-light);
}

/* ===========================================
   COLLAPSIBLE SECTIONS
   =========================================== */

.collapsible-header {
  cursor: pointer;
  user-select: none;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--duration-fast) ease;
}

.collapsible-header:hover {
  background: var(--surface);
}

.collapsible-content {
  padding: var(--spacing-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Membership FAQ: exclusive accordion via <details name="membership-faq"> */
.membership-faq {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.membership-faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
}

.membership-faq__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  transition: background-color var(--duration-fast) ease;
}

.membership-faq__summary::-webkit-details-marker {
  display: none;
}

.membership-faq__summary:hover {
  background: var(--surface);
}

.membership-faq__chevron {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  transition: transform var(--duration-fast) ease;
}

.membership-faq__item[open] .membership-faq__chevron {
  transform: rotate(-180deg);
}

.membership-faq__body {
  padding: 0 var(--spacing-4) var(--spacing-4);
}

.membership-faq__body .text-body:first-child {
  margin-top: 0;
}

/* ===========================================
   Client Experience theme (membership Client tier + becoming-client page)
   Light violet system aligned with tier-card--client on membership.
   =========================================== */

.client-xp-scope {
  --client-x-ring: #d8b4fe;
  --client-x-fill: #f5f3ff;
  --client-x-title: #7c3aed;
  --client-x-heading: #5b21b6;
  --client-x-accent: #a78bfa;
  --client-x-border-soft: #e9d5ff;
  --client-x-border-mid: #ddd6fe;
  --client-x-glow: rgba(167, 139, 250, 0.22);
}

.becoming-client-page.main-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-4);
}

.client-xp-hero.card {
  margin-bottom: var(--spacing-8);
  padding-top: var(--spacing-5);
  text-align: center;
  border: 2px solid var(--client-x-ring);
  position: relative;
  overflow: hidden;
  /* Shell matches home index .home-client-experience (violet frame + soft glow) */
  background:
    radial-gradient(circle at 100% 0%, var(--client-x-glow) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(167, 139, 250, 0.12) 0%, transparent 42%),
    linear-gradient(180deg, var(--client-x-fill) 0%, var(--surface) 100%);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.12);
}

.client-xp-hero.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--client-x-accent), var(--client-x-title));
  pointer-events: none;
}

/* Becoming a Client hero — dark theme: same indigo shell + title contrast as home-client-experience */
:root:not([data-theme="light"]) .becoming-client-page .client-xp-hero.card {
  --client-x-ring: rgba(129, 140, 248, 0.28);
  --client-x-fill: rgba(30, 27, 75, 0.55);
  --client-x-glow: rgba(99, 102, 241, 0.1);
  --client-x-border-soft: rgba(99, 102, 241, 0.2);
  border-color: var(--client-x-ring);
  background:
    radial-gradient(circle at 92% 0%, var(--client-x-glow) 0%, transparent 42%),
    radial-gradient(circle at 8% 100%, rgba(79, 70, 229, 0.07) 0%, transparent 46%),
    linear-gradient(185deg, rgba(30, 27, 75, 0.5) 0%, var(--surface) 55%, var(--surface-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.14);
}

:root:not([data-theme="light"]) .becoming-client-page .client-xp-hero.card::before {
  opacity: 0.85;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.75), rgba(129, 140, 248, 0.55));
}

:root:not([data-theme="light"]) .becoming-client-page .client-xp-hero .client-xp-page-title {
  color: #c4b5fd;
}

:root:not([data-theme="light"]) .becoming-client-page .client-xp-hero .client-xp-badge {
  color: #c4b5fd;
  border-color: rgba(129, 140, 248, 0.38);
}

.client-xp-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--client-x-border-soft);
  color: var(--client-x-heading);
  border: 1px solid var(--client-x-border-mid);
  margin-bottom: var(--spacing-3);
}

.client-xp-page-title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-4);
  margin-top: 0;
  color: var(--client-x-heading);
}

.client-xp-heading {
  color: var(--client-x-heading);
}

.client-xp-highlight-card.card {
  margin-bottom: var(--spacing-8);
  background: var(--surface-2);
  border-left: 4px solid var(--client-x-accent);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.14);
}

.client-xp-panel.card {
  margin-bottom: var(--spacing-8);
  border: 1px solid rgba(216, 180, 254, 0.28);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.06);
}

.client-xp-icon-well {
  min-width: 48px;
  height: 48px;
  background: linear-gradient(145deg, var(--client-x-accent) 0%, var(--client-x-title) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}

.client-xp-icon-well--sm {
  min-width: 40px;
  width: 40px;
  height: 40px;
  font-size: var(--font-size-lg);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  color: #fafafa;
  font-weight: var(--font-weight-bold);
}

.client-xp-rule {
  border-left: 3px solid var(--client-x-accent) !important;
}

/* Becoming-client: execution paths as horizontal alternatives */
.becoming-client-exec-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-3);
}
.becoming-client-exec-choices__option {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
}
.becoming-client-exec-choices__or {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  padding: 0 var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .becoming-client-exec-choices {
    flex-direction: column;
  }
  .becoming-client-exec-choices__or {
    padding: var(--spacing-1) 0;
    align-self: center;
  }
}

.client-xp-cta.card {
  text-align: center;
  margin-bottom: 0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%, var(--client-x-glow) 0%, transparent 52%),
    linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 2px solid var(--client-x-ring);
}

.client-xp-link {
  color: var(--client-x-title);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.client-xp-link:hover {
  color: var(--client-x-accent);
}

/* Purple CTA buttons — same treatment as membership Client Experience tier */
.btn-client-xp {
  background: var(--client-x-border-soft) !important;
  color: var(--client-x-heading) !important;
  border: 2px solid var(--client-x-border-mid) !important;
}

.btn-client-xp:hover {
  background: var(--client-x-border-mid) !important;
  color: #4c1d95 !important;
}

.client-xp-scope .client-xp-section-title {
  color: var(--client-x-accent);
}

/* ===========================================
   Signals Page
   Analyst -> Investor -> Client Experience funnel.
   =========================================== */

.signals-page.main-content {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--spacing-8) var(--spacing-4);
}

.signals-hero.card,
.signals-final.card {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-8);
  text-align: center;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--terminal-green-rgb), 0.16) 0%, transparent 34%),
    radial-gradient(circle at 88% 10%, var(--client-x-glow) 0%, transparent 38%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid rgba(var(--terminal-green-rgb), 0.24);
}

.signals-eyebrow,
.signals-step-kicker,
.signals-advice-card__label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 var(--spacing-3);
  color: var(--accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signals-hero__title {
  max-width: 760px;
  margin: 0 auto var(--spacing-4);
  color: var(--text-primary);
}

.signals-hero__lede {
  max-width: 760px;
  margin: 0 auto var(--spacing-6);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.signals-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.signals-cta-row--center {
  justify-content: center;
}

.signals-cta {
  text-decoration: none;
}

.signals-section,
.signals-panel.card,
.signals-gallery-card.card,
.signals-client-panel.card {
  margin-bottom: var(--spacing-8);
}

.signals-section__intro,
.signals-panel__header {
  margin-bottom: var(--spacing-5);
}

.signals-panel__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.signals-panel__cta {
  flex: 0 0 auto;
  text-decoration: none;
}

.signals-section__title {
  color: var(--text-primary);
  margin-bottom: var(--spacing-3);
}

.signals-section__copy {
  max-width: 820px;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.signals-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.signals-workflow__step.card {
  position: relative;
  min-height: 100%;
  padding: var(--spacing-5);
  border-top: 3px solid var(--accent);
}

.signals-workflow__step--investor.card {
  border-top-color: var(--warning);
}

.signals-workflow__step--client.card {
  border-top-color: var(--client-x-accent);
  background:
    radial-gradient(circle at 100% 0%, var(--client-x-glow) 0%, transparent 45%),
    var(--surface);
}

.signals-step-number {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  color: var(--text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

.signals-step-kicker--warning {
  color: var(--warning);
}

.signals-step-kicker--client {
  color: var(--client-x-title);
}

.signals-card-title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-3);
}

.signals-card-copy {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.signals-panel.card {
  background: var(--surface);
  border-left: 4px solid var(--accent);
}

.signals-panel--investor.card {
  border-left-color: var(--warning);
}

.signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-4);
  margin-top: var(--spacing-5);
}

.signals-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.signals-mini-card.card-inner {
  padding: var(--spacing-5);
  border-left: 3px solid var(--accent);
}

.signals-mini-card--warning.card-inner {
  border-left-color: var(--warning);
}

.signals-gallery-card .signals-card-title {
  margin-bottom: var(--spacing-4);
}

.signals-client-panel.card {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--client-x-ring);
  /* Outer shell aligned with home-client-experience / becoming-client / membership Client tier */
  background:
    radial-gradient(circle at 100% 0%, var(--client-x-glow) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(167, 139, 250, 0.12) 0%, transparent 42%),
    linear-gradient(180deg, var(--client-x-fill) 0%, var(--surface) 100%);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.12);
}

.signals-client-panel.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--client-x-accent), var(--client-x-title));
  pointer-events: none;
}

/* Signals — Client panel dark theme (same indigo shell + headline/badge as other Client Experience cards) */
:root:not([data-theme="light"]) .signals-page .signals-client-panel.card {
  --client-x-ring: rgba(129, 140, 248, 0.28);
  --client-x-fill: rgba(30, 27, 75, 0.55);
  --client-x-glow: rgba(99, 102, 241, 0.1);
  --client-x-border-soft: rgba(99, 102, 241, 0.2);
  border-color: var(--client-x-ring);
  background:
    radial-gradient(circle at 92% 0%, var(--client-x-glow) 0%, transparent 42%),
    radial-gradient(circle at 8% 100%, rgba(79, 70, 229, 0.07) 0%, transparent 46%),
    linear-gradient(185deg, rgba(30, 27, 75, 0.5) 0%, var(--surface) 55%, var(--surface-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.14);
}

:root:not([data-theme="light"]) .signals-page .signals-client-panel.card::before {
  opacity: 0.85;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.75), rgba(129, 140, 248, 0.55));
}

:root:not([data-theme="light"]) .signals-page .signals-client-panel .signals-section__title {
  color: #c4b5fd;
}

:root:not([data-theme="light"]) .signals-page .signals-client-panel .client-xp-badge {
  color: #c4b5fd;
  border-color: rgba(129, 140, 248, 0.38);
  background: rgba(99, 102, 241, 0.22);
}

:root:not([data-theme="light"]) .signals-page .signals-client-panel .signals-advice-example-box {
  border-color: rgba(129, 140, 248, 0.28);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

:root:not([data-theme="light"]) .signals-page .signals-client-panel .signals-advice-tab {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(129, 140, 248, 0.28);
}

:root:not([data-theme="light"]) .signals-page .signals-client-panel .signals-advice-tab:hover {
  color: #ddd6fe;
  border-color: rgba(165, 180, 252, 0.45);
}

:root:not([data-theme="light"]) .signals-page .signals-client-panel .signals-advice-tab.is-active {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(165, 180, 252, 0.55);
  color: #ede9fe;
}

.signals-advice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

.signals-advice-tab {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--client-x-border-mid);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.signals-advice-tab:hover {
  color: var(--client-x-title);
  border-color: var(--client-x-accent);
  transform: translateY(-1px);
}

.signals-advice-tab.is-active {
  background: var(--client-x-border-soft);
  border-color: var(--client-x-accent);
  color: var(--client-x-heading);
}

.signals-advice-example-box {
  border: 1px solid var(--client-x-border-mid);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.signals-advice-card {
  padding: var(--spacing-5);
  background: transparent;
}

.signals-advice-card--featured {
  background:
    radial-gradient(circle at 100% 0%, rgba(167, 139, 250, 0.16) 0%, transparent 42%),
    transparent;
}

.signals-advice-card__topline,
.signals-example-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.signals-advice-card__label {
  color: var(--client-x-title);
}

.signals-status-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--client-x-border-mid);
  border-radius: 999px;
  background: var(--client-x-border-soft);
  color: var(--client-x-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.signals-advice-card__title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-4);
}

.signals-example-subtitle {
  margin: calc(-1 * var(--spacing-2)) 0 var(--spacing-4);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.signals-strategy-headline {
  max-width: 860px;
  margin: 0 0 var(--spacing-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.signals-ticker-badge {
  min-width: 58px;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--client-x-accent), var(--client-x-title));
  color: #fafafa;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.25);
}

.signals-trade-ticket {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-2);
}

.signals-trade-ticket div {
  min-width: 0;
}

.signals-trade-ticket span {
  display: block;
  margin-bottom: var(--spacing-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.signals-trade-ticket strong {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.signals-news-strip,
.signals-client-note {
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: rgba(var(--surface-2-rgb), 0.58);
}

.signals-news-strip__eyebrow {
  margin: 0 0 var(--spacing-2);
  color: var(--client-x-title);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signals-news-strip__body {
  margin-bottom: var(--spacing-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.signals-news-strip ul {
  margin: 0;
  padding-left: var(--spacing-5);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.signals-client-note {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  border-color: var(--client-x-border-mid);
}

.signals-client-note strong {
  color: var(--client-x-title);
}

.signals-advice-list {
  display: grid;
  gap: var(--spacing-3);
  margin: 0;
}

.signals-advice-list div {
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--border);
}

.signals-advice-list div:first-child {
  padding-top: 0;
  border-top: 0;
}

.signals-advice-list dt {
  margin-bottom: var(--spacing-1);
  color: var(--client-x-title);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signals-advice-list dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.signals-disclaimer {
  margin: var(--spacing-5) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.signals-final.card {
  border-color: var(--client-x-ring);
}

.signals-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
  margin: var(--spacing-6) 0;
}

.signals-journey__item {
  padding: var(--spacing-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: left;
}

@media (max-width: 800px) {
  .signals-page.main-content {
    padding: var(--spacing-4);
  }

  .signals-workflow,
  .signals-journey {
    grid-template-columns: 1fr;
  }

  .signals-panel__header {
    flex-direction: column;
  }

  .signals-panel__cta {
    width: 100%;
    text-align: center;
  }

  .signals-example-header {
    flex-direction: column;
  }

  .signals-trade-ticket {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signals-advice-tab {
    flex: 1 1 calc(50% - var(--spacing-2));
  }
}

/* ===========================================
   SCORE BAR
   Reusable progress bar component for scores/ratings
   =========================================== */

.score-bar {
  height: 100%;
  background: var(--accent);
  transition: width var(--duration-normal) ease;
  border-radius: var(--radius-sm);
}

.score-bar-container {
  width: 100%;
  height: var(--spacing-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ===========================================
   LOAD PROGRESS BAR
   Reusable: 0% → 75% in --load-expected-time, then half-life creep toward 100%.
   Set --load-expected-time on .load-progress-bar (e.g. 4s). Total run = 7 × that.
   =========================================== */

.load-progress-bar {
  width: 100%;
  height: 3px;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  --load-expected-time: 4s;
}

.load-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  opacity: 0.85;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: load-progress-asymptotic calc(7 * var(--load-expected-time)) linear forwards;
}

@keyframes load-progress-asymptotic {
  0% { width: 0%; }
  14.29% { width: 75%; }
  28.57% { width: 87.5%; }
  42.86% { width: 93.75%; }
  57.14% { width: 96.875%; }
  71.43% { width: 98.4375%; }
  85.71% { width: 99.22%; }
  100% { width: 99.6%; }
}

/* ===========================================
   SCROLLBARS
   =========================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) var(--surface-2);
}

/* ===========================================
   HEADER STACK - 5 Row System
   =========================================== */

/* ROW A: TICKER BAR (Fixed, Always Visible) */
.header-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-ticker);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker-container {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-container {
    animation: none;
  }
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
}

.ticker-symbol {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  margin-right: var(--spacing-2);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-price {
  margin-right: var(--spacing-2);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-change {
  margin-right: var(--spacing-1);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-change-pct {
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-change.positive {
  color: var(--positive);
}

.ticker-change.negative {
  color: var(--negative);
}

.ticker-change-pct {
  font-size: 0.7rem;
}

.ticker-separator {
  width: 1px;
  height: 1rem;
  background: var(--border);
  margin: 0 var(--spacing-2);
}

/* ROW B: PRIMARY NAVIGATION (Sticky) */
.header-primary-nav {
  position: sticky;
  top: var(--site-ticker-height); /* Below ticker */
  left: 0;
  right: 0;
  height: 3rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-primary-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  transition: transform var(--duration-normal) ease, height var(--duration-normal) ease;
}

.header-primary-nav.collapsed {
  transform: translateY(calc(-100% + 0.5rem));
  height: 0.5rem;
  overflow: hidden;
}

.primary-nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.primary-nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.primary-nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-5);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  border-bottom: 2px solid transparent;
}

.primary-nav-link:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.primary-nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background-color: var(--surface-2);
}

/* ROW C: SECONDARY NAVIGATION (Sticky) */
.header-secondary-nav {
  position: sticky;
  top: calc(var(--site-ticker-height) + 3rem); /* Below ticker + primary nav */
  left: 0;
  right: 0;
  height: 2.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-secondary-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  transition: transform var(--duration-normal) ease, height var(--duration-normal) ease;
}

.header-secondary-nav.collapsed {
  transform: translateY(calc(-100% + 0.5rem));
  height: 0.5rem;
  overflow: hidden;
}

.header-secondary-nav.hidden {
  display: none;
}

.secondary-nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.secondary-nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.secondary-nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-4);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  border-bottom: 2px solid transparent;
}

.secondary-nav-link:hover {
  color: var(--text-secondary);
  background-color: var(--surface);
}

.secondary-nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background-color: var(--surface);
}

.secondary-nav-divider {
  width: 1px;
  height: 60%;
  background-color: var(--border);
  margin: 0 var(--spacing-2);
  opacity: 0.5;
}

.secondary-nav-link.premium {
  color: var(--warning);
}

.secondary-nav-link.premium:hover {
  color: var(--warning);
  opacity: 0.9;
}

.secondary-nav-link.premium.active {
  color: var(--warning);
  border-bottom-color: var(--warning);
}

/* ROW D: CONTEXT BAR (Sticky) */
.header-context-bar {
  position: sticky;
  top: calc(var(--site-ticker-height) + 3rem + 2.5rem); /* Below ticker + primary + secondary nav */
  left: 0;
  right: 0;
  height: 2.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-context-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-4);
  transition: transform var(--duration-normal) ease, height var(--duration-normal) ease;
  font-size: var(--font-size-xs);
}

.header-context-bar.collapsed {
  transform: translateY(calc(-100% + 0.5rem));
  height: 0.5rem;
  overflow: hidden;
}

.context-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.context-report-name {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

/* Context bar tabs (report-level sub-nav) */
.context-bar-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: var(--spacing-3);
  padding-left: var(--spacing-3);
  border-left: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: thin;
}

.context-bar-tab {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.125rem var(--spacing-2);
  margin: 0 0.0625rem;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.context-bar-tab:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.context-bar-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--font-weight-medium);
}

.context-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.context-user-name {
  color: var(--text-secondary);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  font-size: var(--font-size-sm);
  line-height: 1;
}

.theme-toggle-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: scale(1.05);
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

.theme-toggle-btn:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.theme-toggle-icon {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}

/* SITE TICKER (fixed bar + spacer; height via --site-ticker-height) */
.site-ticker-tape {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-ticker-height);
  overflow: hidden;
  z-index: var(--z-ticker);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.site-ticker-content {
  white-space: nowrap;
  display: inline-block;
  line-height: var(--site-ticker-height);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.site-ticker-spacer {
  height: var(--site-ticker-height);
  flex-shrink: 0;
}

/* Mobile shell: single app bar + drawers (≤768px); .site-desktop-only / .site-mobile-only */
.site-mobile-only {
  display: none !important;
}

.site-mobile-appbar {
  position: sticky;
  top: var(--site-ticker-height);
  left: 0;
  right: 0;
  z-index: var(--z-mobile-appbar);
  min-height: 3rem;
  padding: var(--spacing-2) var(--spacing-3);
  gap: var(--spacing-2);
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.site-mobile-menu-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.site-mobile-menu-icon {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.site-mobile-appbar-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  line-height: 1.2;
}

.site-mobile-section-title {
  font-size: 0.65rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-mobile-report-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-mobile-appbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.site-mobile-sections-btn {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 0.25rem var(--spacing-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.site-mobile-auth-link {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.site-mobile-auth-link--muted {
  color: var(--text-muted);
  opacity: 0.85;
}

.site-mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav-backdrop);
  background: rgba(0, 0, 0, 0.45);
}

.site-mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(20rem, 92vw);
  min-height: 100dvh;
  z-index: var(--z-mobile-nav-drawer);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  padding: var(--spacing-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.site-mobile-nav-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--border);
}

.site-mobile-nav-close {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
}

.site-mobile-nav-drawer-brand {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.site-mobile-nav-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 var(--spacing-2);
}

.site-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-mobile-nav-list li {
  margin: 0;
}

.site-mobile-nav-link {
  display: block;
  padding: var(--spacing-3) var(--spacing-2);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}

.site-mobile-nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.site-mobile-nav-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--surface-2);
}

.site-mobile-nav-link.premium {
  color: var(--warning);
}

.site-mobile-nav-link.premium.active {
  color: var(--warning);
  border-left-color: var(--warning);
}

.site-mobile-nav-divider {
  height: 1px;
  margin: var(--spacing-2) 0;
  background: var(--border);
  list-style: none;
}

.site-mobile-nav-drawer-footer {
  margin-top: auto;
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--border);
}

.site-mobile-nav-user {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  word-break: break-all;
  margin: 0 0 var(--spacing-2);
}

.site-mobile-nav-logout {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.site-mobile-sections-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-sections-backdrop);
  background: rgba(0, 0, 0, 0.35);
}

.site-mobile-sections-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  z-index: var(--z-mobile-sections-panel);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-3) var(--spacing-4) calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  gap: var(--spacing-3);
}

.site-mobile-sections-handle {
  width: 2.5rem;
  height: 4px;
  margin: 0 auto var(--spacing-2);
  border-radius: 2px;
  background: var(--border-light);
}

.site-mobile-sections-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  margin: 0 0 var(--spacing-2);
}

.site-mobile-sections-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  overflow-y: auto;
  max-height: 45vh;
}

.site-mobile-sections-link {
  display: block;
  padding: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.site-mobile-sections-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.site-mobile-sections-link.active {
  color: var(--accent);
  border-color: var(--border);
  background: var(--surface-2);
  font-weight: var(--font-weight-medium);
}

.site-mobile-sections-close {
  margin-top: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 768px) {
  :root {
    --site-ticker-height: 2rem;
  }

  .site-desktop-only {
    display: none !important;
  }

  .site-mobile-only.site-mobile-appbar {
    display: flex !important;
  }

  .site-mobile-only.site-mobile-nav-backdrop:not([hidden]) {
    display: block !important;
  }

  .site-mobile-only.site-mobile-nav-drawer:not([hidden]) {
    display: flex !important;
    flex-direction: column;
  }

  .site-mobile-only.site-mobile-sections-backdrop:not([hidden]) {
    display: block !important;
  }

  .site-mobile-only.site-mobile-sections-panel:not([hidden]) {
    display: flex !important;
    flex-direction: column;
  }

  .main-content {
    margin-top: var(--spacing-4);
    padding: 0;
  }

  body.nav-collapsed .main-content {
    margin-top: var(--spacing-4);
  }
}

/* ===========================================
   MAIN CONTENT AREA
   =========================================== */

.main-content {
  /* Header stack spacing:
     - Ticker: 2rem (fixed, takes up space)
     - Primary nav: 3rem (sticky at top: 2rem)
     - Secondary nav: 2.5rem (sticky at top: 5rem) - only when visible
     - Context bar: 2.25rem (sticky at top: 7.5rem)
     - Total when all visible: 2 + 3 + 2.5 + 2.25 = 9.75rem
     - When secondary nav hidden: 2 + 3 + 2.25 = 7.25rem
     - Default to full stack, will be adjusted by JS or CSS when secondary nav is hidden
     - Note: Sticky elements don't push content, but fixed ticker does
  */
  margin-top: 1rem;
  padding: 0;
  z-index: var(--z-content);
  /* Let content determine height naturally - no forced min-height */
}

/* Dashboard pages: add comfortable side padding without affecting all pages by default */
.dashboard-main-content {
  padding-left: 0.5in;
  padding-right: 0.5in;
}

@media (max-width: 900px) {
  .dashboard-main-content {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}


/* Adjust content margin when nav is collapsed */
body.nav-collapsed .main-content {
  margin-top: 3.5rem; /* Ticker (2rem) + collapsed navs (1.5rem) */
}

/* Risk test: constrain and center main content (all risk test views: index, results) */
#risk-test-root .main-content {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Background Utilities */
.bg-positive-subtle { background: var(--positive-bg); }
.bg-negative-subtle { background: var(--negative-bg); }
.bg-warning-subtle { background: var(--warning-bg); }
.bg-info-subtle { background: var(--info-bg); }

/* Spacing Utilities */
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

/* ===========================================
   ACCESSIBILITY
   =========================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: var(--text);
    --border-light: var(--text);
  }
}

/* ===========================================
   CHART COLOR CLASSES
   For SVG elements and dynamic chart colors
   =========================================== */

/* Chart series colors (for SVG stroke/fill) */
/* Chart Series Color Classes - Map to 12-color palette */
.chart-series-1 { color: var(--color-1); }  /* Emerald */
.chart-series-2 { color: var(--color-2); }  /* Blue */
.chart-series-3 { color: var(--color-3); }  /* Purple */
.chart-series-4 { color: var(--color-4); }  /* Amber */
.chart-series-5 { color: var(--color-5); }  /* Pink */
.chart-series-6 { color: var(--color-6); }  /* Cyan */
.chart-series-7 { color: var(--color-7); }  /* Red */
.chart-series-8 { color: var(--color-4); }  /* Amber (was Orange) */
.chart-series-9 { color: var(--color-1); }  /* Emerald */
.chart-series-10 { color: var(--color-8); } /* Indigo */
.chart-series-11 { color: var(--color-4); } /* Amber (was Orange-500) */
.chart-series-12 { color: var(--color-9); } /* Teal */

/* ===========================================
   CHART INDICATOR TYPES
   Harmonized: 2 patterns (Spectrum Bar, Edge Bar)
   =========================================== */

/* Spectrum Bar - Market structure indicators */
.spectrum-bar {
  position: relative;
  height: 0.75rem;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}

.spectrum-bar-track {
  position: relative;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, var(--color-1) 0%, var(--color-4) 50%, var(--color-7) 100%);
  border-radius: var(--radius-sm);
}

.spectrum-bar-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-11); /* Slate */
  transform: translateX(-50%);
}

.spectrum-bar-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  /* Color set dynamically via style prop */
}

.spectrum-bar-label-cheap {
  color: var(--color-1); /* Emerald */
  font-size: var(--font-size-xs);
}

.spectrum-bar-label-rich {
  color: var(--color-4); /* Amber */
  font-size: var(--font-size-xs);
}

.spectrum-bar-market-value {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
}

.spectrum-bar-view-value {
  font-size: 0.625rem;
  font-family: var(--font-family-mono);
  /* Color set dynamically via style prop */
}

/* Edge Bar - Edge indicators */
.edge-bar {
  position: relative;
  height: 0.75rem;
  width: 5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}

.edge-bar-track {
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}

.edge-bar-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-11); /* Slate */
  transform: translateX(-50%);
}

.edge-bar-positive {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  background: var(--color-4); /* Amber */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  /* Width set dynamically */
}

.edge-bar-negative {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  background: var(--color-6); /* Cyan */
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  /* Width set dynamically */
}

/* Chart series backgrounds */
.bg-series-1 { background-color: var(--series-1); }
.bg-series-2 { background-color: var(--series-2); }
.bg-series-3 { background-color: var(--series-3); }
.bg-series-4 { background-color: var(--series-4); }
.bg-series-5 { background-color: var(--series-5); }
.bg-series-6 { background-color: var(--series-6); }
.bg-series-7 { background-color: var(--series-7); }
.bg-series-8 { background-color: var(--series-8); }
.bg-series-9 { background-color: var(--series-9); }
.bg-series-10 { background-color: var(--series-10); }
.bg-series-11 { background-color: var(--series-11); }
.bg-series-12 { background-color: var(--series-12); }

/* ===========================================
   MARKER CLASSES (for spectrum bars, indicators)
   =========================================== */

.marker-rich {
  background-color: var(--warning);
  color: var(--warning);
}

.marker-cheap {
  background-color: var(--info);
  color: var(--info);
}

.marker-neutral {
  background-color: var(--text-muted);
  color: var(--text-muted);
}

/* Marker variants for different intensities */
.marker-rich-intense {
  background-color: var(--series-8); /* Orange */
  color: var(--series-8);
}

.marker-cheap-intense {
  background-color: var(--series-6); /* Cyan */
  color: var(--series-6);
}

/* ===========================================
   SPECTRUM BAR COMPONENT
   =========================================== */

.spectrum-bar-track {
  position: relative;
  height: 0.5rem;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(var(--color-6-rgb), 0.15) 0%,
    var(--surface-3) 50%,
    rgba(var(--color-4-rgb), 0.15) 100%
  );
  border-radius: 9999px;
  overflow: visible;
}

.spectrum-bar-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--text-muted);
  left: 50%;
  transform: translateX(-50%);
}

.spectrum-bar-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: var(--shadow-md);
}

.spectrum-label-cheap {
  color: var(--info);
  opacity: 0.7;
  font-size: 0.625rem;
}

.spectrum-label-rich {
  color: var(--warning);
  opacity: 0.7;
  font-size: 0.625rem;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Text transform */
.text-uppercase {
  text-transform: uppercase;
}

/* Background patterns */
.bg-dashed-line {
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0,
    currentColor 3px,
    transparent 3px,
    transparent 5px
  );
}

/* Opacity utilities */
.opacity-25 { opacity: 0.25; }
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

/* Chart grid lines */
.chart-grid-line {
  stroke: var(--border);
  stroke-dasharray: 3, 3;
  opacity: 0.5;
}

.chart-axis-line {
  stroke: var(--border-light);
}

.chart-text-label {
  fill: var(--text-muted);
}

/* Chart semantic colors */
.chart-positive {
  stroke: var(--positive);
  fill: var(--positive);
}

.chart-negative {
  stroke: var(--negative);
  fill: var(--negative);
}

.chart-warning {
  stroke: var(--warning);
  fill: var(--warning);
}

.chart-info {
  stroke: var(--info);
  fill: var(--info);
}

/* ===========================================
   LINE STYLES (Charts/SVG)
   Harmonized: 4 base patterns with style modifiers
   =========================================== */

/* Line Grid - Grid lines (dashed, thin, muted) */
.line-grid {
  stroke: var(--color-11); /* Slate */
  stroke-width: 0.5;
  stroke-dasharray: 3, 3;
  opacity: 0.3;
}

/* Line Axis - Axis/border lines (solid, standard width) */
.line-axis {
  stroke: var(--color-11); /* Slate */
  stroke-width: 1;
  /* Solid line (no dasharray) */
}

/* Line Data - Data series lines (solid, medium width, color from palette) */
.line-data {
  stroke-width: 2;
  /* Color applied via color modifiers */
  fill: none;
}

/* Line Reference - Reference lines (dashed, medium width, color from palette) */
.line-reference {
  stroke-width: 1.5;
  stroke-dasharray: 5, 5;
  /* Color applied via color modifiers */
  fill: none;
}

/* Style Modifiers */
.line-dashed {
  stroke-dasharray: 3, 3;
}

.line-dashed-long {
  stroke-dasharray: 8, 4;
}

.line-thin {
  stroke-width: 0.5;
}

.line-medium {
  stroke-width: 1.5;
}

.line-thick {
  stroke-width: 2.5;
}

/* Line Color Modifiers - Use 12-color palette */
.line-color-1 { stroke: var(--color-1); fill: var(--color-1); }
.line-color-2 { stroke: var(--color-2); fill: var(--color-2); }
.line-color-3 { stroke: var(--color-3); fill: var(--color-3); }
.line-color-4 { stroke: var(--color-4); fill: var(--color-4); }
.line-color-5 { stroke: var(--color-5); fill: var(--color-5); }
.line-color-6 { stroke: var(--color-6); fill: var(--color-6); }
.line-color-7 { stroke: var(--color-7); fill: var(--color-7); }
.line-color-8 { stroke: var(--color-8); fill: var(--color-8); }
.line-color-9 { stroke: var(--color-9); fill: var(--color-9); }
.line-color-10 { stroke: var(--color-10); fill: var(--color-10); }
.line-color-11 { stroke: var(--color-11); fill: var(--color-11); }
.line-color-12 { stroke: var(--color-12); fill: var(--color-12); }

/* Line Opacity Modifiers */
.line-opacity-25 { opacity: 0.25; }
.line-opacity-50 { opacity: 0.5; }
.line-opacity-70 { opacity: 0.7; }
.line-opacity-80 { opacity: 0.8; }

/* ===========================================
   LOGO THEME SWITCHING
   =========================================== */

/* Dark mode: show dark logo, centered */
[data-theme="dark"] .logo-dark-mode {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

[data-theme="dark"] .logo-light-mode {
  display: none;
}

/* Light mode: show light logo, centered */
[data-theme="light"] .logo-light-mode {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

[data-theme="light"] .logo-dark-mode {
  display: none;
}

/* ===========================================
   TOOLTIPS
   Simple CSS-only tooltip pattern
   Works in both light and dark themes
   =========================================== */

.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: help;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) ease;
}

.tooltip-trigger:hover {
  color: var(--accent-hover);
}

.tooltip-trigger .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--surface);
  color: var(--text);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  white-space: normal;
  width: 240px;
  z-index: var(--z-tooltip);
  pointer-events: none;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease, visibility var(--duration-fast) ease;
  margin-bottom: var(--spacing-2);
}

.tooltip-trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip arrow (pointing down) */
.tooltip-trigger .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface);
  margin-top: -1px;
}

.tooltip-trigger .tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--border);
  margin-top: 0;
  z-index: -1;
}

/* Tooltip positioning variants */
.tooltip-trigger .tooltip.tooltip-right {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-8px);
}

.tooltip-trigger:hover .tooltip.tooltip-right {
  transform: translateX(0) translateY(0);
}

.tooltip-trigger .tooltip.tooltip-right::after,
.tooltip-trigger .tooltip.tooltip-right::before {
  left: auto;
  right: var(--spacing-3);
  transform: translateX(0);
}

.tooltip-trigger .tooltip.tooltip-left {
  left: 0;
  right: auto;
  transform: translateX(0) translateY(-8px);
}

.tooltip-trigger:hover .tooltip.tooltip-left {
  transform: translateX(0) translateY(0);
}

.tooltip-trigger .tooltip.tooltip-left::after,
.tooltip-trigger .tooltip.tooltip-left::before {
  left: var(--spacing-3);
  right: auto;
  transform: translateX(0);
}

.tooltip-trigger .tooltip.tooltip-bottom {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(8px);
  margin-bottom: 0;
  margin-top: var(--spacing-2);
}

.tooltip-trigger:hover .tooltip.tooltip-bottom {
  transform: translateX(-50%) translateY(0);
}

.tooltip-trigger .tooltip.tooltip-bottom::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--surface);
  margin-top: 0;
  margin-bottom: -1px;
}

.tooltip-trigger .tooltip.tooltip-bottom::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--border);
  margin-top: 0;
  margin-bottom: 0;
}

/* Wider tooltip variant */
.tooltip-trigger .tooltip.tooltip-wide {
  width: 320px;
}

/* Narrow tooltip variant */
.tooltip-trigger .tooltip.tooltip-narrow {
  width: 180px;
}

/* ===========================================
   MODAL / OVERLAY COMPONENTS
   For help modals, dialogs, overlays
   =========================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-5);
}

.modal-content {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  max-width: 800px;
  max-height: 90vh;
  overflow: auto;
  padding: var(--spacing-6);
  box-shadow: var(--shadow-xl);
}

/* Size override for the shared stock chart modal (tape20-stock-chart.js) */
.stk-chart-modal {
  max-width: 680px;
  width: 95%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-5);
}

.modal-title {
  font-size: var(--font-size-lg);
  color: var(--positive);
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) ease;
}

.modal-close-btn:hover {
  color: var(--text);
}

/* ===========================================
   ACCESS GATE TEASER PAGE
   Sales preview shown behind gated report modal
   =========================================== */

.access-teaser-page {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--spacing-8) var(--spacing-4);
}

.access-teaser-hero {
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.access-teaser-kicker {
  margin: 0 0 var(--spacing-3);
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-teaser-title {
  margin-bottom: var(--spacing-4);
}

.access-teaser-summary {
  max-width: 760px;
  margin: 0 auto var(--spacing-5);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.access-teaser-meta,
.access-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-3);
}

.access-teaser-meta {
  margin-bottom: var(--spacing-5);
}

.access-teaser-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full, 9999px);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-2) var(--spacing-3);
}

.access-teaser-pill--muted {
  color: var(--text-secondary);
}

.access-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.access-teaser-panel,
.access-teaser-best-for {
  padding: var(--spacing-6);
}

.access-teaser-panel-title {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-lg);
}

.access-teaser-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin: 0;
  padding-left: var(--spacing-5);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.access-teaser-list li::marker {
  color: var(--accent);
}

.access-teaser-best-for {
  border-color: var(--accent);
}

.access-teaser-best-for-copy {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 760px) {
  .access-teaser-page {
    padding: var(--spacing-5) var(--spacing-3);
  }

  .access-teaser-grid {
    grid-template-columns: 1fr;
  }

  .access-teaser-actions .btn {
    width: 100%;
  }
}

/* Promo Modal class — promotional overlays managed by modal-manager.js.
   System/generic modals (help, confirm, etc.) use .modal-overlay without this. */
.promo-modal .modal-content {
  max-width: 440px;
}

/* Promo Modal content styles */
.promo-description {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-relaxed);
}

/* Home — institutional strip (market making + advisory line) */
.home-institutional-mm-text {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  margin: 0;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.015em;
}

[data-theme="light"] .home-institutional-mm-text {
  color: var(--text);
}

/* Welcome page — Practitioner's Guide section: fixed 2×2 grid */
.welcome-vol-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

@media (max-width: 520px) {
  .welcome-vol-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* Home index — Client Difference / three pillars (violet outer card; bucket stripes = --portfolio-bucket-*) */
.home-client-experience.card {
  margin-bottom: var(--spacing-8);
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 2px solid var(--client-x-ring);
  background:
    radial-gradient(circle at 100% 0%, var(--client-x-glow) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(167, 139, 250, 0.12) 0%, transparent 42%),
    linear-gradient(180deg, var(--client-x-fill) 0%, var(--surface) 100%);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.12);
}

.home-client-experience.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--client-x-accent), var(--client-x-title));
  pointer-events: none;
}

/* Dark theme: deeper indigo base, weaker glow — less washed-out lavender on slate */
:root:not([data-theme="light"]) .home-client-experience.client-xp-scope.card {
  --client-x-ring: rgba(129, 140, 248, 0.28);
  --client-x-fill: rgba(30, 27, 75, 0.55);
  --client-x-glow: rgba(99, 102, 241, 0.1);
  --client-x-border-soft: rgba(99, 102, 241, 0.2);
  border-color: var(--client-x-ring);
  background:
    radial-gradient(circle at 92% 0%, var(--client-x-glow) 0%, transparent 42%),
    radial-gradient(circle at 8% 100%, rgba(79, 70, 229, 0.07) 0%, transparent 46%),
    linear-gradient(185deg, rgba(30, 27, 75, 0.5) 0%, var(--surface) 55%, var(--surface-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.14);
}

:root:not([data-theme="light"]) .home-client-experience.card::before {
  opacity: 0.85;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.75), rgba(129, 140, 248, 0.55));
}

:root:not([data-theme="light"]) .home-client-experience__lead,
:root:not([data-theme="light"]) .home-client-experience__sub {
  color: var(--text-secondary);
}

:root:not([data-theme="light"]) .home-client-experience__title {
  color: #c4b5fd;
}

:root:not([data-theme="light"]) .home-client-experience .home-pillar-row {
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.1);
}

.home-client-experience__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-2);
  margin-top: 0;
  color: var(--client-x-heading);
}
.home-client-experience__sub {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin: 0 auto var(--spacing-3) auto;
  max-width: 720px;
}
.home-client-experience__lead {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin: 0 auto var(--spacing-5) auto;
  max-width: 720px;
}
.home-client-experience__cta {
  margin-top: var(--spacing-5);
}
.home-client-experience__cta a {
  text-decoration: none;
  display: inline-block;
}
.home-pillar-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3);
  text-align: left;
}
@media (max-width: 768px) {
  .home-pillar-rows {
    grid-template-columns: 1fr;
  }
}
.home-pillar-row {
  padding: var(--spacing-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.1);
}
.home-pillar-row--core {
  border-left: 4px solid var(--portfolio-bucket-core);
  background: linear-gradient(
    155deg,
    rgba(var(--portfolio-bucket-core-rgb), 0.08) 0%,
    var(--surface) 65%
  );
}
.home-pillar-row--overlay {
  border-left: 4px solid var(--portfolio-bucket-overlay);
  background: linear-gradient(
    155deg,
    rgba(var(--portfolio-bucket-overlay-rgb), 0.09) 0%,
    var(--surface) 65%
  );
}
.home-pillar-row--capture {
  border-left: 4px solid var(--portfolio-bucket-capture);
  background: linear-gradient(
    155deg,
    rgba(var(--portfolio-bucket-capture-rgb), 0.1) 0%,
    var(--surface) 65%
  );
}
.home-pillar-body {
  min-width: 0;
}
.home-pillar-kicker {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-1) 0;
}
.home-pillar-kicker--core {
  color: var(--portfolio-bucket-core);
}
.home-pillar-kicker--overlay {
  color: var(--portfolio-bucket-overlay);
}
.home-pillar-kicker--capture {
  color: var(--portfolio-bucket-capture);
}

/* Home — Daily trading opportunities (aligned with portfolio buckets) */
.home-daily-opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}
.portfolio-bucket-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-md);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-2);
}
.portfolio-bucket-badge--core {
  background: rgba(var(--portfolio-bucket-core-rgb), 0.12);
  color: var(--portfolio-bucket-core);
  border: 1px solid rgba(var(--portfolio-bucket-core-rgb), 0.32);
}
.portfolio-bucket-badge--overlay {
  background: rgba(var(--portfolio-bucket-overlay-rgb), 0.14);
  color: var(--portfolio-bucket-overlay);
  border: 1px solid rgba(var(--portfolio-bucket-overlay-rgb), 0.35);
}
.portfolio-bucket-badge--capture {
  background: rgba(var(--portfolio-bucket-capture-rgb), 0.14);
  color: var(--portfolio-bucket-capture);
  border: 1px solid rgba(var(--portfolio-bucket-capture-rgb), 0.38);
}
.home-daily-opp-card {
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left-width: 4px;
}
.home-daily-opp-card--core {
  border-left-color: var(--portfolio-bucket-core);
  background: rgba(var(--portfolio-bucket-core-rgb), 0.065);
}
.home-daily-opp-card--overlay {
  border-left-color: var(--portfolio-bucket-overlay);
  background: rgba(var(--portfolio-bucket-overlay-rgb), 0.07);
}
.home-daily-opp-card--capture {
  border-left-color: var(--portfolio-bucket-capture);
  background: rgba(var(--portfolio-bucket-capture-rgb), 0.08);
}
.home-daily-opp-kicker {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}
.home-daily-opp-kicker--core {
  color: var(--portfolio-bucket-core);
}
.home-daily-opp-kicker--overlay {
  color: var(--portfolio-bucket-overlay);
}
.home-daily-opp-kicker--capture {
  color: var(--portfolio-bucket-capture);
}
.home-daily-opp-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text);
  margin-bottom: var(--spacing-2);
}
.home-daily-opp-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}
.home-daily-opp-card-actions {
  margin-top: var(--spacing-4);
}
.home-daily-opp-mini-btn {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  line-height: var(--line-height-tight);
  transition: filter var(--duration-fast) ease, background-color var(--duration-fast) ease;
}
.home-daily-opp-mini-btn:hover {
  filter: brightness(1.08);
}
.home-daily-opp-mini-btn--core {
  background: rgba(var(--portfolio-bucket-core-rgb), 0.16);
  color: var(--portfolio-bucket-core);
  border: 1px solid rgba(var(--portfolio-bucket-core-rgb), 0.42);
}
.home-daily-opp-mini-btn--overlay {
  background: rgba(var(--portfolio-bucket-overlay-rgb), 0.16);
  color: var(--portfolio-bucket-overlay);
  border: 1px solid rgba(var(--portfolio-bucket-overlay-rgb), 0.42);
}
.home-daily-opp-mini-btn--capture {
  background: rgba(var(--portfolio-bucket-capture-rgb), 0.18);
  color: var(--portfolio-bucket-capture);
  border: 1px solid rgba(var(--portfolio-bucket-capture-rgb), 0.45);
}

/* Home index — Stock Intel promo (mirrors Subscriber exclusive card, cyan accent) */
.home-cutting-edge-card {
  margin-bottom: var(--spacing-8);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-6);
}
.home-cutting-edge-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-6);
}
.home-cutting-edge-card__tag {
  margin: var(--spacing-2) 0 var(--spacing-2) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-6);
}

/* ========================================================================
   Advisory CTA blocks (/risk/results)
   Two equal-weight combo cards at top (Analyst first, Investor second),
   firmer sign/pay cards below. Escalates visually as users move down.
   ======================================================================== */
.advisory-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  margin-top: var(--spacing-6);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.advisory-cta-card {
  padding: var(--spacing-6);
}

.advisory-cta-escalate {
  border-left: 4px solid var(--warning);
}

.advisory-cta-urgent {
  border-left: 4px solid var(--accent);
}

.advisory-combo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

.advisory-combo-option {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.advisory-combo-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.advisory-combo-detail {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  flex: 1;
}

.advisory-combo-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--border);
}

.advisory-combo-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-sm);
  color: var(--text);
}

.advisory-combo-price-row-label {
  color: var(--text-secondary);
}

.advisory-combo-price-row-value {
  font-weight: var(--font-weight-semibold);
}

.advisory-combo-price-note {
  font-size: var(--font-size-sm);
  color: var(--warning);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  margin-top: var(--spacing-1);
}

/* "+ Advice" tag that follows the base-tier name in the price row */
.advisory-combo-plus-advice {
  display: inline-block;
  margin-left: var(--spacing-2);
  padding: 2px var(--spacing-2);
  background: var(--accent);
  color: #020617;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Two-bubble pricing row: one pill for each line item, e.g. the base tier
   ("Analyst: $79/month") alongside the advice overlay ("Advice: $99/month"). */
.advisory-combo-price-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.advisory-combo-price-bubble {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--accent);
  color: #020617;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.advisory-combo-price-bubble-label {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.advisory-combo-price-bubble-value {
  font-size: var(--font-size-sm);
}

/* Accent "+" separator between two price bubbles. */
.advisory-combo-price-bubble-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  line-height: 1;
  padding: 0 var(--spacing-1);
  user-select: none;
}

/* Advice hero bubble — sits above the combo grid to foreground the advice value */
.advisory-advice-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #020617;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
  box-shadow: var(--shadow-md);
}

.advisory-advice-hero-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
}

.advisory-advice-hero-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .advisory-advice-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
  }
}

.advisory-combo-btn {
  width: 100%;
  text-align: center;
  padding: var(--spacing-3);
  border: none;
  cursor: pointer;
}

.advisory-combo-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Two-button row for monthly / annual selections inside a combo card. */
.advisory-combo-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
}

.advisory-combo-buttons--single {
  grid-template-columns: 1fr;
}

@media (max-width: 520px) {
  .advisory-combo-buttons {
    grid-template-columns: 1fr;
  }
}

/* Small clarifier line: "Advice is always billed monthly..." */
.advisory-billing-note {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--spacing-3);
  line-height: var(--line-height-relaxed);
}

/* Compact single-line callout explaining the two-step annual billing flow. */
.advisory-annual-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  margin-top: var(--spacing-3);
  background: var(--surface-2);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-xs);
}

.advisory-annual-disclosure-icon {
  flex: 0 0 auto;
  color: var(--warning);
  font-weight: var(--font-weight-bold);
  line-height: inherit;
}

/* Big single CTA under the advice hero when the agreement isn't signed yet. */
.advisory-sign-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--spacing-4);
  font-size: var(--font-size-lg);
  text-decoration: none;
}

.promo-code-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-5);
  text-align: center;
}

.promo-code-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-1);
}

.promo-code-value {
  color: var(--positive);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}

.promo-code-detail {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-1);
}

.promo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  align-items: center;
}

.promo-actions .btn-primary {
  width: 100%;
}

.promo-dismiss-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--spacing-2);
  transition: color var(--duration-fast) ease;
}

.promo-dismiss-btn:hover {
  color: var(--text);
}

.modal-body {
  font-size: var(--font-size-sm);
  color: var(--text);
  line-height: var(--line-height-relaxed);
}

/* ===========================================
   INFO BOX / ALERT BOX COMPONENTS
   For highlighted information, warnings, tips
   =========================================== */

.info-box {
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-3);
  background: var(--positive-bg);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--positive);
}

.info-box-warning {
  background: var(--warning-bg);
  border-left-color: var(--warning);
}

.info-box-info {
  background: var(--info-bg);
  border-left-color: var(--info);
}

.info-box-negative {
  background: var(--negative-bg);
  border-left-color: var(--negative);
}

.info-box-code {
  background: rgba(var(--surface-2-rgb), 0.7);
  padding: var(--spacing-2.5);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

/* ===========================================
   TAB NAVIGATION (for React apps)
   Horizontal tab bar with active state
   =========================================== */

.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--spacing-4);
  overflow-x: auto;
}

.tab-button {
  padding: var(--spacing-2) var(--spacing-4);
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
  font-family: var(--font-family-base);
}

.tab-button:hover {
  background: rgba(var(--surface-2-rgb), 0.5);
  color: var(--text-secondary);
}

.tab-button.active {
  background: var(--surface-2);
  color: var(--positive);
  border-bottom-color: var(--positive);
}

/* Tab theme variants (for accent colors) */
.tab-button.active.tab-theme-blue {
  color: var(--color-6);
  border-bottom-color: var(--color-6);
}

.tab-button.active.tab-theme-amber {
  color: var(--color-4);
  border-bottom-color: var(--color-4);
}

.tab-button.active.tab-theme-green {
  color: var(--color-1);
  border-bottom-color: var(--color-1);
}

/* ===========================================
   GRADIENT BACKGROUNDS
   For main containers with gradient backgrounds
   =========================================== */

.bg-gradient-main {
  min-height: 100vh;
  background: linear-gradient(145deg, var(--bg) 0%, var(--surface) 50%, var(--bg) 100%);
  color: var(--text);
  font-family: var(--font-family-base);
  padding: var(--spacing-5);
}

.bg-gradient-modal {
  background: linear-gradient(145deg, var(--surface-2) 0%, var(--surface) 100%);
}

/* ===========================================
   CODE BLOCK STYLING
   For inline code and code blocks
   =========================================== */

.code-inline {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--positive);
  background: rgba(var(--surface-2-rgb), 0.5);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
}

.code-block {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--positive);
  background: rgba(var(--surface-2-rgb), 0.7);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  line-height: var(--line-height-relaxed);
  overflow-x: auto;
}

/* ===========================================
   SUMMARY STATS BLOCK (universal strategy stats)
   Reusable across backtest/strategy reports
   =========================================== */

.summary-stats-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.summary-stats-block--compact {
  padding: var(--spacing-2);
}

.summary-stats-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-3);
  font-family: var(--font-family-base);
}

.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--spacing-3) var(--spacing-6);
}

.summary-stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0.5);
}

.summary-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: var(--font-family-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.summary-stat-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-family-mono);
  color: var(--text);
}

.summary-stat-value--positive {
  color: var(--positive);
}

.summary-stat-value--negative {
  color: var(--negative);
}

.summary-stat-placeholder {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

/* ===========================================
   BACKTEST CARDS
   Standardized 3-column layout for backtest list items
   =========================================== */

/* Backtest Card - Main container with 3-column grid */
.backtest-card {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: var(--spacing-6);
  padding: var(--spacing-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: var(--spacing-4);
  transition: box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

.backtest-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Backtest Card Columns */
.backtest-card-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.backtest-card-params {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.backtest-card-performance {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Backtest Card Column Titles */
.backtest-card-title {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

/* Backtest Card Actions Row */
.backtest-card-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--border);
}

/* Backtest Name (clickable to rename) */
.backtest-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) ease;
}

.backtest-name:hover {
  color: var(--accent);
}

/* Performance Metric Display */
.backtest-metric {
  display: flex;
  flex-direction: column;
}

.backtest-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-1);
}

.backtest-metric-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}

.backtest-metric-value--large {
  font-size: var(--font-size-xl);
}

.backtest-metric-value--medium {
  font-size: var(--font-size-lg);
}

.backtest-metric-value--positive {
  color: var(--positive);
}

.backtest-metric-value--negative {
  color: var(--negative);
}

/* Parameters Grid */
.backtest-params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
}

.backtest-param-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.backtest-param-label {
  color: var(--text-muted);
}

.backtest-param-value {
  color: var(--text);
  font-weight: var(--font-weight-semibold);
}

/* ===========================================
   SCREENSHOT GALLERY
   Lightweight horizontal scrolling gallery
   =========================================== */

.screenshot-gallery-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.screenshot-gallery {
  display: flex;
  gap: var(--spacing-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-2);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.screenshot-gallery::-webkit-scrollbar {
  height: 8px;
}

.screenshot-gallery::-webkit-scrollbar-track {
  background: transparent;
}

.screenshot-gallery::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
}

.screenshot-gallery::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.screenshot-gallery-item {
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  scroll-snap-align: start;
  text-align: center;
}

.screenshot-gallery-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: block;
  background: var(--surface);
}

.screenshot-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  opacity: 0.7;
  transition: opacity var(--duration-fast) ease, background var(--duration-fast) ease;
  z-index: 10;
}

.screenshot-gallery-nav:hover {
  opacity: 1;
  background: var(--surface-2);
}

.screenshot-gallery-nav:active {
  opacity: 0.9;
}

.screenshot-gallery-nav--prev {
  left: var(--spacing-4);
}

.screenshot-gallery-nav--next {
  right: var(--spacing-4);
}

.screenshot-gallery-nav--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.screenshot-gallery-hint {
  text-align: center;
  margin-bottom: var(--spacing-4);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* ===========================================
   PRIVATE CLIENT HERO (splash / landing)
   =========================================== */
.private-client-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-4);
  text-align: center;
}
.private-client-hero .hero-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0 0 var(--spacing-6);
  letter-spacing: -0.02em;
}
.private-client-hero .hero-lead {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  max-width: 680px;
  margin: 0 auto var(--spacing-6);
}
.private-client-hero .accent {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
}
.private-client-hero .value-block {
  text-align: left;
  max-width: 640px;
  margin: 0 auto var(--spacing-6);
  padding: var(--spacing-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.private-client-hero .value-block .value-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--accent);
  margin: 0 0 var(--spacing-2);
}
.private-client-hero .value-block .value-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.private-client-hero .hero-cta {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: var(--spacing-8) auto 0;
  max-width: 640px;
}
.private-client-hero .hero-cta .cta-link {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.private-client-hero .hero-cta .cta-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
.private-client-hero .tagline {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--accent);
  margin: var(--spacing-4) auto;
  max-width: 640px;
}

/* ── Portfolio Recommendation ──────────────────────────────────────────────── */

.risk-badge-row {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-4);
}

.risk-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  min-width: 110px;
  flex: 1;
}

.risk-badge__dim {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.risk-badge__level {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: capitalize;
}

.risk-badge--low    .risk-badge__level { color: var(--text-secondary); }
.risk-badge--medium .risk-badge__level { color: var(--color-warning, #f59e0b); }
.risk-badge--high   .risk-badge__level { color: var(--accent); }

.portfolio-size-row {
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.portfolio-size-row .input-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 160px;
}

.portfolio-size-row label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.alloc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.alloc-table th {
  text-align: left;
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.alloc-table td {
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: middle;
}

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

.alloc-table .alloc-sub td {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  color: var(--text-secondary);
}

.alloc-table .alloc-sub .alloc-name { padding-left: var(--spacing-6); }

.alloc-bar-track {
  background: var(--surface-3, var(--surface-2));
  border-radius: var(--radius-full, 999px);
  height: 8px;
  width: 120px;
  overflow: hidden;
}

.alloc-bar-fill {
  height: 100%;
  border-radius: var(--radius-full, 999px);
  background: var(--accent);
  transition: width 0.4s ease;
}

.alloc-bar-fill--moderate  { background: var(--color-warning, #f59e0b); }
.alloc-bar-fill--active    { background: var(--color-danger,  #ef4444); }
.alloc-bar-fill--overlay   { background: var(--text-muted); }

.strategy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

.strategy-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  background: var(--surface-1, var(--surface));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.strategy-card--excluded {
  opacity: 0.55;
  background: var(--surface-2);
}

.strategy-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.strategy-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.strategy-card__badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-full, 999px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.strategy-card__badge--included {
  background: var(--accent);
  color: var(--bg);
}

.strategy-card__badge--excluded {
  background: var(--surface-3, var(--surface-2));
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.strategy-card__pct {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--accent);
  line-height: 1;
}

.strategy-card__amount {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.strategy-card__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.strategy-card__gate {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  border-top: 1px solid var(--border);
  padding-top: var(--spacing-2);
  margin-top: var(--spacing-1);
}

.portfolio-rationale {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  padding: var(--spacing-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}

/* ===========================================
   TILL — SUBSTACK BLOG FEED
   =========================================== */

/* Page wrapper */
.till-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Reusable section label (green all-caps eyebrow) */
.till-section-label {
  font-size: var(--font-size-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-1) 0;
}

/* Page intro block */
.till-intro {
  margin-bottom: var(--spacing-2);
}

.till-intro__title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-2);
  letter-spacing: -0.02em;
}

.till-intro__desc {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  max-width: 600px;
}

.till-byline-link {
  color: var(--accent);
  text-decoration: none;
}

.till-byline-link:hover {
  color: var(--link-hover);
}

/* Shared "Read the full article →" link */
.till-read-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast);
  margin-top: var(--spacing-1);
}

.till-read-link::after {
  content: ' →';
}

.till-read-link:hover {
  color: var(--link-hover);
}

/* ── Featured post (latest[0]) ── */
.till-featured {
  overflow: hidden;
  padding: 0;
}

.till-featured__image {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}

.till-featured__content {
  padding: var(--spacing-6);
}

.till-featured__meta {
  font-size: var(--font-size-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-3);
}

.till-featured__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-3);
}

.till-featured__lead {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  margin-bottom: var(--spacing-4);
}

.till-featured__preview {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  white-space: pre-line;
  margin: 0 0 var(--spacing-5) 0;
  padding-left: var(--spacing-4);
  border-left: 2px solid var(--border-light);
}

/* Expand / collapse block */
.till-expand {
  margin-bottom: var(--spacing-2);
}

.till-expand__toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: var(--spacing-2) 0;
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Hide default marker in all browsers */
.till-expand__toggle::-webkit-details-marker { display: none; }
.till-expand__toggle::marker { display: none; }

.till-expand__toggle:hover {
  color: var(--link-hover);
}

.till-expand__label {
  flex: 1;
}

.till-expand__icon {
  transition: transform var(--duration-fast);
  display: inline-block;
}

.till-expand[open] .till-expand__icon {
  transform: rotate(180deg);
}

.till-expand__body {
  padding-top: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* ── Format B (second latest, horizontal) ── */
.till-format-b {
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  padding: 0;
  min-height: 180px;
}

@media (max-width: 580px) {
  .till-format-b {
    grid-template-columns: 1fr;
  }
}

.till-format-b__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-right: 1px solid var(--border);
}

@media (max-width: 580px) {
  .till-format-b__image {
    aspect-ratio: 16 / 7;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

.till-format-b__content {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
}

.till-format-b__meta {
  font-size: var(--font-size-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-2);
}

.till-format-b__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-2);
}

.till-format-b__snippet {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  flex: 1;
  margin-bottom: var(--spacing-4);
}

/* ── Favorites section ── */
.till-favorites-header {
  margin-bottom: var(--spacing-2);
}

.till-favorites-header__title {
  margin: 0;
}

.till-favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-4);
}

/* ── Post card (Format B grid tile) ── */
.till-post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-fast);
}

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

.till-post-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}

.till-post-card__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  border-bottom: 1px solid var(--border);
}

.till-post-card__content {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.till-post-card__meta {
  font-size: var(--font-size-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-2);
}

.till-post-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-2);
}

.till-post-card__snippet {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  flex: 1;
  margin-bottom: var(--spacing-3);
}

/* ── Empty state ── */
.till-empty {
  text-align: center;
  padding: var(--spacing-16) var(--spacing-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.till-empty__icon {
  font-size: var(--font-size-2xl);
  color: var(--text-muted);
  font-family: var(--font-family-mono);
}

.till-empty__message {
  font-size: var(--font-size-base);
  color: var(--text-muted);
}

/* ── Footer CTA ── */
.till-substack-cta {
  text-align: center;
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.till-substack-cta__text {
  color: var(--text-muted);
  max-width: 480px;
}

.till-substack-cta__btn {
  text-decoration: none;
}

/* ===========================================
   STRIKE FINDER (dashboard)
   =========================================== */

.strike-finder-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-4);
  padding-bottom: var(--spacing-8);
}

.strike-finder-page .sf-intro {
  color: var(--text-muted);
  margin-bottom: var(--spacing-4);
  max-width: 72ch;
  line-height: var(--line-height-relaxed);
}

.strike-finder-page .sf-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
  color: var(--text);
}

.strike-finder-page .sf-card {
  margin-bottom: var(--spacing-4);
}

.strike-finder-page .sf-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  align-items: flex-end;
}

.strike-finder-page .sf-load-btn {
  margin-bottom: var(--spacing-1);
}

.strike-finder-page .sf-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}

.strike-finder-page .sf-field--wide {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .strike-finder-page .sf-field--wide {
    grid-column: span 1;
  }
}

.strike-finder-page .sf-field--check {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
}

.strike-finder-page .sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-4);
}

.strike-finder-page .sf-grid--chart-controls {
  margin-bottom: var(--spacing-4);
}

.strike-finder-page .sf-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Match select and number input height (dropdowns vs DTE / target fields) */
.strike-finder-page .sf-input,
.strike-finder-page .sf-select {
  box-sizing: border-box;
  min-height: 2.75rem;
  line-height: 1.35;
}

.strike-finder-page .sf-select {
  appearance: auto;
}

.strike-finder-page .sf-check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--text);
  cursor: pointer;
}

.strike-finder-page .sf-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.strike-finder-page .sf-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.strike-finder-page .sf-3d-controls {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-2);
}

.strike-finder-page .sf-main {
  margin-top: var(--spacing-2);
}

.strike-finder-page .sf-status {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  min-height: 1.25em;
}

.strike-finder-page .sf-status--error {
  color: var(--negative);
}

.strike-finder-page .sf-summary {
  margin-bottom: var(--spacing-4);
}

.strike-finder-page .sf-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
}

.strike-finder-page .sf-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-4);
}

.strike-finder-page .sf-lede {
  margin: var(--spacing-2) 0;
  color: var(--text);
}

.strike-finder-page .sf-note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--spacing-2);
}

.strike-finder-page .sf-hint {
  font-size: var(--font-size-sm);
  color: var(--accent);
  margin: var(--spacing-2) 0;
}

.strike-finder-page .sf-chart {
  width: 100%;
  min-height: 420px;
  margin-top: var(--spacing-3);
}

.strike-finder-page .sf-chart--3d {
  min-height: 520px;
}

.strike-finder-page .sf-chart--opt {
  min-height: 360px;
}

/* ===========================================
   News Generator
   =========================================== */

.news-generator-page {
  display: grid;
  gap: var(--spacing-6);
  padding-left: 0.5in;
  padding-right: 0.5in;
}

.news-generator-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--spacing-6);
  /* Match .news-generator-page so My Reports (#reports) has the same side inset as Request Report */
  padding-left: 0.5in;
  padding-right: 0.5in;
}

.news-generator-grid > .card,
.news-generator-detail-card {
  min-width: 0;
}

.news-generator-detail-card {
  max-width: 100%;
  overflow: hidden;
}

.news-generator-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-4);
}

.news-generator-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  background: var(--surface-2);
  cursor: pointer;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}

.news-generator-option:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.news-generator-option.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--focus-ring);
}

.news-generator-option-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.news-generator-option-copy {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.news-generator-form {
  display: grid;
  gap: var(--spacing-4);
}

.news-generator-status {
  min-height: 1.5rem;
  color: var(--text-muted);
}

.news-generator-status.is-error {
  color: var(--negative);
}

.news-generator-status.is-success {
  color: var(--positive);
}

.news-generator-report-list {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.news-generator-report-list--scroll {
  max-height: 26rem;
  overflow-y: auto;
  padding-right: var(--spacing-1);
  scrollbar-gutter: stable;
}

.news-generator-report-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}

.news-generator-report-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.news-generator-report-meta {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.news-generator-report-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.news-generator-report-ticker {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
}

.news-generator-report-title {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.news-generator-report-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  white-space: nowrap;
}

.news-generator-report-status.status-completed {
  border-color: var(--positive);
  color: var(--positive);
}

.news-generator-report-status.status-running,
.news-generator-report-status.status-pending {
  border-color: var(--warning);
  color: var(--warning);
}

.news-generator-report-status.status-failed {
  border-color: var(--negative);
  color: var(--negative);
}

.news-generator-detail-header {
  margin-bottom: var(--spacing-5);
}

.news-generator-detail-title {
  margin: 0;
  min-width: 0;
}

.news-generator-reader-header {
  display: grid;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--border);
}

.news-generator-reader-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-width: 0;
}

.news-generator-report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--spacing-2) * 1.2);
  flex-shrink: 0;
}

.news-generator-report-action {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing-1) * 1.2);
  font-size: calc(var(--font-size-xs) * 1.2);
  padding: calc(var(--spacing-1) * 1.2) calc(var(--spacing-3) * 1.2);
  white-space: nowrap;
}

.news-generator-action-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: currentColor;
}

.news-generator-report-action svg.news-generator-action-icon {
  width: calc(13px * 1.2);
  height: calc(13px * 1.2);
}

.news-generator-action-dollar {
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.news-generator-reader-meta {
  display: grid;
  gap: var(--spacing-1);
}

.news-generator-reader-meta-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--spacing-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.news-generator-reader-meta-label {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.news-generator-detail-placeholder-title {
  margin-bottom: var(--spacing-3);
}

.news-generator-report-body {
  display: grid;
  gap: var(--spacing-5);
  max-width: 100%;
  min-width: 0;
  inline-size: 100%;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.news-generator-report-body section,
.news-generator-report-body p,
.news-generator-report-body ul,
.news-generator-report-body li {
  max-width: 100%;
  min-width: 0;
  inline-size: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.news-generator-report-body p,
.news-generator-report-body li {
  overflow: hidden;
}

.news-generator-report-body--detail {
  margin-top: var(--spacing-1);
}

.news-generator-list {
  margin: 0;
  padding-left: var(--spacing-5);
  list-style: disc outside;
}

.news-generator-numbered-list {
  list-style: decimal outside;
}

.news-generator-list li {
  padding-left: var(--spacing-1);
}

.news-generator-report-body .news-generator-list.text-body li:not(:last-child) {
  margin-bottom: var(--spacing-2);
}

.news-generator-text-link,
.news-generator-report-body a {
  color: var(--accent);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.news-generator-term {
  color: var(--text);
  border-bottom: 1px dotted var(--accent);
  cursor: help;
  text-decoration: none;
  background: rgba(var(--surface-2-rgb), 0.45);
  border-radius: var(--radius-sm);
  padding: 0 0.12em;
}

.news-generator-report-appendix {
  display: grid;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.news-generator-report-appendix .header-3 {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.news-generator-report-appendix .text-body,
.news-generator-report-appendix .news-generator-list {
  font-size: var(--font-size-sm);
}

.news-generator-evidence-table {
  table-layout: fixed;
}

.news-generator-evidence-table th,
.news-generator-evidence-table td {
  padding: var(--spacing-2) !important;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}

.news-generator-evidence-table th:nth-child(1),
.news-generator-evidence-table td:nth-child(1) {
  width: 82%;
}

.news-generator-evidence-table th:nth-child(2),
.news-generator-evidence-table td:nth-child(2) {
  width: 18%;
}

.news-generator-evidence-link {
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.news-generator-evidence-link:hover {
  text-decoration: underline;
}

.news-generator-evidence-source {
  margin-top: var(--spacing-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.news-generator-hero {
  display: grid;
  gap: var(--spacing-4);
}

.news-generator-kicker {
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-generator-hero-copy {
  color: var(--text-secondary);
  max-width: 920px;
  line-height: var(--line-height-relaxed);
}

.news-generator-hero-action {
  justify-self: start;
  margin-top: var(--spacing-2);
}

.news-generator-feature-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.news-generator-step-card {
  display: grid;
  gap: var(--spacing-4);
}

.news-generator-tier {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.news-generator-tier-label {
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

.news-generator-ticker-input {
  max-width: 260px;
}

.news-generator-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.news-generator-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.news-generator-chip:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.news-generator-submit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.news-generator-usage {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.news-generator-my-reports-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.news-generator-my-reports-title {
  margin-bottom: 0;
}

.news-generator-my-reports-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.news-generator-retention-note {
  font-size: var(--font-size-sm);
  max-width: 22rem;
  line-height: 1.4;
}

.news-generator-quota-section {
  margin-bottom: var(--spacing-2);
}

.news-generator-load-bar-wrap {
  width: 100%;
  margin: var(--spacing-1) 0 var(--spacing-2);
}

.news-generator-quota-section .news-generator-load-bar-wrap:last-child {
  margin-bottom: 0;
}

.news-generator-report-list-progress {
  width: 100%;
  padding-bottom: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.news-generator-report-list-progress .news-generator-load-bar-wrap {
  margin-bottom: 0;
}

.news-generator-quota-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2) var(--spacing-4);
  margin-bottom: var(--spacing-2);
}

.news-generator-quota-head .news-generator-quota-title {
  margin-bottom: 0;
}

.news-generator-quota-access-note {
  margin: 0;
  font-size: var(--font-size-sm);
  flex: 1 1 auto;
  min-width: min(100%, 14rem);
  text-align: right;
  line-height: var(--line-height-relaxed);
}

@media (max-width: 640px) {
  .news-generator-quota-access-note {
    text-align: left;
    flex-basis: 100%;
  }
}

.news-generator-quota-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--spacing-2);
}

.news-generator-quota-bubbles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}

.news-generator-quota-bubble {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.news-generator-quota-bubble--empty {
  background: transparent;
  border: 1.5px solid var(--border-light);
}

.news-generator-quota-bubble--filled {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
}

.news-generator-flow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-top: var(--spacing-4);
}

.news-generator-flow-step {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--text);
}

.news-generator-flow-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2.5rem;
  color: var(--accent);
  font-weight: 600;
  user-select: none;
}

.news-generator-flow-arrow::before {
  content: "\2192";
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .news-generator-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .news-generator-flow-arrow {
    width: 100%;
    min-height: auto;
    padding: var(--spacing-1) 0;
  }

  .news-generator-flow-arrow::before {
    content: "\2193";
  }
}

.news-generator-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: var(--spacing-4);
}

.news-generator-modal-card {
  max-width: 460px;
  width: 100%;
  padding: var(--spacing-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  text-align: center;
}

@media (max-width: 900px) {
  .news-generator-page {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .news-generator-grid {
    grid-template-columns: 1fr;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .news-generator-reader-topline {
    flex-direction: column;
  }

  .news-generator-report-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .news-generator-reader-meta-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ===========================================
   PORTFOLIO SIZING TAB
   Used by: Expensive Puts, Expensive Calls,
   Premium Condors screeners. See
   webapp/static/js/portfolio_sizing.js.
   =========================================== */

.portfolio-sizing-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.portfolio-sizing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-3);
}

.portfolio-sizing-subtitle {
  margin: var(--spacing-1) 0 0 0;
}

.portfolio-sizing-strategy-row,
.portfolio-sizing-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.portfolio-sizing-strategy-row .btn-secondary.is-active,
.portfolio-sizing-mode-row .btn-secondary.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.portfolio-sizing-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.portfolio-sizing-override-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--border);
}

.portfolio-sizing-override-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  user-select: none;
}

.portfolio-sizing-override-input {
  max-width: 12rem;
}

.portfolio-sizing-table-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-2);
}

.portfolio-sizing-table-wrap {
  overflow-x: auto;
}

.portfolio-sizing-footnote {
  margin-top: var(--spacing-3);
  margin-bottom: 0;
  line-height: var(--line-height-relaxed);
}

.portfolio-sizing-cta-row {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-top: var(--spacing-3);
}

.portfolio-sizing-gate,
.portfolio-sizing-setup,
.portfolio-sizing-error,
.portfolio-sizing-loading {
  /* No additional rules — base .card supplies the look. */
}

/* Row-selection checkbox shared by the Edge screener Report tabs.
 * The column itself is a sticky frozen-col-select (see frozen-col rules above);
 * this rule only styles the input element. */
.screener-row-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* Premium-accented context bar tabs (Trade Advice, Portfolio Sizing).
 * Uses the same warm/orange tone as .secondary-nav-link.premium so the two
 * surfaces feel consistent. */
.context-bar-tab.premium {
  color: var(--warning);
}

.context-bar-tab.premium:hover {
  color: var(--warning);
  background-color: var(--warning-bg);
}

.context-bar-tab.premium.active {
  color: var(--warning);
  border-bottom-color: var(--warning);
  font-weight: var(--font-weight-medium);
}

/* --- /follow Harvested Financial embed (home/_base + full site chrome) --- */
.follow-embed-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-4);
}

.follow-embed-card {
  overflow: hidden;
}

.follow-widget-iframe {
  display: block;
  width: 100%;
  min-height: 75vh;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

/* Dashboard — Community (Slack): Analyst / Investor gate */
.slack-community-locked {
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
  color: var(--text-muted);
}