/* Investing V2: literal port of the Figma "Investing V2 Dashboard Design" export, scoped to the
   Investing route. This is the ONLY layout/visual system for the Investing dashboard - the old
   Investing rules in styles.css (page/heading/kpis/row/card/performance/allocation/holdings/
   activity/watchlist/news chrome) have been removed, not shadowed, so there is nothing left to
   conflict with this file. Dialog-only rules (Manage accounts list, Record Activity type menu,
   transaction/account forms) still live in styles.css untouched - they are a separate concern from
   the dashboard this file replaces. Figma's own literal token values (index.css @theme block):
   background #06070d, surface #0b1020, panel #10162a, border rgba(140,160,220,.10),
   text f3f6ff/9aa6c7/66708d, accents purple #7c5cfc, cyan #22d3ee, green #22c55e, amber #f59e0b,
   red #ef4444. Figma uses Inter/DM Mono via Google Fonts; this LaguerreHub build is local-first/
   offline by design (see styles.css's own "offline font roles" note), so Segoe UI Variable/
   Cascadia Mono - the app's existing local sans/mono pair - stand in for them instead. */
:root{
  --iv2-bg:#06070d;--iv2-surface:#0b1020;--iv2-panel:#10162a;
  --iv2-border:rgba(140,160,220,.10);--iv2-border-soft:rgba(140,160,220,.08);--iv2-border-faint:rgba(140,160,220,.06);
  --iv2-text:#f3f6ff;--iv2-text-2:#9aa6c7;--iv2-text-3:#66708d;
  --iv2-purple:#7c5cfc;--iv2-purple-hover:#6d4ef0;--iv2-purple-dim:rgba(124,92,252,.2);
  --iv2-cyan:#22d3ee;--iv2-green:#22c55e;--iv2-amber:#f59e0b;--iv2-red:#ef4444;
  --iv2-font:var(--font-ui);--iv2-mono:var(--font-data);
}
.investing-page{width:100%;max-width:none;margin:0;padding:16px 0 10px;display:flex;flex-direction:column;gap:16px;background:var(--iv2-bg);color:var(--iv2-text);font-family:var(--iv2-font)}
.investing-page .hint{margin:0}

/* Header: breadcrumb (shared shell), eyebrow/title/subtitle left, portfolio selector + Manage +
   Record Activity right - InvestingPage.tsx's own header row exactly. */
.investing-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0}
.investing-heading .eyebrow{font:700 10px var(--iv2-font);letter-spacing:.14em;text-transform:uppercase;color:var(--iv2-text-3);margin:0 0 4px}
.investing-heading h1{font:700 24px/1.2 var(--iv2-font);color:var(--iv2-text);margin:0 0 4px;letter-spacing:-.01em}
.investing-heading p{font:14px var(--iv2-font);color:var(--iv2-text-2);margin:0;max-width:60ch}
.investing-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;margin-top:4px}
.investing-actions-account,.investing-actions-primary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.investing-account-control{display:flex;align-items:center;gap:8px}
.investing-account-control label{display:flex;align-items:center;gap:8px;font:14px var(--iv2-font);color:var(--iv2-text);margin:0}
.investing-account-control select#investing-account-filter{min-width:0;width:auto;height:auto;padding:8px 12px;font:500 14px var(--iv2-font);background:var(--iv2-panel);color:var(--iv2-text);border:1px solid rgba(140,160,220,.12);border-radius:6px}
.investing-heading-actions .button{padding:8px 16px;font:600 14px var(--iv2-font);border-radius:6px;border:0}
.investing-heading-actions .button.secondary{background:var(--iv2-panel);color:var(--iv2-text-2);border:1px solid var(--iv2-border);}
.investing-heading-actions .button.secondary:hover{color:var(--iv2-text)}
.investing-heading-actions .button.primary{background:var(--iv2-purple);color:#fff;gap:6px}
.investing-heading-actions .button.primary:hover{background:var(--iv2-purple-hover)}
.investing-heading-actions .button svg{width:14px;height:14px}
@media(max-width:767px){
  .investing-heading{flex-direction:column;align-items:stretch}
  .investing-heading-actions{flex-direction:column;align-items:stretch;width:100%}
  .investing-actions-account,.investing-actions-primary{width:100%}
  .investing-actions-primary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .investing-account-control{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;gap:8px}
  .investing-account-control label{min-width:0;width:100%}
  .investing-account-control select#investing-account-filter{width:100%;min-height:44px}
  .investing-heading-actions .button{width:100%;min-height:44px;justify-content:center}
  .investing-account-control [data-investing-account-manage]{padding-inline:10px;white-space:nowrap}
}
@media(min-width:768px) and (max-width:899px){
  .investing-heading{flex-direction:column;align-items:stretch;gap:12px}
  .investing-heading-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:8px;margin-top:0}
  .investing-actions-account,.investing-actions-primary{min-width:0;width:100%}
  .investing-account-control{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;gap:8px}
  .investing-account-control label{min-width:0;width:100%}
  .investing-account-control select#investing-account-filter{width:100%;min-height:44px}
  .investing-account-control [data-investing-account-manage]{min-height:44px;padding-inline:10px;white-space:nowrap}
  .investing-actions-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .investing-heading-actions .button{min-height:44px;padding-inline:10px;white-space:nowrap}
}

.investing-partial-warning{display:flex;align-items:center;gap:7px;margin:0;padding:8px 12px;border:1px solid rgba(245,158,11,.25);border-radius:8px;background:rgba(245,158,11,.08);color:#f0b862;font:600 12px var(--iv2-font)}
.investing-partial-warning svg{width:15px;height:15px;flex-shrink:0}

/* KPI strip: five fixed cards, Figma's KPIStrip.tsx exactly (flex, not grid, so cards share space
   evenly and never wrap into an uneven last row on any width down to mobile). */
.investing-kpis{display:flex;gap:12px;flex-wrap:wrap}
.investing-kpi{flex:1 1 180px;min-width:0;padding:12px 16px;border-radius:8px;background:var(--iv2-surface);border:1px solid var(--iv2-border);display:flex;flex-direction:column;gap:0}
.investing-kpi .fitness-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.investing-kpi .eyebrow{font:700 10px var(--iv2-font);letter-spacing:.14em;text-transform:uppercase;color:var(--iv2-text-3);margin:0}
.investing-kpi .fitness-kpi-icon{width:20px;height:20px;border-radius:6px;background:rgba(124,92,252,.1)}
.investing-kpi.good .fitness-kpi-icon{background:rgba(34,197,94,.1)}
.investing-kpi.warning .fitness-kpi-icon{background:rgba(245,158,11,.1)}
.investing-kpi.info .fitness-kpi-icon{background:rgba(34,211,238,.1)}
.investing-kpi .fitness-kpi-icon svg{width:11px;height:11px}
.investing-kpi .fitness-kpi-value strong{display:block;font:600 16px var(--iv2-mono);color:var(--iv2-text)}
.investing-kpi .fitness-kpi-value small{display:block;margin-top:2px;font:11px var(--iv2-font);color:var(--iv2-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.investing-kpi-visual{display:flex;align-items:center;gap:8px;margin-top:4px;min-height:16px}
.investing-kpi-spark{width:70px;height:16px;flex:0 0 auto;overflow:visible}
.investing-kpi-spark polyline{fill:none;stroke:var(--iv2-purple);stroke-width:1.5}
.investing-kpi.good .investing-kpi-spark polyline{stroke:var(--iv2-green)}
.investing-kpi.info .investing-kpi-spark polyline{stroke:var(--iv2-cyan)}
.investing-kpi-neutral{color:var(--iv2-text-3);font:11px var(--iv2-mono)}
.investing-kpi .investing-period-change{font:500 11px var(--iv2-mono)}
.investing-kpi .investing-period-change b{font-size:11px;font-weight:500}
.investing-kpi .investing-period-change small{font-size:11px}
@media(max-width:1199px){.investing-kpi{flex-basis:calc(33.333% - 8px)}}
@media(max-width:619px){.investing-kpi{flex-basis:calc(50% - 6px)}}
@media(max-width:619px){
  .investing-kpi-visual{flex-wrap:wrap;gap:4px;min-width:0;overflow:hidden}
  .investing-kpi-spark{width:48px}
  .investing-kpi-visual .investing-period-change{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.3;font-size:10px}
}
@media(max-width:430px){
  .investing-kpi .fitness-kpi-value{position:relative;min-width:0}
  .investing-kpi .fitness-kpi-value strong{max-width:100%;font-size:clamp(12px,3.6vw,14px);line-height:1.25;white-space:normal;overflow-wrap:anywhere}
  .investing-kpi .fitness-kpi-value small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
}

/* Shared card chrome for every dashboard section - Figma's own repeated
   {background:#0b1020;border:1px solid rgba(140,160,220,.10);border-radius:8px}. */
.investing-card{background:var(--iv2-surface);border:1px solid var(--iv2-border);border-radius:8px;padding:0;overflow:hidden;min-width:0}
.investing-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px 6px}
.investing-card-heading .eyebrow{display:block;font:700 10px var(--iv2-font);letter-spacing:.14em;text-transform:uppercase;color:var(--iv2-text-3);margin:0 0 2px}
.investing-card-heading h2{display:flex;align-items:center;gap:8px;margin:0;font:600 14px var(--iv2-font);color:var(--iv2-text)}
.investing-card-heading h2 svg{width:16px;height:16px;color:var(--iv2-text-2)}
.investing-card-heading .pill,.investing-card-heading .button,.investing-card-heading .text-link{flex-shrink:0}
.text-link.investing-card-link{display:inline-flex;align-items:center;gap:4px;font:500 11px var(--iv2-font);color:var(--iv2-purple);padding:0}
.text-link.investing-card-link:hover{color:#a78bfa}
.text-link.investing-card-link svg{width:11px;height:11px}

/* Figma's own grids for these paired rows (PerformanceChart+AllocationDonut, ActivityCard+
   WatchlistCard, MarketRow's two cards) never override align-items, so CSS Grid's real default -
   stretch - is what Figma actually renders: the shorter card in each pair is genuinely stretched to
   match its taller sibling (Performance's chart canvas grows via its own flex:1, Market Snapshot's
   empty state centers within the taller box) rather than leaving a visible dead gap in the grid
   track beside a shorter, unstretched card - which is what align-items:start here was silently
   doing, and the single biggest source of the "big black band" gaps in this review. */
.investing-row{display:grid;gap:16px}
.investing-row-performance{grid-template-columns:minmax(0,1fr) 280px}
.investing-row-activity{grid-template-columns:minmax(0,1fr) 340px}
.investing-row-market{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:899px){.investing-row{grid-template-columns:1fr}}

/* Performance chart */
.investing-performance-card{display:flex;flex-direction:column;min-height:286px}
#investing-performance-data{display:flex;flex:1;flex-direction:column;min-height:0}
/* Real Portfolio Value/Gain/Contributions/Benchmark views (4 real tabs) plus the range pills need
   more width than Figma's own simple 2-button "Portfolio / vs S&P 500" toggle, so this row wraps to
   two lines at narrower column widths (e.g. 1440px, where Performance shares its row with a 280px
   Allocation rail) - kept, since the real feature is wider than Figma's demo control, but the wrap
   gap is tightened so the wrapped header adds as little extra height as possible. */
.investing-performance-card .investing-card-heading{align-items:flex-start;padding:12px 16px 8px;flex-wrap:wrap;gap:6px}
.investing-performance-card .investing-card-heading>div:first-child{display:flex;flex-direction:column;gap:2px}
.investing-performance-summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.investing-performance-summary strong{font:600 20px var(--iv2-mono);color:var(--iv2-text)}
.investing-performance-summary .investing-period-change{font:500 14px var(--iv2-mono)}
.investing-perf-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.investing-range-tabs{display:flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:var(--iv2-panel)}
.investing-range-tabs button{padding:5px 10px;min-height:0;border:0;border-radius:5px;background:transparent;font:500 11px var(--iv2-font);color:var(--iv2-text-3);cursor:pointer}
.investing-range-tabs button.active{background:var(--iv2-purple-dim);color:#a78bfa}
.investing-view-tabs{display:flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:var(--iv2-panel);flex-wrap:wrap}
.investing-view-tabs button{padding:6px 10px;min-height:0;border:0;border-radius:5px;background:transparent;color:var(--iv2-text-3);font:500 11px var(--iv2-font);white-space:nowrap;cursor:pointer}
.investing-view-tabs button.active{background:var(--iv2-purple-dim);color:#a78bfa}
.investing-perf-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px 12px;color:var(--iv2-text-3);font-size:10px}
.investing-perf-legend{display:flex;align-items:center;gap:6px}
.investing-perf-swatch{display:inline-block;width:16px;height:2px;background:var(--iv2-purple);border-radius:1px}
.investing-performance-series{display:flex;flex-direction:column;flex:1;min-height:0}
.investing-perf-chart{flex:1;min-height:150px;padding:4px 4px 0;color:var(--iv2-purple)}
.investing-perf-chart svg{display:block;width:100%;height:100%;overflow:visible}
.investing-perf-chart polygon{fill:url(#investing-perf-fill)}
.investing-perf-chart polyline{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.investing-perf-chart.positive{color:var(--iv2-green)}
.investing-perf-chart.negative{color:var(--iv2-red)}
.investing-perf-endpoint{fill:var(--iv2-surface);stroke:currentColor;stroke-width:2}
.investing-perf-point{fill:transparent;stroke:none}
.investing-perf-point:hover{fill:var(--iv2-text);cursor:crosshair}
.investing-perf-axis{display:flex;justify-content:space-between;padding:4px 16px 0;color:var(--iv2-text-3);font:10px var(--iv2-mono)}
.investing-performance-card>.hint{padding:8px 16px 12px;font-size:10px;color:var(--iv2-text-3)}
.investing-performance-early,.investing-early-state,.investing-performance-early{padding:16px}
.investing-performance-early{display:grid;place-items:center;min-height:170px;gap:6px;text-align:center}
.investing-performance-early strong{font:700 26px var(--iv2-mono);color:var(--iv2-text)}
.investing-performance-early span{color:var(--iv2-text-2);font-size:12px}
.investing-performance-early small{color:var(--iv2-text-3);font-size:10px}
.investing-early-chart{width:100%;height:64px;margin-bottom:2px}
.investing-early-chart svg{display:block;width:100%;height:100%}
.investing-early-chart line{stroke:var(--iv2-border);stroke-dasharray:5 7}
.investing-early-chart circle{fill:var(--iv2-purple)}
.fitness-empty-state.investing-early-state{padding:16px;min-height:170px;align-content:center;justify-items:center;text-align:center;color:var(--iv2-text-2)}
.fitness-empty-state.investing-early-state .fitness-empty-watermark{color:var(--iv2-purple)}
.fitness-empty-state.investing-early-state strong{color:var(--iv2-text)}

/* Allocation donut */
.investing-allocation-card{display:flex;flex-direction:column}
.investing-donut-row{display:flex;flex-direction:column;align-items:center;padding:0 16px}
.investing-donut{position:relative;width:140px;height:140px;flex-shrink:0}
.investing-donut>svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.investing-donut-track,.investing-donut-slice{fill:none;stroke-width:14}
.investing-donut-track{stroke:var(--iv2-panel)}
.investing-donut-slice{stroke-linecap:butt}
.investing-donut-hole{position:absolute;inset:20px;border-radius:50%;background:var(--iv2-surface);display:grid;place-items:center;text-align:center}
.investing-donut-hole strong{display:block;font:600 13px var(--iv2-mono);color:var(--iv2-text)}
.investing-donut-hole small{display:block;margin-top:2px;color:var(--iv2-text-3);font-size:9px}
.investing-legend{width:100%;display:flex;flex-direction:column;gap:6px;padding:12px 16px 16px}
.investing-legend-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--iv2-text-2)}
.investing-legend-row b{margin-left:auto;font:600 11px var(--iv2-mono);color:var(--iv2-text-3);flex-shrink:0}
.investing-legend-copy{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px}
.investing-legend-copy strong{font-size:11px;font-weight:600;color:var(--iv2-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.investing-legend-copy small{color:var(--iv2-text);font:11px var(--iv2-mono)}
.investing-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.investing-allocation-largest{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 16px 0;padding:7px 12px;border-top:1px solid var(--iv2-border-soft);border-radius:0}
.investing-allocation-largest span{color:var(--iv2-text-3);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.investing-allocation-largest strong{font:700 12px var(--iv2-mono);color:var(--iv2-text)}
.investing-allocation-card>.hint{padding:6px 16px 10px;font-size:11px;color:var(--iv2-text-3)}
.investing-allocation-card .fitness-ring-empty-row{padding:16px}
@container investing-allocation (max-width: 380px){.investing-donut-row{padding:0 16px}}

/* Holdings: full-width row */
.investing-holdings-card{padding:0}
.investing-holdings-card .investing-card-heading{padding:11px 16px;border-bottom:1px solid var(--iv2-border-soft);margin:0}
.investing-help-note{margin:8px 16px 0;padding:6px 10px;border:1px solid var(--iv2-border);border-radius:8px;background:var(--iv2-panel)}
.investing-help-note summary{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--iv2-text);font-size:12px;font-weight:600;list-style:none}
.investing-help-note summary::-webkit-details-marker{display:none}
.investing-help-note summary svg{width:14px;height:14px;color:var(--iv2-purple);flex-shrink:0}
.investing-help-note p{margin:7px 0 0;color:var(--iv2-text-2);font-size:11px;line-height:1.5}
.investing-holdings-filters{display:flex;gap:2px;padding:2px;margin:8px 16px 0;border-radius:6px;background:var(--iv2-panel);width:max-content;max-width:calc(100% - 32px);overflow-x:auto}
.investing-holdings-filters button{padding:5px 12px;min-height:0;border:0;border-radius:5px;background:transparent;font:500 11px var(--iv2-font);color:var(--iv2-text-3);cursor:pointer;white-space:nowrap}
.investing-holdings-filters button.active{background:var(--iv2-purple-dim);color:#a78bfa}
.investing-table-wrap{overflow-x:auto;margin-top:8px}
.investing-table-wrap.investing-holdings-scroll{max-height:340px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--iv2-border) transparent}
.investing-table-wrap.investing-holdings-scroll thead th{position:sticky;top:0;background:var(--iv2-panel);z-index:1}
.investing-table-wrap.investing-holdings-scroll table{border-collapse:separate;border-spacing:0}
.investing-table{width:100%;border-collapse:collapse;min-width:640px}
.investing-table thead tr{background:var(--iv2-panel)}
.investing-table th{padding:8px 12px;text-align:left;font:700 10px var(--iv2-font);letter-spacing:.06em;text-transform:uppercase;color:var(--iv2-text-3);border-bottom:1px solid var(--iv2-border-soft)}
.investing-table td{padding:8px 12px;border-bottom:1px solid var(--iv2-border-faint);font-size:12px}
.investing-table tbody tr:last-child td{border-bottom:0}
.investing-table tbody tr:hover{background:rgba(140,160,220,.03)}
.investing-table td.mono{font-family:var(--iv2-mono);font-variant-numeric:tabular-nums}
.investing-price{font-family:var(--iv2-mono)}
.investing-price-state{display:block;margin-top:2px;color:var(--iv2-text-3);font-size:9px}
/* These rows/cells are rendered as real <button> elements (row click + keyboard activation), which
   silently inherit the app's global button{min-height:44px} touch-target floor on top of their own
   padding - fine for a standalone action button, but it was adding ~20px of dead space to every
   Holdings/Watchlist/Activity row (measured 65px instead of the ~44-46px Figma's own dense rows use).
   A data table/list row's click target is the whole row, not this one control, so min-height:0 here
   is a deliberate, narrow exception to the 44px rule - not a general accessibility rollback; every
   other button in the app (including .investing-heading-actions and the tab controls) keeps it. */
.investing-symbol-cell{display:flex;align-items:center;gap:9px;font:600 12px var(--iv2-mono);color:var(--iv2-text);min-height:0;min-width:0}
.investing-symbol-badge{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;font:700 9px var(--iv2-mono);background:rgba(124,92,252,.15);color:#a78bfa;flex-shrink:0}
.investing-row-action{display:grid;place-items:center;width:26px;height:26px;min-height:0;min-width:0;border-radius:6px;color:var(--iv2-text-3)}
.investing-row-action:hover{background:var(--iv2-panel);color:var(--iv2-purple)}
.investing-row-action svg{width:14px;height:14px}
.investing-holdings-empty-filter{padding:16px 10px;text-align:center;color:var(--iv2-text-2);font-size:12px;white-space:normal}
.investing-holdings-card>.investing-holdings-toggle,.investing-holdings-card>p.hint{margin:0;padding:8px 16px;min-height:0}
.investing-holdings-toggle{font:500 11px var(--iv2-font)}
@media(max-width:767px){
  .investing-holdings-filters button,.investing-holdings-card>.investing-holdings-toggle,.investing-watchlist-card>.investing-watch-toggle{min-height:44px}
  .investing-table-wrap{overflow-x:visible}
  .investing-table-wrap.investing-holdings-scroll{overflow-x:hidden}
  .investing-table{display:block;width:100%;min-width:0}
  .investing-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .investing-table tbody{display:block;width:100%}
  .investing-table tbody tr:not(:has(td[colspan])){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"symbol action" "name name" "shares average" "current value" "gain allocation";gap:2px 12px;padding:8px 12px;border-bottom:1px solid var(--iv2-border-faint)}
  .investing-table tbody tr:not(:has(td[colspan])):last-child{border-bottom:0}
  .investing-table td{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:2px 0;border:0;font-size:10px;line-height:1.25}
  .investing-table td:nth-child(1){grid-area:symbol;justify-content:flex-start}
  .investing-table td:nth-child(2){grid-area:name;justify-content:flex-start;padding:0 0 3px;color:var(--iv2-text-3);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .investing-table td:nth-child(3){grid-area:shares}
  .investing-table td:nth-child(4){grid-area:average}
  .investing-table td:nth-child(5){grid-area:current}
  .investing-table td:nth-child(6){grid-area:value}
  .investing-table td:nth-child(7){grid-area:gain}
  .investing-table td:nth-child(8){grid-area:allocation}
  .investing-table td:nth-child(3)::before{content:"Shares"}
  .investing-table td:nth-child(4)::before{content:"Avg cost"}
  .investing-table td:nth-child(5)::before{content:"Price"}
  .investing-table td:nth-child(6)::before{content:"Value"}
  .investing-table td:nth-child(7)::before{content:"Gain / loss"}
  .investing-table td:nth-child(8)::before{content:"Allocation"}
  .investing-table td:nth-child(n+3):nth-child(-n+8)::before{min-width:0;color:var(--iv2-text-3);font:500 9px var(--iv2-font);white-space:nowrap}
  .investing-table td:nth-child(n+3):nth-child(-n+8)>*{min-width:0;text-align:right}
  .investing-table td:nth-child(9){grid-area:action;justify-content:flex-end}
  .investing-table td:nth-child(9) .investing-row-action,.investing-table .investing-symbol-cell{min-width:44px;min-height:44px}
  .investing-table td.investing-holdings-empty-filter{display:block;grid-column:1/-1}
}

/* Activity + Watchlist */
.investing-activity-card,.investing-watchlist-card{display:flex;flex-direction:column}
.investing-activity-card .investing-card-heading{padding-bottom:0}
.investing-activity-tabs{display:flex;gap:0;padding:8px 16px 0;border-bottom:1px solid var(--iv2-border-soft)}
button.investing-activity-tab{padding:7px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--iv2-text-3);font:500 12px var(--iv2-font);text-transform:capitalize}
button.investing-activity-tab.selected{color:var(--iv2-text);border-bottom-color:var(--iv2-purple)}
.investing-activity-panels{display:grid;min-width:0}
.investing-activity-panel{grid-area:1/1;min-width:0;visibility:hidden;pointer-events:none}
.investing-activity-panel.active{visibility:visible;pointer-events:auto}
.investing-transaction-list{display:grid;gap:0;min-width:0;max-height:240px;overflow-y:auto;scrollbar-width:thin}
.investing-transaction-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 16px;min-height:0;border-top:1px solid var(--iv2-border-faint);color:var(--iv2-text);text-align:left;justify-content:space-between}
.investing-transaction-row:first-child{border-top:0}
.investing-transaction-copy{flex:1;min-width:0}
.investing-transaction-copy strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.investing-transaction-copy small{display:block;margin-top:2px;color:var(--iv2-text-3);font-size:10.5px;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.investing-transaction-row .pill{flex-shrink:0;font:500 12px var(--iv2-mono);background:none;padding:0}
.investing-transaction-row .pill.good{color:var(--iv2-green)}
.investing-transaction-row .pill.warning{color:var(--iv2-red)}
.investing-transaction-row .pill.neutral{color:var(--iv2-text-2)}
.investing-activity-empty{margin:0;padding:16px}
.investing-activity-contributions{padding:12px 16px 16px}
.investing-activity-total{margin:2px 0 12px}
.investing-activity-total strong{font-size:22px}
.investing-contribution-chart{display:flex;align-items:flex-end;gap:4px;min-height:48px;margin-top:6px}
.investing-contribution-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;min-width:0}
.investing-contribution-track{position:relative;width:100%;max-width:16px;flex:1;min-height:0}
.investing-contribution-track span{position:absolute;bottom:0;left:0;width:100%;border-radius:2px 2px 1px 1px;background:linear-gradient(180deg,var(--iv2-purple),var(--iv2-cyan))}
.investing-contribution-bar small{flex-shrink:0;color:var(--iv2-text-3);font-size:8.5px}

.investing-watchlist-card .investing-card-heading{padding:11px 16px;border-bottom:1px solid var(--iv2-border-soft);margin:0}
.investing-watch-list{display:grid;gap:0}
.investing-watch-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 16px;min-height:0;border-top:1px solid var(--iv2-border-faint);color:var(--iv2-text);text-align:left}
.investing-watch-row:first-child{border-top:0}
.investing-watch-copy{flex:1;min-width:0}
.investing-watch-copy strong{display:block;font:600 12px var(--iv2-mono)}
.investing-watch-copy small{display:block;margin-top:2px;color:var(--iv2-text-3);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.investing-watch-toggle,.investing-watchlist-card>.hint{margin:0;padding:6px 16px;min-height:0}
.investing-sparkline{width:52px;height:20px;flex:0 0 52px;overflow:visible}
.investing-sparkline polyline{fill:none;stroke:var(--iv2-cyan);stroke-width:1.5;vector-effect:non-scaling-stroke}
.investing-watch-row .pill{background:none;padding:0;font:500 11px var(--iv2-mono)}
.investing-watch-row .pill.good{color:var(--iv2-green)}
.investing-watch-row .pill.warning{color:var(--iv2-red)}
@container investing-watchlist (max-width:300px){.investing-sparkline{display:none}}

@media(max-width:899px){
  .investing-range-tabs button,.investing-view-tabs button,.investing-activity-tab{min-height:44px}
}
@media(max-width:619px){
  .investing-perf-controls{width:100%;justify-content:flex-start}
  .investing-range-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .investing-view-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .investing-donut-row{flex-direction:row;align-items:center;gap:8px;padding:0 10px}
  .investing-donut{width:108px;height:108px}
  .investing-legend{width:auto;min-width:0;flex:1;gap:5px;padding:6px 0}
  .investing-legend-row{gap:5px;font-size:10px}
  .investing-legend-copy{flex-direction:column;align-items:flex-start;gap:0;line-height:1.15}
  .investing-legend-copy strong{font-size:10px}
  .investing-legend-copy small{font-size:9px}
}
@media(max-width:359px){.investing-donut{width:96px;height:96px}}

/* Market Snapshot + Market News */
.investing-market-snapshot-card,.investing-news-card{display:flex;flex-direction:column}
.investing-market-snapshot-card .investing-card-heading,.investing-news-card .investing-card-heading{padding:11px 16px;border-bottom:1px solid var(--iv2-border-soft);margin:0}
.investing-market-snapshot-card .fitness-empty-state{padding:16px;min-height:0;flex:1;justify-items:center;text-align:center}
.investing-news-list{list-style:none;padding:0;margin:0;display:grid;gap:0;max-height:252px;overflow-y:auto;scrollbar-width:thin}
.investing-news-item{padding:10px 16px;border-top:1px solid var(--iv2-border-faint);min-width:0}
.investing-news-item:first-child{border-top:0}
.investing-news-item>a,.investing-news-item>span{display:block;color:var(--iv2-text);font-size:12px;font-weight:500;line-height:1.4;text-decoration:none}
.investing-news-item>a:hover{color:var(--iv2-purple);text-decoration:underline}
.investing-news-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;color:var(--iv2-text-3);font-size:10px}
.investing-news-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.investing-news-badge{padding:2px 6px;border-radius:20px;background:var(--iv2-purple-dim);color:#a78bfa;font-size:9px;white-space:nowrap}
.investing-news-badge.personal{background:rgba(52,211,153,.12);color:#6ee7b7}
.investing-news-toggle,.investing-news-status,.investing-news-empty{margin:0;padding:6px 16px;min-height:0}
.investing-news-status,.investing-news-empty{color:var(--iv2-text-3);font-size:10px}

@media(max-width:1199px){.investing-page{max-width:none}}

/* Responsive V3 section workspaces. Desktop retains the original Investing row grids and widths;
   compact screens expose one data-backed section at a time through the section navigation. */
.investing-dashboard-top{display:flex;flex-direction:column;gap:16px;min-width:0}
.investing-mobile-sections{display:none}
.investing-section-slot{display:contents}
.investing-overview-summary{display:flex;flex-direction:column;gap:12px}
.investing-performance-preview,.investing-performance-details,.investing-performance-detail-content{display:contents}
.investing-performance-preview-summary,.investing-performance-details>button{display:none}
@media(max-width:899px){
  .investing-page{display:flex;flex-direction:column;gap:10px;padding-top:10px}
  .investing-dashboard-top{gap:8px}
  .investing-section-slot{display:contents}
  .investing-overview-summary{display:flex;flex-direction:column;gap:9px}
  .investing-row{display:contents}
  .investing-page[data-investing-tab="overview"] [data-investing-section]:not([data-investing-section="overview"]),
  .investing-page[data-investing-tab="holdings"] [data-investing-section]:not([data-investing-section="holdings"]),
  .investing-page[data-investing-tab="activity"] [data-investing-section]:not([data-investing-section="activity"]),
  .investing-page[data-investing-tab="watchlist"] [data-investing-section]:not([data-investing-section="watchlist"]),
  .investing-page[data-investing-tab="insights"] [data-investing-section]:not([data-investing-section="insights"]){display:none}
  .investing-heading{gap:8px}
  .investing-heading>div:first-child>p{display:none}
  .investing-heading-actions{gap:6px;margin-top:0}
  .investing-actions-account,.investing-actions-primary{gap:6px}
  .investing-actions-primary [data-investing-menu] svg:last-child{display:none}
  .investing-market-status{font-size:10px;line-height:1.3}
  .investing-mobile-sections{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--iv2-border);border-radius:10px;background:var(--iv2-surface);position:sticky;top:0;z-index:5}
  .investing-mobile-sections button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:5px 2px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--iv2-text-2);font:600 11px/1.1 var(--iv2-font);white-space:nowrap;cursor:pointer}
  .investing-mobile-sections button[aria-current="page"]{border-color:rgba(124,92,252,.38);background:linear-gradient(135deg,rgba(124,92,252,.23),rgba(34,211,238,.08));color:var(--iv2-text)}
  .investing-mobile-sections button:focus-visible{outline:2px solid #a78bfa;outline-offset:1px}
  .investing-performance-preview{display:flex;flex-direction:column;gap:8px;min-width:0}
  .investing-performance-preview-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--iv2-border);border-radius:8px;background:linear-gradient(115deg,rgba(124,92,252,.12),rgba(34,211,238,.035)),var(--iv2-surface)}
  .investing-performance-preview-summary>.eyebrow{font:700 9px var(--iv2-font);letter-spacing:.12em;color:var(--iv2-text-3)}
  .investing-performance-preview-summary>div{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;min-width:0}
  .investing-performance-preview-summary>div>span:first-child{color:var(--iv2-text-3);font-size:10px}
  .investing-performance-preview-summary strong{color:var(--iv2-text);font:600 14px var(--iv2-mono)}
  .investing-performance-preview-summary .investing-period-change{font:500 10px var(--iv2-mono);white-space:nowrap}
  .investing-performance-details{display:flex;flex-direction:column;min-width:0}
  .investing-performance-details>button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--iv2-border);border-radius:8px;background:var(--iv2-surface);color:var(--iv2-text-2);font:600 12px var(--iv2-font);text-align:left}
  .investing-performance-details>button[aria-expanded="true"]{border-radius:8px 8px 0 0}
  .investing-performance-details>button span{color:var(--iv2-purple);transition:transform .15s ease}
  .investing-performance-details>button[aria-expanded="true"] span{transform:rotate(180deg)}
  .investing-performance-detail-content{display:none}
  .investing-performance-details.is-open>.investing-performance-detail-content{display:block}
  .investing-performance-details.is-open .investing-performance-card{border-radius:0 0 8px 8px}
  .investing-kpis{gap:7px}
  .investing-kpi{padding:9px 10px}
  .investing-performance-card{min-height:0}
  .investing-performance-card.investing-empty-card{min-height:0}
  .investing-performance-card #investing-performance-data{flex:0 0 auto}
  .investing-performance-series{flex:0 0 auto}
  .investing-performance-series .investing-perf-chart{height:124px;min-height:0;flex:0 0 124px}
  .investing-performance-card .fitness-empty-state.investing-early-state{min-height:0;padding:12px}
  .investing-performance-early{min-height:0;padding:12px}
  .investing-performance-early small{max-width:42ch}
  .investing-perf-chart{min-height:104px}
  .investing-holdings-card>.fitness-empty-state{padding:12px;gap:6px}
  .investing-holdings-card>.fitness-empty-state .fitness-empty-watermark{width:26px;height:26px}
  .investing-holdings-card>.investing-help-note{margin-top:7px}
  .investing-allocation-card .fitness-ring-empty-row{padding:10px 12px;min-height:0}
  .investing-allocation-card .fitness-ring-empty-row .fitness-ring-empty{width:38px;height:38px}
  .investing-market-snapshot-card .fitness-empty-state{padding:12px;gap:6px}
  .investing-market-snapshot-card .fitness-empty-watermark{width:26px;height:26px}
  .investing-news-empty{padding:12px 14px}
  .investing-news-status{padding:0 14px 9px}
}
@media(max-width:359px){
  .investing-mobile-sections{gap:2px;padding:3px}
  .investing-mobile-sections button{font-size:10px;letter-spacing:-.02em}
  .investing-heading h1{font-size:21px}
  .investing-heading p{font-size:12px;line-height:1.35}
  .investing-actions-primary [data-investing-menu]{font-size:12px;padding-inline:10px}
  .investing-kpi{padding:8px}
}