/* ==========================================================================
   METRICS PANEL v6.2 (PREMIUM TOOLTIPS) - Premium Fintech Dashboard
   
   File: /css/metrics-panel.css
   
   Features:
   - Hero stats bar with glow effects
   - Top navigation with centered tabs
   - Rating pills with color coding
   - Progress bars with benchmark markers
   - Smart tooltips
   - Dark mode support
   - Responsive design
   ========================================================================== */

/* ==========================================================================
   CSS VARIABLES - Light Theme (Default)
   ========================================================================== */
.metrics-panel {
  /* Base colors */
  --mp-bg: #ffffff;
  --mp-bg-subtle: #f8fafc;
  --mp-bg-muted: #f1f5f9;
  --mp-text: #0f172a;
  --mp-text-secondary: #475569;
  --mp-muted: #64748b;
  --mp-border: #e2e8f0;
  --mp-border-subtle: #f1f5f9;
  
  /* Accent colors */
  --mp-accent: #3b82f6;
  --mp-accent-hover: #2563eb;
  --mp-accent-subtle: rgba(59, 130, 246, 0.1);
  
  /* Rating colors */
  --mp-excellent: #10b981;
  --mp-excellent-bg: rgba(16, 185, 129, 0.1);
  --mp-good: #22c55e;
  --mp-good-bg: rgba(34, 197, 94, 0.1);
  --mp-average: #f59e0b;
  --mp-average-bg: rgba(245, 158, 11, 0.1);
  --mp-below: #f97316;
  --mp-below-bg: rgba(249, 115, 22, 0.1);
  --mp-poor: #ef4444;
  --mp-poor-bg: rgba(239, 68, 68, 0.1);
  
  /* Semantic colors */
  --mp-positive: #10b981;
  --mp-positive-bg: rgba(16, 185, 129, 0.1);
  --mp-negative: #ef4444;
  --mp-negative-bg: rgba(239, 68, 68, 0.1);
  
  /* Shadows */
  --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --mp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --mp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Relationship cards (light theme guides) */
  --rel-guide-line: rgba(15, 23, 42, 0.06);
  --rel-guide-line-strong: rgba(15, 23, 42, 0.10);
  --rel-guide-fill: rgba(15, 23, 42, 0.015);
  --rel-guide-fill-strong: rgba(15, 23, 42, 0.025);
  --rel-guide-text: rgba(15, 23, 42, 0.46);



  --rel-surface: rgba(15, 23, 42, 0.035);
  --rel-surface-border: rgba(15, 23, 42, 0.10);
  --rel-chip-bg: rgba(15, 23, 42, 0.045);
  --rel-chip-border: rgba(15, 23, 42, 0.12);
  
  /* Spacing */

  --mp-radius: 8px;
  --mp-radius-lg: 12px;
  --mp-radius-xl: 16px;
  
  /* Typography */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
.metrics-panel.mp-theme-dark {
  --mp-bg: #0f172a;
  --mp-bg-subtle: #1e293b;
  --mp-bg-muted: #334155;
  --mp-text: #f8fafc;
  --mp-text-secondary: #cbd5e1;
  --mp-muted: #94a3b8;
  --mp-border: #334155;
  --mp-border-subtle: #1e293b;
  
  --mp-accent: #60a5fa;
  --mp-accent-hover: #3b82f6;
  --mp-accent-subtle: rgba(96, 165, 250, 0.15);
  
  --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --mp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --mp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

  /* Relationship cards (dark theme guides) */
  --rel-guide-line: rgba(255, 255, 255, 0.06);
  --rel-guide-line-strong: rgba(255, 255, 255, 0.10);
  --rel-guide-fill: rgba(255, 255, 255, 0.015);
  --rel-guide-fill-strong: rgba(255, 255, 255, 0.025);
  --rel-guide-text: rgba(255, 255, 255, 0.62);


  --rel-surface: rgba(255, 255, 255, 0.04);
  --rel-surface-border: rgba(255, 255, 255, 0.12);
  --rel-chip-bg: rgba(255, 255, 255, 0.06);
  --rel-chip-border: rgba(255, 255, 255, 0.14);
}


/* Neutral metric styling - dark mode adjustments */
.metrics-panel.mp-theme-dark .metric-rating-pill.neutral {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.metrics-panel.mp-theme-dark .metric-value.neutral {
  color: #94a3b8;
}

/* Target-absolute direction (closer to a target is better) */
.metric-direction.target-abs {
  color: #6366f1;
}
.metric-direction.target-abs::before {
  content: '◎ ';
}

.metric-direction.neutral {
  color: #94a3b8;
}

.metrics-panel.mp-theme-dark .metric-progress-track.neutral-track .metric-progress-zone {
  background: rgba(148, 163, 184, 0.15);
}

.metrics-panel.mp-theme-dark .metric-progress-fill.neutral {
  background: linear-gradient(90deg, #64748b 0%, #94a3b8 100%);
}

/* ==========================================================================
   BASE CONTAINER
   ========================================================================== */
.metrics-panel {
  width: 100%;
  background: var(--mp-bg);
  border-radius: var(--mp-radius-xl);
  overflow: hidden;
}

.metrics-card {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-xl);
  overflow: hidden;
}

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
.metrics-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--mp-bg-subtle);
  border-bottom: 1px solid var(--mp-border);
  gap: 16px;
  flex-wrap: wrap;
}

.metrics-nav-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.nav-title-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-text);
  letter-spacing: -0.01em;
}

.nav-title-dates {
  font-size: 11px;
  color: var(--mp-muted);
  font-weight: 500;
}

.metrics-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.metrics-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--mp-radius);
  color: var(--mp-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.metrics-nav-item:hover {
  background: var(--mp-bg-muted);
  color: var(--mp-text);
}

.metrics-nav-item.active {
  background: var(--mp-accent);
  color: white;
}

.metrics-nav-item .nav-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metrics-nav-item .nav-icon svg {
  width: 14px;
  height: 14px;
}

.metrics-nav-item .nav-badge {
  font-size: 9px;
  padding: 2px 5px;
  background: var(--mp-accent-subtle);
  color: var(--mp-accent);
  border-radius: 10px;
  font-weight: 600;
}

.metrics-nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.metrics-nav-toggles {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metrics-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.metrics-toggle:hover {
  border-color: var(--mp-accent);
}

.metrics-toggle .toggle-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--mp-muted);
}

.metrics-toggle .toggle-switch {
  width: 28px;
  height: 16px;
  background: var(--mp-border);
  border-radius: 8px;
  position: relative;
  transition: background 0.2s ease;
}

.metrics-toggle .toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.metrics-toggle.active .toggle-switch {
  background: var(--mp-accent);
}

.metrics-toggle.active .toggle-switch::after {
  transform: translateX(12px);
}

.metrics-toggle.active .toggle-label {
  color: var(--mp-accent);
}

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
.metrics-content {
  padding: 12px 20px 20px 20px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mp-border-subtle);
}

.section-header .section-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-accent-subtle);
  color: var(--mp-accent);
  border-radius: var(--mp-radius);
  flex-shrink: 0;
}

.section-header .section-icon svg {
  width: 20px;
  height: 20px;
}

.section-header h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-text);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0px 0;
}

.section-header p {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--mp-muted);
  letter-spacing: 0.01em;
  margin: 0;
}

/* ==========================================================================
   OVERVIEW HERO BAR
   ========================================================================== */
.overview-hero-bar {
  position: relative;
  background: linear-gradient(135deg, var(--mp-bg-subtle) 0%, var(--mp-bg) 100%);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  overflow: hidden;
}

.hero-glow-effect {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, var(--mp-accent-subtle) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.5;
}

.mp-theme-dark .hero-glow-effect {
  opacity: 0.3;
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}

.hero-stat-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  transition: all 0.2s ease;
}

.hero-stat-box:hover {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-shadow);
}

.hero-stat-box .stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-bg-muted);
  border-radius: var(--mp-radius);
  color: var(--mp-muted);
  flex-shrink: 0;
}

.hero-stat-box .stat-icon svg {
  width: 20px;
  height: 20px;
}

.hero-stat-box.gain.positive .stat-icon {
  background: var(--mp-positive-bg);
  color: var(--mp-positive);
}

.hero-stat-box.gain.negative .stat-icon {
  background: var(--mp-negative-bg);
  color: var(--mp-negative);
}

.hero-stat-box.xirr.positive .stat-icon {
  background: var(--mp-positive-bg);
  color: var(--mp-positive);
}

.hero-stat-box.xirr.negative .stat-icon {
  background: var(--mp-negative-bg);
  color: var(--mp-negative);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--mp-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stat-value-large {
  font-size: 20px;
  font-weight: 700;
  color: var(--mp-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

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

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

.stat-value-xlarge {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

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

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

.stat-currency,
.stat-context {
  font-size: 11px;
  color: var(--mp-muted);
  font-weight: 500;
}

.stat-pct {
  font-size: 12px;
  font-weight: 600;
}

.stat-pct.positive {
  color: var(--mp-positive);
}

.stat-pct.negative {
  color: var(--mp-negative);
}

/* Grade ring */
.hero-stat-box.grade {
  flex-direction: row;
}

.grade-ring {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid currentColor;
  flex-shrink: 0;
}

.grade-ring.excellent {
  color: var(--mp-excellent);
  background: var(--mp-excellent-bg);
}

.grade-ring.good {
  color: var(--mp-good);
  background: var(--mp-good-bg);
}

.grade-ring.average {
  color: var(--mp-average);
  background: var(--mp-average-bg);
}

.grade-ring.below-avg {
  color: var(--mp-below);
  background: var(--mp-below-bg);
}

.grade-ring.poor {
  color: var(--mp-poor);
  background: var(--mp-poor-bg);
}

.grade-letter {
  font-size: 22px;
  font-weight: 800;
}

.stat-value-grade {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text);
}

/* Hero explanation */
.hero-explanation {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mp-text-secondary);
  position: relative;
  z-index: 1;
}

.hero-explanation .layman-text {
  color: var(--mp-text-secondary);
}

.hero-explanation strong {
  color: var(--mp-text);
  font-weight: 600;
}

.hero-explanation .positive {
  color: var(--mp-positive);
}

.hero-explanation .negative {
  color: var(--mp-negative);
}

.hero-explanation .sentence-highlight {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.hero-explanation .sentence-highlight.positive {
  background: var(--mp-positive-bg);
  color: var(--mp-positive);
}

.hero-explanation .sentence-highlight.negative {
  background: var(--mp-negative-bg);
  color: var(--mp-negative);
}

/* ==========================================================================
   OVERVIEW 3-COLUMN GRID
   ========================================================================== */
.overview-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.overview-panel {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mp-border-subtle);
}

.panel-header .panel-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-accent);
}

.panel-header .panel-icon svg {
  width: 16px;
  height: 16px;
}

.panel-header .panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text);
  letter-spacing: 0.02em;
}

/* Benchmark Battle Panel */
.benchmark-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benchmark-row {
  display: grid;
  grid-template-columns: 36px 1fr 60px 20px;
  align-items: center;
  gap: 8px;
}

.benchmark-row .bm-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mp-muted);
  letter-spacing: 0.05em;
}

.benchmark-row.you .bm-label {
  color: var(--mp-accent);
}

.bm-bar-wrap {
  height: 8px;
  background: var(--mp-bg-muted);
  border-radius: 4px;
  overflow: hidden;
}

.bm-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.bm-bar.positive {
  background: var(--mp-positive);
}

.bm-bar.negative {
  background: var(--mp-negative);
}

.benchmark-row.spy .bm-bar,
.benchmark-row.vt .bm-bar {
  background: var(--mp-muted);
}

.bm-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text);
  text-align: right;
}

.bm-value.positive {
  color: var(--mp-positive);
}

.bm-value.negative {
  color: var(--mp-negative);
}

.bm-delta {
  font-size: 14px;
  text-align: center;
}

.bm-delta.win {
  color: var(--mp-positive);
}

.bm-delta.lose {
  color: var(--mp-negative);
}

.benchmark-verdict {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--mp-border-subtle);
  font-size: 11px;
  text-align: center;
}

.verdict-win {
  color: var(--mp-positive);
  font-weight: 600;
}

.verdict-win svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}

.verdict-lose {
  color: var(--mp-negative);
  font-weight: 500;
}



.mini-gauge .gauge-svg {
  width: 60px;
  height: 35px;
  display: block;
  margin: 0 auto 4px auto;
}

.mini-gauge .gauge-fill {
  transition: stroke-dasharray 0.5s ease;
}

.mini-gauge.excellent { color: var(--mp-excellent); }
.mini-gauge.good { color: var(--mp-good); }
.mini-gauge.average { color: var(--mp-average); }
.mini-gauge.below-avg { color: var(--mp-below); }
.mini-gauge.poor { color: var(--mp-poor); }

.mini-gauge .gauge-needle {
  transition: transform 0.5s ease;
}

.mini-gauge .gauge-value {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--mp-text);
}

.mini-gauge .gauge-label {
  width: 100%;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mp-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* Real Returns Panel */
.real-equation-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
}

.eq-item {
  text-align: center;
}

.eq-item .eq-val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text);
}

.eq-item .eq-val.positive {
  color: var(--mp-positive);
}

.eq-item .eq-val.negative {
  color: var(--mp-negative);
}

.eq-item .eq-lbl {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--mp-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.eq-item.inflation .eq-val {
  color: var(--mp-negative);
}

.eq-item.real .eq-val {
  font-size: 18px;
}

.eq-op {
  font-size: 16px;
  font-weight: 300;
  color: var(--mp-muted);
}

.real-verdict {
  text-align: center;
  font-size: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--mp-border-subtle);
}

.real-verdict.positive {
  color: var(--mp-positive);
}

.real-verdict.negative {
  color: var(--mp-negative);
}

/* ==========================================================================
   METRICS GRID
   ========================================================================== */
.metrics-grid {
  display: grid;
  gap: 16px;
}

.metrics-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.metrics-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.metrics-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   METRIC CARD
   ========================================================================== */
.metric-card {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 16px;
  transition: all 0.2s ease;
  position: relative;
}

.metric-card:hover {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-shadow);
}

.metric-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.metric-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.metric-card-title .title-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--mp-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-info-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-bg-muted);
  border: none;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: var(--mp-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.metric-info-btn:hover {
  background: var(--mp-accent);
  color: white;
}

.macro-rel-card .macro-rel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.macro-rel-card .macro-rel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;

  /* Match standard metric-card title style */
  font-size: 10px;
  font-weight: 700;
  color: var(--mp-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;

  /* Prevent long titles from pushing pills */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.macro-rel-card .macro-rel-kpis {
  display: flex;
  gap: 6px;

  /* Keep them on one line (no wrap) */
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;

  /* Allow the title to keep space; pills can shrink */
  min-width: 0;
}


.macro-rel-card .macro-rel-kpi {
  font-size: 10px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--rel-chip-border);
  color: var(--mp-muted);
  background: var(--rel-chip-bg);
  white-space: nowrap;

  /* Prevent pills from forcing a wrap */
  flex: 0 1 auto;
}



.macro-rel-card .macro-rel-kpi-val {
  color: var(--mp-text);
  font-weight: 600;          /* was 800 — don't look "shouty" */
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;             /* slightly softer in light mode */
}

.metrics-panel.mp-theme-dark .macro-rel-card .macro-rel-kpi-val {
  opacity: 0.96;             /* keep readable in dark mode */
}



.macro-rel-charts {
  display: grid;
  gap: 8px;
}

.macro-rel-mini {
  display: grid;
  gap: 4px;
}

.macro-rel-mini-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 6px;
}

.macro-rel-mini-label {
  font-size: 9px;                    /* smaller */
  font-weight: 600;                  /* lighter */
  letter-spacing: 0.075em;           /* slightly less "shouty" */
  text-transform: uppercase;
  color: var(--mp-muted);
  opacity: 0.75;                     /* softer = more fintech */
  font-variant-numeric: tabular-nums;
}

.metrics-panel.mp-theme-dark .macro-rel-mini-label {
  opacity: 0.82;                     /* a bit stronger in dark mode */
}


.macro-rel-mini-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  opacity: 0.80;
}


.macro-rel-canvas {
  width: 100% !important;

  /* More vertical breathing room (looks much more “designed”) */
  height: 72px !important;

  display: block;
  border-radius: 10px;

  /* Minimal fintech look: no boxed fill, just a subtle frame */
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: none;
}

.metrics-panel.mp-theme-dark .macro-rel-canvas {
  border-color: rgba(255,255,255,0.08);
}


/* Make the Explains % number bold (without making all pill numbers shouty) */
.macro-rel-card .macro-rel-kpi--explains .macro-rel-kpi-val {
  font-weight: 700;
  opacity: 0.95;
}




/* ------------------------------------------------------------
   Relationship mini-chart guide rails
   Correlation: -1 .. 1  -> show top/mid/bottom guides
   R²:          0 .. 1   -> show bottom/mid/top guides
   We use :nth-child because markup is typically:
   <div class="macro-rel-charts"><canvas/><canvas/></div>
   ------------------------------------------------------------ */
.macro-rel-charts .macro-rel-canvas:nth-child(1) {
  background-image:
    linear-gradient(to bottom,
      var(--rel-guide-line) 0px,
      transparent 1px,
      transparent calc(50% - 0.5px),
      var(--rel-guide-line-strong) calc(50% - 0.5px),
      var(--rel-guide-line-strong) calc(50% + 0.5px),
      transparent calc(50% + 0.5px),
      transparent calc(100% - 1px),
      var(--rel-guide-line) calc(100% - 1px)
    );
  background-blend-mode: overlay;
}

.macro-rel-charts .macro-rel-canvas:nth-child(2) {
  background-image:
    linear-gradient(to bottom,
      var(--rel-guide-line) 0px,
      transparent 1px,
      transparent calc(50% - 0.5px),
      var(--rel-guide-line-strong) calc(50% - 0.5px),
      var(--rel-guide-line-strong) calc(50% + 0.5px),
      transparent calc(50% + 0.5px),
      transparent calc(100% - 1px),
      var(--rel-guide-line) calc(100% - 1px)
    );
  background-blend-mode: overlay;
}



.macro-rel-foot {
  margin-top: 8px;
  font-size: 11px;
  color: var(--mp-text-secondary);
  line-height: 1.35;
}




/* Direction indicator - Dynamic coloring for higher/lower is better */
.metric-direction {
  font-size: 9px;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.metric-direction.higher {
  color: var(--mp-excellent);
}

.metric-direction.lower {
  color: var(--mp-poor);
}

.metric-direction.neutral {
  color: #6b7280;
}

/* Rating pill */
.metric-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metric-rating-pill .rating-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.metric-rating-pill.excellent {
  background: var(--mp-excellent-bg);
  color: var(--mp-excellent);
}

.metric-rating-pill.good {
  background: var(--mp-good-bg);
  color: var(--mp-good);
}

.metric-rating-pill.average {
  background: var(--mp-average-bg);
  color: var(--mp-average);
}

.metric-rating-pill.below-avg {
  background: var(--mp-below-bg);
  color: var(--mp-below);
}

.metric-rating-pill.poor {
  background: var(--mp-poor-bg);
  color: var(--mp-poor);
}

/* Neutral rating pill - for target/relationship metrics (beta, correlations, etc.) */
.metric-rating-pill.neutral {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

/* Metric value */
.metric-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.metric-value.excellent { color: var(--mp-excellent); }
.metric-value.good { color: var(--mp-good); }
.metric-value.average { color: var(--mp-average); }
.metric-value.below-avg { color: var(--mp-below); }
.metric-value.poor { color: var(--mp-poor); }
.metric-value.neutral { color: #6b7280; }

.metric-value-secondary {
  font-size: 12px;
  font-weight: 500;
  color: var(--mp-muted);
  margin-left: 6px;
}

/* ==========================================================================
   PROGRESS BAR WITH ZONES
   ========================================================================== */
.metric-progress-container {
  position: relative;
  height: 28px;
  margin-bottom: 12px;
}

.metric-progress-track {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}

.metric-progress-zone {
  flex: 1;
}

/* Default order: Poor → Excellent (left to right) for "higher is better" */
.metric-progress-zone.poor { background: var(--mp-poor-bg); }
.metric-progress-zone.below { background: var(--mp-below-bg); }
.metric-progress-zone.average { background: var(--mp-average-bg); }
.metric-progress-zone.good { background: var(--mp-good-bg); }
.metric-progress-zone.excellent { background: var(--mp-excellent-bg); }

/* Neutral track - all gray zones for target/relationship metrics */
.metric-progress-track.neutral-track .metric-progress-zone.poor,
.metric-progress-track.neutral-track .metric-progress-zone.below,
.metric-progress-track.neutral-track .metric-progress-zone.average,
.metric-progress-track.neutral-track .metric-progress-zone.good,
.metric-progress-track.neutral-track .metric-progress-zone.excellent {
  background: rgba(107, 114, 128, 0.12);
}

/* Neutral fill bar */
.metric-progress-fill.neutral {
  background: linear-gradient(90deg, #9ca3af 0%, #6b7280 100%);
}

/* Progress zones are always left=red → right=green.
   "Lower is better" metrics are handled by inverting the fill/marker mapping in JS,
   not by reversing the zone order (prevents double-reversal bugs). */

.metric-progress-fill-container {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.metric-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-progress-fill.excellent { background: var(--mp-excellent); }
.metric-progress-fill.good { background: var(--mp-good); }
.metric-progress-fill.average { background: var(--mp-average); }
.metric-progress-fill.below-avg { background: var(--mp-below); }
.metric-progress-fill.poor { background: var(--mp-poor); }

/* Benchmark markers */
.benchmark-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.benchmark-marker {
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 11;
}

.benchmark-marker-line {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: var(--mp-text);
  border-radius: 1px;
  opacity: 0.6;
}

.benchmark-marker-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: 3px;
  color: var(--mp-muted);
}

.benchmark-marker-icon svg {
  width: 10px;
  height: 10px;
}

/* SPY marker - Blue color scheme */
.benchmark-marker.spy .benchmark-marker-line {
  background: #3b82f6;
  opacity: 0.9;
}

.benchmark-marker.spy .benchmark-marker-icon {
  color: #3b82f6;
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

/* VT marker - Purple/Violet color scheme */
.benchmark-marker.vt .benchmark-marker-line {
  background: #8b5cf6;
  opacity: 0.9;
}

.benchmark-marker.vt .benchmark-marker-icon {
  color: #8b5cf6;
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

/* Ensure VT marker doesn't overlap SPY when at same position - offset slightly */
.benchmark-marker.vt {
  z-index: 2;
}

.benchmark-marker.spy {
  z-index: 3;
}

/* Benchmark tooltip */
.benchmark-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 122px;              /* tighter = less dead space */
  padding: 6px 8px;          /* slimmer vertical rhythm */
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
  z-index: 100;
}


.benchmark-marker:hover .benchmark-tooltip,
.benchmark-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.benchmark-tooltip-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--mp-muted);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.benchmark-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  margin-bottom: 2px;
  gap: 10px;                 /* controlled spacing instead of huge void */
}

.benchmark-tooltip-row + .benchmark-tooltip-row {
  border-top: 1px solid var(--mp-border);
  padding-top: 4px;
  margin-top: 2px;
}


.benchmark-tooltip-row .label {
  color: var(--mp-muted);
}

.benchmark-tooltip-row .value {
  font-weight: 600;
  color: var(--mp-text);
}

.benchmark-tooltip-row .value.you-better {
  color: var(--mp-positive);
  font-weight: 700;
}

.benchmark-tooltip-row .value.you-worse {
  color: var(--mp-negative);
  font-weight: 700;
}

.benchmark-tooltip-row .value.you-neutral {
  color: var(--mp-muted);
  font-weight: 600;
}


/* ==========================================================================
   MIDPOINT MARKER - PREMIUM SUBTLE STYLING
   
   This CSS section replaces the generic midpoint marker with a distinctive,
   premium "historic baseline" indicator that:
   - Uses a subtle dashed gray line (no icon underneath)
   - Has elegant hover animation effects
   - Clearly differentiates from SPY/VT benchmark markers
   ========================================================================== */

/* ==========================================================================
   MIDPOINT MARKER - BASE STYLING
   Distinct from SPY/VT - subtle, elegant, unobtrusive
   ========================================================================== */
.benchmark-marker.midpoint {
  z-index: 1; /* Lower than SPY (3) and VT (2) so they capture clicks first */
  pointer-events: auto;
}

/* Invisible hit area - makes the thin line easier to click/hover */
.benchmark-marker.midpoint::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px; /* Wide invisible hit area */
  height: 100%;
  background: transparent;
  cursor: pointer;
}

/* Midpoint line - Solid subtle gray, vertically centered (NO icon below) */
.benchmark-marker.midpoint .benchmark-marker-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center both horizontally AND vertically */
  width: 1px;
  height: calc(100% + 12px); /* Extends 6px above and 6px below track */
  background: rgba(100, 116, 139, 0.5); /* Solid subtle gray */
  border: none;
  border-radius: 1px;
  opacity: 1;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Neutral metrics get slightly different styling */
.benchmark-marker.midpoint .benchmark-marker-line.neutral {
  background: rgba(148, 163, 184, 0.4);
}

/* REMOVE the icon for midpoint - hide completely */
.benchmark-marker.midpoint .benchmark-marker-icon {
  display: none !important;
}

/* ==========================================================================
   MIDPOINT MARKER - HOVER EFFECTS (Premium animation)
   ========================================================================== */
.benchmark-marker.midpoint:hover .benchmark-marker-line {
  background: rgba(100, 116, 139, 0.8);
  width: 2px;
  box-shadow: 0 0 8px rgba(100, 116, 139, 0.3);
  animation: midpointGlow 1.5s ease-in-out infinite;
}

.benchmark-marker.midpoint:hover .benchmark-marker-line.neutral {
  background: rgba(148, 163, 184, 0.7);
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.3);
}

@keyframes midpointGlow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(100, 116, 139, 0.2);
  }
  50% {
    box-shadow: 0 0 12px rgba(100, 116, 139, 0.4);
  }
}



/* ==========================================================================
   DARK MODE ADJUSTMENTS FOR MIDPOINT
   ========================================================================== */
.metrics-panel.mp-theme-dark .benchmark-marker.midpoint .benchmark-marker-line {
  background: rgba(148, 163, 184, 0.35);
}

.metrics-panel.mp-theme-dark .benchmark-marker.midpoint:hover .benchmark-marker-line {
  background: rgba(148, 163, 184, 0.7);
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.25);
}


.metrics-panel.mp-theme-dark .benchmark-marker.midpoint .benchmark-tooltip {
  background: var(--mp-bg-subtle);
  border-color: var(--mp-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   TARGET METRIC MARKER STYLING
   For target metrics, we show TARGET at center, not mean
   ========================================================================== */
.benchmark-marker.midpoint.target-metric .benchmark-marker-line {
  background: rgba(34, 197, 94, 0.45); /* target green */
  width: 2px;
}

.benchmark-marker.midpoint.target-metric:hover .benchmark-marker-line {
  background: rgba(34, 197, 94, 0.75);
  width: 2px;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}


.benchmark-marker.midpoint.target-metric .benchmark-tooltip-title {
  color: #22c55e; /* Green for TARGET */
}

/* Metric interpretation */
.metric-interpretation {
  font-size: 11px;
  line-height: 1.5;
  color: var(--mp-muted);
}


/* ==========================================================================
   SPY/VT MARKERS - Higher priority than midpoint
   When markers overlap, SPY and VT capture clicks/hovers first
   ========================================================================== */
.benchmark-marker.spy,
.benchmark-marker.vt {
  pointer-events: auto;
}

/* SPY/VT hit areas - slightly smaller than midpoint's to be precise */
.benchmark-marker.spy::before,
.benchmark-marker.vt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px; /* Wider than midpoint's 20px = captures first */
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 10; /* Ensure this hit area is on top */
}


/* ==========================================================================
   INFO TOOLTIP
   ========================================================================== */
.info-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: 14px;
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

.info-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.info-tooltip.pinned {
  opacity: 1;
  visibility: visible;
  border-color: var(--mp-accent);
}

.info-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mp-border-subtle);
}

.info-tooltip-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-text);
}

.info-tooltip-pin {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.info-tooltip-pin:hover {
  opacity: 1;
}

.info-tooltip.pinned .info-tooltip-pin {
  opacity: 1;
}

.info-tooltip-section {
  margin-bottom: 10px;
}

.info-tooltip-section:last-child {
  margin-bottom: 0;
}

.info-tooltip-section-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--mp-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.info-tooltip-eli5 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mp-text-secondary);
}

.info-tooltip-formula {
  font-size: 11px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  color: var(--mp-muted);
  background: var(--mp-bg-subtle);
  padding: 6px 8px;
  border-radius: 4px;
}

.info-tooltip-protip {
  font-size: 11px;
  line-height: 1.5;
  color: var(--mp-muted);
  font-style: italic;
}

/* ==========================================================================
   DRAWDOWN FEATURE CARD
   ========================================================================== */
.drawdown-feature-card {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.drawdown-feature-card.excellent { border-left: 4px solid var(--mp-excellent); }
.drawdown-feature-card.good { border-left: 4px solid var(--mp-good); }
.drawdown-feature-card.average { border-left: 4px solid var(--mp-average); }
.drawdown-feature-card.below-avg { border-left: 4px solid var(--mp-below); }
.drawdown-feature-card.poor { border-left: 4px solid var(--mp-poor); }

.drawdown-main {
  margin-bottom: 20px;
}

.drawdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.drawdown-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--mp-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drawdown-value {
  font-size: 42px;
  font-weight: 800;
  color: var(--mp-negative);
  letter-spacing: -0.03em;
  line-height: 1;
}

.drawdown-dollar-loss {
  font-size: 13px;
  color: var(--mp-muted);
  margin-top: 4px;
}

.drawdown-timeline {
  position: relative;
  padding: 20px 0;
}

.timeline-track {
  height: 6px;
  background: var(--mp-bg-muted);
  border-radius: 3px;
  overflow: hidden;
}

.timeline-fill {
  height: 100%;
  background: var(--mp-negative);
  border-radius: 3px;
}

.timeline-points {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.timeline-point {
  text-align: center;
}

.timeline-point.trough {
  text-align: right;
}

.point-marker {
  width: 10px;
  height: 10px;
  background: var(--mp-bg);
  border: 2px solid var(--mp-muted);
  border-radius: 50%;
  margin: 0 auto 6px;
}

.timeline-point.peak .point-marker {
  border-color: var(--mp-positive);
}

.timeline-point.trough .point-marker {
  border-color: var(--mp-negative);
}

.point-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--mp-muted);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.point-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-text);
}

.point-date {
  font-size: 11px;
  color: var(--mp-muted);
}

.drawdown-interpretation {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mp-muted);
  padding-top: 16px;
  border-top: 1px solid var(--mp-border-subtle);
}

/* ==========================================================================
   COLLAPSIBLE SECTIONS
   ========================================================================== */
.metrics-collapse {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}

.metrics-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.metrics-collapse-header:hover {
  background: var(--mp-bg-subtle);
}

.collapse-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text);
}

.collapse-title .collapse-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-accent);
}

.collapse-title .collapse-icon svg {
  width: 16px;
  height: 16px;
}

.collapse-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-muted);
  transition: transform 0.2s ease;
}

.collapse-arrow svg {
  width: 16px;
  height: 16px;
}

.metrics-collapse.open .collapse-arrow {
  transform: rotate(180deg);
}

.collapse-content {
  display: none;
  padding: 0 16px 16px;
}

.metrics-collapse.open .collapse-content {
  display: block;
}

/* ==========================================================================
   LOADING & ERROR STATES
   ========================================================================== */
.metrics-loading,
.metrics-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.metrics-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--mp-border);
  border-top-color: var(--mp-accent);
  border-radius: 50%;
  animation: mp-spin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes mp-spin {
  to { transform: rotate(360deg); }
}

.metrics-loading p,
.metrics-error p {
  font-size: 14px;
  color: var(--mp-muted);
  margin: 0;
}

.metrics-retry-btn {
  margin-top: 16px;
  padding: 10px 20px;
  background: var(--mp-accent);
  color: white;
  border: none;
  border-radius: var(--mp-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.metrics-retry-btn:hover {
  background: var(--mp-accent-hover);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1200px) {
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .overview-grid-3col {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .metrics-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .metrics-nav-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .metrics-nav-title {
    text-align: center;
  }
  
  .metrics-nav {
    justify-content: center;
  }
  
  .metrics-nav-toggles {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .metrics-content {
    padding: 16px;
  }
  
  .hero-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-stat-box {
    padding: 14px;
  }
  
  .stat-value-xlarge {
    font-size: 24px;
  }
  
  .metrics-grid.cols-2,
  .metrics-grid.cols-3,
  .metrics-grid.cols-4 {
    grid-template-columns: 1fr;
  }
  
  .metric-value {
    font-size: 24px;
  }
  
  .info-tooltip {
    width: 260px;
    left: -20px;
  }
  
  .real-equation-compact {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .risk-gauges {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .metrics-nav-item {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .metrics-nav-item .nav-icon {
    display: none;
  }
  
  .overview-hero-bar {
    padding: 16px;
  }
  
  .risk-gauges {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  .metrics-panel {
    box-shadow: none;
  }
  
  .metrics-nav-bar {
    display: none;
  }
  
  .metric-card {
    break-inside: avoid;
  }
  
  .info-tooltip {
    display: none !important;
  }
}

/* ==========================================================================
   FIX 1: Center the Risk Snapshot gauges
   ========================================================================== */
.risk-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  justify-items: center;
}


.mini-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 8px;
  background: var(--mp-bg-subtle);
  border-radius: var(--mp-radius);
  width: 100%;
  max-width: 100px;
  box-sizing: border-box;
}


/* ==========================================================================
   FIX 2: Global Fixed Tooltip (escapes all containers)
   ========================================================================== */
/* ============================================================================
   PREMIUM GLOBAL TOOLTIP SYSTEM
   Appended to document.body - escapes ALL stacking contexts
   Maximum z-index ensures visibility above all elements
   ============================================================================ */
.mp-global-tooltip {
  position: fixed;
  z-index: 2147483647; /* Maximum possible z-index */
  width: 320px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 12px 24px -8px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: 
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
}

.mp-global-tooltip.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Pinned state - subtle highlight */
.mp-global-tooltip.pinned {
  box-shadow: 
    0 0 0 2px rgba(59, 130, 246, 0.3),
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

/* Info tooltips (keep nice + readable) */
.mp-global-tooltip.small {
  width: clamp(260px, 34vw, 360px);
  max-width: calc(100vw - 24px);
  padding: 14px 14px;
}

/* Benchmark tooltips default: thin (SPY / VT mirrors should not be huge) */
.mp-global-tooltip.benchmark-mode {
  width: 180px;
  max-width: calc(100vw - 24px);
  padding: 12px 12px;
}

/* Midpoint benchmark tooltips: wide (rich content) */
.mp-global-tooltip.benchmark-mode.midpoint-mode {
  /* Narrower for cleaner look */
  width: clamp(180px, 22vw, 260px);
  max-width: calc(100vw - 24px);

  /* Prevent mega tooltips from running off-screen */
  max-height: min(520px, calc(100vh - 24px));
  overflow: hidden;

  padding: 12px 12px;
}

/* Historic badge tooltips: wider for rich crash info content */
.mp-global-tooltip.historic-badge-mode {
  width: clamp(260px, 28vw, 340px);
  max-width: calc(100vw - 24px);
  max-height: none;
  overflow: visible;
  padding: 12px 14px;
}





/* Arrow pointing down (tooltip above trigger) */
.mp-global-tooltip.position-above::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: var(--mp-arrow-left, 50%);
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #ffffff transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Arrow pointing up (tooltip below trigger) */
.mp-global-tooltip.position-below::after {
  content: '';
  position: absolute;
  top: -8px;
  left: var(--mp-arrow-left, 50%);
  transform: translateX(-50%);
  border-width: 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent #ffffff;
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
}


/* ============================================================================
   DARK MODE FOR GLOBAL TOOLTIP
   ============================================================================ */
.mp-global-tooltip.dark-mode {
  background: #1e293b;
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 12px 24px -8px rgba(0, 0, 0, 0.4);
}

.mp-global-tooltip.dark-mode.pinned {
  box-shadow: 
    0 0 0 2px rgba(96, 165, 250, 0.4),
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 12px 24px -8px rgba(0, 0, 0, 0.4);
}

.mp-global-tooltip.dark-mode.position-above::after {
  border-color: #1e293b transparent transparent;
}

.mp-global-tooltip.dark-mode.position-below::after {
  border-color: transparent transparent #1e293b;
}

/* ============================================================================
   TOOLTIP HEADER
   ============================================================================ */
.mp-global-tooltip .info-tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.mp-global-tooltip.dark-mode .info-tooltip-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.mp-global-tooltip .info-tooltip-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}


.mp-global-tooltip.dark-mode .info-tooltip-title {
  color: #f1f5f9;
}

/* Pin button */
.mp-global-tooltip .info-tooltip-pin {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.15s ease;
}

.mp-global-tooltip .info-tooltip-pin:hover {
  opacity: 1;
  background: rgba(59, 130, 246, 0.1);
}

.mp-global-tooltip .info-tooltip-pin.active {
  opacity: 1;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Close button */
.mp-global-tooltip .info-tooltip-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 400;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mp-global-tooltip .info-tooltip-close:hover {
  background: #3b82f6;
  color: white;
}

.mp-global-tooltip.dark-mode .info-tooltip-close {
  background: #334155;
  color: #94a3b8;
}

.mp-global-tooltip.dark-mode .info-tooltip-close:hover {
  background: #60a5fa;
  color: #0f172a;
}

/* ============================================================================
   TOOLTIP SECTIONS
   ============================================================================ */
.mp-global-tooltip .info-tooltip-section {
  margin-bottom: 14px;
}

.mp-global-tooltip .info-tooltip-section:last-child {
  margin-bottom: 0;
}

.mp-global-tooltip .info-tooltip-section-title {
  font-size: 8px;
  font-weight: 700;
  color: #3b82f6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.mp-global-tooltip.dark-mode .info-tooltip-section-title {
  color: #60a5fa;
}

.mp-global-tooltip .info-tooltip-eli5 {
  font-size: 11px;
  line-height: 1.5;
  color: #475569;
}

.mp-global-tooltip.dark-mode .info-tooltip-eli5 {
  color: #cbd5e1;
}

.mp-global-tooltip .info-tooltip-formula {
  font-size: 10px;
  font-family: 'SF Mono', 'Monaco', 'Fira Code', 'Consolas', monospace;
  color: #64748b;
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.mp-global-tooltip.dark-mode .info-tooltip-formula {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.08);
}

.mp-global-tooltip .info-tooltip-protip {
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
  font-style: italic;
  padding-left: 12px;
  border-left: 2px solid #e2e8f0;
}

.mp-global-tooltip.dark-mode .info-tooltip-protip {
  color: #94a3b8;
  border-left-color: #475569;
}


/* ============================================================================
   BENCHMARK TOOLTIP CONTENT (inside global tooltip)
   ============================================================================ */
.mp-global-tooltip .benchmark-tooltip-content {
  font-size: 12px;
}

/* Midpoint tooltips can be text-heavy — allow scrolling inside */
.mp-global-tooltip.benchmark-mode.midpoint-mode .benchmark-tooltip-content {
  max-height: calc(min(520px, calc(100vh - 24px)) - 28px);
  overflow-y: auto;
  padding-right: 4px; /* keeps scrollbar from crowding text */
}


.mp-global-tooltip .benchmark-tooltip-content .benchmark-tooltip-title {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
}

.mp-global-tooltip.dark-mode .benchmark-tooltip-content .benchmark-tooltip-title {
  color: #94a3b8;
}

.mp-global-tooltip .benchmark-tooltip-content .benchmark-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.mp-global-tooltip .benchmark-tooltip-content .benchmark-tooltip-row .label {
  color: #64748b;
  font-size: 11px;
}

.mp-global-tooltip.dark-mode .benchmark-tooltip-content .benchmark-tooltip-row .label {
  color: #94a3b8;
}

.mp-global-tooltip .benchmark-tooltip-content .benchmark-tooltip-row .value {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-weight: 600;
  font-size: 12px;
  color: #0f172a;
}

.mp-global-tooltip.dark-mode .benchmark-tooltip-content .benchmark-tooltip-row .value {
  color: #f1f5f9;
}

/* ============================================================================
   RESPONSIVE - Mobile tooltip adjustments
   ============================================================================ */
@media (max-width: 768px) {
  .mp-global-tooltip {
    width: calc(100vw - 32px) !important;
    max-width: 320px;
    left: 16px !important;
    right: 16px;
  }
  
  .mp-global-tooltip.small,
  .mp-global-tooltip.benchmark-mode {
    width: 180px !important;
  }
}

@media (max-width: 480px) {
  .mp-global-tooltip {
    padding: 12px;
  }
  
  .mp-global-tooltip .info-tooltip-eli5,
  .mp-global-tooltip .info-tooltip-protip {
    font-size: 11px;
  }

}

/* ===== Monthly Activity (compact) ===== */
.activity-row {
  background: var(--mp-bg);
  border-radius: var(--mp-radius-lg);
  padding: 12px 16px;
  border: 1px solid var(--mp-border);
  display: flex;
  align-items: center;
  margin-top: 14px;
}

/* Left section: Title + Legend */
.ar-left {
  flex-shrink: 0;
}

.ar-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px; /* tighter because period is now a separate row */
}

.ar-icon {
  width: 13px;
  height: 13px;
  color: var(--mp-muted);
  flex-shrink: 0;
}

.ar-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--mp-text-secondary);
  white-space: nowrap;
}

/* NEW: Period row under title */
.ar-period-row {
  padding-left: 18px;
  margin-bottom: 4px;
  line-height: 1;

  animation: mpPeriodIn 180ms ease-out both;
}


.ar-period {
  font-size: 9px;
  color: var(--mp-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-left: 0; /* no longer inline */
}

/* Crossfade only (no movement) */
@keyframes mpPeriodIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Legend row */

.ar-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  color: var(--mp-muted);
  padding-left: 18px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
}

.legend-dot.cash { background: #a8b5c4; }
.legend-dot.gain { background: #22c55e; }
.legend-dot.loss { background: #ef4444; }

/* Dark mode legend dots */
.metrics-panel.mp-theme-dark .legend-dot.cash { background: #6b7a8a; }

/* Chart area */
.ar-chart {
  flex: 1;
  display: flex;
  gap: 3px;
  min-width: 0;
  padding: 0 24px;
  position: relative; /* needed for the global center line */
}


/* One continuous zero-line across all 12 months (including gaps)
   NOTE: ar-amounts is 12px tall + 2px margin-bottom, ar-bars is 36px tall.
   Zero is the midpoint of ar-bars => 18px down from ar-bars top.
   So: 12 + 2 + 18 - (line/2 = 1) = 31px.
*/
.ar-chart::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  top: 31px;

  height: 2px;

  /* subtle “etched” line: reads in whitespace, disappears under bars (by design) */
  background: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.70),
    rgba(148, 163, 184, 0.35)
  );

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 -1px 0 rgba(0, 0, 0, 0.03);

  opacity: 0.75;
  pointer-events: none;
  z-index: 0; /* behind bars */
}






/* Each month column */
.ar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
}


.ar-col:hover .ar-bars {
  filter: brightness(1.08);
}

/* Premium hover: add subtle depth without shifting bar geometry */
.ar-col:hover .ar-seg {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.10);
}

.metrics-panel.mp-theme-dark .ar-col:hover .ar-seg {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.45);
}


.ar-col:hover .ar-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
  pointer-events: auto;
}

/* Amount labels above bars */
.ar-amounts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 14px;          /* +1px so 8px text never clips */
  font-size: 9px;        /* was 7px */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-bottom: 2px;
}

.ar-amt-cash {
  color: var(--mp-muted);
}

.ar-amt-sep {
  width: 1px;
  height: 9px;           /* was 7px */
  background: var(--mp-border);
  margin: 0 9px;         /* was 0 5px -> slightly more breathing room */
}

.ar-amt-market {
  font-weight: 600;
}


.ar-amt-market.positive { color: var(--mp-positive); }
.ar-amt-market.negative { color: var(--mp-negative); }

/* Bar container */
.ar-bars {
  width: 100%;
  height: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: filter 0.15s ease;
}



/* Upper half (deposits + gains) */
.ar-upper {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Lower half (withdrawals + losses) */
.ar-lower {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Stacked bar */
.ar-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.ar-upper .ar-stack {
  justify-content: flex-end;
}

.ar-lower .ar-stack {
  justify-content: flex-start;
}

/* Bar segments */
.ar-seg {
  width: 100%;
  border-radius: 2px; /* tiny modern radius (not pill/bubble) */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.05);
}



/* Semantic texture: cash slightly muted, market slightly richer */
.ar-seg.cash { filter: saturate(0.85); }
.ar-seg.gain,
.ar-seg.loss { filter: saturate(1.05); }

/* Dark mode: keep it subtle */
.metrics-panel.mp-theme-dark .ar-seg.cash { filter: saturate(0.90); }
.metrics-panel.mp-theme-dark .ar-seg.gain,
.metrics-panel.mp-theme-dark .ar-seg.loss { filter: saturate(1.03); }




/* Cashflow - subtle gray */
.ar-seg.cash {
  background: linear-gradient(180deg, #b0bac5 0%, #a3adb8 100%);
}

.ar-lower .ar-seg.cash {
  background: linear-gradient(0deg, #b0bac5 0%, #a3adb8 100%);
}

/* Dark mode cashflow */
.metrics-panel.mp-theme-dark .ar-seg.cash {
  background: linear-gradient(180deg, #5c6875 0%, #4f5a65 100%);
}

.metrics-panel.mp-theme-dark .ar-lower .ar-seg.cash {
  background: linear-gradient(0deg, #5c6875 0%, #4f5a65 100%);
}

/* Gains - green */
.ar-seg.gain {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
}

/* Losses - red */
.ar-seg.loss {
  background: linear-gradient(0deg, #f87171 0%, #ef4444 100%);
}

/* Month labels */
.ar-month {
  font-size: 8px;          /* was 7px */
  font-weight: 500;
  color: var(--mp-muted);
  text-transform: uppercase;
  margin-top: 3px;
  letter-spacing: 0.25px;  /* tiny bump for readability */
}


/* Right section: Stats */
.ar-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ar-stat {
  text-align: right;
}

.ar-stat-label {
  font-size: 8px;
  font-weight: 600;
  color: var(--mp-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.ar-stat-value {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ar-stat-value.positive { color: var(--mp-positive); }
.ar-stat-value.negative { color: var(--mp-negative); }
.ar-stat-value.neutral { color: var(--mp-text-secondary); }

/* ==========================================================================
   MONTHLY ACTIVITY TOOLTIPS - ELI5 Style
   ========================================================================== */
.ar-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #1e293b;
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease;
  z-index: 100;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Tooltip arrow */
.ar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
}

/* Smart tooltip positioning - prevent edge overflow */
.ar-col:first-child .ar-tooltip,
.ar-col:nth-child(2) .ar-tooltip {
  left: 0;
  transform: translateX(0) translateY(0);
}

.ar-col:first-child .ar-tooltip::after,
.ar-col:nth-child(2) .ar-tooltip::after {
  left: 20px;
  transform: translateX(0);
}

.ar-col:last-child .ar-tooltip,
.ar-col:nth-last-child(2) .ar-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(0);
}

.ar-col:last-child .ar-tooltip::after,
.ar-col:nth-last-child(2) .ar-tooltip::after {
  left: auto;
  right: 20px;
  transform: translateX(0);
}

.ar-col:first-child:hover .ar-tooltip,
.ar-col:nth-child(2):hover .ar-tooltip {
  transform: translateX(0) translateY(-4px);
}

.ar-col:last-child:hover .ar-tooltip,
.ar-col:nth-last-child(2):hover .ar-tooltip {
  transform: translateX(0) translateY(-4px);
}

.tt-header {
  font-weight: 700;
  color: #e2e8f0;
  font-size: 11px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tt-header {
  position: relative;
}
.tt-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(255,255,255,0.06);
}



.tt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}

.tt-row:last-of-type {
  margin-bottom: 0;
}

.tt-lbl {
  color: #94a3b8;
  font-size: 9px;
}

.tt-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.tt-val.pos { color: #4ade80; }
.tt-val.neg { color: #f87171; }
.tt-val.neu { color: #cbd5e1; }

.tt-divider {
  height: 1px;
  background: #475569;
  margin: 8px 0;
}

.tt-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.tt-summary .tt-lbl {
  font-weight: 500;
  color: #cbd5e1;
}

.tt-summary .tt-val {
  font-size: 11px;
}

.tt-eli5 {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #475569;
  font-size: 9px;
  color: #94a3b8;
  line-height: 1.4;
  white-space: normal;
  max-width: 200px;
}

/* ==========================================================================
   MONTHLY ACTIVITY - Real/Nominal Notice
   ========================================================================== */
.activity-notice {
  font-size: 9px;
  color: var(--mp-muted);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}




/* === Monthly Activity: mechanical layout (no margin hacks) === */

/* Bars container: fixed height; split into two equal lanes (pos/neg) */
.ar-bars {
  width: 100%;
  height: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: filter 0.15s ease;
}

/* Upper = positive lane, Lower = negative lane */
.ar-upper,
.ar-lower {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

.ar-upper { align-items: flex-end; } /* bars sit on the zero boundary */
.ar-lower { align-items: flex-start; } /* bars sit on the zero boundary */

/* Stack inside each lane */
.ar-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* In upper lane, stack grows upward from zero (cash at bottom, gain above) */
.ar-upper .ar-stack { justify-content: flex-end; }

/* In lower lane, stack grows downward from zero (cash at top, loss below) */
.ar-lower .ar-stack { justify-content: flex-start; }





/* ==========================================================================
   MONTHLY ACTIVITY - Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .activity-row {
    flex-wrap: wrap;
  }
  
  .ar-left {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .ar-chart {
    flex: 1;
    padding: 0 8px;
  }


  
  .ar-right {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mp-border);
  }
  
  .ar-stat {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .ar-amounts {
    font-size: 6px;
  }
  
  .ar-month {
    font-size: 6px;
  }
  
  .ar-bars {
    height: 28px;
  }
}



/* ==========================================================================
   MIDPOINT TOOLTIP - CLEAN SPY/VT FAMILY STYLING
   Matches the white, minimal aesthetic of SPY/VT tooltips
   ========================================================================== */

/* Container - no special treatment needed, inherits global tooltip padding */

/* Small uppercase header - matches SPY/VT */
.mp-global-tooltip .benchmark-tooltip-title {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 4px 0; /* Reduced bottom margin */
  text-align: center;
}

.mp-global-tooltip.dark-mode .benchmark-tooltip-title {
  color: #94a3b8;
}

/* The number - prominent but proportional */
.mp-global-tooltip .midpoint-value-large {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
  margin: 8px 0 4px 0; /* Space above and below */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: center;
}

.mp-global-tooltip.dark-mode .midpoint-value-large {
  color: #f1f5f9;
}

/* Subtle center divider - Silicon Valley minimalist */
.mp-global-tooltip .midpoint-divider {
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #cbd5e1 50%, transparent 100%);
  margin: 12px auto; /* auto centers it horizontally */
}

.mp-global-tooltip.dark-mode .midpoint-divider {
  background: linear-gradient(90deg, transparent 0%, #475569 50%, transparent 100%);
}

/* Explanation text - italic, muted, centered */
.mp-global-tooltip .midpoint-explanation {
  font-size: 10px;
  font-style: italic;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
  text-align: center;
}

.mp-global-tooltip.dark-mode .midpoint-explanation {
  color: #94a3b8;
}

/* Historic context block - subtle, compact, readable */
.mp-global-tooltip .midpoint-context {
  margin: 10px 0 0 0;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.mp-global-tooltip.dark-mode .midpoint-context {
  border-color: #334155;
  background: rgba(15, 23, 42, 0.35);
}

.mp-global-tooltip .midpoint-context-label {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
  text-align: left;
}

.mp-global-tooltip.dark-mode .midpoint-context-label {
  color: #94a3b8;
}

.mp-global-tooltip .midpoint-context-text {
  font-size: 10px;
  line-height: 1.45;
  color: #475569;
  margin: 0;
}

.mp-global-tooltip.dark-mode .midpoint-context-text {
  color: #cbd5e1;
}

/* Sources line - tiny, italic, separated */
.mp-global-tooltip .midpoint-sources {
  margin: 10px 0 0 0;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  font-size: 9px;
  font-style: italic;
  line-height: 1.35;
  color: #94a3b8;
  text-align: left;
}

.mp-global-tooltip.dark-mode .midpoint-sources {
  border-top-color: #334155;
  color: #64748b;
}

/* Neutral note for relationship metrics */
.mp-global-tooltip .midpoint-neutral-note {
  font-size: 9px;
  font-style: italic;
  line-height: 1.4;
  color: #94a3b8;
  margin: 8px 0 0 0;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.mp-global-tooltip.dark-mode .midpoint-neutral-note {
  color: #64748b;
  border-top-color: #334155;
}

/* ==========================================================================
   HISTORICAL CRASH LADDER (Drawdowns tab) — badge markers + tooltip
   ========================================================================== */

.dd-history-card {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  overflow: visible;
}

.dd-history-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.dd-history-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-text-secondary);
}

.dd-history-sub {
  font-size: 12px;
  color: var(--mp-muted);
}

.dd-history-stage {
  position: relative;
  height: 220px;
  border-radius: 14px;
  overflow: visible;
  background: #ffffff;
}

.dd-history-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.dd-badges-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* enable only on the buttons themselves */
  overflow: visible;
}

.dd-badge-slot {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translateZ(0);
  transition: transform 160ms ease, filter 200ms ease, opacity 200ms ease;
}

.dd-badge-slot svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dd-badge-slot.locked {
  filter: grayscale(1) saturate(0) brightness(0.95);
  opacity: 0.45;
  transform: scale(0.95);
}

.dd-badge-slot.unlocked {
  filter: none;
  opacity: 1;
}

.dd-badge-slot.hover {
  transform: scale(1.08);
  z-index: 10;
}

/* Severity tiers: progressively more ominous from mild (tier-1) to catastrophic (tier-4) */

/* Tier 1: Mild - subtle cool accent */
.dd-badge-slot.tier-1.unlocked {
  transform: scale(1.0);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}
.dd-badge-slot.tier-1.unlocked svg {
  filter: drop-shadow(0 0 1px rgba(100, 116, 139, 0.3));
}

/* Tier 2: Moderate - warm orange accent */
.dd-badge-slot.tier-2.unlocked {
  transform: scale(1.02);
  filter: drop-shadow(0 2px 6px rgba(249, 115, 22, 0.25))
          drop-shadow(0 0 2px rgba(249, 115, 22, 0.15));
}
.dd-badge-slot.tier-2.unlocked svg {
  filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.4));
}

/* Tier 3: Severe - hot red accent */
.dd-badge-slot.tier-3.unlocked {
  transform: scale(1.04);
  filter: drop-shadow(0 3px 8px rgba(239, 68, 68, 0.35))
          drop-shadow(0 0 3px rgba(239, 68, 68, 0.25));
}
.dd-badge-slot.tier-3.unlocked svg {
  filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.5));
}

/* Tier 4: Catastrophic - ominous dark red/black accent */
.dd-badge-slot.tier-4.unlocked {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 12px rgba(127, 29, 29, 0.5))
          drop-shadow(0 0 4px rgba(185, 28, 28, 0.4))
          drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}
.dd-badge-slot.tier-4.unlocked svg {
  filter: drop-shadow(0 0 4px rgba(185, 28, 28, 0.6));
}

/* Hover states preserve tier styling but enhance */
.dd-badge-slot.tier-1.unlocked.hover { transform: scale(1.10); }
.dd-badge-slot.tier-2.unlocked.hover { transform: scale(1.12); }
.dd-badge-slot.tier-3.unlocked.hover { transform: scale(1.14); }
.dd-badge-slot.tier-4.unlocked.hover { transform: scale(1.16); }

.dd-history-legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
  color: var(--mp-muted);
  font-size: 12px;
}

.dd-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dd-legend-swatch {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
}

.dd-legend-swatch.historic { background: rgba(100, 116, 139, 0.55); }
.dd-legend-swatch.you { background: rgba(59, 130, 246, 0.85); }



/* ============================================================================
   MAXIMUM DRAWDOWN CARD - Combined Design (Jan 2026)
   ============================================================================ */

.dd-maxdrawdown-card {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.dd-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.dd-card-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dd-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mp-muted);
}

.dd-card-subtitle {
  font-size: 12px;
  color: var(--mp-muted);
  margin-top: 2px;
}

/* Hero value section */
.dd-hero-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.dd-hero-value {
  font-size: 48px;
  font-weight: 900;
  color: var(--mp-negative);
  letter-spacing: -0.03em;
  line-height: 1;
}

.dd-hero-loss {
  display: flex;
  flex-direction: column;
  padding-bottom: 6px;
}

.dd-loss-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--mp-negative);
  letter-spacing: -0.01em;
}

.dd-loss-label {
  font-size: 11px;
  color: var(--mp-muted);
  font-weight: 500;
  margin-top: 1px;
}

/* Compact stats row */
.dd-compact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mp-border);
}

.dd-stat-item {
  text-align: center;
}

.dd-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-muted);
  margin-bottom: 4px;
}

.dd-stat-label.peak {
  color: var(--mp-positive);
}

.dd-stat-label.trough {
  color: var(--mp-negative);
}

.dd-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--mp-text);
  letter-spacing: -0.01em;
}

.dd-stat-value.peak {
  color: var(--mp-positive);
}

.dd-stat-value.trough {
  color: var(--mp-negative);
}

.dd-stat-date {
  font-size: 11px;
  color: var(--mp-text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

/* Interpretation box - no left border accent */
.dd-interpretation-box {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--mp-bg-muted);
  border-radius: 10px;
  font-size: 13px;
  color: var(--mp-text-secondary);
  line-height: 1.55;
}


/* ========================================================================== 
   DIVERSIFICATION TAB
   ========================================================================== */



.diversification-score {
  min-width: 220px;
  text-align: right;
  padding: 10px 12px;
  background: var(--mp-bg-muted);
  border: 1px solid var(--mp-border);
  border-radius: 12px;
}

.diversification-score-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--mp-text);
}

.diversification-score-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-text-secondary);
}

.diversification-score-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--mp-text-secondary);
}

.diversification-notes {
  margin-top: 14px;
}

.diversification-notes .note {
  padding: 12px 14px;
  background: var(--mp-bg-muted);
  border: 1px solid var(--mp-border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--mp-text-secondary);
  line-height: 1.55;
}

.diversification-notes .note-title {
  font-weight: 700;
  color: var(--mp-text);
  margin-right: 6px;
}

/* ==========================================================================
   DIVERSIFICATION HISTORY (FULL-WIDTH CARD)
   ========================================================================== */
.divers-history-card {
  margin-bottom: 16px;
}

.divers-history-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.divers-history-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.divers-history-divider {
  width: 1px;
  height: 18px;
  background: var(--mp-border);
  display: inline-block;
  margin: 0 4px;
}

.divers-history-pill {
  border: 1px solid var(--mp-border);
  background: var(--mp-bg-muted);
  color: var(--mp-text-secondary);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.divers-history-pill:hover {
  border-color: var(--mp-accent);
  color: var(--mp-text);
}

.divers-history-pill.is-active {
  background: var(--mp-accent-soft);
  border-color: var(--mp-accent);
  color: var(--mp-text);
}

.divers-history-sub {
  font-size: 12px;
  color: var(--mp-muted);
  margin-bottom: 10px;
}

.divers-history-canvas-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  background: transparent;
  border: 1px solid var(--mp-border-subtle, var(--mp-border));
  border-radius: 14px;
  overflow: hidden;
  padding: 8px 4px 4px 4px;
}

.divers-history-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.divers-history-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  text-align: center;
  background: #ffffff;
  border-radius: 14px;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.divers-history-loader {
  width: 28px;
  height: 28px;
  color: #3b82f6;
}

.divers-history-spinner {
  width: 100%;
  height: 100%;
  animation: divHistSpin 1s linear infinite;
}

@keyframes divHistSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.divers-history-overlay-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.divers-history-overlay-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  max-width: 300px;
  line-height: 1.4;
}

/* State-driven overlay */
.divers-history-canvas-wrap[data-divhist-state="ready"] .divers-history-overlay {
  opacity: 0;
  pointer-events: none;
}

.divers-history-canvas-wrap[data-divhist-state="loading"] .divers-history-overlay {
  opacity: 1;
}

/* Dark mode support */
.mp-theme-dark .divers-history-overlay {
  background: #1e293b;
}

.mp-theme-dark .divers-history-overlay-title {
  color: #f1f5f9;
}

.mp-theme-dark .divers-history-overlay-sub {
  color: #94a3b8;
}

/* Diversification History Legend */
.divers-history-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 10px;
  padding: 0 8px;
}

.divers-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mp-text-secondary);
}

.divers-legend-line {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.divers-legend-label {
  font-weight: 500;
  color: var(--mp-text);
}

.divers-legend-axis {
  font-size: 11px;
  color: var(--mp-muted);
  font-weight: 400;
}