/**
 * VariantView Components
 *
 * Component Inventory:
 * 0. Stock Page Layout (Three-Column Grid)
 * 1. Stock Header with Signal Badge
 * 2. Signal Badges (OVERVALUED, UNDERVALUED, FAIRLY_VALUED)
 * 3. Narrative Blockquote (AI Summary)
 * 4. Interactive Number (Tangle-style)
 * 5. Tables (Sensitivity, Scenario, Peer, Decision)
 * 6. Expandable Panel (DCF Math)
 * 7. Data Quality Indicator
 * 8. Key Factors List
 * 9. Risks List
 * 10. Green/Red Flags
 * 11. Card (generic)
 * 12. Skeleton Loading States
 * 13. Buttons
 * 14. Theme Toggle
 * 15. Qualitative Factors (Tufte-aligned alternative to 8-10)
 */

/* ════════════════════════════════════════════════════════════════════════════
   0. STOCK PAGE LAYOUT (Three-Column Grid)

   Four-column CSS Grid: Navigation | Reading | Context | Buffer
   - Navigation: Stock header, mini-summary, section list
   - Reading: Main content with prose + full-width visualizations
   - Context: Sticky sidebar with assumptions, triggers, glossary
   - Buffer: Absorbs extra space on wide screens (Gestalt proximity)

   Design principles:
   - Gestalt proximity: Content columns stay snapped together
   - WAI readability: Prose capped at 70em (~80 characters)
   - Tufte density: Tighter 32px gaps
   - Bret Victor: Context pane stays adjacent for immediate feedback
   ════════════════════════════════════════════════════════════════════════════ */

.vv-stock-page {
  display: grid;
  grid-template-columns:
    minmax(var(--vv-layout-nav-min), var(--vv-layout-nav-max))
    minmax(var(--vv-layout-reading-min), var(--vv-layout-reading-max))
    minmax(var(--vv-layout-context-min), var(--vv-layout-context-max))
    1fr;
  gap: var(--vv-layout-gap);
  align-content: start;
  min-height: 100vh;
  padding: var(--vv-layout-gap);

  /* Positioning context for collapsed nav hover-to-expand overlay (L4.2) */
  position: relative;
}

/* ────────────────────────────────────────────────────────────────────────────
   0a. RESPONSIVE: Standard Desktop (1100px – 1399px) [L7.2]

   At viewports below 1400px, the 4-column layout (with buffer) doesn't fit.
   Remove the buffer column and let the Reading pane flex to fill space.

   Grid changes:
   - Navigation: 240-300px (reduced max from 320px)
   - Reading: 500px min, flexible 1fr (no max constraint)
   - Context: 280-400px (reduced from 320-50ch)
   - Buffer: removed
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1399px) {
  .vv-stock-page {
    grid-template-columns:
      minmax(240px, 300px)
      minmax(500px, 1fr)
      minmax(280px, 400px);
  }

  /* Hide buffer indicator in standard desktop layout */
  .vv-buffer-indicator {
    display: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   0a-2. RESPONSIVE: Collapsed Navigation (900px – 1099px) [L7.3]

   At viewports between 900px and 1099px, navigation collapses to icons
   automatically without requiring the .vv-nav--collapsed class.
   This is the narrowest supported desktop layout.

   Grid changes:
   - Navigation: fixed 60px (collapsed icon strip)
   - Reading: 450px min, flexible 1fr
   - Context: 280-360px (slightly reduced)

   The navigation auto-collapses to show:
   - Ticker abbreviation
   - Signal indicator dot
   - Section number icons (1, 2, 3, 4)

   Hover/focus expands the nav as an overlay (inherits from L4.2 styles).
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1099px) {
  /* Grid layout with collapsed navigation column */
  .vv-stock-page {
    grid-template-columns:
      60px
      minmax(450px, 1fr)
      minmax(280px, 360px);
  }

  /* ── Auto-collapse navigation at this breakpoint ────────────────────────── */

  /* Fixed width for icon strip */
  .vv-nav {
    width: var(--vv-layout-nav-collapsed);
    min-width: var(--vv-layout-nav-collapsed);
    max-width: var(--vv-layout-nav-collapsed);
    padding: var(--vv-space-3);
    overflow-y: visible;
    /* Transition for smooth hover-to-expand */
    transition:
      width 200ms ease-out,
      min-width 200ms ease-out,
      max-width 200ms ease-out,
      padding 200ms ease-out,
      box-shadow 200ms ease-out;
  }

  /* Collapsed header styling */
  .vv-nav .vv-nav__header {
    padding-bottom: var(--vv-space-3);
    text-align: center;
  }

  /* Hide elements in collapsed state */
  .vv-nav .vv-nav__name,
  .vv-nav .vv-nav__price-change,
  .vv-nav .vv-nav__summary,
  .vv-nav .vv-nav__section-label,
  .vv-nav .vv-nav__subsections {
    display: none;
  }

  /* Hide section text (keep only number) */
  .vv-nav .vv-nav__section-link > span:not(.vv-nav__section-num):not(.vv-nav__unseen-badge) {
    display: none;
  }

  /* Ticker styling */
  .vv-nav .vv-nav__ticker {
    display: block;
    font-size: var(--vv-font-size-sm);
    text-align: center;
    margin-bottom: var(--vv-space-2);
  }

  /* Price styling */
  .vv-nav .vv-nav__price-row {
    justify-content: center;
  }

  .vv-nav .vv-nav__price {
    font-size: var(--vv-font-size-sm);
  }

  /* Signal badge becomes dot */
  .vv-nav .vv-nav__signal {
    margin-top: var(--vv-space-2);
    display: flex;
    justify-content: center;
  }

  .vv-nav .vv-signal-badge {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    padding: 0;
    font-size: 0;
    border-radius: var(--vv-radius-full);
  }

  /* Section list becomes vertical icon strip */
  .vv-nav .vv-nav__sections {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vv-space-2);
  }

  .vv-nav .vv-nav__section-item {
    margin-bottom: 0;
  }

  .vv-nav .vv-nav__section-link {
    width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
    border-radius: var(--vv-radius-md);
    position: relative;
  }

  .vv-nav .vv-nav__section-num {
    width: 100%;
    height: 100%;
    font-size: var(--vv-font-size-sm);
  }

  /* Unseen badge becomes corner dot */
  .vv-nav .vv-nav__unseen-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 0.75rem;
    height: 0.75rem;
    min-width: 0.75rem;
    padding: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    border-radius: var(--vv-radius-full);
  }

  /* ── Hover-to-expand behavior at this breakpoint ────────────────────────── */

  .vv-nav:hover,
  .vv-nav:focus-within {
    /* Expand to full nav width - stays in grid flow, overflows into Reading Pane */
    width: var(--vv-layout-nav-max);
    min-width: var(--vv-layout-nav-min);
    max-width: var(--vv-layout-nav-max);

    /* NO position: absolute - nav stays in grid column 1, just overflows */
    /* The grid column remains 60px, preventing layout shift */

    /* Restore full padding */
    padding: var(--vv-space-4);

    /* Visual separation from Reading pane */
    box-shadow: var(--vv-shadow-xl);
    z-index: var(--vv-z-dropdown);
  }

  /* Restore hidden elements on hover/focus */
  .vv-nav:hover .vv-nav__name,
  .vv-nav:hover .vv-nav__price-change,
  .vv-nav:hover .vv-nav__summary,
  .vv-nav:hover .vv-nav__section-label,
  .vv-nav:hover .vv-nav__subsections,
  .vv-nav:focus-within .vv-nav__name,
  .vv-nav:focus-within .vv-nav__price-change,
  .vv-nav:focus-within .vv-nav__summary,
  .vv-nav:focus-within .vv-nav__section-label,
  .vv-nav:focus-within .vv-nav__subsections {
    display: block;
  }

  /* Restore section link text on hover */
  .vv-nav:hover .vv-nav__section-link > span:not(.vv-nav__section-num):not(.vv-nav__unseen-badge),
  .vv-nav:focus-within .vv-nav__section-link > span:not(.vv-nav__section-num):not(.vv-nav__unseen-badge) {
    display: inline;
  }

  /* Restore header styling */
  .vv-nav:hover .vv-nav__header,
  .vv-nav:focus-within .vv-nav__header {
    padding-bottom: var(--vv-space-4);
    text-align: left;
  }

  /* Restore ticker styling */
  .vv-nav:hover .vv-nav__ticker,
  .vv-nav:focus-within .vv-nav__ticker {
    display: inline-block;
    text-align: left;
    margin-bottom: 0;
  }

  /* Restore price row */
  .vv-nav:hover .vv-nav__price-row,
  .vv-nav:focus-within .vv-nav__price-row {
    justify-content: flex-start;
  }

  .vv-nav:hover .vv-nav__price,
  .vv-nav:focus-within .vv-nav__price {
    font-size: var(--vv-font-size-lg);
  }

  /* Restore signal badge styling */
  .vv-nav:hover .vv-nav__signal,
  .vv-nav:focus-within .vv-nav__signal {
    margin-top: var(--vv-space-3);
    justify-content: flex-start;
  }

  .vv-nav:hover .vv-signal-badge,
  .vv-nav:focus-within .vv-signal-badge {
    width: auto;
    height: auto;
    min-width: auto;
    padding: var(--vv-space-1) var(--vv-space-2);
    font-size: var(--vv-font-size-xs);
    border-radius: var(--vv-radius-sm);
  }

  /* Restore section list styling */
  .vv-nav:hover .vv-nav__sections,
  .vv-nav:focus-within .vv-nav__sections {
    display: block;
    align-items: stretch;
    gap: 0;
  }

  .vv-nav:hover .vv-nav__section-item,
  .vv-nav:focus-within .vv-nav__section-item {
    margin-bottom: var(--vv-space-1);
  }

  .vv-nav:hover .vv-nav__section-link,
  .vv-nav:focus-within .vv-nav__section-link {
    width: auto;
    height: auto;
    padding: var(--vv-space-2) var(--vv-space-3);
    justify-content: flex-start;
    border-radius: var(--vv-radius-sm);
  }

  .vv-nav:hover .vv-nav__section-num,
  .vv-nav:focus-within .vv-nav__section-num {
    width: auto;
    height: auto;
    font-size: var(--vv-font-size-sm);
  }

  /* Restore unseen badge styling */
  .vv-nav:hover .vv-nav__unseen-badge,
  .vv-nav:focus-within .vv-nav__unseen-badge {
    position: static;
    width: auto;
    height: auto;
    min-width: auto;
    padding: var(--vv-space-1);
    font-size: var(--vv-font-size-xs);
    color: var(--vv-color-text-on-interactive);
    overflow: visible;
    border-radius: var(--vv-radius-full);
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   0b. READING PANE CONTENT WIDTHS (Tufte Pattern)

   Following Tufte CSS and WAI readability guidelines:
   - Prose text: max-width 70em (~80 characters) for comfortable reading
   - Visualizations: full column width for data density
   - Tables: full width with horizontal scroll on overflow

   References:
   - WAI: https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length
   - Tufte CSS: https://edwardtufte.github.io/tufte-css/
   ──────────────────────────────────────────────────────────────────────────── */

/* Reading Pane container - lives in the second grid column */
.vv-reading-pane {
  max-width: var(--vv-layout-reading-max);
}

/* Prose text - constrained for comfortable reading (WAI: 70em ≈ 80 chars)
 * Use for narrative summaries, explanatory text, and analysis prose.
 * Line-height relaxed for long-form reading comfort. */
.vv-prose {
  max-width: 70em;
  line-height: var(--vv-line-height-relaxed);
}

/* Prose direct children get vertical rhythm via margins
 * Exception to Road Runner Rule 3 for typographic rhythm */
.vv-prose > p,
.vv-prose > h1,
.vv-prose > h2,
.vv-prose > h3,
.vv-prose > h4,
.vv-prose > ul,
.vv-prose > ol,
.vv-prose > blockquote {
  margin-bottom: var(--vv-space-4);
}

.vv-prose > *:last-child {
  margin-bottom: 0;
}

/* Full-width visualization - breaks out of prose constraint
 * Use for Ghost Sliders, charts, and interactive visualizations.
 * Tufte: "Use all the data-ink available for dense information display" */
.vv-viz-full {
  max-width: none;
  width: 100%;
  margin-top: var(--vv-space-5);
  margin-bottom: var(--vv-space-5);
}

/* Full-width table - breaks out of prose constraint with scroll
 * Use for DCF tables, sensitivity matrices, and data grids.
 * Includes horizontal scroll for narrow viewports. */
.vv-table-full {
  max-width: none;
  width: 100%;
  overflow-x: auto;
  margin-top: var(--vv-space-5);
  margin-bottom: var(--vv-space-5);
}

/* Ensure tables inside .vv-table-full expand properly */
.vv-table-full > table {
  min-width: 100%;
}

/* Sticky first column for horizontal scroll (L5.2)
 * The first column (typically row labels like "Year" or metric names)
 * stays visible when scrolling horizontally through many data columns.
 * Use .vv-table--sticky-col on the table to enable. */
.vv-table-full .vv-table--sticky-col th:first-child,
.vv-table-full .vv-table--sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: var(--vv-z-sticky);
  background-color: var(--vv-color-surface-secondary);
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
}

/* Ensure sticky cell backgrounds cover content when scrolling */
.vv-table-full .vv-table--sticky-col thead th:first-child {
  background-color: var(--vv-color-surface-tertiary);
}

/* Dark theme support for sticky columns */
[data-theme="dark"] .vv-table-full .vv-table--sticky-col th:first-child,
[data-theme="dark"] .vv-table-full .vv-table--sticky-col td:first-child {
  background-color: var(--vv-color-surface-secondary);
}

[data-theme="dark"] .vv-table-full .vv-table--sticky-col thead th:first-child {
  background-color: var(--vv-color-surface-tertiary);
}

/* ────────────────────────────────────────────────────────────────────────────
   0c. NAVIGATION PANE (L3.1)

   Left sidebar containing stock header, mini-summary, and section list.
   Uses sticky positioning to stay visible during scroll.
   Designed for expanded state (240-320px width via grid column).

   States:
   - Default: Expanded with full content visible
   - Collapsed (.vv-nav--collapsed): 60px icon strip (see L4.1)
   ──────────────────────────────────────────────────────────────────────────── */

.vv-nav {
  /* Sticky positioning within grid cell */
  position: sticky;
  top: var(--vv-layout-gap);
  align-self: start;

  /* Height constraints for scroll */
  max-height: calc(100vh - var(--vv-layout-gap) * 2);
  overflow-y: auto;

  /* Visual styling */
  background-color: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-md);
  border: 1px solid var(--vv-color-border-light);

  /* Internal spacing */
  padding: var(--vv-space-4);

  /* Typography */
  font-family: var(--vv-font-family-sans);
}

/* ────────────────────────────────────────────────────────────────────────────
   Navigation Header: Stock ticker, name, price, signal badge
   ──────────────────────────────────────────────────────────────────────────── */

.vv-nav__header {
  padding-bottom: var(--vv-space-4);
  border-bottom: 1px solid var(--vv-color-border-light);
  margin-bottom: var(--vv-space-4);
}

.vv-nav__ticker {
  display: inline-block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  letter-spacing: var(--vv-letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--vv-space-1);
}

.vv-nav__name {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-line-height-tight);
  margin-bottom: var(--vv-space-2);
  /* Allow text to wrap if company name is long */
  word-break: break-word;
}

.vv-nav__price-row {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  flex-wrap: wrap;
}

.vv-nav__price {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

.vv-nav__price-change {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
}

.vv-nav__price-change--positive {
  color: var(--vv-color-numeric-positive);
}

.vv-nav__price-change--negative {
  color: var(--vv-color-numeric-negative);
}

/* Signal badge in nav header */
.vv-nav__signal {
  margin-top: var(--vv-space-3);
}

/* ────────────────────────────────────────────────────────────────────────────
   Navigation Summary: Pre-commitment summary, key metrics
   ──────────────────────────────────────────────────────────────────────────── */

.vv-nav__summary {
  padding-bottom: var(--vv-space-4);
  border-bottom: 1px solid var(--vv-color-border-light);
  margin-bottom: var(--vv-space-4);
}

.vv-nav__summary-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin-bottom: var(--vv-space-2);
}

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

/* Key metrics list in summary */
.vv-nav__metrics {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
  margin-top: var(--vv-space-3);
}

.vv-nav__metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--vv-font-size-sm);
}

.vv-nav__metric-label {
  color: var(--vv-color-text-tertiary);
}

.vv-nav__metric-value {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
}

/* ────────────────────────────────────────────────────────────────────────────
   Navigation Sections: Hierarchical section list
   ──────────────────────────────────────────────────────────────────────────── */

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

.vv-nav__section-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin-bottom: var(--vv-space-2);
}

.vv-nav__section-item {
  margin-bottom: var(--vv-space-1);
}

.vv-nav__section-link {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-3);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-secondary);
  text-decoration: none;
  border-radius: var(--vv-radius-sm);
  transition: background-color var(--vv-transition-fast),
              color var(--vv-transition-fast);
}

.vv-nav__section-link:hover {
  background-color: var(--vv-color-surface-tertiary);
  color: var(--vv-color-text-primary);
}

.vv-nav__section-link--active {
  background-color: var(--vv-color-interactive-bg);
  color: var(--vv-color-interactive);
}

.vv-nav__section-link:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* Section number indicator */
.vv-nav__section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
  flex-shrink: 0;
}

.vv-nav__section-link--active .vv-nav__section-num {
  background-color: var(--vv-color-interactive);
  color: white;
}

/* Subsections (revealed on hover, L3.2) */
.vv-nav__subsections {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: calc(1.5rem + var(--vv-space-2));
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--vv-transition-normal),
              opacity var(--vv-transition-normal);
}

/* Click-to-expand subsections (not hover - avoids layout shift under cursor) */
.vv-nav__section-item--expanded .vv-nav__subsections {
  max-height: 200px;
  opacity: 1;
}

/* Keep focus-within for keyboard accessibility */
.vv-nav__section-item:focus-within .vv-nav__subsections {
  max-height: 200px;
  opacity: 1;
}

.vv-nav__subsection-link,
.vv-nav__subsection-link:visited {
  display: block;
  padding: var(--vv-space-1) var(--vv-space-3);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  text-decoration: none;
  border-radius: var(--vv-radius-sm);
  transition: color var(--vv-transition-fast),
              background-color var(--vv-transition-fast);
}

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

.vv-nav__subsection-link--active,
.vv-nav__subsection-link--active:visited {
  color: var(--vv-color-interactive);
}

/* Unseen changes badge */
.vv-nav__unseen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--vv-space-1);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  background-color: var(--vv-color-warning);
  color: white;
  border-radius: var(--vv-radius-full);
  margin-left: auto;
}

/* ────────────────────────────────────────────────────────────────────────────
   Dark theme overrides
   ──────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] .vv-nav {
  background-color: var(--vv-color-surface-secondary);
  border-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-nav__section-link:hover {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-nav__section-num {
  background-color: var(--vv-color-surface-tertiary);
}

/* Dark mode badge: dark text on light orange for WCAG AA contrast
   Note: Can't use gray-90 token as it inverts to light in dark mode.
   Using hardcoded dark value (#2d2418 matches orange-5 dark mode surface). */
[data-theme="dark"] .vv-nav__unseen-badge {
  color: #2d2418;
}

/* ────────────────────────────────────────────────────────────────────────────
   Reduced motion support
   ──────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .vv-nav__section-link,
  .vv-nav__subsection-link,
  .vv-nav__subsections {
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   0c-2. NAVIGATION PANE COLLAPSED STATE (L4.1)

   When viewport narrows (900-1099px per L7.3), or via explicit toggle,
   navigation collapses to a 60px icon strip showing:
   - 2-letter ticker abbreviation
   - Signal indicator dot (colored circle)
   - Section number icons (1, 2, 3, 4)

   Elements hidden in collapsed state:
   - Company name, price change
   - Mini-summary text
   - Section text labels and subsections
   - Unseen changes badge (number visible in section icon)

   Hover-to-expand behavior is handled in L4.2.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-nav--collapsed {
  /* Fixed width for icon strip */
  width: var(--vv-layout-nav-collapsed);
  min-width: var(--vv-layout-nav-collapsed);
  max-width: var(--vv-layout-nav-collapsed);

  /* Reduce padding for compact display */
  padding: var(--vv-space-3);

  /* Remove overflow-y since collapsed nav won't overflow */
  overflow-y: visible;
}

/* ── Collapsed Header: Ticker abbreviation + signal dot ────────────────────── */

.vv-nav--collapsed .vv-nav__header {
  padding-bottom: var(--vv-space-3);
  text-align: center;
}

/* Hide full company name and price change in collapsed state */
.vv-nav--collapsed .vv-nav__name,
.vv-nav--collapsed .vv-nav__price-change {
  display: none;
}

/* Ticker becomes 2-letter abbreviation (use data-abbrev attr or truncate via CSS) */
.vv-nav--collapsed .vv-nav__ticker {
  display: block;
  font-size: var(--vv-font-size-sm);
  text-align: center;
  margin-bottom: var(--vv-space-2);
}

/* Price shrinks but remains visible (key info) */
.vv-nav--collapsed .vv-nav__price-row {
  justify-content: center;
}

.vv-nav--collapsed .vv-nav__price {
  font-size: var(--vv-font-size-sm);
}

/* Signal badge collapses to just a colored indicator dot */
.vv-nav--collapsed .vv-nav__signal {
  margin-top: var(--vv-space-2);
  display: flex;
  justify-content: center;
}

.vv-nav--collapsed .vv-signal-badge {
  /* Hide text, show only background color */
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  padding: 0;
  font-size: 0;
  border-radius: var(--vv-radius-full);
  /* Badge keeps its background color (overvalued/undervalued/fairly) */
}

/* ── Collapsed Summary: Hidden entirely ────────────────────────────────────── */

.vv-nav--collapsed .vv-nav__summary {
  display: none;
}

/* ── Collapsed Section List: Number icons only ─────────────────────────────── */

.vv-nav--collapsed .vv-nav__section-label {
  display: none;
}

.vv-nav--collapsed .vv-nav__sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vv-space-2);
}

.vv-nav--collapsed .vv-nav__section-item {
  margin-bottom: 0;
}

.vv-nav--collapsed .vv-nav__section-link {
  /* Show only the number, not the text */
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
  border-radius: var(--vv-radius-md);
  /* Positioning context for unseen badge dot */
  position: relative;
}

/* Hide section text in collapsed state */
.vv-nav--collapsed .vv-nav__section-link > span:not(.vv-nav__section-num):not(.vv-nav__unseen-badge) {
  display: none;
}

/* Section number takes full space */
.vv-nav--collapsed .vv-nav__section-num {
  width: 100%;
  height: 100%;
  font-size: var(--vv-font-size-sm);
}

/* Hide subsections entirely in collapsed state */
.vv-nav--collapsed .vv-nav__subsections {
  display: none;
}

/* Unseen badge transforms to a small dot indicator positioned at top-right corner */
.vv-nav--collapsed .vv-nav__unseen-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  padding: 0;
  font-size: 0;
  color: transparent;
  overflow: hidden;
  border-radius: var(--vv-radius-full);
}

/* Active section highlight in collapsed state */
.vv-nav--collapsed .vv-nav__section-link--active {
  background-color: var(--vv-color-interactive-bg);
}

.vv-nav--collapsed .vv-nav__section-link--active .vv-nav__section-num {
  background-color: var(--vv-color-interactive);
  color: white;
}

/* ── Dark theme adjustments for collapsed state ────────────────────────────── */

[data-theme="dark"] .vv-nav--collapsed {
  background-color: var(--vv-color-surface-secondary);
  border-color: var(--vv-color-border-light);
}

/* ── Reduced motion for collapsed state ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .vv-nav--collapsed .vv-signal-badge,
  .vv-nav--collapsed .vv-nav__section-link {
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   0c-3. NAVIGATION PANE: Hover-to-Expand (L4.2)

   When the navigation is collapsed (60px icon strip), hovering or focusing
   within expands it as an OVERLAY on top of the Reading Pane.

   Key design decisions:
   - Uses position: absolute to overlay without pushing grid layout
   - Smooth slide animation (200ms ease-out) for Bret Victor immediacy
   - Shadow provides visual separation from Reading Pane
   - focus-within enables keyboard navigation accessibility
   - z-index ensures nav appears above content

   Note: The .vv-nav--collapsed element must have position: relative on
   its parent (.vv-stock-page) to serve as positioning context.
   ──────────────────────────────────────────────────────────────────────────── */

/* Base transition for smooth expand/collapse animation */
.vv-nav--collapsed {
  transition:
    width 200ms ease-out,
    min-width 200ms ease-out,
    max-width 200ms ease-out,
    padding 200ms ease-out,
    box-shadow 200ms ease-out;
}

/* Hover state: expand to full width as overlay */
.vv-nav--collapsed:hover,
.vv-nav--collapsed:focus-within {
  /* Expand to full nav width */
  width: var(--vv-layout-nav-max);
  min-width: var(--vv-layout-nav-min);
  max-width: var(--vv-layout-nav-max);

  /* Position as overlay */
  position: absolute;
  left: var(--vv-layout-gap);
  top: var(--vv-layout-gap);

  /* Restore padding for expanded content */
  padding: var(--vv-space-4);

  /* Visual separation from Reading Pane */
  box-shadow: var(--vv-shadow-xl);
  z-index: var(--vv-z-dropdown);
}

/* Restore all hidden elements on expand */
.vv-nav--collapsed:hover .vv-nav__name,
.vv-nav--collapsed:hover .vv-nav__price-change,
.vv-nav--collapsed:focus-within .vv-nav__name,
.vv-nav--collapsed:focus-within .vv-nav__price-change {
  display: block;
}

.vv-nav--collapsed:hover .vv-nav__ticker,
.vv-nav--collapsed:focus-within .vv-nav__ticker {
  font-size: var(--vv-font-size-lg);
  text-align: left;
  margin-bottom: var(--vv-space-1);
}

.vv-nav--collapsed:hover .vv-nav__header,
.vv-nav--collapsed:focus-within .vv-nav__header {
  text-align: left;
  padding-bottom: var(--vv-space-4);
}

.vv-nav--collapsed:hover .vv-nav__price-row,
.vv-nav--collapsed:focus-within .vv-nav__price-row {
  justify-content: flex-start;
}

.vv-nav--collapsed:hover .vv-nav__price,
.vv-nav--collapsed:focus-within .vv-nav__price {
  font-size: var(--vv-font-size-xl);
}

/* Restore signal badge to full display */
.vv-nav--collapsed:hover .vv-nav__signal,
.vv-nav--collapsed:focus-within .vv-nav__signal {
  margin-top: var(--vv-space-3);
  justify-content: flex-start;
}

.vv-nav--collapsed:hover .vv-signal-badge,
.vv-nav--collapsed:focus-within .vv-signal-badge {
  /* Restore to full badge */
  width: auto;
  height: auto;
  min-width: unset;
  padding: var(--vv-space-1) var(--vv-space-2);
  font-size: var(--vv-font-size-xs);
  border-radius: var(--vv-radius-sm);
}

/* Restore summary section */
.vv-nav--collapsed:hover .vv-nav__summary,
.vv-nav--collapsed:focus-within .vv-nav__summary {
  display: block;
}

/* Restore section list to full display */
.vv-nav--collapsed:hover .vv-nav__section-label,
.vv-nav--collapsed:focus-within .vv-nav__section-label {
  display: block;
}

.vv-nav--collapsed:hover .vv-nav__sections,
.vv-nav--collapsed:focus-within .vv-nav__sections {
  align-items: stretch;
}

.vv-nav--collapsed:hover .vv-nav__section-link,
.vv-nav--collapsed:focus-within .vv-nav__section-link {
  width: auto;
  height: auto;
  padding: var(--vv-space-2) var(--vv-space-3);
  justify-content: flex-start;
  border-radius: var(--vv-radius-sm);
  position: static;
}

/* Restore section text */
.vv-nav--collapsed:hover .vv-nav__section-link > span:not(.vv-nav__section-num):not(.vv-nav__unseen-badge),
.vv-nav--collapsed:focus-within .vv-nav__section-link > span:not(.vv-nav__section-num):not(.vv-nav__unseen-badge) {
  display: inline;
}

/* Restore section number styling */
.vv-nav--collapsed:hover .vv-nav__section-num,
.vv-nav--collapsed:focus-within .vv-nav__section-num {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--vv-font-size-xs);
}

/* Restore subsections on hover */
.vv-nav--collapsed:hover .vv-nav__subsections,
.vv-nav--collapsed:focus-within .vv-nav__subsections {
  display: block;
}

/* Restore unseen badge to full number display */
.vv-nav--collapsed:hover .vv-nav__unseen-badge,
.vv-nav--collapsed:focus-within .vv-nav__unseen-badge {
  position: static;
  width: auto;
  height: auto;
  min-width: 1.25rem;
  padding: 0 var(--vv-space-1);
  font-size: var(--vv-font-size-xs);
  border-radius: var(--vv-radius-full);
}

/* ── Dark theme for expanded overlay ────────────────────────────────────────── */

[data-theme="dark"] .vv-nav--collapsed:hover,
[data-theme="dark"] .vv-nav--collapsed:focus-within {
  background-color: var(--vv-color-surface-secondary);
  border-color: var(--vv-color-border-light);
  box-shadow: var(--vv-shadow-xl);
}

/* ── Reduced motion: instant expand/collapse ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .vv-nav--collapsed {
    transition: none;
  }

  .vv-nav--collapsed:hover,
  .vv-nav--collapsed:focus-within {
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   0d. UNSUPPORTED VIEWPORT MESSAGE (L8.1)

   Friendly message for viewports below 900px (tablet/mobile).
   VariantView's three-column layout requires desktop-width screens.

   Design notes:
   - Hidden by default (display: none)
   - Shown only when viewport < 900px via media query
   - Centered with VariantView branding for reassurance
   - Optional "Continue anyway" for power users (JS needed)
   ──────────────────────────────────────────────────────────────────────────── */

/* Base styles - hidden by default */
.vv-unsupported-message {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--vv-space-6);
  text-align: center;
  background-color: var(--vv-color-surface-primary);
}

.vv-unsupported-message__icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--vv-space-5);
  color: var(--vv-color-text-tertiary);
}

.vv-unsupported-message h2 {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin-bottom: var(--vv-space-3);
  max-width: 24em;
}

.vv-unsupported-message p {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  max-width: 28em;
  line-height: var(--vv-line-height-relaxed);
}

.vv-unsupported-message__cta {
  margin-top: var(--vv-space-6);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-interactive);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.vv-unsupported-message__cta:hover {
  color: var(--vv-color-interactive-hover);
}

/* Dark theme support */
[data-theme="dark"] .vv-unsupported-message {
  background-color: var(--vv-color-surface-primary);
}

/* ────────────────────────────────────────────────────────────────────────────
   Responsive: Unsupported viewport (< 900px)

   Per MVP spec, VariantView does not support mobile/tablet layouts.
   Show friendly message and hide the three-column grid.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .vv-stock-page {
    display: none;
  }

  .vv-unsupported-message {
    display: flex;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   1. STOCK HEADER
   ════════════════════════════════════════════════════════════════════════════ */

.vv-stock-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vv-space-3);
  padding-bottom: var(--vv-space-4);
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
  margin-bottom: var(--vv-space-5);
}

.vv-stock-header__ticker {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-bold);
  color: var(--vv-color-text-primary);
  letter-spacing: var(--vv-letter-spacing-wide);
}

.vv-stock-header__name {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xl);
  font-weight: var(--vv-font-weight-semibold);
  margin-right: var(--vv-space-2);
}

.vv-stock-header__price-group {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-2);
}

.vv-stock-header__price {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-secondary);
}

.vv-stock-header__meta {
  display: flex;
  align-items: center;
  gap: var(--vv-space-3);
  flex-basis: 100%;
  margin-top: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
}

@media (min-width: 768px) {
  .vv-stock-header__meta {
    flex-basis: auto;
    margin-top: 0;
    margin-left: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   2. SIGNAL BADGES
   ════════════════════════════════════════════════════════════════════════════ */

.vv-signal-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  padding: var(--vv-space-1) var(--vv-space-3);  /* 4px 12px */
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);             /* 12.8px */
  font-weight: var(--vv-font-weight-semibold);
  line-height: calc(var(--vv-rhythm) - 2 * var(--vv-space-1));  /* 24px - 8px padding = 16px, total 24px */
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  border-radius: var(--vv-radius-full);
  white-space: nowrap;
}

.vv-signal-badge--overvalued {
  background-color: var(--vv-color-signal-overvalued-bg);
  color: var(--vv-color-signal-overvalued);
}

.vv-signal-badge--undervalued {
  background-color: var(--vv-color-signal-undervalued-bg);
  color: var(--vv-color-signal-undervalued);
}

.vv-signal-badge--fair {
  background-color: var(--vv-color-signal-fair-bg);
  color: var(--vv-color-signal-fair);
}

.vv-signal-badge--neutral {
  background-color: var(--vv-color-gray-10);
  color: var(--vv-color-text-secondary);
  text-transform: none;  /* "30 years priced in" reads better in sentence case */
  letter-spacing: normal;
}

.vv-signal-badge--large {
  font-size: var(--vv-font-size-md);              /* 20px */
  padding: var(--vv-space-3) var(--vv-space-5);   /* 12px 24px */
  line-height: var(--vv-line-height-md);          /* 24px */
  /* Total height: 24px line-height + 24px padding = 48px (2 rhythm lines) */
}

/* Confidence grade badge */
.vv-confidence-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--vv-space-1) var(--vv-space-2);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  border-radius: var(--vv-radius-sm);
  background-color: var(--vv-color-surface-secondary);
  color: var(--vv-color-text-secondary);
}

.vv-confidence-badge--stretch {
  background-color: var(--vv-color-warning);
  color: white;
}

.vv-confidence-badge--achievable {
  background-color: var(--vv-color-sentiment-positive);
  color: white;
}

/* Conservative: Below-average expectations (J2.4) */
.vv-confidence-badge--conservative {
  background-color: var(--vv-color-signal-undervalued);  /* Cyan for below-aggressive */
  color: white;
}

/* ════════════════════════════════════════════════════════════════════════════
   2b. PRE-COMMITMENT COMPARISON CARD (J3.1)
   Shows user's prior prediction vs current market signal for returning users.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-precommit-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-space-5);
  padding: var(--vv-space-4) var(--vv-space-5);
  background-color: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-md);
  border: 1px solid var(--vv-color-border-light);
  margin: var(--vv-space-5) 0;
}

/* Disagreement state - highlight the difference */
.vv-precommit-card--disagreement {
  border-left: 3px solid var(--vv-color-warning);
  background-color: var(--vv-color-orange-5, rgba(255, 152, 0, 0.05));
}

/* User prediction column */
.vv-precommit-card__user,
.vv-precommit-card__market {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
  min-width: 140px;
}

/* Labels */
.vv-precommit-card__label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

/* VS divider */
.vv-precommit-card__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  padding: 0 var(--vv-space-2);
}

/* Time elapsed text */
.vv-precommit-card__time {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-left: auto;
  align-self: center;
}

/* Disagreement indicator icon */
.vv-precommit-card__alert {
  display: none;
  align-items: center;
  gap: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-warning);
  margin-left: auto;
}

.vv-precommit-card--disagreement .vv-precommit-card__alert {
  display: flex;
}

/* Hidden for screen readers - data table */
.vv-precommit-card__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   2b. PRE-COMMITMENT MIFP CONTEXT (X1.4)
   Shows returning user's prior prediction with MIFP context
   ════════════════════════════════════════════════════════════════════════════ */

.vv-precommit-mifp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
  margin-bottom: var(--vv-space-5);
  padding: var(--vv-space-4);
  background-color: var(--vv-color-surface-secondary);
  border: 1px solid var(--vv-color-border-light);
  border-left: 4px solid var(--vv-color-insight);
  border-radius: var(--vv-radius-md);
}

.vv-precommit-mifp__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vv-space-3);
}

.vv-precommit-mifp__prediction {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
}

.vv-precommit-mifp__label {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-secondary);
}

.vv-precommit-mifp__mifp {
  display: flex;
  align-items: center;
}

.vv-precommit-mifp__text {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
}

.vv-precommit-mifp__text strong {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-insight);
}

.vv-precommit-mifp__link {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-interactive);
  text-decoration: none;
  transition: color var(--vv-transition-fast);
}

.vv-precommit-mifp__link:hover {
  color: var(--vv-color-interactive-hover);
  text-decoration: underline;
}

.vv-precommit-mifp__link svg {
  width: 14px;
  height: 14px;
}

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

/* Dark mode support */
[data-theme="dark"] .vv-precommit-mifp {
  background-color: var(--vv-color-gray-90);
  border-color: var(--vv-color-gray-70);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-precommit-mifp {
    background-color: var(--vv-color-gray-90);
    border-color: var(--vv-color-gray-70);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   3. NARRATIVE BLOCKQUOTE (AI Summary)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-narrative {
  position: relative;
  margin: var(--vv-space-5) 0;
  padding: var(--vv-space-4) var(--vv-space-5);
  background-color: var(--vv-color-surface-secondary);
  border-left: 3px solid var(--vv-color-interactive);
  border-radius: 0 var(--vv-radius-md) var(--vv-radius-md) 0;
  font-style: normal;
}

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

.vv-narrative__source {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  margin-top: var(--vv-space-3);
  font-size: var(--vv-font-size-xs);
  font-style: normal;
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-narrative__source::before {
  content: "";
  width: 1.333rem;  /* 16px */
  height: 1.333rem; /* 16px */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23757575'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/%3E%3C/svg%3E");
  background-size: contain;
}

/* ════════════════════════════════════════════════════════════════════════════
   3b. EXPLORABLE NUMBER (J2.2)
   Interactive bracketed numbers in narrative that highlight on hover
   and trigger Context Pane updates (Bret Victor "explorable explanations")
   ════════════════════════════════════════════════════════════════════════════ */

.vv-explorable {
  display: inline;
  position: relative;
  cursor: pointer;
  /* Makes it focusable for keyboard accessibility */
  outline: none;
}

.vv-explorable__value {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-interactive);
  border-bottom: 1px dashed var(--vv-color-interactive);
  padding-bottom: 1px;
  transition: color var(--vv-transition-fast),
              border-color var(--vv-transition-fast),
              background-color var(--vv-transition-fast);
  border-radius: 2px;
}

/* Hover state */
.vv-explorable:hover .vv-explorable__value,
.vv-explorable--active .vv-explorable__value {
  color: var(--vv-color-interactive-hover);
  border-bottom-color: var(--vv-color-interactive-hover);
  background-color: var(--vv-color-blue-5);
}

/* Focus state for keyboard navigation */
.vv-explorable:focus .vv-explorable__value,
.vv-explorable:focus-visible .vv-explorable__value {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
  background-color: var(--vv-color-blue-5);
}

/* Dark theme overrides */
[data-theme="dark"] .vv-explorable__value {
  color: var(--vv-color-interactive);
  border-bottom-color: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-explorable:hover .vv-explorable__value,
[data-theme="dark"] .vv-explorable--active .vv-explorable__value {
  background-color: rgba(35, 120, 195, 0.2);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .vv-explorable__value {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   4. INTERACTIVE NUMBER (Tangle-style)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-tangle {
  display: inline-block;
  position: relative;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}

.vv-tangle__value {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-tangle-value);
  border-bottom: 1px dashed var(--vv-color-tangle-value);
  padding-bottom: 1px;
  transition: color var(--vv-transition-fast), border-color var(--vv-transition-fast);
}

.vv-tangle:hover .vv-tangle__value,
.vv-tangle--active .vv-tangle__value {
  color: var(--vv-color-interactive-hover);
  border-color: var(--vv-color-interactive-hover);
}

.vv-tangle:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
  border-radius: var(--vv-radius-sm);
}

.vv-tangle__hint {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--vv-space-1) var(--vv-space-2);
  margin-top: var(--vv-space-1);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vv-transition-fast), visibility var(--vv-transition-fast);
  z-index: var(--vv-z-tooltip);
}

.vv-tangle:hover .vv-tangle__hint {
  opacity: 1;
  visibility: visible;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. TABLES
   ════════════════════════════════════════════════════════════════════════════ */

/* Base table styling */
.vv-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background-color: var(--vv-color-surface-card, var(--vv-color-surface-primary));
}

.vv-table th,
.vv-table td {
  padding: var(--vv-space-3) var(--vv-space-4);
  text-align: left;
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
  vertical-align: middle;
}

.vv-table th {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  background-color: var(--vv-color-surface-secondary);
}

.vv-table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

/* Numeric columns - right align and monospace */
.vv-table td[data-type="number"],
.vv-table th[data-type="number"] {
  text-align: right;
  font-family: var(--vv-font-family-mono);
}

/* Highlight row (e.g., base case, current company) */
.vv-table tr.vv-table__row--highlight {
  background-color: var(--vv-color-insight-bg);
}

.vv-table tr.vv-table__row--highlight td {
  font-weight: var(--vv-font-weight-semibold);
}

/* Summary value cells (colspan spanning multiple columns) */
.vv-table__summary-value {
  text-align: left;
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-medium);
  padding-left: var(--vv-space-4);
}

/* ────────────────────────────────────────────────────────────────────────────
 * VERTICAL DCF TABLE (T4.4)
 * Years as rows, metrics as columns - fits within reading pane without scroll
 * ──────────────────────────────────────────────────────────────────────────── */

/* Simple container without horizontal scroll wrapper */
.vv-table-container {
  max-width: none;
  width: 100%;
}

/* Vertical DCF table - fixed layout with 7 columns */
.vv-table--dcf-vertical {
  table-layout: fixed;
  width: 100%;
}

/* Period column (first) gets slightly more width for labels */
.vv-table--dcf-vertical th:first-child,
.vv-table--dcf-vertical td:first-child {
  width: 18%;
}

/* Data columns share remaining space equally */
.vv-table--dcf-vertical th:not(:first-child),
.vv-table--dcf-vertical td:not(:first-child) {
  width: calc(82% / 6);
}

/* Footer summary rows - label spans first 6 columns, value in last */
.vv-table--dcf-vertical tfoot th[colspan="6"] {
  text-align: right;
  padding-right: var(--vv-space-4);
  font-weight: var(--vv-font-weight-regular);
  color: var(--vv-color-text-secondary);
}

/* Summary value in footer aligns with PV column */
.vv-table--dcf-vertical tfoot td.vv-table__summary-value {
  text-align: right;
}

/* Highlight row in footer (Fair Value) */
.vv-table--dcf-vertical tfoot tr.vv-table__row--highlight th {
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

/* ────────────────────────────────────────────────────────────────────────────
 * DCF TABLE EXPLORABLE INTERACTIONS (S1B.5)
 * Bret Victor-style bi-directional highlighting between table rows and sliders
 * ──────────────────────────────────────────────────────────────────────────── */

/* Confidence band left border by year (visual indication of forecast reliability) */
.vv-table--dcf-vertical tbody tr {
  transition: background-color 200ms ease-out, border-left-color 200ms ease-out;
}

.vv-dcf-row--confidence-high {
  border-left: 3px solid var(--vv-color-blue-50);
}

.vv-dcf-row--confidence-medium {
  border-left: 3px solid var(--vv-color-blue-30);
}

.vv-dcf-row--confidence-low {
  border-left: 3px solid var(--vv-color-gray-30);
}

/* Highlight states for bi-directional linking */
.vv-dcf-row--highlighted {
  background-color: var(--vv-color-interactive-bg);
}

.vv-dcf-row--highlighted-strong {
  background-color: var(--vv-color-blue-5);
  box-shadow: inset 0 0 0 1px var(--vv-color-blue-30);
}

/* Terminal value row highlight when WACC slider is hovered */
.vv-table--dcf-vertical tfoot tr.vv-dcf-row--highlighted-strong {
  background-color: var(--vv-color-blue-5);
  box-shadow: inset 0 0 0 1px var(--vv-color-blue-30);
}

.vv-table--dcf-vertical tfoot tr.vv-dcf-row--highlighted-strong th,
.vv-table--dcf-vertical tfoot tr.vv-dcf-row--highlighted-strong td {
  color: var(--vv-color-text-primary);
}

/* Reactive insight text below DCF table */
.vv-dcf-table__insight {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  font-style: italic;
  margin-top: var(--vv-space-4);
  padding: var(--vv-space-3) var(--vv-space-4);
  background-color: var(--vv-color-interactive-bg);
  border-left: 3px solid var(--vv-color-interactive);
  border-radius: var(--vv-radius-sm);
}

/* Dark mode adjustments */
[data-theme="dark"] .vv-dcf-row--confidence-high {
  border-left-color: var(--vv-color-blue-50);
}

[data-theme="dark"] .vv-dcf-row--confidence-medium {
  border-left-color: var(--vv-color-blue-30);
}

[data-theme="dark"] .vv-dcf-row--confidence-low {
  border-left-color: var(--vv-color-gray-50);
}

[data-theme="dark"] .vv-dcf-row--highlighted-strong {
  background-color: var(--vv-color-blue-5);
  box-shadow: inset 0 0 0 1px var(--vv-color-blue-50);
}

/* Positive/Negative number styling */
.vv-num-positive {
  color: var(--vv-color-numeric-positive);
}

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

/* Rank badge in tables */
.vv-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.667rem; /* 20px */
  height: 1.667rem;    /* 20px */
  padding: 0 var(--vv-space-1);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
  margin-left: var(--vv-space-2);
}

.vv-rank-badge--1 {
  background-color: var(--vv-color-gold-5);
  color: var(--vv-color-gold-50);
}

.vv-rank-badge--2 {
  background-color: var(--vv-color-gray-10);
  color: var(--vv-color-gray-70);
}

.vv-rank-badge--3 {
  background-color: var(--vv-color-orange-5);
  color: var(--vv-color-orange-50);
}

/* Probability bar in scenario table */
.vv-prob-bar {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
}

.vv-prob-bar__track {
  flex: 1;
  height: 0.667rem; /* 8px */
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-full);
  overflow: hidden;
}

.vv-prob-bar__fill {
  height: 100%;
  background-color: var(--vv-color-interactive);
  border-radius: var(--vv-radius-full);
  transition: width var(--vv-transition-normal);
}

.vv-prob-bar__value {
  min-width: 3ch;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  text-align: right;
}

/* Sparkline cell */
.vv-sparkline {
  display: inline-block;
  width: 5rem;     /* 60px */
  height: 1.667rem; /* 20px */
  vertical-align: middle;
}

/* Stackable table (mobile reflow) */
@media (max-width: 639px) {
  .vv-table--stackable thead {
    display: none;
  }

  .vv-table--stackable tbody,
  .vv-table--stackable tr {
    display: block;
  }

  .vv-table--stackable tr {
    padding: var(--vv-space-4);
    margin-bottom: var(--vv-space-3);
    background-color: var(--vv-color-surface-primary);
    border: var(--vv-border-width) solid var(--vv-color-border-light);
    border-radius: var(--vv-radius-md);
  }

  .vv-table--stackable td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--vv-space-2) 0;
    border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
  }

  .vv-table--stackable td:last-child {
    border-bottom: none;
  }

  .vv-table--stackable td::before {
    content: attr(data-label);
    font-size: var(--vv-font-size-xs);
    font-weight: var(--vv-font-weight-semibold);
    color: var(--vv-color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--vv-letter-spacing-caps);
  }

  .vv-table--stackable td[data-type="number"] {
    text-align: left;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   6. EXPANDABLE PANEL (DCF Math)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-expandable {
  border: var(--vv-border-width) solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
  margin: var(--vv-space-4) 0;
}

.vv-expandable__summary {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-3) var(--vv-space-4);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-interactive);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--vv-transition-fast);
}

.vv-expandable__summary::-webkit-details-marker {
  display: none;
}

.vv-expandable__summary::before {
  content: "";
  width: 1.333rem;  /* 16px */
  height: 1.333rem; /* 16px */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232378c3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-size: contain;
  transition: transform var(--vv-transition-fast);
}

.vv-expandable__summary:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-expandable[open] .vv-expandable__summary::before {
  transform: rotate(90deg);
}

.vv-expandable__content {
  padding: var(--vv-space-4);
  border-top: var(--vv-border-width) solid var(--vv-color-border-light);
  background-color: var(--vv-color-surface-secondary);
}

/* ════════════════════════════════════════════════════════════════════════════
   7. DATA QUALITY INDICATOR
   ════════════════════════════════════════════════════════════════════════════ */

.vv-data-quality {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  padding: var(--vv-space-1) var(--vv-space-2);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  background-color: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-sm);
  cursor: help;
}

.vv-data-quality--a {
  background-color: var(--vv-color-sentiment-positive-bg);
  color: var(--vv-color-sentiment-positive);
}

.vv-data-quality--b {
  background-color: var(--vv-color-interactive-bg);
  color: var(--vv-color-interactive);
}

.vv-data-quality--c {
  background-color: var(--vv-color-orange-5);
  color: var(--vv-color-warning);
}

.vv-data-quality--d {
  background-color: var(--vv-color-sentiment-negative-bg);
  color: var(--vv-color-sentiment-negative);
}

/* ════════════════════════════════════════════════════════════════════════════
   8. KEY FACTORS LIST
   ════════════════════════════════════════════════════════════════════════════ */

.vv-factors {
  padding: var(--vv-space-4);
  background-color: var(--vv-color-insight-bg);
  border-left: 3px solid var(--vv-color-insight);
  border-radius: 0 var(--vv-radius-md) var(--vv-radius-md) 0;
}

.vv-factors__title {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-insight-text);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin-bottom: var(--vv-space-3);
}

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

.vv-factors__item {
  position: relative;
  padding-left: var(--vv-space-5);
  margin-bottom: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-normal);
}

.vv-factors__item:last-child {
  margin-bottom: 0;
}

.vv-factors__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.667rem;  /* 8px */
  height: 0.667rem; /* 8px */
  background-color: var(--vv-color-insight);
  border-radius: var(--vv-radius-full);
}

/* ════════════════════════════════════════════════════════════════════════════
   9. RISKS LIST
   ════════════════════════════════════════════════════════════════════════════ */

.vv-risks {
  padding: var(--vv-space-4);
  background-color: var(--vv-color-sentiment-negative-bg);
  border-left: 3px solid var(--vv-color-sentiment-negative);
  border-radius: 0 var(--vv-radius-md) var(--vv-radius-md) 0;
}

.vv-risks__title {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-sentiment-negative);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin-bottom: var(--vv-space-3);
}

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

.vv-risks__item {
  position: relative;
  padding-left: var(--vv-space-5);
  margin-bottom: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-normal);
}

.vv-risks__item:last-child {
  margin-bottom: 0;
}

.vv-risks__item::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.333rem;  /* 16px */
  height: 1.333rem; /* 16px */
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-bold);
  color: white;
  background-color: var(--vv-color-sentiment-negative);
  border-radius: var(--vv-radius-full);
}

/* ════════════════════════════════════════════════════════════════════════════
   10. GREEN/RED FLAGS
   ════════════════════════════════════════════════════════════════════════════ */

.vv-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--vv-space-4);
}

.vv-flags__section {
  padding: var(--vv-space-4);
  border-radius: var(--vv-radius-md);
}

.vv-flags__section--green {
  background-color: var(--vv-color-sentiment-positive-bg);
}

.vv-flags__section--red {
  background-color: var(--vv-color-sentiment-negative-bg);
}

.vv-flags__title {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin-bottom: var(--vv-space-3);
}

.vv-flags__section--green .vv-flags__title {
  color: var(--vv-color-sentiment-positive);
}

.vv-flags__section--red .vv-flags__title {
  color: var(--vv-color-sentiment-negative);
}

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

.vv-flags__item {
  position: relative;
  padding-left: var(--vv-space-5);
  margin-bottom: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-normal);
}

.vv-flags__item:last-child {
  margin-bottom: 0;
}

.vv-flags__section--green .vv-flags__item::before {
  content: "\2713"; /* Checkmark */
  position: absolute;
  left: 0;
  color: var(--vv-color-sentiment-positive);
  font-weight: var(--vv-font-weight-bold);
}

.vv-flags__section--red .vv-flags__item::before {
  content: "\2717"; /* X mark */
  position: absolute;
  left: 0;
  color: var(--vv-color-sentiment-negative);
  font-weight: var(--vv-font-weight-bold);
}

/* ════════════════════════════════════════════════════════════════════════════
   11. CARD (Generic)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-card {
  background-color: var(--vv-color-surface-card, var(--vv-color-surface-primary));
  border: var(--vv-border-width) solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
  padding: var(--vv-space-5);
  box-shadow: var(--vv-shadow-sm);
}

.vv-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vv-space-3);
  margin-bottom: var(--vv-space-4);
  padding-bottom: var(--vv-space-3);
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
}

.vv-card__title {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-card__subtitle {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  margin-top: var(--vv-space-1);
}

/* ════════════════════════════════════════════════════════════════════════════
   12. SKELETON LOADING STATES
   ════════════════════════════════════════════════════════════════════════════ */

.vv-skeleton {
  background: linear-gradient(
    90deg,
    var(--vv-color-surface-secondary) 25%,
    var(--vv-color-surface-tertiary) 50%,
    var(--vv-color-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: vv-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--vv-radius-sm);
}

.vv-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--vv-space-2);
}

.vv-skeleton--text:last-child {
  width: 60%;
}

.vv-skeleton--heading {
  height: 1.5em;
  width: 40%;
  margin-bottom: var(--vv-space-3);
}

.vv-skeleton--badge {
  height: 2rem;     /* 24px */
  width: 8.333rem;  /* 100px */
  border-radius: var(--vv-radius-full);
}

.vv-skeleton--table-row {
  height: 4rem; /* 48px */
  margin-bottom: var(--vv-space-2);
}

@keyframes vv-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

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

/* Slider skeleton - matches Ghost Slider dimensions */
.vv-skeleton--slider {
  height: 95px;  /* Matches GhostSlider height */
  width: 100%;
  margin-bottom: var(--vv-space-3);
}

/* Narrative skeleton - matches vv-narrative dimensions */
.vv-skeleton--narrative {
  height: 6rem;  /* ~96px, room for 2-3 lines of text */
  width: 100%;
  border-radius: 0 var(--vv-radius-md) var(--vv-radius-md) 0;
  border-left: 3px solid var(--vv-color-surface-tertiary);
}

/* Stock header skeleton container */
.vv-skeleton-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vv-space-3);
  padding-bottom: var(--vv-space-4);
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
  margin-bottom: var(--vv-space-5);
}

.vv-skeleton--ticker {
  height: 1.5rem;
  width: 5rem;
}

.vv-skeleton--company-name {
  height: 1.75rem;
  width: 15rem;
}

.vv-skeleton--price {
  height: 1.5rem;
  width: 6rem;
}

/* Skeleton group for meta section */
.vv-skeleton-meta {
  display: flex;
  align-items: center;
  gap: var(--vv-space-3);
  flex-basis: 100%;
  margin-top: var(--vv-space-2);
}

@media (min-width: 768px) {
  .vv-skeleton-meta {
    flex-basis: auto;
    margin-top: 0;
    margin-left: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   13. BUTTON
   ════════════════════════════════════════════════════════════════════════════ */

.vv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-4);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  line-height: 1;
  text-decoration: none;
  border: var(--vv-border-width) solid transparent;
  border-radius: var(--vv-radius-md);
  cursor: pointer;
  transition: background-color var(--vv-transition-fast),
              border-color var(--vv-transition-fast),
              color var(--vv-transition-fast);
}

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

.vv-btn--primary {
  background-color: var(--vv-color-interactive);
  color: white;
}

.vv-btn--primary:hover {
  background-color: var(--vv-color-interactive-hover);
}

.vv-btn--secondary {
  background-color: transparent;
  border-color: var(--vv-color-border-primary);
  color: var(--vv-color-text-primary);
}

.vv-btn--secondary:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-btn--ghost {
  background-color: transparent;
  color: var(--vv-color-interactive);
}

.vv-btn--ghost:hover {
  background-color: var(--vv-color-interactive-bg);
}

.vv-btn--sm {
  padding: var(--vv-space-1) var(--vv-space-3);
  font-size: var(--vv-font-size-xs);
}

/* ════════════════════════════════════════════════════════════════════════════
   14. THEME TOGGLE
   ════════════════════════════════════════════════════════════════════════════ */

.vv-theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-1);
  background-color: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-full);
}

.vv-theme-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.667rem;  /* 32px */
  height: 2.667rem; /* 32px */
  background: none;
  border: none;
  border-radius: var(--vv-radius-full);
  cursor: pointer;
  color: var(--vv-color-text-tertiary);
  transition: background-color var(--vv-transition-fast), color var(--vv-transition-fast);
}

.vv-theme-toggle__btn:hover {
  color: var(--vv-color-text-primary);
}

.vv-theme-toggle__btn--active {
  background-color: var(--vv-color-surface-primary);
  color: var(--vv-color-text-primary);
  box-shadow: var(--vv-shadow-sm);
}

.vv-theme-toggle__icon {
  width: 1.5rem;  /* 18px */
  height: 1.5rem; /* 18px */
}

/* ════════════════════════════════════════════════════════════════════════════
   15. QUALITATIVE FACTORS (Tufte-aligned alternative)

   A higher data-density alternative to .vv-factors, .vv-risks, and .vv-flags.
   Uses marginal glyphs instead of colored background blocks.

   Usage:
   - Combine triggers, risks, catalysts, and watch items into a single list
   - ~60% vertical space savings vs separate colored boxes
   - Better scanability via left-margin glyph column
   ════════════════════════════════════════════════════════════════════════════ */

.vv-qualitative {
  border: var(--vv-border-width) solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
  overflow: hidden;
  background-color: var(--vv-color-surface-card, var(--vv-color-surface-primary));
}

.vv-qualitative__header {
  padding: var(--vv-space-2) var(--vv-space-4);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
  background-color: var(--vv-color-surface-secondary);
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
}

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

.vv-qualitative__item {
  display: grid;
  grid-template-columns: 1.667rem 1fr auto; /* 20px */
  gap: var(--vv-space-2);
  align-items: baseline;
  padding: var(--vv-space-2) var(--vv-space-4);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-normal);
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
  transition: background-color var(--vv-transition-fast);
}

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

.vv-qualitative__item:hover {
  background-color: var(--vv-color-surface-secondary);
}

/* Marginal glyph - replaces heavy background fills */
.vv-qualitative__glyph {
  font-size: var(--vv-font-size-base);
  line-height: 1;
  text-align: center;
}

.vv-qualitative__glyph--trigger {
  color: var(--vv-color-insight);
}

.vv-qualitative__glyph--risk {
  color: var(--vv-color-warning);
}

.vv-qualitative__glyph--catalyst {
  color: var(--vv-color-sentiment-positive);
}

.vv-qualitative__glyph--watch {
  color: var(--vv-color-sentiment-negative);
}

/* Item text content */
.vv-qualitative__text {
  color: var(--vv-color-text-primary);
}

/* Type label - right-aligned, muted */
.vv-qualitative__type {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
  white-space: nowrap;
}

/* Divider between sections */
.vv-qualitative__divider {
  height: 0;
  border: none;
  border-top: var(--vv-border-width) dashed var(--vv-color-border-light);
  margin: var(--vv-space-1) var(--vv-space-4);
}

/* Compact variant - tighter spacing for even higher density */
.vv-qualitative--compact .vv-qualitative__item {
  padding: var(--vv-space-1) var(--vv-space-3);
}

.vv-qualitative--compact .vv-qualitative__header {
  padding: var(--vv-space-1) var(--vv-space-3);
}

/* No-border variant - for embedding in cards */
.vv-qualitative--borderless {
  border: none;
  border-radius: 0;
}

.vv-qualitative--borderless .vv-qualitative__header {
  background-color: transparent;
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
}

/* ════════════════════════════════════════════════════════════════════════════
   16. ANALYSIS DATE BADGE

   Displays when analysis data was last updated with visual states
   indicating data freshness (normal, warning, error, pending).
   ════════════════════════════════════════════════════════════════════════════ */

.vv-analysis-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  padding: var(--vv-space-1) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  border-radius: var(--vv-radius-md);
  white-space: nowrap;
}

.vv-analysis-badge__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Normal state: Analysis < 24h old */
.vv-analysis-badge--normal {
  background-color: var(--vv-color-surface-tertiary);
  color: var(--vv-color-text-secondary);
}

/* Warning state: Analysis 24-48h old */
.vv-analysis-badge--warning {
  background-color: var(--vv-color-orange-5);
  color: var(--vv-color-orange-50);
}

/* Error state: Analysis > 48h old */
.vv-analysis-badge--error {
  background-color: var(--vv-color-red-5);
  color: var(--vv-color-red-50);
}

/* Pending state: No analysis date available */
.vv-analysis-badge--pending {
  background-color: var(--vv-color-gray-10);
  color: var(--vv-color-gray-50);
}

/* ════════════════════════════════════════════════════════════════════════════
   17. LIVE BADGE

   Displays a pulsing indicator for real-time price data.
   Uses vv-pulse animation per CLAUDE.md design system.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  padding: var(--vv-space-1) var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  background-color: var(--vv-color-interactive);
  color: white;
  border-radius: var(--vv-radius-sm);
  animation: vv-pulse 2s ease-in-out infinite;
}

.vv-live-badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  border-radius: var(--vv-radius-full);
  animation: vv-pulse-dot 2s ease-in-out infinite;
}

/* Pulse animation for the badge */
@keyframes vv-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

/* Pulse animation for the dot (slightly different timing for visual interest) */
@keyframes vv-pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .vv-live-badge,
  .vv-live-badge__dot {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   18. ERROR STATE (J1.4)

   Displays a friendly error message when PIE data fails to load.
   Includes retry button to re-trigger the fetch.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  margin: var(--vv-space-8) auto;
  padding: var(--vv-space-5);
  background-color: var(--vv-color-red-5);
  border-left: 4px solid var(--vv-color-red-50);
  border-radius: var(--vv-radius-md);
  text-align: center;
}

.vv-error-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--vv-space-3);
  color: var(--vv-color-red-50);
}

.vv-error-state__icon svg {
  width: 2rem;
  height: 2rem;
}

.vv-error-state__title {
  margin: 0 0 var(--vv-space-2) 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-line-height-tight);
}

.vv-error-state__message {
  margin: 0 0 var(--vv-space-5) 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-relaxed);
}

.vv-error-state__action {
  /* Button styling inherits from .vv-btn */
}

/* Timeout-specific error state (J8.4) */
.vv-error-state--timeout {
  background-color: var(--vv-color-orange-5);
  border-left-color: var(--vv-color-warning);
}

.vv-error-state--timeout .vv-error-state__icon {
  color: var(--vv-color-warning);
}

/* Dark theme overrides for timeout error */
[data-theme="dark"] .vv-error-state--timeout {
  background-color: rgba(255, 152, 56, 0.1);
  border-left-color: var(--vv-color-warning);
}

[data-theme="dark"] .vv-error-state--timeout .vv-error-state__icon {
  color: var(--vv-color-warning);
}

/* Warning error state - for user input validation errors (T5.3) */
.vv-error-state--warning {
  background-color: var(--vv-color-orange-5);
  border-left-color: var(--vv-color-warning);
}

.vv-error-state--warning .vv-error-state__icon {
  color: var(--vv-color-warning);
}

.vv-error-state__hint {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-line-height-relaxed);
}

/* Dark theme overrides for warning error */
[data-theme="dark"] .vv-error-state--warning {
  background-color: rgba(255, 152, 56, 0.1);
  border-left-color: var(--vv-color-warning);
}

[data-theme="dark"] .vv-error-state--warning .vv-error-state__icon {
  color: var(--vv-color-warning);
}

/* ════════════════════════════════════════════════════════════════════════════
 * CONTEXT PANE (J5.1)
 *
 * Sticky sidebar showing qualitative context when hovering sliders.
 * Lives in the third column of the .vv-stock-page grid.
 * Uses position: sticky to stay visible during scroll within its grid cell.
 *
 * Updated for three-column layout (L6.1):
 * - Changed from fixed to sticky positioning
 * - Removed right/z-index (grid handles placement)
 * - Added align-self: start (prevents stretching)
 * - Width now flows from grid column, not fixed 300px
 * ════════════════════════════════════════════════════════════════════════════ */

.vv-context-pane {
  min-height: 200px;
  max-height: calc(100vh - var(--vv-layout-gap) * 2);
  overflow-y: auto;
  /* Padding on top and sides; bottom handled by overflow fade */
  padding: var(--vv-space-5) var(--vv-space-5) 0;
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-md);
  border: 1px solid var(--vv-color-border-light);
  font-family: var(--vv-font-family-sans);

  /* Sticky positioning within grid cell */
  position: sticky;
  top: var(--vv-layout-gap);
  align-self: start;
  width: 100%;
}

/* Placeholder state (no slider hovered) */
.vv-context-pane__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  text-align: center;
  color: var(--vv-color-text-tertiary);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
}

.vv-context-pane__placeholder-icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--vv-space-3);
  opacity: 0.5;
}

/* J8.7: No qualitative data available state */
.vv-context-pane__no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--vv-space-5);
  text-align: center;
  color: var(--vv-color-text-secondary);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
}

.vv-context-pane__no-data-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--vv-space-3);
  opacity: 0.5;
  color: var(--vv-color-text-tertiary);
}

.vv-context-pane__no-data-text {
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  max-width: 200px;
}

/* Active content state - J10.9: Height transition support */
.vv-context-pane__content {
  /* Use CSS Grid for smooth height animation to auto */
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--vv-transition-normal);
  animation: vv-context-fade-in var(--vv-transition-normal);
}

/* Inner wrapper handles overflow during height transition */
.vv-context-pane__content-inner {
  overflow: hidden;
}

/* J10.9: Transitioning state for cross-fade between content */
.vv-context-pane__content--transitioning {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 100ms ease-out, transform 100ms ease-out;
}

/* Smooth fade-in after content update */
.vv-context-pane__content:not(.vv-context-pane__content--transitioning) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}

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

/* Header with title */
.vv-context-pane__header {
  margin-bottom: var(--vv-space-4);
  padding-bottom: var(--vv-space-3);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-context-pane__title {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-line-height-tight);
}

/* Body content */
.vv-context-pane__body {
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-relaxed);
  /* Bottom padding for content spacing (pane padding removed for fade positioning) */
  padding-bottom: var(--vv-space-5);
}

/* Stance/position section */
.vv-context-pane__stance {
  margin-bottom: var(--vv-space-4);
}

.vv-context-pane__stance-label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-context-pane__stance-text {
  color: var(--vv-color-text-primary);
}

/* Stance without label (used when image is present) */
.vv-context-pane__stance--no-label {
  margin-top: var(--vv-space-3);
}

/* Image container (for educational diagrams) */
.vv-context-pane__image-container {
  margin-bottom: var(--vv-space-4);
}

.vv-context-pane__image {
  width: 100%;
  height: auto;
  border-radius: var(--vv-radius-sm);
}

/* S1B.3: DCF Context - Formula and Explanation for table cells */
.vv-context-pane__dcf-context {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-4);
}

.vv-context-pane__formula {
  padding: var(--vv-space-3) var(--vv-space-4);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
}

.vv-context-pane__formula-label,
.vv-context-pane__explanation-label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-context-pane__formula-text {
  display: block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-interactive);
  background: transparent;
  padding: 0;
  white-space: normal;
  word-break: break-word;
}

/* Actual calculation with real numbers */
.vv-context-pane__calculation {
  padding: var(--vv-space-3) var(--vv-space-4);
  background: var(--vv-color-gold-5);
  border-left: 3px solid var(--vv-color-gold-30);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
}

.vv-context-pane__calculation-label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-context-pane__calculation-text {
  display: block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  background: transparent;
  padding: 0;
  white-space: normal;
  word-break: break-word;
}

[data-theme="dark"] .vv-context-pane__calculation {
  background: var(--vv-color-gold-90);
  border-left-color: var(--vv-color-gold-40);
}

.vv-context-pane__explanation-text {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-relaxed);
  margin: 0;
}

/* Dark mode adjustments for DCF context */
[data-theme="dark"] .vv-context-pane__formula {
  background: var(--vv-color-gray-10);
}

[data-theme="dark"] .vv-context-pane__formula-text {
  color: var(--vv-color-blue-30);
}

/* ════════════════════════════════════════════════════════════════════════════
   M2: Moat Checklist Category Q&A (Understanding the Moat table)
   Displays Mauboussin questions with answers when category row is hovered
   ════════════════════════════════════════════════════════════════════════════ */

.vv-context-pane__moat-qa {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-4);
}

.vv-context-pane__moat-description {
  margin: 0;
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed, 1.5);
  color: var(--vv-color-text-secondary);
}

.vv-context-pane__qa-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-4);
}

.vv-context-pane__qa-item {
  position: relative; /* J7.1: Containment for clip-hidden counter affordance */
  padding-bottom: var(--vv-space-3);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-context-pane__qa-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.vv-context-pane__qa-question {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
  margin-bottom: var(--vv-space-2);
  line-height: var(--vv-line-height-normal);
}

.vv-context-pane__qa-answer {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-relaxed);
  margin: 0;
}

/* Factbook link in context pane */
.vv-context-pane__factbook-link {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-2);
  margin-top: var(--vv-space-3);
  padding: var(--vv-space-2) var(--vv-space-3);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-interactive);
  background: var(--vv-color-interactive-bg);
  border-radius: var(--vv-radius-sm);
  text-decoration: none;
  transition: background-color var(--vv-transition-fast), color var(--vv-transition-fast);
}

.vv-context-pane__factbook-link:hover {
  color: var(--vv-color-interactive-hover);
  background: var(--vv-color-blue-5);
}

.vv-context-pane__factbook-link-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Dark theme adjustments */
[data-theme="dark"] .vv-context-pane__qa-item {
  border-bottom-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-context-pane__factbook-link {
  color: var(--vv-color-blue-40);
  background: rgba(35, 120, 195, 0.15);
}

[data-theme="dark"] .vv-context-pane__factbook-link:hover {
  color: var(--vv-color-blue-30);
  background: rgba(35, 120, 195, 0.25);
}

[data-theme="dark"] .vv-ntm-chart__tooltip-bg {
  fill: var(--vv-color-surface-card);
  stroke: var(--vv-color-gray-70);
}

/* System dark mode preference fallback */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-context-pane__qa-item {
    border-bottom-color: var(--vv-color-border-light);
  }

  html:not([data-theme="light"]) .vv-context-pane__factbook-link {
    color: var(--vv-color-blue-40);
    background: rgba(35, 120, 195, 0.15);
  }

  html:not([data-theme="light"]) .vv-context-pane__factbook-link:hover {
    color: var(--vv-color-blue-30);
    background: rgba(35, 120, 195, 0.25);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESEARCH NOTES — User margin notes in context pane (J1.1–J1.3)
   Visual grammar: blue left border = user content (Ghost Slider duality)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Affordance (empty state) ── */
.vv-research-notes__affordance {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  cursor: pointer;
  padding: var(--vv-space-2) 0;
  text-align: left;
  transition: color var(--vv-transition-fast);
}

.vv-research-notes__affordance:hover,
.vv-research-notes__affordance:focus-visible {
  color: var(--vv-color-interactive);
}

.vv-research-notes__affordance:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Active state (editing + saved display) ── */
.vv-research-notes {
  border-left: 4px solid var(--vv-color-interactive);
  padding-left: var(--vv-space-3);
}

.vv-research-notes__label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-research-notes__textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--vv-rhythm) * 3); /* 3 lines = 72px */
  padding: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
  background: transparent;
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
  resize: vertical;
  transition: border-color var(--vv-transition-fast);
}

.vv-research-notes__textarea:focus {
  outline: none;
  border-color: var(--vv-color-interactive);
}

.vv-research-notes__textarea::placeholder {
  color: var(--vv-color-text-tertiary);
}

.vv-research-notes__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--vv-space-1);
}

.vv-research-notes__save-hint {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary); /* J17.4: bumped from text-tertiary for WCAG AA — instructional text needs 4.5:1 (8.41:1 on surface-secondary) */
  font-style: italic;
}

.vv-research-notes__char-count {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-family: var(--vv-font-family-mono);
}

.vv-research-notes__char-count--near-limit {
  color: var(--vv-color-orange-60); /* J17.4: bumped from orange-50 for WCAG AA — 5.16:1 on surface-secondary */
}

/* ── Saved display state ── */
.vv-research-notes__text {
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.vv-research-notes__actions {
  display: flex;
  gap: var(--vv-space-3);
  align-items: center;
  margin-top: var(--vv-space-2);
  opacity: 0;
  transition: opacity var(--vv-transition-fast);
}

.vv-research-notes:hover .vv-research-notes__actions,
.vv-research-notes:focus-within .vv-research-notes__actions {
  opacity: 1;
}

.vv-research-notes__edit,
.vv-research-notes__delete {
  font-size: var(--vv-font-size-sm);
  background: none;
  border: none;
  padding: var(--vv-space-1) var(--vv-space-2);
  cursor: pointer;
  font-family: var(--vv-font-family-sans);
  line-height: 1;
}

.vv-research-notes__edit {
  color: var(--vv-color-interactive);
}

.vv-research-notes__edit:hover {
  text-decoration: underline;
}

.vv-research-notes__delete {
  color: var(--vv-color-text-tertiary);
}

.vv-research-notes__delete:hover {
  color: var(--vv-color-magenta-50);
  text-decoration: underline;
}

.vv-research-notes__edit:focus-visible,
.vv-research-notes__delete:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Auto-save flash animation ── */
@keyframes vv-research-flash-save {
  0% { border-left-color: var(--vv-color-interactive); }
  30% { border-left-color: var(--vv-color-blue-30); }
  100% { border-left-color: var(--vv-color-interactive); }
}

.vv-research-notes--saving {
  animation: vv-research-flash-save 600ms ease-out;
}

/* ── Dark theme ── */
/* Border visibility: switch from border-light to border-primary for better contrast on dark surfaces */
[data-theme="dark"] .vv-research-notes__textarea {
  border-color: var(--vv-color-border-primary);
}

/* Focus must re-assert interactive color to win specificity over the dark unfocused rule above */
[data-theme="dark"] .vv-research-notes__textarea:focus {
  border-color: var(--vv-color-interactive);
}

/* ── System dark mode fallback ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-research-notes__textarea {
    border-color: var(--vv-color-border-primary);
  }

  html:not([data-theme="light"]) .vv-research-notes__textarea:focus {
    border-color: var(--vv-color-interactive);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   COUNTER-ARGUMENTS — User rebuttals below factbook Q&A answers (J2.1–J2.3)
   Visual grammar: blue left border = user content (Ghost Slider duality)
   Gestalt (Proximity): appears directly below the answer it challenges
   Tufte: affordance visible only on hover (high data-ink ratio)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Affordance (hover-only "↳ But" link) ── */
.vv-research-counter__affordance {
  /* J7.1: Use clip instead of display:none so button stays in tab order for keyboard users.
     On focus, :focus-within on parent reveals it visually. display:none would remove from a11y tree. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  cursor: pointer;
  padding: var(--vv-space-1) 0 0 0;
  text-align: left;
  transition: color var(--vv-transition-fast);
}

.vv-context-pane__qa-item:hover .vv-research-counter__affordance,
.vv-context-pane__qa-item:focus-within .vv-research-counter__affordance,
.vv-insight-counter:hover .vv-research-counter__affordance,
.vv-insight-counter:focus-within .vv-research-counter__affordance {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.vv-research-counter__affordance:hover,
.vv-research-counter__affordance:focus-visible {
  color: var(--vv-color-interactive);
}

.vv-research-counter__affordance:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Active state (editing + saved display) ── */
.vv-research-counter {
  border-left: 4px solid var(--vv-color-interactive);
  padding-left: var(--vv-space-3);
  margin-top: var(--vv-space-2);
}

.vv-research-counter__label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-research-counter__textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--vv-rhythm) * 2); /* 2 lines = 48px — shorter than notes */
  padding: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
  background: transparent;
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
  resize: vertical;
  transition: border-color var(--vv-transition-fast);
}

.vv-research-counter__textarea:focus {
  outline: none;
  border-color: var(--vv-color-interactive);
}

.vv-research-counter__textarea::placeholder {
  color: var(--vv-color-text-tertiary);
}

.vv-research-counter__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--vv-space-1);
}

.vv-research-counter__save-hint {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary); /* J16.3: bumped from text-tertiary for WCAG AA — instructional keyboard text */
  font-style: italic;
}

.vv-research-counter__char-count {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-family: var(--vv-font-family-mono);
}

.vv-research-counter__char-count--near-limit {
  color: var(--vv-color-orange-60); /* J16.3: bumped from orange-50 for WCAG AA — 5.16:1 on surface-secondary */
}

/* ── Saved display state ── */
.vv-research-counter__text {
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.vv-research-counter__actions {
  display: flex;
  gap: var(--vv-space-3);
  align-items: center;
  margin-top: var(--vv-space-2);
  opacity: 0;
  transition: opacity var(--vv-transition-fast);
}

.vv-research-counter:hover .vv-research-counter__actions,
.vv-research-counter:focus-within .vv-research-counter__actions {
  opacity: 1;
}

.vv-research-counter__edit,
.vv-research-counter__delete {
  font-size: var(--vv-font-size-sm);
  background: none;
  border: none;
  padding: var(--vv-space-1) var(--vv-space-2);
  cursor: pointer;
  font-family: var(--vv-font-family-sans);
  line-height: 1;
}

.vv-research-counter__edit {
  color: var(--vv-color-interactive);
}

.vv-research-counter__edit:hover {
  text-decoration: underline;
}

.vv-research-counter__delete {
  color: var(--vv-color-text-tertiary);
}

.vv-research-counter__delete:hover {
  color: var(--vv-color-magenta-50);
  text-decoration: underline;
}

.vv-research-counter__edit:focus-visible,
.vv-research-counter__delete:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Reuse the flash-save animation from research notes ── */
.vv-research-counter--saving {
  animation: vv-research-flash-save 600ms ease-out;
}

/* ── Dark theme ── */
/* Border visibility: switch from border-light to border-primary for better contrast on dark surfaces */
[data-theme="dark"] .vv-research-counter__textarea {
  border-color: var(--vv-color-border-primary);
}

/* Focus must re-assert interactive color to win specificity over the dark unfocused rule above */
[data-theme="dark"] .vv-research-counter__textarea:focus {
  border-color: var(--vv-color-interactive);
}

/* ── System dark mode fallback ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-research-counter__textarea {
    border-color: var(--vv-color-border-primary);
  }

  html:not([data-theme="light"]) .vv-research-counter__textarea:focus {
    border-color: var(--vv-color-interactive);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   USER Q&A — User-authored questions after factbook Q&A (J3.1–J3.3)
   Visual grammar: blue left border = user content (Ghost Slider duality)
   Gestalt (Proximity): appears after factbook Q&A, before factbook link
   PRD: Explicit Save/Cancel (not auto-save) — bigger commitment than notes
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Affordance (empty state) ── */
.vv-research-user-qa__affordance {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  cursor: pointer;
  padding: var(--vv-space-2) 0;
  text-align: left;
  transition: color var(--vv-transition-fast);
}

.vv-research-user-qa__affordance:hover,
.vv-research-user-qa__affordance:focus-visible {
  color: var(--vv-color-interactive);
}

.vv-research-user-qa__affordance:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Section container (wraps header + all user Q&A items) ── */
.vv-research-user-qa {
  border-left: 4px solid var(--vv-color-interactive);
  padding-left: var(--vv-space-3);
}

.vv-research-user-qa__header {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-3);
}

/* ── Saved Q&A list ── */
.vv-research-user-qa__list {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
}

.vv-research-user-qa__item {
  position: relative;
}

.vv-research-user-qa__question {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-line-height-relaxed);
}

.vv-research-user-qa__answer {
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: var(--vv-space-1);
}

.vv-research-user-qa__item-actions {
  display: flex;
  gap: var(--vv-space-3);
  align-items: center;
  margin-top: var(--vv-space-1);
  opacity: 0;
  transition: opacity var(--vv-transition-fast);
}

.vv-research-user-qa__item:hover .vv-research-user-qa__item-actions,
.vv-research-user-qa__item:focus-within .vv-research-user-qa__item-actions {
  opacity: 1;
}

.vv-research-user-qa__edit,
.vv-research-user-qa__delete {
  font-size: var(--vv-font-size-sm);
  background: none;
  border: none;
  padding: var(--vv-space-1) var(--vv-space-2);
  cursor: pointer;
  font-family: var(--vv-font-family-sans);
  line-height: 1;
}

.vv-research-user-qa__edit {
  color: var(--vv-color-interactive);
}

.vv-research-user-qa__edit:hover {
  text-decoration: underline;
}

.vv-research-user-qa__delete {
  color: var(--vv-color-text-tertiary);
}

.vv-research-user-qa__delete:hover {
  color: var(--vv-color-magenta-50);
  text-decoration: underline;
}

.vv-research-user-qa__edit:focus-visible,
.vv-research-user-qa__delete:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Form (new/edit Q&A pair) ── */
.vv-research-user-qa__form {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
}

.vv-research-user-qa__field-label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-1);
}

.vv-research-user-qa__input {
  display: block;
  width: 100%;
  padding: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
  background: transparent;
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
  resize: vertical;
  transition: border-color var(--vv-transition-fast);
}

.vv-research-user-qa__input--question {
  min-height: calc(var(--vv-rhythm) * 1.5); /* ~36px — single line question */
}

.vv-research-user-qa__input--answer {
  min-height: calc(var(--vv-rhythm) * 2.5); /* ~60px — multi-line answer */
}

.vv-research-user-qa__input:focus {
  outline: none;
  border-color: var(--vv-color-interactive);
}

.vv-research-user-qa__input::placeholder {
  color: var(--vv-color-text-tertiary);
}

.vv-research-user-qa__char-count {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-family: var(--vv-font-family-mono);
  text-align: right;
}

.vv-research-user-qa__char-count--near-limit {
  color: var(--vv-color-orange-50);
}

/* ── Flash save animation (reuses keyframe from notes) ── */
.vv-research-user-qa--saving {
  animation: vv-research-flash-save 600ms ease-out;
}

/* ── Limit notice ── */
.vv-research-user-qa__limit {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  font-style: italic;
  padding: var(--vv-space-1) 0;
}

/* ── Dark theme ── */
/* Border visibility: switch from border-light to border-primary for better contrast on dark surfaces */
[data-theme="dark"] .vv-research-user-qa__input {
  border-color: var(--vv-color-border-primary);
}

/* Focus must re-assert interactive color to win specificity over the dark unfocused rule above */
[data-theme="dark"] .vv-research-user-qa__input:focus {
  border-color: var(--vv-color-interactive);
}

/* ── System dark mode fallback ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-research-user-qa__input {
    border-color: var(--vv-color-border-primary);
  }

  html:not([data-theme="light"]) .vv-research-user-qa__input:focus {
    border-color: var(--vv-color-interactive);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Value Driver Calculation Breakdown (Phase 1 metrics)
   Reuses DCF context patterns but adds input list display
   ════════════════════════════════════════════════════════════════════════════ */

.vv-context-pane__calculation-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-4);
}

/* Inputs list (Koyfin data) */
.vv-context-pane__inputs {
  padding: var(--vv-space-3) var(--vv-space-4);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-md);
}

.vv-context-pane__inputs-label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-context-pane__inputs-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-context-pane__input-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vv-space-3);
}

.vv-context-pane__input-label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin: 0;
}

.vv-context-pane__input-value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0;
  text-align: right;
}

.vv-context-pane__input-unit {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-left: var(--vv-space-1);
}

.vv-context-pane__note {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  font-style: italic;
  margin: 0;
  line-height: var(--vv-line-height-relaxed);
}

/* Dark mode for value driver calculation */
[data-theme="dark"] .vv-context-pane__inputs {
  background: var(--vv-color-gray-10);
}

/* Source quote (analyst/management — distinct from user notes which use blue) */
.vv-context-pane__quote {
  margin: var(--vv-space-4) 0;
  padding: var(--vv-space-3) var(--vv-space-4);
  background: var(--vv-color-surface-tertiary);
  border-left: 3px solid var(--vv-color-text-primary);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
  font-style: italic;
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-relaxed);
}

.vv-context-pane__quote-text {
  margin: 0 0 var(--vv-space-2) 0;
}

.vv-context-pane__quote-source {
  display: block;
  font-style: normal;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-top: var(--vv-space-2);
}

/* Say-do ratio section */
.vv-context-pane__say-do {
  margin: var(--vv-space-4) 0;
}

.vv-context-pane__say-do-label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-context-pane__say-do-text {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
}

/* Signals list (warnings, checks) */
.vv-context-pane__signals {
  margin: var(--vv-space-4) 0;
  padding: 0;
  list-style: none;
}

.vv-context-pane__signal {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) 0;
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
}

.vv-context-pane__signal-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.vv-context-pane__signal--warning .vv-context-pane__signal-icon {
  color: var(--vv-color-warning);
}

.vv-context-pane__signal--check .vv-context-pane__signal-icon {
  color: var(--vv-color-mint-50);
}

.vv-context-pane__signal--neutral .vv-context-pane__signal-icon {
  color: var(--vv-color-text-tertiary);
}

.vv-context-pane__signal-text {
  color: var(--vv-color-text-secondary);
}

/* Source link */
.vv-context-pane__source-link {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  margin-top: var(--vv-space-4);
  padding-top: var(--vv-space-3);
  border-top: 1px solid var(--vv-color-border-light);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-interactive);
  text-decoration: none;
  transition: color var(--vv-transition-fast);
}

.vv-context-pane__source-link:hover {
  color: var(--vv-color-interactive-hover, var(--vv-color-blue-60));
  text-decoration: underline;
}

.vv-context-pane__source-link svg {
  width: 1rem;
  height: 1rem;
}

/* X1.1: Company-specific evidence for moat sources */
.vv-context-pane__evidence {
  margin: var(--vv-space-4) 0;
  padding: var(--vv-space-3);
  background-color: var(--vv-color-gold-5);
  border-left: 3px solid var(--vv-color-gold-50);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
}

.vv-context-pane__evidence-label {
  display: block;
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-gold-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

.vv-context-pane__evidence-text {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-line-height-relaxed);
}

[data-theme="dark"] .vv-context-pane__evidence {
  background-color: rgba(255, 191, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vv-context-pane__evidence {
    background-color: rgba(255, 191, 0, 0.1);
  }
}

/* Overflow fade indicator
 * Gradual fade creates natural "more content below" affordance
 * Multi-stop gradient for smooth transition without hard edges
 * Works in both light and dark modes */
.vv-context-pane__overflow-fade {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  margin-top: -88px;
  /* Ensure fade renders above scrolling content */
  z-index: 10;
  /* Gradual multi-stop fade for natural depth perception */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(249, 240, 237, 0.3) 20%,
    rgba(249, 240, 237, 0.7) 45%,
    rgb(249, 240, 237) 70%
  );
  /* Soft shadow for depth instead of hard border */
  box-shadow: 0 -16px 24px -8px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--vv-transition-fast);
  border-radius: 0 0 var(--vv-radius-md) var(--vv-radius-md);
}

/* Show fade when content overflows and not scrolled to bottom */
.vv-context-pane.has-overflow:not(.scrolled-to-bottom) .vv-context-pane__overflow-fade {
  opacity: 1;
}

/* Dark theme overrides */
[data-theme="dark"] .vv-context-pane {
  background: var(--vv-color-surface-secondary);
  border-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-context-pane__quote {
  background: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-context-pane__overflow-fade {
  /* Gradual fade for dark mode */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(45, 45, 45, 0.3) 20%,
    rgba(45, 45, 45, 0.7) 45%,
    rgb(45, 45, 45) 70%
  );
  box-shadow: 0 -16px 24px -8px rgba(0, 0, 0, 0.15);
}

/* J10.6: Footer collision prevention
 * When footer enters viewport, dynamically constrain pane max-height
 * to maintain 24px gap between pane bottom and footer top */
.vv-context-pane--footer-near {
  max-height: var(--vv-context-pane-max-height, calc(100vh - var(--vv-space-5) * 2));
  /* Smooth transition when adjusting height */
  transition: max-height var(--vv-transition-normal);
}

/* Responsive: hide Context Pane below minimum supported viewport (L8.1)
 * The unsupported message is shown below 900px, so Context Pane
 * only needs to be hidden at the same breakpoint.
 * Note: At 900-1099px (L7.3), Context Pane remains visible in collapsed nav layout. */
@media (max-width: 899px) {
  .vv-context-pane {
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vv-context-pane__content {
    animation: none;
    transition: none;
  }
  .vv-context-pane__content--transitioning {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   17. DCF MATH PANEL (J6.1)
   Year-by-year DCF calculation display with collapsible details
   ════════════════════════════════════════════════════════════════════════════ */

/* DCF Formula Display */
.vv-dcf-formula {
  margin-bottom: var(--vv-space-4);
  padding: var(--vv-space-3);
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
  text-align: center;
}

.vv-dcf-formula code {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
}

/* Assumptions Summary */
.vv-dcf-assumptions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-space-3) var(--vv-space-5);
  margin-bottom: var(--vv-space-5);
  padding: var(--vv-space-3);
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
}

.vv-dcf-assumptions__item {
  display: flex;
  gap: var(--vv-space-2);
  align-items: baseline;
}

.vv-dcf-assumptions__label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-dcf-assumptions__value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
}

/* DCF Table Wrapper */
.vv-dcf-table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--vv-space-5);
}

/* DCF Table */
.vv-dcf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vv-font-size-sm);
}

.vv-dcf-table th,
.vv-dcf-table td {
  padding: var(--vv-space-2) var(--vv-space-3);
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
  text-align: left;
}

.vv-dcf-table th {
  background-color: var(--vv-color-surface-tertiary);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-secondary);
  font-size: var(--vv-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vv-dcf-table__num {
  text-align: right;
  font-family: var(--vv-font-family-mono);
}

.vv-dcf-table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-dcf-table__subtotal {
  font-weight: var(--vv-font-weight-semibold);
  background-color: var(--vv-color-surface-tertiary);
  border-top: 2px solid var(--vv-color-border-light);
}

/* Terminal Value Section */
.vv-dcf-terminal {
  margin-bottom: var(--vv-space-5);
  padding: var(--vv-space-4);
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
}

.vv-dcf-terminal__title {
  margin: 0 0 var(--vv-space-3) 0;
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

.vv-dcf-terminal__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--vv-space-2) 0;
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-light);
}

.vv-dcf-terminal__row:last-child {
  border-bottom: none;
}

.vv-dcf-terminal__label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-dcf-terminal__value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
}

/* DCF Summary Section */
.vv-dcf-summary {
  margin-bottom: var(--vv-space-4);
  padding: var(--vv-space-4);
  background-color: var(--vv-color-interactive-hover);
  border-radius: var(--vv-radius-sm);
}

.vv-dcf-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--vv-space-2) 0;
  border-bottom: var(--vv-border-width) solid var(--vv-color-border-on-interactive);
}

.vv-dcf-summary__row:last-child {
  border-bottom: none;
}

.vv-dcf-summary__label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-on-interactive-muted);
}

.vv-dcf-summary__value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-on-interactive);
}

.vv-dcf-summary__row--highlight {
  padding-top: var(--vv-space-3);
  margin-top: var(--vv-space-2);
  border-top: 2px solid var(--vv-color-border-on-interactive-strong);
}

.vv-dcf-summary__value--highlight {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
}

/* DCF Disclaimer */
.vv-dcf-disclaimer {
  margin: 0;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-line-height-relaxed);
}

/* ============================================================================
   Value Composition Section (S1B.4)
   Time-horizon breakdown showing near-term vs. distant future value
   ============================================================================ */

.vv-value-composition {
  margin-bottom: var(--vv-space-6);
}

.vv-value-composition__chart {
  margin-bottom: var(--vv-space-3);
}

.vv-value-composition__insight {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* Question-style heading for value composition */
.vv-prose__heading--question {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-4);
}

/* DCF Flow Summary (S1B.1/S1B.2) - Collapsed view with Revenue → NOPAT → FCF → PV */
.vv-dcf-section .vv-dcf-summary {
  /* Reset conflicting styles from legacy .vv-dcf-summary */
  background-color: transparent;
  padding: 0;
  margin-bottom: var(--vv-space-5);
}

.vv-dcf-summary__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vv-space-4);
  padding: var(--vv-space-5);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-lg);
}

.vv-dcf-summary__node {
  text-align: center;
}

.vv-dcf-summary__flow .vv-dcf-summary__label {
  display: block;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-bottom: var(--vv-space-1);
}

.vv-dcf-summary__flow .vv-dcf-summary__value {
  display: block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-md);
  font-weight: 600;
  color: var(--vv-color-text-primary);
}

.vv-dcf-summary__arrow {
  color: var(--vv-color-text-tertiary);
  font-size: var(--vv-font-size-lg);
  flex-shrink: 0;
}

.vv-dcf-summary__expand {
  display: block;
  margin: var(--vv-space-4) auto 0;
  padding: var(--vv-space-2) var(--vv-space-4);
  color: var(--vv-color-interactive);
  font-size: var(--vv-font-size-sm);
  background: none;
  border: none;
  cursor: pointer;
}

.vv-dcf-summary__expand:hover {
  text-decoration: underline;
}

/* Responsive: Stack flow vertically on narrow viewports */
@media (max-width: 768px) {
  .vv-dcf-summary__flow {
    flex-direction: column;
    gap: var(--vv-space-2);
  }

  .vv-dcf-summary__arrow {
    transform: rotate(90deg);
  }
}

/* Dark theme overrides */
[data-theme="dark"] .vv-dcf-formula {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-dcf-assumptions {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-dcf-table th {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-dcf-table tbody tr:hover {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-dcf-table__subtotal {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-dcf-terminal {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-dcf-summary {
  /* Use blue-60 (#0b4778) which is NOT redefined in dark mode, ensuring dark background */
  /* blue-50 gets redefined to #8fc4ed in dark mode (too light for white text) */
  background-color: var(--vv-color-blue-60);
}

/* Responsive: Stack assumptions on mobile */
@media (max-width: 640px) {
  .vv-dcf-assumptions {
    flex-direction: column;
    gap: var(--vv-space-2);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   22. DATA QUALITY WARNING (J8.1)

   Displays a warning banner when analyst coverage is low (< 3 analysts).
   Uses orange (warning semantic) per CLAUDE.md Section 2.
   Styled "informative, not alarming" per PRD requirements.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-data-quality-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-space-3);
  padding: var(--vv-space-3) var(--vv-space-4);
  margin: var(--vv-space-4) 0;
  background-color: var(--vv-color-orange-5);
  border-left: 3px solid var(--vv-color-warning);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-normal);
}

.vv-data-quality-warning__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--vv-color-warning);
  margin-top: 0.125rem; /* Optical alignment with text baseline */
}

.vv-data-quality-warning__text {
  color: var(--vv-color-orange-50);
  font-weight: var(--vv-font-weight-medium);
}

/* Critical level: No analyst coverage */
.vv-data-quality-warning--critical {
  background-color: var(--vv-color-red-5);
  border-left-color: var(--vv-color-error);
}

.vv-data-quality-warning--critical .vv-data-quality-warning__icon {
  color: var(--vv-color-error);
}

.vv-data-quality-warning--critical .vv-data-quality-warning__text {
  color: var(--vv-color-red-50);
}

/* Screen reader only description */
.vv-data-quality-warning__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Dark theme overrides */
[data-theme="dark"] .vv-data-quality-warning {
  background-color: rgba(194, 120, 48, 0.15);
}

[data-theme="dark"] .vv-data-quality-warning--critical {
  background-color: rgba(194, 64, 48, 0.15);
}

/* ════════════════════════════════════════════════════════════════════════════
   Section 23: Stale Data Warning (J8.2)
   ────────────────────────────────────────────────────────────────────────────
   Displays a warning banner when analysis data is older than 7 days.
   Uses orange (warning semantic) per CLAUDE.md Section 2.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-stale-data-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-space-3);
  padding: var(--vv-space-3) var(--vv-space-4);
  margin: var(--vv-space-4) 0;
  background-color: var(--vv-color-orange-5);
  border-left: 3px solid var(--vv-color-warning);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-normal);
}

.vv-stale-data-warning__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--vv-color-warning);
  margin-top: 0.125rem; /* Optical alignment with text baseline */
}

.vv-stale-data-warning__text {
  color: var(--vv-color-orange-50);
  font-weight: var(--vv-font-weight-medium);
}

/* Warning level: Data is stale (7+ days) */
.vv-stale-data-warning--warning {
  /* Default styling is already warning level */
}

/* Critical level: Data is very stale (14+ days) */
.vv-stale-data-warning--critical {
  background-color: var(--vv-color-red-5);
  border-left-color: var(--vv-color-error);
}

.vv-stale-data-warning--critical .vv-stale-data-warning__icon {
  color: var(--vv-color-error);
}

.vv-stale-data-warning--critical .vv-stale-data-warning__text {
  color: var(--vv-color-red-50);
}

/* Screen reader only description */
.vv-stale-data-warning__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Dark theme overrides */
[data-theme="dark"] .vv-stale-data-warning {
  background-color: rgba(194, 120, 48, 0.15);
}

[data-theme="dark"] .vv-stale-data-warning--critical {
  background-color: rgba(194, 64, 48, 0.15);
}

/* ════════════════════════════════════════════════════════════════════════════
 * Stock Not Found (J8.6)
 * Displays a user-friendly message when a searched stock is not in the database.
 * Shows helpful context about database updates and a CTA to request the stock.
 * ════════════════════════════════════════════════════════════════════════════ */

.vv-stock-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--vv-space-8);
  background-color: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-lg);
  max-width: 400px;
  margin: var(--vv-space-8) auto;
}

.vv-stock-not-found__icon {
  width: 64px;
  height: 64px;
  color: var(--vv-color-gray-50);
  margin-bottom: var(--vv-space-5);
}

.vv-stock-not-found__icon svg {
  width: 100%;
  height: 100%;
}

.vv-stock-not-found__title {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-lg);
  font-weight: 600;
  color: var(--vv-color-text-primary);
  margin: 0 0 var(--vv-space-3) 0;
  line-height: var(--vv-line-height-tight);
}

.vv-stock-not-found__message {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  margin: 0 0 var(--vv-space-3) 0;
  line-height: var(--vv-line-height-relaxed);
}

.vv-stock-not-found__info {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  margin: 0 0 var(--vv-space-5) 0;
  line-height: var(--vv-line-height-normal);
}

.vv-stock-not-found__action {
  margin-top: var(--vv-space-3);
}

.vv-stock-not-found__action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vv-stock-not-found__action--submitted {
  background-color: var(--vv-color-success, #2e7d32);
  border-color: var(--vv-color-success, #2e7d32);
}

/* Dark theme overrides */
[data-theme="dark"] .vv-stock-not-found {
  background-color: var(--vv-color-surface-secondary);
}

[data-theme="dark"] .vv-stock-not-found__icon {
  color: var(--vv-color-gray-40);
}

/* ════════════════════════════════════════════════════════════════════════════
   DEMO TOGGLE (Development-only UI for testing states)

   Positioned as a centered top bar to avoid overlapping any of the three panes.
   This is a dev tool, not production UI - styled to be unobtrusive.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-demo-toggle {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--vv-z-dropdown);
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-1) var(--vv-space-4);
  background-color: var(--vv-color-gray-90);
  color: var(--vv-color-gray-5);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  border-bottom-left-radius: var(--vv-radius-md);
  border-bottom-right-radius: var(--vv-radius-md);
  box-shadow: var(--vv-shadow-sm);
}

.vv-demo-toggle__separator {
  margin-left: var(--vv-space-2);
  color: var(--vv-color-gray-40);
}

.vv-demo-toggle button {
  padding: var(--vv-space-1) var(--vv-space-2);
  background-color: var(--vv-color-gray-70);
  color: var(--vv-color-gray-5);
  border: none;
  border-radius: var(--vv-radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: background-color var(--vv-transition-fast);
}

.vv-demo-toggle button:hover {
  background-color: var(--vv-color-interactive);
}

/* Dark theme - invert the bar colors */
[data-theme="dark"] .vv-demo-toggle {
  background-color: var(--vv-color-gray-20);
  color: var(--vv-color-gray-90);
}

[data-theme="dark"] .vv-demo-toggle button {
  background-color: var(--vv-color-gray-40);
  color: var(--vv-color-gray-90);
}

/* Hide at unsupported viewports */
@media (max-width: 899px) {
  .vv-demo-toggle {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SKELETON WIDTH VARIANTS (for loading states)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-skeleton--w-60 { width: 60px; }
.vv-skeleton--w-80 { width: 80px; }
.vv-skeleton--w-100 { width: 100px; }
.vv-skeleton--w-180 { width: 180px; }
.vv-skeleton--w-full { width: 100%; }
.vv-skeleton--w-80pct { width: 80%; }

.vv-skeleton--h-40 { height: 40px; }
.vv-skeleton--h-150 { height: 150px; }
.vv-skeleton--h-200 { height: 200px; }

/* Skeleton container for flex layouts */
.vv-skeleton-row {
  display: flex;
  gap: var(--vv-space-4);
  margin-top: var(--vv-space-3);
}

/* Section 2 skeleton container — matches .vv-section2-panel spacing rhythm */
.vv-section2-skeleton__panel {
  margin-bottom: var(--vv-space-5);
}

/* Stacked bar skeleton — approximates .vv-attention-bar__track (3rem height) */
.vv-skeleton--bar {
  height: 3rem;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROSE HEADINGS AND PARAGRAPHS
   ════════════════════════════════════════════════════════════════════════════ */

.vv-prose__heading-xl {
  font-size: var(--vv-font-size-xl);
  font-weight: var(--vv-font-weight-semibold);
  margin-bottom: var(--vv-space-4);
  color: var(--vv-color-text-primary);
}

.vv-prose__heading-lg {
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-semibold);
  margin-bottom: var(--vv-space-3);
  color: var(--vv-color-text-primary);
}

.vv-prose__heading-md {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  margin-bottom: var(--vv-space-4);
  color: var(--vv-color-text-primary);
}

.vv-prose__body {
  color: var(--vv-color-text-secondary);
}

.vv-prose__body--sm {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-4);
}

/* ════════════════════════════════════════════════════════════════════════════
   ANALYSIS BADGE STYLING
   ════════════════════════════════════════════════════════════════════════════ */

.vv-analysis-badge--inline {
  margin-top: var(--vv-space-2);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════════
   SLIDER WRAPPER SPACING
   ════════════════════════════════════════════════════════════════════════════ */

.vv-slider-wrapper--spaced {
  margin-bottom: var(--vv-space-5);
}

/* ════════════════════════════════════════════════════════════════════════════
   PRECOMMIT CARD SPACING
   ════════════════════════════════════════════════════════════════════════════ */

.vv-precommit-card--spaced {
  margin-bottom: var(--vv-space-5);
}

/* ════════════════════════════════════════════════════════════════════════════
   ICON SIZING (for inline SVG icons)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-icon--sm {
  width: 1rem;
  height: 1rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   ERROR STATE MIN HEIGHT
   ════════════════════════════════════════════════════════════════════════════ */

.vv-error-state--min-h-150 {
  min-height: 150px;
}

/* ════════════════════════════════════════════════════════════════════════════
   ASSUMPTIONS PANEL (S1A.1/S1A.3) - Market Consensus Assumptions

   Displays the 4 market-implied assumptions from PIE reverse DCF analysis.
   Design: Tufte data-ink maximization, Gestalt grouping via card layout.
   Typography: IBM Plex Mono for values, Sans for labels.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-assumptions-panel {
  margin-top: var(--vv-space-5);
  margin-bottom: var(--vv-space-8);
}

.vv-assumptions-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vv-space-4);
  margin-top: var(--vv-space-4);
}

.vv-assumption-card {
  padding: var(--vv-space-4);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-md);
}

.vv-assumption-card__label {
  display: block;
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-2);
}

.vv-assumption-card__value {
  display: block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: 600;
  color: var(--vv-color-text-primary);
}

.vv-assumptions-panel__source {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-top: var(--vv-space-4);
}

/* Responsive: 2x2 grid on narrower viewports */
@media (max-width: 1200px) {
  .vv-assumptions-panel__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   S1A.4: Inline Editing for Assumptions
   ──────────────────────────────────────────────────────────────────────────── */

/* Display container with value and edit button */
.vv-assumption-card__display {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
}

/* Edit button - appears on hover */
.vv-assumption-card__edit-btn {
  display: none;
  padding: 0;
  background: none;
  border: none;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-interactive);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vv-assumption-card__edit-btn:hover {
  color: var(--vv-color-interactive-hover);
}

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

/* Show edit button on card hover */
.vv-assumption-card:hover .vv-assumption-card__edit-btn {
  display: inline;
}

/* Edit mode container */
.vv-assumption-card__edit {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

/* Input row with value and unit */
.vv-assumption-card__input-row {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-1);
}

/* Edit input field */
.vv-assumption-card__input {
  width: 6ch;
  min-width: 5rem;
  padding: var(--vv-space-2) var(--vv-space-3);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: 600;
  color: var(--vv-color-text-primary);
  background: var(--vv-color-surface-primary);
  border: 2px solid var(--vv-color-interactive);
  border-radius: var(--vv-radius-sm);
  outline: none;
  text-align: center;
  -moz-appearance: textfield;
}

.vv-assumption-card__input::-webkit-outer-spin-button,
.vv-assumption-card__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vv-assumption-card__input:focus {
  border-color: var(--vv-color-focus);
  box-shadow: 0 0 0 3px var(--vv-color-focus-ring);
}

/* Unit label next to input */
.vv-assumption-card__unit {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: 600;
  color: var(--vv-color-text-primary);
}

/* Card in editing state - override custom border-left to ensure consistent border all around */
.vv-assumption-card--editing {
  background: var(--vv-color-surface-primary);
  border: 2px solid var(--vv-color-interactive);
  border-radius: var(--vv-radius-md);
}

/* When editing a custom card, override the left border to be consistent */
.vv-assumption-card--editing.vv-assumption-card--custom {
  border-left: 2px solid var(--vv-color-interactive);
  padding-left: var(--vv-space-4);
}

/* Custom indicator badge */
.vv-assumption-card__custom-badge {
  position: absolute;
  top: var(--vv-space-2);
  right: var(--vv-space-2);
  padding: 2px var(--vv-space-2);
  font-size: var(--vv-font-size-xs);
  font-weight: 600;
  color: var(--vv-color-blue-70);
  background: var(--vv-color-blue-5);
  border-radius: var(--vv-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card needs relative positioning for badge */
.vv-assumption-card {
  position: relative;
}

/* Label needs right padding to avoid badge overlap */
.vv-assumption-card__label {
  padding-right: 4.5rem;
}

/* Card with custom value has subtle left border accent */
.vv-assumption-card--custom {
  border-left: 3px solid var(--vv-color-blue-40);
  padding-left: calc(var(--vv-space-4) - 3px);
}

/* Hide badge during edit mode - reduces noise, user knows they're customizing */
.vv-assumption-card--editing .vv-assumption-card__custom-badge {
  display: none;
}

/* Keyboard hint below input */
.vv-assumption-card__hint {
  display: block;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-top: var(--vv-space-1);
}

/* Dark mode adjustments */
[data-theme="dark"] .vv-assumption-card__input {
  background: var(--vv-color-gray-90);
  border-color: var(--vv-color-interactive);
  color: var(--vv-color-text-primary);
}

[data-theme="dark"] .vv-assumption-card--editing {
  background: var(--vv-color-gray-90);
}

[data-theme="dark"] .vv-assumption-card__custom-badge {
  background: var(--vv-color-blue-90);
  color: var(--vv-color-blue-30);
}

/* ════════════════════════════════════════════════════════════════════════════
   MIFP PANEL (S1C.1/S1C.3) - Market Implied Forecast Period

   Shows the "X YEARS of value-creating growth" headline with anchoring context.
   Design: Tufte-inspired data-dense display, Gestalt grouping via background.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-mifp-panel {
  padding: var(--vv-space-6);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-lg);
  margin-top: var(--vv-space-8);
  margin-bottom: var(--vv-space-8);
  text-align: center;
}

.vv-mifp-panel__headline {
  margin-bottom: var(--vv-space-6);
}

.vv-mifp-panel__years {
  display: block;
  font-size: var(--vv-font-size-3xl);
  font-weight: 700;
  font-family: var(--vv-font-family-mono);
  line-height: 1;
  color: var(--vv-color-text-primary);
}

.vv-mifp-panel__subtitle {
  display: block;
  font-size: var(--vv-font-size-md);
  color: var(--vv-color-text-secondary);
  margin-top: var(--vv-space-2);
}

.vv-mifp-panel__anchoring {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--vv-space-2) var(--vv-space-6);
  max-width: 400px;
  margin: 0 auto var(--vv-space-5);
  text-align: left;
}

.vv-mifp-panel__row {
  display: contents;
}

.vv-mifp-panel__row-label {
  color: var(--vv-color-text-secondary);
  font-size: var(--vv-font-size-sm);
}

.vv-mifp-panel__row-value {
  font-family: var(--vv-font-family-mono);
  font-weight: 600;
  text-align: right;
  font-size: var(--vv-font-size-sm);
}

.vv-mifp-panel__interpretation {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  font-style: italic;
  max-width: 500px;
  margin: 0 auto;
}

/* ============================================================================
   REAL OPTIONS PANEL (S1B.6)
   ============================================================================
   Shows the gap between market price and DCF fair value.
   Mauboussin framework: Stock Price = DCF Value + Real Options Value

   Premium (gold accent): Market is betting on upside catalysts
   Discount (orange accent): Market is discounting risks
   ============================================================================ */

.vv-real-options-panel {
  padding: var(--vv-space-5);
  border-radius: var(--vv-radius-lg);
  margin-top: var(--vv-space-6);
  border-left: 4px solid transparent;
}

/* Premium state (price > DCF): Gold accent */
.vv-real-options-panel--premium {
  background: var(--vv-color-gold-5);
  border-left-color: var(--vv-color-gold-30);
}

/* Discount state (DCF > price): Orange accent */
.vv-real-options-panel--discount {
  background: var(--vv-color-orange-5);
  border-left-color: var(--vv-color-orange-40);
}

.vv-real-options-panel__header {
  margin-bottom: var(--vv-space-4);
}

.vv-real-options-panel__title {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0 0 var(--vv-space-2) 0;
}

.vv-real-options-panel--premium .vv-real-options-panel__title {
  color: var(--vv-color-gold-50);
}

.vv-real-options-panel--discount .vv-real-options-panel__title {
  color: var(--vv-color-orange-50);
}

.vv-real-options-panel__subtitle {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin: 0;
  font-family: var(--vv-font-family-mono);
}

/* Catalyst/Risk list */
.vv-real-options-panel__catalysts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vv-space-4) 0;
}

.vv-real-options-panel__catalyst {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) 0;
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
}

.vv-real-options-panel__catalyst-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.vv-real-options-panel__catalyst--check .vv-real-options-panel__catalyst-icon {
  color: var(--vv-color-gold-30);
}

.vv-real-options-panel__catalyst--warning .vv-real-options-panel__catalyst-icon {
  color: var(--vv-color-orange-40);
}

.vv-real-options-panel__catalyst-text {
  flex: 1;
}

/* Interpretation text */
.vv-real-options-panel__interpretation {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  font-style: italic;
  margin: 0;
  line-height: var(--vv-line-height-relaxed);
}

/* Dark theme overrides */
[data-theme="dark"] .vv-real-options-panel--premium {
  background: var(--vv-color-gold-5);
}

[data-theme="dark"] .vv-real-options-panel--premium .vv-real-options-panel__title {
  color: var(--vv-color-gold-30);
}

[data-theme="dark"] .vv-real-options-panel--discount {
  background: var(--vv-color-orange-5);
}

[data-theme="dark"] .vv-real-options-panel--discount .vv-real-options-panel__title {
  color: var(--vv-color-orange-30);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-real-options-panel--premium {
    background: var(--vv-color-gold-5);
  }

  html:not([data-theme="light"]) .vv-real-options-panel--premium .vv-real-options-panel__title {
    color: var(--vv-color-gold-30);
  }

  html:not([data-theme="light"]) .vv-real-options-panel--discount {
    background: var(--vv-color-orange-5);
  }

  html:not([data-theme="light"]) .vv-real-options-panel--discount .vv-real-options-panel__title {
    color: var(--vv-color-orange-30);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   28. VALUE SECTION (S1B.7)

   Question-based structure for DCF section with subsections for:
   - Q1: Time horizon (Value Composition Bar)
   - Q2: Assumptions (Explorable DCF Table)
   - Real Options Panel

   Follows Mauboussin PIE methodology with user-facing questions.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-value-section {
  margin-bottom: var(--vv-space-8);
}

.vv-value-section__subsection {
  margin-bottom: var(--vv-space-6);
  padding-bottom: var(--vv-space-5);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-value-section__subsection:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Question heading styling - slightly larger than base for emphasis */
.vv-value-section__subsection .vv-prose__heading--question {
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
  margin-bottom: var(--vv-space-4);
}

/* Insight text within subsections */
.vv-value-section__insight {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  font-style: italic;
  margin-top: var(--vv-space-3);
  margin-bottom: 0;
  text-align: center;
}

/* Dark mode */
[data-theme="dark"] .vv-value-section__subsection {
  border-bottom-color: var(--vv-color-gray-70);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-value-section__subsection {
    border-bottom-color: var(--vv-color-gray-70);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   29. MAUBOUSSIN THREE-PHASE STRUCTURE (P1.1-P3.9)

   Section 1 restructured following Mauboussin's Expectations Investing Ch.5:
   - Phase 1: Consensus Baseline ("What Does the Market Believe?")
   - Phase 2: MIFP Solver ("How Long Must Value Creation Last?")
   - Phase 3: Strategic Sanity Check ("Does This Make Sense?")

   Each phase is visually distinct with phase numbers and connecting visual flow.
   ════════════════════════════════════════════════════════════════════════════ */

/* Phase container - base styles for all three phases */
.vv-phase {
  position: relative;
  margin-bottom: var(--vv-space-8);
  padding: var(--vv-space-6);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-lg);
}


/* Phase header - contains main question and explanation */
.vv-phase__header {
  margin-bottom: var(--vv-space-5);
  padding-left: var(--vv-space-4);
}

.vv-phase__title {
  font-size: var(--vv-font-size-xl);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0 0 var(--vv-space-2) 0;
  line-height: var(--vv-line-height-xl);
}

.vv-phase__subtitle {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  margin: 0;
  max-width: 60ch;
  line-height: var(--vv-line-height-base);
}

/* Phase body - content area */
.vv-phase__body {
  padding-left: var(--vv-space-4);
}


/* Phase placeholder (for pending features) */
.vv-phase__placeholder {
  padding: var(--vv-space-5);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
  border: 1px dashed var(--vv-color-border);
}

.vv-phase__placeholder-text {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  margin-bottom: var(--vv-space-4);
}

.vv-phase__preview-data {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-phase__preview-data p {
  margin-bottom: var(--vv-space-2);
}

.vv-phase__preview-data strong {
  color: var(--vv-color-text-primary);
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────────────────────
   Phase 1: Consensus Baseline Components (P1.1-P1.5)
   ──────────────────────────────────────────────────────────────────────────── */

/* Value Driver Cards Grid (P1.2) */
.vv-phase__value-drivers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vv-space-4);
  margin-bottom: var(--vv-space-5);
}

@media (min-width: 1100px) {
  .vv-phase__value-drivers {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Individual value driver card */
.vv-value-driver-card {
  padding: var(--vv-space-4);
  background: var(--vv-color-surface-primary);
  border-radius: var(--vv-radius-md);
  text-align: center;
  /* Read-only: no hover state that suggests editability (P1.4) */
  cursor: default;
}

.vv-value-driver-card__label {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 4rem; /* Fixed height for 2-line labels - ensures all numbers align horizontally */
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-2);
  line-height: var(--vv-line-height-sm);
  text-align: center;
}

.vv-value-driver-card__value {
  display: block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-line-height-lg);
}

/* Source Attribution (P1.3) */
.vv-phase__source {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-bottom: var(--vv-space-5);
}

.vv-phase__source-line {
  margin-bottom: var(--vv-space-1);
}

.vv-phase__source-note {
  font-style: italic;
  opacity: 0.85;
}

/* Phase Introduction (Section-level Socratic context) */
.vv-phase__intro {
  margin-bottom: var(--vv-space-5);
  padding: var(--vv-space-4);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
  text-align: center;
}

.vv-phase__intro-text {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-relaxed);
  margin: 0;
}

.vv-phase__intro-text strong {
  color: var(--vv-color-text-primary);
  font-weight: var(--vv-font-weight-semibold);
}

/* Phase Bridge (between sub-panels — Socratic connective tissue) */
.vv-phase__bridge {
  color: var(--vv-color-text-tertiary);
  font-size: var(--vv-font-size-sm);
  font-style: italic;
  line-height: var(--vv-line-height-relaxed);
  text-align: center;
  margin: var(--vv-space-5) 0;
  padding: 0;
}

/* Consensus Summary (P1.5) */
.vv-consensus-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vv-space-4);
  padding: var(--vv-space-4);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
}

.vv-consensus-summary__item {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-consensus-summary__label {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-consensus-summary__value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

.vv-consensus-summary__vs {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
}

.vv-consensus-summary__gap {
  padding: var(--vv-space-2) var(--vv-space-3);
  border-radius: var(--vv-radius-md);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-consensus-summary__gap--premium {
  background: var(--vv-color-signal-overvalued-bg);
  color: var(--vv-color-signal-overvalued);
}

.vv-consensus-summary__gap--discount {
  background: var(--vv-color-signal-undervalued-bg);
  color: var(--vv-color-signal-undervalued);
}

/* ────────────────────────────────────────────────────────────────────────────
   Phase 2: MIFP Result Component (P2.4)
   ──────────────────────────────────────────────────────────────────────────── */

.vv-mifp-result {
  text-align: center;
  padding: var(--vv-space-5);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
}

.vv-mifp-result__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--vv-space-2);
  margin-bottom: var(--vv-space-2);
}

.vv-mifp-result__value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-2xl);
  font-weight: var(--vv-font-weight-bold);
  color: var(--vv-color-insight);
  line-height: 1;
}

.vv-mifp-result__unit {
  font-size: var(--vv-font-size-lg);
  color: var(--vv-color-text-secondary);
}

.vv-mifp-result__label {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  margin: 0 0 var(--vv-space-3) 0;
}

.vv-mifp-result__interpretation {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  font-style: italic;
  margin: 0;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

/* Dark mode for phases */
[data-theme="dark"] .vv-phase {
  background: var(--vv-color-gray-10);
}


[data-theme="dark"] .vv-value-driver-card {
  background: var(--vv-color-gray-5);
}

[data-theme="dark"] .vv-consensus-summary {
  background: var(--vv-color-gray-20);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-phase {
    background: var(--vv-color-gray-10);
  }


  html:not([data-theme="light"]) .vv-value-driver-card {
    background: var(--vv-color-gray-5);
  }

  html:not([data-theme="light"]) .vv-consensus-summary {
    background: var(--vv-color-gray-20);
  }
}

/* ============================================================================
   30. MIFP EXPLORER COMPONENT (P2.5)
   Interactive MIFP exploration section in Phase 2
   ============================================================================ */

.vv-mifp-explorer {
  margin-top: var(--vv-space-5);
  padding: var(--vv-space-5);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-md);
}

.vv-mifp-explorer__title {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0 0 var(--vv-space-2) 0;
}

.vv-mifp-explorer__subtitle {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin: 0 0 var(--vv-space-4) 0;
  line-height: var(--vv-line-height-body);
}

.vv-mifp-explorer__insight {
  margin-top: var(--vv-space-4);
  padding: var(--vv-space-4);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
}

.vv-mifp-explorer__insight-text {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
  margin: 0;
  line-height: var(--vv-line-height-body);
}

.vv-mifp-explorer__insight-text strong {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-interactive);
}

.vv-mifp-explorer__gap {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-mifp-explorer__gap--below {
  color: var(--vv-color-numeric-negative);
}

.vv-mifp-explorer__gap--above {
  color: var(--vv-color-numeric-positive);
}

/* ============================================================================
   30. MIFP EXPLORER - Dark Mode
   ============================================================================ */

[data-theme="dark"] .vv-mifp-explorer {
  background: var(--vv-color-gray-10);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-mifp-explorer {
    background: var(--vv-color-gray-10);
  }
}

/* ============================================================================
   31a. DCF DETAILS TABLE (P2.7)
   Expandable year-by-year DCF breakdown for power users in Phase 2

   Shows the Mauboussin Table 5.1 equivalent: Year, Sales, NOPAT, Investment,
   FCF, PV of FCF, Cumulative PV, and Shareholder Value per Share.
   Uses native <details>/<summary> for accessibility.
   ============================================================================ */

.vv-dcf-details {
  margin-top: var(--vv-space-5);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-lg);
  overflow: hidden;
}

.vv-dcf-details__summary {
  display: flex;
  align-items: center;
  gap: var(--vv-space-3);
  padding: var(--vv-space-4);
  cursor: pointer;
  background: var(--vv-color-surface-primary);
  list-style: none;
  user-select: none;
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
}

.vv-dcf-details__summary::-webkit-details-marker {
  display: none;
}

.vv-dcf-details__summary:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-dcf-details__summary-icon {
  width: 1.333rem;
  height: 1.333rem;
  flex-shrink: 0;
  color: var(--vv-color-text-tertiary);
  transition: transform var(--vv-transition-fast);
}

.vv-dcf-details[open] .vv-dcf-details__summary-icon {
  transform: rotate(90deg);
}

.vv-dcf-details__summary-text {
  flex: 1;
}

.vv-dcf-details__content {
  padding: var(--vv-space-4);
  border-top: 1px solid var(--vv-color-border-light);
  background: var(--vv-color-surface-secondary);
}

.vv-dcf-details__intro {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-4);
}

/* DCF Table within details panel */
.vv-dcf-details__table-wrapper {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--vv-space-4));
  padding: 0 var(--vv-space-4);
}

.vv-dcf-details__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vv-font-size-xs);
  white-space: nowrap;
}

.vv-dcf-details__table th,
.vv-dcf-details__table td {
  padding: var(--vv-space-1) var(--vv-space-2);
  border-bottom: 1px solid var(--vv-color-border-light);
  text-align: right;
}

.vv-dcf-details__table th {
  background-color: var(--vv-color-surface-tertiary);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}

.vv-dcf-details__table th:first-child,
.vv-dcf-details__table td:first-child {
  text-align: left;
  font-weight: var(--vv-font-weight-medium);
  /* Sticky Year column for horizontal scroll context */
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--vv-color-surface-primary);
}

.vv-dcf-details__table th:first-child {
  background-color: var(--vv-color-surface-tertiary);
  z-index: 2; /* Above sticky body cells */
}

.vv-dcf-details__table td {
  font-family: var(--vv-font-family-mono);
  color: var(--vv-color-text-primary);
}

.vv-dcf-details__table tbody tr:hover {
  background-color: var(--vv-color-surface-tertiary);
}

/* Ensure hover background applies to sticky first column */
.vv-dcf-details__table tbody tr:hover td:first-child {
  background-color: var(--vv-color-surface-tertiary);
}

/* Highlight MIFP year row */
.vv-dcf-details__table tr.vv-dcf-details__table-row--mifp {
  background-color: var(--vv-color-insight-10);
}

.vv-dcf-details__table tr.vv-dcf-details__table-row--mifp td {
  font-weight: var(--vv-font-weight-semibold);
}

/* Ensure sticky Year column has correct background on MIFP row */
.vv-dcf-details__table tr.vv-dcf-details__table-row--mifp td:first-child {
  background-color: var(--vv-color-insight-10);
}

.vv-dcf-details__table tr.vv-dcf-details__table-row--mifp:hover {
  background-color: var(--vv-color-insight-20);
}

/* Negative values */
.vv-dcf-details__table td.vv-dcf-details__table-cell--negative {
  color: var(--vv-color-numeric-negative);
}

/* Mauboussin value buildup columns (PV of CV, Corporate Value) */
.vv-dcf-details__table-cell--mauboussin {
  background-color: rgba(var(--vv-color-insight-rgb, 219, 179, 79), 0.05);
}

/* Summary note below table */
.vv-dcf-details__note {
  margin-top: var(--vv-space-4);
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--vv-space-2);
}

.vv-dcf-details__note-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--vv-color-text-tertiary);
  margin-top: 0.125rem; /* Align icon with first line of text */
}

.vv-dcf-details__note-content {
  flex: 1;
}

.vv-dcf-details__note-content p {
  margin: 0 0 var(--vv-space-1) 0;
}

.vv-dcf-details__note-content p:last-child {
  margin-bottom: 0;
}

.vv-dcf-details__note-content strong {
  color: var(--vv-color-text-primary);
}

/* ── Dark Mode for DCF Details ────────────────────────────────────────────── */
/* Dark backgrounds with light text for proper dark mode contrast */

[data-theme="dark"] .vv-dcf-details {
  border-color: var(--vv-color-gray-30);
}

[data-theme="dark"] .vv-dcf-details__summary {
  background: var(--vv-color-gray-10);
  color: var(--vv-color-gray-90);
}

[data-theme="dark"] .vv-dcf-details__summary:hover {
  background: var(--vv-color-gray-20);
}

[data-theme="dark"] .vv-dcf-details__content {
  background: var(--vv-color-gray-5);
  border-color: var(--vv-color-gray-30);
}

[data-theme="dark"] .vv-dcf-details__table th {
  background: var(--vv-color-gray-20);
  color: var(--vv-color-gray-90);
}

[data-theme="dark"] .vv-dcf-details__table td {
  color: var(--vv-color-gray-90);
  border-color: var(--vv-color-gray-30);
}

/* Sticky Year column background in dark mode */
[data-theme="dark"] .vv-dcf-details__table td:first-child {
  background-color: var(--vv-color-gray-5);
}

[data-theme="dark"] .vv-dcf-details__table tbody tr:hover {
  background: var(--vv-color-gray-20);
}

/* Ensure hover background applies to sticky first column in dark mode */
[data-theme="dark"] .vv-dcf-details__table tbody tr:hover td:first-child {
  background-color: var(--vv-color-gray-20);
}

[data-theme="dark"] .vv-dcf-details__table tr.vv-dcf-details__table-row--mifp {
  background: var(--vv-color-insight-10);
}

[data-theme="dark"] .vv-dcf-details__table tr.vv-dcf-details__table-row--mifp td:first-child {
  background-color: var(--vv-color-insight-10);
}

[data-theme="dark"] .vv-dcf-details__table-cell--mauboussin {
  background-color: rgba(250, 217, 128, 0.08);
}

[data-theme="dark"] .vv-dcf-details__note {
  background: var(--vv-color-gray-10);
}

/* System preference fallback */
/* Dark backgrounds with light text for proper dark mode contrast */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-dcf-details {
    border-color: var(--vv-color-gray-30);
  }

  html:not([data-theme="light"]) .vv-dcf-details__summary {
    background: var(--vv-color-gray-10);
    color: var(--vv-color-gray-90);
  }

  html:not([data-theme="light"]) .vv-dcf-details__summary:hover {
    background: var(--vv-color-gray-20);
  }

  html:not([data-theme="light"]) .vv-dcf-details__content {
    background: var(--vv-color-gray-5);
    border-color: var(--vv-color-gray-30);
  }

  html:not([data-theme="light"]) .vv-dcf-details__table th {
    background: var(--vv-color-gray-20);
    color: var(--vv-color-gray-90);
  }

  html:not([data-theme="light"]) .vv-dcf-details__table td {
    color: var(--vv-color-gray-90);
    border-color: var(--vv-color-gray-30);
  }

  /* Sticky Year column background in dark mode (system preference) */
  html:not([data-theme="light"]) .vv-dcf-details__table td:first-child {
    background-color: var(--vv-color-gray-5);
  }

  html:not([data-theme="light"]) .vv-dcf-details__table tbody tr:hover {
    background: var(--vv-color-gray-20);
  }

  /* Ensure hover background applies to sticky first column */
  html:not([data-theme="light"]) .vv-dcf-details__table tbody tr:hover td:first-child {
    background-color: var(--vv-color-gray-20);
  }

  html:not([data-theme="light"]) .vv-dcf-details__table tr.vv-dcf-details__table-row--mifp {
    background: var(--vv-color-insight-10);
  }

  html:not([data-theme="light"]) .vv-dcf-details__table tr.vv-dcf-details__table-row--mifp td:first-child {
    background-color: var(--vv-color-insight-10);
  }

  html:not([data-theme="light"]) .vv-dcf-details__note {
    background: var(--vv-color-gray-10);
  }
}


/* ==========================================================================
   Section 33b: Moat Checklist Table (M2 - Understanding the Moat)

   Compact 8-row summary table showing Mauboussin category assessments.
   Tufte-compliant: high data-ink ratio, no decorative elements.
   Each row: Category | Strength indicator | Key finding (~10 words)

   Context pane shows full Q&A on row hover.
   Factbook link at table footer.

   Strength indicators:
   ● Strong  - green/mint sentiment
   ◐ Moderate - gold/neutral
   ○ Weak - orange/caution
   — N/A - gray/muted
   ========================================================================== */

.vv-moat-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Table header - minimal, Tufte-compliant */
.vv-moat-table thead th {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  text-align: left;
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-moat-table thead th:nth-child(2) {
  width: 100px;
}

/* Table rows - hover updates context pane (read-only, no action cursor) */
.vv-moat-table tbody tr {
  cursor: default;
  transition: background-color var(--vv-transition-fast);
}

.vv-moat-table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-moat-table tbody tr:focus-within {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
}

/* Table cells */
.vv-moat-table tbody td {
  padding: var(--vv-space-3);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  vertical-align: middle;
}

/* Category name column */
.vv-moat-table__category {
  font-weight: var(--vv-font-weight-medium);
  white-space: nowrap;
}

/* Strength indicator column - left-aligned for clean vertical scan (Tufte) */
.vv-moat-table__strength {
  text-align: left;
}

/* Key finding column - lighter weight, truncate if needed */
.vv-moat-table__finding {
  color: var(--vv-color-text-secondary);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-snug);
}

/* ── Strength Indicator Badges ────────────────────────────────────────────── */

.vv-moat-table__indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  padding: 0.125rem 0.5rem;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  letter-spacing: 0.02em;
  border-radius: var(--vv-radius-sm);
  white-space: nowrap;
}

/* Strong: filled circle, green/mint tones */
.vv-moat-table__indicator--strong {
  background: rgba(125, 177, 120, 0.15);
  color: var(--vv-color-mint-50);
}

.vv-moat-table__indicator--strong::before {
  content: "●";
  font-size: 0.625rem;
}

/* Moderate: half-filled circle, gold tones */
.vv-moat-table__indicator--moderate {
  background: rgba(212, 175, 55, 0.15);
  color: var(--vv-color-gold-50);
}

.vv-moat-table__indicator--moderate::before {
  content: "◐";
  font-size: 0.625rem;
}

/* Weak: empty circle, orange tones */
.vv-moat-table__indicator--weak {
  background: rgba(194, 120, 48, 0.15);
  color: var(--vv-color-orange-50);
}

.vv-moat-table__indicator--weak::before {
  content: "○";
  font-size: 0.625rem;
}

/* N/A: em dash, gray tones */
.vv-moat-table__indicator--na {
  background: rgba(118, 112, 110, 0.1);
  color: var(--vv-color-text-tertiary);
}

.vv-moat-table__indicator--na::before {
  content: "—";
  font-size: 0.625rem;
}

/* ── Interactive Strength Badges ────────────────────────────────────────── */
/* Badges become clickable buttons; cycle through Strong → Moderate → Weak → N/A */

.vv-moat-table__indicator--interactive {
  cursor: pointer;
  border: 1.5px solid transparent;
  border-bottom: 1.5px dashed currentColor;
  background-clip: padding-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
  line-height: inherit;
}

.vv-moat-table__indicator--interactive:hover {
  box-shadow: 0 0 0 2px var(--vv-color-interactive-bg);
}

.vv-moat-table__indicator--interactive:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 1px;
}

/* Ghost Slider duality: blue border when user has overridden the factbook rating */
.vv-moat-table__indicator--overridden {
  border-color: var(--vv-color-interactive);
}

/* Factbook reference text shown below the badge when overridden */
.vv-moat-table__factbook-ref {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── Table Footer with Factbook Link ──────────────────────────────────────── */

.vv-moat-table tfoot td {
  padding: var(--vv-space-4) var(--vv-space-3);
  border-top: 1px solid var(--vv-color-border-light);
}

.vv-moat-table__factbook-link {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-interactive);
  text-decoration: none;
  transition: color var(--vv-transition-fast);
}

.vv-moat-table__factbook-link:hover {
  color: var(--vv-color-interactive-hover);
  text-decoration: underline;
}

.vv-moat-table__factbook-link-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ── Dark Theme Support ───────────────────────────────────────────────────── */

[data-theme="dark"] .vv-moat-table thead th {
  border-bottom-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-moat-table tbody tr:hover {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-moat-table tfoot td {
  border-top-color: var(--vv-color-border-light);
}

/* Dark theme strength indicators */
[data-theme="dark"] .vv-moat-table__indicator--strong {
  background: rgba(125, 177, 120, 0.25);
  color: var(--vv-color-mint-30);
}

[data-theme="dark"] .vv-moat-table__indicator--moderate {
  background: rgba(212, 175, 55, 0.25);
  color: var(--vv-color-gold-30);
}

[data-theme="dark"] .vv-moat-table__indicator--weak {
  background: rgba(194, 120, 48, 0.25);
  color: var(--vv-color-orange-30);
}

[data-theme="dark"] .vv-moat-table__indicator--na {
  background: rgba(118, 112, 110, 0.2);
  color: var(--vv-color-text-tertiary);
}

[data-theme="dark"] .vv-moat-table__factbook-link {
  color: var(--vv-color-blue-40);
}

[data-theme="dark"] .vv-moat-table__factbook-link:hover {
  color: var(--vv-color-blue-30);
}

/* ── System Dark Mode Preference Fallback ─────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-moat-table thead th {
    border-bottom-color: var(--vv-color-border-light);
  }

  html:not([data-theme="light"]) .vv-moat-table tbody tr:hover {
    background-color: var(--vv-color-surface-tertiary);
  }

  html:not([data-theme="light"]) .vv-moat-table tfoot td {
    border-top-color: var(--vv-color-border-light);
  }

  html:not([data-theme="light"]) .vv-moat-table__indicator--strong {
    background: rgba(125, 177, 120, 0.25);
    color: var(--vv-color-mint-30);
  }

  html:not([data-theme="light"]) .vv-moat-table__indicator--moderate {
    background: rgba(212, 175, 55, 0.25);
    color: var(--vv-color-gold-30);
  }

  html:not([data-theme="light"]) .vv-moat-table__indicator--weak {
    background: rgba(194, 120, 48, 0.25);
    color: var(--vv-color-orange-30);
  }

  html:not([data-theme="light"]) .vv-moat-table__indicator--na {
    background: rgba(118, 112, 110, 0.2);
    color: var(--vv-color-text-tertiary);
  }

  html:not([data-theme="light"]) .vv-moat-table__factbook-link {
    color: var(--vv-color-blue-40);
  }

  html:not([data-theme="light"]) .vv-moat-table__factbook-link:hover {
    color: var(--vv-color-blue-30);
  }
}


/* ── Moat Table: Driver Tags ─────────────────────────────────────────────── */
/* Subtle tags linking moat categories to Section 2 value drivers */

.vv-moat-table__driver-tag {
  display: inline-block;
  margin-left: var(--vv-space-2);
  padding: 0 0.375rem;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-regular);
  letter-spacing: 0.02em;
  color: var(--vv-color-text-tertiary);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
  vertical-align: middle;
  text-transform: capitalize;
}

[data-theme="dark"] .vv-moat-table__driver-tag {
  color: var(--vv-color-text-secondary);
  border-color: var(--vv-color-gray-50);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-moat-table__driver-tag {
    color: var(--vv-color-text-secondary);
    border-color: var(--vv-color-gray-50);
  }
}

/* ── Moat Table: Research Depth Indicator ───────────────────────────────── */
/* Blue dot in Key Finding column when user has research for a category.    */
/* Tufte: information at the point of decision. Gestalt Similarity: blue =  */
/* user content, consistent with Ghost Slider and research layer borders.   */

.vv-moat-table__research-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--vv-space-2);
  background: var(--vv-color-interactive);
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Moat Segment Contribution Bar (Labeled) ────────────────────
   Revenue-weighted stacked bar with direct segment labels inside.
   Two-tone: strong (mint) vs unproven (orange).
   Track: 48px (2 rhythm). Overflow row for narrow (<8%) segments.
   Legend row: "● Strong XX%  ○ Unproven XX%".
   Tufte: direct labeling, no separate legend needed.
   ────────────────────────────────────────────────────────────── */

.vv-moat-segment-bar {
  margin-top: var(--vv-space-3);
  margin-bottom: var(--vv-space-3);
}

/* ── Track: the colored stacked bar ─────────────────────────── */
.vv-moat-segment-bar__track {
  display: flex;
  height: var(--vv-space-8);
  border-radius: var(--vv-radius-sm);
  overflow: hidden;
}

.vv-moat-segment-bar__segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vv-space-2);
  min-width: 2px;
  border: none;
  padding: 0 var(--vv-space-1);
  font: inherit;
  cursor: pointer;
  transition: opacity var(--vv-transition-fast);
  overflow: hidden;
}

.vv-moat-segment-bar__segment:hover,
.vv-moat-segment-bar__segment:focus-visible {
  opacity: 0.75;
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
}

.vv-moat-segment-bar__segment--strong {
  background-color: var(--vv-color-mint-30);
}

.vv-moat-segment-bar__segment--unproven {
  background-color: var(--vv-color-orange-30);
}

/* ── Inline labels inside bar segments ──────────────────────── */
.vv-moat-segment-bar__name {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-on-viz-fill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.vv-moat-segment-bar__pct {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-on-viz-fill);
  white-space: nowrap;
  line-height: 1;
}

/* ── Overflow row: narrow segments listed as text ───────────── */
.vv-moat-segment-bar__overflow {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-3);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-rhythm);
  margin-top: var(--vv-space-1);
}

.vv-moat-segment-bar__overflow-btn {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: var(--vv-rhythm);
}

.vv-moat-segment-bar__overflow-btn:hover,
.vv-moat-segment-bar__overflow-btn:focus-visible {
  color: var(--vv-color-interactive);
  text-decoration: underline;
}

.vv-moat-segment-bar__overflow-btn--strong::before {
  content: "\25CF ";
  color: var(--vv-color-mint-50);
  font-size: 8px;
}

.vv-moat-segment-bar__overflow-btn--unproven::before {
  content: "\25CB ";
  color: var(--vv-color-orange-50);
  font-size: 8px;
}

/* ── Legend row: inline color key ───────────────────────────── */
.vv-moat-segment-bar__legend {
  display: flex;
  gap: var(--vv-space-4);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-rhythm);
  margin-top: var(--vv-space-1);
}

.vv-moat-segment-bar__legend-strong {
  color: var(--vv-color-mint-50);
}

.vv-moat-segment-bar__legend-unproven {
  color: var(--vv-color-orange-50);
}

.vv-moat-segment-bar__legend-pct {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
}

/* ── Dark theme ─────────────────────────────────────────────── */
/* Bar backgrounds: mint-30 and orange-30 don't remap across themes,
   so the fill colors stay vibrant on dark backgrounds without overrides.
   Text uses --vv-color-text-on-viz-fill (stays dark in both themes). */

[data-theme="dark"] .vv-moat-segment-bar__legend-strong {
  color: var(--vv-color-mint-30);
}

[data-theme="dark"] .vv-moat-segment-bar__legend-unproven {
  color: var(--vv-color-orange-30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vv-moat-segment-bar__legend-strong {
    color: var(--vv-color-mint-30);
  }
  :root:not([data-theme="light"]) .vv-moat-segment-bar__legend-unproven {
    color: var(--vv-color-orange-30);
  }
}

/* ============================================================
   Competitive Position Diagnosis Table (.vv-diagnosis)
   J11.2: 5-column segment table — Segment, Rev%, Position, Share, Trend
   Tufte: no row gridlines, high data-ink ratio, direct labels
   ============================================================ */

.vv-diagnosis {
  margin-top: var(--vv-space-5);
  margin-bottom: var(--vv-space-5);
}

.vv-diagnosis__headline {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-normal);
  line-height: var(--vv-line-height-base);
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-3);
}

.vv-diagnosis__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.vv-diagnosis__table thead th {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  border-bottom: 1px solid var(--vv-color-border-light);
}

/* Right-align numeric columns */
.vv-diagnosis__table thead th[data-type="number"] {
  text-align: right;
}

.vv-diagnosis__table tbody tr {
  cursor: default;
  transition: background-color var(--vv-transition-fast);
}

.vv-diagnosis__table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

/* J11.5: Keyboard focus ring for segment rows (context pane integration) */
.vv-diagnosis__table tbody tr:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
  border-radius: var(--vv-radius-sm, 4px);
}

.vv-diagnosis__table tbody td {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  vertical-align: middle;
  /* Tufte: no visible borders between rows */
}

/* Segment name column */
.vv-diagnosis__segment {
  font-weight: var(--vv-font-weight-medium);
  white-space: nowrap;
}

/* Revenue % column — monospace, right-aligned, with proportional bar */
.vv-diagnosis__revenue {
  position: relative;
  font-family: var(--vv-font-family-mono);
  text-align: right;
  white-space: nowrap;
}

/* Revenue bar — proportional background bar behind the number.
   Pattern: same as .vv-correlation-table__bar (position:absolute, width from inline style).
   Gray-50 at low opacity = factual data visualization (per viz grammar). */
.vv-diagnosis__revenue-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  background-color: var(--vv-color-gray-50);
  border-radius: var(--vv-radius-sm);
  opacity: 0.15;
  transition: width var(--vv-transition-fast);
}

.vv-diagnosis__revenue-value {
  position: relative;
  z-index: 1;
}

/* Position column — semantic color badges */
.vv-diagnosis__position {
  white-space: nowrap;
}

.vv-diagnosis__position-label {
  display: inline-block;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
}

/* Position labels are factual classifications, not sentiment.
   Per design system: each color has ONE semantic purpose.
   Monopoly/Dominant/Challenger inherit --vv-color-text-primary.
   Only null (no data) uses diminished text. */

.vv-diagnosis__position-label--null {
  color: var(--vv-color-text-tertiary);
}

/* Market share column — monospace, right-aligned */
.vv-diagnosis__share {
  font-family: var(--vv-font-family-mono);
  text-align: right;
  white-space: nowrap;
  color: var(--vv-color-text-secondary);
}

/* Trend column — directional arrow + label */
.vv-diagnosis__trend {
  white-space: nowrap;
}

.vv-diagnosis__trend-arrow {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  margin-right: var(--vv-space-1);
}

/* Trend arrows are factual market direction classifications.
   Per design system: mint=bullish sentiment, magenta=risk flags,
   gold=key insight, cyan=undervalued signal — none of which apply here.
   Arrows inherit --vv-color-text-primary; the label text communicates direction.
   Only --vv-color-text-secondary used for diminished trend labels below. */

.vv-diagnosis__trend-label {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary);
}

/* Inline legend — explains position taxonomy below table.
   Tufte: integrated key, not a separate legend box.
   Small gray text, unobtrusive, on the 12px half-rhythm. */
.vv-diagnosis__legend {
  margin-top: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  line-height: var(--vv-rhythm);
  color: var(--vv-color-text-tertiary);
}

.vv-diagnosis__legend-separator {
  margin: 0 var(--vv-space-2);
  color: var(--vv-color-border-light);
}

/* Dark theme */
[data-theme="dark"] .vv-diagnosis__table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

/* System dark mode fallback */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-diagnosis__table tbody tr:hover {
    background-color: var(--vv-color-surface-secondary);
  }
}

/* ── Idea Screen Evidence List ──────────────────────────────────────────
   J11.3: Inline evidence list below segment table replacing opaque pill tags.
   Pattern: compact text list — label (medium) + evidence (secondary) per line.
   Tufte: maximum data-ink ratio — no borders, no backgrounds, pure text.
   Context pane integration: hover/focus dispatches vv:context-request.
   ───────────────────────────────────────────────────────────────────────── */

.vv-diagnosis__screens {
  margin-top: var(--vv-space-5);
}

.vv-diagnosis__screens-heading {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vv-space-2);
}

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

.vv-diagnosis__screen-item {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-rhythm);
  color: var(--vv-color-text-secondary);
  cursor: help;
  padding: var(--vv-space-1) 0;
}

.vv-diagnosis__screen-item:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
  border-radius: var(--vv-radius-sm, 4px);
}

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


/* ── Phase Synthesis ────────────────────────────────────────────────────── */
/* Key takeaway below moat table bridging competitive position to value drivers */

.vv-phase__synthesis {
  margin-top: var(--vv-space-5);
  padding: var(--vv-space-4);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
  cursor: default;
}

.vv-phase__synthesis p {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-line-height-relaxed);
  margin: 0;
}

/* User-modified state: blue border replaces gold (Ghost Slider color language) */
.vv-phase__synthesis--user {
  border-left: 3px solid var(--vv-color-interactive);
  border-radius: 0 var(--vv-radius-md) var(--vv-radius-md) 0;
  background: var(--vv-color-interactive-bg);
}

/* Header row: "Your assessment" label + "Reset to factbook" link */
.vv-phase__synthesis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--vv-space-2);
}

.vv-phase__synthesis-label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-interactive);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vv-phase__synthesis-reset {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vv-phase__synthesis-reset:hover {
  color: var(--vv-color-interactive);
}


/* ============================================================================
   Section 38: Phase Navigation (X1.2)
   ============================================================================
   Sticky navigation bar for jumping between the three Mauboussin phases.
   Uses Intersection Observer for scroll-based highlighting.
   ============================================================================ */

.vv-phase-nav {
  position: sticky;
  top: 0;
  z-index: var(--vv-z-sticky, 100);
  display: flex;
  justify-content: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-3) var(--vv-space-4);
  background: var(--vv-color-surface-primary);
  border-bottom: 1px solid var(--vv-color-border-light);
  margin-bottom: var(--vv-space-5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Individual phase link */
.vv-phase-nav__link {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-4);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: 500;
  color: var(--vv-color-text-secondary);
  text-decoration: none;
  border-radius: var(--vv-radius-full);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all var(--vv-transition-fast);
}

.vv-phase-nav__link:hover {
  color: var(--vv-color-text-primary);
  background: var(--vv-color-surface-secondary);
}

.vv-phase-nav__link:focus {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* Phase number indicator */
.vv-phase-nav__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: 600;
  border-radius: 50%;
  background: var(--vv-color-gray-30);
  color: var(--vv-color-gray-70);
  transition: all var(--vv-transition-fast);
}

/* Phase-specific colors for number indicator */
.vv-phase-nav__link[data-phase="1"] .vv-phase-nav__number {
  background: var(--vv-color-interactive-bg);
  color: var(--vv-color-interactive);
}

.vv-phase-nav__link[data-phase="2"] .vv-phase-nav__number {
  background: var(--vv-color-insight-bg);
  color: var(--vv-color-insight-dark);
}

.vv-phase-nav__link[data-phase="3"] .vv-phase-nav__number {
  background: var(--vv-color-magenta-10);
  color: var(--vv-color-magenta-60);
}

/* Active state - current phase */
.vv-phase-nav__link--active {
  color: var(--vv-color-text-primary);
  font-weight: 600;
  background: var(--vv-color-surface-secondary);
  border-color: var(--vv-color-border-light);
}

.vv-phase-nav__link--active[data-phase="1"] {
  border-color: var(--vv-color-interactive);
}

.vv-phase-nav__link--active[data-phase="1"] .vv-phase-nav__number {
  background: var(--vv-color-interactive);
  color: white;
}

.vv-phase-nav__link--active[data-phase="2"] {
  border-color: var(--vv-color-insight);
}

.vv-phase-nav__link--active[data-phase="2"] .vv-phase-nav__number {
  background: var(--vv-color-insight);
  color: var(--vv-color-gray-90);
}

.vv-phase-nav__link--active[data-phase="3"] {
  border-color: var(--vv-color-magenta-50);
}

.vv-phase-nav__link--active[data-phase="3"] .vv-phase-nav__number {
  background: var(--vv-color-magenta-50);
  color: white;
}

/* Phase title text */
.vv-phase-nav__title {
  display: none; /* Hidden on mobile */
}

@media (min-width: 768px) {
  .vv-phase-nav__title {
    display: inline;
  }
}

/* Responsive: compact on mobile */
@media (max-width: 480px) {
  .vv-phase-nav {
    padding: var(--vv-space-2) var(--vv-space-3);
    gap: var(--vv-space-1);
  }

  .vv-phase-nav__link {
    padding: var(--vv-space-2);
  }
}

/* Dark mode */
[data-theme="dark"] .vv-phase-nav {
  background: var(--vv-color-gray-05);
  border-bottom-color: var(--vv-color-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .vv-phase-nav__link:hover {
  background: var(--vv-color-gray-10);
}

[data-theme="dark"] .vv-phase-nav__link--active {
  background: var(--vv-color-gray-10);
  border-color: var(--vv-color-border);
}

[data-theme="dark"] .vv-phase-nav__number {
  background: var(--vv-color-gray-20);
  color: var(--vv-color-gray-60);
}

/* System preference dark mode fallback */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-phase-nav {
    background: var(--vv-color-gray-05);
    border-bottom-color: var(--vv-color-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  html:not([data-theme="light"]) .vv-phase-nav__link:hover {
    background: var(--vv-color-gray-10);
  }

  html:not([data-theme="light"]) .vv-phase-nav__link--active {
    background: var(--vv-color-gray-10);
    border-color: var(--vv-color-border);
  }

  html:not([data-theme="light"]) .vv-phase-nav__number {
    background: var(--vv-color-gray-20);
    color: var(--vv-color-gray-60);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER - Methodology Attribution
   ════════════════════════════════════════════════════════════════════════════ */
.vv-footer {
  padding: var(--vv-space-5) var(--vv-space-8);
  background: var(--vv-color-surface-tertiary);
  border-top: 1px solid var(--vv-color-border-light);
  text-align: center;
}

.vv-footer__attribution {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  margin: 0;
}

.vv-footer__attribution em {
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 1 PANELS — Sub-panels for Value Drivers, Implied Duration, Moat
   Plain panels (like S2), no card borders. Section-level .vv-phase provides
   the outer card. Sub-panels are separated by .vv-phase__bridge text.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-section1-panel {
  margin-bottom: var(--vv-space-5);
  scroll-margin-top: var(--vv-space-5);
}

.vv-section1-panel__heading {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0 0 var(--vv-space-3) 0;
  line-height: var(--vv-line-height-md);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 2 PANELS — Shared subsection container for S2A-S2E
   Diagnostic evidence panels that form the reading order:
   Historical Drivers → NTM Correlations → Analyst Attention → Sensitivity → Synthesis
   ════════════════════════════════════════════════════════════════════════════ */

.vv-section2-panel {
  margin-bottom: var(--vv-space-5);
}

.vv-section2-panel__heading {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0 0 var(--vv-space-3) 0;
  line-height: var(--vv-line-height-md);
}

/* ── J9.1-J9.3: Panel-level fallback for missing diagnostic data ─────────────
   Shown when a diagnostic panel's data is unavailable (e.g., no historical
   filings, no NTM correlation data, no transcript coverage). Neutral tone
   (not error red) — missing data is expected for some stocks. Reusable across
   S2A, S2B, S2C panels.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-section2-panel__fallback {
  padding: var(--vv-space-5);
  border-left: 4px solid var(--vv-color-gray-30);
  border-radius: var(--vv-radius-md);
  background-color: var(--vv-color-gray-5);
}

.vv-section2-panel__fallback .vv-section2-panel__heading {
  color: var(--vv-color-text-secondary);
}

.vv-section2-panel__fallback-message {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-style: italic;
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-base);
}

/* Dark mode: gray-5 and gray-30 auto-remap via USWDS grade inversion
   (gray-5 → #2d2d2d dark surface, gray-30 → #6d6d6d border).
   Use surface-tertiary for a slightly elevated panel that stands out
   from the page background without the grade-inversion pitfall. */
[data-theme="dark"] .vv-section2-panel__fallback {
  background-color: var(--vv-color-surface-tertiary);
  border-left-color: var(--vv-color-gray-50);
}

/* ── Historical Value Drivers Table (S2A / J2.1) ────────────────────────────
   Compact table showing 3 metrics × 5 FY values + average.
   Tufte: high data-ink ratio, no chartjunk, direct labeling.
   Mauboussin Table 6.2 equivalent: empirical grounding before analysis.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-history-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Column headers — minimal, uppercase, Tufte-compliant */
.vv-history-table thead th {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  text-align: left;
  border-bottom: 1px solid var(--vv-color-border-light);
}

/* Numeric column headers right-aligned (scoped to beat thead th specificity) */
.vv-history-table thead th[data-type="number"] {
  text-align: right;
}

/* Average column header — visually emphasized */
.vv-history-table thead .vv-history-table__avg-header {
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-secondary);
}

/* Volatility column header — explains what the tags mean */
.vv-history-table thead .vv-history-table__vol-header {
  text-align: center;
}

/* Volatility column cell — centers the tag badge */
.vv-history-table__vol {
  text-align: center;
}

/* Row hover — context pane preview (J8.1 will add @mouseenter) */
.vv-history-table tbody tr {
  cursor: default;
  transition: background-color var(--vv-transition-fast);
}

.vv-history-table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-history-table tbody tr:focus-within {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
}

/* Table cells — compact, rhythm-aligned */
.vv-history-table tbody td {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  border-bottom: 1px solid var(--vv-color-border-light);
  vertical-align: middle;
}

/* Metric label column — sans-serif, medium weight */
.vv-history-table__label {
  font-family: var(--vv-font-family-sans);
  font-weight: var(--vv-font-weight-medium);
  white-space: nowrap;
}

/* Trigger mapping reference — subtle cross-reference connecting the historical
   metric to the sensitivity slider it feeds (J2.3).
   Dashed underline = standard "cross-reference" affordance (like a hyperlink
   preview). Progressive disclosure: faded in base state, emphasized on row hover.
   Tufte: direct labeling of the diagnostic → confirmation connection.
   Mauboussin Ch. 6: "go to the numbers to confirm this conclusion." */
.vv-history-table__trigger-ref {
  display: inline-block;
  margin-left: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  text-transform: capitalize;
  white-space: nowrap;
  border-bottom: 1px dashed currentColor;
  transition: color var(--vv-transition-fast);
}

/* Progressive disclosure: trigger ref becomes more visible on row hover/focus,
   drawing the user's attention to the diagnostic → confirmation link. */
.vv-history-table tbody tr:hover .vv-history-table__trigger-ref,
.vv-history-table tbody tr:focus-within .vv-history-table__trigger-ref {
  color: var(--vv-color-text-secondary);
}

/* Year value cells — monospace for tabular alignment */
.vv-history-table__value {
  font-family: var(--vv-font-family-mono);
  text-align: right;
}

/* Average column — emphasized with background + bold */
.vv-history-table__avg {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
  text-align: right;
  background-color: var(--vv-color-surface-tertiary);
}

/* Volatility tag — compact badge inline with metric label (J2.2).
   Mauboussin pre-screening: identifies which drivers are historically unstable.
   HIGH = risk signal (magenta), MODERATE = insight (gold), LOW = stable (gray).
   Tufte: direct labeling — tag is on the data it describes, no legend needed. */
.vv-history-table__volatility {
  display: inline-block;
  margin-left: var(--vv-space-2);
  padding: 0 var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  letter-spacing: var(--vv-letter-spacing-caps);
  text-transform: uppercase;
  line-height: 1.5;
  border-radius: var(--vv-radius-sm);
  vertical-align: middle;
  white-space: nowrap;
}

/* HIGH volatility — magenta: risk/negative semantic.
   This driver (typically sales growth) is the most uncertain assumption. */
.vv-history-table__volatility--high {
  color: var(--vv-color-sentiment-negative);
  background-color: var(--vv-color-sentiment-negative-bg);
}

/* MODERATE volatility — gold: insight/attention semantic.
   This driver warrants monitoring but has some predictability. */
.vv-history-table__volatility--moderate {
  color: var(--vv-color-insight-text);
  background-color: var(--vv-color-insight-bg);
}

/* LOW volatility — gray: stable/neutral.
   This driver is historically predictable, not a key variable. */
.vv-history-table__volatility--low {
  color: var(--vv-color-text-tertiary);
  background-color: var(--vv-color-gray-10);
}

/* Insight text — italic synthesis below table (J2.4)
   Matches .vv-attention-bar__insight pattern for visual consistency across panels */
.vv-history-table__insight {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-style: italic;
  color: var(--vv-color-text-secondary);
  margin: var(--vv-space-3) 0 0 0;
  line-height: var(--vv-line-height-body);
}

/* ── Dark Theme Support ───────────────────────────────────────────────────── */

[data-theme="dark"] .vv-history-table thead th {
  border-bottom-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-history-table tbody tr:hover {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-history-table tbody td {
  border-bottom-color: var(--vv-color-border-light);
}

/* Avg column emphasis: alpha overlay for reliable contrast on dark surfaces */
[data-theme="dark"] .vv-history-table__avg {
  background-color: rgba(255, 255, 255, 0.07);
}

/* LOW volatility pill: gray-10 (#3d3d3d) blends into dark panel bg.
   gray-20 (#4d4d4d) provides visible separation — same fix as tone-tag. */
[data-theme="dark"] .vv-history-table__volatility--low {
  background-color: var(--vv-color-gray-20);
}

/* ── System Dark Mode Preference Fallback ─────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-history-table thead th {
    border-bottom-color: var(--vv-color-border-light);
  }

  html:not([data-theme="light"]) .vv-history-table tbody tr:hover {
    background-color: var(--vv-color-surface-tertiary);
  }

  html:not([data-theme="light"]) .vv-history-table tbody td {
    border-bottom-color: var(--vv-color-border-light);
  }

  html:not([data-theme="light"]) .vv-history-table__avg {
    background-color: rgba(255, 255, 255, 0.07);
  }

  html:not([data-theme="light"]) .vv-history-table__volatility--low {
    background-color: var(--vv-color-gray-20);
  }
}

/* ── NTM Correlation Table (S2B / J3.1) ──────────────────────────────────────
   Compact table showing NTM estimate correlations with stock price.
   Three rows (EBIT, EPS, Sales), sorted by R² rank.
   Inline horizontal bars for instant visual comparison of R² strengths.
   Tufte: high data-ink ratio, direct labeling, no legend needed.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-correlation-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Period badge — inline with heading */
.vv-correlation-table__period {
  display: inline-block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  background-color: var(--vv-color-surface-tertiary);
  padding: 0.125rem var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
  vertical-align: middle;
  margin-left: var(--vv-space-2);
}

/* Column headers — minimal, uppercase, Tufte-compliant */
.vv-correlation-table thead th {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  text-align: left;
  border-bottom: 1px solid var(--vv-color-border-light);
}

/* Numeric column headers right-aligned */
.vv-correlation-table thead th[data-type="number"] {
  text-align: right;
}

/* Row styles — hover for context pane (J8.2 will add @mouseenter) */
.vv-correlation-table tbody tr {
  cursor: default;
  transition: background-color var(--vv-transition-fast);
}

.vv-correlation-table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-correlation-table tbody tr:focus-within {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
}

/* Highlighted row — top-ranked metric gets gold emphasis (J3.3) */
.vv-correlation-table__row--highlighted {
  background-color: var(--vv-color-gold-5);
}

.vv-correlation-table__row--highlighted:hover {
  background-color: var(--vv-color-gold-5);
}

/* Table cells — compact, rhythm-aligned */
.vv-correlation-table tbody td {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  border-bottom: 1px solid var(--vv-color-border-light);
  vertical-align: middle;
}

/* Metric name column — sans-serif, medium weight */
.vv-correlation-table__name {
  font-family: var(--vv-font-family-sans);
  font-weight: var(--vv-font-weight-medium);
  white-space: nowrap;
}

/* R² cell — contains bar background + numeric value overlaid.
   Tufte: one column, two encodings (bar for scan, number for precision). */
.vv-correlation-table__r2 {
  position: relative;
  font-family: var(--vv-font-family-mono);
  text-align: right;
  width: 35%;
}

/* The bar — positioned behind the number, grows left-to-right.
   Gray-50 = historical/fact data (per visualization grammar).
   NOT blue — blue is reserved for interactive elements. */
.vv-correlation-table__bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  background-color: var(--vv-color-gray-50);
  border-radius: var(--vv-radius-sm);
  transition: width var(--vv-transition-fast);
  opacity: 0.15;
}

/* The number sits above the bar */
.vv-correlation-table__r2-value {
  position: relative;
  z-index: 1;
}

/* Highlighted row bar — gold = key insight (top correlation) */
.vv-correlation-table__row--highlighted .vv-correlation-table__bar {
  background-color: var(--vv-color-insight);
  opacity: 0.35;
}

/* Rank column — monospace, right-aligned, tertiary color */
.vv-correlation-table__rank {
  font-family: var(--vv-font-family-mono);
  text-align: right;
  color: var(--vv-color-text-tertiary);
}

/* Trigger mapping reference — subtle cross-reference connecting the NTM
   metric to the sensitivity slider it feeds (J3.3).
   Mirrors .vv-history-table__trigger-ref pattern from J2.3.
   Dashed underline = standard "cross-reference" affordance.
   Progressive disclosure: tertiary in base state, secondary on row hover.
   Tufte: direct labeling of the diagnostic → confirmation connection. */
.vv-correlation-table__trigger-ref {
  display: inline-block;
  margin-left: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  text-transform: capitalize;
  white-space: nowrap;
  border-bottom: 1px dashed currentColor;
  transition: color var(--vv-transition-fast);
}

/* Progressive disclosure: trigger ref becomes more visible on row hover/focus,
   drawing the user's attention to the diagnostic → confirmation link. */
.vv-correlation-table tbody tr:hover .vv-correlation-table__trigger-ref,
.vv-correlation-table tbody tr:focus-within .vv-correlation-table__trigger-ref {
  color: var(--vv-color-text-secondary);
}

/* Insight text — italic synthesis below table (J3.4)
   Matches .vv-history-table__insight and .vv-attention-bar__insight for visual consistency across panels */
.vv-correlation-table__insight {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-style: italic;
  color: var(--vv-color-text-secondary);
  margin: var(--vv-space-3) 0 0 0;
  line-height: var(--vv-line-height-body);
}

/* ── Dark Theme Support ───────────────────────────────────────────────────── */

[data-theme="dark"] .vv-correlation-table thead th {
  border-bottom-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-correlation-table tbody tr:hover {
  background-color: var(--vv-color-surface-tertiary);
}

[data-theme="dark"] .vv-correlation-table tbody td {
  border-bottom-color: var(--vv-color-border-light);
}

[data-theme="dark"] .vv-correlation-table__period {
  background-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .vv-correlation-table__row--highlighted {
  background-color: var(--vv-color-gold-5);
}

[data-theme="dark"] .vv-correlation-table__row--highlighted:hover {
  background-color: var(--vv-color-gold-5);
}

/* ── System Dark Mode Preference Fallback ─────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-correlation-table thead th {
    border-bottom-color: var(--vv-color-border-light);
  }

  html:not([data-theme="light"]) .vv-correlation-table tbody tr:hover {
    background-color: var(--vv-color-surface-tertiary);
  }

  html:not([data-theme="light"]) .vv-correlation-table tbody td {
    border-bottom-color: var(--vv-color-border-light);
  }

  html:not([data-theme="light"]) .vv-correlation-table__period {
    background-color: rgba(255, 255, 255, 0.07);
  }

  html:not([data-theme="light"]) .vv-correlation-table__row--highlighted {
    background-color: var(--vv-color-gold-5);
  }

  html:not([data-theme="light"]) .vv-correlation-table__row--highlighted:hover {
    background-color: var(--vv-color-gold-5);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   S2C: ANALYST ATTENTION TABLE (J4.1-J4.3)

   Integrated table: category label + proportional bar (colored by tone) +
   analyst tone + management tone. One row per category.

   Tufte: sparkline-like 8px bars (was 3rem), direct labeling, no chartjunk.
   Gestalt: proximity (all info per category on one row), similarity
   (consistent tone coloring across analyst/mgmt), continuity (left-to-right
   reading flow: label → bar → analyst → mgmt).
   ════════════════════════════════════════════════════════════════════════════ */

/* Source badge — inline with heading, mirrors correlation period badge */
.vv-attention__source {
  display: inline-block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  background-color: var(--vv-color-surface-tertiary);
  padding: 0.125rem var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
  vertical-align: middle;
  margin-left: var(--vv-space-2);
}

/* Table reset — borderless, collapsed */
.vv-attention {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Column headers — tiny, uppercase, structural only */
.vv-attention thead th {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-align: left;
  padding: 0 0 var(--vv-space-1) 0;
  border-bottom: 1px solid var(--vv-color-border-light);
  letter-spacing: var(--vv-letter-spacing-caps);
  text-transform: uppercase;
}

/* Column widths — share column is widest for the sparkline bars */
.vv-attention__col-label { width: 30%; }
.vv-attention__col-share { width: 40%; }
.vv-attention__col-tone  { width: 15%; }

/* Data rows — interactive, rhythm-aligned */
.vv-attention__row {
  transition: background-color var(--vv-transition-fast);
  cursor: default;
}

.vv-attention__row:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-attention__row:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
}

/* All cells — consistent vertical padding for rhythm */
.vv-attention__row td {
  padding: var(--vv-space-3) 0;
  vertical-align: middle;
}

/* Category label — left column */
.vv-attention__label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
  padding-right: var(--vv-space-3);
}

/* Share cell — flex container for bar + percentage */
.vv-attention__share {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
}

/* Proportional bar — sparkline-like, neutral color.
   Width set inline by Alpine. Neutral fill avoids false dual-encoding
   (mint/magenta are for TEXT sentiment per design system, not quantities).
   Tone is conveyed by the colored text labels in Analysts/Management columns. */
.vv-attention__bar {
  display: inline-block;
  height: var(--vv-space-2);
  min-width: var(--vv-space-1);
  background-color: var(--vv-color-gray-30);
  border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
  transition: width var(--vv-transition-normal);
}

/* Percentage — monospace, tabular for alignment */
.vv-attention__pct {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tone label — colored text, no pill background.
   Color set inline by Alpine via semantic tokens. */
.vv-attention__tone-label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
}

/* Insight text — italic synthesis below table */
.vv-attention__insight {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-style: italic;
  color: var(--vv-color-text-secondary);
  margin: var(--vv-space-3) 0 0 0;
  line-height: var(--vv-line-height-body);
}

/* ── Dark Theme Support ───────────────────────────────────────────────────── */

[data-theme="dark"] .vv-attention__source {
  background-color: rgba(255, 255, 255, 0.07);
}

/* J10.2: Proportional bars need gray-50 in dark mode for visibility.
   gray-30 (#6d6d6d) blends too much into surface-secondary (#2d2d2d). */
[data-theme="dark"] .vv-attention__bar {
  background-color: var(--vv-color-gray-50);
}

/* ── System Dark Mode Preference Fallback ─────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-attention__source {
    background-color: rgba(255, 255, 255, 0.07);
  }

  html:not([data-theme="light"]) .vv-attention__bar {
    background-color: var(--vv-color-gray-50);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   S2E: TURBO TRIGGER HERO SYNTHESIS (J6.1)

   The reactive hero that shows the model-computed turbo trigger.
   Two states:
   - Agreement: factbook and model agree → single gold display
   - Divergence: factbook and model differ → factbook in gray, model in blue

   Bret Victor: "Could a reader potentially use your model to argue
   AGAINST your position?" — the hero makes divergence visible.

   Visual Grammar:
   - Gold (--vv-color-insight-text): agreement — both sources converge
   - Blue (--vv-color-interactive): model-computed result from user's ranges
   - Gray (--vv-color-gray-50): factbook/authority position (reference)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-trigger-hero {
  padding: var(--vv-space-5);
  border-radius: var(--vv-radius-md);
  background-color: var(--vv-color-surface-tertiary);
}

/* ── Agreement state: single gold display ─────────────────────────────────── */

.vv-trigger-hero__agreement {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
  text-align: center;
}

.vv-trigger-hero__label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
  margin: 0;
}

.vv-trigger-hero__name {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xl);
  font-weight: 600;
  line-height: 1.152;
  margin: 0;
}

.vv-trigger-hero__name--gold {
  color: var(--vv-color-insight-text);
}

.vv-trigger-hero__name--model {
  color: var(--vv-color-interactive);
}

.vv-trigger-hero__name--factbook {
  color: var(--vv-color-gray-50);
  text-decoration: line-through;
  font-size: var(--vv-font-size-md);
  font-weight: 500;
}

.vv-trigger-hero__spread {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-trigger-hero__spread--model {
  color: var(--vv-color-interactive);
}

.vv-trigger-hero__spread--factbook {
  color: var(--vv-color-gray-50);
}

.vv-trigger-hero__confidence {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
}

.vv-trigger-hero__confidence--high {
  color: var(--vv-color-sentiment-positive);
}

.vv-trigger-hero__confidence--moderate {
  color: var(--vv-color-text-secondary);
}

/* ── Initial state: subtle prompt to explore ─────────────────────────────── */

.vv-trigger-hero__initial-prompt {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  line-height: 1.5;
  color: var(--vv-color-text-tertiary);
  margin: var(--vv-space-2) 0 0 0;
  font-style: italic;
  text-align: center;
}

/* ── Divergence state: model in blue, factbook in gray ────────────────────── */

.vv-trigger-hero__divergence {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
}

.vv-trigger-hero__divergence .vv-trigger-hero__label {
  text-align: left;
}

.vv-trigger-hero__model {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
  padding-left: var(--vv-space-3);
  border-left: 4px solid var(--vv-color-interactive);
}

.vv-trigger-hero__factbook {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
  padding-left: var(--vv-space-3);
  border-left: 4px solid var(--vv-color-gray-30);
  opacity: 0.7;
}

.vv-trigger-hero__source-tag {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-interactive);
}

.vv-trigger-hero__source-tag--gray {
  color: var(--vv-color-gray-50);
}

.vv-trigger-hero__divergence-note {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: 1.5;
  color: var(--vv-color-text-secondary);
  margin: var(--vv-space-2) 0 0 0;
  padding: var(--vv-space-3);
  background-color: var(--vv-color-interactive-bg);
  border-radius: var(--vv-radius-sm, 4px);
}

/* ── Override state (J13.4): user explicit trigger selection ──────────────── */

.vv-trigger-hero--override {
  border-left: 4px solid var(--vv-color-interactive);
  border-radius: 0 var(--vv-radius-md) var(--vv-radius-md) 0;
}

.vv-trigger-hero__override-content {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
}

.vv-trigger-hero__override-content .vv-trigger-hero__label {
  text-align: left;
}

.vv-trigger-hero__name--override {
  color: var(--vv-color-interactive);
}

.vv-trigger-hero__spread--override {
  color: var(--vv-color-interactive);
}

.vv-trigger-hero__references {
  display: flex;
  gap: var(--vv-space-5);
  margin-top: var(--vv-space-1);
}

.vv-trigger-hero__ref {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-gray-50);
}

.vv-trigger-hero__ref-spread {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-gray-50);
}

.vv-trigger-hero__clear {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-gray-50);
  cursor: pointer;
  align-self: flex-start;
  margin-top: var(--vv-space-1);
}

.vv-trigger-hero__clear:hover {
  color: var(--vv-color-interactive);
  text-decoration: underline;
}

.vv-trigger-hero__clear:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Clickable trigger name (all states) ─────────────────────────────────── */

.vv-trigger-hero__name--clickable {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: inherit;
  transition: opacity 150ms ease;
  /* Font properties intentionally omitted — .vv-trigger-hero__name already
     explicitly sets font-family, font-size, font-weight, line-height, which
     beats button UA defaults. Adding font: inherit or font-*: inherit here
     would override those values (same specificity, later source order wins). */
}

.vv-trigger-hero__name--clickable:hover {
  opacity: 0.8;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.vv-trigger-hero__name--clickable:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Dark mode overrides ──────────────────────────────────────────────────── */

[data-theme="dark"] .vv-trigger-hero__divergence-note {
  background-color: var(--vv-color-interactive-bg);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-trigger-hero__divergence-note {
    background-color: var(--vv-color-interactive-bg);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   J6.2: Four-Layer Agreement Table
   Compact table matching S2A/S2B visual vocabulary (Tufte: data-ink ratio).
   Verdict encoded once via inline tag (no redundant bars or card chrome).
   Gestalt similarity: same table pattern as historical drivers, NTM, moat.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-agreement-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--vv-space-3);
}

.vv-agreement-table__header {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
  text-align: left;
  padding: var(--vv-space-2) var(--vv-space-3);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-agreement-table tbody tr {
  border-bottom: 1px solid var(--vv-color-border-light);
  transition: background-color 0.1s ease;
  cursor: default;
}

.vv-agreement-table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-agreement-table__label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: 600;
  color: var(--vv-color-text-primary);
  padding: var(--vv-space-2) var(--vv-space-3);
  white-space: nowrap;
}

/* "live" ref on sensitivity row — matches S2A/S2B trigger-ref pattern */
.vv-agreement-table__computed-ref {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-interactive);
  margin-left: var(--vv-space-1);
  border-bottom: 1px dashed currentColor;
}

.vv-agreement-table__verdict {
  padding: var(--vv-space-2) var(--vv-space-3);
}

/* Verdict tag — matches S2A volatility tag pattern exactly */
.vv-agreement-table__verdict-tag {
  display: inline-block;
  padding: 0 var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  border-radius: var(--vv-radius-sm, 4px);
}

.vv-agreement-table__verdict-tag--confirms {
  color: var(--vv-color-mint-60);          /* J10.1: grade-60 for 5.41:1 on mint-5 bg */
  background-color: var(--vv-color-sentiment-positive-bg);
}

.vv-agreement-table__verdict-tag--consistent {
  color: var(--vv-color-gray-60);          /* J10.1: grade-60 for 5.31:1 on surface-tertiary */
  background-color: var(--vv-color-surface-tertiary);
}

.vv-agreement-table__verdict-tag--contradicts {
  color: var(--vv-color-sentiment-negative);
  background-color: var(--vv-color-sentiment-negative-bg);
}

.vv-agreement-table__finding {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  padding: var(--vv-space-2) var(--vv-space-3);
}

/* J9.4: Unavailable layer rows — grayed out with dashed border */
.vv-agreement-table__row--unavailable {
  border-bottom-style: dashed;
}

.vv-agreement-table__row--unavailable .vv-agreement-table__label,
.vv-agreement-table__row--unavailable .vv-agreement-table__finding {
  color: var(--vv-color-text-tertiary);    /* J10.1: was text-disabled (2.19:1); now 4.64:1 on surface-primary */
  font-style: italic;
}

.vv-agreement-table__row--unavailable:hover {
  background-color: transparent;
  cursor: default;
}

.vv-agreement-table__verdict-tag--unavailable {
  color: var(--vv-color-text-tertiary);    /* J10.1: was text-disabled (2.19:1); now 4.64:1 */
  background-color: transparent;
}

/* ── J14.1: Interactive Verdict Tags ───────────────────────────────────────
   Qualitative layer badges (historical, NTM, transcript) become clickable
   buttons to cycle through confirms → consistent → contradicts.
   Follows the same pattern as .vv-moat-table__indicator--interactive. */

.vv-agreement-table__verdict-tag--interactive {
  cursor: pointer;
  border: 1.5px solid transparent;
  border-bottom: 1.5px dashed currentColor;
  background-clip: padding-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
  line-height: inherit;
}

.vv-agreement-table__verdict-tag--interactive:hover {
  box-shadow: 0 0 0 2px var(--vv-color-interactive-bg);
}

.vv-agreement-table__verdict-tag--interactive:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 1px;
}

/* User override: blue dashed border signals user opinion vs factbook */
.vv-agreement-table__verdict-tag--overridden {
  border-color: var(--vv-color-interactive);
}

/* Row-level override indicator: 4px blue left border (research layer visual grammar) */
.vv-agreement-table__row--overridden {
  border-left: 4px solid var(--vv-color-interactive);
}

/* Factbook reference shown below overridden verdict badge */
.vv-agreement-table__factbook-ref {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── J14.2-CP: Blue dot indicator in finding cell when layer has a rationale note ── */
.vv-agreement-table__note-indicator {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--vv-space-2);
  background: var(--vv-color-interactive);
  border-radius: 50%;
  vertical-align: middle;
}

/* ── J14.2-CP polish: "why?" micro-affordance link after override badge ── */
.vv-agreement-table__why-link {
  margin-left: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-style: italic;
  color: var(--vv-color-interactive);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--vv-transition-fast);
}

.vv-agreement-table__why-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── J14.2-CP: Spacing for layer note section in context pane ── */
.vv-context-pane__layer-note-section {
  margin-top: var(--vv-space-5);
  padding-top: var(--vv-space-5);
  border-top: 1px solid var(--vv-color-border-light);
}

/* ── J14.2-CP polish: Entrance pulse when layer note section mounts ── */
@keyframes vv-note-section-appear {
  0%   { background-color: var(--vv-color-interactive-light, rgba(35, 120, 195, 0.08)); }
  100% { background-color: transparent; }
}

.vv-context-pane__layer-note-section {
  animation: vv-note-section-appear 1.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .vv-context-pane__layer-note-section {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   J6.3: Synthesis Narrative — Bret Victor "reactive document"
   Text that rewrites itself based on model state (convergence vs divergence).
   Inserted after the agreement table, before leading indicators.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-synthesis-narrative {
  margin-top: var(--vv-space-5);
  padding: var(--vv-space-4) var(--vv-space-5);
  background-color: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
}

.vv-synthesis-narrative__text {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
}

.vv-synthesis-narrative__source {
  display: block;
  margin-top: var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════════
   J6.3: Leading Indicators — monitoring checklist for turbo trigger
   Direction tags use the same inline pill pattern as S2A volatility tags
   and agreement verdict tags (Gestalt similarity).
   ════════════════════════════════════════════════════════════════════════════ */

.vv-leading-indicators {
  margin-top: var(--vv-space-5);
}

.vv-leading-indicators__heading {
  margin: 0 0 var(--vv-space-3) 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
}

.vv-leading-indicators__trigger-label {
  font-weight: var(--vv-font-weight-regular);
  text-transform: none;
  letter-spacing: normal;
  color: var(--vv-color-text-secondary);
}

.vv-leading-indicators__table {
  width: 100%;
  border-collapse: collapse;
}

.vv-leading-indicators__header {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
  text-align: left;
  padding: var(--vv-space-2) var(--vv-space-3);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-leading-indicators__table tbody tr {
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-leading-indicators__table tbody tr:hover {
  background-color: var(--vv-color-surface-secondary);
}

.vv-leading-indicators__name {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
  padding: var(--vv-space-2) var(--vv-space-3);
}

.vv-leading-indicators__value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  padding: var(--vv-space-2) var(--vv-space-3);
}

.vv-leading-indicators__direction-cell {
  padding: var(--vv-space-2) var(--vv-space-3);
}

/* Direction tag — same inline pill pattern as agreement verdict tags */
.vv-leading-indicators__direction {
  display: inline-block;
  padding: 0 var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  border-radius: var(--vv-radius-sm);
  white-space: nowrap;
}

/* IMPROVING — mint: positive text semantic (CLAUDE.md color map) */
.vv-leading-indicators__direction--improving {
  color: var(--vv-color-mint-60);          /* J10.1: grade-60 for 5.41:1 on mint-5 bg */
  background-color: var(--vv-color-sentiment-positive-bg);
}

/* STABLE — gray: neutral semantic */
.vv-leading-indicators__direction--stable {
  color: var(--vv-color-gray-60);          /* J10.1: grade-60 for 5.31:1 on surface-tertiary */
  background-color: var(--vv-color-surface-tertiary);
}

/* CONCERN — magenta: negative text semantic (CLAUDE.md color map) */
.vv-leading-indicators__direction--concern {
  color: var(--vv-color-sentiment-negative);
  background-color: var(--vv-color-sentiment-negative-bg);
}

/* CYCLICAL — gold: insight/attention semantic */
.vv-leading-indicators__direction--cyclical {
  color: var(--vv-color-gold-60);          /* J10.1: grade-60 for 5.39:1 on gold-5 bg */
  background-color: var(--vv-color-insight-bg);
}

/* Net assessment — summary line below the table */
.vv-leading-indicators__assessment {
  margin: var(--vv-space-3) 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vv-space-3);
}

.vv-leading-indicators__counts {
  display: flex;
  gap: var(--vv-space-2);
}

.vv-leading-indicators__count {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  padding: 0 var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
}

.vv-leading-indicators__count--supporting {
  color: var(--vv-color-mint-60);          /* J10.1: grade-60 for WCAG AA on mint-5 bg */
  background-color: var(--vv-color-sentiment-positive-bg);
}

.vv-leading-indicators__count--neutral {
  color: var(--vv-color-gray-60);          /* J10.1: grade-60 for WCAG AA on surface-tertiary */
  background-color: var(--vv-color-surface-tertiary);
}

.vv-leading-indicators__count--challenging {
  color: var(--vv-color-sentiment-negative);
  background-color: var(--vv-color-sentiment-negative-bg);
}

.vv-leading-indicators__summary {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

/* ── J18.1: Indicator editing — inline value editing + direction cycling ──── */

/* Row with any user override gets blue left border */
.vv-leading-indicators__row--overridden {
  border-left: 4px solid var(--vv-color-interactive);
}

/* Click-to-edit value display */
.vv-leading-indicators__value-display {
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--vv-space-1);
  border-bottom: 1px dashed transparent;
  transition: border-color var(--vv-transition-fast);
}

.vv-leading-indicators__value-display:hover,
.vv-leading-indicators__value-display:focus-visible {
  border-bottom-color: var(--vv-color-interactive);
}

.vv-leading-indicators__value-display:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
  border-radius: var(--vv-radius-sm);
}

/* User override shown in blue */
.vv-leading-indicators__value-display--overridden > span:first-child {
  color: var(--vv-color-interactive);
  font-weight: var(--vv-font-weight-medium);
}

/* Factbook original as gray reference */
.vv-leading-indicators__factbook-ref {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  white-space: nowrap;
}

/* Value context: mono font + strikethrough (numbers need tabular alignment) */
.vv-leading-indicators__factbook-ref--value {
  font-family: var(--vv-font-family-mono);
  text-decoration: line-through;
}

/* Direction context: block display below badge (matches agreement table pattern) */
.vv-leading-indicators__factbook-ref--direction {
  display: block;
  margin-top: 0.125rem;
  letter-spacing: 0.01em;
}

/* Inline text input for value editing */
.vv-leading-indicators__value-input {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-interactive);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--vv-color-interactive);
  padding: 0;
  width: 100%;
  max-width: 10ch;
  outline: none;
}

.vv-leading-indicators__value-input:focus {
  border-bottom-color: var(--vv-color-interactive);
}

/* Direction tag — interactive (clickable, matches verdict tag pattern) */
.vv-leading-indicators__direction--interactive {
  cursor: pointer;
  border: 1.5px solid transparent;
  border-bottom: 1.5px dashed currentColor;
  background-clip: padding-box;
  transition: border-color var(--vv-transition-fast), box-shadow var(--vv-transition-fast);
  -webkit-appearance: none;
  appearance: none;
  /* Reset button defaults */
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.vv-leading-indicators__direction--interactive:hover {
  box-shadow: 0 0 0 2px var(--vv-color-interactive-bg);
}

.vv-leading-indicators__direction--interactive:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 1px;
}

/* Direction tag overridden — blue dashed border (matches verdict tag) */
.vv-leading-indicators__direction--overridden {
  border-color: var(--vv-color-interactive);
}

/* ── J18.2: Hide button (visible on row hover) ──────────────────────── */
.vv-leading-indicators__actions-cell {
  width: 2rem;
  text-align: center;
  vertical-align: middle;
}

.vv-leading-indicators__hide-btn {
  opacity: 0;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--vv-color-text-tertiary);
  font-size: var(--vv-font-size-base);
  padding: 0 var(--vv-space-1);
  line-height: 1;
  transition: opacity var(--vv-transition-fast), color var(--vv-transition-fast);
}

tr:hover .vv-leading-indicators__hide-btn,
.vv-leading-indicators__hide-btn:focus-visible {
  opacity: 1;
}

.vv-leading-indicators__hide-btn:hover {
  color: var(--vv-color-text-secondary);
}

/* ── J18.2: Hidden indicator rows ────────────────────────────────────── */
.vv-leading-indicators__row--hidden {
  opacity: 0.5;
}

.vv-leading-indicators__name--hidden {
  text-decoration: line-through;
  color: var(--vv-color-text-tertiary);
}

.vv-leading-indicators__hidden-toggle {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--vv-color-interactive);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
  padding: var(--vv-space-1) 0;
}

.vv-leading-indicators__hidden-toggle:hover {
  text-decoration-style: solid;
}

.vv-leading-indicators__restore-btn {
  cursor: pointer;
  background: none;
  border: 1px solid var(--vv-color-interactive);
  color: var(--vv-color-interactive);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  padding: 0.125rem var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
  transition: background var(--vv-transition-fast);
}

.vv-leading-indicators__restore-btn:hover {
  background: var(--vv-color-interactive-bg);
}

/* ── J18.2: Custom indicator rows ────────────────────────────────────── */
.vv-leading-indicators__row--custom {
  border-left: 4px solid var(--vv-color-interactive);
  background: var(--vv-color-interactive-bg);
}

.vv-leading-indicators__name--custom {
  color: var(--vv-color-interactive);
  font-weight: 500;
}

.vv-leading-indicators__delete-custom-btn {
  opacity: 0;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--vv-color-numeric-negative);  /* J18.4: was --vv-color-negative (undefined) → red-50 */
  font-size: var(--vv-font-size-base);
  padding: 0 var(--vv-space-1);
  line-height: 1;
  transition: opacity var(--vv-transition-fast);
}

tr:hover .vv-leading-indicators__delete-custom-btn,
.vv-leading-indicators__delete-custom-btn:focus-visible {
  opacity: 1;
}

/* ── J18.2: Add indicator button + inline form ───────────────────────── */
.vv-leading-indicators__add-btn {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--vv-color-interactive);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  padding: var(--vv-space-1) 0;
  transition: color var(--vv-transition-fast);
}

.vv-leading-indicators__add-btn:hover {
  text-decoration: underline;
}

.vv-leading-indicators__form-row td {
  vertical-align: bottom;
}

.vv-leading-indicators__custom-input {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-interactive);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--vv-color-interactive);
  padding: var(--vv-space-1) 0;
  outline: none;
  width: 100%;
}

.vv-leading-indicators__custom-input--mono {
  font-family: var(--vv-font-family-mono);
}

.vv-leading-indicators__custom-input::placeholder {
  color: var(--vv-color-text-tertiary);
  font-style: italic;
}

.vv-leading-indicators__custom-select {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-interactive);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--vv-color-interactive);
  border-radius: 0;
  padding: var(--vv-space-1) 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232378c3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 1rem;
}

.vv-leading-indicators__save-custom-btn,
.vv-leading-indicators__cancel-custom-btn {
  font-size: var(--vv-font-size-sm);
  background: none;
  border: none;
  padding: var(--vv-space-1) var(--vv-space-2);
  cursor: pointer;
  font-family: var(--vv-font-family-sans);
  line-height: 1;
  transition: color var(--vv-transition-fast);
}

.vv-leading-indicators__save-custom-btn {
  color: var(--vv-color-interactive);
}

.vv-leading-indicators__save-custom-btn:hover {
  text-decoration: underline;
}

.vv-leading-indicators__save-custom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: none;
}

.vv-leading-indicators__save-custom-btn:focus-visible,
.vv-leading-indicators__cancel-custom-btn:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

.vv-leading-indicators__cancel-custom-btn {
  color: var(--vv-color-text-tertiary);
}

.vv-leading-indicators__cancel-custom-btn:hover {
  color: var(--vv-color-text-secondary);
  text-decoration: underline;
}

/* Dark theme overrides for J18.1 + J18.2 */
[data-theme="dark"] .vv-leading-indicators__value-input {
  color: var(--vv-color-interactive);
  border-bottom-color: var(--vv-color-interactive);
}

[data-theme="dark"] .vv-leading-indicators__factbook-ref {
  color: var(--vv-color-text-tertiary);
}

[data-theme="dark"] .vv-leading-indicators__custom-input {
  color: var(--vv-color-interactive);
  border-bottom-color: var(--vv-color-interactive);
}

/* J10.2: Custom-select dropdown arrow — light-theme blue is invisible on dark bg */
[data-theme="dark"] .vv-leading-indicators__custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2373b3e7'/%3E%3C/svg%3E");
}

/* ── System Dark Mode Preference Fallback ─────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vv-leading-indicators__value-input {
    color: var(--vv-color-interactive);
    border-bottom-color: var(--vv-color-interactive);
  }

  html:not([data-theme="light"]) .vv-leading-indicators__factbook-ref {
    color: var(--vv-color-text-tertiary);
  }

  html:not([data-theme="light"]) .vv-leading-indicators__custom-input {
    color: var(--vv-color-interactive);
    border-bottom-color: var(--vv-color-interactive);
  }

  html:not([data-theme="light"]) .vv-leading-indicators__custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2373b3e7'/%3E%3C/svg%3E");
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   J14.3: Synthesis Thesis Note
   Qualitative complement to the quantitative thesis captured by slider ranges.
   Reuses .vv-research-notes* pattern from Section 1.
   Gestalt (Proximity): positioned below leading indicators, above accessible table.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-synthesis-thesis {
  margin-top: var(--vv-space-5);
}

/* ════════════════════════════════════════════════════════════════════════════
   J8: Section 2 Diagnostic Context Pane Content
   Displays enriched context when hovering historical drivers, NTM correlations,
   or transcript analysis segments. Uses s2-hist:, s2-ntm:, s2-transcript: prefixes.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-context-pane__s2-context {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-4);
}

/* NTM estimate vs price chart container */
.vv-context-pane__ntm-chart {
  width: 100%;
  aspect-ratio: 1.6;
  margin: var(--vv-space-3) 0;
  min-height: 120px;
}

/* Chart SVG overflow for end labels */
.vv-ntm-chart {
  overflow: visible;
}

.vv-context-pane__s2-description {
  margin: 0;
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed, 1.5);
  color: var(--vv-color-text-secondary);
}

.vv-context-pane__s2-detail {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-context-pane__s2-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
}

.vv-context-pane__s2-text {
  margin: 0;
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed, 1.5);
  color: var(--vv-color-text-primary);
}

/* Context pane: Sensitivity scenario narratives (J8.4) */
.vv-context-pane__scenario {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-4);
}

.vv-context-pane__scenario-levels {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);
}

.vv-context-pane__scenario-level {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-context-pane__scenario-header {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
}

.vv-context-pane__scenario-tag {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
  color: var(--vv-color-text-secondary);
  background: var(--vv-color-surface-tertiary);
}

.vv-context-pane__scenario-value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
}

.vv-context-pane__scenario-narrative {
  margin: 0;
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed, 1.5);
  color: var(--vv-color-text-primary);
}

/* J17.2: Factbook narrative becomes secondary reference when user note exists */
.vv-context-pane__scenario-narrative--secondary {
  color: var(--vv-color-text-tertiary);
  font-style: italic;
}

/* J17.2: Spacing wrapper for user scenario note below factbook narrative */
.vv-context-pane__scenario-note-section {
  margin-top: var(--vv-space-2);
}

/* Context pane: Value factors — how growth transmits to value (J8.5, Mauboussin Ch.6) */
.vv-context-pane__value-factors {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
  border-top: 1px solid var(--vv-color-border-light);
  padding-top: var(--vv-space-3);
}

.vv-context-pane__factors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vv-font-size-xs);
  line-height: 1.4;
}

.vv-context-pane__factors-table thead th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vv-color-text-tertiary);
  padding: 0 var(--vv-space-2) var(--vv-space-1) 0;
  text-align: left;
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-context-pane__factors-table tbody td {
  padding: var(--vv-space-2) var(--vv-space-2) var(--vv-space-2) 0;
  vertical-align: top;
  border-bottom: 1px solid var(--vv-color-border-light);
  color: var(--vv-color-text-primary);
}

.vv-context-pane__factor-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
}

.vv-context-pane__factor-desc {
  font-weight: 400;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  line-height: 1.3;
}

.vv-context-pane__factor-current {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary);
}

.vv-context-pane__factor-sensitivity {
  white-space: nowrap;
}

.vv-context-pane__sensitivity-tag {
  display: inline-block;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
}

.vv-context-pane__sensitivity-tag--high {
  color: var(--vv-color-insight-text);
  background: var(--vv-color-insight-bg);
}

.vv-context-pane__sensitivity-tag--moderate {
  color: var(--vv-color-text-tertiary);
  background: var(--vv-color-surface-tertiary);
}

.vv-context-pane__sensitivity-tag--low {
  color: var(--vv-color-sentiment-positive);
  background: var(--vv-color-sentiment-positive-bg);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 3: BUY, SELL, OR HOLD? (J1.1)
   Decision Framework — EV Table, Margin of Safety, Sanity Check
   ════════════════════════════════════════════════════════════════════════════ */

/* Section 3 skeleton loading container */
.vv-section3-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);
}

.vv-section3-skeleton__panel {
  margin-bottom: var(--vv-space-5);
}

/* Section 3 panel container */
.vv-section3-panel {
  margin-bottom: var(--vv-space-8);
  background: var(--vv-color-surface-card);
  padding: var(--vv-space-5);
  border-radius: var(--vv-radius-sm);
  border: 1px solid var(--vv-color-border-light);
  /* J1.4: Offset anchor scroll so panel heading isn't flush with viewport top */
  scroll-margin-top: var(--vv-space-5);
}

.vv-section3-panel__heading {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin-bottom: var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
}

.vv-section3-panel__fallback {
  padding: var(--vv-space-5);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
}

.vv-section3-panel__fallback-message {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-base);
}

/* ────────────────────────────────────────────────────────────────────────
   S3A: Expected Value Table (J2.1-J2.3, J2.7)
   BEM: .vv-ev-table
   8 columns: Scenario | Rev Growth | Op Margin | Reinvest | Period |
              Fair Value | Prob | Weighted
   ──────────────────────────────────────────────────────────────────────── */

.vv-ev-table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0;
  border-radius: var(--vv-radius-sm);
  overflow: hidden;
}

.vv-ev-table__header {
  display: contents;
}

.vv-ev-table__header > .vv-ev-table__cell {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-secondary);
  background: var(--vv-color-surface-tertiary);
  padding: var(--vv-space-2) var(--vv-space-3);
  line-height: var(--vv-rhythm);
}

.vv-ev-table__row {
  display: contents;
}

.vv-ev-table__cell {
  padding: var(--vv-space-2) var(--vv-space-3);
  line-height: var(--vv-rhythm);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-ev-table__cell--scenario {
  display: flex;
  align-items: center;
}

.vv-ev-table__cell--rev-growth,
.vv-ev-table__cell--op-margin,
.vv-ev-table__cell--reinvest,
.vv-ev-table__cell--period,
.vv-ev-table__cell--value,
.vv-ev-table__cell--prob,
.vv-ev-table__cell--weighted {
  text-align: right;
}

.vv-ev-table__mono {
  font-family: var(--vv-font-family-mono);
}

.vv-ev-table__scenario-name {
  font-weight: var(--vv-font-weight-semibold);
  font-family: var(--vv-font-family-sans);
}

/* Total EV row — highlighted with gold insight background */
.vv-ev-table__row--total > .vv-ev-table__cell {
  background: var(--vv-color-insight-bg);
  border-bottom: none;
  font-weight: var(--vv-font-weight-semibold);
}

/* J2.6: Scenario rows show help cursor to signal hover context */
.vv-ev-table__row:not(.vv-ev-table__row--total) > .vv-ev-table__cell {
  cursor: help;
}

/* J2.7: Tangle inputs inside EV table — compact, no tooltip */
.vv-ev-table .vv-tangle {
  display: block;
  text-align: right;
}

.vv-ev-table .vv-tangle__value {
  font-size: var(--vv-font-size-base);
}

.vv-ev-table .vv-tangle__hint {
  display: none;
}

/* J4.1: Value Variability Indicator
   Positioned below the EV table total row, shows HIGH/LOW badge + explanation.
   ──────────────────────────────────────────────────────────────────────── */

.vv-ev-table__variability {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-3);
  margin-top: var(--vv-space-2);
}

.vv-ev-table__variability-label {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  letter-spacing: var(--vv-letter-spacing-caps);
  padding: var(--vv-space-1) var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
  line-height: var(--vv-line-height-sm);
}

.vv-ev-table__variability-label--high {
  color: var(--vv-color-warning);
  background: var(--vv-color-orange-5);
}

.vv-ev-table__variability-label--low {
  color: var(--vv-color-text-secondary);
  background: var(--vv-color-gray-5);
}

.vv-ev-table__variability-text {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-sm);
}

/* ────────────────────────────────────────────────────────────────────────
   J4.2: Explore — Adaptive Reverse-Solve Card
   BEM: .vv-explore
   ──────────────────────────────────────────────────────────────────────── */

.vv-explore {
  margin-top: var(--vv-space-3);
  padding: var(--vv-space-3) var(--vv-space-4);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-md);
}

.vv-explore__question {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin: 0;
  line-height: var(--vv-line-height-sm);
}

.vv-explore__answer {
  margin-top: var(--vv-space-1);
}

.vv-explore__probability {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-insight);
}

.vv-explore__probability--muted {
  color: var(--vv-color-text-tertiary);
}

.vv-explore__probability--positive {
  color: var(--vv-color-sentiment-positive);
}

.vv-explore__interpretation {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin: var(--vv-space-1) 0 0;
  line-height: var(--vv-line-height-sm);
}

/* ────────────────────────────────────────────────────────────────────────
   Mini Margin of Safety Bar (inline in EV table card)
   Compact read-only summary for immediate feedback while editing scenarios
   BEM: .vv-ev-table__mini-mos
   ──────────────────────────────────────────────────────────────────────── */

.vv-ev-table__mini-mos {
  margin-top: var(--vv-space-3);
  padding: var(--vv-space-2) var(--vv-space-3);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-md, 6px);
}

.vv-ev-table__mini-mos-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--vv-space-2);
}

.vv-ev-table__mini-mos-label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vv-ev-table__mini-mos-pct {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-ev-table__mini-mos-pct--positive {
  color: var(--vv-color-numeric-positive);
}

.vv-ev-table__mini-mos-pct--negative {
  color: var(--vv-color-numeric-negative);
}

.vv-ev-table__mini-mos-pct--zero {
  color: var(--vv-color-text-tertiary);
}

.vv-ev-table__mini-mos-track {
  position: relative;
  height: 8px;
  background: var(--vv-color-surface-tertiary);
  border-radius: 4px;
  overflow: visible;
}

.vv-ev-table__mini-mos-gap {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2px;
}

.vv-ev-table__mini-mos-gap--discount {
  background: var(--vv-color-numeric-positive);
  opacity: 0.35;
}

.vv-ev-table__mini-mos-gap--premium {
  background: var(--vv-color-numeric-negative);
  opacity: 0.35;
}

.vv-ev-table__mini-mos-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  border-radius: 1px;
}

.vv-ev-table__mini-mos-marker--ev {
  background: var(--vv-color-interactive);
}

.vv-ev-table__mini-mos-marker--price {
  background: var(--vv-color-text-primary);
}

.vv-ev-table__mini-mos-values {
  display: flex;
  justify-content: space-between;
  margin-top: var(--vv-space-1);
}

.vv-ev-table__mini-mos-value {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
}

/* ────────────────────────────────────────────────────────────────────────
   S3B: Margin of Safety (J5.1-J5.2)
   BEM: .vv-mos
   ──────────────────────────────────────────────────────────────────────── */

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

.vv-mos__header .vv-section3-panel__heading {
  margin-bottom: 0;
}

/* Gap bar visualization */
.vv-mos__bar-container {
  padding: var(--vv-space-8) var(--vv-space-3) var(--vv-space-5);
}

.vv-mos__bar {
  position: relative;
  height: var(--vv-rhythm);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-xs);
}

.vv-mos__marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  transition: left var(--vv-transition-normal);  /* J5.5: smooth marker slide */
}

.vv-mos__marker-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  position: absolute;
  top: calc(-1 * var(--vv-rhythm));
  white-space: nowrap;
}

.vv-mos__marker-value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  position: absolute;
  bottom: calc(-1 * var(--vv-rhythm));
  white-space: nowrap;
}

.vv-mos__marker--ev::after {
  content: '';
  width: 2px;
  height: var(--vv-rhythm);
  background: var(--vv-color-interactive);
}

.vv-mos__marker--price::after {
  content: '';
  width: 2px;
  height: var(--vv-rhythm);
  background: var(--vv-color-text-primary);
}

/* Gap fill between markers */
.vv-mos__gap {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0.25;
  border-radius: var(--vv-radius-xs);
  transition: left var(--vv-transition-normal), width var(--vv-transition-normal);  /* J5.5: smooth gap resize */
}

.vv-mos__gap--discount {
  background: var(--vv-color-numeric-positive);
}

.vv-mos__gap--premium {
  background: var(--vv-color-numeric-negative);
}

/* Gap summary text */
.vv-mos__summary {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  margin-top: var(--vv-space-3);
}

.vv-mos__gap-label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-mos__gap-value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  transition: color var(--vv-transition-normal);  /* J5.5: smooth color shift on sign change */
}

.vv-mos__gap-value--positive {
  color: var(--vv-color-numeric-positive);
}

.vv-mos__gap-value--negative {
  color: var(--vv-color-numeric-negative);
}

.vv-mos__gap-context {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
}

/* J5.3: Convergence years & annual excess return (Mauboussin Table 7.7) */
.vv-mos__excess-return {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--vv-space-3);
  padding-top: var(--vv-space-3);
  border-top: 1px solid var(--vv-color-border-light);
}

.vv-mos__excess-return-label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-mos__excess-return-value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  transition: color var(--vv-transition-normal);  /* J5.5: smooth color shift on sign change */
}

.vv-mos__excess-return-value--positive {
  color: var(--vv-color-numeric-positive);
}

.vv-mos__excess-return-value--negative {
  color: var(--vv-color-numeric-negative);
}

/* Inline tangle within label text (e.g., convergence years in MoS) */
.vv-tangle--inline {
  display: inline;
}

/* Position P&L context for holders (JP2.3) */
.vv-mos__position {
  margin-top: var(--vv-space-3);
  padding-top: var(--vv-space-3);
  border-top: 1px solid var(--vv-color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-mos__position-label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-mos__position-value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
}

.vv-mos__position-pnl {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-mos__position-pnl--gain {
  color: var(--vv-color-numeric-positive);
}

.vv-mos__position-pnl--loss {
  color: var(--vv-color-numeric-negative);
}

.vv-mos__position-holding {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
}

/* ────────────────────────────────────────────────────────────────────────
   S3C: Sanity Check (J6.1-J6.7)
   BEM: .vv-sanity
   ──────────────────────────────────────────────────────────────────────── */

.vv-sanity__subheading {
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  font-family: var(--vv-font-family-sans);
  margin-bottom: var(--vv-space-2);
  margin-top: var(--vv-space-5);
}

.vv-sanity__subheading:first-child {
  margin-top: 0;
}

/* Base Rates */
.vv-sanity__base-rates {
  /* No background — lives within the panel */
}

.vv-sanity__headline {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  margin-bottom: var(--vv-space-2);
}

.vv-sanity__stat-number {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

.vv-sanity__stat-context {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
}

.vv-sanity__sustainability {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin-bottom: var(--vv-space-2);
  line-height: var(--vv-rhythm);
}

.vv-sanity__sample-desc {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin-bottom: var(--vv-space-3);
}

/* Company Examples (J6.2) */
.vv-sanity__examples {
  display: flex;
  gap: var(--vv-space-5);
  margin-bottom: var(--vv-space-3);
}

.vv-sanity__example-group {
  flex: 1;
}

.vv-sanity__example-label {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  margin-bottom: var(--vv-space-1);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-sanity__example-label--achieved {
  color: var(--vv-color-sentiment-positive);
}

.vv-sanity__example-label--failed {
  color: var(--vv-color-text-secondary);
}

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

.vv-sanity__example-item {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  padding: 2px 0;
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-rhythm);
}

.vv-sanity__example-name {
  color: var(--vv-color-text-primary);
}

.vv-sanity__example-value {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-sanity__example-value--achieved {
  color: var(--vv-color-sentiment-positive);
}

.vv-sanity__example-value--failed {
  color: var(--vv-color-text-secondary);
}

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

/* Company Fit (J6.3) */
.vv-sanity__company-fit {
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-sm);
  margin-bottom: var(--vv-space-3);
}

.vv-sanity__fit-header {
  display: flex;
  align-items: center;
  gap: var(--vv-space-3);
  margin-bottom: var(--vv-space-2);
}

.vv-sanity__fit-badge {
  display: inline-block;
  padding: 2px var(--vv-space-2);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  border-radius: var(--vv-radius-xs);
}

.vv-sanity__fit-badge--poor {
  background: var(--vv-color-signal-overvalued-bg);
  color: var(--vv-color-signal-overvalued);
}

.vv-sanity__fit-badge--partial {
  background: var(--vv-color-warning-bg);
  color: var(--vv-color-orange-60);              /* J9.1: WCAG AA fix — orange-60 passes 4.71:1 on orange-5 */
}

.vv-sanity__fit-badge--good {
  background: var(--vv-color-signal-undervalued-bg);
  color: var(--vv-color-signal-undervalued);
}

.vv-sanity__fit-badge--excellent {
  background: var(--vv-color-sentiment-positive-bg);
  color: var(--vv-color-sentiment-positive);
}

.vv-sanity__fit-score {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
}

.vv-sanity__fit-traits {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-sanity__trait {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-rhythm);
}

.vv-sanity__trait--matching {
  color: var(--vv-color-text-primary);
}

.vv-sanity__trait--matching .vv-sanity__trait-icon {
  color: var(--vv-color-sentiment-positive);
}

.vv-sanity__trait--missing {
  color: var(--vv-color-text-primary);
}

.vv-sanity__trait--missing .vv-sanity__trait-icon {
  color: var(--vv-color-sentiment-negative);
}

.vv-sanity__trait-icon {
  font-size: var(--vv-font-size-sm);
  flex-shrink: 0;
}

.vv-sanity__common-traits {
  margin-top: var(--vv-space-3);
}

.vv-sanity__traits-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin-bottom: var(--vv-space-1);
}

.vv-sanity__traits-list {
  list-style: disc;
  padding-left: var(--vv-space-5);
  margin: 0;
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-rhythm);
}

/* Sell Triggers (J6.5) */
.vv-sanity__sell-triggers {
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-sm);
  margin-top: var(--vv-space-5);
}

.vv-sanity__trigger-list {
  padding-left: var(--vv-space-5);
  margin: 0;
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-rhythm);
}

.vv-sanity__trigger-list li {
  margin-bottom: var(--vv-space-2);
}

/* Gemini Assessment (J6.7) */
.vv-sanity__gemini {
  margin-top: var(--vv-space-5);
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-secondary);
  border: 1px dashed var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
}

.vv-sanity__gemini-verdict {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  margin-bottom: var(--vv-space-2);
}

.vv-sanity__gemini-label {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-sanity__gemini-scenario {
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

.vv-sanity__gemini-prob {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
}

.vv-sanity__gemini-rationale {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-rhythm);
  margin-bottom: var(--vv-space-3);
}

.vv-sanity__factors-label {
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin-bottom: var(--vv-space-1);
  margin-top: var(--vv-space-3);
}

.vv-sanity__factors-list {
  list-style: disc;
  padding-left: var(--vv-space-5);
  margin: 0;
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-rhythm);
}

/* Warning (optimism bias, etc.)
   Theme-aware background banner — uses warning-bg token (orange-5) for both
   light and dark themes. Text uses standard text tokens which auto-invert. */
.vv-sanity__warning {
  display: flex;
  gap: var(--vv-space-3);
  margin-top: var(--vv-space-5);
  padding: var(--vv-space-3);
  background: var(--vv-color-warning-bg);
  border-radius: var(--vv-radius-sm);
  border-left: 3px solid var(--vv-color-warning);
}

.vv-sanity__warning-icon {
  font-size: var(--vv-font-size-md);
  color: var(--vv-color-warning);
  flex-shrink: 0;
}

.vv-sanity__warning-message {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-rhythm);
  margin-bottom: var(--vv-space-1);
}

.vv-sanity__warning-suggestion {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-rhythm);
  font-style: italic;
}

/* ── J6.6: Reactive Narrative ──────────────────────────────────────────── */
.vv-sanity__narrative {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-base);
  color: var(--vv-color-text-secondary);
  margin-top: var(--vv-space-5);
  padding: var(--vv-space-3) 0;
  max-width: 65ch;
}

.vv-sanity__narrative strong {
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   POSITION DECLARATION WIDGET (JP1.1 v2: Lot-Based)
   Three states: prompt → add-lot form → summary with lot list + thesis.
   BEM: .vv-position, .vv-position__prompt, .vv-position__form, .vv-position__summary,
        .vv-position__lots, .vv-position__lot, .vv-position__thesis
   ════════════════════════════════════════════════════════════════════════════ */

.vv-position {
  margin-bottom: var(--vv-space-5);
  padding: var(--vv-space-3) var(--vv-space-5);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-sm);
  border-left: 3px solid var(--vv-color-interactive);
}

/* Hide useless number input spinners */
.vv-position__input[type="number"]::-webkit-inner-spin-button,
.vv-position__input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vv-position__input[type="number"] {
  -moz-appearance: textfield;
}

/* ── Prompt state ──────────────────────────────────────────────────────────── */

.vv-position__prompt {
  display: flex;
  align-items: center;
  gap: var(--vv-space-3);
  flex-wrap: wrap;
  min-height: var(--vv-rhythm);
}

.vv-position__question {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-rhythm);
}

.vv-position__action {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-interactive);
  background: transparent;
  border: 1px solid var(--vv-color-interactive);
  border-radius: var(--vv-radius-sm);
  padding: var(--vv-space-1) var(--vv-space-3);
  cursor: pointer;
  transition: background-color var(--vv-transition-fast);
  line-height: var(--vv-rhythm);
}

.vv-position__action:hover {
  background: var(--vv-color-interactive-bg);
}

.vv-position__action:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Form state ────────────────────────────────────────────────────────────── */

.vv-position__form {
  margin: 0;
}

.vv-position__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vv-space-3);
}

.vv-position__field {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-position__field--wide {
  grid-column: 1 / -1;
}

.vv-position__label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-position__optional {
  font-weight: var(--vv-font-weight-normal);
  text-transform: none;
  letter-spacing: normal;
  color: var(--vv-color-text-tertiary);
}

.vv-position__input {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  background: var(--vv-color-surface-primary);
  border: 1px solid var(--vv-color-border-primary);
  border-radius: var(--vv-radius-sm);
  padding: var(--vv-space-1) var(--vv-space-2);
  line-height: var(--vv-rhythm);
}

.vv-position__input::placeholder {
  color: var(--vv-color-text-tertiary);
}

.vv-position__input:focus {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 1px;
  border-color: var(--vv-color-interactive);
}

.vv-position__actions {
  display: flex;
  gap: var(--vv-space-3);
  margin-top: var(--vv-space-3);
}

.vv-position__save {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: white;
  background: var(--vv-color-interactive);
  border: none;
  border-radius: var(--vv-radius-sm);
  padding: var(--vv-space-1) var(--vv-space-3);
  cursor: pointer;
  transition: background-color var(--vv-transition-fast);
  line-height: var(--vv-rhythm);
}

.vv-position__save:hover:not(:disabled) {
  background: var(--vv-color-interactive-hover);
}

.vv-position__save:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

.vv-position__save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vv-position__cancel {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--vv-space-1) var(--vv-space-2);
  line-height: var(--vv-rhythm);
}

.vv-position__cancel:hover {
  color: var(--vv-color-text-primary);
}

.vv-position__cancel:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Summary state ─────────────────────────────────────────────────────────── */

.vv-position__summary {
  min-height: var(--vv-rhythm);
}

.vv-position__check {
  color: var(--vv-color-numeric-positive);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-position__summary-text {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-rhythm);
}

.vv-position__clear {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vv-position__clear:hover {
  color: var(--vv-color-text-secondary);
}

.vv-position__clear:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Summary header (with action buttons) ──────────────────────────────────── */

.vv-position__summary-header {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  min-height: var(--vv-rhythm);
  flex-wrap: wrap;
}

.vv-position__summary-actions {
  margin-left: auto;
  display: flex;
  gap: var(--vv-space-3);
  align-items: center;
}

.vv-position__add-lot {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-interactive);
  background: transparent;
  border: none;
  cursor: pointer;
}

.vv-position__add-lot:hover {
  text-decoration: underline;
}

.vv-position__add-lot:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Lot list ──────────────────────────────────────────────────────────────── */

.vv-position__lots {
  margin-top: var(--vv-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

.vv-position__lot {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding-left: var(--vv-space-5);
  min-height: var(--vv-rhythm);
}

.vv-position__lot-detail {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-position__lot-tax {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  color: var(--vv-color-text-tertiary);
  padding: 0 var(--vv-space-1);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
  line-height: var(--vv-rhythm);
}

.vv-position__lot-remove {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 0 var(--vv-space-1);
  line-height: var(--vv-rhythm);
}

.vv-position__lot-remove:hover {
  color: var(--vv-color-numeric-negative);
}

.vv-position__lot-remove:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* ── Thesis ────────────────────────────────────────────────────────────────── */

.vv-position__thesis {
  margin-top: var(--vv-space-2);
  padding-left: var(--vv-space-5);
}

.vv-position__thesis-display {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  flex-wrap: wrap;
}

.vv-position__thesis-label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

.vv-position__thesis-text {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  font-style: italic;
}

.vv-position__thesis-edit {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vv-position__thesis-edit:hover {
  color: var(--vv-color-text-secondary);
}

.vv-position__thesis-form {
  display: flex;
  gap: var(--vv-space-2);
  align-items: center;
}

.vv-position__thesis-input {
  flex: 1;
}

.vv-position__thesis-done {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-interactive);
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════════
   SELL DECISION CHECKLIST (JP3.1)
   Holder-only panel between S3B (MoS) and S3C (Sanity Check).
   Three Mauboussin sell triggers + position economics.
   BEM: .vv-sell-checklist, __heading, __triggers, __trigger, __economics
   ════════════════════════════════════════════════════════════════════════════ */

.vv-sell-checklist {
  padding: var(--vv-space-5);
}

.vv-sell-checklist__heading {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-rhythm);
  margin: 0 0 var(--vv-space-1) 0;
}

.vv-sell-checklist__subtitle {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  margin: 0 0 var(--vv-space-5) 0;
  line-height: var(--vv-rhythm);
}

/* ── Triggers ─────────────────────────────────────────────────────────────── */

.vv-sell-checklist__triggers {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  margin-bottom: var(--vv-space-5);
}

.vv-sell-checklist__trigger {
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-sm);
  border-left: 3px solid var(--vv-color-gray-50);
}

.vv-sell-checklist__trigger-header {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  margin-bottom: var(--vv-space-1);
}

.vv-sell-checklist__trigger-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vv-color-gray-50);
  flex-shrink: 0;
}

.vv-sell-checklist__trigger-label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

.vv-sell-checklist__trigger-description {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin: 0;
  line-height: var(--vv-rhythm);
}

/* ── Trigger active state (JP3.2) ─────────────────────────────────────────── */

.vv-sell-checklist__trigger--active {
  border-left-color: var(--vv-color-signal-overvalued);
}

.vv-sell-checklist__trigger--active .vv-sell-checklist__trigger-indicator {
  background: var(--vv-color-signal-overvalued);
}

.vv-sell-checklist__trigger-status {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  margin: 0;
  line-height: var(--vv-rhythm);
}

.vv-sell-checklist__trigger-status--active {
  color: var(--vv-color-signal-overvalued);
}

.vv-sell-checklist__trigger-status--inactive {
  color: var(--vv-color-text-tertiary);
}

.vv-sell-checklist__trigger-input {
  margin-top: var(--vv-space-2);
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
}

.vv-sell-checklist__trigger-input label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-sell-checklist__trigger-input select {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  background: var(--vv-color-surface-primary);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
  padding: var(--vv-space-1) var(--vv-space-2);
  cursor: pointer;
}

.vv-sell-checklist__trigger-input select:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 1px;
}

.vv-sell-checklist__trigger-thesis {
  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-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  font-style: italic;
}

.vv-sell-checklist__trigger-thesis-label {
  font-style: normal;
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  display: block;
  margin-bottom: var(--vv-space-1);
  font-size: var(--vv-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
}

/* ── Economics ────────────────────────────────────────────────────────────── */

.vv-sell-checklist__economics {
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
}

.vv-sell-checklist__economics-heading {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--vv-letter-spacing-caps);
  margin: 0 0 var(--vv-space-2) 0;
  line-height: var(--vv-rhythm);
}

.vv-sell-checklist__economics-rows {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-2);
}

.vv-sell-checklist__economics-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vv-space-3);
}

.vv-sell-checklist__economics-label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
}

.vv-sell-checklist__economics-value {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  text-align: right;
}

.vv-sell-checklist__economics-value--gain {
  color: var(--vv-color-numeric-positive);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-sell-checklist__economics-value--loss {
  color: var(--vv-color-numeric-negative);
  font-weight: var(--vv-font-weight-semibold);
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID PAGE — 2-COLUMN LAYOUT (G1.2)

   Left: Grid area (data table + header)
   Right: Context pane (cell drill-down)

   Uses same layout philosophy as .vv-stock-page but with 2 columns
   instead of 3. Grid area gets min 800px for 4-company comparison.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-grid-page {
  display: grid;
  grid-template-columns:
    minmax(var(--vv-layout-grid-min), 1fr)
    minmax(var(--vv-layout-context-min), var(--vv-layout-context-max));
  gap: var(--vv-layout-gap);
  align-content: start;
  min-height: 100vh;
  padding: var(--vv-layout-gap);
}

/* ────────────────────────────────────────────────────────────────────────────
   GRID PAGE — RESPONSIVE BREAKPOINTS (G1.3)

   Wide (≥1200px): Both columns visible
   Medium (900-1199px): Context pane hidden, slides in on cell click
   Small (<900px): Unsupported viewport message
   ──────────────────────────────────────────────────────────────────────────── */

/* Medium: hide context pane, grid takes full width */
@media (max-width: 1199px) {
  .vv-grid-page {
    grid-template-columns: 1fr;
  }

  .vv-grid-page__context {
    display: none;
  }

  /* Context pane slides in as overlay when a cell is selected */
  .vv-grid-page__context--visible {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 90vw);
    z-index: var(--vv-z-dropdown);
    background: var(--vv-color-surface-card);
    box-shadow: var(--vv-shadow-lg);
    overflow-y: auto;
    padding: var(--vv-space-5);
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   GRID PAGE — UNSUPPORTED VIEWPORT (G1.3)

   Same pattern as .vv-unsupported-message but scoped to grid page.
   Hidden by default; shown via media query below 900px.
   Base rule MUST come before the media query so the media query can override.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-grid-page__unsupported {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--vv-space-6);
  text-align: center;
  background-color: var(--vv-color-surface-primary);
}

.vv-grid-page__unsupported-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--vv-space-5);
  color: var(--vv-color-text-tertiary);
}

.vv-grid-page__unsupported h2 {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-lg);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin-bottom: var(--vv-space-3);
  max-width: 24em;
}

.vv-grid-page__unsupported p {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  max-width: 28em;
  line-height: var(--vv-line-height-relaxed);
}

/* Dark theme support */
[data-theme="dark"] .vv-grid-page__unsupported {
  background-color: var(--vv-color-surface-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID PAGE — 2-COLUMN LAYOUT (I1.2)

   Sibling of .vv-grid-page; shares the same 2-col skeleton so the shell
   looks identical at all viewports. Internal children (.vv-grid-area,
   .vv-grid-page__context, .vv-grid-page__unsupported) are aliased from
   grid.html in I1.1 — the strict-BEM rename decision is deferred to I1.3.

   Placement: this block MUST precede the @media (max-width: 899px) block
   below so that rule's display:none correctly overrides the display:grid
   base (CSS cascade, equal specificity — later rule wins).

   Light-mode only: NO [data-theme="dark"] or prefers-color-scheme rules.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-igrid-page {
  display: grid;
  grid-template-columns:
    minmax(var(--vv-layout-grid-min), 1fr)
    minmax(var(--vv-layout-context-min), var(--vv-layout-context-max));
  gap: var(--vv-layout-gap);
  align-content: start;
  min-height: 100vh;
  padding: var(--vv-layout-gap);
}

/* Medium: hide context pane, grid takes full width.
   The existing .vv-grid-page__context rule (context-free) already handles
   the hide — we only need to collapse the grid-template-columns here. */
@media (max-width: 1199px) {
  .vv-igrid-page {
    grid-template-columns: 1fr;
  }
}

/* Interactive Grid header — hosts input (empty state) or summary bar
   (ready state). HTML placement lands in I3.1 / I3.5 per PRD. */
.vv-igrid-header {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
}

/* Small: hide grid (both vv-grid-page and vv-igrid-page variants), show unsupported message */
@media (max-width: 899px) {
  .vv-grid-page,
  .vv-igrid-page {
    display: none;
  }

  .vv-grid-page__unsupported {
    display: flex;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — BEM CLASS NAMESPACE (I1.3)

   This block reserves every .vv-igrid-* class name the interactive-grid.html
   page will use, names the file location (always this file), and points to
   the task that adds the actual styling. Future engineers grepping for any
   of the names below will land here first.

   ── Decision: BEM-alias for shell children (Road Runner Rule #6 deviation)
   The interactive-grid.html shell uses three children whose class names
   carry the .vv-grid-page__* BEM prefix even though their parent is
   .vv-igrid-page:
     <main class="vv-grid-area">                — pure layout primitive
     <aside class="vv-grid-page__context">      — context pane (appearance-bearing)
     <div  class="vv-grid-page__unsupported">   — <900px viewport fallback
   We deliberately keep these aliases rather than renaming to
   .vv-igrid-page__* equivalents. Rationale:
     1. .vv-grid-area is layout-only (Rule #5 — safe to share).
     2. The PRD I1.3 step list reserves .vv-igrid-* CHILDREN of context
        (.vv-igrid-context__window/articles/article) but not the wrapper
        itself — confirming the "shared wrapper, namespaced children" intent.
     3. Renaming requires duplicating appearance rules with zero observable
        change today and immediate drift risk.
     4. I7.x will revisit when the context-pane content actually diverges
        — at that point we can extract a shared primitive or fully rename
        with informed knowledge of what's being styled.

   ── Reserved names (alphabetical within block) ───────────────────────────
   Block: .vv-igrid-input
     .vv-igrid-input              — root container for the dual-autocomplete
                                    text input (chip + free-text composite).
                                    Owner: I3.1
     .vv-igrid-input__chip        — company tag pill with × remove control.
                                    Owner: I3.1
     .vv-igrid-input__dropdown    — RESERVATION PROMOTED (I3.2, 2026-04-23).
                                    I3.2 shipped the rule + siblings
                                    (__dd-header, __dd-item, __dd-item--active,
                                    __dd-ticker, __dd-name, __dd-empty) in the
                                    INPUT AUTOCOMPLETE DROPDOWN (I3.2) block
                                    below. I3.3 will extend the same panel
                                    for the metric-autocomplete track — no
                                    new block reservation needed.

   Block: .vv-igrid-summary-bar — RESERVATION PROMOTED (I4.1, 2026-04-23).
     I4.1 shipped the rule + siblings (__row, __label, __metric, __separator,
     __chip-list, __chip, __running, __edit, __edit[disabled], __trim-notice)
     in the SUMMARY BAR (I4.1) block at the end of this file.

   Block: .vv-igrid-context (children of the aliased .vv-grid-page__context
   wrapper — see BEM-alias decision above)
     .vv-igrid-context__window    — labelled date-range chip ("News window:
                                    2026-01-01 → 2026-04-20").
                                    RESERVATION PROMOTED (I7.2, 2026-04-23)
     .vv-igrid-context__articles  — list container for news article cards.
                                    RESERVATION PROMOTED (I7.2, 2026-04-23)
     .vv-igrid-context__article   — single news article card (publisher +
                                    date + title link + excerpt; neutral
                                    gray border-left).
                                    RESERVATION PROMOTED (I7.2, 2026-04-23)
                                    I7.2 also introduced sibling children
                                    __article-head, __article-publisher,
                                    __article-date, __article-title,
                                    __article-excerpt — not I1.3-reserved
                                    names. See the CONTEXT PANE NEWS BRANCH
                                    (I7.2) section at end-of-file for the
                                    live rules.

   Block: .vv-igrid-prestart — RESERVATION PROMOTED (I9.1, 2026-04-24).
     .vv-igrid-prestart              — root container for the pre-query-
                                       acceptance hint, visible while
                                       lifecycle.state === 'streaming' &&
                                       !lifecycle.data. Owner: I9.1
     .vv-igrid-prestart__custom-slot — empty div hook so a user can drop a
                                       custom loading GIF via background-image
                                       or innerHTML without editing this block.
     .vv-igrid-prestart__message     — mono-font status line with pulsing dot.
     .vv-igrid-prestart__dot         — small pulsing circle (reuses
                                       @keyframes vv-pulse-dot at line 2710).
     .vv-igrid-prestart__text        — "Starting query…" string, inherits
                                       mono font + tertiary text color from
                                       __message.

   Block-modifier on shared .vv-grid__cell
     .vv-igrid__cell--empty       — RESERVATION RETIRED (I5.3, 2026-04-23).
                                    I5.3 shipped the empty-cell rule as
                                    .vv-grid__cell--empty in the shared
                                    namespace (matches PRD literal and
                                    interactive-grid-sample.html precedent;
                                    parity with .vv-grid__cell--prompt). The
                                    interactive-grid-scoped name was never
                                    consumed. See the EMPTY CELL (I5.3)
                                    section below for the live rule.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Empty-context opt-out (resolves I1.2 NOTES #b) ─────────────────────────
   Per the BEM-alias decision above, the interactive-grid.html aside reuses
   the .vv-grid-page__context class — which on grid.html is a fully-styled
   card (background + border + sticky padding). Until I7.x renders content
   into the aside, the empty card is visible at >=1200px on this page only.
   This rule hides the empty card; :empty auto-resolves the moment I7.x
   appends a child node, with zero coordination required.

   Note: this is a deliberate Road Runner Rule #7 (location-dependent
   selector) deviation — necessary as the linked opt-out from the Rule #6
   alias decision above. Do not generalize this pattern. */
.vv-igrid-page .vv-grid-page__context:empty {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — INPUT COMPONENT (I3.1)

   Marked-up container for the dual-autocomplete text input: an inline list
   of ticker chips + a free-text field that share a single focus ring. Chip
   state comes from Alpine.store('igrid').input.chips; this block owns only
   the visual surface.

   Light-mode only. No [data-theme="dark"] / prefers-color-scheme rules.
   Tokens only — no raw px or hex.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-igrid-input {
  position: relative;  /* I3.2 — anchor for .vv-igrid-input__dropdown */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-3);
  background: var(--vv-color-surface-primary);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
  min-height: var(--vv-rhythm-double);
  cursor: text;
}

.vv-igrid-input:focus-within {
  border-color: var(--vv-color-interactive);
  box-shadow: 0 0 0 3px var(--vv-color-interactive-bg);
}

.vv-igrid-input__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  padding: var(--vv-space-1) var(--vv-space-2);
  background: var(--vv-color-interactive-bg);
  border-radius: var(--vv-radius-full);
  line-height: var(--vv-rhythm);
}

.vv-igrid-input__chip-ticker {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-interactive-hover);
}

.vv-igrid-input__chip-remove {
  background: transparent;
  border: none;
  padding: 0 var(--vv-space-1);
  cursor: pointer;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-rhythm);
  color: var(--vv-color-text-tertiary);
}

.vv-igrid-input__chip-remove:hover {
  color: var(--vv-color-text-primary);
}

.vv-igrid-input__chip-remove:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* I11.8 — Cancel button on the edit input. Mirrors the read-only
   summary-bar __edit-pencil position via margin-inline-start: auto. */
.vv-igrid-input__cancel {
  margin-inline-start: auto;
  background: transparent;
  border: none;
  padding: var(--vv-space-1) var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  cursor: pointer;
  transition: color var(--vv-transition-fast);
}

.vv-igrid-input__cancel:hover {
  color: var(--vv-color-interactive);
}

.vv-igrid-input__cancel:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

.vv-igrid-input__field {
  flex: 1 1 auto;
  min-width: var(--vv-space-12);
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-rhythm);
  color: var(--vv-color-text-primary);
}

.vv-igrid-input__field::placeholder {
  color: var(--vv-color-text-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — INPUT HERO MODIFIER (I11.6)

   Applied when lifecycle.state === 'empty'. Promotes the input from a
   compact form control to the visual hero of the empty-state page.
   Centred in the column, larger padding + font, stronger focus ring.
   Reverts to the base .vv-igrid-input on the editing / streaming / ready
   transitions because those states own a different visual focus (grid +
   summary bar).
   ──────────────────────────────────────────────────────────────────────── */

.vv-igrid-input--hero {
  /* The empty-state .vv-grid-area uses align-items:center, so its flex
     children (heading, header, prompts) take their natural cross-axis
     width. The hero input fills its parent .vv-igrid-header up to the
     reading-max cap. The header itself is stretched via the
     [data-igrid-empty-state] selector below so the chain is:
       .vv-grid-area (align-items:center)
         → .vv-igrid-header (width 100%, max-width reading-max)
           → .vv-igrid-input--hero (width 100%) */
  width: 100%;
  max-width: var(--vv-layout-reading-max);
  margin: 0 auto;
  padding: var(--vv-space-4) var(--vv-space-5);
  font-size: var(--vv-font-size-md);
  background: var(--vv-color-surface-card);
  /* Heavier 2px border + softer shadow so the input is the visual focus on
     the page (matches the user-supplied Vespa demo reference where the
     centered search box stands clearly out of the surrounding chrome). */
  border-width: 2px;
  border-color: var(--vv-color-text-tertiary);
  box-shadow: var(--vv-shadow-sm);
}

/* I11.6 — In empty state the centered .vv-grid-area otherwise sizes
   .vv-igrid-header to its natural content width, leaving the hero input
   narrow. Stretching the header to the reading-max gives the input
   something to fill against without overflowing the column. */
.vv-grid-area[data-igrid-empty-state="true"] .vv-igrid-header {
  width: 100%;
  max-width: var(--vv-layout-reading-max);
}

.vv-igrid-input--hero .vv-igrid-input__field {
  font-size: var(--vv-font-size-md);
  /* Wider min-width so the placeholder text never gets clipped behind the
     dropdown / chips. The base 8rem is fine in compact mode but cramps the
     placeholder in hero mode. */
  min-width: var(--vv-space-12);
  flex-basis: 20rem;
}

.vv-igrid-input--hero:focus-within {
  border-color: var(--vv-color-interactive);
  box-shadow: 0 0 0 4px var(--vv-color-interactive-bg);
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — INPUT AUTOCOMPLETE DROPDOWN (I3.2)

   Absolute-positioned panel anchored to .vv-igrid-input. Shown when
   store.input.dropdownMode === 'companies'. Header + item rows + empty state.
   Light-mode only. Tokens only — no raw px/hex (1-3px for border/outline allowed).
   ──────────────────────────────────────────────────────────────────────────── */

.vv-igrid-input__dropdown {
  position: absolute;
  top: calc(100% + var(--vv-space-1));
  left: 0;
  right: 0;
  max-height: calc(var(--vv-rhythm) * 12);
  overflow-y: auto;
  background: var(--vv-color-surface-primary);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
  box-shadow: var(--vv-shadow-md);
  z-index: var(--vv-z-dropdown);
  padding: var(--vv-space-1) 0;
}

.vv-igrid-input__dd-header {
  padding: var(--vv-space-1) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  line-height: var(--vv-rhythm);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vv-igrid-input__dd-item {
  display: flex;
  align-items: baseline;
  gap: var(--vv-space-2);
  padding: var(--vv-space-1) var(--vv-space-3);
  line-height: var(--vv-rhythm);
  cursor: pointer;
  color: var(--vv-color-text-primary);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
}

.vv-igrid-input__dd-item--active,
.vv-igrid-input__dd-item:hover {
  background: var(--vv-color-interactive-bg);
}

.vv-igrid-input__dd-ticker {
  font-family: var(--vv-font-family-mono);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-interactive-hover);
}

.vv-igrid-input__dd-name {
  color: var(--vv-color-text-tertiary);
  font-size: var(--vv-font-size-sm);
}

.vv-igrid-input__dd-empty {
  padding: var(--vv-space-2) var(--vv-space-3);
  line-height: var(--vv-rhythm);
  color: var(--vv-color-text-tertiary);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
}

/* ── I3.3 — metric autocomplete additions to the dropdown ──────────────────
   Three sub-elements of .vv-igrid-input__dropdown for the metrics track:
     __dd-phrase      — curated phrase row (single-line, base font).
     __dd-asis-label  — italic "Use as-is:" prefix on the free-text sentinel row.
     __dd-asis-text   — mono literal capture of what the user typed.
   All token-based, light-mode only, no dark-mode rules. */
.vv-igrid-input__dd-phrase {
  display: block;
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vv-igrid-input__dd-asis-label {
  font-style: italic;
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  margin-right: var(--vv-space-1);
}

.vv-igrid-input__dd-asis-text {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-primary);
}

/* ── I3.4 — Plan enforcement + submit flow + validation errors ─────────────
   Three additions to the input component:
     --disabled         Root modifier while lifecycle.state === 'streaming' (renamed from 'loading' by I12.1).
     __error            Inline validation error paragraph (sibling of the
                        .vv-igrid-input root inside .vv-igrid-header; vertical
                        spacing owned by the header's column gap per Road
                        Runner Rule #3, so this rule intentionally has
                        margin: 0).
     __dd-limit-warning Single disabled row in the dropdown shown when @ is
                        typed with chips.length >= planLimit. Uses the orange
                        warning semantic (CLAUDE.md §2; precedent:
                        .vv-error-state--warning for user-input validation).
   Light-mode only; token-based. */

.vv-igrid-input--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.vv-igrid-input__error {
  margin: 0;
  padding: var(--vv-space-1) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-rhythm);
  color: var(--vv-color-warning);
  background: var(--vv-color-orange-5);
  border-left: 3px solid var(--vv-color-warning);
  border-radius: var(--vv-radius-md);
}

.vv-igrid-input__dd-limit-warning {
  padding: var(--vv-space-2) var(--vv-space-3);
  line-height: var(--vv-rhythm);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-warning);
  background: var(--vv-color-orange-5);
  cursor: default;
}

/* ────────────────────────────────────────────────────────────────────────────
   GRID PAGE — GRID AREA (G1.4)

   Contains: grid header (metadata + toolbar) + data table.
   Scrollable independently from context pane.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-grid-area {
  min-width: 0;  /* Prevent grid blowout */
  overflow-x: auto;
}

/* ── Grid Header (G4.1) ─────────────────────────────────────────────────── */

.vv-grid-header {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  padding-bottom: var(--vv-space-5);
  border-bottom: 1px solid var(--vv-color-border-light);
  margin-bottom: var(--vv-space-5);
}

.vv-grid-header__title {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xl);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0;
  line-height: var(--vv-line-height-xl);
}

.vv-grid-header__meta {
  display: flex;
  align-items: center;
  gap: var(--vv-space-3);
  flex-wrap: wrap;
}

.vv-grid-header__badge {
  display: inline-block;
  padding: var(--vv-space-1) var(--vv-space-2);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-medium, 500);
  background: var(--vv-color-surface-tertiary);
  border-radius: var(--vv-radius-sm);
  color: var(--vv-color-text-secondary);
}

.vv-grid-header__badge--subject {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-1);
  font-family: var(--vv-font-family-sans);
  background: color-mix(in srgb, var(--vv-color-interactive) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--vv-color-interactive) 30%, transparent);
  color: var(--vv-color-interactive);
}

.vv-grid-header__date {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
}


/* ────────────────────────────────────────────────────────────────────────────
   GRID PAGE — CONTEXT PANE (G1.4)

   Sticky sidebar showing cell drill-down content.
   Same pattern as stock page context pane but scoped to grid.
   ──────────────────────────────────────────────────────────────────────────── */

.vv-grid-page__context {
  position: sticky;
  top: var(--vv-space-5);
  align-self: start;
  max-height: calc(100vh - var(--vv-space-8));
  overflow-y: auto;
  padding: var(--vv-space-5);
  background: var(--vv-color-surface-card);
  border-radius: var(--vv-radius-md);
  border: 1px solid var(--vv-color-border-light);
}

/* I11.6 — On the Interactive Grid page, suppress the context-pane card
   chrome (background, border, padding) when there is no content to show
   (no grid yet AND no selected cell). Without this, the empty aside still
   renders as a visible empty box on the empty-state page, which the
   user-facing review correctly flagged as misleading. Toggled via the
   .vv-grid-page__context--silent modifier (set by Alpine x-class). */
.vv-grid-page__context.vv-grid-page__context--silent {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

/* Empty state for context pane */
.vv-grid-page__context-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--vv-color-text-tertiary);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  text-align: center;
}

.vv-grid-page__context-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--vv-space-3);
  opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID TABLE — DATA GRID (G5.1–G5.6)

   Semantic <table> with:
   - Sticky column headers (company names)
   - Frozen first column (feature names)
   - Row group headers (collapsible section dividers)
   - Zebra striping on data rows
   - Cell type variants (prompt, computed, rank, synthesis)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Table Container ────────────────────────────────────────────────────── */
.vv-grid__table-wrap {
  overflow: auto;
  max-height: calc(100vh - 12rem);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-md);
}

.vv-grid__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  table-layout: fixed;
}

/* ── Sticky Header Row (company names) ──────────────────────────────────── */
.vv-grid__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--vv-color-surface-tertiary);
  padding: var(--vv-space-3) var(--vv-space-3);
  font-weight: var(--vv-font-weight-semibold);
  font-size: var(--vv-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  border-bottom: 2px solid var(--vv-color-border-primary);
  white-space: nowrap;
}

/* Corner cell: above both sticky axes */
.vv-grid__cell--corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--vv-color-surface-tertiary);
  min-width: 200px;
  max-width: 260px;
  width: 220px;
}

/* Company header — subject accent */
.vv-grid__company-header--subject {
  border-bottom: 3px solid var(--vv-color-interactive);
}

/* ── Sort by Company (G7.3) ──────────────────────────────────────────── */

/* Clickable header content wrapper */
.vv-grid__company-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vv-space-1);
}

/* Hover state for sortable headers */
.vv-grid__table thead th[role="columnheader"]:hover {
  background: color-mix(in srgb, var(--vv-color-interactive) 6%, var(--vv-color-surface-tertiary));
}

/* Active sort column highlight */
.vv-grid__company-header--sorted {
  background: color-mix(in srgb, var(--vv-color-interactive) 10%, var(--vv-color-surface-tertiary)) !important;
  border-bottom-color: var(--vv-color-interactive);
}

/* Sort direction arrow */
.vv-grid__sort-arrow {
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-interactive);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

/* Company ticker badge in header */
.vv-grid__company-ticker {
  display: block;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-normal);
  color: var(--vv-color-text-tertiary);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

/* ── Column Resize Handle (G7.4) ─────────────────────────────────────────── */
.vv-grid__resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  opacity: 0;
  transition: opacity var(--vv-transition-fast);
  z-index: 4;
}

.vv-grid__resize-handle:hover,
.vv-grid__resize-handle--active {
  opacity: 1;
  background: var(--vv-color-interactive);
}

/* ═══════════════════════════════════════════════════════════════════════════
   G7.1 — Drag-to-Reorder Feature Rows
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drag handle: grip dots in feature name column, visible on row hover.
   Absolutely positioned so it doesn't shift the feature name text. */
.vv-grid__drag-handle {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  cursor: grab;
  color: var(--vv-color-text-tertiary);
  font-size: var(--vv-font-size-xs);
  line-height: 1;
  transition: opacity var(--vv-transition-fast);
  user-select: none;
}

.vv-grid__row:hover .vv-grid__drag-handle {
  opacity: 1;
}

.vv-grid__drag-handle:active {
  cursor: grabbing;
}

/* SortableJS ghost: the placeholder left behind in the list */
.vv-grid__row--ghost {
  opacity: 0.3;
  background: var(--vv-color-surface-secondary) !important;
}

/* SortableJS chosen: the element being dragged */
.vv-grid__row--chosen {
  opacity: 0.85;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--vv-color-text-primary) 15%, transparent);
}

/* Hide drag handle during active sort (sort takes priority) */
.vv-grid__table[data-sort-active] .vv-grid__drag-handle {
  display: none;
}

/* Focus-visible on drag handle for keyboard accessibility */
.vv-grid__drag-handle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 1px;
  border-radius: var(--vv-radius-sm);
}

/* ── Frozen Feature Column ──────────────────────────────────────────────── */
.vv-grid__cell--feature {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--vv-color-surface-card);
  min-width: 200px;
  max-width: 260px;
  width: 220px;
  font-weight: var(--vv-font-weight-semibold);
  font-size: var(--vv-font-size-sm);
  padding: var(--vv-space-2) var(--vv-space-3);
  border-right: 1px solid var(--vv-color-border-light);
  vertical-align: top;
}

/* ── Data Cells (shared) ────────────────────────────────────────────────── */
.vv-grid__cell {
  padding: var(--vv-space-2) var(--vv-space-3);
  vertical-align: top;
  border-bottom: 1px solid var(--vv-color-border-light);
  transition: background-color 0.15s ease;
}

/* ── Row Group Header ───────────────────────────────────────────────────── */
.vv-grid__group-header {
  background: var(--vv-color-surface-secondary);
  cursor: pointer;
  user-select: none;
}

.vv-grid__group-header td {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vv-color-text-secondary);
  border-bottom: 1px solid var(--vv-color-border-primary);
}

.vv-grid__group-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  margin-right: var(--vv-space-1);
  font-size: var(--vv-font-size-xs);
}

.vv-grid__group-chevron--collapsed {
  transform: rotate(-90deg);
}

.vv-grid__group-count {
  font-weight: var(--vv-font-weight-normal);
  color: var(--vv-color-text-tertiary);
  margin-left: var(--vv-space-2);
}

/* ── Data Rows — Hover ──────────────────────────────────────────────────── */

/* Hover: feature name column gets flat tint */
.vv-grid__row:hover .vv-grid__cell--feature {
  background: color-mix(in srgb, var(--vv-color-interactive) 4%, var(--vv-color-surface-card));
}

/* Hover: data cells use box-shadow overlay to preserve signal backgrounds */
.vv-grid__row:hover .vv-grid__cell {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--vv-color-interactive) 6%, transparent);
}

/* ── Cell Signal Backgrounds ────────────────────────────────────────────── */
.vv-grid__cell--signal-positive {
  background-color: var(--vv-color-grid-signal-positive-bg);
}
.vv-grid__cell--signal-negative {
  background-color: var(--vv-color-grid-signal-negative-bg);
}
.vv-grid__cell--signal-warning {
  background-color: var(--vv-color-grid-signal-warning-bg);
}
.vv-grid__cell--signal-neutral {
  background-color: transparent;
}

/* ── Prompt Cell (G5.4) ─────────────────────────────────────────────────── */
.vv-grid__cell--prompt {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: 1.4;
}

.vv-grid__cell-text {
  /* Full text visible — comparison tables need scannable content, not hidden text */
}

.vv-grid__cell-citation {
  position: absolute;
  top: var(--vv-space-1);
  right: var(--vv-space-1);
  font-size: 10px;
  color: var(--vv-color-text-tertiary);
  opacity: 0.6;
}


/* ── I12.2: Loading + Error cell branches ───────────────────────────── */

/* Loading cell — container preserves the shared cell padding; the skeleton
   stack owns the visual. No background so the shimmer bars read crisply. */
.vv-grid__cell--loading {
  padding: var(--vv-space-2) var(--vv-space-3);
  vertical-align: top;
}

.vv-grid__cell-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-1);
}

/* Individual shimmer bar — mirrors .vv-skeleton's gradient/animation so the
   rhythm matches the rest of the app; stops short of inheriting the utility
   class so cell-specific tuning stays local. */
.vv-skeleton-bar {
  height: var(--vv-space-3);
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--vv-color-surface-secondary) 25%,
    var(--vv-color-surface-tertiary) 50%,
    var(--vv-color-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: vv-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--vv-radius-sm);
}

.vv-skeleton-bar--short {
  width: 60%;
}

@media (prefers-reduced-motion: reduce) {
  .vv-skeleton-bar {
    animation: none;
  }
}

/* Error cell — magenta tint reuses the shared negative-signal bg token;
   inline flex row keeps icon + label + message + Retry on one reading line
   when the cell is wide, wraps gracefully when narrow. */
.vv-grid__cell--error {
  background-color: var(--vv-color-grid-signal-negative-bg);
  padding: var(--vv-space-2) var(--vv-space-3);
  vertical-align: top;
}

.vv-grid__cell-error {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vv-space-1);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  line-height: 1.4;
}

.vv-grid__cell-error-icon {
  color: var(--vv-color-magenta-50);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-grid__cell-error-label {
  color: var(--vv-color-magenta-50);
  font-weight: var(--vv-font-weight-semibold);
}

.vv-grid__cell-error-message {
  color: var(--vv-color-text-secondary);
}

.vv-grid__cell-error-retry {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-interactive);
  text-decoration: underline;
  cursor: pointer;
}

.vv-grid__cell-error-retry:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}


/* ── Computed Cell (G5.5) ───────────────────────────────────────────────── */
.vv-grid__cell--computed {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  text-align: right;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

.vv-grid__cell-value {
  font-weight: var(--vv-font-weight-semibold);
}

.vv-grid__cell-trend {
  margin-left: var(--vv-space-1);
}

.vv-grid__cell-trend--up {
  color: var(--vv-color-numeric-positive);
}
.vv-grid__cell-trend--down {
  color: var(--vv-color-numeric-negative);
}
.vv-grid__cell-trend--stable {
  color: var(--vv-color-text-tertiary);
}

/* ── Rank Cell (G5.6) ───────────────────────────────────────────────────── */
.vv-grid__cell--rank {
  text-align: center;
}

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

.vv-grid__rank-justification {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary);
  margin-top: 2px;
}

/* ── Synthesis Cell (G5.6) ──────────────────────────────────────────────── */
.vv-grid__cell--synthesis {
  text-align: center;
}

.vv-grid__synthesis-badge {
  display: inline-block;
  padding: var(--vv-space-1) var(--vv-space-2);
  border-radius: var(--vv-radius-full);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-bold);
  letter-spacing: 0.05em;
}

.vv-grid__synthesis-badge--positive {
  background: var(--vv-color-grid-signal-positive-bg);
  color: var(--vv-color-mint-50);
}
.vv-grid__synthesis-badge--warning {
  background: var(--vv-color-grid-signal-warning-bg);
  color: var(--vv-color-orange-50);
}
.vv-grid__synthesis-badge--negative {
  background: var(--vv-color-grid-signal-negative-bg);
  color: var(--vv-color-magenta-50);
}

.vv-grid__synthesis-justification {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary);
  margin-top: 2px;
}

/* ── Cell Interaction States (G6.1) ──────────────────────────────────────── */

/* Hover outline on data cells — 1px inset so it doesn't shift layout */
.vv-grid__cell:hover {
  outline: 1px solid var(--vv-color-interactive);
  outline-offset: -1px;
}

/* Selected cell: left border accent + subtle elevation */
/* Double class selector bumps specificity above :hover (0-2-0) */
.vv-grid__cell.vv-grid__cell--selected {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
  box-shadow: var(--vv-shadow-sm);
  z-index: 1;
  position: relative;
}

/* Keyboard focus ring — only visible for keyboard navigation, not mouse clicks (G6.2) */
.vv-grid__cell:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

/* Suppress default focus ring on mouse click — but preserve selected cell outline */
.vv-grid__cell:focus:not(:focus-visible):not(.vv-grid__cell--selected) {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — GRID TABLE (I5.1)

   Variant of .vv-grid__table for the Interactive Grid page. Narrows the
   period column to 180px (vs the default feature column's 220px), drops
   the drag handle (reorder is out-of-scope for this grid), and drops the
   sort arrow (single-metric × periods — sort is meaningless). Layer this
   section on TOP of .vv-grid__cell--feature / .vv-grid__cell--corner;
   cascade ordering (same specificity, later wins) narrows the widths.

   DO NOT move the I5.1 sibling-modifier rules (.vv-igrid__period-cell,
   .vv-igrid__corner-cell) ABOVE the .vv-grid__cell--feature /
   .vv-grid__cell--corner base rules — same-specificity cascade depends on
   declaration order.
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-igrid__table {
  /* Variant hook — base styling inherited from .vv-grid__table. Explicit
     empty body so the selector exists for tests and for future variant
     overrides (data-variant hooks, etc.). */
}

.vv-igrid__corner-cell {
  min-width: 160px;
  max-width: 200px;
  width: 180px;
}

.vv-igrid__period-cell {
  min-width: 160px;
  max-width: 200px;
  width: 180px;
  padding: var(--vv-space-2) var(--vv-space-3);
  vertical-align: top;
}

.vv-igrid__period-label {
  display: block;
  font-weight: var(--vv-font-weight-semibold);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-rhythm);
}

.vv-igrid__period-sublabel {
  display: block;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-rhythm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — EMPTY CELL (I5.3)

   Renders em-dash (—) with tooltip for cells whose value is null. Uses the
   shared .vv-grid__cell--empty namespace (NOT the I1.3-reserved .vv-igrid__cell--empty)
   per the PRD literal and for parity with the sibling .vv-grid__cell--prompt class.
   See the I1.3 retired-reservation note above for the naming decision.

   Cascade-ordering invariant: this section sits AFTER the I5.1 GRID TABLE block
   above. Keep it there — no same-specificity rule in I5.1 targets this class,
   but the block-placement policy for interactive-grid sections is "after I5.1".
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-grid__cell--empty {
  /* display: block is load-bearing — an inline span shrink-wraps to its
     content width, so text-align:center would not visibly center the em-dash
     within the td. Block display gives the span the td's full content-box
     width and lets text-align:center actually center the glyph. */
  display: block;
  color: var(--vv-color-text-tertiary);
  text-align: center;
  font-size: var(--vv-font-size-md);
  cursor: default;
}

/* ── Context Pane Content (G6.1 + G8.1 + G8.2) ─────────────────────────── */

/* Context header: feature name + company name */
.vv-grid-context__header {
  margin-bottom: var(--vv-space-5);
  padding-bottom: var(--vv-space-3);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-grid-context__feature-name {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  margin: 0;
}

.vv-grid-context__company-name {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin-top: 2px;
}

/* Q&A section (transcript context for prompt cells) */
.vv-grid-context__qa-section {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);
}

.vv-grid-context__section-label {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vv-color-text-tertiary);
  margin-bottom: var(--vv-space-3);
}

.vv-grid-context__qa-count {
  font-weight: var(--vv-font-weight-regular);
  text-transform: none;
  letter-spacing: normal;
}

/* Opening remarks */
.vv-grid-context__remark {
  padding: var(--vv-space-3);
  border-left: 3px solid var(--vv-color-gray-30);
  margin-bottom: var(--vv-space-3);
}

.vv-grid-context__remark-speaker {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-secondary);
  margin-bottom: 2px;
}

.vv-grid-context__remark-text {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
}

/* Q&A pairs */
.vv-grid-context__qa-pair {
  margin-bottom: var(--vv-space-5);
  padding-bottom: var(--vv-space-5);
  border-bottom: 1px solid var(--vv-color-border-light);
}

.vv-grid-context__qa-pair:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.vv-grid-context__qa-question,
.vv-grid-context__qa-answer {
  display: flex;
  gap: var(--vv-space-3);
  margin-bottom: var(--vv-space-3);
}

.vv-grid-context__qa-answer {
  margin-bottom: 0;
}

.vv-grid-context__qa-role {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vv-radius-sm);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-bold);
  background: var(--vv-color-surface-tertiary);
  color: var(--vv-color-text-secondary);
  margin-top: 2px;
}

.vv-grid-context__qa-role--answer {
  background: color-mix(in srgb, var(--vv-color-interactive) 10%, transparent);
  color: var(--vv-color-interactive);
}

.vv-grid-context__qa-speaker {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-secondary);
  margin-bottom: 2px;
}

.vv-grid-context__qa-text {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
}

/* Source attribution */
.vv-grid-context__source-attr {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  padding-top: var(--vv-space-3);
  border-top: 1px solid var(--vv-color-border-light);
}

/* Justification-only for rank/synthesis without transcript */
.vv-grid-context__justification-only {
  margin-bottom: var(--vv-space-5);
}

.vv-grid-context__answer-justification {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-secondary);
}

/* Signal indicator in context header */
.vv-grid-context__signal {
  display: inline-block;
  padding: var(--vv-space-1) var(--vv-space-2);
  border-radius: var(--vv-radius-full);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: var(--vv-space-2);
}

.vv-grid-context__signal--positive {
  background: var(--vv-color-grid-signal-positive-bg);
  color: var(--vv-color-mint-50);
}
.vv-grid-context__signal--negative {
  background: var(--vv-color-grid-signal-negative-bg);
  color: var(--vv-color-magenta-50);
}
.vv-grid-context__signal--warning {
  background: var(--vv-color-grid-signal-warning-bg);
  color: var(--vv-color-orange-50);
}
.vv-grid-context__signal--neutral {
  color: var(--vv-color-text-tertiary);
}

/* Computed methodology section (banking metrics) */
.vv-grid-context__citations {
  border-top: 1px solid var(--vv-color-border-light);
  padding-top: var(--vv-space-5);
}

/* Computed methodology section */
.vv-grid-context__methodology {
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-sm);
  border-left: 3px solid var(--vv-color-text-tertiary);
}

.vv-grid-context__methodology-text {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
  margin-bottom: var(--vv-space-2);
}

.vv-grid-context__methodology-source {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
}

/* Source page thumbnails */
.vv-grid-context__source-pages {
  margin-top: var(--vv-space-3);
}

.vv-grid-context__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  margin-top: var(--vv-space-2);
}

.vv-grid-context__thumb {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color var(--vv-transition-fast);
}

.vv-grid-context__thumb:hover {
  border-color: var(--vv-color-interactive);
}

.vv-grid-context__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.vv-grid-context__thumb-label {
  display: block;
  padding: var(--vv-space-1) var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-secondary);
  line-height: 1.3;
  background: var(--vv-color-surface-secondary);
}

/* Lightbox overlay */
.vv-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--vv-z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  padding: var(--vv-space-5);
}

.vv-lightbox__close {
  position: absolute;
  top: var(--vv-space-3);
  right: var(--vv-space-3);
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: var(--vv-space-1);
}

.vv-lightbox__close:hover {
  opacity: 0.7;
}

.vv-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--vv-radius-sm);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* No citations message */
.vv-grid-context__no-citations {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   G9.1 — Grid Loading Skeleton & Error Card
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton Table ────────────────────────────────────────────────────── */

/* Wrapper matches .vv-grid__table-wrap overflow behavior */
.vv-grid-skeleton {
  width: 100%;
  padding: var(--vv-space-5);
}

.vv-grid-skeleton__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* Feature column matches real grid's 220px frozen column */
.vv-grid-skeleton__col-feature {
  width: 220px;
}

/* Header row: feature label + company name placeholders */
.vv-grid-skeleton__header-cell {
  padding: var(--vv-space-3) var(--vv-space-3);
  vertical-align: middle;
}

.vv-grid-skeleton__header-bar {
  height: 1.25rem;
  width: 80%;
  border-radius: var(--vv-radius-sm);
}

/* Group header row spans entire table */
.vv-grid-skeleton__group-cell {
  padding: var(--vv-space-2) var(--vv-space-3);
}

.vv-grid-skeleton__group-bar {
  height: 1rem;
  width: 40%;
  border-radius: var(--vv-radius-sm);
}

/* Data cell: feature name or content placeholder */
.vv-grid-skeleton__cell {
  padding: var(--vv-space-3);
  vertical-align: top;
}

/* Feature name skeleton (left column) */
.vv-grid-skeleton__feature-bar {
  height: 0.875rem;
  width: 85%;
  border-radius: var(--vv-radius-sm);
}

/* Content skeleton (data cells) — two lines simulating prompt text */
.vv-grid-skeleton__content-bar {
  height: 0.75rem;
  width: 100%;
  margin-bottom: var(--vv-space-1);
  border-radius: var(--vv-radius-sm);
}

.vv-grid-skeleton__content-bar:last-child {
  width: 65%;
  margin-bottom: 0;
}

/* Row separator for visual rhythm */
.vv-grid-skeleton__row {
  border-bottom: 1px solid var(--vv-color-border-light);
}

/* ── Error Card ────────────────────────────────────────────────────────── */

.vv-grid-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: var(--vv-space-3);
  text-align: center;
  padding: var(--vv-space-8);
}

.vv-grid-error__icon {
  width: 3rem;
  height: 3rem;
  color: var(--vv-color-numeric-negative);
}

.vv-grid-error__message {
  color: var(--vv-color-numeric-negative);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  max-width: 30em;
}

.vv-grid-error__retry {
  margin-top: var(--vv-space-2);
  padding: var(--vv-space-2) var(--vv-space-4);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-interactive);
  background: none;
  border: 1px solid var(--vv-color-interactive);
  border-radius: var(--vv-radius-sm);
  cursor: pointer;
  transition: background var(--vv-transition-fast), color var(--vv-transition-fast);
}

.vv-grid-error__retry:hover {
  background: var(--vv-color-interactive);
  color: var(--vv-color-surface-primary);
}

.vv-grid-error__retry:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — SUMMARY BAR (I4.1)

   Post-submit summary bar: "Tracking [metric] · [chips] · Edit query →".
   Rendered when lifecycle.state ∈ {streaming, ready} (I12.1 renamed loading -> streaming); hidden in empty/editing
   (input header owns those). Light-mode only; tokens-only.

   Also carries a page-scoped .vv-grid-area flex rule so the summary bar and
   the grid-table-wrap are spaced by --vv-space-5. The scope is .vv-igrid-page
   ONLY — grid.html's own .vv-grid-area stays untouched (follows the I1.3
   BEM-alias precedent for .vv-igrid-page children).
   ════════════════════════════════════════════════════════════════════════════ */

.vv-igrid-page .vv-grid-area {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);
}

/* I11.8 — Bar root: hairline frame replaces cream-fill. Per CLAUDE.md
   "Rhythm-Breaking Elements", we compensate for the 1px border with
   calc() padding so the inner row stays on the half-rhythm grid. */
.vv-igrid-summary-bar {
  padding: calc(var(--vv-space-2) - 1px) calc(var(--vv-space-3) - 1px);
  background: var(--vv-color-surface-primary);
  border: 1px solid var(--vv-color-border-light);
  border-radius: var(--vv-radius-sm);
}

.vv-igrid-summary-bar__row {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  flex-wrap: wrap;
  cursor: pointer;
  /* Reset the default <button>-like inset focus; we paint our own outline. */
  outline: none;
}

.vv-igrid-summary-bar__row[aria-disabled="true"] {
  cursor: progress;
}

.vv-igrid-summary-bar__row:hover {
  background: var(--vv-color-surface-secondary);
}

.vv-igrid-summary-bar__row:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

.vv-igrid-summary-bar__metric {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-regular);
  color: var(--vv-color-text-primary);
  line-height: var(--vv-rhythm);
  padding-left: var(--vv-space-2);
}

.vv-igrid-summary-bar__edit-pencil {
  margin-inline-start: auto;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  transition: color var(--vv-transition-fast);
}

.vv-igrid-summary-bar__row:hover .vv-igrid-summary-bar__edit-pencil {
  color: var(--vv-color-interactive);
}

.vv-igrid-summary-bar__progress {
  margin-inline-start: auto;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-line-height-sm);
}

/* I12.4 — Pulsing dot beside summary-bar progress text. The animation
   is suppressed by the existing .vv-igrid-page * reduced-motion block
   shipped in I11.4 — no new !important needed here. */
.vv-igrid-summary-bar__progress-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vv-color-interactive);
  margin-right: var(--vv-space-2);
  vertical-align: middle;
  animation: vv-igrid-progress-pulse 1.2s ease-in-out infinite;
}
@keyframes vv-igrid-progress-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

.vv-igrid-summary-bar__trim-notice {
  margin: var(--vv-space-2) 0 0 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-line-height-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — CONTEXT PANE NEWS BRANCH (I7.2)

   Renders when selectedCell.context.type === 'news'. Article cards use
   neutral-gray structure only (--vv-color-text-tertiary border-left,
   matching .vv-grid-context__methodology house pattern) — no gold / mint /
   magenta / orange / cyan per CLAUDE.md §2 + memory/feedback_color_semantics_strict.md.
   Light-mode only; no dark theme hooks (scope invariant).
   ──────────────────────────────────────────────────────────────────────── */

.vv-igrid-context__window {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  margin: 0 0 var(--vv-space-5) 0;
}

.vv-igrid-context__articles {
  list-style: none;
  padding: 0;
  margin: var(--vv-space-3) 0 var(--vv-space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
}

.vv-igrid-context__article {
  padding: var(--vv-space-3);
  background: var(--vv-color-surface-secondary);
  border-radius: var(--vv-radius-sm);
  border-left: 3px solid var(--vv-color-text-tertiary);
}

.vv-igrid-context__article-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vv-space-2);
  margin-bottom: var(--vv-space-2);
}

.vv-igrid-context__article-publisher {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

.vv-igrid-context__article-date {
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
}

.vv-igrid-context__article-title {
  display: block;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-semibold);
  line-height: var(--vv-line-height-snug);
  color: var(--vv-color-text-primary);
  margin: 0 0 var(--vv-space-2) 0;
}

a.vv-igrid-context__article-title {
  color: var(--vv-color-interactive);
  text-decoration: none;
}

a.vv-igrid-context__article-title:hover,
a.vv-igrid-context__article-title:focus-visible {
  text-decoration: underline;
}

a.vv-igrid-context__article-title:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

.vv-igrid-context__article-excerpt {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-secondary);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   PRE-QUERY HINT (I9.1)

   Visible during the narrow window between submit and the arrival of the first
   streaming payload. Hidden the moment $store.igrid.lifecycle.data becomes
   truthy (see HTML x-show predicate). Mono message + pulsing dot reuse the
   existing @keyframes vv-pulse-dot defined higher in this file; reduced-motion
   users see a static dot.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-igrid-prestart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vv-space-3);
  padding: var(--vv-rhythm-double) var(--vv-space-5);
  min-height: calc(var(--vv-rhythm) * 6);
}

.vv-igrid-prestart__custom-slot {
  min-height: 0;
  margin: 0;
}

.vv-igrid-prestart__message {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-2);
  margin: 0;
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
}

.vv-igrid-prestart__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--vv-radius-full);
  background-color: var(--vv-color-interactive);
  animation: vv-pulse-dot 2s ease-in-out infinite;
}

.vv-igrid-prestart__text {
  /* Inherits font-family / font-size / color from .vv-igrid-prestart__message.
     Kept as a BEM child for future theming hooks. */
}

@media (prefers-reduced-motion: reduce) {
  .vv-igrid-prestart__dot {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EMPTY-STATE HERO (I3.5)

   h1 + subheading (above the shared .vv-igrid-header input) and a
   sample-prompt stack (below it) visible when lifecycle.state === 'empty'.
   Vertical centering: attribute selector on .vv-grid-area's empty-state
   modifier (Road Runner Rule #8: variant attr on component root). Transitions:
   summary bar slide-in on empty → streaming; hero fade handled by Alpine
   x-show (display:none flip) plus an opacity transition on re-entry. The
   reduced-motion override at the bottom zeroes all I3.5 transitions.
   Light-mode only; no color-scheme preference query, no dark theme variant.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-grid-area[data-igrid-empty-state="true"] {
  justify-content: center;
  align-items: center;
  row-gap: var(--vv-space-5);
}

.vv-igrid-empty__heading {
  margin: 0;
  max-width: var(--vv-layout-reading-max);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-2xl);
  font-weight: var(--vv-font-weight-semibold);
  line-height: var(--vv-line-height-2xl);
  color: var(--vv-color-text-primary);
  text-align: center;
  transition: opacity var(--vv-transition-normal);
}

.vv-igrid-empty__subheading {
  margin: 0;
  max-width: var(--vv-layout-reading-max);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-base);
  color: var(--vv-color-text-secondary);
  text-align: center;
  transition: opacity var(--vv-transition-normal);
}

.vv-igrid-empty__prompts {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--vv-layout-reading-max);
  /* I11.6 — tighter row gap so the stack reads as a list of suggestions,
     not a stack of cards. Matches the user-supplied Vespa demo reference. */
  gap: var(--vv-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity var(--vv-transition-normal);
}

.vv-igrid-empty__prompt {
  /* I11.6 — single-line compact suggestion row (was a stacked card with
     SUGGESTED label + chips above metric).
     I11.7 — flex-column so the optional .vv-igrid-empty__prompt-why tagline
     stacks below the .vv-igrid-empty__prompt-line row without disturbing
     the chips+metric+arrow alignment. */
  display: flex;
  flex-direction: column;
  padding: var(--vv-space-2) var(--vv-space-3);
  background: transparent;
  border-radius: var(--vv-radius-sm);
  color: var(--vv-color-text-primary);
  cursor: pointer;
  transition: background-color var(--vv-transition-fast);
  /* min-width:0 propagates down into the line/body so the metric ellipsises
     correctly when the row is narrower than its content. */
  min-width: 0;
}

.vv-igrid-empty__prompt:hover {
  background: var(--vv-color-surface-secondary);
}

.vv-igrid-empty__prompt:focus-visible {
  outline: var(--vv-space-1) solid var(--vv-color-interactive);
  outline-offset: 0;
}

/* I11.7 — flex row holding the chips/metric body + the right-arrow. The
   row is the unit that aligns the arrow to the far right via margin-left:
   auto on the arrow itself. */
.vv-igrid-empty__prompt-line {
  display: flex;
  align-items: center;
  gap: var(--vv-space-2);
  min-width: 0;
}

/* I11.7 — always-visible right-arrow. Idle color is the tertiary text token
   (low contrast, quiet); brightens to interactive blue when its parent row
   is hovered, signalling clickability. aria-hidden on the markup so the
   glyph is decorative-only. */
.vv-igrid-empty__prompt-arrow {
  color: var(--vv-color-text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-base);
  transition: color var(--vv-transition-fast);
}

.vv-igrid-empty__prompt:hover .vv-igrid-empty__prompt-arrow {
  color: var(--vv-color-interactive);
}

/* I11.7 — backend-supplied "why" tagline rendered below the row. Italic +
   tertiary color + xs font tells the eye it's secondary copy. x-show on the
   markup hides it cleanly when the backend omits the field; no fallback
   text is synthesised client-side (the production backend is the only
   authority for this string). padding-left matches the chip's horizontal
   padding so the tagline's first glyph aligns with the chip's text content
   (the "@" of the first ticker), not the chip's bounding-box left edge —
   the latter would create a 1-glyph optical misalignment because the
   chip's rounded-pill corner inset hides the bounding-box left edge. */
.vv-igrid-empty__prompt-why {
  font-family: var(--vv-font-family-sans);
  font-style: italic;
  font-size: var(--vv-font-size-xs);
  color: var(--vv-color-text-tertiary);
  line-height: var(--vv-line-height-base);
  padding-left: var(--vv-space-2);
}

/* I11.6 — body wraps chips + metric in one flowing inline span so they
   read as a single visual sentence ("@HDFC @ICICI NIM trajectory"). Single
   line height, ellipsis on overflow so every prompt has identical row
   height regardless of metric length. */
.vv-igrid-empty__prompt-body {
  display: block;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-base);
  color: var(--vv-color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.vv-igrid-empty__prompt-chip {
  /* I11.6 — small inline pill with @ prefix, interactive blue at low
     opacity for bg + interactive for text. Mono font tightens the badge.
     Marginless per Road Runner Rule #4; sits inline inside __prompt-body. */
  display: inline-block;
  padding: 0 var(--vv-space-2);
  margin-right: var(--vv-space-1);
  background: var(--vv-color-interactive-bg);
  color: var(--vv-color-interactive);
  font-family: var(--vv-font-family-mono);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-semibold);
  border-radius: var(--vv-radius-full);
  vertical-align: baseline;
}

.vv-igrid-empty__prompt-metric {
  /* No display/font overrides — inherits the body's typography so chips and
     metric read as one inline phrase. Margin pulls it slightly off the
     last chip so the eye sees a small separator. */
  margin-left: var(--vv-space-1);
}

.vv-igrid-empty__fallback {
  margin: 0;
  padding: var(--vv-space-3);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  text-align: center;
}

/* Summary-bar opacity transition — a placeholder declaration reserved for
   the follow-up task that migrates .vv-igrid-header's empty → streaming
   flip from Alpine x-show (instant display:none) to x-transition:opacity
   (interpolated fade). Today, x-show fires no transitionend, so the
   focus-management helper in interactive-grid.html drives focus via its
   350ms timer fallback path; the transitionend branch becomes live once
   this transition actually interpolates (post-migration). */
.vv-igrid-summary-bar {
  transition: opacity var(--vv-transition-normal);
}

@media (prefers-reduced-motion: reduce) {
  .vv-igrid-empty__heading,
  .vv-igrid-empty__subheading,
  .vv-igrid-empty__prompts,
  .vv-igrid-empty__prompt,
  .vv-igrid-summary-bar {
    transition-duration: 0ms;
    animation-duration: 0ms;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — ERROR CARD (I9.2)

   Reuses the .vv-grid-error / __icon / __message / __retry rules from the
   Error Card section above (grid.html provenance, tokens-only, light-mode
   compatible). This section owns only the grid-area vertical-centering
   variant so the error card is visually balanced like the I3.5 empty hero.
   Light-mode only; no [data-theme="dark"] fork; no prefers-color-scheme.
   ════════════════════════════════════════════════════════════════════════════ */

.vv-grid-area[data-igrid-error-state="true"] {
  justify-content: center;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — I11.1 STATE LIFECYCLE TRANSITIONS
   Summary-bar entry animation (empty -> streaming only)
   Skeleton entry choreography (hero fade-in gated by data attribute)
   ═══════════════════════════════════════════════════════════════════════ */

.vv-igrid-summary-bar--entering {
  animation: vv-igrid-summary-bar-enter 200ms ease-out;
}

@keyframes vv-igrid-summary-bar-enter {
  from { opacity: 0; transform: translateY(calc(-1 * var(--vv-rhythm))); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-igrid-entry-choreo="hero"] .vv-grid__cell-skeleton {
  animation: vv-skeleton-fade-in 200ms 300ms ease-out backwards;
}

[data-igrid-entry-choreo="none"] .vv-grid__cell-skeleton {
  animation: none;
}

@keyframes vv-skeleton-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vv-igrid-summary-bar--entering { animation: none; }
  [data-igrid-entry-choreo] .vv-grid__cell-skeleton { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   I11.4 — REDUCED-MOTION SCOPED SWEEP

   Single broad rule scoped to .vv-igrid-page descendants. Nullifies all
   transitions and animations on the Interactive Grid surface so motion-
   sensitive users see static state changes only. Per-section reduced-motion
   blocks above (.vv-igrid-summary-bar--entering, hero, etc.) remain — this
   block is a defensive-baseline catch-all for any future component on the
   page that forgets the per-component override.

   aria-live announcements are semantic, not motion — #igrid-live-region
   uses textContent writes only and remains unaffected.

   !important is required because the per-component blocks above use
   transition-duration: 0ms (a property override, not a shorthand reset).
   Without !important, the longhand wins on equal specificity. Scoped to
   .vv-igrid-page, so the !important does not bleed into grid.html.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .vv-igrid-page,
  .vv-igrid-page *,
  .vv-igrid-page *::before,
  .vv-igrid-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — I7.3 + I11.2 EMPTY-DATA EDGE CASES

   Three additions:
     1. .vv-grid__company-sublabel — tertiary text under the company ticker
        in the header, shown when the column is all-empty (every cell is
        ready+null). Driven by iGridIsCompanyAllEmpty().
     2. .vv-igrid__table[data-company-count="1"] — caps the table at the
        --vv-igrid-table-single-max width and left-aligns it inside the
        grid area so a single-company query does not stretch unintentionally
        next to the context pane.
     3. .vv-igrid-context__empty-message — shared paragraph styling for the
        context-pane fallback branches (news-zero-articles, no-citations,
        defensive transcript-empty). Secondary text colour, single-line
        body type, snapped to the 24px baseline grid.
   ═══════════════════════════════════════════════════════════════════════ */

.vv-grid__company-sublabel {
  display: block;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-xs);
  font-weight: var(--vv-font-weight-normal);
  color: var(--vv-color-text-tertiary);
  margin-top: var(--vv-space-1);
  /* Review Minor #1: parent <th> applies text-transform: uppercase +
     letter-spacing for ticker chrome; override here so the lower-emphasis
     sublabel reads as sentence-case status text, not another structural
     label. white-space: normal lets the message wrap when the analyst
     resizes the column narrow. */
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
}

.vv-igrid__table[data-company-count="1"] {
  max-width: var(--vv-igrid-table-single-max);
  margin-left: 0;
  margin-right: auto;
}

.vv-grid__table-wrap[data-company-count="1"] {
  max-width: var(--vv-igrid-table-single-max);
  margin-left: 0;
  margin-right: auto;
}

.vv-igrid-context__empty-message {
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-secondary);
  margin: 0 0 var(--vv-space-5) 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERACTIVE GRID — CONTEXT PANE LOADING & ERROR BRANCHES (I12.5)
   ════════════════════════════════════════════════════════════════════════════ */

.vv-grid-context__loading {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  padding: var(--vv-space-5) var(--vv-space-4);
  align-items: center;
  text-align: center;
}

.vv-grid-context__loading-bar {
  width: 60%;
  height: var(--vv-space-2);
  border-radius: var(--vv-radius-sm);
  background: linear-gradient(
    90deg,
    var(--vv-color-surface-secondary) 25%,
    var(--vv-color-surface-tertiary) 50%,
    var(--vv-color-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: vv-skeleton-pulse 1.5s ease-in-out infinite;
}

.vv-grid-context__loading-headline {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-secondary);
}

.vv-grid-context__loading-subtext {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-tertiary);
}

.vv-grid-context__error {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  padding: var(--vv-space-5) var(--vv-space-4);
}

.vv-grid-context__error-message {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  line-height: var(--vv-line-height-relaxed);
  color: var(--vv-color-text-primary);
}

.vv-grid-context__error-retry {
  align-self: flex-start;
  appearance: none;
  border: 1px solid var(--vv-color-interactive);
  background: var(--vv-color-interactive);
  color: var(--vv-color-surface-primary);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  font-weight: 600;
  padding: var(--vv-space-2) var(--vv-space-3);
  border-radius: var(--vv-radius-sm);
  cursor: pointer;
  transition: filter var(--vv-transition-fast);
}

.vv-grid-context__error-retry:hover {
  filter: brightness(0.92);
}

.vv-grid-context__error-retry:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

/* I12.5 review M1 — match the reduced-motion pattern used by the
   sibling .vv-skeleton (line 2330) and .vv-skeleton-bar (line 11246)
   so AT users who set prefers-reduced-motion see a static gradient bar
   instead of an animated shimmer. The "Still loading…" headline and
   subtext remain the primary signal in either case. */
@media (prefers-reduced-motion: reduce) {
  .vv-grid-context__loading-bar { animation: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   INTERACTIVE GRID — I11.3 PARTIAL-NOTICE + RETRY
   ───────────────────────────────────────────────────────────────────────
   Visible iff meta.companies_requested.length > meta.companies_returned.length
   (failedTickers length > 0). Children of the existing summary-bar block:
   __partial-notice (the <p>) and __partial-retry (the inline <button>).
   Light-mode only — no theme hooks (per Interactive Grid scope).
   ─────────────────────────────────────────────────────────────────────── */

.vv-igrid-summary-bar__partial-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vv-space-3);
  margin: 0;
  padding-top: var(--vv-space-2);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  line-height: var(--vv-line-height-relaxed);
}

.vv-igrid-summary-bar__partial-retry {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--vv-color-interactive);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--vv-transition-fast);
}

.vv-igrid-summary-bar__partial-retry:hover {
  filter: brightness(0.92);
}

.vv-igrid-summary-bar__partial-retry:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
  border-radius: var(--vv-radius-sm);
}