/* ═══════════════════════════════════════════════════════════════════════════
   Jay & Sneha Finance Dashboard — design tokens
   Direction: Terminal · Neon. Dark is the designed default, light is the
   daylight fallback. Paste this over the top of public/styles.css.

   Contrast ratios are measured against --plane for text, against --surface
   for anything sitting on a panel. Every text pair is ≥ 4.5:1 (WCAG AA).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: 44px;   /* net worth, portfolio value            600 / -0.035em */
  --fs-stat:    20px;   /* secondary big figures                 600 / -0.02em  */
  --fs-figure:  16px;   /* tile figures                          600            */
  --fs-row:   12.5px;   /* table + list data, body               500 / 400      */
  --fs-meta:  10.5px;   /* dates, masks, subtypes                400            */
  --fs-label:    9px;   /* uppercase section labels              700 / 0.14em   */

  --lh-tight: 1.05;
  --lh-body:  1.45;
  --tr-label: 0.14em;
  --tr-display: -0.035em;

  /* ── Space + geometry ───────────────────────────────────────────────── */
  --row-h:      30px;   /* table / list row, desktop */
  --row-h-touch: 44px;  /* the same row ≤820px, and every touch target */
  --pad-panel:  12px 16px;
  --gap-panel:  8px;
  --radius:     2px;
  --hair:       1px;

  /* ── Surfaces + ink (dark) ──────────────────────────────────────────── */
  --plane:      #0b0b0a;
  --surface:    #131311;
  --surface-2:  #1a1a17;   /* recessed: expanded rows, inset bars */
  --grid:       #23231f;   /* hairlines between rows */
  --baseline:   #35342f;   /* heavier rule: table head, control borders */
  --border:     rgba(244,242,236,0.10);
  --muted:      #918c84;   /*  5.0:1 */
  --ink-2:      #cbc6bc;   /* 10.6:1 */
  --ink:        #f4f2ec;   /* 16.6:1 */
  --wash:       rgba(244,242,236,0.06);

  /* ── Accent + state ────────────────────────────────────────────────── */
  --accent:     #2fe3c8;   /* 12.9:1 — data, state, primary button, one hairline */
  --accent-ink: #05100e;   /* text on an accent fill */
  --focus:      #2fe3c8;
  --good:       #4bf08f;   /* 12.6:1 — signed positive money only */
  --good-text:  #4bf08f;
  --critical:   #ff5f56;   /*  7.2:1 — over budget, sell drift, unlink */
  --warning:    #ffc23d;   /* 12.3:1 — failed connection, ≥95% of budget */

  /* ── Categorical series — assignment order matters ─────────────────── */
  --s1: #2fe3c8;  /* cyan    */
  --s2: #ff5ea8;  /* magenta */
  --s3: #ffb02e;  /* amber   */
  --s4: #52a8ff;  /* azure   */
  --s5: #9ee83a;  /* lime    */
  --s6: #a884ff;  /* violet  */
  --s7: #ff7a52;  /* coral   */
  --s8: #d8c88a;  /* sand    */

  --shadow: 0 8px 24px rgba(0,0,0,0.5);   /* toast only */
}

:root[data-theme="light"] {
  color-scheme: light;

  --plane:      #f4f3ee;
  --surface:    #fbfaf6;   /* never #ffffff */
  --surface-2:  #f0efe8;
  --grid:       #e6e3da;
  --baseline:   #c9c5b9;
  --border:     rgba(18,18,16,0.12);
  --muted:      #6f6b62;   /*  5.5:1 */
  --ink-2:      #45423b;   /*  9.9:1 */
  --ink:        #121210;   /* 17.4:1 */
  --wash:       rgba(18,18,16,0.05);

  --accent:     #0b7266;   /*  5.1:1 — the neon at ink strength */
  --accent-ink: #ffffff;
  --focus:      #0b7266;
  --good:       #14662e;   /*  5.6:1 */
  --good-text:  #14662e;
  --critical:   #b3402c;   /*  5.1:1 */
  --warning:    #8a5a00;   /*  5.0:1 */

  --s1: #0b7266; --s2: #b02a6a; --s3: #8a5a00; --s4: #1a5fb4;
  --s5: #4d7a12; --s6: #5b45c9; --s7: #b3402c; --s8: #7a6a20;

  --shadow: 0 8px 24px rgba(18,18,16,0.18);
}

/* Follow the OS unless the user has chosen. app.js sets data-theme="dark"
   or "light" explicitly; this block covers first paint before that runs. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --plane: #f4f3ee; --surface: #fbfaf6; --surface-2: #f0efe8;
    --grid: #e6e3da; --baseline: #c9c5b9; --border: rgba(18,18,16,0.12);
    --muted: #6f6b62; --ink-2: #45423b; --ink: #121210;
    --wash: rgba(18,18,16,0.05);
    --accent: #0b7266; --accent-ink: #ffffff; --focus: #0b7266;
    --good: #14662e; --good-text: #14662e; --critical: #b3402c; --warning: #8a5a00;
    --s1: #0b7266; --s2: #b02a6a; --s3: #8a5a00; --s4: #1a5fb4;
    --s5: #4d7a12; --s6: #5b45c9; --s7: #b3402c; --s8: #7a6a20;
    --shadow: 0 8px 24px rgba(18,18,16,0.18);
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Component CSS — Terminal · Neon
   Written against the class names already in public/index.html wherever they
   still apply. Everything that changed is listed in RENAME-MAP.md.
   Load order: tokens.css, then this file.
   ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--plane);
  color: var(--ink);
  font-size: var(--fs-row);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums lining-nums;
}
button, select, input { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Every number in the app is tabular. Do not undo this per-element. */
.num, .acct-bal, .h-value, .txn-amt, .bt-val, .bcat-nums, .big-number,
.hb-val, .rsb-val, .acct-mask, .conn-meta, .txn-date, .h-meta, .acct-sub {
  font-variant-numeric: tabular-nums lining-nums;
}

:where(button, a, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Icons ─────────────────────────────────────────────────────────────── */
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 14px; height: 14px; stroke-width: 1.75; }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: var(--hair) solid var(--grid);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sep { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.sync-stamp { font-size: var(--fs-meta); color: var(--muted); }

.env-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius); padding: 2px 6px;
}
.env-badge.production { background: var(--good); color: var(--accent-ink); }
.env-badge.sandbox    { background: var(--warning); color: #241a05; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--row-h); padding: 0 14px;
  font-size: 12px; font-weight: 600;
  border: var(--hair) solid var(--baseline); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--grid); }
.btn:disabled { background: var(--surface); border-color: var(--grid); color: var(--muted); cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-quiet { background: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: transparent; color: var(--critical); border-color: color-mix(in oklab, var(--critical) 40%, var(--surface)); }
.btn-icon { width: var(--row-h); height: var(--row-h); padding: 0; }
.btn-sm { min-height: 26px; padding: 0 9px; font-size: 11.5px; font-weight: 500; }

/* ── Segmented control (view nav, account tabs) ────────────────────────── */
.seg {
  display: inline-flex; gap: 0; padding: 2px;
  background: var(--plane); border: var(--hair) solid var(--grid); border-radius: var(--radius);
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: none; border-radius: 1px;
  background: transparent; color: var(--ink-2);
  font-size: 11.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.seg-count {
  font-size: 10px; font-weight: 700; border-radius: 1px; padding: 0 4px;
  background: var(--grid); color: var(--muted);
}
.seg-btn.active .seg-count { background: rgba(5,16,14,0.30); color: var(--accent-ink); }

/* ── Pills (risk profiles) ─────────────────────────────────────────────── */
.pill {
  padding: 5px 11px; font-size: 11.5px; font-weight: 500;
  border: var(--hair) solid var(--baseline); border-radius: var(--radius);
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.pill:hover { border-color: var(--accent); color: var(--ink); }
.pill.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; font-size: 11px;
  background: var(--surface-2); color: var(--ink-2);
  border: var(--hair) solid var(--baseline); border-radius: var(--radius);
}
.chip.toggle { cursor: pointer; }
.chip.toggle.on { color: var(--ink); border-color: color-mix(in oklab, var(--accent) 45%, var(--surface)); }
.chip.toggle.on .ico { color: var(--accent); }
.chip.toggle.off {
  background: transparent; color: var(--muted);
  border-style: dashed; text-decoration: line-through;   /* shape cue, not just dimmer */
}
.chip.toggle:hover { border-color: var(--accent); }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink-2); border: var(--hair) solid var(--baseline);
}
.action {                                   /* rebalancer Buy / Sell / Hold */
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.action.buy  { color: var(--good-text); }
.action.sell { color: var(--critical); }
.action.hold { font-weight: 500; }
/* every action carries an arrow / equals glyph — never colour alone */

/* ── Select ────────────────────────────────────────────────────────────── */
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.cat-select {
  appearance: none; cursor: pointer;
  padding: 5px 26px 5px 8px; min-height: 28px; max-width: 150px;
  font-size: 11px; font-weight: 500;
  background: var(--plane); color: var(--ink);
  border: var(--hair) solid var(--baseline); border-radius: var(--radius);
}
.select-wrap .ico { position: absolute; right: 7px; color: var(--muted); pointer-events: none; }

/* ── Layout + panels ───────────────────────────────────────────────────── */
main { max-width: 1440px; margin: 0 auto; padding: 16px 20px 40px; }
.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap-panel); margin-bottom: var(--gap-panel); }
.grid-2.flip { grid-template-columns: 1fr 1.35fr; }

.card {                                     /* panel */
  background: var(--surface);
  border: var(--hair) solid var(--grid);
  border-radius: var(--radius);
  margin-bottom: var(--gap-panel);
}
.card > h2 {                                /* panel head */
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px;
  background: var(--plane);
  border-bottom: var(--hair) solid var(--grid);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted);
}
.h2-tag { font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.card-body { padding: 8px 16px 14px; }
.hint { font-size: 11.5px; color: var(--ink-2); margin-bottom: 8px; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { border-top: var(--hair) solid var(--accent); }   /* the one accent hairline */
.hero-top { display: grid; grid-template-columns: 420px 1fr; }
.hero-main { padding: 18px 24px 20px; border-right: var(--hair) solid var(--grid); }
.hero-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.big-number { font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--tr-display); line-height: var(--lh-tight); }
.hero-delta { font-size: 12px; color: var(--muted); margin-top: 10px; }
.hero-delta .up { color: var(--good-text); font-weight: 600; }
.hero-stats { display: flex; gap: 20px; margin-top: 14px; padding-top: 12px; border-top: var(--hair) solid var(--grid); }
.stat .val { font-size: 17px; font-weight: 600; }
/* Signed money is the ONLY place red/green appear on a figure. Liabilities are
   shown with a minus sign in --ink, not in red. */
.hero-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); }
.hb-item { padding: 14px 16px 16px; border-right: var(--hair) solid var(--grid); }
.hb-item:last-child { border-right: none; }
.hb-label { display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted); }
.hb-dot { width: 6px; height: 6px; flex: none; }        /* series colour, square */
.hb-val { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.hb-meta { font-size: var(--fs-meta); color: var(--muted); margin-top: 3px; }

/* ── Rows: account / holding / transaction ─────────────────────────────── */
.account-row, .holding-row, .txn-row {
  display: grid; align-items: center; gap: 12px;
  min-height: var(--row-h);
  border-bottom: var(--hair) solid var(--grid);
}
.account-row { grid-template-columns: 20px minmax(0, 1fr) 132px; }
.holding-row { grid-template-columns: 74px minmax(0, 1fr) 104px 120px 96px 96px; min-height: 34px; }
.txn-row     { grid-template-columns: minmax(0, 1fr) 116px 78px; min-height: 32px; }
.account-row:last-child, .holding-row:last-child, .txn-row:last-child { border-bottom: none; }

/* Truncation rule: the NAME ellipsises, the identifying meta line stays.
   Both live in one min-width:0 stack — never side by side on one nowrap line. */
.row-main { min-width: 0; overflow: hidden; }
.acct-name, .h-name, .txn-name {
  display: block; font-size: var(--fs-row); font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-sub, .h-meta, .txn-cat {
  display: block; font-size: 10px; color: var(--muted); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-bal, .h-value { font-size: 13px; font-weight: 600; text-align: right; }
.acct-bal.red { color: var(--ink); }        /* debts read with a minus, not in red */
.acct-mask { color: var(--muted); }
.txn-amt { font-size: var(--fs-row); font-weight: 600; text-align: right; }
.txn-amt.credit { color: var(--good-text); }
.txn-amt.debit  { color: var(--ink); }
.txn-date { font-size: var(--fs-meta); color: var(--muted); text-align: right; }
.ticker {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-align: center;
  padding: 2px 6px; border-radius: var(--radius);
  background: var(--plane); border: var(--hair) solid var(--baseline);
}
.h-gain { display: block; font-size: 10.5px; font-weight: 600; text-align: right; }
.h-gain.up { color: var(--good-text); }
.h-gain.down { color: var(--critical); }
.h-gain.none { font-weight: 400; color: var(--muted); }
.ret-summary-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 12px; margin: 6px 0 8px;
  background: var(--surface-2); border-left: 2px solid var(--accent);
}
.rsb-label { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.rsb-val { font-size: 20px; font-weight: 600; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
.cat-table, .rebal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-row); }
.cat-table th, .rebal-table th {
  height: 24px; padding: 0 12px; text-align: left;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted);
  border-bottom: var(--hair) solid var(--baseline);
}
.cat-table td, .rebal-table td {
  height: var(--row-h); padding: 0 12px;
  border-bottom: var(--hair) solid var(--grid);
}
.cat-table tbody tr:hover, .rebal-table tbody tr:hover { background: var(--surface-2); }
.cat-table tr:last-child td, .rebal-table tr:last-child td { border-bottom: none; }
.num { text-align: right; }
.series-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: middle; }

/* ── Meter (one component: category bars, budget rows, drift) ──────────── */
.meter { position: relative; height: 4px; background: var(--grid); }
.meter-fill { position: absolute; left: 0; top: 0; height: 4px; background: var(--accent); }
.meter-tick { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--baseline); }
/* the tick is the 100% / target line — an over-budget fill runs PAST it, so the
   state is readable with colour removed */
.meter-fill.near { background: var(--warning); }   /* ≥95% */
.meter-fill.over { background: var(--critical); }
.bar-track { composes: meter; }                    /* legacy alias — see rename map */

/* ── Budget ────────────────────────────────────────────────────────────── */
.budget-header { display: grid; grid-template-columns: 300px 1fr; }
.month-nav { display: inline-flex; align-items: center; gap: 6px; padding: 2px;
  background: var(--plane); border: var(--hair) solid var(--grid); border-radius: var(--radius); }
.month-label { min-width: 112px; text-align: center; font-size: 14px; font-weight: 600; }
.budget-totals { display: flex; gap: 36px; flex-wrap: wrap; align-items: baseline; padding: 16px 20px; }
.bt-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted); }
.bt-val { font-size: 22px; font-weight: 600; }
.bt-val.hero { font-size: 34px; letter-spacing: -0.03em; }
.bt-val.under { color: var(--good-text); }
.bt-val.over  { color: var(--critical); }

.budget-row { border-bottom: var(--hair) solid var(--grid); }
.budget-row-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px 220px;
  gap: 16px; align-items: center; min-height: 34px; padding: 3px 0; cursor: pointer;
}
.budget-row-head:hover { background: var(--surface-2); }
.bcat-name { display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: var(--fs-row); font-weight: 500; white-space: nowrap; }
.bcat-count { font-size: 10px; color: var(--muted); }
.xfer-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted); border: var(--hair) solid var(--baseline);
}
.bcat-nums { color: var(--muted); white-space: nowrap; }
.bcat-nums strong { font-size: var(--fs-row); font-weight: 600; color: var(--ink); }
.bcat-status { min-width: 108px; text-align: right; font-size: 11px; white-space: nowrap; color: var(--muted); }
.bcat-status.near   { color: var(--warning); font-weight: 600; }
.bcat-status.over   { color: var(--critical); font-weight: 600; }
.bcat-status.funded { color: var(--good-text); font-weight: 600; }
.bcat-status.pending{ font-style: italic; }
.budget-txns { background: var(--plane); border-top: var(--hair) solid var(--grid); padding: 2px 0 8px 26px; }
.disclosure { display: flex; color: var(--muted); transition: transform 0.12s; }
.is-open > .disclosure, .collapsible.open .disclosure { transform: rotate(90deg); }

/* ── Connections ───────────────────────────────────────────────────────── */
.conn-row { padding: 10px 0; border-bottom: var(--hair) solid var(--grid); }
.conn-row.err {
  padding-left: 10px; background: color-mix(in oklab, var(--warning) 8%, var(--surface));
  border-left: 2px solid var(--warning);
}
.conn-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.conn-dot { width: 7px; height: 7px; flex: none; background: var(--good); }   /* square, not circle */
.conn-status { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.conn-status.err { font-weight: 600; color: var(--warning); }
.conn-code { font-size: var(--fs-meta); color: var(--muted); }
.conn-meta { font-size: 10px; color: var(--muted); margin-top: 3px; }
.conn-accounts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.conn-actions { display: flex; gap: 6px; }

/* ── Charts ────────────────────────────────────────────────────────────── */
.chart-wrap { position: relative; height: 190px; }
.chart-wrap.tall { height: 220px; }
.chart-row { display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: center; }
.chart-key-row {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 44px;
  gap: 8px; align-items: center; height: 24px;
  border-bottom: var(--hair) solid var(--grid);
}
.chart-key-row .label { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-key-row .value { font-size: 11.5px; font-weight: 600; }
.chart-key-row .pct { font-size: 11px; color: var(--muted); text-align: right; }
/* The Chart.js legend is OFF everywhere. This key replaces it and adds the
   value + share a legend can't show. */

/* ── Banners, toast, spinner, skeleton, empty ──────────────────────────── */
.status-bar {
  display: none; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: var(--gap-panel);
  background: color-mix(in oklab, var(--warning) 8%, var(--surface));
  border: var(--hair) solid var(--baseline); border-left: 2px solid var(--warning);
  border-radius: var(--radius); font-size: 12px;
}
.status-bar.show { display: flex; }
.status-bar.critical { border-left-color: var(--critical);
  background: color-mix(in oklab, var(--critical) 8%, var(--surface)); }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 430px); padding: 9px 12px;
  background: var(--ink); color: var(--plane);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 9999;
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast button {
  margin-left: auto; padding: 4px 9px; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: inherit;
  background: transparent; border: var(--hair) solid currentColor; border-radius: var(--radius); cursor: pointer;
}

.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: middle;
  border: 2px solid var(--baseline); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeletons mirror the real row grid; use them wherever the layout is known.
   The spinner is only for results whose shape is unknown (connection checks). */
.skel-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 92px;
  gap: 10px; align-items: center; height: var(--row-h);
  border-bottom: var(--hair) solid var(--grid);
}
.skel { background: var(--grid); border-radius: var(--radius); height: 9px;
  animation: pulse 1.4s ease-in-out infinite; }
.skel.ico-box { width: 16px; height: 16px; }
.skel.donut { width: 92px; height: 92px; border-radius: 50%; border: 16px solid var(--grid); background: none; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }

.empty { font-size: 12px; color: var(--ink-2); padding: 10px 0; }
.empty-box { border: var(--hair) dashed var(--baseline); border-radius: var(--radius); padding: 13px; }
.loading { font-size: 12px; color: var(--muted); padding: 10px 0; display: flex; align-items: center; gap: 8px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
  .chart-wrap { height: 180px; }
  .chart-wrap.tall { height: 200px; }
}
@media (max-width: 820px) {
  main { padding: 12px 12px 60px; }
  .grid-2, .grid-2.flip { grid-template-columns: 1fr; }
  .hero-top, .budget-header { grid-template-columns: 1fr; }
  .hero-main { border-right: none; border-bottom: var(--hair) solid var(--grid); }
  .hero-breakdown { grid-template-columns: 1fr 1fr; }
  .hb-item:nth-child(odd) { border-right: var(--hair) solid var(--grid); }
  .hb-item:nth-child(even) { border-right: none; }
  .hb-item:nth-child(n+3) { border-top: var(--hair) solid var(--grid); }
  .big-number { font-size: 34px; }

  /* Touch: nothing interactive below 44px */
  .btn, .btn-icon, .seg-btn, .pill, .cat-select, .month-nav .btn-icon { min-height: var(--row-h-touch); }
  .btn-icon { width: var(--row-h-touch); height: var(--row-h-touch); }
  .seg { width: 100%; }
  .seg-btn { flex: 1; justify-content: center; }
  .account-row, .holding-row, .txn-row, .skel-row { min-height: var(--row-h-touch); }

  /* Holdings + rebalancer stop being tables and become stacked blocks */
  .holding-row { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .holding-row .h-shares, .holding-row .h-weight { display: none; }
  .budget-row-head { grid-template-columns: 1fr auto; row-gap: 7px; }
  .budget-row-head .meter { grid-column: 1 / -1; }
  .bcat-status { grid-column: 1 / -1; min-width: 0; text-align: left; }
  .chart-row { grid-template-columns: 1fr; }      /* key moves under the donut */
  .table-scroll { overflow-x: auto; }             /* 12-month bar scrolls, never dropped */
}

/* ═══════════════════════════════════════════════════════════════════════════
   App additions — views the design bundle predates (Charts, Personal,
   Settings, account scope). Same tokens, same density, same idioms.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── View switching ────────────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }
.view-nav {
  position: sticky; top: 45px; z-index: 40;
  display: flex; gap: 2px; padding: 6px 20px;
  background: var(--surface);
  border-bottom: var(--hair) solid var(--grid);
  overflow-x: auto; scrollbar-width: none;
}
.view-nav::-webkit-scrollbar { display: none; }
.mb { margin-bottom: var(--gap-panel); }

/* ── Rebalancer table ──────────────────────────────────────────────────── */
.rebal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-row); }
.rebal-table th {
  padding: 6px 8px; color: var(--muted); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase; text-align: left;
  border-bottom: var(--hair) solid var(--baseline);
}
.rebal-table td { padding: 0 8px; height: var(--row-h); border-bottom: var(--hair) solid var(--grid); }
.rebal-table tr:last-child td { border-bottom: none; }
.rebal-footer {
  margin-top: 10px; padding: 8px 12px; background: var(--surface-2);
  border-radius: var(--radius); font-size: var(--fs-meta); color: var(--muted);
}
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── Charts view ───────────────────────────────────────────────────────── */
.chart-controls { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.ctrl-group { display: flex; flex-direction: column; gap: 5px; }
.ctrl-label {
  font-size: var(--fs-label); color: var(--muted); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.chart-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px; }
.legend-chip {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: var(--row-h); padding: 0 10px;
  border: var(--hair) solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--muted);
  cursor: pointer; font-size: var(--fs-row); text-align: left;
}
.legend-chip:hover { background: var(--wash); }
.legend-chip.on { color: var(--ink); border-color: var(--baseline); background: var(--surface-2); }
.legend-dot { width: 8px; height: 8px; border-radius: 1px; flex: none; }
.legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-total { font-size: var(--fs-meta); color: var(--muted); }

/* ── Account scope (joint / personal) ──────────────────────────────────── */
.acct-pill {
  display: inline-flex; align-items: stretch;
  border: var(--hair) solid var(--baseline); border-radius: var(--radius); overflow: hidden;
}
.acct-pill .chip.toggle { border: none; border-radius: 0; }
.acct-pill.off { opacity: 0.6; }
.scope-btn {
  border: none; border-left: var(--hair) solid var(--baseline); cursor: pointer;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; padding: 0 8px; font-family: inherit;
}
.scope-btn.joint { background: var(--accent); color: var(--accent-ink); }
.scope-btn.personal { background: var(--surface-2); color: var(--ink-2); }

/* ── Settings ──────────────────────────────────────────────────────────── */
.settings-rows { display: flex; flex-direction: column; gap: 2px; }
.settings-row { display: flex; align-items: center; gap: 8px; min-height: var(--row-h); }
.s-input {
  font-size: var(--fs-row); padding: 5px 8px; min-height: var(--row-h);
  border: var(--hair) solid var(--baseline); border-radius: var(--radius);
  background: var(--plane); color: var(--ink);
}
.s-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
.s-input.name { flex: 1; min-width: 0; }
.s-input.amount { width: 96px; }
.s-amount { display: flex; align-items: center; gap: 3px; color: var(--muted); }
.s-check { display: flex; align-items: center; gap: 5px; font-size: var(--fs-meta); color: var(--ink-2); white-space: nowrap; }
.settings-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.rule-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: var(--row-h); padding: 4px 0; border-bottom: var(--hair) solid var(--grid);
}
.rule-row:last-child { border-bottom: none; }
.rule-from { color: var(--muted); }
.rule-date { font-size: var(--fs-meta); color: var(--muted); margin-left: 8px; }
#settings-files { font-size: var(--fs-meta); color: var(--muted); word-break: break-word; }

/* ── Income + offsets ──────────────────────────────────────────────────── */
.income-expect {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--row-h); font-size: var(--fs-row); color: var(--ink-2);
  border-bottom: var(--hair) solid var(--grid);
}
.meter-fill.income { background: var(--good); }
.offset-tag { font-size: var(--fs-meta); color: var(--good-text); }
.bt-bar { flex-basis: 100%; }

/* ── ≤1140px ───────────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
  .chart-controls { gap: 12px; }
}

/* ── ≤820px ────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .view-nav { top: 41px; padding: 6px 12px; }
  .settings-row { flex-wrap: wrap; min-height: var(--row-h-touch); }
  .s-input { min-height: var(--row-h-touch); }
  .s-input.name { flex-basis: 100%; }
  .rule-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0; }
  .legend-chip { min-height: var(--row-h-touch); }
  .seg-btn { min-height: var(--row-h-touch); }
  .scope-btn { min-height: var(--row-h-touch); }
  .acct-pill { width: 100%; }
  .acct-pill .chip.toggle { flex: 1; min-width: 0; }
}

/* Chart key containers (the donut's direct-labelled key) */
.chart-key { display: flex; flex-direction: column; }
.chart-key .chart-key-row:last-child { border-bottom: none; }
.chart-key.row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 16px; margin-top: 10px;
}
.chart-key.row .chart-key-row { grid-template-columns: 8px minmax(0, 1fr) auto; }
@media (max-width: 820px) {
  .chart-row { grid-template-columns: 1fr; }
  .chart-key-row { height: var(--row-h-touch); }
}

/* Grid children default to min-width:auto, so a wide table (the rebalancer)
   pushes its column past the viewport. Let the scroll container do its job. */
.grid-2 > *, .card, .card-body { min-width: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Budget transaction rows carry a category select instead of a date */
.txn-row.budget-txn { grid-template-columns: minmax(0, 1fr) 104px 148px; }
.txn-row.budget-txn .select-wrap { width: 100%; }
.txn-row.budget-txn .cat-select { width: 100%; }
@media (max-width: 820px) {
  .txn-row.budget-txn { grid-template-columns: minmax(0, 1fr) 92px; row-gap: 6px; }
  .txn-row.budget-txn .select-wrap { grid-column: 1 / -1; }
}

/* Account type override control on the connection pill */
.acct-pill .type-wrap { border-left: var(--hair) solid var(--baseline); }
.acct-pill .type-select {
  border: none; border-radius: 0; min-height: 0; height: 100%;
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em;
  max-width: 190px; background: var(--surface-2);
}