/**
 * VariantView D3.js Visualization Styles
 *
 * Styles for Victor-inspired interactive visualizations:
 * - Ghost Handle Sliders
 * - Sankey DCF Flow Diagram
 * - Drawing the Forecast
 * - Thesis Boundary Heatmap
 * - Reactive Narrative
 */

/* ============================================================================
   GHOST SLIDER COMPONENT
   ============================================================================ */

.vv-ghost-slider {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
  user-select: none;
  max-width: 100%;
  height: auto;
}

/* Track */
.vv-ghost-slider__track-bg {
  fill: var(--vv-color-gray-10);
  stroke: var(--vv-color-border-light);
  stroke-width: 1;
}

.vv-ghost-slider__track-fill {
  fill: var(--vv-color-interactive-bg);  /* Light blue background for filled track area */
  transition: width 150ms ease-out;
}

/* Gap highlight - colored region between market and user handles */
.vv-ghost-slider__gap-highlight {
  transition: all var(--vv-transition-fast);
  pointer-events: none;
}

.vv-ghost-slider__gap-highlight--bearish {
  fill: var(--vv-color-orange-30);
}

.vv-ghost-slider__gap-highlight--bullish {
  fill: var(--vv-color-blue-30);
}

/* Tick marks and labels */
.vv-ghost-slider__tick-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
}

/* Consensus marker */
.vv-ghost-slider__consensus-line {
  stroke: var(--vv-color-text-tertiary);
}

.vv-ghost-slider__consensus-marker {
  fill: var(--vv-color-text-tertiary);
}

.vv-ghost-slider__consensus-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-tertiary);
  font-style: italic;
}

/* Market handle (ghost) */
.vv-ghost-slider__market-handle path {
  fill: var(--vv-color-gray-30);
  stroke: var(--vv-color-gray-50);
  transition: opacity 150ms ease-out;
}

.vv-ghost-slider__market-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-secondary);
}

/* Tension arc */
.vv-ghost-slider__tension {
  stroke: var(--vv-color-warning);
  pointer-events: none;
}

/* User handle */
.vv-ghost-slider__user-handle {
  outline: none;
}

.vv-ghost-slider__user-handle:focus .vv-ghost-slider__user-circle {
  stroke: var(--vv-color-interactive-hover);  /* Use semantic token for focus state */
  stroke-width: 3;
}

.vv-ghost-slider__user-glow {
  fill: var(--vv-color-interactive);  /* Use semantic token; will be slightly transparent via opacity */
  transition: opacity 150ms ease-out;
}

.vv-ghost-slider__user-circle {
  fill: var(--vv-color-interactive);
  transition: transform 100ms ease-out;
}

.vv-ghost-slider__user-handle--active .vv-ghost-slider__user-circle {
  transform: scale(1.15);
}

.vv-ghost-slider__user-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-weight: 600;
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-interactive);
}

/* Highlighted state for bi-directional highlighting with waterfall */
.vv-ghost-slider--highlighted {
  /* Highlight is handled by SVG rect (.vv-ghost-slider__highlight-border) */
  /* CSS outline removed to prevent double-border effect */
}

/* Highlight border inside SVG (more reliable cross-browser) */
.vv-ghost-slider__highlight-border {
  stroke: #3b82f6;  /* Blue color - fallback for CSS variable */
  stroke: var(--vv-color-interactive);
  stroke-width: 3;
  transition: opacity 150ms ease-out;
  pointer-events: none;
}

/* Main label */
.vv-ghost-slider__label {
  font-size: var(--vv-font-size-sm);  /* ~12.8px, rhythm-aligned */
  font-weight: 600;
  fill: var(--vv-color-text-secondary);
}

/* Gap text */
.vv-ghost-slider__gap-text {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-tertiary);
}

/* Legend (for Market and Consensus values) */
.vv-ghost-slider__legend-text {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-secondary);
}

.vv-ghost-slider__legend-icon--market {
  fill: var(--vv-color-gray-30);
  stroke: var(--vv-color-gray-50);
}

.vv-ghost-slider__legend-icon--consensus {
  fill: var(--vv-color-text-tertiary);
}

/* Market handle - locked/non-draggable state (J4.3) */
.vv-ghost-slider__market-handle {
  cursor: not-allowed;
}

.vv-ghost-slider__market-handle:hover path {
  opacity: 1;
  fill: var(--vv-color-gray-40);
}

/* ============================================================================
   GHOST SLIDER CONTAINER
   ============================================================================ */

.vv-slider-container {
  background: var(--vv-color-surface-card);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
  padding: var(--vv-space-4);
  margin-bottom: var(--vv-space-4);
}

.vv-slider-container__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--vv-space-3);
}

.vv-slider-container__title {
  font-size: var(--vv-font-size-sm);
  font-weight: 600;
  color: var(--vv-color-text-primary);
}

.vv-slider-container__value {
  font-size: var(--vv-font-size-lg);
  font-weight: 700;
  font-family: var(--vv-font-family-mono);
  color: var(--vv-color-interactive);  /* Use semantic token for interactive values */
}

.vv-slider-container__base-rate {
  margin-top: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-3);
  background: var(--vv-color-signal-overvalued-bg);  /* Semantic token for warning background */
  border-left: 3px solid var(--vv-color-warning);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-signal-overvalued);  /* Semantic token for warning text */
}

/* J4.7: Historical warning - appears when user value exceeds historical max */
.vv-ghost-slider__historical-warning {
  margin-top: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-3);
  background: var(--vv-color-signal-overvalued-bg);
  border-left: 3px solid var(--vv-color-warning);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-sans);
  color: var(--vv-color-signal-overvalued);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--vv-transition-normal), max-height var(--vv-transition-normal);
}

.vv-ghost-slider__historical-warning--visible {
  opacity: 1;
  max-height: 60px;  /* Accommodates two lines of text */
  padding: var(--vv-space-2) var(--vv-space-3);
}

/* ============================================================================
   J8.3: GHOST SLIDER DISABLED STATE
   Renders when slider data is missing (null/undefined/NaN)
   ============================================================================ */

.vv-ghost-slider--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vv-ghost-slider__track-bg--disabled {
  fill: var(--vv-color-gray-10);
  stroke: var(--vv-color-border-light);
  stroke-width: 1;
  stroke-dasharray: 4 2;
}

.vv-ghost-slider__label--disabled {
  fill: var(--vv-color-text-disabled);
}

.vv-ghost-slider__disabled-placeholder {
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-disabled);
  font-style: italic;
}

.vv-ghost-slider__disabled-message {
  margin-top: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-3);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-sans);
  color: var(--vv-color-text-secondary);
}

/* ============================================================================
   THESIS SLOPEGRAPH
   ============================================================================ */

.vv-slopegraph {
  font-family: var(--vv-font-family-sans);
  user-select: none;
  max-width: 100%;
  height: auto;
}

/* Column headers */
.vv-slopegraph__column-header {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-slopegraph__column-header--user {
  fill: var(--vv-color-blue-50);
}

.vv-slopegraph__column-header--market {
  fill: var(--vv-color-gray-50);
}

/* Values */
.vv-slopegraph__value {
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-bold);
  font-family: var(--vv-font-family-mono);
}

.vv-slopegraph__value--user {
  fill: var(--vv-color-blue-50);
}

.vv-slopegraph__value--market {
  fill: var(--vv-color-gray-50);
}

/* Labels */
.vv-slopegraph__label {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-tertiary);
}

/* Connecting lines */
.vv-slopegraph__line {
  stroke-width: 2;
  fill: none;
  transition: stroke-width var(--vv-transition-fast);
}

.vv-slopegraph__line--bearish {
  stroke: var(--vv-color-orange-30);
}

.vv-slopegraph__line--bullish {
  stroke: var(--vv-color-blue-30);
}

.vv-slopegraph__line--neutral {
  stroke: var(--vv-color-gray-30);
}

/* Dots at line endpoints */
.vv-slopegraph__dot {
  transition: r var(--vv-transition-fast);
}

.vv-slopegraph__dot--bearish {
  fill: var(--vv-color-orange-30);
}

.vv-slopegraph__dot--bullish {
  fill: var(--vv-color-blue-30);
}

.vv-slopegraph__dot--neutral {
  fill: var(--vv-color-gray-30);
}

/* Delta labels (Tufte's "Difference" principle) */
.vv-slopegraph__delta-pill {
  fill: var(--vv-color-surface-card);
  stroke: var(--vv-color-border-light);
  stroke-width: 1;
}

.vv-slopegraph__delta {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-slopegraph__delta--bearish {
  fill: var(--vv-color-orange-50);
}

.vv-slopegraph__delta--bullish {
  fill: var(--vv-color-blue-50);
}

.vv-slopegraph__delta--neutral {
  fill: var(--vv-color-gray-50);
}

/* Hover effects on rows */
.vv-slopegraph__row:hover .vv-slopegraph__line {
  stroke-width: 3;
}

.vv-slopegraph__row:hover .vv-slopegraph__dot {
  r: 5;
}

/* Key disagreement text - positioned inside SVG for Gestalt proximity */
.vv-slopegraph__key-disagreement {
  font-size: var(--vv-font-size-sm);
  font-style: italic;
  fill: var(--vv-color-orange-50);
}

/* ============================================================================
   SANKEY DCF FLOW DIAGRAM
   ============================================================================ */

.vv-sankey {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
}

/* Nodes */
.vv-sankey__node rect {
  stroke: var(--vv-color-border-primary);  /* Use semantic token */
  stroke-width: 1;
  cursor: default;
}

.vv-sankey__node-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-weight: 500;
  fill: var(--vv-color-text-primary);
  pointer-events: none;
}

.vv-sankey__node-value {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-secondary);
  pointer-events: none;
}

/* Links (streams) */
.vv-sankey__link {
  fill: none;
  stroke-opacity: 0.5;
  transition: stroke-opacity 150ms ease-out;
}

.vv-sankey__link:hover {
  stroke-opacity: 0.8;
}

.vv-sankey__link--ghost {
  stroke: var(--vv-color-gray-30);
  stroke-opacity: 0.3;
}

.vv-sankey__link--user {
  stroke: var(--vv-color-interactive);
}

/* Stream labels */
.vv-sankey__stream-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned (no 9px in scale) */
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
  pointer-events: none;
}

/* Filter labels (Margin, Tax, etc.) */
.vv-sankey__filter-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-secondary);
  text-anchor: middle;
}

/* Fair value output */
.vv-sankey__fair-value {
  font-size: var(--vv-font-size-base);  /* 16px, rhythm-aligned */
  font-weight: 700;
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-interactive-hover);  /* Slightly darker blue for emphasis */
}

.vv-sankey__fair-value-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-secondary);
}

/* Legend */
.vv-sankey__legend {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-tertiary);
}

.vv-sankey__legend-swatch {
  stroke-width: 2;
  stroke-linecap: round;
}

/* Track labels (MARKET'S THESIS / YOUR THESIS) */
.vv-sankey__track-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-sankey__track-label--market {
  fill: var(--vv-color-gray-50);
}

.vv-sankey__track-label--user {
  fill: var(--vv-color-blue-50);
}

/* Nodes (vertical bars) */
.vv-sankey__node {
  stroke-width: 0;
}

.vv-sankey__node--market {
  fill: var(--vv-color-gray-30);
}

.vv-sankey__node--user {
  fill: var(--vv-color-blue-30);
}

/* Streams (flows between nodes) */
.vv-sankey__stream {
  stroke: none;
  transition: opacity var(--vv-transition-fast);
}

.vv-sankey__stream:hover {
  opacity: 0.9;
}

.vv-sankey__stream--main.vv-sankey__stream--market {
  fill: var(--vv-color-gray-20);
  opacity: 0.6;
}

.vv-sankey__stream--main.vv-sankey__stream--user {
  fill: var(--vv-color-blue-20);
  opacity: 0.6;
}

.vv-sankey__stream--leakage {
  fill: var(--vv-color-gray-10);
  opacity: 0.35;
}

.vv-sankey__stream--leakage.vv-sankey__stream--market {
  fill: var(--vv-color-gray-20);
}

.vv-sankey__stream--leakage.vv-sankey__stream--user {
  fill: var(--vv-color-blue-10);
}

/* Leakage labels */
.vv-sankey__leakage-label {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-tertiary);
  font-style: italic;
}

/* Leakage terminal nodes (vertical rectangles at end of leakage streams) */
.vv-sankey__node--leakage {
  opacity: 0.6;
}

.vv-sankey__node--leakage.vv-sankey__node--market {
  fill: var(--vv-color-gray-30);
}

.vv-sankey__node--leakage.vv-sankey__node--user {
  fill: var(--vv-color-blue-20);
}

[data-theme="dark"] .vv-sankey__node--leakage.vv-sankey__node--market {
  fill: var(--vv-color-gray-50);
  opacity: 0.5;
}

[data-theme="dark"] .vv-sankey__node--leakage.vv-sankey__node--user {
  fill: var(--vv-color-blue-40);
  opacity: 0.5;
}

/* Node values */
.vv-sankey__node-value--market {
  fill: var(--vv-color-gray-50);
}

.vv-sankey__node-value--user {
  fill: var(--vv-color-blue-50);
}

/* Fair value emphasis (last node) */
.vv-sankey__fair-value {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-bold);
  font-family: var(--vv-font-family-mono);
}

.vv-sankey__fair-value--market {
  fill: var(--vv-color-gray-70);
}

.vv-sankey__fair-value--user {
  fill: var(--vv-color-blue-60);
}

/* Insight text at bottom */
.vv-sankey__insight {
  font-size: var(--vv-font-size-sm);
  font-style: italic;
  fill: var(--vv-color-text-secondary);
}

/* ============================================================================
   FORECAST DRAWER (Drawing the Forecast)
   ============================================================================ */

.vv-forecast {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
}

/* Historical line (solid) */
.vv-forecast__historical-line {
  fill: none;
  stroke: var(--vv-color-gray-50);
  stroke-width: 2;
}

/* Forecast line (dashed, user-controlled) */
.vv-forecast__forecast-line {
  fill: none;
  stroke: var(--vv-color-interactive);
  stroke-width: 2;
  stroke-dasharray: 6, 4;
}

/* Draggable control points */
.vv-forecast__control-point {
  fill: var(--vv-color-interactive);
  stroke: var(--vv-color-surface-primary);  /* Use surface token instead of hardcoded white */
  stroke-width: 2;
  cursor: ns-resize;
  transition: transform 100ms ease-out;
}

.vv-forecast__control-point:hover,
.vv-forecast__control-point--active {
  transform: scale(1.3);
}

/* Reference lines (industry median, historical max) */
.vv-forecast__reference-line {
  stroke: var(--vv-color-text-tertiary);
  stroke-width: 1;
  stroke-dasharray: 2, 4;
}

.vv-forecast__reference-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-tertiary);
}

/* Gap callout */
.vv-forecast__gap-callout {
  fill: var(--vv-color-signal-overvalued-bg);
  stroke: var(--vv-color-warning);
  stroke-width: 1;
}

.vv-forecast__gap-text {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-signal-overvalued);
}

/* Axis styling */
.vv-forecast__axis line,
.vv-forecast__axis path {
  stroke: var(--vv-color-border-primary);
}

.vv-forecast__axis text {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
}

/* Today marker (vertical line separating historical from forecast) */
.vv-forecast__today-marker {
  stroke: var(--vv-color-text-tertiary);
  stroke-width: 1;
  stroke-dasharray: 4, 2;
}

.vv-forecast__today-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-tertiary);
  text-anchor: middle;
}

/* ============================================================================
   THESIS BOUNDARY HEATMAP
   ============================================================================ */

.vv-heatmap {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
}

/* Cells */
.vv-heatmap__cell {
  stroke: white;
  stroke-width: 1;
  transition: opacity 100ms ease-out;
}

.vv-heatmap__cell:hover {
  opacity: 0.8;
  stroke: var(--vv-color-text-primary);
  stroke-width: 2;
}

/* Position markers */
.vv-heatmap__marker {
  stroke: white;
  stroke-width: 2;
}

.vv-heatmap__marker--user {
  fill: var(--vv-color-interactive);
}

.vv-heatmap__marker--market {
  fill: var(--vv-color-gray-50);
}

.vv-heatmap__marker-label {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  font-weight: 600;
  fill: var(--vv-color-text-primary);
}

/* J6.8: Multi-marker mode — scenario markers */
.vv-heatmap__scenario-marker circle {
  transition: r 150ms ease;
}

.vv-heatmap__scenario-marker circle:hover {
  r: 12;
}

/* Contour lines (signal boundaries) */
.vv-heatmap__contour {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-opacity: 0.8;
}

.vv-heatmap__contour--animated {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { stroke-opacity: 0.6; }
  50% { stroke-opacity: 1; }
}

/* Contour outline (dark stroke behind white for contrast) */
.vv-heatmap__contour-outline {
  fill: none;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 4;
}

/* Contour labels */
.vv-heatmap__contour-label {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-primary);
  font-weight: var(--vv-font-weight-medium);
  /* Use paint-order to render stroke behind fill for text outline effect */
  paint-order: stroke fill;
  stroke: var(--vv-color-surface-primary);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Legend */
.vv-heatmap__legend-item {
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  fill: var(--vv-color-text-secondary);
}

/* Tooltip */
.vv-heatmap__tooltip {
  position: absolute;
  background: var(--vv-color-gray-90);
  color: var(--vv-color-surface-primary);  /* Contrasting color for tooltip text */
  padding: var(--vv-space-2) var(--vv-space-3);
  border-radius: var(--vv-radius-sm);
  font-size: var(--vv-font-size-sm);  /* ~12.8px, rhythm-aligned */
  pointer-events: none;
  z-index: var(--vv-z-tooltip);
  box-shadow: var(--vv-shadow-md);
}

.vv-heatmap__tooltip-title {
  font-weight: 600;
  margin-bottom: var(--vv-space-1);  /* 4px, rhythm-quarter aligned */
}

.vv-heatmap__tooltip-value {
  font-family: var(--vv-font-family-mono);
}

/* ============================================================================
   REACTIVE NARRATIVE
   ============================================================================ */

.vv-reactive-narrative {
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
}

/* Adjustable inline values (Tangle-style) */
.vv-reactive-narrative__adjustable {
  color: var(--vv-color-tangle-value);  /* Semantic token for Tangle interactive numbers */
  font-weight: 600;
  font-family: var(--vv-font-family-mono);
  cursor: ew-resize;
  border-bottom: 2px dashed var(--vv-color-blue-30);
  padding: 0 2px;
  transition: all var(--vv-transition-fast);
}

.vv-reactive-narrative__adjustable:hover {
  background: var(--vv-color-interactive-bg);
  border-bottom-style: solid;
}

/* Source references */
.vv-reactive-narrative__source {
  position: relative;
  color: var(--vv-color-text-secondary);
  cursor: help;
}

.vv-reactive-narrative__source::after {
  content: 'ⓘ';
  font-size: var(--vv-font-size-xs);  /* ~10px, rhythm-aligned */
  vertical-align: super;
  margin-left: 2px;
  color: var(--vv-color-interactive);
}

/* Comparison brackets */
.vv-reactive-narrative__comparison {
  padding: var(--vv-space-1) var(--vv-space-1);  /* 4px padding, rhythm-aligned */
  border-radius: var(--vv-radius-sm);
  font-size: 0.9em;
}

.vv-reactive-narrative__comparison--favorable {
  background: var(--vv-color-green-5);
  color: var(--vv-color-numeric-positive);
}

.vv-reactive-narrative__comparison--unfavorable {
  background: var(--vv-color-red-5);
  color: var(--vv-color-numeric-negative);
}

.vv-reactive-narrative__comparison--neutral {
  background: var(--vv-color-gray-5);
  color: var(--vv-color-text-secondary);
}

.vv-reactive-narrative__comparison--danger {
  background: var(--vv-color-orange-10);
  color: var(--vv-color-signal-overvalued);
  font-weight: 600;
  animation: pulse-danger 1.5s ease-in-out infinite;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Semantic text that changes based on model state */
.vv-reactive-narrative__semantic {
  transition: opacity 200ms ease-out;
}

.vv-reactive-narrative__semantic--entering {
  animation: fade-in 200ms ease-out;
}

.vv-reactive-narrative__semantic--exiting {
  animation: fade-out 200ms ease-out;
}

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

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(4px); }
}

/* ============================================================================
   CAUSAL WATERFALL CHART
   ============================================================================ */

.vv-waterfall {
  font-family: var(--vv-font-family-sans);
  user-select: none;
  max-width: 100%;
  height: auto;
}

.vv-waterfall__header {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-text-secondary);
  letter-spacing: var(--vv-letter-spacing-wide);
}

/* Bars */
.vv-waterfall__bar {
  transition: opacity var(--vv-transition-fast);
}

/* Hover state for bi-directional highlighting */
.vv-waterfall__bar[data-metric-id] {
  cursor: pointer;
}

.vv-waterfall__bar[data-metric-id]:hover {
  opacity: 0.8;
}

.vv-waterfall__bar--start,
.vv-waterfall__bar--end {
  fill: var(--vv-color-gray-30);
}

.vv-waterfall__bar--positive {
  fill: var(--vv-color-green-30);
}

.vv-waterfall__bar--negative {
  fill: var(--vv-color-red-30);
}

.vv-waterfall__bar--base {
  fill: var(--vv-color-gray-30);
}

/* Connectors */
.vv-waterfall__connector {
  stroke: var(--vv-color-gray-20);
  stroke-width: 1;
  stroke-dasharray: 3, 3;
}

/* Labels */
.vv-waterfall__label {
  font-size: var(--vv-font-size-sm);
  fill: var(--vv-color-text-secondary);
}

/* Values */
.vv-waterfall__value {
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-waterfall__value--start,
.vv-waterfall__value--end {
  fill: var(--vv-color-text-primary);
}

.vv-waterfall__value--positive {
  fill: var(--vv-color-numeric-positive);
}

.vv-waterfall__value--negative {
  fill: var(--vv-color-numeric-negative);
}

/* Delta percentages */
.vv-waterfall__delta {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
}

.vv-waterfall__delta--positive {
  fill: var(--vv-color-numeric-positive);
}

.vv-waterfall__delta--negative {
  fill: var(--vv-color-numeric-negative);
}

/* ============================================================================
   CAUSAL FLOW TRACES (Legacy - kept for backwards compatibility)
   ============================================================================ */

.vv-causal-trace {
  background: var(--vv-color-surface-secondary);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
  padding: var(--vv-space-4);
  margin: var(--vv-space-4) 0;
}

.vv-causal-trace__header {
  font-size: var(--vv-font-size-sm);
  font-weight: 600;
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-3);
}

.vv-causal-trace__trigger {
  font-size: var(--vv-font-size-base);
  font-weight: 500;
  color: var(--vv-color-text-primary);
  margin-bottom: var(--vv-space-4);
}

.vv-causal-trace__trigger-value {
  font-family: var(--vv-font-family-mono);
  font-weight: 600;
  color: var(--vv-color-interactive);
}

.vv-causal-trace__step {
  display: flex;
  align-items: center;
  padding: var(--vv-space-2) 0;
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-causal-trace__step:last-child {
  border-bottom: none;
}

.vv-causal-trace__step-arrow {
  width: var(--vv-rhythm);   /* 24px = 1 rhythm unit */
  height: var(--vv-rhythm);  /* 24px = 1 rhythm unit */
  color: var(--vv-color-text-tertiary);
  margin-right: var(--vv-space-2);
}

.vv-causal-trace__step-label {
  flex: 1;
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-causal-trace__step-values {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
}

.vv-causal-trace__step-from {
  color: var(--vv-color-text-tertiary);
}

.vv-causal-trace__step-to {
  color: var(--vv-color-interactive);
  font-weight: 600;
}

.vv-causal-trace__step-delta {
  margin-left: var(--vv-space-2);
  font-size: var(--vv-font-size-xs);
}

.vv-causal-trace__step-delta--negative {
  color: var(--vv-color-numeric-negative);
}

.vv-causal-trace__step-delta--positive {
  color: var(--vv-color-numeric-positive);
}

.vv-causal-trace__insight {
  margin-top: var(--vv-space-3);
  padding: var(--vv-space-3);
  background: var(--vv-color-insight-bg);
  border-left: 3px solid var(--vv-color-insight);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-insight-text);
}

/* ============================================================================
   DARK MODE OVERRIDES
   Using design system tokens from tokens.css
   ============================================================================ */

/* Ghost Slider - Track */
[data-theme="dark"] .vv-ghost-slider__track-bg {
  fill: var(--vv-color-surface-tertiary);  /* #3d3d3d in dark mode */
  stroke: var(--vv-color-border-primary);  /* #454545 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__track-fill {
  fill: var(--vv-color-interactive);  /* #73b3e7 in dark mode - lighter blue */
}

/* Ghost Slider - Gap highlight in dark mode */
[data-theme="dark"] .vv-ghost-slider__gap-highlight--bearish {
  fill: var(--vv-color-orange-30);  /* #ffbc78 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__gap-highlight--bullish {
  fill: var(--vv-color-blue-30);  /* #73b3e7 in dark mode */
}

/* Ghost Slider - Text labels */
[data-theme="dark"] .vv-ghost-slider__tick-label {
  fill: var(--vv-color-text-tertiary);  /* #adadad in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__consensus-label,
[data-theme="dark"] .vv-ghost-slider__market-label,
[data-theme="dark"] .vv-ghost-slider__legend-text {
  fill: var(--vv-color-text-secondary);  /* #c9c9c9 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__user-label {
  fill: var(--vv-color-interactive);  /* #73b3e7 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__label {
  fill: var(--vv-color-text-primary);  /* #f0f0f0 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__gap-text {
  fill: var(--vv-color-text-secondary);  /* #c9c9c9 in dark mode */
}

/* Ghost Slider - Handles */
[data-theme="dark"] .vv-ghost-slider__market-handle path {
  fill: var(--vv-color-gray-50);  /* #8d8d8d in dark mode */
  stroke: var(--vv-color-gray-70);  /* #b0b0b0 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__user-circle {
  fill: var(--vv-color-interactive);  /* #73b3e7 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__user-glow {
  fill: var(--vv-color-blue-30);  /* lighter blue glow */
}

/* Ghost Slider - Consensus marker */
[data-theme="dark"] .vv-ghost-slider__consensus-line {
  stroke: var(--vv-color-text-tertiary);  /* #adadad */
}

[data-theme="dark"] .vv-ghost-slider__consensus-marker {
  fill: var(--vv-color-text-tertiary);  /* #adadad */
}

/* Ghost Slider - Tension arc */
[data-theme="dark"] .vv-ghost-slider__tension {
  stroke: var(--vv-color-warning);  /* #ffbc78 in dark mode - orange */
}

/* Ghost Slider - Highlight border for bi-directional highlighting */
[data-theme="dark"] .vv-ghost-slider__highlight-border {
  stroke: var(--vv-color-interactive);  /* #73b3e7 in dark mode */
}

/* Ghost Slider - Legend icons */
[data-theme="dark"] .vv-ghost-slider__legend-icon--market {
  fill: var(--vv-color-gray-50);
  stroke: var(--vv-color-gray-70);
}

[data-theme="dark"] .vv-ghost-slider__legend-icon--consensus {
  fill: var(--vv-color-text-tertiary);
}

/* Ghost Slider - Market handle hover (J4.3) */
[data-theme="dark"] .vv-ghost-slider__market-handle:hover path {
  fill: var(--vv-color-gray-60);
}

/* Slider Container */
[data-theme="dark"] .vv-slider-container {
  background: var(--vv-color-surface-card);  /* #252525 in dark mode */
  border-color: var(--vv-color-border-light);  /* #3d3d3d in dark mode */
}

[data-theme="dark"] .vv-slider-container__base-rate {
  background: var(--vv-color-orange-5);  /* #2d2418 in dark mode */
  border-left-color: var(--vv-color-warning);  /* #ffbc78 in dark mode */
  color: var(--vv-color-orange-50);  /* #ffd6a0 in dark mode */
}

/* J4.7: Historical warning — no dark mode override needed.
   Semantic tokens (--vv-color-signal-overvalued-bg, --vv-color-warning,
   --vv-color-signal-overvalued) are redefined at [data-theme="dark"]
   boundary per Road Runner Rule 9. */

/* Ghost Slider - J8.3 Disabled state (dark mode) */
[data-theme="dark"] .vv-ghost-slider__track-bg--disabled {
  fill: var(--vv-color-surface-tertiary);  /* #3d3d3d in dark mode */
  stroke: var(--vv-color-border-primary);  /* #454545 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__label--disabled {
  fill: var(--vv-color-text-disabled);  /* #757575 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__disabled-placeholder {
  fill: var(--vv-color-text-disabled);  /* #757575 in dark mode */
}

[data-theme="dark"] .vv-ghost-slider__disabled-message {
  background: var(--vv-color-surface-tertiary);  /* #3d3d3d in dark mode */
  color: var(--vv-color-text-secondary);  /* #c9c9c9 in dark mode */
}

/* Slopegraph */
[data-theme="dark"] .vv-slopegraph__column-header--user {
  fill: var(--vv-color-interactive);  /* #73b3e7 in dark mode */
}

[data-theme="dark"] .vv-slopegraph__column-header--market {
  fill: var(--vv-color-gray-70);  /* #b0b0b0 in dark mode */
}

[data-theme="dark"] .vv-slopegraph__value--user {
  fill: var(--vv-color-interactive);  /* #73b3e7 in dark mode */
}

[data-theme="dark"] .vv-slopegraph__value--market {
  fill: var(--vv-color-gray-70);  /* #b0b0b0 in dark mode */
}

[data-theme="dark"] .vv-slopegraph__label {
  fill: var(--vv-color-text-tertiary);  /* #adadad in dark mode */
}

[data-theme="dark"] .vv-slopegraph__line--bearish {
  stroke: var(--vv-color-orange-30);  /* #ffbc78 in dark mode */
}

[data-theme="dark"] .vv-slopegraph__line--bullish {
  stroke: var(--vv-color-blue-30);  /* #73b3e7 in dark mode */
}

[data-theme="dark"] .vv-slopegraph__line--neutral {
  stroke: var(--vv-color-gray-50);  /* #8d8d8d in dark mode */
}

[data-theme="dark"] .vv-slopegraph__dot--bearish {
  fill: var(--vv-color-orange-30);
}

[data-theme="dark"] .vv-slopegraph__dot--bullish {
  fill: var(--vv-color-blue-30);
}

[data-theme="dark"] .vv-slopegraph__dot--neutral {
  fill: var(--vv-color-gray-50);
}

/* Delta labels in dark mode */
[data-theme="dark"] .vv-slopegraph__delta-pill {
  fill: var(--vv-color-surface-card);
  stroke: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-slopegraph__delta--bearish {
  fill: var(--vv-color-orange-50);
}

[data-theme="dark"] .vv-slopegraph__delta--bullish {
  fill: var(--vv-color-blue-50);
}

[data-theme="dark"] .vv-slopegraph__delta--neutral {
  fill: var(--vv-color-gray-70);
}

[data-theme="dark"] .vv-slopegraph__key-disagreement {
  fill: var(--vv-color-orange-50);
}

/* Sankey */
[data-theme="dark"] .vv-sankey__node-label {
  fill: var(--vv-color-text-primary);
}

[data-theme="dark"] .vv-sankey__node-value {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-sankey__link--ghost {
  stroke: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-sankey__link--user {
  stroke: var(--vv-color-interactive);
}

/* Track labels in dark mode */
[data-theme="dark"] .vv-sankey__track-label--market {
  fill: var(--vv-color-gray-70);
}

[data-theme="dark"] .vv-sankey__track-label--user {
  fill: var(--vv-color-interactive);
}

/* Nodes in dark mode */
[data-theme="dark"] .vv-sankey__node--market {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-sankey__node--user {
  fill: var(--vv-color-blue-30);
}

/* Streams in dark mode */
[data-theme="dark"] .vv-sankey__stream--main.vv-sankey__stream--market {
  fill: var(--vv-color-gray-50);
  opacity: 0.4;
}

[data-theme="dark"] .vv-sankey__stream--main.vv-sankey__stream--user {
  fill: var(--vv-color-blue-30);
  opacity: 0.5;
}

[data-theme="dark"] .vv-sankey__stream--leakage {
  fill: var(--vv-color-gray-70);
  opacity: 0.25;
}

[data-theme="dark"] .vv-sankey__stream--leakage.vv-sankey__stream--user {
  fill: var(--vv-color-blue-50);
}

/* Leakage labels in dark mode */
[data-theme="dark"] .vv-sankey__leakage-label {
  fill: var(--vv-color-text-tertiary);
}

/* Node values in dark mode */
[data-theme="dark"] .vv-sankey__node-value--market {
  fill: var(--vv-color-gray-70);
}

[data-theme="dark"] .vv-sankey__node-value--user {
  fill: var(--vv-color-interactive);
}

/* Fair value in dark mode */
[data-theme="dark"] .vv-sankey__fair-value--market {
  fill: var(--vv-color-gray-90);
}

[data-theme="dark"] .vv-sankey__fair-value--user {
  fill: var(--vv-color-blue-50);
}

/* Insight in dark mode */
[data-theme="dark"] .vv-sankey__insight {
  fill: var(--vv-color-text-secondary);
}

/* Heatmap */
[data-theme="dark"] .vv-heatmap__cell {
  stroke: var(--vv-color-surface-secondary);
}

[data-theme="dark"] .vv-heatmap__contour-outline {
  stroke: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .vv-heatmap__contour-label {
  fill: var(--vv-color-text-primary);
  stroke: var(--vv-color-surface-primary);
}

/* Reactive Narrative */
[data-theme="dark"] .vv-reactive-narrative {
  color: var(--vv-color-text-primary);
}

[data-theme="dark"] .vv-reactive-narrative__adjustable {
  color: var(--vv-color-interactive);
  border-bottom-color: var(--vv-color-blue-30);
}

[data-theme="dark"] .vv-reactive-narrative__adjustable:hover {
  background: var(--vv-color-interactive-bg);  /* #1a2535 in dark mode */
}

/* Causal Waterfall */
[data-theme="dark"] .vv-waterfall__header {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-waterfall__bar--start,
[data-theme="dark"] .vv-waterfall__bar--end {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-waterfall__bar--positive {
  fill: var(--vv-color-green-30);
}

[data-theme="dark"] .vv-waterfall__bar--negative {
  fill: var(--vv-color-red-30);
}

[data-theme="dark"] .vv-waterfall__bar--base {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-waterfall__connector {
  stroke: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-waterfall__label {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-waterfall__value--start,
[data-theme="dark"] .vv-waterfall__value--end {
  fill: var(--vv-color-text-primary);
}

[data-theme="dark"] .vv-waterfall__value--positive {
  fill: var(--vv-color-numeric-positive);
}

[data-theme="dark"] .vv-waterfall__value--negative {
  fill: var(--vv-color-numeric-negative);
}

[data-theme="dark"] .vv-waterfall__delta--positive {
  fill: var(--vv-color-numeric-positive);
}

[data-theme="dark"] .vv-waterfall__delta--negative {
  fill: var(--vv-color-numeric-negative);
}

/* Causal Trace (Legacy) */
[data-theme="dark"] .vv-causal-trace {
  background: var(--vv-color-surface-card);  /* #252525 */
  border-color: var(--vv-color-border-light);  /* #3d3d3d */
}

[data-theme="dark"] .vv-causal-trace__header {
  color: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-causal-trace__trigger {
  color: var(--vv-color-text-primary);
}

[data-theme="dark"] .vv-causal-trace__trigger-value {
  color: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-causal-trace__step {
  border-bottom-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-causal-trace__step-label {
  color: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-causal-trace__step-from {
  color: var(--vv-color-text-tertiary);
}

[data-theme="dark"] .vv-causal-trace__step-to {
  color: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-causal-trace__step-delta--negative {
  color: var(--vv-color-numeric-negative);  /* #f2938c in dark mode */
}

[data-theme="dark"] .vv-causal-trace__step-delta--positive {
  color: var(--vv-color-numeric-positive);  /* #7fb491 in dark mode */
}

[data-theme="dark"] .vv-causal-trace__insight {
  background: var(--vv-color-insight-bg);  /* #2d2818 in dark mode */
  border-left-color: var(--vv-color-insight);  /* #fad980 in dark mode */
  color: var(--vv-color-insight-text);  /* #fad980 in dark mode */
}

/* ============================================================================
   REACTIVE SANKEY - DELTA CONNECTORS
   Vertical lines connecting Market and User tracks to show deltas
   ============================================================================ */

.vv-sankey__delta-connector {
  pointer-events: none;
}

.vv-sankey__delta-line {
  stroke: var(--vv-color-orange-30);
  stroke-width: 2;
  stroke-dasharray: 4, 4;
}

.vv-sankey__delta-badge-bg {
  fill: var(--vv-color-surface-card);
  stroke: var(--vv-color-orange-30);
  stroke-width: 1;
}

.vv-sankey__delta-badge-text {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-orange-50);
}

/* Dark mode for delta connectors */
[data-theme="dark"] .vv-sankey__delta-line {
  stroke: var(--vv-color-orange-30);
}

[data-theme="dark"] .vv-sankey__delta-badge-bg {
  fill: var(--vv-color-surface-card);
  stroke: var(--vv-color-orange-30);
}

[data-theme="dark"] .vv-sankey__delta-badge-text {
  fill: var(--vv-color-orange-50);
}

/* ============================================================================
   REACTIVE SANKEY - SIGNAL BADGE
   Shows valuation signal (overvalued/fair/undervalued)
   ============================================================================ */

.vv-sankey__signal-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-4);
  border-radius: var(--vv-radius-pill);
  margin-top: var(--vv-space-4);
  font-size: var(--vv-font-size-sm);
}

.vv-sankey__signal-label {
  color: var(--vv-color-text-secondary);
  font-weight: var(--vv-font-weight-medium);
}

.vv-sankey__signal-value {
  font-weight: var(--vv-font-weight-bold);
  font-family: var(--vv-font-family-mono);
}

.vv-sankey__signal-detail {
  color: var(--vv-color-text-tertiary);
  font-size: var(--vv-font-size-xs);
}

/* Signal badge variants */
.vv-sankey__signal-badge--overvalued {
  background: var(--vv-color-signal-overvalued-bg);
  border: 1px solid var(--vv-color-red-20);
}

.vv-sankey__signal-badge--overvalued .vv-sankey__signal-value {
  color: var(--vv-color-signal-overvalued);
}

.vv-sankey__signal-badge--undervalued {
  background: var(--vv-color-signal-undervalued-bg);
  border: 1px solid var(--vv-color-green-20);
}

.vv-sankey__signal-badge--undervalued .vv-sankey__signal-value {
  color: var(--vv-color-signal-undervalued);
}

.vv-sankey__signal-badge--fair {
  background: var(--vv-color-gray-5);
  border: 1px solid var(--vv-color-gray-20);
}

.vv-sankey__signal-badge--fair .vv-sankey__signal-value {
  color: var(--vv-color-text-secondary);
}

/* Dark mode for signal badge */
[data-theme="dark"] .vv-sankey__signal-badge--overvalued {
  background: var(--vv-color-red-5);
  border-color: var(--vv-color-red-30);
}

[data-theme="dark"] .vv-sankey__signal-badge--overvalued .vv-sankey__signal-value {
  color: var(--vv-color-signal-overvalued);
}

[data-theme="dark"] .vv-sankey__signal-badge--undervalued {
  background: var(--vv-color-green-5);
  border-color: var(--vv-color-green-30);
}

[data-theme="dark"] .vv-sankey__signal-badge--undervalued .vv-sankey__signal-value {
  color: var(--vv-color-signal-undervalued);
}

[data-theme="dark"] .vv-sankey__signal-badge--fair {
  background: var(--vv-color-gray-10);
  border-color: var(--vv-color-gray-30);
}

/* ============================================================================
   REACTIVE SANKEY - Modifier class for Alpine-rendered version
   ============================================================================ */

.vv-sankey--reactive {
  transition: all var(--vv-transition-normal);
}

.vv-sankey--reactive path,
.vv-sankey--reactive rect {
  transition: d 300ms ease-out, x 300ms ease-out, y 300ms ease-out,
              width 300ms ease-out, height 300ms ease-out;
}

/* ============================================================================
   ENHANCED SANKEY - WACC Filter (Time Cost) and Terminal Value Split
   ============================================================================ */

/* Enhanced Sankey modifier class */
.vv-sankey--enhanced {
  /* Container for enhanced features */
}

/* Time Cost (WACC) leakage stream - shows value "evaporating" due to discounting */
.vv-sankey__stream--time-cost {
  fill: var(--vv-color-orange-10);
  opacity: 0.5;
  stroke: none;
}

.vv-sankey__stream--time-cost.vv-sankey__stream--market {
  fill: var(--vv-color-gray-20);
  opacity: 0.4;
}

.vv-sankey__stream--time-cost.vv-sankey__stream--user {
  fill: var(--vv-color-orange-20);
  opacity: 0.5;
}

/* Time cost label styling */
.vv-sankey__leakage-label--time {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-orange-50);
  font-style: italic;
}

/* Terminal Value stream - risky portion of fair value */
.vv-sankey__stream--terminal {
  fill: var(--vv-color-gray-10);
  opacity: 0.4;
  stroke: none;
}

.vv-sankey__stream--terminal.vv-sankey__stream--market {
  fill: var(--vv-color-gray-15);
  opacity: 0.35;
}

.vv-sankey__stream--terminal.vv-sankey__stream--user {
  fill: var(--vv-color-blue-10);
  opacity: 0.4;
}

/* Explicit FCF stream - reliable portion of fair value */
.vv-sankey__stream--explicit {
  stroke: none;
}

.vv-sankey__stream--explicit.vv-sankey__stream--market {
  fill: var(--vv-color-gray-30);
  opacity: 0.6;
}

.vv-sankey__stream--explicit.vv-sankey__stream--user {
  fill: var(--vv-color-blue-30);
  opacity: 0.65;
}

/* Terminal Value node - risky portion with visual distinction */
.vv-sankey__node--terminal {
  fill: var(--vv-color-gray-20);
  stroke: var(--vv-color-gray-30);
  stroke-width: 1;
  stroke-dasharray: 2, 2;  /* Dashed border to indicate uncertainty */
  opacity: 0.7;
}

.vv-sankey__node--terminal.vv-sankey__node--market {
  fill: var(--vv-color-gray-25);
}

.vv-sankey__node--terminal.vv-sankey__node--user {
  fill: var(--vv-color-blue-15);
  stroke: var(--vv-color-blue-30);
}

/* Explicit FCF node - solid, reliable portion */
.vv-sankey__node--explicit {
  fill: var(--vv-color-gray-40);
  stroke-width: 0;
}

.vv-sankey__node--explicit.vv-sankey__node--market {
  fill: var(--vv-color-gray-40);
}

.vv-sankey__node--explicit.vv-sankey__node--user {
  fill: var(--vv-color-blue-40);
}

/* Split labels for Terminal Value / Explicit FCF percentages */
.vv-sankey__split-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
}

.vv-sankey__split-label--terminal {
  fill: var(--vv-color-orange-50);
  font-style: italic;
}

.vv-sankey__split-label--explicit {
  fill: var(--vv-color-text-secondary);
}

/* PV node label (after WACC discount) */
.vv-sankey__pv-label {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-tertiary);
}

/* Mix blend mode for user track overlay comparison */
.vv-sankey__track--user-blend {
  mix-blend-mode: multiply;
}

/* ============================================================================
   ENHANCED SANKEY - Dark Mode Overrides
   ============================================================================ */

/* Time Cost streams in dark mode */
[data-theme="dark"] .vv-sankey__stream--time-cost {
  fill: var(--vv-color-orange-30);
  opacity: 0.35;
}

[data-theme="dark"] .vv-sankey__stream--time-cost.vv-sankey__stream--market {
  fill: var(--vv-color-gray-50);
  opacity: 0.3;
}

[data-theme="dark"] .vv-sankey__stream--time-cost.vv-sankey__stream--user {
  fill: var(--vv-color-orange-30);
  opacity: 0.4;
}

[data-theme="dark"] .vv-sankey__leakage-label--time {
  fill: var(--vv-color-orange-50);
}

/* Terminal Value streams in dark mode */
[data-theme="dark"] .vv-sankey__stream--terminal {
  fill: var(--vv-color-gray-60);
  opacity: 0.3;
}

[data-theme="dark"] .vv-sankey__stream--terminal.vv-sankey__stream--market {
  fill: var(--vv-color-gray-50);
  opacity: 0.25;
}

[data-theme="dark"] .vv-sankey__stream--terminal.vv-sankey__stream--user {
  fill: var(--vv-color-blue-40);
  opacity: 0.3;
}

/* Explicit FCF streams in dark mode */
[data-theme="dark"] .vv-sankey__stream--explicit.vv-sankey__stream--market {
  fill: var(--vv-color-gray-50);
  opacity: 0.5;
}

[data-theme="dark"] .vv-sankey__stream--explicit.vv-sankey__stream--user {
  fill: var(--vv-color-blue-30);
  opacity: 0.55;
}

/* Terminal Value nodes in dark mode */
[data-theme="dark"] .vv-sankey__node--terminal {
  fill: var(--vv-color-gray-50);
  stroke: var(--vv-color-gray-60);
  opacity: 0.6;
}

[data-theme="dark"] .vv-sankey__node--terminal.vv-sankey__node--user {
  fill: var(--vv-color-blue-40);
  stroke: var(--vv-color-blue-50);
}

/* Explicit FCF nodes in dark mode */
[data-theme="dark"] .vv-sankey__node--explicit.vv-sankey__node--market {
  fill: var(--vv-color-gray-60);
}

[data-theme="dark"] .vv-sankey__node--explicit.vv-sankey__node--user {
  fill: var(--vv-color-blue-40);
}

/* Split labels in dark mode */
[data-theme="dark"] .vv-sankey__split-label {
  fill: var(--vv-color-text-tertiary);
}

[data-theme="dark"] .vv-sankey__split-label--terminal {
  fill: var(--vv-color-orange-50);
}

[data-theme="dark"] .vv-sankey__split-label--explicit {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-sankey__pv-label {
  fill: var(--vv-color-text-tertiary);
}

/* Disable mix-blend-mode in dark mode (looks wrong on dark backgrounds) */
[data-theme="dark"] .vv-sankey__track--user-blend {
  mix-blend-mode: normal;
  opacity: 0.85;
}

/* ============================================================================
   ENHANCED SANKEY - Negative Value / Cash Burn States
   ============================================================================ */

/* Negative node indicator (dashed red line) */
.vv-sankey__node--negative {
  stroke: var(--vv-color-red-50);
  stroke-width: 2;
  stroke-dasharray: 4, 2;
}

.vv-sankey__node-label--negative {
  fill: var(--vv-color-red-50);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-sankey__node-value--negative {
  fill: var(--vv-color-red-50);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

/* Negative stream (dashed red line) */
.vv-sankey__stream--negative {
  stroke: var(--vv-color-red-50);
  stroke-width: 1;
  stroke-dasharray: 6, 3;
  fill: none;
}

/* Dark mode for negative states */
[data-theme="dark"] .vv-sankey__node--negative {
  stroke: var(--vv-color-red-40);
}

[data-theme="dark"] .vv-sankey__node-label--negative,
[data-theme="dark"] .vv-sankey__node-value--negative {
  fill: var(--vv-color-red-40);
}

[data-theme="dark"] .vv-sankey__stream--negative {
  stroke: var(--vv-color-red-40);
}

/* ============================================================================
   SANKEY DCF V2 (d3-sankey library based)
   ============================================================================ */

.vv-sankey-v2 {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
  max-width: 100%;
  height: auto;
}

/* Track Labels */
.vv-sankey-v2__track-label {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-sankey-v2__track-label--market {
  fill: var(--vv-color-gray-50);
}

.vv-sankey-v2__track-label--user {
  fill: var(--vv-color-blue-50);
}

/* Links (the curved bands) - uniform width via d3-sankey */
.vv-sankey-v2__link {
  stroke-linecap: round;
  transition: opacity var(--vv-transition-fast);
}

.vv-sankey-v2__link--market {
  stroke: var(--vv-color-gray-30);
  opacity: 0.7;
}

.vv-sankey-v2__link--user {
  stroke: var(--vv-color-blue-30);
  opacity: 0.7;
}

.vv-sankey-v2__link--leakage {
  opacity: 0.4;
}

.vv-sankey-v2__link:hover {
  opacity: 1;
}

/* Nodes (rectangles) */
.vv-sankey-v2__node {
  stroke-width: 0;
}

.vv-sankey-v2__node--market {
  fill: var(--vv-color-gray-50);
}

.vv-sankey-v2__node--user {
  fill: var(--vv-color-blue-50);
}

.vv-sankey-v2__node--leakage {
  fill: var(--vv-color-gray-30);
  opacity: 0.6;
}

/* Node Labels */
.vv-sankey-v2__node-label {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-secondary);
}

/* Node Values */
.vv-sankey-v2__node-value {
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-sankey-v2__node-value--market {
  fill: var(--vv-color-gray-60);
}

.vv-sankey-v2__node-value--user {
  fill: var(--vv-color-blue-60);
}

/* Insight text */
.vv-sankey-v2__insight {
  font-size: var(--vv-font-size-sm);
  fill: var(--vv-color-text-secondary);
  font-style: italic;
}

/* Dark mode */
[data-theme="dark"] .vv-sankey-v2__link--market {
  stroke: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-sankey-v2__link--user {
  stroke: var(--vv-color-blue-40);
}

[data-theme="dark"] .vv-sankey-v2__node--market {
  fill: var(--vv-color-gray-40);
}

[data-theme="dark"] .vv-sankey-v2__node--user {
  fill: var(--vv-color-blue-40);
}

[data-theme="dark"] .vv-sankey-v2__node--leakage {
  fill: var(--vv-color-gray-60);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWING FORECAST COMPONENT
   Direct manipulation forecasting - draw revenue and margin curves
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-drawing {
  font-family: var(--vv-font-family-primary);
}

/* Chart backgrounds */
.vv-drawing__chart-bg {
  fill: var(--vv-color-surface-secondary);
}

.vv-drawing__forecast-region {
  fill: var(--vv-color-blue-5);
  opacity: 0.4;
}

/* Year divider between historical and forecast */
.vv-drawing__year-divider {
  stroke: var(--vv-color-border-light);
  stroke-dasharray: 4 2;
}

/* Chart titles */
.vv-drawing__chart-title {
  font-size: 11px;
  font-weight: 600;
  fill: var(--vv-color-text-primary);
}

/* Axes */
.vv-drawing__axis path,
.vv-drawing__axis line {
  stroke: var(--vv-color-border-light);
}

.vv-drawing__axis text {
  font-size: 9px;
  fill: var(--vv-color-text-secondary);
}

/* Historical data (solid line, non-interactive) */
.vv-drawing__historical-line {
  fill: none;
  stroke: var(--vv-color-gray-40);
  stroke-width: 2;
}

.vv-drawing__historical-dot {
  fill: var(--vv-color-gray-40);
}

/* Forecast line (dashed, connected to control points) */
.vv-drawing__forecast-line {
  fill: none;
  stroke: var(--vv-color-interactive);
  stroke-width: 2;
  stroke-dasharray: 6 3;
}

/* Control points (draggable) */
.vv-drawing__control-point {
  fill: var(--vv-color-surface-primary);
  stroke: var(--vv-color-interactive);
  stroke-width: 2;
  cursor: grab;
  transition: r 100ms ease, stroke-width 100ms ease;
}

.vv-drawing__control-point:hover {
  r: 8;
  stroke-width: 3;
}

.vv-drawing__control-point--active {
  r: 8;
  stroke-width: 3;
  cursor: grabbing;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Ghost line (market consensus trajectory) */
.vv-drawing__ghost-line {
  fill: none;
  stroke: var(--vv-color-gray-30);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}

.vv-drawing__ghost-label {
  font-size: 9px;
  fill: var(--vv-color-gray-40);
  font-style: italic;
}

/* Constraint lines (industry max) - gray-70 for neutral contrast on all terrain */
.vv-drawing__constraint-line {
  stroke: var(--vv-color-gray-70);
  stroke-dasharray: 4 2;
  stroke-width: 1;
}

/* Metrics panel at bottom */
.vv-drawing__metrics-panel rect {
  fill: var(--vv-color-surface-tertiary);
}

.vv-drawing__metrics-panel text {
  font-size: 11px;
  fill: var(--vv-color-text-primary);
}

/* Dark mode overrides */
[data-theme="dark"] .vv-drawing__chart-bg {
  fill: var(--vv-color-surface-secondary);
}

[data-theme="dark"] .vv-drawing__forecast-region {
  fill: var(--vv-color-blue-90);
  opacity: 0.2;
}

[data-theme="dark"] .vv-drawing__historical-line {
  stroke: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-drawing__historical-dot {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-drawing__control-point {
  fill: var(--vv-color-surface-primary);
  stroke: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-drawing__constraint-line {
  stroke: var(--vv-color-gray-50);  /* lighter in dark mode for visibility */
}

/* ============================================================================
   FAIR VALUE RANGE (J7.1)

   Horizontal bar showing Bear/Base/Bull scenarios with current price marker.
   High data-ink ratio (Tufte), accessible (CLAUDE.md Section 5).
   ============================================================================ */

.vv-fair-value-range {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
  user-select: none;
  max-width: 100%;
  height: auto;
}

/* Track background */
.vv-fair-value-range__track {
  fill: var(--vv-color-gray-10);
  stroke: var(--vv-color-border-light);
  stroke-width: 1;
}

/* Filled range between min and max scenarios */
.vv-fair-value-range__range-fill {
  fill: var(--vv-color-gray-20);
}

/* Scenario markers (Bear/Base/Bull vertical lines) */
.vv-fair-value-range__marker {
  stroke: var(--vv-color-gray-50);
  stroke-width: 2;
}

.vv-fair-value-range__marker--bear {
  stroke: var(--vv-color-orange-40);
}

.vv-fair-value-range__marker--base {
  stroke: var(--vv-color-gray-70);
}

.vv-fair-value-range__marker--bull {
  stroke: var(--vv-color-cyan-50);
}

/* Scenario diamond markers */
.vv-fair-value-range__diamond {
  fill: var(--vv-color-surface-primary);
  stroke: var(--vv-color-gray-50);
  stroke-width: 1.5;
}

.vv-fair-value-range__diamond--bear {
  fill: var(--vv-color-orange-5);
  stroke: var(--vv-color-orange-40);
}

.vv-fair-value-range__diamond--base {
  fill: var(--vv-color-gray-5);
  stroke: var(--vv-color-gray-70);
}

.vv-fair-value-range__diamond--bull {
  fill: var(--vv-color-cyan-5);
  stroke: var(--vv-color-cyan-50);
}

/* Scenario labels (Bear/Base/Bull text) */
.vv-fair-value-range__scenario-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps, 0.05em);
}

/* Scenario values (₹265, ₹371, etc.) */
.vv-fair-value-range__scenario-value {
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-primary);
}

/* Current price group */
.vv-fair-value-range__current-price {
  transition: transform 200ms ease-out;
}

/* Current price vertical line (dashed) */
.vv-fair-value-range__current-line {
  stroke: var(--vv-color-signal-overvalued);
  stroke-width: 2;
  stroke-dasharray: 4 2;
}

.vv-fair-value-range__current-price--undervalued .vv-fair-value-range__current-line {
  stroke: var(--vv-color-signal-undervalued);
}

.vv-fair-value-range__current-price--fair .vv-fair-value-range__current-line {
  stroke: var(--vv-color-gray-50);
}

/* Current price circle marker */
.vv-fair-value-range__current-marker {
  fill: var(--vv-color-signal-overvalued);
  stroke: var(--vv-color-surface-primary);
  stroke-width: 2;
}

.vv-fair-value-range__current-price--undervalued .vv-fair-value-range__current-marker {
  fill: var(--vv-color-signal-undervalued);
}

.vv-fair-value-range__current-price--fair .vv-fair-value-range__current-marker {
  fill: var(--vv-color-gray-50);
}

/* Current price label */
.vv-fair-value-range__current-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-signal-overvalued);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps, 0.05em);
}

.vv-fair-value-range__current-price--undervalued .vv-fair-value-range__current-label {
  fill: var(--vv-color-signal-undervalued);
}

.vv-fair-value-range__current-price--fair .vv-fair-value-range__current-label {
  fill: var(--vv-color-gray-50);
}

/* Current price value */
.vv-fair-value-range__current-value {
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-signal-overvalued);
}

.vv-fair-value-range__current-price--undervalued .vv-fair-value-range__current-value {
  fill: var(--vv-color-signal-undervalued);
}

.vv-fair-value-range__current-price--fair .vv-fair-value-range__current-value {
  fill: var(--vv-color-gray-70);
}

/* Dark mode overrides */
[data-theme="dark"] .vv-fair-value-range__track {
  fill: var(--vv-color-gray-70);
  stroke: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-fair-value-range__range-fill {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-fair-value-range__diamond {
  fill: var(--vv-color-gray-70);
}

[data-theme="dark"] .vv-fair-value-range__diamond--bear {
  fill: var(--vv-color-orange-40);
  stroke: var(--vv-color-orange-30);
}

[data-theme="dark"] .vv-fair-value-range__diamond--base {
  fill: var(--vv-color-gray-50);
  stroke: var(--vv-color-gray-30);
}

[data-theme="dark"] .vv-fair-value-range__diamond--bull {
  fill: var(--vv-color-cyan-50);
  stroke: var(--vv-color-cyan-30);
}

[data-theme="dark"] .vv-fair-value-range__scenario-label {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-fair-value-range__scenario-value {
  fill: var(--vv-color-text-primary);
}

[data-theme="dark"] .vv-fair-value-range__current-marker {
  stroke: var(--vv-color-surface-secondary);
}

/* ============================================================================
   VALUE COMPOSITION BAR (S1B.4)

   Horizontal stacked bar showing time-horizon breakdown of fair value.
   Answers: "How much value comes from near-term vs. distant future?"
   ============================================================================ */

.vv-composition-bar {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
  user-select: none;
  max-width: 100%;
  height: auto;
}

/* Segment rectangles */
.vv-composition-bar__rect {
  transition: opacity var(--vv-transition-fast), filter var(--vv-transition-fast);
}

/* Segment hover state */
.vv-composition-bar__segment--active .vv-composition-bar__rect {
  opacity: 0.85;
  filter: brightness(1.1);
}

/* Percentage labels inside segments */
.vv-composition-bar__percent {
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-text-primary);
  pointer-events: none;
}

/* Segment type labels below bar */
.vv-composition-bar__label {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-secondary);
  pointer-events: none;
}

/* Segment-specific colors (using existing design tokens) */
.vv-composition-bar__segment--near-term .vv-composition-bar__rect {
  fill: var(--vv-color-blue-50);
}

.vv-composition-bar__segment--growth-phase .vv-composition-bar__rect {
  fill: var(--vv-color-blue-30);
}

.vv-composition-bar__segment--terminal .vv-composition-bar__rect {
  fill: var(--vv-color-gray-30);
}

/* Text contrast for different segment backgrounds */
/* Near-term (dark blue): white text for contrast */
.vv-composition-bar__segment--near-term .vv-composition-bar__percent {
  fill: #ffffff;
}

/* Growth-phase (light blue): dark text for contrast */
.vv-composition-bar__segment--growth-phase .vv-composition-bar__percent {
  fill: var(--vv-color-gray-90);
}

/* Terminal (gray): dark text for contrast */
.vv-composition-bar__segment--terminal .vv-composition-bar__percent {
  fill: var(--vv-color-gray-90);
}

/* ============================================================================
   VALUE COMPOSITION BAR - Dark Mode
   ============================================================================ */

[data-theme="dark"] .vv-composition-bar__segment--near-term .vv-composition-bar__rect {
  fill: var(--vv-color-blue-50);
}

[data-theme="dark"] .vv-composition-bar__segment--growth-phase .vv-composition-bar__rect {
  fill: var(--vv-color-blue-30);
}

[data-theme="dark"] .vv-composition-bar__segment--terminal .vv-composition-bar__rect {
  fill: var(--vv-color-gray-30);
}

/* Dark mode text contrast */
[data-theme="dark"] .vv-composition-bar__segment--near-term .vv-composition-bar__percent {
  fill: #ffffff;
}

[data-theme="dark"] .vv-composition-bar__segment--growth-phase .vv-composition-bar__percent {
  fill: var(--vv-color-gray-90);
}

[data-theme="dark"] .vv-composition-bar__segment--terminal .vv-composition-bar__percent {
  fill: var(--vv-color-gray-90);
}

[data-theme="dark"] .vv-composition-bar__label {
  fill: var(--vv-color-text-secondary);
}

/* ============================================================================
   VALUE BUILDUP CHART (P2.2)

   Year-by-year shareholder value visualization for Mauboussin MIFP.
   Shows value accumulating until it matches the current stock price.
   ============================================================================ */

.vv-buildup-chart {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
  user-select: none;
  max-width: 100%;
  height: auto;
}

/* Axes */
.vv-buildup-chart__x-axis text {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
}

.vv-buildup-chart__y-axis text {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-secondary);
}

/* Price reference line */
.vv-buildup-chart__price-line {
  stroke: var(--vv-color-signal-overvalued);
  stroke-width: 2;
  stroke-dasharray: 6 3;
}

.vv-buildup-chart__price-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-signal-overvalued);
}

/* Bars - progressive blue intensity */
.vv-buildup-chart__bar {
  transition: opacity var(--vv-transition-fast), filter var(--vv-transition-fast);
}

.vv-buildup-chart__bar--hover {
  filter: brightness(1.15);
  opacity: 0.9;
}

/* MIFP year highlight - gold/insight color */
.vv-buildup-chart__bar--mifp {
  fill: var(--vv-color-insight) !important;
}

/* Years that reach the price - cyan tint */
.vv-buildup-chart__bar--reached {
  fill: var(--vv-color-cyan-40);
}

/* Value labels at end of bars */
.vv-buildup-chart__value-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-secondary);
}

/* MIFP indicator arrow */
.vv-buildup-chart__mifp-indicator {
  fill: var(--vv-color-insight);
}

.vv-buildup-chart__mifp-label {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  fill: var(--vv-color-insight);
}

/* ============================================================================
   VALUE BUILDUP CHART - Dark Mode
   ============================================================================ */

[data-theme="dark"] .vv-buildup-chart__x-axis text {
  fill: var(--vv-color-text-tertiary);
}

[data-theme="dark"] .vv-buildup-chart__y-axis text {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-buildup-chart__price-line {
  stroke: var(--vv-color-signal-overvalued);
}

[data-theme="dark"] .vv-buildup-chart__price-label {
  fill: var(--vv-color-signal-overvalued);
}

[data-theme="dark"] .vv-buildup-chart__value-label {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-buildup-chart__mifp-indicator {
  fill: var(--vv-color-insight);
}

[data-theme="dark"] .vv-buildup-chart__mifp-label {
  fill: var(--vv-color-insight);
}

/* ============================================================================
   MIFP SLIDER COMPONENT (P2.5)
   Interactive forecast period exploration slider
   ============================================================================ */

.vv-mifp-slider-container {
  margin: var(--vv-space-5) 0;
  min-height: 100px;
}

.vv-mifp-slider {
  font-family: var(--vv-font-family-sans, 'IBM Plex Sans', system-ui, sans-serif);
  user-select: none;
  max-width: 100%;
  height: auto;
}

/* Track */
.vv-mifp-slider__track-bg {
  fill: var(--vv-color-gray-20);
  transition: fill var(--vv-transition-fast);
}

.vv-mifp-slider__track-fill {
  fill: var(--vv-color-interactive);
  transition: width var(--vv-transition-fast);
}

/* Ticks */
.vv-mifp-slider__tick-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
}

/* Market reference marker */
.vv-mifp-slider__market-marker path {
  fill: var(--vv-color-gray-50);
  stroke: white;
  stroke-width: 1.5;
}

.vv-mifp-slider__market-marker text {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-sans);
  fill: var(--vv-color-gray-50);
}

/* User handle */
.vv-mifp-slider__user-handle {
  cursor: ew-resize;
}

.vv-mifp-slider__user-glow {
  fill: var(--vv-color-interactive);
  transition: opacity var(--vv-transition-fast);
}

.vv-mifp-slider__user-circle {
  fill: var(--vv-color-interactive);
  stroke: white;
  stroke-width: 2;
  transition: transform var(--vv-transition-fast);
}

.vv-mifp-slider__user-handle:hover .vv-mifp-slider__user-circle,
.vv-mifp-slider__user-handle--active .vv-mifp-slider__user-circle {
  transform: scale(1.1);
}

.vv-mifp-slider__user-year {
  font-size: 10px;
  font-weight: 600;
  fill: white;
  pointer-events: none;
}

/* Labels */
.vv-mifp-slider__label {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  fill: var(--vv-color-text-primary);
}

/* Value display */
.vv-mifp-slider__value-label {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-secondary);
}

.vv-mifp-slider__value-amount {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-interactive);
}

.vv-mifp-slider__gap {
  font-size: var(--vv-font-size-xs);
}

/* ============================================================================
   MIFP SLIDER - Dark Mode
   ============================================================================ */

[data-theme="dark"] .vv-mifp-slider__track-bg {
  fill: var(--vv-color-gray-70);
}

[data-theme="dark"] .vv-mifp-slider__track-fill {
  fill: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-mifp-slider__tick-label {
  fill: var(--vv-color-text-tertiary);
}

[data-theme="dark"] .vv-mifp-slider__market-marker path {
  fill: var(--vv-color-gray-40);
  stroke: var(--vv-color-gray-80);
}

[data-theme="dark"] .vv-mifp-slider__market-marker text {
  fill: var(--vv-color-gray-40);
}

[data-theme="dark"] .vv-mifp-slider__user-circle {
  stroke: var(--vv-color-gray-80);
}

[data-theme="dark"] .vv-mifp-slider__label {
  fill: var(--vv-color-text-primary);
}

[data-theme="dark"] .vv-mifp-slider__value-label {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-mifp-slider__value-amount {
  fill: var(--vv-color-interactive);
}

/* ============================================================================
   RANGE IMPACT SLIDER (J5.1 — Sensitivity Analysis)
   Dual-handle range slider for exploring value driver sensitivity.
   Visual grammar: blue handles = user, gray diamond = market, dotted = actual.
   ============================================================================ */

.vv-range-slider {
  font-family: var(--vv-font-family-sans);
  user-select: none;
  max-width: 100%;
  height: auto;
}

/* Track background — full-width thin bar */
.vv-range-slider__track-bg {
  fill: var(--vv-color-gray-10);
  stroke: var(--vv-color-border-light);
  stroke-width: 1;
}

/* Base rate band — semi-transparent peer/sector range (J5.6) */
.vv-range-slider__base-rate-band {
  fill: var(--vv-color-gray-30);
  opacity: 0.20;
  stroke: var(--vv-color-gray-30);
  stroke-width: 0.5;
  stroke-opacity: 0.3;
  stroke-dasharray: 3 2;
  pointer-events: none;
}

/* Base rate "Peers" label — direct labeling per Tufte */
.vv-range-slider__base-rate-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-sans);
  fill: var(--vv-color-gray-50);
  pointer-events: none;
}

/* Range highlight — colored segment between low and high handles */
.vv-range-slider__range-highlight {
  fill: var(--vv-color-interactive);
  opacity: 0.3;
  transition: x 60ms ease-out, width 60ms ease-out;
}

/* Handle circles — user-controlled (blue) */
.vv-range-slider__handle-circle {
  fill: var(--vv-color-interactive);
  transition: transform 100ms ease-out;
}

.vv-range-slider__handle--active .vv-range-slider__handle-circle {
  transform: scale(1.2);
}

.vv-range-slider__handle:focus .vv-range-slider__handle-circle {
  stroke: var(--vv-color-interactive-hover);
  stroke-width: 3;
}

.vv-range-slider__handle {
  outline: none;
}

/* Handle value labels — above each handle */
.vv-range-slider__handle-value {
  font-size: var(--vv-font-size-xs);
  font-weight: 600;
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-interactive);
}

/* ── J15.3: Default (unexplored) handle styling ──────────────────────────── */
/* Gray handles = factbook defaults the user hasn't made their own yet.       */
/* Blue handles (default) = user has explored and saved their own ranges.     */
/* Transition animates the gray→blue shift on first drag interaction.         */

.vv-range-slider--default .vv-range-slider__handle-circle {
  fill: var(--vv-color-gray-50);
  transition: fill 300ms ease-out, transform 100ms ease-out;
}

.vv-range-slider--default .vv-range-slider__handle-value {
  fill: var(--vv-color-gray-50);
  transition: fill 300ms ease-out;
}

.vv-range-slider--default .vv-range-slider__range-highlight {
  fill: var(--vv-color-gray-50);
  transition: fill 300ms ease-out, x 60ms ease-out, width 60ms ease-out;
}

/* Ensure smooth transition back to blue when user takes ownership */
.vv-range-slider__handle-circle {
  transition: fill 300ms ease-out, transform 100ms ease-out;
}

.vv-range-slider__handle-value {
  transition: fill 300ms ease-out;
}

/* Market diamond — gray, non-draggable (PIE-implied) */
.vv-range-slider__market-diamond path {
  fill: var(--vv-color-gray-30);
  stroke: var(--vv-color-gray-50);
  opacity: 0.8;
}

.vv-range-slider__market-diamond {
  cursor: default;
  pointer-events: none;
}

.vv-range-slider__market-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
}

/* Current actual — dotted vertical line (constraint grammar) */
.vv-range-slider__current-line {
  stroke: var(--vv-color-gray-70);
  stroke-width: 1.5;
  pointer-events: none;
}

.vv-range-slider__current-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-secondary);
}

/* Tick marks and endpoint labels */
.vv-range-slider__tick-line {
  stroke: var(--vv-color-gray-30);
}

.vv-range-slider__tick-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
}

/* Main label — metric name */
.vv-range-slider__label {
  font-size: var(--vv-font-size-sm);
  font-weight: 600;
  fill: var(--vv-color-text-secondary);
}

/* Rank badge — subtle right-aligned */
.vv-range-slider__rank {
  font-size: var(--vv-font-size-xs);
  fill: var(--vv-color-text-tertiary);
}

/* ── Impact Bar (J5.4) — fair value range below slider ───────────────────── */

.vv-range-slider__impact-svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: -4px; /* Tighten gap between slider and impact bar */
}

.vv-range-slider__impact-track {
  fill: var(--vv-color-gray-10);
  stroke: var(--vv-color-border-light);
  stroke-width: 0.5;
}

.vv-range-slider__impact-bar {
  fill: var(--vv-color-interactive);
  opacity: 0.5;
  transition: x 60ms ease-out, width 60ms ease-out;
}

.vv-range-slider__impact-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  font-weight: 600;
  fill: var(--vv-color-interactive);
}

.vv-range-slider__impact-spread {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-tertiary);
  transition: opacity 150ms ease-out;
}

.vv-range-slider__impact-price-line {
  stroke: var(--vv-color-text-primary);
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}

.vv-range-slider__impact-price-label {
  font-size: var(--vv-font-size-xs);
  font-family: var(--vv-font-family-mono);
  fill: var(--vv-color-text-secondary);
}

/* ── Sensitivity Sliders Container ────────────────────────────────────────── */

.vv-sensitivity-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);
}

.vv-sensitivity-slider-wrap {
  /* Marginless per Road Runner Rule 4 — layout owns spacing via gap */
}

/* ── Dark Mode Overrides ──────────────────────────────────────────────────── */

[data-theme="dark"] .vv-range-slider__track-bg {
  fill: var(--vv-color-gray-20);
  stroke: var(--vv-color-gray-30);
}

[data-theme="dark"] .vv-range-slider__handle-circle {
  fill: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-range-slider__handle-value {
  fill: var(--vv-color-interactive);
}

/* J15.3: Default (unexplored) handles in dark mode — same gray token is theme-aware */
[data-theme="dark"] .vv-range-slider--default .vv-range-slider__handle-circle {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-range-slider--default .vv-range-slider__handle-value {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-range-slider--default .vv-range-slider__range-highlight {
  fill: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-range-slider__current-line {
  stroke: var(--vv-color-gray-70);
}

[data-theme="dark"] .vv-range-slider__label {
  fill: var(--vv-color-text-secondary);
}

[data-theme="dark"] .vv-range-slider__impact-track {
  fill: var(--vv-color-gray-20);
  stroke: var(--vv-color-gray-30);
  stroke-width: 0.5;
}

[data-theme="dark"] .vv-range-slider__impact-bar {
  fill: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-range-slider__impact-price-line {
  stroke: var(--vv-color-text-primary);
}

/* Peer range band — needs solid lighter fill to be visible on dark backgrounds */
[data-theme="dark"] .vv-range-slider__base-rate-band {
  fill: var(--vv-color-gray-30);
  opacity: 0.5;
  stroke: var(--vv-color-gray-50);
  stroke-opacity: 0.6;
}

/* "Peers" label — needs lighter fill for WCAG AA on dark surface */
[data-theme="dark"] .vv-range-slider__base-rate-label {
  fill: var(--vv-color-text-tertiary);
}

/* PIE diamond — gray-30 is invisible on dark; bump to gray-60 fill + gray-70 stroke */
[data-theme="dark"] .vv-range-slider__market-diamond path {
  fill: var(--vv-color-gray-60);
  stroke: var(--vv-color-gray-70);
}

/* PIE label */
[data-theme="dark"] .vv-range-slider__market-label {
  fill: var(--vv-color-text-secondary);
}

/* Current actual label */
[data-theme="dark"] .vv-range-slider__current-label {
  fill: var(--vv-color-text-secondary);
}

/* Tick labels (min/max endpoints) */
[data-theme="dark"] .vv-range-slider__tick-label {
  fill: var(--vv-color-text-secondary);
}

/* Tick lines */
[data-theme="dark"] .vv-range-slider__tick-line {
  stroke: var(--vv-color-gray-50);
}

/* Rank badge (#N sensitivity) */
[data-theme="dark"] .vv-range-slider__rank {
  fill: var(--vv-color-text-tertiary);
}

/* Impact price labels (low/high values) */
[data-theme="dark"] .vv-range-slider__impact-label {
  fill: var(--vv-color-interactive);
}

/* Impact spread text */
[data-theme="dark"] .vv-range-slider__impact-spread {
  fill: var(--vv-color-text-tertiary);
}

/* Impact price label (current price reference) */
[data-theme="dark"] .vv-range-slider__impact-price-label {
  fill: var(--vv-color-text-secondary);
}

/* ── Impact Bar Error State (J9.5) — invalid DCF during drag ─────────── */
/* Shows when extreme slider values produce NaN or negative-equity results.
   Uses warning tokens (orange) matching the J5.7 historical warning pattern.
   Semantic tokens auto-adapt to dark mode — no component-specific overrides. */

.vv-range-slider__impact-bar--error {
  opacity: 0;
}

.vv-range-slider__impact-label--error {
  fill: var(--vv-color-warning);
}

.vv-range-slider__impact-spread--error {
  fill: var(--vv-color-signal-overvalued);
  font-family: var(--vv-font-family-sans);
  font-style: italic;
}

/* ── Historical Warning (J5.7) — orange alert below slider ─────────────── */
/* Follows GhostSlider J4.7 pattern: hidden by default, revealed on threshold.
   Uses semantic tokens — no component-specific dark mode CSS needed. */

.vv-range-slider__historical-warning {
  margin-top: var(--vv-space-2);
  padding: 0;
  background: var(--vv-color-signal-overvalued-bg);
  border-left: 3px solid var(--vv-color-warning);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
  font-size: var(--vv-font-size-sm);
  font-family: var(--vv-font-family-sans);
  color: var(--vv-color-signal-overvalued);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--vv-transition-normal), max-height var(--vv-transition-normal);
}

.vv-range-slider__historical-warning--visible {
  opacity: 1;
  max-height: 80px;  /* Accommodates two-line warnings (both handles exceed) */
  padding: var(--vv-space-2) var(--vv-space-3);
}

/* Dark mode: no override needed. Semantic tokens (--vv-color-signal-overvalued-bg,
   --vv-color-warning, --vv-color-signal-overvalued) are redefined at
   [data-theme="dark"] boundary per Road Runner Rule 9. */