/* PLANDRM
   Theme: Organic (from Claude Design) — warm cream/terracotta/sage, rounded,
   Caprasimo display over Figtree body. Ported as a token + component-class
   rewrite of the previous navy "private wealth management" theme — every
   selector below still matches the existing HTML/JS untouched; only the
   tokens and each component's treatment (radius, shadow, borders, type)
   changed. See _ds/organic-*/readme.md (design system export) for the
   system's own rules if retuning further. */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #f5ead8;
  --card:    #ebddc5;
  --card2:   #ebddc5;
  --surface-lift: #f9f4ed;   /* one step lighter than --card — inputs, icon chips */
  --border:  color-mix(in srgb, #201e1d 14%, transparent);
  --border2: color-mix(in srgb, #201e1d 24%, transparent);
  --text:    #201e1d;
  --muted:   color-mix(in srgb, #201e1d 55%, transparent);
  /* terracotta — warm, rounded, a little playful (Organic system). accent2 is
     the system's second voice (sage), not a tonal step of accent — used for
     the same sparing two-color-gradient spots the old navy pair covered. */
  --accent:  #c67139;
  --accent2: #7a8a5e;
  --accent-600: #b2622d;
  --accent-700: #8c491a;
  --accent-100: #fff2eb;
  --accent-800: #643312;
  --accent2-100: #f0fae1;
  --accent2-800: #3d472b;
  --accent-glow: color-mix(in srgb, #c67139 14%, transparent);
  --green:   #059669;
  --yellow:  #d97706;
  --orange:  #ea580c;
  --red:     #dc2626;
  --purple:  #7c3aed;
  --gold:    #9C7A3C;
  --nav-w:   220px;
  --header-h: 58px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
  --font-ui:   'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Caprasimo', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);

  --fs-2xs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-base: 12.5px;
  --fs-md:  14px;
  --fs-lg:  19px;
  --fs-xl:  20px;
  --fs-3xl: 50px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}
:root[data-theme="dark"] {
  /* Warm dark companion — not a naive inversion of the cream ground. Same
     terracotta/sage identity, brightened for contrast on a warm near-black. */
  --bg:      #1c1712;
  --card:    #27201a;
  --card2:   #27201a;
  --surface-lift: #322921;
  --border:  color-mix(in srgb, #f2e9db 12%, transparent);
  --border2: color-mix(in srgb, #f2e9db 22%, transparent);
  --text:    #f2e9db;
  --muted:   color-mix(in srgb, #f2e9db 55%, transparent);
  --accent:  #e2915a;
  --accent2: #a3b783;
  --accent-600: #eaa576;
  --accent-700: #f6bd98;
  --accent-100: #4a2f1c;
  --accent-800: #ffe6d2;
  --accent2-100: #37401f;
  --accent2-800: #e2ecc9;
  --accent-glow: color-mix(in srgb, #e2915a 20%, transparent);
  --green:   #22c55e;
  --yellow:  #f0b34d;
  --orange:  #fb923c;
  --red:     #f87171;
  --purple:  #a78bfa;
  --gold:    #C9A968;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.40);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.50);
}
body { background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:var(--fs-base); min-height:100vh; overflow:hidden; transition:background 0.15s,color 0.15s; -webkit-font-smoothing:antialiased; }
.theme-toggle { background:transparent; border:1px solid var(--border); color:var(--text); font-size:13px; padding:6px 9px; border-radius:var(--radius-pill); cursor:pointer; line-height:1; transition:all 0.15s var(--ease); }
.theme-toggle:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-sm); }

/* ── scrollbars (thin, theme-matched) ── */
nav::-webkit-scrollbar, .page::-webkit-scrollbar, .chart-wrap::-webkit-scrollbar { width:8px; height:8px; }
nav::-webkit-scrollbar-track, .page::-webkit-scrollbar-track, .chart-wrap::-webkit-scrollbar-track { background:transparent; }
nav::-webkit-scrollbar-thumb, .page::-webkit-scrollbar-thumb, .chart-wrap::-webkit-scrollbar-thumb { background:var(--border2); border-radius:8px; }
nav::-webkit-scrollbar-thumb:hover, .page::-webkit-scrollbar-thumb:hover, .chart-wrap::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ── accessibility: visible focus ring, respect reduced motion ── */
.btn:focus-visible, .input:focus-visible, select.input:focus-visible, .nav-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

/* ── toast notifications (replaces alert() app-wide) ── */
#toast-container { position:fixed; top:calc(var(--header-h) + 14px); right:20px; z-index:300; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:360px; }
.toast { pointer-events:auto; cursor:pointer; background:var(--surface-lift); border:1px solid var(--border); border-left:3px solid var(--red); color:var(--text); padding:12px 16px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); font-size:12px; line-height:1.5; opacity:0; transform:translateX(16px); transition:opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.toast.show { opacity:1; transform:translateX(0); }
.toast-success { border-left-color:var(--green); }
.toast-error { border-left-color:var(--red); }

/* ── client picker (searchable, replaces the old plain <select> in the header;
   the <select> itself stays in the DOM, hidden, as the source of truth every
   existing onClientChange()/jumpToClient() call site already reads/writes) ── */
.client-picker { position:relative; min-width:220px; }
.client-picker-input { cursor:text; }
.client-picker-list { display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:320px; overflow-y:auto; background:var(--surface-lift); border:1px solid var(--border2); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:200; padding:6px; }
.client-picker-list.open { display:block; }
.client-picker-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; }
.client-picker-row:hover, .client-picker-row.highlighted { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.client-picker-row.selected { font-weight:700; }
.client-picker-dot { width:8px; height:8px; border-radius:999px; flex:none; }
.client-picker-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-picker-empty { padding:14px; text-align:center; color:var(--muted); font-size:12px; }

/* ── quick jump palette (Cmd/Ctrl+K) ── */
.qjump-backdrop { position:fixed; inset:0; background:color-mix(in srgb, var(--text) 45%, transparent); z-index:400; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; }
.qjump-backdrop.open { display:flex; }
.qjump-modal { width:min(560px, 92vw); background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.qjump-input { width:100%; border:none; border-bottom:1px solid var(--border); padding:16px 18px; font-size:15px; background:transparent; color:var(--text); outline:none; border-radius:0; font-family:inherit; }
.qjump-results { max-height:360px; overflow-y:auto; padding:6px; }
.qjump-row { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:13.5px; gap:10px; }
.qjump-row:hover, .qjump-row.highlighted { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.qjump-row-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qjump-row-sub { font-size:10px; text-transform:uppercase; letter-spacing:.06em; flex:none; }
.qjump-empty { padding:20px; text-align:center; color:var(--muted); font-size:12px; }
.qjump-hint { padding:9px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }

/* ── goal funding-progress bar ── */
.progress-track { background:var(--bg); border:1px solid var(--border); border-radius:999px; height:8px; overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; transition:width 0.3s var(--ease); }

/* ── header ── */
header { position:fixed; top:0; left:0; right:0; height:var(--header-h); background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 22px; gap:16px; z-index:100; box-shadow:var(--shadow-sm); }
.logo { font-family:var(--font-heading); font-size:17px; font-weight:400; letter-spacing:0.01em; color:var(--text); white-space:nowrap; }
.logo span { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:var(--accent); }
@supports (background-clip:text) or (-webkit-background-clip:text) { .logo span { color:transparent; } }
.header-sub { font-size:var(--fs-xs); color:var(--muted); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.header-link { font-size:var(--fs-sm); color:var(--muted); text-decoration:none; padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius-pill); transition:all 0.15s var(--ease); }
.header-link:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-sm); }

/* ── settings panel ── */
.settings-row { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:13.5px; }
.settings-row:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── login gate: fully opaque, covers the whole viewport — nothing behind it
   should be visible, unlike the translucent .qjump-backdrop other modals use.
   Vertically centered like a real page, not dropped from the top like the
   other quick-modals that reuse .qjump-backdrop. ── */
#login-overlay { background:var(--bg); align-items:center; padding-top:0; }
#login-overlay .qjump-modal { box-shadow:var(--shadow-lg); }
.login-brand { font-family:inherit; font-weight:800; font-size:22px; letter-spacing:.02em; text-align:center; margin-bottom:6px; }
.login-brand span { color:var(--accent); }

/* ── layout ── */
.shell { display:flex; height:100vh; padding-top:var(--header-h); }
nav { width:var(--nav-w); flex-shrink:0; background:var(--card); border-right:1px solid var(--border); padding:16px 10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-pill); cursor:pointer; color:var(--muted); font-size:var(--fs-base); font-weight:500; transition:background 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease); }
.nav-item:hover { background:color-mix(in srgb, var(--accent) 7%, transparent); color:var(--text); transform:translateX(2px); }
.nav-item.active { background:var(--accent-glow); color:var(--accent-700); font-weight:600; }
.nav-icon { width:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--muted); }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color:inherit; }
.nav-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; display:block; }
.nav-divider { font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding:14px 12px 5px; }
.nav-divider:first-child { padding-top:2px; }

/* ── collapsible nav sections ── */
.nav-section { display:flex; flex-direction:column; gap:2px; }
.nav-section-head { display:flex; align-items:center; gap:6px; padding:8px 10px 8px 12px; cursor:pointer; user-select:none; border-radius:var(--radius-pill); transition:background 0.15s var(--ease); }
.nav-section-head:hover { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.nav-section-chevron { font-size:8px; color:var(--muted); transition:transform 0.15s var(--ease); width:10px; text-align:center; flex-shrink:0; }
.nav-section-label { font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.nav-section-items { display:flex; flex-direction:column; gap:2px; overflow:hidden; padding-left:2px; }
.nav-section.collapsed .nav-section-items { display:none; }
.nav-section.collapsed .nav-section-chevron { transform:rotate(-90deg); }
.page { flex:1; overflow-y:auto; padding:24px 28px; display:none; }
.page.active { display:block; animation:fade-in 0.18s var(--ease); }
@keyframes fade-in { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
.no-client { color:var(--muted); font-size:var(--fs-base); padding:60px 20px; text-align:center; }

/* ── common ── */
.card { background:var(--card2); border:none; border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm); transition:box-shadow 0.2s var(--ease); }
.section-label { font-size:var(--fs-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:10px; }
.btn { background:var(--accent); color:#fffaf4; border:none; padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); font-family:var(--font-heading); font-weight:400; font-size:var(--fs-base); cursor:pointer; letter-spacing:0.01em; box-shadow:var(--shadow-sm); transition:transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease); }
.btn:hover { background:var(--accent-600); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active { transform:translateY(0); box-shadow:var(--shadow-sm); background:var(--accent-700); }
.btn-sm { padding:6px 12px; font-size:var(--fs-sm); }
.btn-green { background:var(--green); }
.btn-outline { background:transparent; border:1px solid var(--border2); color:var(--text); box-shadow:none; font-family:var(--font-heading); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent-700); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.btn-danger { background:transparent; border:1px solid var(--red); color:var(--red); box-shadow:none; font-family:var(--font-heading); }
.btn-danger:hover { background:rgba(220,38,38,0.08); }
.tab-btn { background:transparent; border:1px solid var(--border2); color:var(--muted); padding:7px 16px; border-radius:var(--radius-pill); font-family:var(--font-heading); font-size:var(--fs-sm); cursor:pointer; transition:background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); }
.tab-btn:hover { color:var(--text); border-color:var(--accent); }
.tab-btn.active { background:var(--accent); border-color:var(--accent); color:#fffaf4; }
.group-card .section-label { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.group-card .badge { font-family:var(--font-mono); }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-5); }
.page-title { font-family:var(--font-heading); font-size:var(--fs-lg); font-weight:400; color:var(--text); letter-spacing:-0.005em; }
.page-sub   { font-size:var(--fs-sm); color:var(--muted); margin-top:3px; }
.input, select.input { background:var(--surface-lift); border:1px solid var(--border2); color:var(--text); padding:8px 14px; border-radius:var(--radius-pill); font-family:inherit; font-size:var(--fs-base); outline:none; transition:border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.input:focus, select.input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.input-sm { width:auto; max-width:100%; }
textarea.input { resize:vertical; min-height:50px; border-radius:var(--radius-md); }
/* min-width:0 overrides the flex/grid default of min-width:auto, which sizes an item to
   fit its content (e.g. a wide select option or number value) even past its track/flex
   share — that's what was letting inputs push past their card/grid-cell edge. */
.col { display:flex; flex-direction:column; gap:5px; min-width:0; }
.lbl { font-size:var(--fs-xs); color:var(--muted); letter-spacing:0.04em; text-transform:uppercase; font-weight:600; }
.val { font-family:var(--font-mono); font-size:var(--fs-xl); font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.c-green { color:var(--green); } .c-red { color:var(--red); } .c-yellow { color:var(--yellow); }
.c-muted { color:var(--muted); } .c-accent { color:var(--accent-700); } .c-gold { color:var(--gold); }
.empty { color:var(--muted); font-size:var(--fs-base); padding:var(--space-5); text-align:center; }

/* ── snapshot hero ── */
.snapshot-hero { border-radius:var(--radius-lg); box-shadow:var(--shadow-md); margin-bottom:var(--space-5); padding:var(--space-4); background:linear-gradient(135deg,var(--accent-600),var(--accent)); color:#fffaf4; }
.snapshot-hero .lbl, .snapshot-hero .c-muted { color:rgba(255,250,244,0.75); }
.snapshot-hero .val, .snapshot-hero .page-title { color:#fffaf4; }
/* the one number on the page that should read as THE headline — Caprasimo
   hero treatment, same idea as .success-hero .big, just inline in the hero card */
#snap-net-worth { font-family:var(--font-heading); font-weight:400; font-size:32px; letter-spacing:-0.01em; }

/* ── kpi grid ── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-bottom:var(--space-5); }
.kpi-card { background:var(--card2); border:none; border-radius:var(--radius-md); padding:var(--space-4); box-shadow:var(--shadow-sm); transition:box-shadow 0.2s var(--ease), transform 0.2s var(--ease); min-width:0; }
.kpi-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
/* the headline number in any KPI tile reads as a display figure, not tabular
   data — Caprasimo per the design system's "KPI tile numeral" rule ── */
.kpi-card .val { font-family:var(--font-heading); font-weight:400; font-size:24px; }
.kpi-icon-badge { width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.kpi-icon-badge svg { width:15px; height:15px; stroke-width:2.75; stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.kpi-icon-badge.tint-accent  { background:var(--accent-100); color:var(--accent-700); }
.kpi-icon-badge.tint-accent2 { background:var(--accent2-100); color:var(--accent2-800); }
.kpi-icon-badge.tint-neutral { background:var(--surface-lift); color:var(--muted); }

/* ── themed empty state — icon badge + title + body + CTA, used wherever a
   client has no data yet on a given page (Real Estate, Debt, Insurance, Tax) ── */
.fp-empty { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:28px 24px; }
.fp-empty-icon { width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; flex:none; }
.fp-empty-icon svg { width:20px; height:20px; stroke-width:2.75; stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.fp-empty-icon.tint-accent  { background:var(--accent-100); color:var(--accent-700); }
.fp-empty-icon.tint-accent2 { background:var(--accent2-100); color:var(--accent2-800); }
.fp-empty-icon.tint-neutral { background:var(--surface-lift); color:var(--muted); }
.fp-empty-title { font-family:var(--font-heading); font-weight:400; font-size:16px; }
.fp-empty-body { font-size:13px; color:var(--muted); max-width:52ch; line-height:1.5; }

/* ── tables ── */
table.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
table.data-table th { text-align:left; font-size:var(--fs-2xs); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:9px 10px; border-bottom:1px solid var(--border2); white-space:nowrap; }
table.data-table td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table tbody tr { transition:background 0.12s var(--ease); }
table.data-table tbody tr:hover { background:color-mix(in srgb, var(--accent) 5%, transparent); }
table.data-table td.num { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ── forms ── */
.form-panel { display:none; margin-bottom:16px; }
.form-panel.open { display:block; animation:fade-in 0.18s var(--ease); }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:var(--space-3); }
.form-section-lbl { font-size:var(--fs-xs); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-700); margin:14px 0 8px; }
.form-actions { display:flex; gap:var(--space-2); margin-top:14px; }

/* ── badges: account types, task priority/status, pipeline stage — left as
   their own distinguishable hues (unrelated to brand identity, need > 2
   colors to stay legible across many categories); pill radius already
   matches Organic's tag treatment ── */
.badge { font-size:var(--fs-xs); font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:0.02em; display:inline-block; white-space:nowrap; }
.bg-taxable   { background:#dbeafe; color:#1d4ed8; }
.bg-pretax    { background:#fef3c7; color:#b45309; }
.bg-roth      { background:#d1fae5; color:#047857; }
.bg-hsa       { background:#ede9fe; color:#6d28d9; }
.bg-529       { background:#cffafe; color:#0e7490; }
.bg-priority-high   { background:#fee2e2; color:#b91c1c; }
.bg-priority-medium { background:#fef3c7; color:#b45309; }
.bg-priority-low    { background:#e5e7eb; color:#374151; }
.bg-status-open      { background:#dbeafe; color:#1d4ed8; }
.bg-status-done       { background:#d1fae5; color:#047857; }
.bg-stage-lead                { background:#ede9fe; color:#6d28d9; }
.bg-stage-contacted           { background:#e0e7ff; color:#4338ca; }
.bg-stage-meeting-scheduled   { background:#dbeafe; color:#1d4ed8; }
.bg-stage-proposal-sent       { background:#fef3c7; color:#b45309; }
.bg-stage-onboarding          { background:#cffafe; color:#0e7490; }
.bg-stage-active-client       { background:#d1fae5; color:#047857; }
.bg-stage-inactive            { background:#e5e7eb; color:#6b7280; }

/* ── tax bracket table ── */
.bracket-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin-bottom:14px; }
.bracket-table th { text-align:left; font-size:var(--fs-2xs); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--border2); }
.bracket-table td { padding:6px 8px; border-bottom:1px solid var(--border); }
.disclaimer { font-size:var(--fs-xs); color:var(--muted); background:var(--surface-lift); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 14px; margin-top:10px; line-height:1.5; }

/* ── charts ── */
.chart-wrap { background:var(--card2); border:none; border-radius:var(--radius-md); padding:var(--space-4); overflow-x:auto; box-shadow:var(--shadow-sm); }
.chart-wrap svg { display:block; }
.chart-legend { display:flex; gap:16px; margin-top:10px; font-size:var(--fs-sm); }
.chart-legend-item { display:flex; align-items:center; gap:6px; }
.chart-legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ── success rate hero ── */
.success-hero { text-align:center; padding:30px 0; }
.success-hero .big { font-family:var(--font-heading); font-weight:400; font-size:var(--fs-3xl); color:var(--accent); background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; }
@supports (background-clip:text) or (-webkit-background-clip:text) { .success-hero .big { color:transparent; } }
.success-hero .lbl { font-size:var(--fs-sm); color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:var(--space-2); font-weight:600; }

/* ── generic label/value row ── */
.date-row { display:flex; justify-content:space-between; align-items:center; padding:7px 8px; font-size:var(--fs-base); border-bottom:1px solid var(--border); gap:12px; border-radius:8px; transition:background 0.12s var(--ease); }
.date-row:last-child { border-bottom:none; }
.date-row[onclick]:hover, .date-row.clickable:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); cursor:pointer; }

/* ── pipeline drag-and-drop ── */
.pipeline-column { transition:background 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.pipeline-column.drag-over { background:color-mix(in srgb, var(--accent) 8%, var(--card2)); box-shadow:0 0 0 2px var(--accent) inset; }
.pipeline-card { cursor:grab; }
.pipeline-card:active { cursor:grabbing; }
.pipeline-card.dragging { opacity:0.4; }

/* ── formal statement (balance sheet) — deliberately kept OUTSIDE the Organic
   reskin: classic serif financial-document styling, same on screen and print,
   regardless of app theme. Untouched by this pass, same as the token pass
   before it — a formal statement should not read as "warm and playful." ── */
.statement-doc { background:#fff; color:#111; font-family:Georgia,'Times New Roman',serif; padding:36px 44px; border-radius:8px; border:1px solid var(--border); }
.statement-masthead { text-align:center; padding-bottom:16px; margin-bottom:20px; border-bottom:2px solid #111; }
.statement-masthead .client-name { font-size:20px; font-weight:700; letter-spacing:0.02em; }
.statement-masthead .doc-title { font-size:13px; text-transform:uppercase; letter-spacing:0.12em; margin-top:4px; }
.statement-masthead .doc-date { font-size:12px; color:#555; margin-top:4px; font-style:italic; }

table.statement-table { width:100%; border-collapse:collapse; font-size:13px; }
table.statement-table td { padding:4px 0; vertical-align:baseline; }
table.statement-table td.stmt-value { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:20px; }

tr.stmt-section-header td { padding-top:0; padding-bottom:6px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1.5px solid #111; }

tr.stmt-group-header td { padding-top:12px; font-size:12px; font-weight:700; font-style:italic; color:#333; }

tr.stmt-line td.stmt-name { padding-left:22px; }
tr.stmt-line td.stmt-detail { color:#777; font-size:11px; font-style:italic; }

tr.stmt-subtotal td { padding-top:6px; border-top:1px solid #999; font-weight:700; }
tr.stmt-subtotal td.stmt-name { padding-left:22px; }

tr.stmt-grand-total td { padding-top:8px; padding-bottom:4px; border-top:2.5px double #111; font-weight:700; font-size:14px; }

.statement-networth-table { margin-top:24px; }
.statement-networth-table tr.stmt-net-worth td { padding-top:14px; border-top:2.5px double #111; font-weight:700; font-size:17px; }

.statement-empty { color:#888; font-style:italic; font-size:12px; padding:10px 0; }

/* non-table equivalents of stmt-section-header/stmt-detail, for statement-doc content
   (like the Client Report's embedded charts) that isn't laid out as a table row */
.stmt-section-title { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1.5px solid #111; padding-bottom:6px; margin-bottom:10px; }
.stmt-detail { color:#777; font-size:11px; font-style:italic; }

/* ── print ── */
.print-only { display:none; }
/* Balance Sheet specifically: the formal serif .statement-doc is print-only now
   (see .print-only above) — a themed on-screen replacement (.screen-only) takes
   its place on screen, matching the app's Organic theme, but stays out of the
   printed/exported client document, which keeps its classic formal look. */
.screen-only { display:block; }
@media print {
  .screen-only { display:none !important; }
}
@media print {
  header, nav, .btn { display:none !important; }
  .shell { padding-top:0; display:block; height:auto; }
  .page { display:none !important; overflow:visible; padding:0; }
  .page.active { display:block !important; animation:none; }
  body { overflow:visible; background:#fff; color:#000; }
  #cashflow-dob-warning, .kpi-grid { display:none !important; }
  .print-only { display:block !important; }
  .card { box-shadow:none; border:none; }
  .statement-doc { border:none; padding:0; }
}