/*
 * Finance view stylesheet.
 *
 * Spec: .claude/specs/finance-view-redesign/ FR-01, FR-02.
 * Extracted from inline <style> block at pwa/views/finance.js:373-783 per
 * the per-view CSS-extraction discipline established in
 * utility-domain-redesign and shopping-domain-redesign.
 *
 * Token migration (FR-02) complete: all hex/rgba literals replaced with
 * var(--color-*) tokens or color-mix() tints. The only allow-listed literals
 * are the Voyager hero gradient stops in finance.js (AC-01).
 */
/* ──────────────────────────────────────────────────────────
 * Finance-specific shapes only. Generic primitives live in
 * pwa/components/ux-primitives.js (uxHeroGradient, uxStatGrid,
 * uxPill, uxAlertBanner, uxAccentCard, uxCollapseSection,
 * uxStepper, uxToggle, uxBottomSheet, uxProgressRow, uxEmpty,
 * uxSkeleton, uxSectionHeader). Migration: 2026-04-26.
 * ──────────────────────────────────────────────────────── */
/* Keyboard focus ring — single rule covers every interactive .fin-* control.
   Without this, focus falls back to browser default outline, which disappears
   on the primary blue background. Linear/Stripe-tier polish + WCAG 2.4.7. */
.fin-tab:focus-visible,
.fin-fab:focus-visible,
.fin-rule-btn:focus-visible,
.fin-rec-action-btn:focus-visible,
.fin-pipeline-btn:focus-visible,
.fin-month-btn:focus-visible,
.fin-action-sm:focus-visible,
.fin-holding-toggle:focus-visible,
.fin-burn-chip:focus-visible,
.fin-domain-pill-tone:focus-visible,
.fin-ibkr-banner-login:focus-visible,
.fin-modal-field input:focus-visible,
.fin-modal-field select:focus-visible {
  outline:2px solid var(--color-primary-fixed-dim);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce) {
  .fin-tab, .fin-fab, .fin-holding-card, .fin-holding-actions, .fin-rec-action-btn, .fin-rule-btn, .fin-price-flash {
    transition:none !important;
    animation:none !important;
  }
}
.fin-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-gutter) var(--space-gutter) var(--space-base); position:sticky; top:0; z-index:20; background:var(--bg); }
.fin-header h1 { font-size:22px; font-weight:700; }
.fin-tabs { display:flex; gap:var(--space-xs); padding:var(--space-xs) var(--space-gutter) var(--space-sm); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fin-tab { padding:var(--space-sm) var(--space-gutter); min-height:44px; border-radius:var(--radius-wide); background:var(--bg2); color:var(--hint); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; border:none; transition:all 0.15s; }
.fin-tab.active { background:var(--link); color:var(--color-on-primary); }
.fin-content { padding:0 var(--space-gutter) var(--space-md); }
/* Desktop reflow: at ≥1024px, narrow content column to ~720px and centre.
   Mobile-first design stays intact below the breakpoint. */
@media (min-width: 1024px) {
  .fin-content { max-width:720px; margin-inline:auto; padding-inline:var(--space-md); }
  .fin-header  { max-width:720px; margin-inline:auto; }
  .fin-tabs    { max-width:720px; margin-inline:auto; }
}
@keyframes priceFlash { 0% { background:color-mix(in srgb, var(--color-success) 20%, transparent); } 100% { background:transparent; } }
.fin-price-flash { animation: priceFlash 0.6s ease-out; }

/* Overview */
.fin-summary-card { background:var(--bg2); border-radius:var(--radius-lg); padding:var(--space-wide); margin-bottom:var(--space-sm); }
.fin-summary-row { display:flex; justify-content:space-between; align-items:center; }
.fin-summary-label { font-size:13px; color:var(--hint); }
.fin-summary-value { font-size:28px; font-weight:700; }
.fin-summary-sub { font-size:13px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-month-nav { display:flex; align-items:center; gap:var(--space-sm); }
.fin-month-btn { width:32px; height:32px; border-radius:var(--radius-full); background:var(--bg2); border:none; color:var(--text); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fin-month-label { font-size:15px; font-weight:600; min-width:140px; text-align:center; }

/* Budget progress bar (used inside .fin-budget-card) */
.fin-progress { height:6px; border-radius:3px; background:color-mix(in srgb, var(--color-on-surface) 8%, transparent); margin-top:var(--space-base); overflow:hidden; }
.fin-progress-bar { height:100%; border-radius:3px; transition:width 0.3s; }

.fin-forecast { background:var(--bg2); border-radius:var(--radius-roomy); padding:var(--space-roomy) var(--space-gutter); margin-top:var(--space-sm); }
.fin-forecast h3 { font-size:14px; font-weight:600; margin-bottom:var(--space-snug); }
.fin-forecast-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-forecast-row:last-child { border-bottom:none; }

/* Section title — finance variant uses 13px/600 (ux-section-header is 11px/700, a different rhythm).
 * Kept finance-specific so callers' inline flex/space-between overrides for action buttons keep
 * the original visual proportions. */
.fin-section-title { font-size:13px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin:16px 0 8px; }

/* Quick add expense button */
.fin-fab { position:fixed; bottom:80px; right:var(--space-gutter); width:52px; height:52px; border-radius:var(--radius-full); background:var(--link); color:var(--color-on-primary); border:none; font-size:24px; cursor:pointer; z-index:50; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px color-mix(in srgb, var(--color-scrim) 30%, transparent); }

/* Recurring */
.fin-rule-card { background:var(--bg2); border-radius:var(--radius-roomy); padding:var(--space-roomy) var(--space-gutter); margin-bottom:var(--space-base); }
.fin-rule-header { display:flex; align-items:center; gap:var(--space-snug); cursor:pointer; }
.fin-rule-info { flex:1; min-width:0; }
.fin-rule-name { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-rule-meta { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); display:flex; gap:var(--space-base); flex-wrap:wrap; }
.fin-rule-amount { font-size:15px; font-weight:600; white-space:nowrap; }
.fin-freq-badge { display:inline-block; padding:var(--space-hairline) var(--space-base); border-radius:var(--radius-default); font-size:11px; font-weight:600; background:color-mix(in srgb, var(--color-primary) 15%, transparent); color:var(--link); }
.fin-rule-actions { display:flex; gap:var(--space-base); margin-top:var(--space-snug); padding-top:var(--space-snug); border-top:1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.fin-rule-btn { flex:1; padding:var(--space-base); border-radius:var(--radius-snug); border:none; font-size:13px; font-weight:600; cursor:pointer; transition:background 0.15s; }
/* Pay = primary action (filled). Other actions are demoted (ghost) so the user's
   eye is drawn to one decision per row. Stripe pattern. */
.fin-rule-btn.pay { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
.fin-rule-btn.ghost { background:transparent; color:var(--hint); }
.fin-rule-btn.ghost:hover { background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); color:var(--text); }
.fin-rule-btn.edit { background:color-mix(in srgb, var(--color-primary) 15%, transparent); color:var(--link); }
.fin-rule-btn.pause { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
/* Delete = destructive, demoted to icon-only kebab so it never competes with Pay. */
.fin-rule-btn.delete { background:transparent; color:var(--hint); flex:0 0 36px; padding:var(--space-base) 0; font-size:18px; line-height:1; }
.fin-rule-btn.delete:hover { background:color-mix(in srgb, var(--color-error) 10%, transparent); color:var(--color-error); }
/* Init-hidden state — `pointer-events:none` distinguishes this rule
   from the global `.hidden` shape (state toggled to .open by JS). */
.fin-rule-expand { display:none; pointer-events:none; }
.fin-rule-expand.open { display:block; pointer-events:auto; }
.fin-rule-detail { font-size:13px; color:var(--hint); margin-top:var(--space-xs); }
.fin-due-badge { display:inline-block; padding:var(--space-hairline) var(--space-base); border-radius:var(--radius-default); font-size:11px; font-weight:600; }
.fin-due-badge.soon { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
.fin-due-badge.overdue { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
.fin-due-badge.ok { background:color-mix(in srgb, var(--color-success) 10%, transparent); color:var(--color-success); }
.fin-inactive { opacity:0.5; }

/* Upcoming timeline */
.fin-timeline { margin-top:var(--space-sm); }
.fin-timeline-item { display:flex; gap:var(--space-sm); padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); align-items:center; }
.fin-timeline-date { width:48px; font-size:12px; font-weight:600; color:var(--hint); flex-shrink:0; }
.fin-timeline-name { flex:1; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-timeline-amount { font-size:14px; font-weight:600; white-space:nowrap; }

/* Budgets */
.fin-budget-card { background:var(--bg2); border-radius:var(--radius-roomy); padding:var(--space-gutter); margin-bottom:var(--space-snug); }
.fin-budget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-base); }
.fin-budget-domain { font-size:15px; font-weight:600; }
.fin-budget-status { font-size:11px; font-weight:600; padding:3px 8px; border-radius:var(--radius-default); }
.fin-budget-status.on-track { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
.fin-budget-status.warning { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
.fin-budget-status.exceeded { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
.fin-budget-amounts { display:flex; justify-content:space-between; font-size:13px; color:var(--hint); margin-top:var(--space-tight); }
.fin-budget-actions { display:flex; gap:var(--space-base); margin-top:var(--space-snug); }
.fin-budget-btn { padding:var(--space-base) var(--space-roomy); border-radius:var(--radius-snug); border:none; font-size:13px; font-weight:600; cursor:pointer; }

/* Portfolio */
.fin-portfolio-card { background:var(--bg2); border-radius:var(--radius-lg); padding:var(--space-wide); margin-bottom:var(--space-sm); border:1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.fin-portfolio-card .fin-nav-amount { font-size:32px; font-weight:800; letter-spacing:-0.5px; }
.fin-holding-shell { margin-bottom:var(--space-base); border-radius:var(--radius-roomy); overflow:hidden; touch-action:pan-y; }
.fin-holding-card { background:var(--bg2); border-radius:var(--radius-roomy); overflow:hidden; display:flex; transition:transform 0.18s ease; }
.fin-holding-accent { width:4px; flex-shrink:0; }
.fin-holding-body { flex:1; padding:var(--space-sm) var(--space-roomy); display:flex; align-items:center; gap:var(--space-sm); min-width:0; }
.fin-holding-left { min-width:0; flex:1 1 38%; }
.fin-holding-ticker { font-size:15px; font-weight:700; }
.fin-holding-name { font-size:11px; color:var(--hint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; margin-top:1px; }
.fin-holding-badges { display:flex; gap:var(--space-xs); margin-top:3px; flex-wrap:wrap; }
.fin-signal-row { margin-top:var(--space-hairline); }
.fin-signal-badge { font-size:10px; padding:1px 5px; border-radius:var(--radius-tight); background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); font-weight:600; white-space:nowrap; }
.fin-holding-mid { flex:1; min-width:0; }
.fin-holding-mid-row { font-size:12px; color:var(--hint); display:flex; gap:var(--space-base); flex-wrap:wrap; }
.fin-holding-right { text-align:right; flex-shrink:0; }
.fin-holding-mkt { font-size:15px; font-weight:700; }
.fin-holding-pnl-line { font-size:12px; margin-top:1px; }
.fin-holding-day { font-size:11px; margin-top:1px; }
.fin-holding-toggle { margin-top:var(--space-tight); font-size:10px; font-weight:700; letter-spacing:0.2px; border:none; border-radius:var(--radius-pill); padding:3px 9px; background:color-mix(in srgb, var(--color-on-surface) 8%, transparent); color:var(--hint); cursor:pointer; }
.fin-holding-toggle:active { opacity:0.75; }
.fin-pnl-pos { color:var(--color-success); }
.fin-pnl-neg { color:var(--color-error); }

/* Position Detail Modal */
.fin-detail-overlay { position:fixed; inset:0; background:color-mix(in srgb, var(--color-scrim) 70%, transparent); z-index:200; display:flex; align-items:flex-end; justify-content:center; }
.fin-detail-modal { background:var(--bg); border-radius:20px 20px 0 0; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:20px 16px 32px; }
.fin-detail-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--space-gutter); }
.fin-detail-symbol { font-size:24px; font-weight:800; }
.fin-detail-name { font-size:13px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-detail-price { font-size:20px; font-weight:700; text-align:right; }
.fin-detail-close { width:32px; height:32px; border-radius:var(--radius-full); background:var(--bg2); border:none; color:var(--text); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fin-detail-section { margin-top:var(--space-sm); }
.fin-detail-section-title { font-size:12px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:var(--space-base); }
.fin-detail-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-base); }
.fin-detail-metric { background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug); }
.fin-detail-metric-label { font-size:10px; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
.fin-detail-metric-val { font-size:14px; font-weight:600; margin-top:var(--space-hairline); }
.fin-detail-list-item { padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); font-size:13px; }
.fin-detail-chart { width:100%; height:120px; background:var(--bg2); border-radius:var(--radius-md); overflow:hidden; position:relative; }
.fin-chart-tooltip { position:absolute; pointer-events:none; background:color-mix(in srgb, var(--color-scrim) 85%, transparent); color:var(--color-on-surface); padding:var(--space-xs) var(--space-base); border-radius:var(--radius-tight); font-size:11px; white-space:nowrap; transform:translateX(-50%); z-index:5; top:var(--space-xs); display:none; }
.fin-chart-crosshair { position:absolute; top:0; bottom:0; width:1px; background:color-mix(in srgb, var(--color-on-surface) 30%, transparent); pointer-events:none; display:none; z-index:4; }

/* Collapsible sections — see uxCollapseSection (ux-collapse-*) */
.fin-sentiment-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; margin:4px 0; background:color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-sentiment-bull { background:var(--color-success); }
.fin-sentiment-bear { background:var(--color-error); }
.fin-mini-chart { width:60px; height:24px; flex-shrink:0; }
.fin-summary-stat { font-size:11px; color:var(--text); font-weight:600; white-space:nowrap; }
.fin-summary-label { font-size:10px; color:var(--hint); }

/* Trade Form & Order Cards */
.fin-pill-btn { font-size:12px; font-weight:600; padding:var(--space-xs) var(--space-snug); border-radius:var(--radius-default); border:1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); background:var(--bg2); color:var(--text); cursor:pointer; transition:all 0.15s; }
.fin-pill-btn.active { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary); }
.fin-pill-btn:active { opacity:0.7; }
.fin-action-sm { font-size:11px; font-weight:600; padding:var(--space-xs) var(--space-base); border-radius:7px; border:1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); background:var(--bg2); color:var(--hint); cursor:pointer; }
.fin-action-sm:active { opacity:0.7; }
.fin-action-sm.delete { color:var(--color-error); border-color:color-mix(in srgb, var(--color-error) 20%, transparent); }
.fin-holding-actions { display:flex; gap:var(--space-tight); max-height:0; opacity:0; overflow:hidden; transform:translateY(-8px); padding:0 10px; pointer-events:none; transition:max-height 0.22s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.22s ease; }
.fin-holding-actions .fin-action-sm { flex:1; min-width:0; }
.fin-holding-shell.open .fin-holding-actions,
.fin-holding-shell:focus-within .fin-holding-actions { max-height:56px; opacity:1; transform:translateY(0); padding:var(--space-tight) var(--space-snug) 8px; pointer-events:auto; }
.fin-holding-shell.open .fin-holding-card { border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
@media (hover:hover) and (pointer:fine) {
  .fin-holding-shell:hover .fin-holding-actions { max-height:56px; opacity:1; transform:translateY(0); padding:var(--space-tight) var(--space-snug) 8px; pointer-events:auto; }
  .fin-holding-shell:hover .fin-holding-card { transform:translateY(-1px); }
}
@media (max-width: 560px) {
  .fin-holding-body { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'identity value' 'metrics value'; align-items:start; gap:6px 10px; padding:var(--space-snug) var(--space-sm); }
  .fin-holding-left { grid-area:identity; min-width:0; }
  .fin-holding-mid { grid-area:metrics; }
  .fin-holding-right { grid-area:value; align-self:center; }
  .fin-holding-name { max-width:100%; }
  .fin-holding-mid-row { font-size:11px; gap:var(--space-base); }
  .fin-holding-mkt { font-size:14px; }
  .fin-holding-pnl-line { font-size:11px; }
  .fin-holding-day { font-size:10px; }
  .fin-action-sm { font-size:10px; padding:4px 6px; }
  .fin-holding-toggle { margin-top:var(--space-xs); font-size:10px; padding:2px 7px; }
}
@media (max-width: 380px) {
  .fin-holding-badges { gap:3px; }
  .fin-holding-badges .fin-sector-badge,
  .fin-holding-badges .fin-pe-badge,
  .fin-holding-badges .fin-analyst-badge { font-size:9px; padding:2px 5px; }
}
.fin-order-card { background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); margin-bottom:var(--space-tight); }
.fin-order-top { display:flex; justify-content:space-between; align-items:center; }
.fin-order-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-tight); }
.fin-preview-box { background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-sm); margin-top:var(--space-base); }
.fin-preview-title { font-size:12px; font-weight:700; color:var(--hint); text-transform:uppercase; margin-bottom:var(--space-base); }
.fin-preview-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }

/* Recommendation Cards — v3 Voyager Midnight muted accent palette */
.fin-rec-card { background:color-mix(in srgb, var(--color-surface-container-low) 40%, transparent); border:1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent); border-radius:var(--radius-md); padding:var(--space-gutter); margin-bottom:var(--space-base); border-left:4px solid var(--color-on-surface-variant); }
.fin-rec-card.buy { border-left-color:var(--color-success); }
.fin-rec-card.sell { border-left-color:var(--color-error); }
.fin-rec-card.trim { border-left-color:var(--color-warning); }
.fin-rec-card.hold { border-left-color:var(--color-primary); }
.fin-rec-card.portfolio { border-left-color:var(--color-tertiary); }
.fin-rec-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-xs); }
.fin-rec-title { font-size:13px; font-weight:600; }
.fin-rec-badge { font-size:10px; font-weight:700; padding:var(--space-hairline) var(--space-base); border-radius:var(--radius-tight); text-transform:uppercase; }
.fin-rec-badge.buy { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
.fin-rec-badge.sell { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
.fin-rec-badge.trim { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
.fin-rec-badge.hold { background:color-mix(in srgb, var(--color-primary) 15%, transparent); color:var(--color-primary); }
.fin-rec-rationale { font-size:12px; color:var(--hint); line-height:1.4; }
.fin-rec-meta { font-size:10px; color:var(--hint); margin-top:var(--space-xs); display:flex; gap:var(--space-base); }
.fin-insights-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-base); }
.fin-insights-refresh { font-size:11px; color:var(--link); background:none; border:none; cursor:pointer; padding:var(--space-xs) var(--space-base); }
.fin-insights-refresh[disabled] { opacity:0.55; cursor:not-allowed; }
.fin-cockpit-grid { display:grid; grid-template-columns:1fr; gap:var(--space-snug); margin-bottom:var(--space-sm); }
@media (min-width: 980px) { .fin-cockpit-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.fin-cockpit-lane { background:var(--bg2); border-radius:var(--radius-md); padding:var(--space-snug); border:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-cockpit-lane-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-base); }
.fin-cockpit-count { font-size:10px; font-weight:700; color:var(--hint); letter-spacing:0.4px; text-transform:uppercase; }
.fin-hz-chip { font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--radius-pill); letter-spacing:0.3px; text-transform:uppercase; }
.fin-hz-chip.short { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
.fin-hz-chip.medium { background:color-mix(in srgb, var(--color-primary) 15%, transparent); color:var(--color-primary); }
.fin-hz-chip.long { background:color-mix(in srgb, var(--color-tertiary) 20%, transparent); color:var(--color-tertiary-fixed-dim); }
.fin-rec-card.compact { margin-bottom:var(--space-tight); }
.fin-rec-card:last-child { margin-bottom:0; }
.fin-rec-actions { display:flex; justify-content:flex-end; gap:var(--space-tight); margin-top:var(--space-base); }
.fin-rec-action-btn { font-size:10px; font-weight:700; border-radius:var(--radius-pill); border:1px solid color-mix(in srgb, var(--color-on-surface) 12%, transparent); background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); color:var(--hint); padding:3px 8px; cursor:pointer; }
.fin-rec-action-btn.danger { color:var(--color-error); border-color:color-mix(in srgb, var(--color-error) 25%, transparent); }
.fin-cockpit-empty { font-size:12px; color:var(--hint); padding:var(--space-base) var(--space-hairline); }
.fin-cockpit-more { font-size:11px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-plan-wrap { background:var(--bg2); border-radius:var(--radius-md); padding:var(--space-snug); margin-bottom:var(--space-sm); }
.fin-plan-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-base); gap:var(--space-base); flex-wrap:wrap; }
/* .fin-plan-controls → .base-row in pwa/styles/base.css. Markup composes both. */
.fin-plan-select { background:color-mix(in srgb, var(--color-on-surface) 5%, transparent); color:var(--text); border:1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius:var(--radius-default); padding:var(--space-xs) var(--space-base); font-size:11px; }
.fin-plan-btn { font-size:11px; color:var(--link); background:none; border:none; cursor:pointer; padding:var(--space-xs) var(--space-base); }
.fin-plan-btn[disabled] { opacity:0.55; cursor:not-allowed; }
.fin-plan-actions-row { display:flex; gap:var(--space-tight); flex-wrap:wrap; margin-bottom:var(--space-base); }
.fin-plan-pill { font-size:10px; font-weight:700; border-radius:var(--radius-pill); padding:3px 8px; border:1px solid color-mix(in srgb, var(--color-on-surface) 12%, transparent); color:var(--hint); background:color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-plan-pill.pending { color:var(--color-on-warning-container); border-color:color-mix(in srgb, var(--color-on-warning-container) 40%, transparent); }
.fin-plan-pill.previewed { color:var(--color-secondary); border-color:color-mix(in srgb, var(--color-secondary) 40%, transparent); }
.fin-plan-pill.placed { color:var(--color-success); border-color:color-mix(in srgb, var(--color-success) 40%, transparent); }
.fin-plan-pill.blocked, .fin-plan-pill.failed { color:var(--color-error); border-color:color-mix(in srgb, var(--color-error) 40%, transparent); }
.fin-plan-pill.snoozed, .fin-plan-pill.skipped { color:var(--color-warning); border-color:color-mix(in srgb, var(--color-warning) 40%, transparent); }
.fin-plan-stage { border:1px solid color-mix(in srgb, var(--color-on-surface) 7%, transparent); border-radius:var(--radius-snug); padding:var(--space-base); margin-bottom:var(--space-base); }
.fin-plan-stage:last-child { margin-bottom:0; }
.fin-plan-stage-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-base); }
.fin-plan-summary { font-size:11px; color:var(--hint); display:flex; gap:var(--space-base); flex-wrap:wrap; }
.fin-plan-action { background:color-mix(in srgb, var(--color-on-surface) 3%, transparent); border-radius:var(--radius-default); padding:var(--space-base); margin-bottom:var(--space-tight); }
.fin-plan-action:last-child { margin-bottom:0; }
.fin-plan-row { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-base); }
.fin-plan-title { font-size:12px; font-weight:600; }
.fin-plan-meta { font-size:10px; color:var(--hint); margin-top:var(--space-xs); display:flex; gap:var(--space-base); flex-wrap:wrap; }
.fin-plan-side { font-size:10px; font-weight:700; border-radius:var(--radius-pill); padding:var(--space-hairline) var(--space-base); text-transform:uppercase; }
.fin-plan-side.buy { background:color-mix(in srgb, var(--color-success) 16%, transparent); color:var(--color-success); }
.fin-plan-side.sell { background:color-mix(in srgb, var(--color-error) 16%, transparent); color:var(--color-error); }
.fin-plan-side.neutral { background:color-mix(in srgb, var(--color-on-surface) 12%, transparent); color:var(--hint); }
.fin-plan-status { font-size:10px; font-weight:700; border-radius:var(--radius-pill); padding:var(--space-hairline) var(--space-base); text-transform:uppercase; border:1px solid color-mix(in srgb, var(--color-on-surface) 14%, transparent); color:var(--hint); }
.fin-plan-status.pending { color:var(--color-on-warning-container); border-color:color-mix(in srgb, var(--color-on-warning-container) 50%, transparent); }
.fin-plan-status.previewed { color:var(--color-secondary); border-color:color-mix(in srgb, var(--color-secondary) 45%, transparent); }
.fin-plan-status.placed { color:var(--color-success); border-color:color-mix(in srgb, var(--color-success) 45%, transparent); }
.fin-plan-status.blocked, .fin-plan-status.failed { color:var(--color-error); border-color:color-mix(in srgb, var(--color-error) 45%, transparent); }
.fin-plan-status.snoozed, .fin-plan-status.skipped { color:var(--color-warning); border-color:color-mix(in srgb, var(--color-warning) 45%, transparent); }
.fin-plan-action-controls { display:flex; gap:var(--space-tight); flex-wrap:wrap; margin-top:var(--space-tight); }
.fin-plan-alt { margin-top:var(--space-base); font-size:11px; color:var(--hint); display:flex; gap:var(--space-tight); flex-wrap:wrap; }
.fin-plan-alt-item { background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); border-radius:var(--radius-pill); padding:3px 8px; }

/* Pipeline Stepper */
.fin-stepper { margin-bottom:var(--space-roomy); }
.fin-stepper-summary {
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-sm);
  margin-bottom:var(--space-snug); padding:var(--space-snug) var(--space-sm); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-on-surface) 4%, transparent); border:1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.fin-stepper-summary-title { font-size:12px; font-weight:700; color:var(--text); margin-bottom:var(--space-xs); }
.fin-stepper-summary-copy { font-size:11px; color:var(--hint); line-height:1.45; }
.fin-stepper-summary-meta { display:flex; gap:var(--space-tight); flex-wrap:wrap; justify-content:flex-end; }
.fin-stepper-summary-meta span {
  font-size:10px; font-weight:700; color:var(--hint);
  background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); border-radius:var(--radius-pill); padding:var(--space-xs) var(--space-base);
}
/* Pipeline stepper nav — see uxStepper (ux-stepper-*) */
.fin-stepper-body { min-height:60px; }
.fin-conviction { font-size:9px; font-weight:700; border-radius:var(--radius-sm); padding:1px 5px; margin-left:var(--space-xs); }
.fin-conviction.high { background:color-mix(in srgb, var(--color-success) 18%, transparent); color:var(--color-success); }
.fin-conviction.med { background:color-mix(in srgb, var(--color-on-warning-container) 18%, transparent); color:var(--color-on-warning-container); }
.fin-conviction.low { background:color-mix(in srgb, var(--color-warning) 18%, transparent); color:var(--color-warning); }
.fin-gate-summary { display:flex; gap:var(--space-snug); margin-bottom:var(--space-snug); }
.fin-gate-chip { font-size:11px; font-weight:600; padding:var(--space-xs) var(--space-snug); border-radius:var(--radius-default); }
.fin-gate-chip.pass { background:color-mix(in srgb, var(--color-success) 12%, transparent); color:var(--color-success); }
.fin-gate-chip.warn { background:color-mix(in srgb, var(--color-warning) 12%, transparent); color:var(--color-warning); }
.fin-gate-chip.block { background:color-mix(in srgb, var(--color-error) 12%, transparent); color:var(--color-error); }
.fin-gate-detail { font-size:11px; color:var(--hint); margin-top:var(--space-xs); }
.fin-gate-row { display:flex; align-items:center; gap:var(--space-tight); padding:2px 0; }
.fin-gate-icon { width:14px; text-align:center; }
.fin-exec-summary { background:var(--bg2); border-radius:var(--radius-md); padding:var(--space-sm); margin-top:var(--space-snug); }
.fin-exec-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
.fin-urgency { font-size:9px; font-weight:700; border-radius:var(--radius-sm); padding:1px 5px; text-transform:uppercase; }
.fin-urgency.now { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
.fin-urgency.soon { background:color-mix(in srgb, var(--color-on-warning-container) 15%, transparent); color:var(--color-on-warning-container); }
.fin-urgency.watch { background:color-mix(in srgb, var(--color-tertiary) 15%, transparent); color:var(--color-tertiary-fixed-dim); }
.fin-alloc-bar { display:flex; height:28px; border-radius:var(--radius-snug); overflow:hidden; margin:8px 0; background:color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-alloc-segment { height:100%; transition:width 0.3s; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:color-mix(in srgb, var(--color-on-surface) 90%, transparent); overflow:hidden; white-space:nowrap; text-shadow:0 1px 2px color-mix(in srgb, var(--color-scrim) 50%, transparent); }
.fin-alloc-legend { display:flex; flex-wrap:wrap; gap:var(--space-tight); margin:6px 0 12px; }
.fin-alloc-legend-item { display:flex; align-items:center; gap:var(--space-xs); font-size:11px; color:var(--hint); }
.fin-alloc-dot { width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0; }
.fin-sort-bar { display:flex; gap:var(--space-xs); margin-bottom:var(--space-base); }
.fin-sort-btn { padding:var(--space-xs) var(--space-snug); border-radius:var(--radius-default); background:color-mix(in srgb, var(--color-on-surface) 5%, transparent); border:none; color:var(--hint); font-size:11px; font-weight:600; cursor:pointer; transition:all 0.15s; }
.fin-sort-btn.active { background:color-mix(in srgb, var(--color-primary) 20%, transparent); color:var(--link); }
.fin-group-title { font-size:12px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin:14px 0 6px; display:flex; align-items:center; gap:var(--space-tight); }

/* Market Pulse */
.fin-market-pulse { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-gutter); background:var(--bg2); border-radius:var(--radius-roomy); margin-bottom:var(--space-sm); flex-wrap:wrap; }
.fin-market-dot { width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0; }
.fin-market-dot.open { background:var(--color-success); box-shadow:0 0 6px color-mix(in srgb, var(--color-success) 50%, transparent); }
.fin-market-dot.closed { background:var(--color-on-surface-variant); }
.fin-market-status { font-size:12px; font-weight:600; margin-right:auto; }
.fin-fg-badge { padding:var(--space-xs) var(--space-snug); border-radius:var(--radius-snug); font-size:12px; font-weight:700; }
.fin-fg-extreme-fear { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
.fin-fg-fear { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
.fin-fg-neutral { background:color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent); color:var(--color-on-surface-variant); }
.fin-fg-greed { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
.fin-fg-extreme-greed { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
.fin-market-indicator { font-size:12px; color:var(--hint); display:flex; align-items:center; gap:var(--space-xs); }
.fin-market-indicator b { color:var(--text); }

/* Earnings Banner */
.fin-earnings-banner { background:color-mix(in srgb, var(--color-warning) 8%, transparent); border:1px solid color-mix(in srgb, var(--color-warning) 15%, transparent); border-radius:var(--radius-md); padding:var(--space-snug) var(--space-roomy); margin-bottom:var(--space-sm); }
.fin-earnings-banner-title { font-size:12px; font-weight:600; color:var(--color-warning); margin-bottom:var(--space-tight); }
.fin-earnings-item { font-size:13px; display:flex; justify-content:space-between; padding:3px 0; }

/* Analyst badge */
.fin-analyst-badge { display:inline-block; padding:var(--space-hairline) var(--space-tight); border-radius:var(--radius-tight); font-size:10px; font-weight:700; line-height:1.2; }
.fin-analyst-badge.strong-buy { background:color-mix(in srgb, var(--color-success) 20%, transparent); color:var(--color-success); }
.fin-analyst-badge.buy { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
.fin-analyst-badge.hold { background:color-mix(in srgb, var(--color-on-surface-variant) 12%, transparent); color:var(--color-on-surface-variant); }
.fin-analyst-badge.sell { background:color-mix(in srgb, var(--color-error) 12%, transparent); color:var(--color-error); }
.fin-analyst-badge.strong-sell { background:color-mix(in srgb, var(--color-error) 20%, transparent); color:var(--color-error); }

/* Sector badge */
.fin-sector-badge { display:inline-block; padding:var(--space-hairline) var(--space-tight); border-radius:var(--radius-tight); font-size:10px; color:var(--hint); background:color-mix(in srgb, var(--color-on-surface) 5%, transparent); }
.fin-pe-badge { display:inline-block; padding:var(--space-hairline) var(--space-tight); border-radius:var(--radius-tight); font-size:10px; font-weight:600; color:var(--hint); background:color-mix(in srgb, var(--color-on-surface) 5%, transparent); }

/* Sparkline */
.fin-sparkline { width:60px; height:24px; flex-shrink:0; }

/* Activity section */
.fin-activity { background:var(--bg2); border-radius:var(--radius-roomy); padding:var(--space-roomy) var(--space-gutter); margin-top:var(--space-sm); }
.fin-activity-header { font-size:14px; font-weight:600; margin-bottom:var(--space-base); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.fin-activity-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:12px; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-activity-row:last-child { border-bottom:none; }

/* ETF Breakdown */
.fin-etf-expand { display:none; padding:10px 0; }
.fin-etf-expand.open { display:block; }
.fin-etf-bar { height:8px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); overflow:hidden; margin:4px 0 2px; }
.fin-etf-bar-fill { height:100%; border-radius:var(--radius-sm); }

/* Macro Dashboard */
.fin-macro-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-base); margin-top:var(--space-base); }
.fin-macro-item { background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); }
.fin-macro-label { font-size:11px; color:var(--hint); }
.fin-macro-value { font-size:16px; font-weight:700; margin-top:var(--space-hairline); }
.fin-group-title span { flex:1; height:1px; background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.fin-rebal-trade { display:flex; justify-content:space-between; padding:8px 0; font-size:13px; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-rebal-buy { color:var(--color-success); }
.fin-rebal-sell { color:var(--color-error); }
.fin-total-return { display:flex; align-items:baseline; gap:var(--space-base); margin-top:var(--space-xs); }
.fin-total-return-pct { font-size:22px; font-weight:700; }
.fin-total-return-amt { font-size:14px; }

/* Modal — see uxBottomSheet (ux-bottom-sheet-*).
 * .fin-modal-field is finance-specific because its inputs/selects share unified styling. */
.fin-modal-field { margin-bottom:var(--space-roomy); }
.fin-modal-field label { display:block; font-size:13px; color:var(--hint); margin-bottom:var(--space-xs); font-weight:600; }
.fin-modal-field input, .fin-modal-field select { width:100%; padding:var(--space-snug) var(--space-sm); border-radius:var(--radius-snug); border:1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); background:var(--bg2); color:var(--text); font-size:15px; outline:none; box-sizing:border-box; }
.fin-modal-field input:focus, .fin-modal-field select:focus { border-color:var(--link); }
.fin-modal-row { display:flex; gap:var(--space-snug); }
.fin-modal-row .fin-modal-field { flex:1; }
/* Inline status inside modals — uxBottomSheet has its own status slot but legacy
 * income/invoice modals still toggle .fin-inline-status via display:block. */
.fin-inline-status { display:none; margin-top:var(--space-snug); padding:var(--space-base) var(--space-snug); border-radius:var(--radius-snug); font-size:12px; font-weight:600; }
.fin-inline-status.pending { display:block; background:color-mix(in srgb, var(--color-primary) 14%, transparent); color:var(--color-primary-fixed-dim); }
.fin-inline-status.error { display:block; background:color-mix(in srgb, var(--color-error) 14%, transparent); color:var(--color-error); }
.fin-inline-status.success { display:block; background:color-mix(in srgb, var(--color-success) 14%, transparent); color:var(--color-success); }

/* Toggle — adapter pattern. Same geometry + .on state class as uxToggle, but
   declares its own selector so finance.js's data-fin-act="toggleSelf"/
   "toggleAutoLog"/"toggleEmailNotify" click delegation owns state mutation.
   Migrating to uxToggle() directly would require swapping to data-ux-toggle
   and registering a global handler — out-of-scope for the per-view dispatch. */
.fin-toggle { position:relative; width:44px; height:26px; border-radius:13px; background:color-mix(in srgb, var(--color-on-surface) 15%, transparent); cursor:pointer; flex-shrink:0; transition:background 0.2s; border:none; padding:0; }
.fin-toggle.on { background:var(--color-success); }
.fin-toggle::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:var(--radius-full); background:var(--color-on-primary); transition:transform 0.2s; }
.fin-toggle.on::after { transform:translateX(18px); }

/* Hero card chart/legend overlay — sits inside ux-hero-gradient via #finHeroChartHost slot */
.fin-hero-chart { margin-top:var(--space-gutter); height:100px; position:relative; }
.fin-hero-legend { display:flex; align-items:center; justify-content:center; gap:var(--space-tight); margin-top:var(--space-base); font-size:11px; color:color-mix(in srgb, var(--color-on-surface) 40%, transparent); }
.fin-hero-legend-dot { width:6px; height:6px; border-radius:var(--radius-full); background:var(--color-primary); }

/* Smart Insights */
.fin-insights-section { margin-bottom:var(--space-gutter); }
.fin-insights-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-snug); }
.fin-insights-title { font-size:18px; font-weight:700; }
.fin-insights-see-all { font-size:13px; color:var(--link); background:none; border:none; cursor:pointer; font-weight:600; padding:4px 0; }
.fin-insights-scroll { display:flex; gap:var(--space-snug); overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-xs); scrollbar-width:none; }
.fin-insights-scroll::-webkit-scrollbar { display:none; }
.fin-insight-card { min-width:160px; max-width:180px; background:var(--bg2); border-radius:var(--radius-roomy); padding:var(--space-roomy); flex-shrink:0; }
.fin-insight-icon { width:36px; height:36px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:var(--space-snug); }
.fin-insight-text { font-size:12px; color:var(--hint); line-height:1.4; }

/* Domain Grid */
/* .fin-domain-grid migrated 2026-05-03 to .base-attr-grid (pwa/styles/base.css).
   The per-view class is unused — markup composes with .base-attr-grid directly. */
.fin-dgc { background:var(--bg2); border-radius:var(--radius-lg); padding:var(--space-roomy); cursor:pointer; transition:transform 0.1s; border:1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent); }
.fin-dgc:active { transform:scale(0.97); }
.fin-dgc-top { display:flex; align-items:center; gap:var(--space-snug); margin-bottom:var(--space-snug); }
.fin-dgc-icon { width:36px; height:36px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.fin-dgc-info { flex:1; min-width:0; display:flex; align-items:baseline; justify-content:space-between; }
.fin-dgc-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-dgc-pct { font-size:12px; color:var(--hint); flex-shrink:0; margin-left:var(--space-xs); }
.fin-dgc-ring { display:flex; justify-content:center; margin-bottom:var(--space-base); }
.fin-dgc-ring svg { overflow:visible; }
.fin-dgc-amounts { font-size:12px; color:var(--hint); text-align:center; }
.fin-dgc-detail { margin-top:var(--space-snug); padding-top:var(--space-snug); border-top:1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.fin-dgc-detail-row { display:flex; justify-content:space-between; padding:3px 0; font-size:12px; color:var(--hint); }

/* Monthly burn hero (recurring tab) */
.fin-burn-hero { background:var(--bg2); border-radius:var(--radius-lg); padding:var(--space-roomy) var(--space-gutter); margin-bottom:var(--space-gutter); display:flex; align-items:center; gap:var(--space-sm); }
.fin-burn-hero-amt { font-size:24px; font-weight:800; flex-shrink:0; }
.fin-burn-hero-meta { flex:1; min-width:0; }
.fin-burn-hero-title { font-size:13px; font-weight:600; }
.fin-burn-hero-sub { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-burn-chips { display:flex; gap:var(--space-tight); flex-wrap:wrap; margin-top:var(--space-snug); }
.fin-burn-chip { font-size:11px; font-weight:600; padding:var(--space-xs) var(--space-snug); border-radius:var(--radius-pill); background:color-mix(in srgb, var(--color-on-surface) 7%, transparent); color:var(--hint); white-space:nowrap; }
.fin-burn-chip.due-soon { background:color-mix(in srgb, var(--color-warning) 14%, transparent); color:var(--color-warning); }
.fin-burn-chip.overdue { background:color-mix(in srgb, var(--color-error) 14%, transparent); color:var(--color-error); }

/* Upcoming timeline (top of recurring) */
.fin-upcoming-strip { margin-bottom:var(--space-wide); }
.fin-upcoming-scroll { display:flex; gap:var(--space-base); overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-xs); scrollbar-width:none; }
.fin-upcoming-scroll::-webkit-scrollbar { display:none; }
.fin-upcoming-chip { flex-shrink:0; background:var(--bg2); border-radius:var(--radius-md); padding:var(--space-snug) var(--space-sm); min-width:100px; border:1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent); }
.fin-upcoming-chip.overdue { border-color:color-mix(in srgb, var(--color-error) 25%, transparent); }
.fin-upcoming-chip.soon { border-color:color-mix(in srgb, var(--color-warning) 25%, transparent); }
.fin-upcoming-chip-date { font-size:11px; font-weight:700; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
.fin-upcoming-chip-name { font-size:13px; font-weight:600; margin-top:var(--space-hairline); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.fin-upcoming-chip-amt { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }

/* Budget arc card */
.fin-bud-card { background:var(--bg2); border-radius:var(--radius-lg); padding:var(--space-gutter); margin-bottom:var(--space-snug); border:1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent); }
.fin-bud-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-sm); }
.fin-bud-domain { font-size:15px; font-weight:600; }
.fin-bud-status { font-size:11px; font-weight:600; padding:3px 8px; border-radius:var(--radius-default); }
.fin-bud-status.on-track { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
.fin-bud-status.warning { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
.fin-bud-status.exceeded { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
.fin-bud-body { display:flex; align-items:center; gap:var(--space-gutter); }
.fin-bud-arc { flex-shrink:0; }
.fin-bud-amounts { flex:1; min-width:0; }
.fin-bud-spent { font-size:20px; font-weight:700; }
.fin-bud-budget { font-size:13px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-bud-left { font-size:13px; font-weight:600; margin-top:var(--space-xs); }
.fin-bud-actions { display:flex; gap:var(--space-base); margin-top:var(--space-sm); padding-top:var(--space-sm); border-top:1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent); }

/* Cashflow bar chart */
.fin-cf-chart { width:100%; position:relative; }
.fin-cf-bars { display:flex; align-items:flex-end; gap:var(--space-xs); height:90px; padding:0 2px; }
.fin-cf-bar-group { flex:1; display:flex; gap:var(--space-hairline); align-items:flex-end; }
.fin-cf-bar { border-radius:4px 4px 0 0; min-width:6px; transition:height 0.3s ease; }
.fin-cf-bar.income { background:var(--color-success); opacity:0.8; }
.fin-cf-bar.expense { background:var(--color-error); opacity:0.75; }
.fin-cf-labels { display:flex; gap:var(--space-xs); margin-top:var(--space-xs); }
.fin-cf-label { flex:1; font-size:9px; color:var(--hint); text-align:center; }
.fin-cf-legend { display:flex; gap:var(--space-sm); justify-content:center; margin-top:var(--space-base); }
.fin-cf-legend-item { display:flex; align-items:center; gap:var(--space-xs); font-size:11px; color:var(--hint); }
.fin-cf-legend-dot { width:8px; height:8px; border-radius:var(--radius-sm); flex-shrink:0; }
.fin-cf-legend-dot.income { background:var(--color-success); }
.fin-cf-legend-dot.expense { background:var(--color-error); }
.fin-cf-summary { display:flex; justify-content:space-between; font-size:13px; margin-bottom:var(--space-sm); }

/* ── Cashflow tab — comprehensive render (per-month, invoices, alert) ── */

.fin-cf-alert {
  margin-top: var(--space-sm);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fin-cf-alert-low {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
  color: var(--color-warning);
}

/* Chart legend (replaces the older .fin-cf-legend, scoped to canvas chart) */
.fin-cf-chart-legend {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: 6px;
  font-size: 10px;
  color: var(--hint);
}
.fin-cf-chart-legend-item { display: flex; align-items: center; gap: 4px; }
.fin-cf-chart-swatch { width: 10px; height: 10px; border-radius: 2px; }
.fin-cf-chart-swatch-income { background: color-mix(in srgb, var(--color-success) 70%, transparent); }
.fin-cf-chart-swatch-expense { background: color-mix(in srgb, var(--color-error) 70%, transparent); }
.fin-cf-chart-swatch-balance { background: var(--color-primary); border-radius: 50%; }

/* Per-month forecast list */
.fin-cf-month-list { display: flex; flex-direction: column; gap: 4px; }
.fin-cf-month-row {
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-on-surface) 2%, transparent);
}
.fin-cf-month-row.is-expanded {
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}
.fin-cf-month-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto 16px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}
.fin-cf-month-head:hover { background: color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-cf-month-name { font-weight: 600; font-size: 13px; }
.fin-cf-month-net { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.fin-cf-month-bal { font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }
.fin-cf-month-chev { display: flex; align-items: center; justify-content: center; color: var(--hint); }
.fin-cf-net-pos { color: var(--color-success); }
.fin-cf-net-neg { color: var(--color-error); }
.fin-cf-bal-warn { color: var(--color-warning); font-weight: 600; }

.fin-cf-month-detail {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fin-cf-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.fin-cf-detail-cell {
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.fin-cf-detail-sub { font-size: 10px; color: var(--hint); margin-top: 2px; }

.fin-cf-due-list {
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fin-cf-due-title { font-weight: 600; }
.fin-cf-due-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  font-size: 12px;
  align-items: center;
}

/* Invoice list */
.fin-cf-inv-list { display: flex; flex-direction: column; gap: 6px; }
.fin-cf-inv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-on-surface) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-md);
}
.fin-cf-inv-overdue {
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
  background: color-mix(in srgb, var(--color-error) 5%, transparent);
}
.fin-cf-inv-main { flex: 1; min-width: 0; }
.fin-cf-inv-meta {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--hint);
}
.fin-cf-inv-due { font-variant-numeric: tabular-nums; }
.fin-cf-inv-status {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
}
.fin-cf-inv-status-pending,
.fin-cf-inv-status-sent {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}
.fin-cf-inv-status-overdue {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  color: var(--color-error);
}
.fin-cf-inv-status-draft {
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  color: var(--hint);
}
.fin-cf-inv-desc { margin-top: 4px; font-size: 12px; color: var(--hint); }
.fin-cf-inv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fin-cf-inv-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Utility classes extracted from inline styles ──────────────────── */

/* Layout */
.fin-row         { display:flex; justify-content:space-between; align-items:center; }
.fin-row-start   { display:flex; justify-content:space-between; align-items:flex-start; }
.fin-row-end     { display:flex; justify-content:flex-end; }
.fin-row-end-mb12 { display:flex; justify-content:flex-end; margin-bottom:var(--space-sm); }
.fin-row-end-mb4 { display:flex; justify-content:flex-end; margin-bottom:var(--space-xs); }
.fin-row-mb10    { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-snug); }
.fin-row-mb6     { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-tight); }
.fin-row-mb12    { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-sm); }
.fin-col         { display:flex; flex-direction:column; gap:var(--space-roomy); }
/* .fin-col-16 migrated 2026-05-03 to .base-stack from pwa/styles/base.css. */
.fin-flex-1      { flex:1; }
.fin-flex-1-min0 { flex:1; min-width:0; }
.fin-flex-gap8   { display:flex; gap:var(--space-base); }
.fin-flex-gap8-mb10 { display:flex; gap:var(--space-base); margin-bottom:var(--space-snug); }
.fin-flex-gap6   { display:flex; gap:var(--space-tight); }
.fin-flex-gap6-wrap { display:flex; gap:var(--space-tight); flex-wrap:wrap; }
.fin-flex-gap4   { display:flex; gap:var(--space-xs); }
.fin-flex-gap10  { display:flex; gap:var(--space-snug); }
.fin-flex-ac-gap10 { display:flex; align-items:center; gap:var(--space-snug); }
/* .fin-flex-ac-gap8 deleted 2026-05-03 — byte-identical to .base-row, zero markup callers. */
.fin-flex-mb12   { display:flex; gap:var(--space-base); margin-bottom:var(--space-sm); }
.fin-flex-wrap   { display:flex; gap:var(--space-base); flex-wrap:wrap; overflow-x:auto; padding-bottom:var(--space-hairline); scrollbar-width:none; }
.fin-scroll-x    { display:flex; gap:var(--space-base); overflow-x:auto; padding-bottom:var(--space-hairline); scrollbar-width:none; }
.fin-grid-4col   { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-base); }
.fin-grid-auto   { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-sm); }
.fin-grid-auto-sm { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-sm); }
.fin-grid-2col { margin-bottom: var(--space-snug); }
.fin-text-center { text-align:center; }
.fin-text-right  { text-align:right; }
.fin-text-right-ml12 { text-align:right; margin-left:var(--space-sm); }

/* Typography */
.fin-label       { font-size:11px; color:var(--hint); }
.fin-label-mb4   { font-size:11px; color:var(--hint); margin-bottom:var(--space-xs); }
.fin-label-mt2   { font-size:11px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-label-bold  { font-weight:600; color:var(--hint); }
.fin-label-bold-right { font-weight:600; color:var(--hint); text-align:right; }
.fin-label-xs    { font-size:10px; color:var(--hint); }
.fin-label-10-pad { font-size:10px; color:var(--hint); padding:var(--space-hairline) var(--space-base); }
.fin-hint        { color:var(--hint); }
.fin-hint-12     { font-size:12px; color:var(--hint); }
.fin-hint-12-pad { font-size:12px; color:var(--hint); padding:8px 0; }
.fin-hint-12-block-mb4 { font-size:12px; color:var(--hint); display:block; margin-bottom:var(--space-xs); }
.fin-hint-12-mt2 { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-hint-sm     { font-size:0.85em; margin-top:var(--space-tight); }
.fin-fw600       { font-weight:600; }
.fin-fw600-13    { font-size:13px; font-weight:600; }
.fin-fw600-13-mb8 { font-size:13px; font-weight:600; margin-bottom:var(--space-base); }
.fin-fw600-13-mb10 { font-size:13px; font-weight:600; margin-bottom:var(--space-snug); }
.fin-fw600-14    { font-size:14px; font-weight:500; }
.fin-fw700-14    { font-size:14px; font-weight:600; }
.fin-fw700-17    { font-weight:700; font-size:17px; }
.fin-fw700-18    { font-weight:700; font-size:18px; }
.fin-fw800-22    { font-size:22px; font-weight:800; }
.fin-fw700-disp { font-weight: 700; }
.fin-section-label { margin:12px 0 4px; font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
.fin-tabular     { font-variant-numeric:tabular-nums; }
/* Section divider for cockpit recommendation lanes — separates symbol-level
   recs (BUY/SELL/TRIM/HOLD) from portfolio-level recs so the scope shift is
   visible. Linear-style: small uppercase muted with thin top rule. */
.fin-rec-section-divider {
  font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--hint); padding:var(--space-tight) 0 var(--space-xs);
  margin-top:var(--space-tight);
  border-top:1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
/* Apply tabular-nums to every amount-bearing selector so digit columns optically align top-to-bottom in finance tables and cards. */
.fin-summary-total,
.fin-burn-hero-amt,
.fin-rule-amount,
.fin-budget-amounts,
  .fin-holding-mkt,
.fin-holding-pnl-line,
.fin-holding-day,
.fin-holding-mid-row,
.fin-fw700-14,
.fin-fw800-22,
.fin-domain-pill-tone,
.fin-forecast-row,
.fin-rec-action-btn { font-variant-numeric:tabular-nums; }
.fin-success     { color:var(--color-success); }
.fin-error       { color:var(--color-error); }
.fin-fs11        { font-size:11px; }
.fin-fs12        { font-size:12px; }
.fin-fs13-lh16   { font-size:13px; line-height:1.6; }
.fin-fs20-icon   { font-size:1.3em; }
.fin-fs18        { font-size:18px; }
.fin-fw600-ellipsis { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Spacing */
.fin-mb0         { margin:0; }
.fin-mb10        { margin-bottom:var(--space-snug); }
.fin-mb12        { margin-bottom:var(--space-sm); }
.fin-mt10        { margin-top:var(--space-snug); }
.fin-mt12        { margin-top:var(--space-sm); }
.fin-mt14        { margin-top:var(--space-roomy); }
.fin-pad-16      { background:var(--bg2); border-radius:var(--radius-lg); padding:var(--space-gutter); }
.fin-pad-0-mb8   { padding:0; margin-bottom:var(--space-base); overflow:hidden; }
.fin-pad-14-16   { padding:var(--space-roomy); margin-bottom:var(--space-snug); }
.fin-pad-12-row  { padding:var(--space-sm); display:flex; justify-content:space-between; align-items:center; }
.fin-pad-14-cur  { padding:var(--space-roomy) var(--space-gutter); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }

/* Controls — .fin-hidden + .fin-vis-none migrated 2026-05-03 to .hidden
   from pwa/styles/base.css (centralized display:none with !important). */
.fin-receipt-preview { display:none; margin:12px 0; }
.fin-receipt-img { width:100%; border-radius:var(--radius-md); max-height:200px; object-fit:cover; }
.fin-svg-fill    { width:100%; height:100%; }
.fin-modal-field-flex-end { display:flex; align-items:flex-end; gap:var(--space-snug); padding-bottom:var(--space-hairline); }
.fin-modal-field-flex-center { display:flex; align-items:center; gap:var(--space-snug); padding:8px 0; }
.fin-modal-label { margin:0; }
.fin-sheet-narrow { max-width:400px; }
.fin-label-btn   { flex:1; text-align:center; cursor:pointer; margin:0; }
.fin-btn-flex    { flex:1; padding:var(--space-snug); }
.fin-btn-flex-none { flex:none; padding:var(--space-base) var(--space-gutter); }
.fin-btn-flex-none-sm { flex:none; padding:var(--space-base) var(--space-roomy); white-space:nowrap; }
.fin-btn-sm      { flex:1; padding:var(--space-base); font-size:0.85em; }
.fin-btn-xs      { flex:1; padding:var(--space-tight); font-size:0.8em; }
.fin-btn-pad     { padding:var(--space-tight) var(--space-roomy); font-size:0.8em; }
.fin-btn-chip    { padding:var(--space-tight) var(--space-sm); font-size:0.8em; border-radius:var(--radius-lg); }
.fin-btn-compact { padding:var(--space-xs) var(--space-snug); font-size:0.75em; }
.fin-cursor-ptr  { cursor:pointer; }
.fin-acct-row    { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent); }
/* Section title row variant with flex space-between */
.fin-section-title-row { display:flex; justify-content:space-between; align-items:center; }
/* Sort/period button strip */
.fin-sort-btn-sm { padding:var(--space-hairline) var(--space-base); font-size:11px; }
/* Small action button */
.fin-action-btn-sm { flex:none; padding:var(--space-xs) var(--space-sm); font-size:12px; }
/* Rebalance execute button */
.fin-execute-btn { margin-top:var(--space-snug); width:100%; }
/* Compute rebalance button */
.fin-compute-btn { padding:var(--space-snug) var(--space-gutter); }
/* Holdings mid row */
.fin-holding-mid-mt { margin-top:var(--space-hairline); }
/* ETF expand panel */
.fin-etf-expand-pad { padding:0 0 8px 8px; }
/* Watchlist holding body */
.fin-watch-body { padding:var(--space-base) var(--space-sm); }
/* Remove watchlist button */
.fin-watch-remove { font-size:10px; margin-top:var(--space-xs); }
/* Rebalance diff bar container */
.fin-diff-bar-wrap { position:relative; height:18px; }
/* Trade note hidden panel — `pointer-events:none` distinguishes from
   global `.hidden` (toggled inline via element.style.display in JS). */
.fin-trade-note { display:none; pointer-events:none; }
/* Order modify panel — same hidden-state pattern. */
.fin-order-modify { display:none; pointer-events:none; }
/* Trade/order card cursor */
.fin-trade-card-cur { cursor:pointer; }
/* Trades filter chip row */
.fin-filter-row { display:flex; gap:var(--space-tight); margin-bottom:var(--space-base); flex-wrap:wrap; }
/* Portfolio quote grid */
.fin-quote-grid { display:grid; grid-template-columns:1fr auto auto auto; gap:4px 12px; font-size:12px; padding:4px 0; }
/* Portfolio stat grid top margin */
.fin-stat-grid-mt { margin-top:var(--space-base); }
/* Dividend text-right cell */
.fin-div-right { text-align:right; }
/* fw600 inline */
.fin-fw600-inline { font-weight:600; }
/* Section title margin-0 */
.fin-section-title-m0 { margin:0; }
/* mb12 standalone */
.fin-mb12-div { margin-bottom:var(--space-sm); }
/* Section head flex row */
.fin-section-head { display:flex; align-items:center; justify-content:space-between; }
/* Data grids */
.fin-data-grid-4  { display:grid; grid-template-columns:auto auto 1fr auto; gap:4px 10px; font-size:12px; background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); }
.fin-data-grid-3  { display:grid; grid-template-columns:auto 1fr auto auto; gap:3px 10px; font-size:12px; background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); }
.fin-data-grid-stress { display:grid; grid-template-columns:1fr auto auto; gap:4px 12px; font-size:12px; background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); }
.fin-data-grid-3sym { display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; font-size:12px; background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); }
/* Risk exposure bar row */
.fin-exposure-row { margin: 3px 0; }
.fin-exposure-label-w80 { font-size:12px; font-weight:600; width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fin-exposure-label-w32 { font-size:12px; font-weight:600; width:32px; }
.fin-exposure-bar  { flex:1; height:14px; background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); border-radius:7px; overflow:hidden; }
.fin-exposure-pct-w50 { font-size:11px; color:var(--hint); width:50px; text-align:right; }
.fin-exposure-pct-w40 { font-size:11px; color:var(--hint); width:40px; text-align:right; }
/* Sub-section label */
.fin-subsection-label { margin:12px 0 6px; font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
.fin-subsection-label-sm { margin:12px 0 4px; font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
/* Alerts / Notifications */
.fin-badge-error  { background:var(--color-error); color:var(--color-on-primary); border-radius:var(--radius-snug); padding:var(--space-hairline) var(--space-base); font-size:11px; font-weight:600; }
.fin-fyi-row      { padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-fyi-title    { font-size:13px; font-weight:500; }
.fin-fyi-body     { font-size:11px; color:var(--hint); }
.fin-fyi-btn      { margin-top:var(--space-xs); font-size:11px; padding:var(--space-hairline) var(--space-base); background:var(--bg2); border:none; color:var(--link); border-radius:var(--radius-sm); cursor:pointer; }
.fin-alert-form   { background:var(--bg2); border-radius:var(--radius-md); padding:var(--space-sm); margin-bottom:var(--space-snug); }
.fin-alert-row    { display:flex; gap:var(--space-base); margin-bottom:var(--space-base); }
.fin-alert-row-b  { display:flex; gap:var(--space-base); }
.fin-alert-select { flex:1; padding:var(--space-base); background:var(--bg1); border:1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius:var(--radius-default); color:var(--text); font-size:13px; }
.fin-alert-input  { flex:1; padding:var(--space-base); background:var(--bg1); border:1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius:var(--radius-default); color:var(--text); font-size:13px; }
.fin-alert-create-btn { padding:var(--space-base) var(--space-gutter); }
.fin-alert-list-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-alert-del-btn  { padding:var(--space-xs) var(--space-base); font-size:11px; }
/* Rebalance plan container */
.fin-rebal-wrap   { background:var(--bg2); border-radius:var(--radius-md); padding:var(--space-sm); }
/* Balanced placeholder */
.fin-balanced-msg { padding:var(--space-sm); background:var(--bg2); border-radius:var(--radius-md); font-size:13px; color:var(--hint); }
/* News row */
.fin-news-row     { padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-news-title   { font-size:13px; font-weight:500; }
.fin-news-meta    { font-size:11px; color:var(--hint); }
/* ETF loading */
.fin-etf-loading  { padding:var(--space-base); font-size:12px; color:var(--hint); }
/* Trade history row */
.fin-trade-hist-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-trade-hist-right { text-align:right; font-size:12px; }
/* Div calendar grid */
.fin-div-grid-upcoming { margin-top:var(--space-tight); display:grid; grid-template-columns:auto auto 1fr auto; gap:4px 10px; font-size:12px; background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); }
.fin-div-grid-yield { margin-top:var(--space-snug); font-size:12px; display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-snug) var(--space-sm); }
.fin-div-calendar-label { margin-top:var(--space-snug); font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
/* Sector heatmap */
.fin-sector-tbl-wrap { overflow-x:auto; }
/* win-rate stats bar */
.fin-stats-bar    { display:flex; gap:var(--space-sm); margin-bottom:var(--space-snug); padding:var(--space-base); background:var(--bg2); border-radius:var(--radius-default); font-size:12px; flex-wrap:wrap; }
/* dot hint */
.fin-dot-hint     { margin-top:var(--space-tight); font-size:10px; color:var(--hint); }
.fin-hint-12-pad  { font-size:12px; color:var(--hint); padding:8px 0; }
.fin-hint-13-pad  { font-size:13px; color:var(--hint); padding:8px 0; }
.fin-hint-12      { font-size:12px; color:var(--hint); }
.fin-hint         { color:var(--hint); }
.fin-fs11         { font-size:11px; }
.fin-flex-gap4    { display:flex; gap:var(--space-xs); }
.fin-flex-gap6    { display:flex; gap:var(--space-tight); }
.fin-flex-gap10   { display:flex; gap:var(--space-snug); }
.fin-flex-1       { flex:1; }
.fin-row          { display:flex; justify-content:space-between; }
.fin-cursor-ptr   { cursor:pointer; }
.fin-detail-chart-120 { height:120px; }
.fin-watch-remove { font-size:10px; padding:var(--space-hairline) var(--space-tight); }
/* Form field rows */
.fin-field-row    { display:flex; gap:var(--space-base); margin-bottom:var(--space-snug); }
.fin-field-col    { flex:1; }
.fin-field-col-0  { flex:1; min-width:0; }
.fin-field-col-80 { flex:1; min-width:80px; }
.fin-field-col-60 { flex:1; min-width:60px; }
.fin-field-label  { font-size:11px; color:var(--hint); margin-bottom:var(--space-xs); }
.fin-field-label-xs { font-size:10px; color:var(--hint); }
.fin-field-mb10   { margin-bottom:var(--space-snug); }
.fin-field-mb12   { margin-bottom:var(--space-sm); }
.fin-mb4          { margin-bottom:var(--space-xs); }
/* Trade form sections */
.fin-pill-row     { display:flex; gap:var(--space-xs); flex-wrap:wrap; }
.fin-pill-row-b   { display:flex; gap:var(--space-xs); }
.fin-trade-risk   { font-size:12px; margin-bottom:var(--space-base); }
.fin-trade-actions { display:flex; gap:var(--space-base); margin-top:var(--space-base); }
.fin-trade-btn    { flex:1; padding:var(--space-base); }
.fin-trade-extras { display:flex; gap:var(--space-tight); margin-top:var(--space-base); align-items:center; flex-wrap:wrap; }
.fin-trade-extras-btn { font-size:11px; }
.fin-trade-sizer  { display:none; margin-top:var(--space-base); padding:var(--space-base); background:var(--bg2); border-radius:var(--radius-default); }
.fin-trade-tif    { display:flex; gap:var(--space-base); margin-bottom:var(--space-snug); }
/* Detail modal grid margin */
.fin-detail-grid-mt { margin-top:var(--space-sm); }
/* Detail price change row */
.fin-detail-price-row { display:flex; align-items:flex-start; gap:var(--space-sm); }
/* Chart mode strip */
.fin-chart-strip  { display:flex; gap:var(--space-xs); margin-bottom:var(--space-tight); align-items:center; }
.fin-pill-btn-xs  { font-size:10px; padding:var(--space-hairline) var(--space-base); }
/* MA info bar */
.fin-ma-bar       { display:flex; gap:var(--space-base); font-size:10px; color:var(--hint); margin-top:var(--space-hairline); }
/* Preview action row */
.fin-preview-actions { display:flex; gap:var(--space-base); margin-top:var(--space-snug); }
/* Modify order inline */
.fin-modify-wrap  { display:flex; gap:var(--space-tight); align-items:center; padding:8px 0; flex-wrap:wrap; }
.fin-modify-save  { margin-top:var(--space-sm); }
/* Position sizer */
.fin-sizer-title  { font-size:12px; font-weight:600; margin-bottom:var(--space-tight); }
.fin-sizer-result { font-size:12px; color:var(--hint); }
.fin-sizer-actions { margin-top:var(--space-tight); display:flex; gap:var(--space-tight); }
/* Detail loading */
.fin-detail-loading { text-align:center; padding:var(--space-lg); }
/* Rec card margin */
.fin-rec-mt       { margin-top:var(--space-sm); }
/* Warning inline */
.fin-warn-inline  { color:var(--color-warning); font-size:12px; margin-top:var(--space-tight); }
/* Kelly / pre-trade context */
.fin-kelly-note   { margin-top:var(--space-tight); font-size:11px; color:var(--hint); }
.fin-pretrade-ctx { margin-bottom:var(--space-snug); padding:var(--space-base) var(--space-snug); background:var(--bg); border-radius:var(--radius-default); border-left:3px solid var(--accent); }
.fin-pretrade-lbl { font-size:10px; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:var(--space-xs); }
.fin-pretrade-chips { display:flex; flex-wrap:wrap; gap:var(--space-xs); align-items:center; }
/* Statements / accounts section */
.fin-bank-review-row { padding:var(--space-sm); display:flex; justify-content:space-between; align-items:center; }
.fin-bank-review-col { flex:1; min-width:0; }
.fin-bank-review-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-bank-review-sub { font-size:0.8em; color:var(--text-secondary); }
.fin-bank-review-right { text-align:right; margin-left:var(--space-sm); }
.fin-bank-review-actions { display:flex; gap:var(--space-tight); margin-top:var(--space-xs); }
.fin-bank-review-btn { padding:var(--space-xs) var(--space-snug); font-size:0.75em; }
.fin-bank-more { text-align:center; color:var(--text-secondary); padding:var(--space-base); font-size:0.85em; }
.fin-acct-header { padding:var(--space-roomy) var(--space-gutter); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.fin-acct-header-left { display:flex; align-items:center; gap:var(--space-snug); }
.fin-acct-header-right { display:flex; align-items:center; gap:var(--space-snug); }
.fin-acct-icon { font-size:1.3em; }
.fin-acct-name { font-weight:600; }
.fin-acct-date { font-size:0.8em; color:var(--text-secondary); }
.fin-acct-bal { font-weight:700; font-size:1.1em; }
.fin-acct-nodata { color:var(--text-secondary); font-size:0.85em; }
.fin-acct-expand { border-top:1px solid var(--border,color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent)); padding:var(--space-sm) var(--space-gutter); }
.fin-acct-actions { display:flex; gap:var(--space-base); margin-bottom:var(--space-sm); }
.fin-acct-action-btn { flex:1; padding:var(--space-base); font-size:0.85em; }
.fin-acct-month-wrap { margin-bottom:var(--space-sm); }
.fin-acct-month-lbl { font-size:0.8em; color:var(--text-secondary); margin-bottom:var(--space-tight); }
.fin-acct-months { display:flex; gap:var(--space-tight); flex-wrap:wrap; }
.fin-acct-month-btn { padding:var(--space-tight) var(--space-sm); font-size:0.8em; border-radius:var(--radius-lg); }
.fin-acct-imports-lbl { font-size:0.8em; color:var(--text-secondary); margin-bottom:var(--space-tight); }
.fin-acct-import-row { padding:8px 0; border-bottom:1px solid var(--border,color-mix(in srgb, var(--color-on-surface-variant) 10%, transparent)); font-size:0.85em; }
.fin-acct-import-hdr { display:flex; justify-content:space-between; }
.fin-acct-import-name { font-weight:500; }
.fin-acct-import-date { color:var(--text-secondary); }
.fin-acct-import-meta { color:var(--text-secondary); margin-top:var(--space-hairline); }
.fin-acct-no-imports { text-align:center; color:var(--text-secondary); padding:12px 0; font-size:0.85em; }
/* Reconcile */
.fin-recon-match { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-snug); }
.fin-recon-match-id { font-size:0.8em; color:var(--text-secondary); }
.fin-recon-pair-grid { margin-bottom: var(--space-snug); }
.fin-recon-col { padding:var(--space-snug); background:var(--bg2); border-radius:var(--radius-default); }
.fin-recon-col-lbl { font-size:0.7em; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.fin-recon-col-name { font-weight:600; margin-top:var(--space-xs); }
.fin-recon-col-sub { font-size:0.85em; color:var(--text-secondary); }
.fin-recon-col-amt { font-weight:700; margin-top:var(--space-xs); }
.fin-recon-actions { display:flex; gap:var(--space-tight); }
.fin-recon-action-btn { flex:1; padding:var(--space-base); font-size:0.85em; }
/* Net-worth drill-down */
.fin-nw-sheet { background:var(--bg); border-radius:12px 12px 0 0; width:100%; max-width:640px; max-height:85vh; overflow-y:auto; padding:var(--space-gutter); }
.fin-nw-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-sm); }
.fin-nw-total { font-weight:700; font-size:18px; }
.fin-nw-sub { font-size:11px; color:var(--hint); }
.fin-nw-breakdown-row { display:flex; gap:var(--space-base); font-size:11px; color:var(--hint); }
.fin-nw-section-title { font-weight:600; font-size:13px; margin-bottom:var(--space-tight); color:var(--hint); }
.fin-nw-section-item { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent); }
.fin-nw-section-item-val { font-variant-numeric:tabular-nums; }
/* FX drill-down */
.fin-fx-sheet { background:var(--bg); border-radius:12px 12px 0 0; width:100%; max-width:640px; max-height:80vh; overflow-y:auto; padding:var(--space-gutter); }
.fin-fx-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-sm); }
.fin-fx-hdr-title { font-weight:700; font-size:17px; }
.fin-fx-hint { font-size:12px; color:var(--hint); margin-bottom:var(--space-snug); }
.fin-fx-item { border:1px solid var(--border, var(--color-surface-container-high)); border-radius:var(--radius-default); padding:var(--space-snug); margin-bottom:var(--space-base); }
.fin-fx-item-row { display:flex; justify-content:space-between; align-items:center; }
.fin-fx-item-meta { font-size:13px; }
.fin-fx-type-badge { background:color-mix(in srgb, var(--color-primary) 18%, transparent); padding:var(--space-hairline) var(--space-tight); border-radius:var(--radius-sm); font-size:11px; }
.fin-fx-id { margin-left:var(--space-tight); }
.fin-fx-date { margin-left:var(--space-tight); color:var(--hint); }
.fin-fx-amt { font-size:14px; font-weight:600; }
.fin-fx-actions { display:flex; gap:var(--space-tight); margin-top:var(--space-base); }
.fin-fx-btn { border:1px solid var(--border, var(--color-surface-container-high)); padding:var(--space-xs) var(--space-snug); border-radius:var(--radius-tight); }
/* Anomaly card */
.fin-anomaly-card { padding:var(--space-roomy); margin-bottom:var(--space-sm); border-left:3px solid var(--warning,var(--color-warning)); }
.fin-anomaly-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-snug); }
.fin-anomaly-title { font-weight: 700; }
.fin-anomaly-row { padding:10px 0; border-top:1px solid var(--border,color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent)); }
.fin-anomaly-row-inner { display:flex; justify-content:space-between; align-items:flex-start; }
.fin-anomaly-name-col { flex:1; min-width:0; }
.fin-anomaly-name { font-weight:600; }
.fin-anomaly-sub { font-size:0.85em; color:var(--text-secondary); }
.fin-anomaly-actions { display:flex; gap:var(--space-tight); margin-top:var(--space-base); }
.fin-anomaly-action-btn { flex:1; padding:var(--space-tight); font-size:0.8em; }
.fin-anomaly-more { text-align:center; color:var(--text-secondary); padding:var(--space-tight); font-size:0.85em; }
.fin-anomaly-amt  { font-weight:700; margin-left:var(--space-sm); }
/* Expense result */
.fin-result-title { font-weight:600; margin-bottom:var(--space-base); }
.fin-result-body { font-size:13px; line-height:1.6; }
.fin-result-items { margin-top:var(--space-tight); font-size:12px; color:var(--hint); }
/* Overview summary */
.fin-summary-total { font-size:15px; font-weight:700; }
.fin-summary-right { text-align:right; }
/* IBKR session expired banner */
.fin-ibkr-banner { background:color-mix(in srgb, var(--color-error) 12%, transparent); border:1px solid color-mix(in srgb, var(--color-error) 30%, transparent); border-radius:var(--radius-md); padding:var(--space-roomy) var(--space-gutter); margin-bottom:var(--space-roomy); display:flex; align-items:center; gap:var(--space-sm); }
.fin-ibkr-banner-icon { font-size:20px; }
.fin-ibkr-banner-body { flex:1; }
.fin-ibkr-banner-title { font-weight:600; font-size:14px; color:var(--color-error); }
.fin-ibkr-banner-sub { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }
.fin-ibkr-banner-login { background:var(--color-error); color:var(--color-on-primary); padding:var(--space-base) var(--space-roomy); border-radius:var(--radius-default); font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; }
/* Portfolio risk widget */
.fin-risk-widget { background:var(--bg2); border-radius:var(--radius-md); padding:var(--space-snug) var(--space-sm); margin-bottom:var(--space-roomy); }
.fin-risk-widget-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-tight); }
.fin-risk-widget-title { font-size:13px; font-weight:600; }
.fin-risk-bar-wrap { height:6px; background:color-mix(in srgb, var(--color-on-surface) 6%, transparent); border-radius:3px; overflow:hidden; margin-bottom:var(--space-tight); }
.fin-risk-bar-fill { height:100%; border-radius:3px; }
.fin-risk-chips { display:flex; gap:var(--space-tight); flex-wrap:wrap; }
.fin-risk-chip { font-size:11px; color:var(--hint); }
/* Allocation mini-card */
.fin-alloc-mini { background:var(--bg2); border-radius:var(--radius-default); padding:var(--space-base) var(--space-snug); margin-bottom:var(--space-tight); cursor:pointer; }
.fin-alloc-mini-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-xs); }
.fin-alloc-mini-pct { display:flex; justify-content:space-between; font-size:10px; color:var(--hint); margin-top:var(--space-hairline); }
/* NAV history card */
.fin-nav-hist-card { background:var(--bg2); border:none; }
.fin-nav-hist-title { font-size:14px; font-weight:600; margin-bottom:var(--space-base); }
.fin-nav-hist-bars { display:flex; align-items:flex-end; gap:var(--space-hairline); height:60px; }
/* Insights header section-title inline margin:0 */
.fin-section-title-inline { margin:0; }
/* Pipeline nav row */
.fin-pipeline-nav { display:flex; justify-content:space-between; margin-top:var(--space-snug); }
.fin-pipeline-nav-right { display:flex; justify-content:flex-end; margin-top:var(--space-snug); }
.fin-pipeline-nav-end { display:flex; justify-content:flex-end; margin-top:var(--space-snug); gap:var(--space-base); }
.fin-pipeline-btn { padding:var(--space-tight) var(--space-gutter); font-size:12px; }
/* Trade review toggle label */
.fin-trade-toggle-label { display:flex; align-items:center; gap:var(--space-tight); cursor:pointer; }
/* Trade review edit fields */
.fin-trade-fields { display:flex; flex-wrap:wrap; gap:var(--space-base); margin:6px 0; align-items:center; }
.fin-trade-field-lbl { font-size:11px; color:var(--hint); }
.fin-trade-field-input { width:60px; padding:3px 4px; font-size:12px; background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-sm); }
.fin-trade-field-select { padding:3px 4px; font-size:12px; background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-sm); }
/* Plan audit rationale */
.fin-rec-rationale-sm { font-size:11px; margin:4px 0; }
/* Execute trades button */
.fin-exec-trades-btn { padding:8px 20px; font-size:13px; background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); border-color:color-mix(in srgb, var(--color-success) 30%, transparent); }
/* Hint with 13px font */
.fin-hint-13-pad { padding:var(--space-base) var(--space-sm); font-size:13px; color:var(--hint); }
/* Section label variants */
.fin-section-label-hero { letter-spacing:0.4px; margin-top:0; }
/* Forecast chip amount */
.fin-upcoming-chip-amt { margin-top:var(--space-hairline); font-weight:600; font-size:13px; }
/* Budget overview header row */
.fin-budget-hdr-row { margin-bottom:var(--space-xs); display:flex; align-items:center; gap:var(--space-gutter); }
/* Budget alert label */
.fin-bud-alert { margin-top:var(--space-xs); }
/* NW section margin */
.fin-nw-section-mt { margin-top:var(--space-roomy); }
/* News sentiment label */
.fin-field-label-xs-mb4 { font-size:10px; color:var(--hint); margin-bottom:var(--space-xs); }
/* Reconcile card padding */
.fin-recon-card { padding:var(--space-roomy); margin-bottom:var(--space-snug); }
.fin-recon-empty { padding:var(--space-md); text-align:center; }
/* Portfolio / holdings */
.fin-section-title-row { display:flex; justify-content:space-between; align-items:center; }
.fin-target-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); cursor:pointer; }
.fin-target-right { display:flex; align-items:center; gap:var(--space-tight); font-size:12px; }
.fin-target-del-btn { padding:var(--space-hairline) var(--space-tight); font-size:10px; }
/* ETF holdings/sectors */
.fin-etf-holding-row { display:flex; justify-content:space-between; font-size:12px; padding:2px 0; }
.fin-etf-sector-row { font-size:11px; display:flex; align-items:center; gap:var(--space-tight); padding:2px 0; }
.fin-etf-sector-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fin-etf-sector-pct { color:var(--hint); width:40px; text-align:right; }
/* Section label margin variants */
.fin-section-label-mt { margin:4px 0; }
.fin-section-label-mt8 { margin:8px 0 4px; }
.fin-section-label-mt10 { margin:10px 0 4px; }
/* Sector table */
.fin-sector-th { text-align:left; padding:4px 6px; color:var(--hint); font-weight:600; }
.fin-sector-th-r { text-align:right; padding:4px 6px; color:var(--hint); font-weight:600; }
.fin-sector-td { padding:4px 6px; white-space:nowrap; font-weight:500; }
/* Risk grid */
.fin-risk-right { text-align:right; }
.fin-risk-right-bold { text-align:right; font-weight:600; }
/* Economic calendar */
.fin-econ-label { font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:var(--space-xs); }
.fin-econ-card { background:var(--bg2); border-radius:var(--radius-snug); padding:var(--space-base) var(--space-sm); margin-bottom:var(--space-base); }
.fin-econ-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); font-size:12px; }
.fin-econ-left { flex:1; }
.fin-econ-right { text-align:right; color:var(--hint); font-size:11px; }
/* News sentiment bar */
.fin-sentiment-bar-sm { width:40px; display:inline-flex; }
.fin-sentiment-bar-h8 { height:8px; }
.fin-sentiment-neutral { flex:1; background:color-mix(in srgb, var(--color-on-surface) 8%, transparent); }
/* News chart container */
.fin-chart-container { background:var(--bg); border-radius:var(--radius-default); overflow:hidden; }
/* Sentiment date row */
.fin-sentiment-dates { font-size:9px; color:var(--hint); margin-top:var(--space-hairline); }
/* Search result row */
.fin-search-result-row { padding:var(--space-base) var(--space-sm); border-bottom:1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); }
.fin-search-result-sym { font-size:13px; }
.fin-search-owned { font-size:10px; color:var(--color-success); padding:1px 5px; background:color-mix(in srgb, var(--color-success) 10%, transparent); border-radius:var(--radius-sm); }
/* Note panel */
.fin-note-pad { padding:6px 0; }
.fin-note-actions-mt { margin-top:var(--space-xs); }
/* Sizer field rows */
.fin-sizer-row { margin-bottom:var(--space-tight); }
/* Trade thesis wrapper */
.fin-thesis-wrap { margin-bottom:var(--space-snug); margin-top:var(--space-snug); }
/* Section header with flex */
.fin-section-header-row { display:flex; justify-content:space-between; align-items:center; }
.fin-rule-detail-bar { display:flex; align-items:center; gap:var(--space-sm); margin-top:var(--space-tight); }
.fin-toggle-row  { display:flex; align-items:center; gap:var(--space-tight); }
.fin-rule-section-sub { font-weight:400; font-size:12px; }
.fin-section-sub-label { font-size:13px; font-weight:600; color:var(--hint); margin-bottom:var(--space-base); }
.fin-icon-badge  { width:44px; height:44px; border-radius:var(--radius-md); background:color-mix(in srgb,var(--color-primary) 15%,transparent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fin-canvas-fill { width:100%; height:180px; }
.fin-canvas-300h { width:100%; height:300px; }
.fin-status-hidden { display:none; padding:var(--space-sm); border-radius:var(--radius-md); background:var(--bg2); margin:8px 0; font-size:13px; }
.fin-result-hidden { display:none; padding:var(--space-sm); border-radius:var(--radius-md); background:var(--bg2); margin:8px 0; }
.fin-fw7          { font-weight:700; }
.fin-mt16         { margin-top:var(--space-gutter); }
.fin-card-flush   { padding:0; margin-bottom:var(--space-base); overflow:hidden; }
.fin-badge-warn   { background:var(--warning,var(--color-warning)); color:var(--color-on-primary); font-size:0.7em; padding:var(--space-hairline) var(--space-tight); border-radius:var(--radius-snug); }
.fin-chevron      { color:var(--text-secondary); transition:transform 0.2s; }
.fin-chevron.open { transform:rotate(180deg); }

/* ────────────────────────────────────────────────────────────────────
 * Finance view utility classes — closes the raw inline-style gap
 * surfaced after the Phase 2 token sweep. Replaces ~250 raw inline
 * `style="..."` attrs across renderOverview / renderRecurring /
 * renderBudgets / renderCashflow / portfolio sections.
 * ──────────────────────────────────────────────────────────────────── */
.fin-text-hint        { color: var(--hint); }
.fin-text-xs-hint     { font-size: 11px; color: var(--hint); }
.fin-text-sm-hint     { font-size: 12px; color: var(--hint); }
.fin-text-success     { color: var(--color-success); }
.fin-text-error       { color: var(--color-error); }
.fin-text-warning     { color: var(--color-warning); }
.fin-text-primary     { color: var(--color-primary); }
.fin-form-label       { font-size: 11px; color: var(--hint); margin-bottom: var(--space-xs); }
.fin-form-label-block { font-size: 12px; color: var(--hint); display: block; margin-bottom: var(--space-xs); }
.fin-form-input-sm    { width: 100%; background: var(--card); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-tight); padding: 4px 6px; color: var(--fg); font-size: 13px; }
.fin-form-input-md    { width: 100%; background: var(--card); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default); padding: 6px 8px; color: var(--fg); font-size: 14px; }
.fin-form-input-xs    { width: 100%; background: var(--card); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-tight); padding: 4px 6px; color: var(--fg); font-size: 12px; }
.fin-form-input-bg2   { width: 100%; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-default); padding: 8px 10px; color: var(--fg); font-size: 13px; }
.fin-input-w70        { width: 70px; }
.fin-flex-1           { flex: 1; }
.fin-flex-1-min0      { flex: 1; min-width: 0; }
.fin-fill             { width: 100%; height: 100%; }
.fin-mb-10            { margin-bottom: var(--space-snug); }
.fin-mb-12            { margin-bottom: var(--space-sm); }
.fin-mt-2             { margin-top: var(--space-hairline); }
.fin-fs-11            { font-size: 11px; }
.fin-fs-12            { font-size: 12px; }
.fin-fs-18            { font-size: 18px; }
/* Dynamic tone color flows via --fin-tone-color (CSS-var carve-out). */
.fin-tone-bg          { background: var(--fin-tone-color, var(--bg2)); }
.fin-tone-text        { color: var(--fin-tone-color, var(--text)); }
.fin-stack-bar-segment { width: var(--fin-bar-pct, 0%); background: var(--fin-tone-color, var(--color-primary)); }
.fin-stack-bar-bull   { width: var(--fin-bar-pct, 0%); background: var(--color-success); }
.fin-stack-bar-bear   { width: var(--fin-bar-pct, 0%); background: var(--color-error); }
.fin-text-tiny-hint   { font-size: 10px; color: var(--hint); }
.fin-text-success-bold { color: var(--color-success); font-weight: 600; }
.fin-text-error-bold   { color: var(--color-error); font-weight: 600; }
.fin-tone-bold         { font-weight: 600; }
.fin-link             { color: var(--link); text-decoration: none; }

/* Inline-style sweep — composable utilities + CSS-var carve-outs.
   --fin-color (text), --fin-bg (background), --fin-pct (width), --fin-border-color
   are dynamic; class names below paint via these vars. */
.fin-color         { color: var(--fin-color, inherit); }
.fin-color-bold    { color: var(--fin-color, inherit); font-weight: 600; }
.fin-bg            { background: var(--fin-bg, transparent); }
.fin-w-pct         { width: var(--fin-pct, 0%); }
.fin-w-pct-success { width: var(--fin-pct, 0%); background: var(--color-success); }
.fin-w-pct-error   { width: var(--fin-pct, 0%); background: var(--color-error); }

/* "Tinted chip" pattern — bg=color@12% + fg=color, dynamic per chip via --fin-color. */
.fin-chip-tinted {
  background: color-mix(in srgb, var(--fin-color, var(--color-primary)) 12%, transparent);
  color: var(--fin-color, var(--color-primary));
  font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px;
}

/* "Solid badge" pattern — bg=color@13% + fg=color (#XX22 hex equivalent). */
.fin-badge-tinted {
  background: color-mix(in srgb, var(--fin-color, var(--color-primary)) 13%, transparent);
  color: var(--fin-color, var(--color-primary));
}

/* Insight icon backplate — token-fill via --fin-bg. */
.fin-insight-icon-tone { background: var(--fin-bg, var(--color-surface-container)); }

/* Domain-grid icon — bg=color@13% + fg=color. */
.fin-dgc-icon-tone {
  background: color-mix(in srgb, var(--fin-color, var(--color-primary)) 13%, transparent);
  color: var(--fin-color, var(--color-primary));
}

/* "Border-left accent" pattern — token color via --fin-border-color. */
.fin-border-l-accent {
  padding: 6px 0 6px 10px; margin: 4px 0; font-size: 13px;
  border-left: 3px solid var(--fin-border-color, var(--color-outline-variant));
}

/* Risk bar fill — width + token bg via vars */
.fin-risk-bar-fill-tone { width: var(--fin-pct, 0%); background: var(--fin-color, var(--color-primary)); }

/* Compact alert callout — bg + fg from same token via --fin-color. */
.fin-alert-callout {
  margin-top: var(--space-base); padding: var(--space-base); border-radius: var(--radius-default);
  background: color-mix(in srgb, var(--fin-color, var(--color-primary)) 13%, transparent);
  color: var(--fin-color, var(--color-primary));
  font-size: 12px; font-weight: 600;
}

/* Common one-shot text/layout helpers replacing inline style attrs. */
.fin-text-hint-c       { text-align: center; padding: var(--space-base); color: var(--hint); }
.fin-text-r-hint       { padding: 4px 6px; text-align: right; color: var(--hint); }
.fin-text-r-bold-tone  { padding: 4px 6px; text-align: right; background: var(--fin-bg, transparent); color: var(--fin-color, inherit); font-weight: 600; }
.fin-text-r-tone       { text-align: right; color: var(--fin-color, inherit); }
.fin-text-r-tone-bold  { text-align: right; color: var(--fin-color, inherit); font-weight: 600; }
.fin-bottom-right-9    { position: absolute; bottom: var(--space-xs); right: var(--space-base); font-size: 9px; color: var(--hint); }

/* Card-like padded container — composes with .base-card from base.css.
   .fin-callout-card-* are the inner spacing slots only. */
.fin-callout-card-h     { margin: 0 0 8px; }
.fin-callout-card-sub   { font-size: 13px; color: var(--color-on-surface-variant); }
.fin-callout-card-body  { margin-top: var(--space-sm); }

/* Dim helpers */
.fin-opacity-60 { opacity: 0.6; }
.fin-opacity-50 { opacity: 0.5; }

/* Max-height containers */
.fin-max-h-60vh { max-height: 60vh; }

/* Page padding */
.fin-pad-16 { padding: var(--space-gutter); }

/* Save-button accent override (was background:var(--accent2,...) inline) */
.fin-label-btn-save { background: var(--accent2, var(--color-tertiary)); }

/* Dual-input row (was width:48% + width:48% inline) */
.fin-input-half       { width: 48%; padding: var(--space-base); font-size: 13px; }
.fin-input-half-mr    { width: 48%; padding: var(--space-base); font-size: 13px; margin-right: 4%; }
.fin-input-full-accent { width: 100%; padding: var(--space-base); font-size: 13px; background: var(--accent); color: var(--color-on-primary); }
.fin-input-half-accent { width: 48%; padding: var(--space-base); font-size: 13px; background: var(--accent); color: var(--color-on-primary); }

/* Form variants used in the recurring/budget sheets */
.fin-form-input-resize { width: 100%; background: var(--card); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default); padding: 6px 8px; color: var(--fg); font-size: 12px; resize: vertical; }
.fin-form-input-uppercase { width: 100%; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-default); padding: 8px 10px; color: var(--fg); font-size: 13px; text-transform: uppercase; }
.fin-form-input-radius10 { width: 100%; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-snug); padding: 8px 12px; color: var(--fg); font-size: 13px; }

/* Mt-4 modifier for stacked inputs (replaces "${inputStyle};margin-top:4px") */
.fin-mt-4-from-input { margin-top: var(--space-xs); }

/* Cashflow stack bar segment widths driven by --fin-pct */
.fin-stack-bar-daily      { width: var(--fin-pct, 0%); opacity: 0.9; }
.fin-stack-bar-daily-up   { background: var(--color-success); }
.fin-stack-bar-daily-down { background: var(--color-error); }
.fin-stack-bar-realized   { width: var(--fin-pct, 0%); opacity: 0.6; }
.fin-stack-bar-realized-up   { background: color-mix(in srgb, var(--color-success) 50%, var(--color-on-surface)); }
.fin-stack-bar-realized-down { background: color-mix(in srgb, var(--color-error) 50%, var(--color-on-surface)); }
.fin-stack-bar-unrealized { width: var(--fin-pct, 0%); opacity: 0.7; }
.fin-stack-bar-unrealized-up   { background: color-mix(in srgb, var(--color-success) 75%, var(--color-on-surface)); }
.fin-stack-bar-unrealized-down { background: color-mix(in srgb, var(--color-error) 75%, var(--color-on-surface)); }

/* Risk-chip separator pipe */
.fin-risk-chip-sep { color: color-mix(in srgb, var(--color-on-surface) 10%, transparent); }

/* Domain pill tinted chip */
.fin-domain-pill-tone {
  font-size: 13px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--fin-color, var(--color-primary)) 12%, transparent);
  color: var(--fin-color, var(--color-primary));
  font-weight: 600;
}

/* Big stat with side-suffix (was font-size:14px + color:var(--hint) inline) */
.fin-stat-suffix { font-size: 14px; color: var(--hint); font-weight: 400; }

/* Threshold-pct tone for budget cards */
.fin-pct-tone-bold { font-size: 12px; font-weight: 600; margin-top: var(--space-xs); color: var(--fin-color, inherit); }
.fin-pct-tone-low    { color: var(--color-primary); }
.fin-pct-tone-medium { color: var(--color-warning); }
.fin-pct-tone-high   { color: var(--color-error); }

/* Day-pnl big-number color */
.fin-pnl-big { font-size: 24px; font-weight: 700; color: var(--fin-color, inherit); }

/* Risk-total inline, font-size 14, dynamic color */
.fin-risk-total { font-size: 14px; font-weight: 700; color: var(--fin-color, inherit); }

/* Earnings urgency span */
.fin-earnings-urgency { color: var(--fin-color, inherit); }

/* Market indicator — color flows via --fin-color */
.fin-market-indicator-tone { color: var(--fin-color, inherit); }

/* Position-grid donut overlay row (cashflow target arc) */
.fin-target-arc-track {
  position: absolute; top: var(--space-snug); left: 0; height: 8px;
  width: var(--fin-pct, 0%); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-on-surface) 15%, transparent);
}
.fin-target-arc-fill {
  position: absolute; top: 0; left: 0; height: 8px;
  width: var(--fin-pct, 0%); border-radius: var(--radius-sm); opacity: 0.8;
  background: var(--fin-color, var(--color-primary));
}

/* Signals section wrapper + per-signal row with dynamic accent border. */
.fin-signals-card {
  background: var(--bg2); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: var(--space-roomy);
}
.fin-signal-row {
  padding: 6px 0 6px 10px; margin: 4px 0; font-size: 13px;
  border-left: 3px solid var(--fin-border-color, var(--color-outline-variant));
}
.fin-signal-row-tap { cursor: pointer; }

/* NAV history sparkline bars — height fed via --fin-bar-h, tone via class. */
.fin-nav-bar {
  flex: 1; border-radius: var(--radius-sm);
  height: var(--fin-bar-h, 4px);
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.fin-nav-bar.last { background: var(--link); }

/* "Card chrome" used by exec/results blocks (was bespoke padding/bg). */
.fin-search-input { width: 100%; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-snug); padding: 8px 12px; color: var(--fg); font-size: 13px; }
.fin-search-results-pop {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--card); border-radius: 0 0 10px 10px;
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  border-top: none; max-height: 200px; overflow-y: auto;
}
.fin-symbol-search-wrap { margin-bottom: var(--space-base); position: relative; }

/* Holding accent strip — dynamic background tint */
.fin-holding-accent-tone { background: var(--fin-bg, var(--color-primary)); }
.fin-holding-card-tertiary { border-left: 3px solid var(--color-tertiary); margin-bottom: var(--space-tight); }

/* Drift card (avg drift summary) */
.fin-drift-summary {
  font-size: 12px; padding: 6px 10px; background: var(--bg2);
  border-radius: var(--radius-default); margin-bottom: var(--space-base);
  display: flex; justify-content: space-between; align-items: center;
}

/* Search input variant in trades filter */
.fin-trades-symbol-input {
  width: 80px; background: var(--card);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  border-radius: var(--radius-tight); padding: 4px 6px; color: var(--fg); font-size: 12px;
}

/* Inline meta-text utilities. */
.fin-text-asset    { color: var(--hint); font-size: 11px; }
.fin-text-tone-bold-12 { color: var(--fin-color, inherit); font-weight: 600; font-size: 12px; }
.fin-text-tone-bold-11 { color: var(--fin-color, inherit); font-weight: 600; font-size: 11px; }
.fin-text-tone-bold-12-mt { color: var(--fin-color, inherit); font-weight: 600; font-size: 12px; }
.fin-text-tone-12        { color: var(--fin-color, inherit); font-size: 12px; }

/* PE-badge tone */
.fin-pe-badge-tone { color: var(--fin-color, inherit); }

/* Generic tone modifiers applied alongside an existing class to color it. */
.fin-tone-c       { color: var(--fin-color, inherit); }
.fin-tone-c-bold  { color: var(--fin-color, inherit); font-weight: 600; }
.fin-tone-bg-c    { background: var(--fin-bg, transparent); }

/* Note pill (10px primary edit_note) */
.fin-note-pill { font-size: 10px; color: var(--color-primary); }

/* Misc helpers replacing inline blobs in renderPortfolio / renderPnl. */
.fin-asset-pct {
  font-size: 11px; color: var(--hint); font-weight: 600;
}
.fin-segment-card-row {
  margin-top: var(--space-tight);
}
.fin-segment-card-head {
  display: flex; justify-content: space-between;
  font-size: 12px; margin-bottom: 3px;
}
.fin-segment-bar {
  display: flex; gap: 1px; height: 8px;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg);
}
.fin-segment-section-h {
  margin-top: var(--space-snug); font-size: 11px; font-weight: 600;
  color: var(--hint); text-transform: uppercase; letter-spacing: 0.3px;
}
.fin-sector-tbl {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.fin-sector-tbl-empty {
  padding: 4px 6px; text-align: right; color: var(--hint);
}
.fin-sector-tbl-cell {
  padding: 4px 6px; text-align: right; font-weight: 600;
  background: var(--fin-bg, transparent); color: var(--fin-color, inherit);
}

/* Scanner select */
.fin-scanner-select {
  background: var(--bg2); color: var(--text); border: none;
  border-radius: var(--radius-default); padding: 4px 8px; font-size: 12px;
}

/* Stat-val with embedded tone-suffix (e.g. portfolio beta label) */
.fin-stat-suffix-10 {
  font-size: 10px; color: var(--fin-color, inherit);
}

/* Faded ellipsis label (for sector etc.) */
.fin-text-faint-normal {
  color: var(--hint); font-weight: normal;
}

/* Exposure bar fill — 100% height + dynamic width */
.fin-exposure-bar-fill {
  height: 100%; border-radius: 7px;
  width: var(--fin-pct, 0%);
}
.fin-exposure-bar-fill-tertiary { background: var(--color-tertiary); }
.fin-exposure-bar-fill-primary  { background: var(--color-primary); }

/* fyi-row with read=opacity-60 */
.fin-fyi-row-read { opacity: 0.6; }

/* Status pill — color only via --fin-color, 600 weight */
.fin-status-pill { color: var(--fin-color, inherit); font-weight: 600; }

/* Macro value tonable */
.fin-macro-value-tone { color: var(--fin-color, inherit); }

/* Econ row meta-text */
.fin-econ-meta-c { color: var(--hint); margin-left: var(--space-tight); }
.fin-econ-est    { color: var(--hint); margin-left: var(--space-xs); }
.fin-econ-actual-tone { color: var(--fin-color, inherit); font-weight: 600; }

/* Form modal pad + max-h composition */
.fin-form-pad { padding: var(--space-gutter); }

/* Symbol input form variant (uppercase + bg2) */
.fin-form-input-symbol { width: 100%; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); border-radius: var(--radius-default); padding: 8px 10px; color: var(--fg); font-size: 13px; text-transform: uppercase; }

/* Edit-mode current/drift hint */
.fin-edit-current-hint { font-size: 12px; color: var(--hint); margin-bottom: var(--space-sm); }

/* Sum-warn label (red, hidden by default) */
.fin-target-sum-warn-label { font-size: 11px; color: var(--color-warning); margin-bottom: var(--space-base); display: none; }

/* Loading/error text helpers */
.fin-loading-c { text-align: center; padding: var(--space-base); color: var(--hint); }
.fin-warning-line { color: var(--color-warning); font-size: 12px; margin-top: var(--space-tight); }
.fin-error-block  { color: var(--color-error); padding: var(--space-base); }

/* Modify-order TIF select */
.fin-mod-tif-select { background: var(--card); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-tight); padding: 4px 6px; color: var(--fg); font-size: 13px; }

/* Trade input-row + risk hint */
.fin-trade-input-row { display: flex; gap: var(--space-tight); margin-bottom: var(--space-snug); }
.fin-trade-sl-hint   { font-size: 10px; color: var(--hint); margin-top: var(--space-hairline); }
.fin-bracket-note    { margin-bottom: var(--space-tight); font-size: 11px; color: var(--hint); }

/* Detail-modal helpers */
.fin-modal-h-60vh { max-height: 60vh; }
.fin-detail-pad   { padding: var(--space-gutter); }

/* Detail header chg display */
.fin-detail-chg-tone { font-size: 13px; color: var(--fin-color, inherit); }
.fin-detail-watching-btn { font-size: 11px; color: var(--color-tertiary); }

/* Detail MA50 chip */
.fin-ma-tertiary { color: var(--color-tertiary); }

/* PT context chips */
.fin-pt-ctx-tone { font-size: 11px; color: var(--fin-color, inherit); }

/* Trade qty input */
.fin-trade-qty-input { width: 100%; background: var(--card); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default); padding: 6px 8px; color: var(--fg); font-size: 14px; }

/* Trade thesis textarea */
.fin-trade-thesis-area { width: 100%; background: var(--card); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default); padding: 6px 8px; color: var(--fg); font-size: 12px; resize: vertical; }

/* Template delete × icon */
.fin-tpl-del { color: var(--color-error); margin-left: var(--space-hairline); }

/* Analyst row layout */
.fin-detail-list-item-row { display: flex; justify-content: space-between; }

/* Earnings surprise tone */
.fin-earn-surprise-tone { color: var(--fin-color, inherit); }

/* Insider tx tone */
.fin-insider-tone { color: var(--fin-color, inherit); }

/* Chart container variants */
.fin-chart-container-tone { height: var(--fin-h, 80px); }

/* Chart MA50 footer label */
.fin-chart-footer-spy {
  position: absolute; bottom: var(--space-xs); right: var(--space-base);
  font-size: 9px; color: var(--hint);
}

/* Field label tweak */
.fin-field-label-tight { margin-bottom: 1px; }

/* Volume sparkline wrap */
.fin-volume-svg-wrap { height: var(--fin-h, 16px); }

/* Misc one-shots */
.fin-2em-icon { font-size: 2em; margin-bottom: var(--space-base); color: var(--color-success); }
.fin-row-conf-tone { color: var(--fin-color, inherit); font-weight: 700; }
.fin-fw7-tone { color: var(--fin-color, inherit); font-weight: 700; }
.fin-spark-loading { color: var(--hint); font-size: 11px; text-align: center; line-height: 40px; }
.fin-net-row-tone { color: var(--fin-color, inherit); }
/* Gate-row reason text — push right + hint color */
.fin-gate-reason { margin-left: auto; color: var(--hint); }

/* finance.js inline-style replacement (lock-down compliance) */
.fin-section-title-row.fin-section-title-spaced { margin-top: 20px; }