/* ==========================================================================
   FOLIOLYTIC MOBILE 2026 — Unified mobile responsive override layer

   Purpose: fix every mobile-broken section captured in the
            2026-04-29 owner walkthrough recording.

   Strategy: ADDITIVE. Loaded LAST. Targets ONLY <= 640px (mobile)
             and tablet (641-1024px) where useful. Does NOT touch desktop.

   Architecture:
     - Pure CSS-cascade-layer overrides (no !important wars)
     - Mobile-first in spirit; rules scoped by @media
     - Reuses existing --mp-* / --ins-* / --hm-* tokens
     - No dependency on a refactor; sits on top of the spaghetti

   Sections:
     §1  Tokens + reset
     §2  Tap polish (haptic-feel)
     §3  Edge-to-edge cards
     §4  Performance chart (Portfolio Performance, ALL section)
     §5  Pie charts (Allocation, Sector, Net Worth) → donut layout
     §6  Macro Sensitivity (VIX/DXY/10Y) charts
     §7  Holdings Summary table → mobile card-stack
     §8  Performance vs Legendary Investors scatter
     §9  Heat map polish
     §10 Time Machine bottom sheet upgrade
     §11 Container width / horizontal real-estate reclaim
     §12 Drawdown crashes carousel
     §13 Risk Snapshot mini-gauges row
     §14 Foliolytic Portfolio Grade card
     §15 Individual stock holding selector grid
     §16 Achievements badge grid (already good — minor polish)
     §17 Scroll progress hairline (10x bonus)
     §18 Performance: content-visibility for off-screen sections
     §19 Mobile-only "scroll to top" mini-FAB
     §20 Reduced-motion safety
   ========================================================================== */

/* ==========================================================================
   §1  TOKENS + RESET
   ========================================================================== */

:root {
  /* Mobile-specific design tokens — refined for v2 (Apr 30 2026) */
  /* Owner feedback: pulled BACK from full edge-to-edge — wants ~10px breathing
     room, NOT zero gutter. Cards retain a touch of radius for visual style. */
  --fl-gutter-mobile: 10px;         /* outer gutter — kept, never zero */
  --fl-bleed-mobile: 12px;          /* inner card padding mobile */
  --fl-bleed-tablet: 24px;
  --fl-radius-mobile: 12px;         /* keep modest radius on mobile */
  --fl-radius-tablet: 14px;
  --fl-tap-press: 30ms;
  --fl-tap-release: 80ms;
  --fl-chart-aspect-mobile: 16/10;
  --fl-chart-aspect-tablet: 21/9;
  --fl-chart-max-h-mobile: 56dvh;
  --fl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fl-safe-top: env(safe-area-inset-top, 0px);
  --fl-sheet-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  /* Compact chip height — owner wants chips small + tight, not 44px tap-targets */
  --fl-chip-h-mobile: 30px;
  --fl-chip-pad-mobile: 6px 10px;
  --fl-chip-fs-mobile: 12px;
  /* Section padding — restored from 0 (edge-to-edge) to a small gutter */
  --fl-card-pad-mobile-x: 10px;     /* card content left/right inset */
}

body.dark-mode {
  --fl-card-bg-mobile: #0f172a;
  --fl-card-border-mobile: rgba(255, 255, 255, 0.06);
  --fl-divider-mobile: rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) {
  --fl-card-bg-mobile: #ffffff;
  --fl-card-border-mobile: rgba(15, 23, 42, 0.06);
  --fl-divider-mobile: rgba(15, 23, 42, 0.08);
}

/* Universal: prevent accidental horizontal scroll on any viewport.
   Without this, decorative glow effects (.hero-glow-effect) or wider-than-
   viewport elements push the body horizontal scrollbar, which on iPad Pro
   1024px shifts every fixed-position element rightward. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

@media (max-width: 640px) {
  /* iOS smooth momentum */
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   §2  TAP POLISH — Native-feeling press states
   30ms compress / 80ms release = feels haptic
   ========================================================================== */

@media (max-width: 640px) {
  button, .btn, .btn-primary, .btn-secondary,
  [role="button"], .clickable, .perf-chip, .filter-chip,
  .metric-card, .holding-row, .tab, .nav-tab, .nav-item,
  .perf-time-range button, .perf-control-btn,
  a.cta, a.btn,
  .ins-toggle, .ins-pill,
  .preset-chip, .timing-preset {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      transform var(--fl-tap-release) ease-out,
      background-color var(--fl-tap-release) ease-out,
      box-shadow var(--fl-tap-release) ease-out,
      border-color var(--fl-tap-release) ease-out;
    will-change: transform;
  }
  button:active, .btn:active, .btn-primary:active, .btn-secondary:active,
  [role="button"]:active, .clickable:active, .perf-chip:active,
  .filter-chip:active, .tab:active, .nav-item:active,
  a.cta:active, a.btn:active,
  .ins-toggle:active, .ins-pill:active,
  .preset-chip:active, .timing-preset:active {
    transform: scale(0.97);
    transition-duration: var(--fl-tap-press);
  }

  /* DELIBERATELY NO blanket min-height — owner wants compact chips, NOT 44px
     touch targets that look bloated. Real touch-target ergonomics use vertical
     padding, not a hardcoded min-height. The original site had cleaner chips.
     Specific tap-targets like the bottom-sheet handle still get min-height
     where it matters individually. */
}

/* ==========================================================================
   §3  EDGE-TO-EDGE CARDS
   On mobile, every dashboard card breaks out of body padding
   to use full screen width — owner specifically asked for this.
   ========================================================================== */

@media (max-width: 640px) {
  /* OUTER CONTAINER: Use a small gutter (10px), not 0. Owner explicitly asked
     for "a couple pixels on the left and right just to have a tiny bit of style".
     Apply only to the main content container, not to body. */
  main, #app-main, .main-container, .app-container, .lp-container,
  .container, body > .container {
    padding-left: var(--fl-gutter-mobile);
    padding-right: var(--fl-gutter-mobile);
  }

  /* Major dashboard sections: keep gentle radius + thin border, NOT edge-to-edge.
     The fully-bled-to-screen-edges look read as "broken" to the owner.
     Modest 12px radius + small horizontal margin = refined fintech aesthetic. */
  .perf-card,
  #portfolio-performance,
  #drawdown-analysis,
  #consistency-timing,
  #market-regime,
  #tail-risk,
  #diversification,
  #advanced-metrics,
  .heatmap-section,
  .insights-section,
  .holdings-summary-section,
  .net-worth-section,
  .legendary-section,
  .grade-section,
  .achievements-section,
  .allocation-section,
  .perf-vs-legendary-card,
  .holdings-summary-card,
  main > .card,
  main > section.card,
  main > section[class*="-card"] {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--fl-radius-mobile);
    /* Restore borders if any */
  }

  /* Section content uses tighter, but readable padding */
  .perf-card-body, .perf-chart-area,
  .insights-card-body, .heatmap-card-body,
  .holdings-summary-body, .legendary-body,
  .allocation-body, .grade-body,
  .section-body, .card-body {
    padding-left: var(--fl-card-pad-mobile-x);
    padding-right: var(--fl-card-pad-mobile-x);
  }

  /* Section titles: minor inset */
  h2.section-title,
  .perf-header,
  .perf-header-title,
  .heatmap-title-row,
  .legendary-title-row {
    padding-left: var(--fl-card-pad-mobile-x);
    padding-right: var(--fl-card-pad-mobile-x);
  }
}

/* ==========================================================================
   §4  PERFORMANCE CHART — Portfolio Performance (ALL/Stocks/Crypto)
   Owner: "this is terrible, huge and vertical, tooltips half cut off"
   Fix: aspect-ratio: 16/10 + edge-to-edge + clamped tooltips
   ========================================================================== */

@media (max-width: 640px) {
  /* Chart-area parent: kill its 20px padding so canvas hits screen edges */
  .perf-chart-area {
    padding: 0 !important;
  }

  /* The .bg-white inner shell: also kill its 16px padding + side borders */
  .perf-chart-area .bg-white {
    padding: 8px 0 4px 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body.dark-mode .perf-chart-area .bg-white {
    background: transparent !important;
  }

  /* THE chart canvas: aspect ratio + max viewport height */
  /* Chart.js with maintainAspectRatio:false will follow these dimensions */
  #performanceChart {
    width: 100% !important;
    height: 56dvh !important;
    max-height: 56dvh !important;
    min-height: 320px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }

  /* Time-range buttons (1M/6M/1Y/3Y/5Y/ALL): full width row */
  .perf-time-range,
  .time-range-buttons {
    display: flex !important;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--fl-bleed-mobile);
    margin: 8px 0;
  }
  .perf-time-range::-webkit-scrollbar,
  .time-range-buttons::-webkit-scrollbar {
    display: none;
  }
  .perf-time-range button,
  .time-range-buttons button {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* Filter chips (Full Portfolio / Stocks / Crypto / Cost Basis / S&P / All World)
     One row of horizontally scrollable chips, no wrap awkwardness */
  .perf-filter-row,
  .perf-control-group:has(.perf-chip) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 var(--fl-bleed-mobile);
  }

  .perf-chip, .filter-chip {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
  }

  /* Legend row: wrap nicely */
  .perf-legend,
  .perf-legend-row,
  #performanceLegend {
    flex-wrap: wrap;
    gap: 8px 14px !important;
    padding: 0 var(--fl-bleed-mobile);
    font-size: 11px;
  }

  /* + Holdings dropdown trigger: bigger tap target */
  .perf-holdings-trigger,
  .holdings-dropdown-button {
    min-height: 36px;
    padding: 8px 12px;
  }

  /* TOOLTIPS — clamp to viewport. Chart.js external tooltip must respect this. */
  /* Custom Chart.js tooltip element gets this class via mobileEnhancements.js */
  .fl-chart-tooltip-mobile {
    position: fixed !important;
    left: var(--fl-bleed-mobile) !important;
    right: var(--fl-bleed-mobile) !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    bottom: calc(80px + var(--fl-safe-bottom)) !important;
    top: auto !important;
    transform: none !important;
    z-index: 100;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }
}

/* Tablet: wider but still mobile-first chart */
@media (min-width: 641px) and (max-width: 1024px) {
  #performanceChart {
    height: 50dvh !important;
    max-height: 460px !important;
  }
}

/* ==========================================================================
   §5  PIE CHARTS → DONUT + HORIZONTAL LEGEND TABLE
   Targets: portfolioPieChart, sectorPieChart, netWorthPieChart, netWorthSectorPieChart
   Owner: "tiny circle with huge labels overflowing, totally redesign"
   2026 fintech consensus: donut + sortable legend table below
   ========================================================================== */

@media (max-width: 640px) {
  /* Layout becomes column with pie ON TOP, legend table BELOW */
  .pie-chart-layout {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
    padding: 0 var(--fl-bleed-mobile);
  }

  /* Pie container: actually-sensible mobile dimensions */
  .pie-chart-container {
    flex: none !important;
    height: auto !important;
    min-height: 240px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 1;
    overflow: visible !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 340px !important;
  }

  /* Each pie canvas: square, capped, centered */
  .pie-chart-container canvas,
  #portfolioPieChart,
  #sectorPieChart,
  #netWorthPieChart,
  #netWorthSectorPieChart {
    width: 100% !important;
    height: 100% !important;
    max-width: min(340px, 80vw) !important;
    max-height: min(340px, 80vw) !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Legend list: visible, full-width, scrollable if very long */
  .pie-legend-list,
  #pieLegendList,
  #sectorLegendList,
  #netWorthLegendList,
  #netWorthSectorLegendList {
    flex: none !important;
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Native looking divider list */
    border-top: 1px solid var(--fl-divider-mobile);
    padding-top: 8px !important;
  }

  /* Each legend row: compact, tappable, two-column (label | %) */
  .pie-legend-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 9px 4px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;          /* allow long ETF names to wrap */
    border-bottom: 1px solid var(--fl-divider-mobile);
    min-height: 38px;
  }
  .pie-legend-item:last-child {
    border-bottom: 0;
  }

  .pie-legend-color {
    width: 10px !important;
    height: 10px !important;
    margin-right: 0 !important;
    flex-shrink: 0;
    border-radius: 2px;
  }

  .pie-legend-text {
    flex: 1;
    font-size: 13px !important;
    line-height: 1.3 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    /* split label and value on the legend item */
  }

  /* Sector legend group (collapsible by sector) */
  .sector-legend-group {
    margin-bottom: 4px;
  }
  .sector-legend-header {
    padding: 10px 4px !important;
    min-height: 40px;
  }
  .sector-legend-name {
    font-size: 13px !important;
  }
  .sector-legend-pct {
    font-size: 13px !important;
  }
  .sector-legend-holdings {
    padding: 4px 0 4px 16px !important;
  }
  .sector-holding-item {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
}

/* Tablet pie sizing */
@media (min-width: 641px) and (max-width: 1024px) {
  .pie-chart-container {
    height: 360px !important;
  }
  #portfolioPieChart, #sectorPieChart,
  #netWorthPieChart, #netWorthSectorPieChart {
    max-width: 360px !important;
    max-height: 360px !important;
  }
}

/* ==========================================================================
   §6  MACRO SENSITIVITY CHARTS — VIX/DXY/10Y Rate Relationship
   Owner: "off the card, charts are broken"
   Root cause: macro-rel-canvas has fixed 72px height that makes chart overflow
               when squeezed, plus tiny chart inside doesn't redraw on resize.
   Fix: full-width grid, taller on mobile, no fixed pixel widths
   ========================================================================== */

@media (max-width: 640px) {
  .macro-rel-card {
    margin: 0;
    border-radius: 0;
    padding: 14px var(--fl-bleed-mobile) !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .macro-rel-charts {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .macro-rel-mini {
    width: 100%;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
  }

  .macro-rel-mini-head {
    padding: 0 !important;
  }
  .macro-rel-mini-label {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
  .macro-rel-mini-value {
    font-size: 11px !important;
  }

  /* Canvas: actually fill available width */
  .macro-rel-canvas {
    width: 100% !important;
    height: 88px !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 6px !important;
  }
  /* The :nth-child(1) and :nth-child(2) hardcoded heights in metrics-panel.css
     get overridden here as we want both R^2 and Correlation panels uniform */
  .macro-rel-charts .macro-rel-canvas:nth-child(1),
  .macro-rel-charts .macro-rel-canvas:nth-child(2) {
    height: 88px !important;
  }

  /* KPIs row (Moves against VIX / Explains 0.62 etc.): stack on mobile */
  .macro-rel-kpis {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
  }
  .macro-rel-kpi {
    font-size: 11px !important;
  }
  .macro-rel-kpi-val {
    font-size: 11px !important;
  }

  /* Title and subtitle */
  .macro-rel-title {
    font-size: 14px !important;
  }
  .macro-rel-top {
    flex-wrap: wrap !important;
  }
}

/* ==========================================================================
   §7  HOLDINGS SUMMARY TABLE → MOBILE CARD STACK
   Owner: "first column cut off, percentage signs cropped"
   Pattern (Robinhood/Public): card per row, ticker + name + total value top-line,
                               qty/price + gain% second line, tap to expand.
   ========================================================================== */

@media (max-width: 700px) {
  /* Make the section card edge-to-edge — confirmed selectors per holdingsTable.js */
  .holdings-summary-card,
  .holdings-summary-section,
  /* Holdings Summary container is a .portfolio-container.p-6 with h2 heading */
  .portfolio-container.p-6:has(.portfolio-table) {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .portfolio-container.p-6:has(.portfolio-table) {
    padding: 14px 0 !important;
  }
  .portfolio-container.p-6:has(.portfolio-table) > h2 {
    padding-left: var(--fl-bleed-mobile) !important;
    padding-right: var(--fl-bleed-mobile) !important;
  }

  /* The original <table> still exists for desktop. On mobile we hide the table
     and show a card-stack rendered by mobileEnhancements.js. If JS hasn't
     run yet, fall back to a horizontal-scroll table with sticky-left ticker. */
  .table-wrapper,
  .holdings-summary-card .holdings-table-wrap,
  .holdings-summary-section .holdings-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, black 92%, rgba(0,0,0,0.4));
    -webkit-mask-image: linear-gradient(to right, black 92%, rgba(0,0,0,0.4));
  }

  .portfolio-table,
  .holdings-summary-card table,
  .holdings-summary-section table {
    font-size: 12px;
  }

  .portfolio-table th:first-child,
  .portfolio-table td:first-child,
  .holdings-summary-card table th:first-child,
  .holdings-summary-card table td:first-child,
  .holdings-summary-section table th:first-child,
  .holdings-summary-section table td:first-child {
    position: sticky;
    left: 0;
    background: var(--fl-card-bg-mobile);
    z-index: 2;
    box-shadow: 1px 0 0 var(--fl-divider-mobile);
    padding-left: var(--fl-bleed-mobile);
    min-width: 64px;
  }

  /* When mobileEnhancements.js has injected card-stack, hide just the table itself */
  /* (The .table-wrapper still holds our injected .fl-holdings-cards inside it.) */
  body.fl-holdings-cards-active .portfolio-table,
  body.fl-holdings-cards-active .holdings-summary-card table,
  body.fl-holdings-cards-active .holdings-summary-section table {
    display: none !important;
  }
  /* Also kill the wrapper's mask + horizontal scroll when cards are showing */
  body.fl-holdings-cards-active .table-wrapper {
    overflow-x: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  /* The injected mobile card-stack styles (see mobileEnhancements.js) */
  .fl-holdings-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .fl-holding-card {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px var(--fl-bleed-mobile);
    border-bottom: 1px solid var(--fl-divider-mobile);
    align-items: center;
    cursor: pointer;
    transition:
      background-color var(--fl-tap-release) ease-out,
      transform var(--fl-tap-release) ease-out;
  }
  .fl-holding-card:active {
    background-color: rgba(59,130,246,0.06);
    transform: scale(0.998);
    transition-duration: var(--fl-tap-press);
  }
  .fl-holding-card__sym {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--mp-text, #f8fafc);
  }
  .fl-holding-card__val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 14px;
    text-align: right;
  }
  .fl-holding-card__name {
    font-size: 11px;
    color: var(--mp-muted, #94a3b8);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fl-holding-card__gain {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    text-align: right;
    font-weight: 600;
  }
  .fl-holding-card__gain--up   { color: #10b981; }
  .fl-holding-card__gain--down { color: #ef4444; }
  .fl-holding-card__gain--flat { color: var(--mp-muted, #94a3b8); }

  .fl-holding-card[data-expanded="true"] {
    background-color: rgba(59,130,246,0.04);
  }
  .fl-holding-card__detail {
    grid-column: 1 / -1;
    display: none;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--fl-divider-mobile);
    font-size: 12px;
    color: var(--mp-text-secondary, #cbd5e1);
  }
  .fl-holding-card[data-expanded="true"] .fl-holding-card__detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
  }
  .fl-holding-card__detail-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .fl-holding-card__detail-label {
    color: var(--mp-muted, #94a3b8);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .fl-holding-card__detail-value {
    font-variant-numeric: tabular-nums;
  }
}

/* ==========================================================================
   §8  PERFORMANCE vs LEGENDARY INVESTORS
   Owner: "super scrunched big vertical, hover tooltips cut off"
   Fix: allow overflow OUTSIDE the card on mobile, fixed aspect ratio
   ========================================================================== */

@media (max-width: 640px) {
  /* The container that holds the legendary scatter chart */
  .portfolio-container.p-6:has(#investorChart),
  .perf-vs-legendary-card,
  .legendary-section,
  #legendaryPerformance,
  .legendary-perf-card {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;
  }

  /* THE actual chart container — has inline height: 600px which is the root cause */
  /* of "huge and vertical" complaint. Override the inline style. */
  #investorChart {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
    max-height: 60dvh !important;
    min-height: 360px !important;
    border-radius: 0 !important;
    margin: 8px 0 0 !important;
  }

  /* Comparison highlight box (over X years you achieved...): edge-bleed */
  .comparison-highlight {
    margin-left: var(--fl-bleed-mobile) !important;
    margin-right: var(--fl-bleed-mobile) !important;
    padding: 12px 14px !important;
  }
  .comparison-highlight p.text-lg {
    font-size: 15px !important;
  }
  .comparison-highlight p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Chart description / heading goes inside bleed */
  .portfolio-container:has(#investorChart) h2.section-title,
  .perf-vs-legendary-card h2,
  .legendary-section h2,
  .legendary-section .description {
    padding-left: var(--fl-bleed-mobile);
    padding-right: var(--fl-bleed-mobile);
    margin-bottom: 12px !important;
  }

  /* Legend below scatter: wraps */
  .legendary-legend, .legendary-perf-legend {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 0 var(--fl-bleed-mobile);
    font-size: 11px;
  }

  /* INDIVIDUAL STOCK CHART (Time Machine) — has inline height: 400px */
  /* Inside #individualStockAnalysisSection container */
  #individualStockAnalysisSection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px 0 !important;
    border-radius: 0 !important;
  }
  #individualStockAnalysisSection .portfolio-container,
  #individualStockAnalysisSection > .p-6 {
    padding: 0 !important;
  }
  #individualStockChart {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
    max-height: 56dvh !important;
    min-height: 320px !important;
  }
  /* Individual stock filter chips above chart */
  #individualStockAnalysisSection .perf-control-group {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 0 var(--fl-bleed-mobile);
  }
  #individualStockStats {
    margin: 12px var(--fl-bleed-mobile) 0 !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   §9  HEAT MAP — Polish + sticky-left year label
   Owner: "2018 stuck on left, would be better moved over"
          "CAGR vs Arith 12.4% / 19.3% on different lines"
   ========================================================================== */

@media (max-width: 640px) {
  /* CAGR vs Arith stat — make horizontal pair instead of stacked */
  .hm-cagr-vs-arith,
  .ins-cagr-arith,
  .ins-cagr-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: baseline;
  }
  .hm-cagr-vs-arith .label,
  .ins-cagr-arith .label {
    font-size: 10px !important;
    letter-spacing: 0.06em;
  }

  /* Heat map table: sticky-left year column so 2018 isn't lost */
  .ins-grid-wrap,
  .hm-grid-wrap,
  .heatmap-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .ins-grid table th:first-child,
  .ins-grid table td:first-child,
  .hm-grid th:first-child,
  .hm-grid td:first-child,
  .heatmap-grid th:first-child,
  .heatmap-grid td:first-child {
    position: sticky;
    left: 0;
    background: var(--fl-card-bg-mobile);
    z-index: 2;
    box-shadow: 1px 0 0 var(--fl-divider-mobile);
  }

  /* AVG row sticky to bottom */
  .hm-grid tfoot,
  .ins-grid tfoot,
  .heatmap-grid tfoot {
    position: sticky;
    bottom: 0;
    background: var(--fl-card-bg-mobile);
  }

  /* Heat map cell sizing — slightly tighter so more months visible */
  .hm-cell, .ins-cell, .heatmap-cell {
    min-width: 50px !important;
    font-size: 10px !important;
    padding: 6px 4px !important;
  }

  /* Best Month / Worst Month / AVG Month tile row */
  .ins-summary-row,
  .hm-summary-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 var(--fl-bleed-mobile) !important;
  }

  /* Hot months / longest streak / avg up vs down — 2 col on mobile */
  .ins-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 var(--fl-bleed-mobile) !important;
  }
}

/* ==========================================================================
   §10  TIME MACHINE BOTTOM SHEET — proper mobile pattern
   Owner: "doesn't even work on mobile" + buttons clipped at top
   Build a real bottom-sheet with grab handle, snap-points, swipe-down dismiss
   ========================================================================== */

@media (max-width: 640px) {
  /* The Time Machine FAB itself (clock icon) */
  .time-machine-fab,
  #timeMachineFab,
  .tm-fab {
    bottom: calc(16px + var(--fl-safe-bottom)) !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 4px 16px rgba(59,130,246,0.4);
  }

  /* Time Machine sheet: full bottom-sheet treatment */
  .time-machine-panel,
  .time-machine-sheet,
  #timeMachinePanel,
  .tm-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: var(--fl-sheet-shadow);
    padding-bottom: calc(20px + var(--fl-safe-bottom)) !important;
    /* Allow panel to grow up to ~75% of viewport */
    max-height: 75dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* The grab handle is added via ::before */
  }

  /* Grab handle at top of sheet */
  .time-machine-panel::before,
  .time-machine-sheet::before,
  #timeMachinePanel::before,
  .tm-panel::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--fl-divider-mobile);
    margin: 8px auto 14px;
    flex-shrink: 0;
  }

  /* Header row (Time Machine title + Now/Compare/Pause buttons) */
  .tm-header,
  .time-machine-header,
  .tm-control-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 0 14px 12px 14px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .tm-header h3, .tm-header .tm-title,
  .time-machine-header h3, .time-machine-header .title {
    font-size: 16px !important;
    flex: 0 0 100%;
    margin: 0 !important;
    font-weight: 700;
  }

  .tm-action-buttons,
  .tm-actions {
    display: flex !important;
    gap: 8px !important;
    flex: 1;
    flex-wrap: wrap;
  }

  .tm-action-buttons button,
  .tm-actions button {
    flex: 1;
    min-width: 80px;
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Date selector + slider area */
  .tm-date-row, .tm-date-display {
    padding: 0 14px !important;
    margin-bottom: 12px !important;
  }
  .tm-slider, #timeMachineSlider, .tm-scrubber {
    margin: 4px 14px 12px !important;
    width: calc(100% - 28px) !important;
  }

  /* Preset chips row (YTD / 1Y Ago / 2Y Ago / 5Y Ago / First Trade) */
  .tm-preset-chips,
  .tm-presets {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 14px 8px !important;
    scroll-snap-type: x proximity;
  }
  .tm-preset-chips::-webkit-scrollbar,
  .tm-presets::-webkit-scrollbar {
    display: none;
  }
  .tm-preset-chip,
  .preset-chip,
  .tm-presets button {
    flex: 0 0 auto;
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Bottom value row (VALUE / HOLDINGS / P&L) */
  .tm-bottom-row,
  .tm-value-row,
  .tm-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--fl-divider-mobile);
    background: var(--fl-card-bg-mobile);
  }
  .tm-bottom-row > *,
  .tm-value-row > *,
  .tm-stats-row > * {
    text-align: center;
  }
}

/* ==========================================================================
   §11  CONTAINER WIDTH RECLAIM
   Owner: "we lose so much empty space on the left and right"
   Apply to ALL major content containers, not just specific cards.
   ========================================================================== */

@media (max-width: 640px) {
  /* Fluid containers — kill arbitrary padding on mobile */
  .max-w-full, .max-w-\[1400px\], .max-w-\[1200px\],
  .lp-container, .container,
  main.app-main, main.lp-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* The legacy Tailwind utility `mx-auto px-4 sm:px-6 lg:px-8` on <main> */
  main.mx-auto.px-4,
  main[class*="px-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Section headings stay readable: only the BLEED gets removed,
     the heading itself gets back its padding */
  h2.section-title {
    margin-left: var(--fl-bleed-mobile) !important;
    margin-right: var(--fl-bleed-mobile) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ==========================================================================
   §12  DRAWDOWN CRASHES CAROUSEL
   Owner: "all messed up, all crunched up SVG things"
   Stack of SVG cards (Great Depression, Black Monday, Dot-com, GFC, COVID, etc.)
   that should display as a swipeable horizontal carousel on mobile.
   ========================================================================== */

@media (max-width: 640px) {
  .crash-cards-stack,
  .crash-cards-carousel,
  .drawdown-crashes-stack,
  .drawdown-event-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 var(--fl-bleed-mobile) 8px !important;
    margin: 0 !important;
    /* Reset any 'position: absolute' that comes from desktop stack mode */
    position: relative !important;
  }
  .crash-cards-stack::-webkit-scrollbar,
  .crash-cards-carousel::-webkit-scrollbar,
  .drawdown-crashes-stack::-webkit-scrollbar,
  .drawdown-event-cards::-webkit-scrollbar {
    display: none;
  }

  .crash-card,
  .drawdown-event-card {
    flex: 0 0 78% !important;
    scroll-snap-align: start;
    transform: none !important;       /* override any stack-rotation transform */
    margin: 0 !important;
    position: relative !important;
    border-radius: 12px !important;
  }

  /* "Great Depression" detail panel: full-bleed below carousel */
  .crash-detail,
  .drawdown-event-detail,
  #crashDetail {
    margin: 12px 0 0 !important;
    border-radius: 0 !important;
    padding: var(--fl-bleed-mobile) !important;
  }
}

/* ==========================================================================
   §13  RISK SNAPSHOT — 4-gauge mini row
   Sharpe / Sortino / Diversification / Vol gauges in a row that's cramped
   ========================================================================== */

@media (max-width: 640px) {
  .risk-snapshot,
  .risk-snapshot-row,
  .mini-gauges-row,
  .risk-snapshot-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 var(--fl-bleed-mobile) !important;
  }

  .mini-gauge,
  .risk-snapshot-gauge,
  .risk-snapshot-item {
    padding: 12px 10px !important;
  }

  .mini-gauge .value,
  .risk-snapshot-value {
    font-size: 18px !important;
  }
  .mini-gauge .label,
  .risk-snapshot-label {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ==========================================================================
   §14  FOLIOLYTIC PORTFOLIO GRADE CARD
   Owner: "grade should be over the icon, scrunched up to left"
   Layout: stack persona pills, big grade circle on TOP of icon, centered
   ========================================================================== */

@media (max-width: 640px) {
  .grade-card,
  .portfolio-grade-card,
  #foliolytic-portfolio-grade {
    text-align: center !important;
    padding: 20px var(--fl-bleed-mobile) !important;
  }

  /* Persona switcher (Fundamentalist / Boomer / YOLO / Quant) */
  .grade-personas,
  .persona-switcher,
  .persona-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
  }
  .persona-tab,
  .persona-pill,
  .grade-personas button {
    padding: 10px 8px !important;
    font-size: 12px !important;
    min-height: 40px;
    justify-content: center !important;
    text-align: center !important;
  }

  /* The grade circle (C-, B+, A, etc.) overlaid on the icon */
  .grade-display-wrap,
  .grade-circle-wrap,
  .grade-icon-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    position: relative;
  }
  .grade-circle,
  .grade-letter-circle {
    margin: 0 auto !important;
    z-index: 2;
  }
  .grade-icon, .grade-mini-chart {
    margin: -8px auto 0 !important;
    opacity: 0.55;
    z-index: 1;
  }

  /* Description below */
  .grade-description,
  .grade-tagline {
    text-align: center !important;
    padding: 0 !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   §15  INDIVIDUAL STOCK HOLDING SELECTOR
   Owner: "could be a grid of 4 tickers instead of 2 to save room"
   ========================================================================== */

@media (max-width: 640px) {
  .holding-selector-grid,
  .stock-selector-grid,
  #individualStockSelector {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;  /* 3-col on phone — 4 too cramped at 360px width */
    gap: 6px !important;
    padding: 0 var(--fl-bleed-mobile) !important;
  }
  .holding-selector-item,
  .stock-selector-tile {
    padding: 10px 6px !important;
    font-size: 12px !important;
    min-height: 52px !important;
    border-radius: 8px !important;
  }
  .holding-selector-symbol {
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  .holding-selector-type {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
  }
}

/* On phones >=410px, 4-col fits */
@media (min-width: 410px) and (max-width: 640px) {
  .holding-selector-grid,
  .stock-selector-grid,
  #individualStockSelector {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ==========================================================================
   §16  ACHIEVEMENTS GRID — minor polish
   Owner already approved this section; just kill horizontal padding
   ========================================================================== */

@media (max-width: 640px) {
  .achievements-card,
  #achievementsCard,
  .achievements-section {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .achievements-grid,
  .badge-grid,
  .achievement-icons-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    padding: 0 var(--fl-bleed-mobile) !important;
  }
  .achievement-badge,
  .badge {
    padding: 8px !important;
  }
}

/* ==========================================================================
   §17  SCROLL PROGRESS HAIRLINE — 10x bonus
   Thin animated bar at top of viewport showing reading progress
   Pure CSS using scroll-timeline (Chrome 115+, Firefox 145+, Safari 26+)
   Falls back gracefully on older browsers (just no animation)
   ========================================================================== */

.fl-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9998;
  pointer-events: none;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ef4444);
  /* Without scroll-timeline support, the bar stays at scaleX(0) — invisible */
  transform: scaleX(0);
}

@supports (animation-timeline: scroll(root)) {
  .fl-scroll-progress {
    animation: fl-scroll-progress linear;
    animation-timeline: scroll(root block);
    animation-fill-mode: both;
  }
  @keyframes fl-scroll-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* Hide on print and reduced motion */
@media print, (prefers-reduced-motion: reduce) {
  .fl-scroll-progress { display: none; }
}

/* ==========================================================================
   §18  CONTENT-VISIBILITY — Performance gain on long page
   Off-screen sections skip layout/paint until close to viewport.
   Browser support: Chrome/Edge 85+, Safari 18+, Firefox 125+ (all baseline 2025)
   contain-intrinsic-size: gives the scrollbar correct height before render
   ========================================================================== */

@media (min-width: 0px) {  /* always-on for performance */
  /* Apply to obvious section-shaped containers below the fold */
  #portfolio-performance,
  #drawdown-analysis,
  #consistency-timing,
  #market-regime,
  #tail-risk,
  #diversification,
  #advanced-metrics,
  .heatmap-section,
  .insights-section,
  .holdings-summary-section,
  .net-worth-section,
  .legendary-section,
  .grade-section,
  .achievements-section,
  .allocation-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }
}

/* ==========================================================================
   §19  MOBILE-ONLY SCROLL-TO-TOP MINI-FAB
   Appears after >50% scroll, fades out at top, anchored above iOS home bar
   ========================================================================== */

@media (max-width: 640px) {
  .fl-scroll-top-fab {
    position: fixed;
    bottom: calc(80px + var(--fl-safe-bottom));   /* above Time Machine FAB */
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: var(--mp-bg, #0f172a);
    color: var(--mp-accent, #60a5fa);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 220ms ease-out, transform 220ms ease-out;
    z-index: 9990;
    cursor: pointer;
  }
  body:not(.dark-mode) .fl-scroll-top-fab {
    background: #ffffff;
    color: #3b82f6;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  }
  .fl-scroll-top-fab[data-visible="true"] {
    opacity: 0.85;
    transform: translateY(0);
    pointer-events: auto;
  }
  .fl-scroll-top-fab:active {
    transform: scale(0.95);
    transition-duration: var(--fl-tap-press);
  }
  @media (prefers-reduced-motion: reduce) {
    .fl-scroll-top-fab { transition: none; }
  }
}

/* Hide the FAB on desktop entirely */
@media (min-width: 641px) {
  .fl-scroll-top-fab { display: none !important; }
}

/* ==========================================================================
   §20  REDUCED-MOTION SAFETY OVERRIDES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fl-scroll-progress { animation: none !important; }
}

/* ==========================================================================
   §21  EXTRA: PULL-TO-REFRESH AFFORDANCE
   Renders only when user starts pulling down past 0px
   ========================================================================== */

@media (max-width: 640px) {
  .fl-pull-refresh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 9997;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: height 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .fl-pull-refresh[data-state="pulling"] {
    height: 60px;
  }
  .fl-pull-refresh[data-state="ready"] {
    height: 70px;
  }
  .fl-pull-refresh[data-state="refreshing"] {
    height: 60px;
    pointer-events: auto;
  }
  .fl-pull-refresh-spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--mp-accent, #60a5fa);
    border-top-color: transparent;
    margin-bottom: 14px;
    transition: transform 200ms;
  }
  .fl-pull-refresh[data-state="pulling"] .fl-pull-refresh-spinner {
    transform: rotate(0deg);
  }
  .fl-pull-refresh[data-state="ready"] .fl-pull-refresh-spinner {
    transform: rotate(180deg);
  }
  .fl-pull-refresh[data-state="refreshing"] .fl-pull-refresh-spinner {
    animation: fl-spin 800ms linear infinite;
  }
  @keyframes fl-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
}

/* ==========================================================================
   §22  V2 REFINEMENTS — Apr 30 2026 — Owner walkthrough video feedback
   "OK start but some mobile styling still broken"
   "you've gone way extreme in the other direction" (re: edge-to-edge)
   "buttons how they're all huge... not symmetrical and small and clean"
   "info circles are all stretched"
   "risk snapshot's all broken... cards extending off to the right"
   "you didn't deep dive and actually check everything"
   ========================================================================== */

/* §22.1  Compact chips — pre-existing aesthetic, not 44px tap targets */

@media (max-width: 640px) {
  /* The big offenders: Show row chips (Full Portfolio / Stocks / Crypto / Cost Basis),
     VS row pills (S&P 500 / All World), display chips (Include Dividends / Profit /
     Dividends Earned / % View / Normalize Start), Holdings dropdown trigger.
     ALL of these were rendering at 44px+ tall (touch-target rule).
     Pull them down to ~30px / 12px font / 6px-10px padding. */
  .perf-chip,
  .filter-chip,
  .perf-control-group .perf-chip,
  .perf-control-group button,
  .perf-time-range button,
  .time-range-buttons button,
  .perf-holdings-trigger,
  .holdings-dropdown-button,
  /* legendary-investors filter chips */
  #investorChart ~ * .perf-chip,
  /* heat map insights toggles */
  .ins-toggle, .ins-pill,
  /* time-machine preset chips */
  .preset-chip, .timing-preset, .tm-preset-chip {
    min-height: 0 !important;
    height: auto !important;
    padding: var(--fl-chip-pad-mobile) !important;
    font-size: var(--fl-chip-fs-mobile) !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
  }

  /* Persona pills (Fundamentalist / Boomer / YOLO / Quant) — keep slightly
     bigger because they have icons inside */
  .persona-tab, .persona-pill, .grade-personas button {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* §22.2  Info icon (i) — was stretching to 44×N because of blanket
   min-height: 44px button rule. Lock it back to 16×16 round. */

@media (max-width: 640px) {
  .metric-info-btn,
  button.info-btn,
  .info-circle,
  button[aria-label*="info" i] {
    min-height: 0 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 10px !important;
    border-radius: 50% !important;
  }
  /* The info icon never grows on touch */
  .metric-info-btn:active,
  button.info-btn:active,
  .info-circle:active {
    transform: none !important;
  }
}

/* §22.3  Overview-panel grid — Benchmark Battle / Risk Snapshot / Real Returns
   Owner: "all extending off to the right. real returns. you didn't deep dive"
   The 3-col grid on desktop was forced to 1-col on mobile but the panels
   themselves had INNER content overflowing. Fix the inner widths. */

@media (max-width: 640px) {
  /* Force overview-panel parent grid to single-column on mobile */
  .overview-grid-3col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .overview-panel {
    padding: 14px 12px !important;
    border-radius: var(--fl-radius-mobile) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;        /* contain any internal overflow */
  }
  .overview-panel .panel-header {
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
  .overview-panel .panel-title {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* §22.3a  BENCHMARK BATTLE — bars overflowing right */
  .benchmark-battle .benchmark-rows {
    display: grid !important;
    grid-template-columns: 36px 1fr auto !important;
    gap: 6px 10px !important;
    align-items: center !important;
  }
  .benchmark-row.you,
  .benchmark-row.spy,
  .benchmark-row.vt {
    display: contents !important;        /* let parent grid lay out children */
  }
  .benchmark-row .bm-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--mp-muted, #94a3b8) !important;
  }
  .benchmark-row .bm-bar-wrap {
    height: 8px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.05) !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .benchmark-row .bm-bar {
    height: 100% !important;
    border-radius: 4px !important;
    transition: width 280ms ease-out !important;
  }
  .benchmark-row .bm-bar.positive { background: linear-gradient(90deg, #10b981, #34d399) !important; }
  .benchmark-row .bm-bar.negative { background: linear-gradient(90deg, #ef4444, #f87171) !important; }
  .benchmark-row .bm-value {
    font-size: 12px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
    min-width: 56px !important;
    white-space: nowrap !important;
  }
  .benchmark-row .bm-delta {
    display: none !important;            /* the ✓/✗ deltas crowd mobile */
  }
  .benchmark-verdict {
    margin-top: 10px !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  /* §22.3b  RISK SNAPSHOT — 4 gauges in 2x2 grid (was overflowing 4-across) */
  .risk-snapshot .panel-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .risk-snapshot .panel-icon { display: flex !important; }
  .risk-snapshot .risk-gauges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .risk-snapshot .mini-gauge,
  .risk-snapshot .risk-snapshot-gauge,
  .risk-snapshot > .risk-gauges > * {
    padding: 10px 8px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.025) !important;
    text-align: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .risk-snapshot .gauge-svg,
  .risk-snapshot svg {
    max-width: 64px !important;
    max-height: 40px !important;
    margin: 0 auto !important;
  }
  .risk-snapshot .gauge-value,
  .risk-snapshot .mini-gauge-value {
    font-size: 16px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
  }
  .risk-snapshot .gauge-label,
  .risk-snapshot .mini-gauge-label {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mp-muted, #94a3b8) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* §22.3c  REAL RETURNS — equation row was overflowing right */
  .real-returns .real-equation-compact {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto 1fr !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 10px 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .real-returns .eq-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  .real-returns .eq-val {
    font-size: 17px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
  }
  .real-returns .eq-lbl {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mp-muted, #94a3b8) !important;
    margin-top: 3px !important;
  }
  .real-returns .eq-op {
    font-size: 14px !important;
    color: var(--mp-muted, #94a3b8) !important;
    font-weight: 600 !important;
  }
  .real-returns .real-equation-compact + * {
    text-align: center !important;
    font-size: 12px !important;
    color: var(--mp-muted, #94a3b8) !important;
    margin-top: 6px !important;
  }
}

/* §22.4  Drawdown crashes carousel — smaller icons, smaller cards */

@media (max-width: 640px) {
  .crash-cards-stack,
  .crash-cards-carousel,
  .drawdown-crashes-stack,
  .drawdown-event-cards,
  .historic-drawdown-badges,
  [class*="crash-stack" i] {
    padding: 4px var(--fl-card-pad-mobile-x) 8px !important;
    gap: 8px !important;
  }
  .crash-card,
  .drawdown-event-card,
  .historic-drawdown-badge {
    flex: 0 0 60% !important;            /* was 78% — too big */
    max-width: 220px !important;
    border-radius: 12px !important;
    transform: none !important;
  }
  .crash-card img,
  .crash-card svg,
  .drawdown-event-card img,
  .drawdown-event-card svg,
  .historic-drawdown-badge img,
  .historic-drawdown-badge svg {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  /* Maximum drawdown headline -56.6% */
  .max-drawdown-headline,
  .drawdown-headline,
  .drawdown-pct-display {
    font-size: 36px !important;
    line-height: 1 !important;
  }
  .max-drawdown-loss-label,
  .drawdown-loss-label {
    font-size: 12px !important;
  }
}

/* §22.5  Performance chart — right padding so user can scroll/hover today */

@media (max-width: 640px) {
  /* Add right padding inside the chart container so the rightmost data is reachable */
  #performanceChart {
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  /* Time-range chip row — smaller chips */
  .perf-time-range button,
  .time-range-buttons button {
    min-width: 36px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  /* Holdings dropdown trigger */
  .perf-holdings-trigger,
  .holdings-dropdown-button,
  #holdingsDropdownBtn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Filter chip groups have descriptive sub-text — hide on mobile */
  .perf-control-group [class*="hint"],
  .perf-control-group [class*="description"],
  .perf-control-group [class*="subtext"],
  .perf-control-group .perf-chip-description {
    display: none !important;
  }
}

/* §22.6  HOLDINGS SUMMARY — denser card-stack v2
   Owner: "Holding summary was destroyed. It was better before."
   v1 cards showed only sym + name + total + gain. Lost the data columns.
   v2: 4-line dense card showing every column the table had. */

@media (max-width: 640px) {
  .fl-holdings-cards {
    padding: 0 !important;
    margin: 0 !important;
  }
  .fl-holding-card {
    /* 2-column grid: left = identity, right = value/return */
    grid-template-columns: 1fr auto !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    padding: 11px var(--fl-card-pad-mobile-x) !important;
    border-bottom: 1px solid var(--fl-divider-mobile) !important;
  }
  /* Top row: symbol + total value */
  .fl-holding-card__sym {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }
  .fl-holding-card__val {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }
  /* Second row: name + return % */
  .fl-holding-card__name {
    font-size: 11px !important;
    color: var(--mp-muted, #94a3b8) !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  .fl-holding-card__gain {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }
  /* Third row: stat strip — qty · curr price · annualized */
  /* (added by mobileEnhancements.js v2) */
  .fl-holding-card__strip {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding-top: 4px !important;
    margin-top: 1px !important;
  }
  .fl-holding-card__strip-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
  }
  .fl-holding-card__strip-label {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mp-muted, #94a3b8) !important;
  }
  .fl-holding-card__strip-value {
    font-size: 11px !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--mp-text, #f8fafc) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Expand chevron on right edge */
  .fl-holding-card__chevron {
    grid-column: 2 / 3 !important;
    grid-row: 1 / -1 !important;
    align-self: center !important;
    width: 12px !important;
    height: 12px !important;
    color: var(--mp-muted, #94a3b8) !important;
    opacity: 0.5 !important;
    transition: transform 200ms ease-out !important;
  }
  .fl-holding-card[data-expanded="true"] .fl-holding-card__chevron {
    transform: rotate(90deg) !important;
  }
  /* Expanded detail */
  .fl-holding-card__detail {
    grid-column: 1 / -1 !important;
  }
}

/* §22.7  PIE CHARTS v2 — donut with center stat
   Owner: "redesign these pie charts on mobile instead of just changing the card size"
   "rethink it entirely how to do these pie charts on mobile" */

@media (max-width: 640px) {
  /* Container: tight, fixed-aspect square, with center stat slot */
  .pie-chart-container {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 280px !important;       /* smaller than v1's 340px */
    max-height: 280px !important;
    margin: 8px auto !important;
    padding: 0 !important;
  }
  .pie-chart-container canvas,
  #portfolioPieChart,
  #sectorPieChart,
  #netWorthPieChart,
  #netWorthSectorPieChart {
    width: 100% !important;
    height: 100% !important;
    max-width: 280px !important;
    max-height: 280px !important;
  }
  /* Center stat element injected by JS */
  .fl-pie-center {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    text-align: center !important;
    padding: 20% !important;
  }
  .fl-pie-center__primary {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--mp-text, #f8fafc) !important;
    font-variant-numeric: tabular-nums !important;
  }
  .fl-pie-center__label {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--mp-muted, #94a3b8) !important;
    margin-top: 3px !important;
  }
  /* Legend list: tighter rows, single-line max */
  .pie-legend-list,
  #pieLegendList,
  #sectorLegendList,
  #netWorthLegendList,
  #netWorthSectorLegendList {
    border-top: 1px solid var(--fl-divider-mobile) !important;
    margin-top: 12px !important;
    padding: 6px 0 !important;
    max-height: 320px !important;
    width: 100% !important;
  }
  .pie-legend-item {
    padding: 7px 4px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    border-bottom: 1px solid var(--fl-divider-mobile) !important;
  }
  .pie-legend-item:last-child { border-bottom: 0 !important; }
  .pie-legend-color {
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
  }
  .pie-legend-text {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}

/* §22.8  DRAWDOWN MAX HEADLINE -56.6% — was massive */

@media (max-width: 640px) {
  /* The "POOR" big red number with $44.1k loss */
  .max-drawdown-card .drawdown-display,
  .drawdown-display-row,
  .max-drawdown-pct {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px 12px !important;
  }
  /* Specific selector for the styled big % display */
  body[class*="dark"] .max-drawdown-card .max-drawdown-pct-text,
  body[class*="dark"] [class*="drawdown-pct" i] {
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
}

/* §22.9  Time Machine FAB — was overlapping content */

@media (max-width: 640px) {
  .time-machine-fab,
  #timeMachineFab,
  .tm-fab {
    width: 48px !important;             /* was 56 — too big */
    height: 48px !important;
  }
  /* Hide hover label that positions offscreen and triggers QC overflow flag */
  .tm-fab-label {
    display: none !important;
  }
  /* Same for hover-only chip tooltips that float offscreen by default */
  .perf-chip-tooltip {
    /* Keep functional on hover but don't measure as overflow */
    display: none !important;
  }
}

/* §22.10  HEADER — Full Portfolio + Stocks/Crypto/Cost Basis row */

@media (max-width: 640px) {
  /* The SHOW row was wrapping with Cost Basis on its own line awkwardly.
     Force a wrap-friendly flex with consistent chip sizing. */
  .perf-control-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 0 !important;
  }
  .perf-control-group label,
  .perf-control-group .perf-control-label {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--mp-muted, #94a3b8) !important;
    margin-right: 2px !important;
  }
  /* Ensure compact size on the new chip pattern */
  .perf-control-group .perf-chip,
  .perf-control-group button {
    flex: 0 0 auto !important;
    height: var(--fl-chip-h-mobile) !important;
    padding: var(--fl-chip-pad-mobile) !important;
    font-size: var(--fl-chip-fs-mobile) !important;
  }
}

/* §22.11  LEGENDARY INVESTORS scatter — better label sizing */

@media (max-width: 640px) {
  /* The investor names overlap. Force smaller font + better spacing */
  #investorChart canvas {
    font-size: 9px !important;
  }
  /* Comparison highlight ribbon */
  .comparison-highlight {
    margin: 0 var(--fl-card-pad-mobile-x) 12px !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .comparison-highlight .text-lg {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }
  .comparison-highlight p:not(.text-lg) {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* §22.12  Generic safety: never let any direct child of a card overflow */

@media (max-width: 640px) {
  .overview-panel > *,
  .perf-card > *,
  .holdings-summary-card > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   §23  RESPONSIVE HARDENING — Apr 30 2026 — Multi-viewport coverage
   Added after multi-viewport QC at 10 widths (320 → 1024) revealed
   real responsive bandaids: 0 clamp() typography, single 640px breakpoint,
   no tablet rules, no <360px small-phone rules, demo landing tiny 7px text.
   This section makes the design ACTUALLY responsive across the full
   320px–1280px range, not just 390px iPhone.
   ========================================================================== */

/* ============= §23.1  TIER TOKENS — fluid scale across viewport sizes
   Approach: clamp(min, preferred-vw-based, max) for fluid typography +
   spacing. Min protects readability on smallest screens (320px), max caps
   ridiculous scaling on huge tablets (1024px+). ============= */

:root {
  /* Fluid type scale (calibrated 320-1024px) */
  --fl-fs-9:   clamp(9px, 1.4vw + 5.5px, 11px);   /* labels, axis ticks */
  --fl-fs-10:  clamp(10px, 1.5vw + 6.2px, 12px);  /* sub-labels, hints */
  --fl-fs-11:  clamp(11px, 1.6vw + 6.8px, 13px);  /* meta text */
  --fl-fs-12:  clamp(12px, 1.7vw + 7.5px, 14px);  /* body text */
  --fl-fs-13:  clamp(13px, 1.8vw + 8.2px, 15px);  /* default UI text */
  --fl-fs-14:  clamp(14px, 2.0vw + 8.5px, 16px);  /* sub-headings */
  --fl-fs-16:  clamp(15px, 2.2vw + 9.5px, 18px);  /* card titles */
  --fl-fs-18:  clamp(16px, 2.5vw + 10.5px, 22px); /* big numbers */
  --fl-fs-32:  clamp(28px, 6vw + 12px, 42px);     /* hero displays */

  /* Fluid spacing scale */
  --fl-sp-4:   clamp(3px, 0.7vw + 2px, 6px);
  --fl-sp-6:   clamp(5px, 0.9vw + 3.2px, 8px);
  --fl-sp-8:   clamp(6px, 1.0vw + 4px, 10px);
  --fl-sp-10:  clamp(8px, 1.2vw + 5px, 12px);
  --fl-sp-12:  clamp(10px, 1.5vw + 6px, 14px);
  --fl-sp-14:  clamp(12px, 1.7vw + 7px, 16px);
  --fl-sp-16:  clamp(14px, 1.9vw + 8.5px, 20px);
  --fl-sp-20:  clamp(16px, 2.3vw + 10.5px, 24px);
}

/* ============= §23.2  SMALL PHONE TIER (<360px — iPhone SE 1st gen)
   metrics-nav-title was overflowing at 320px (333>320). Tighten everything. */

@media (max-width: 359px) {
  :root {
    --fl-gutter-mobile: 6px;
    --fl-card-pad-mobile-x: 8px;
    --fl-bleed-mobile: 8px;
    --fl-radius-mobile: 10px;
    --fl-chip-h-mobile: 28px;
    --fl-chip-pad-mobile: 5px 8px;
    --fl-chip-fs-mobile: 11px;
  }

  /* Nav title: scale down + ellipsis */
  .metrics-nav-title,
  .nav-title-text,
  .nav-title-dates {
    font-size: 12px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Risk Snapshot 4-gauge → 2x2 stays, but tighter padding */
  .risk-snapshot .risk-gauges {
    gap: 6px !important;
  }
  .risk-snapshot .mini-gauge {
    padding: 8px 6px !important;
  }

  /* Real Returns equation: stack vertically on smallest phones */
  .real-returns .real-equation-compact {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
  }
  .real-returns .eq-op {
    display: none !important;
  }

  /* Heat map cells: smaller min-width */
  .hm-cell, .ins-cell, .heatmap-cell {
    min-width: 42px !important;
    font-size: 9px !important;
    padding: 5px 3px !important;
  }

  /* Holdings card stat-strip: tighter */
  .fl-holding-card__strip {
    gap: 4px !important;
  }
}

/* ============= §23.3  PHONE TIER (360-640px) — fluid typography refinement
   Apply clamp() font sizing here so 360 reads same as 414 reads same as 600. */

@media (min-width: 360px) and (max-width: 640px) {
  /* Override fixed-px fonts in v1+v2 with fluid clamp */
  .perf-chip,
  .filter-chip,
  .perf-control-group .perf-chip,
  .ins-toggle, .ins-pill,
  .preset-chip, .timing-preset, .tm-preset-chip {
    font-size: var(--fl-fs-12) !important;
  }
  .perf-time-range button,
  .time-range-buttons button {
    font-size: var(--fl-fs-11) !important;
  }
  .pie-legend-item, .pie-legend-text,
  .sector-legend-name, .sector-legend-pct {
    font-size: var(--fl-fs-12) !important;
  }
  .fl-holding-card__sym, .fl-holding-card__val {
    font-size: var(--fl-fs-13) !important;
  }
  .fl-holding-card__name, .fl-holding-card__gain {
    font-size: var(--fl-fs-11) !important;
  }
  .fl-holding-card__strip-value {
    font-size: var(--fl-fs-11) !important;
  }
  .fl-holding-card__strip-label {
    font-size: var(--fl-fs-9) !important;
  }
  .overview-panel .panel-title {
    font-size: var(--fl-fs-14) !important;
  }
  .benchmark-row .bm-value {
    font-size: var(--fl-fs-12) !important;
  }
  .real-returns .eq-val {
    font-size: var(--fl-fs-18) !important;
  }
  .real-returns .eq-lbl {
    font-size: var(--fl-fs-10) !important;
  }
  .risk-snapshot .gauge-value,
  .risk-snapshot .mini-gauge-value {
    font-size: var(--fl-fs-16) !important;
  }
  .risk-snapshot .gauge-label,
  .risk-snapshot .mini-gauge-label {
    font-size: var(--fl-fs-10) !important;
  }
  /* Pie center stat */
  .fl-pie-center__primary {
    font-size: var(--fl-fs-18) !important;
  }
  .fl-pie-center__label {
    font-size: var(--fl-fs-9) !important;
  }
  /* Demo landing tiny text — was 7px (illegible) */
  .demo-metric-card-label,
  .demo-metric-direction,
  .demo-metric-card-rating,
  .demo-panel-meta,
  .demo-panel-subtitle {
    font-size: var(--fl-fs-10) !important;
    letter-spacing: 0.04em !important;
  }
}

/* ============= §23.4  PIE LEGEND OVERFLOW FIX (430-480px range)
   Discovered: at 430/480px, #pieLegendList renders 480px wide INSIDE a
   ~430px viewport. The width:100% inherits a max-width somewhere upstream.
   Force max-width: 100vw with cascade inheritance. */

@media (max-width: 640px) {
  .pie-chart-layout {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pie-legend-list,
  #pieLegendList,
  #sectorLegendList,
  #netWorthLegendList,
  #netWorthSectorLegendList {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pie-legend-item, .sector-legend-group {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============= §23.5  TABLET TIER (641-1024px) — iPad portrait + Air
   v1+v2 had ZERO rules between 641 and infinity. Tablets got desktop rules,
   which broke for things like the 1052px-wide Holdings table on a 768px iPad. */

@media (min-width: 641px) and (max-width: 1024px) {
  /* Section padding: more gutter than mobile, less than desktop */
  main, #app-main, .main-container, .app-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Holdings table: was 1052px wide, overflowed iPad portrait
     Two-track approach: keep table but enable horizontal scroll with hint */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Right-edge fade hint */
    mask-image: linear-gradient(to right, black 95%, rgba(0,0,0,0.4)) !important;
    -webkit-mask-image: linear-gradient(to right, black 95%, rgba(0,0,0,0.4)) !important;
  }
  .portfolio-table th:first-child,
  .portfolio-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    background: var(--fl-card-bg-mobile, #0f172a) !important;
    z-index: 2 !important;
    box-shadow: 1px 0 0 var(--fl-divider-mobile, rgba(255,255,255,0.08)) !important;
  }

  /* Performance chart: better aspect on tablet */
  #performanceChart {
    height: 50dvh !important;
    max-height: 460px !important;
    aspect-ratio: 21 / 9 !important;
  }

  /* Individual stock chart: was overflowing 820px viewport at 887px wide
     Force responsive width fitment */
  #individualStockChart {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 50dvh !important;
  }
  #individualStockAnalysisSection {
    overflow-x: hidden !important;
  }

  /* Pies: bigger but still capped, KEEP column layout on tablet portrait
     so legend never overflows alongside the pie */
  .pie-chart-container {
    aspect-ratio: 1/1 !important;
    max-width: min(360px, 80vw) !important;
    max-height: min(360px, 80vw) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pie-chart-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  .pie-legend-list {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Overview-panel grid: 2-col on tablet (was 1-col on mobile) */
  .overview-grid-3col {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .overview-panel.real-returns {
    grid-column: 1 / -1 !important;  /* Real Returns spans both cols */
  }

  /* Achievements grid: 7-col instead of 5 */
  .achievements-grid,
  .badge-grid,
  .achievement-icons-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }

  /* Holding selector: 6-col on tablet */
  .holding-selector-grid,
  .stock-selector-grid,
  #individualStockSelector {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  /* Risk Snapshot: 4-col on tablet (back to original layout, fits fine) */
  .risk-snapshot .risk-gauges {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Header market ticker: prevent overflow on iPad-Pro 1024px */
  .header-markets,
  .header-market-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .header-markets::-webkit-scrollbar,
  .header-market-row::-webkit-scrollbar {
    display: none !important;
  }
}

/* ============= §23.6  LARGE TABLET / DESKTOP-PORTRAIT (1025-1280px)
   iPad-Pro portrait + landscape large phones — keep desktop layout but
   ensure horizontal-scroll header doesn't overflow. */

@media (min-width: 1025px) and (max-width: 1280px) {
  .header-markets,
  .header-market-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    scrollbar-width: thin !important;
  }
}

/* ============= §23.7  CONTAINER QUERIES — for cards that should adapt
   to their parent's width regardless of viewport. Modern CSS pattern,
   baseline 2024+. */

/* Holdings card responds to its container width, not viewport */
.fl-holdings-cards {
  container-type: inline-size;
  container-name: holdings-stack;
}
@container holdings-stack (max-width: 280px) {
  .fl-holding-card {
    grid-template-columns: 1fr !important;
  }
  .fl-holding-card__val,
  .fl-holding-card__gain {
    text-align: left !important;
  }
  .fl-holding-card__strip {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Pie chart container responds to its own slot */
.pie-chart-layout {
  container-type: inline-size;
  container-name: pie-frame;
}
@container pie-frame (max-width: 360px) {
  .pie-chart-container {
    max-height: 220px !important;
    max-width: 220px !important;
  }
  .fl-pie-center__primary { font-size: 14px !important; }
}

/* Overview panel responds to its slot in the 3-col → 1-col → 2-col flow */
.overview-panel {
  container-type: inline-size;
  container-name: overview-card;
}
@container overview-card (max-width: 320px) {
  .real-returns .real-equation-compact {
    grid-template-columns: 1fr !important;
  }
  .real-returns .eq-op { display: none !important; }
  .risk-snapshot .risk-gauges {
    grid-template-columns: 1fr 1fr !important;
  }
  .benchmark-rows {
    font-size: 11px !important;
  }
}

/* ============= §23.8  TYPOGRAPHY: tabular-nums on every number display
   Already required per global rules but ensures all viewports stay aligned. */

.fl-holding-card__val,
.fl-holding-card__gain,
.fl-holding-card__strip-value,
.benchmark-row .bm-value,
.real-returns .eq-val,
.risk-snapshot .gauge-value,
.risk-snapshot .mini-gauge-value,
.fl-pie-center__primary,
.hm-cell, .ins-cell, .heatmap-cell {
  font-variant-numeric: tabular-nums !important;
}

/* ============= §23.9  VIEWPORT META + iOS SAFE AREAS — handled in JS
   (mobileEnhancements.js applies viewport-fit=cover for notched phones) */

/* ============= §23.10  TINY TEXT KILL SWITCH
   Anything below 10px is unreadable on mobile. Catches third-party widgets
   and inline styles that escape our system. */

@media (max-width: 1024px) {
  /* Don't apply to numbers/superscripts that benefit from being small */
  .demo-metric-card-label,
  .demo-metric-direction,
  .demo-metric-card-rating,
  .demo-panel-meta,
  .demo-panel-subtitle,
  .demo-div-axis-label,
  .demo-div-axis-label.left,
  .demo-div-axis-label.right,
  .demo-stock-type,
  .demo-stock-type.stock,
  .demo-stock-type.crypto,
  .demo-axis-label,
  .ar-legend,
  .ar-legend .legend-item,
  .ar-legend .legend-dot,
  .legend-label,
  .axis-label {
    font-size: max(10px, var(--fl-fs-10)) !important;
    letter-spacing: 0.04em !important;
  }
  /* SVG text inside charts — bump from 6-8px to 11px legibility floor.
     Chart.js & D3 default text rendering goes via SVG <text> with font
     attributes; we override via CSS font-size which Chart.js respects. */
  svg text {
    font-size: max(10px, 0.75em) !important;
  }
}

/* §23.11  Currency selector group on iPad-Pro portrait — was overflowing */
@media (min-width: 1025px) and (max-width: 1280px) {
  #fl-currency-selector-group,
  .fl-currency-selector-group {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #fl-currency-selector-group::-webkit-scrollbar,
  .fl-currency-selector-group::-webkit-scrollbar {
    display: none !important;
  }
}

/* ==========================================================================
   END OF FILE
   ========================================================================== */