/* nodedough — Runway (refero: kraft paper ledger under amber desk lamp).
   Cream canvas, espresso ink, one amber highlight for actions. Money stays
   tabular-sans. Green/terracotta are data only (held vs owed), not chrome. */

:root{
  --ink:#261b07;
  --slate:#61594a;
  --mute:#8f897e;
  --line:#e3dfd5;
  --line-soft:#ebe8e1;
  --field-line:#d5d2cd;
  --paper:#f8f7f5;
  --paper-deep:#f1eee8;
  --surface:#ffffff;
  --gain:#3d6b4f;
  --gain-soft:#e8f0ea;
  --owe:#c45c4a;
  --owe-soft:#f8e6e2;
  --save:#5a5478;
  --save-soft:#efeaf6;
  --dough:#f9a600;
  --dough-soft:#f8da9d;
  --accent:#f9a600;
  --accent-soft:#f8da9d;
  --focus:#e89b01;
  --shadow:0 4px 8px rgba(38,27,7,.06);
  --shadow-cta:inset 0 2px 4px rgba(255,255,255,.56), 0 4px 8px rgba(38,27,7,.06);

  --sans:Inter,"Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;

  /* Money is set in the UI sans, not a monospace face.
     The only thing mono actually bought us was digits of equal width so
     columns line up — and `font-variant-numeric: tabular-nums` gives us that
     from the sans, without the typewriter texture. Monospace faces are drawn
     for reading code at 9-11pt: tight counters, exaggerated serifs on 1 and l,
     a slashed or dotted zero. At the size a balance is displayed that reads as
     ugly and cramped, which is why no consumer finance product sets currency
     in mono. Segoe UI, SF Pro and Roboto all ship well-drawn lining tabular
     figures, so this is strictly better on every platform we target. */
  --num:var(--sans);

  --r:8px;
  --pad:20px;
  --muted:var(--mute);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 100% -8%, rgba(249,166,0,.14), transparent 52%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  /* Equal-width digits everywhere. This is the property that lets a column of
     balances line up on the decimal, and it is the entire reason the old design
     reached for a monospace face. Set once here rather than repeated on every
     amount, so a new number added anywhere is aligned by default. */
  font-variant-numeric:tabular-nums;
}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------------------------------------------------------------- brand */
.brand-lockup{width:min(300px,78%);height:auto;display:block;margin-bottom:2px}
.gate-brand{display:flex;align-items:center;gap:10px}
.gate-brand-mark{display:block;width:36px;height:36px;flex-shrink:0}
.gate-wordmark{
  margin:0;font-size:24px;font-weight:750;letter-spacing:-.05em;color:var(--ink);
}
.gate-wordmark span{
  display:inline-block;vertical-align:middle;margin-left:7px;color:var(--ink);background:var(--dough-soft);
  border-radius:4px;padding:3px 7px;font-size:9px;font-weight:800;letter-spacing:.08em;
}
.brand-head{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-head img{
  display:block;width:26px;height:26px;flex-shrink:0;object-fit:contain;
  /* the mark is wider than tall; keep its optical center on the type midline */
  object-position:center;
}
.brand-head-name{
  font-weight:700;letter-spacing:-.03em;font-size:19px;color:var(--ink);
  line-height:1;
}
.gate-mark{width:min(320px,64%);height:auto}
.gate-tag{
  color:var(--mute);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  margin:26px 0 0;text-align:center;
}

/* ----------------------------------------------------------------- gate */
.gate{
  min-height:100dvh;display:grid;grid-template-columns:1.1fr .9fr;
}
.gate-art{
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px;
}
.gate-svg{width:min(320px,70%);height:auto}
.gs-line{fill:none;stroke:#4a3d28;stroke-width:2}
.gs-node{fill:#1c1406;stroke:#6b5a3a;stroke-width:1.5}
.gs-root{fill:none;stroke:var(--dough);stroke-width:2}
.gs-leaf{fill:#1c1406;stroke:#4a3d28;stroke-width:1.5}
.gs-shared{stroke:var(--dough);stroke-dasharray:3 3}

.gate-panel{
  display:flex;flex-direction:column;justify-content:center;
  gap:16px;padding:48px min(72px,8vw);background:var(--surface);
  max-width:680px;width:100%;margin-left:auto;overflow-y:auto;
}
.gate-motto{margin:0;font-size:clamp(29px,3.1vw,43px);line-height:1.07;letter-spacing:-.022em;font-weight:650}
.gate-motto em{font-style:normal;color:var(--ink);background:linear-gradient(180deg,transparent 62%,var(--dough-soft) 62%)}
.gate-lede{
  color:var(--slate);font-size:15px;line-height:1.55;margin:0;max-width:43ch;
}
.gate-preview{
  border:1px solid var(--line);border-radius:8px;background:var(--paper);
  padding:11px 13px;max-width:520px;
}
.gate-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.gate-preview-head p{
  margin:0;color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;
}
.gate-preview-head span{font-size:11px;color:var(--mute)}
.gate-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.gate-preview-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gate-preview-grid div{
  display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:8px;padding:8px 9px;
}
.gate-preview-grid span{font-size:10px;color:var(--mute)}
.gate-preview-grid strong{font-size:16px;color:var(--gain)}
.gate-preview-line{margin:8px 1px 0;font-size:10.5px;color:var(--slate);white-space:normal}
.gate-trust{margin:-7px 0 0;color:var(--slate);font-size:11.5px;line-height:1.4}
.plan-note{
  margin:0;padding:10px 12px;border:1px solid var(--dough);border-radius:8px;
  background:var(--dough-soft);color:var(--ink);font-size:12px;line-height:1.5;max-width:56ch;
}

/* Segmented control — matches .modal-tabs used elsewhere in the app, and gives
   the two modes equal weight instead of a bare underline. */
.tabs{
  display:flex;gap:3px;padding:3px;margin-top:4px;
  background:var(--paper);border-radius:8px;border:1px solid var(--line);
}
.tab{
  appearance:none;background:none;border:0;border-radius:7px;
  flex:1;text-align:center;padding:9px 12px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--slate);cursor:pointer;
}
.tab:hover{color:var(--ink)}
.tab.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tab:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* #authPanel was a plain block, so every control inside it sat flush against
   its neighbour — the passkey and Google buttons read as one grey slab. Giving
   the panel its own rhythm is what fixes the whole screen. */
#authPanel{display:flex;flex-direction:column;gap:14px}
.auth-social{display:flex;flex-direction:column;gap:8px}
#passkeySignIn{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink)}
#passkeySignIn:hover{border-color:var(--dough);background:var(--accent-soft)}
.auth-optional{
  display:block;
  padding:12px 14px;border:1px dashed var(--line);border-radius:8px;
  background:var(--paper);
}
.auth-optional summary{
  cursor:pointer;color:var(--slate);font-size:12px;font-weight:650;line-height:1.4;
}
.auth-optional summary:hover{color:var(--ink)}
.auth-optional-fields{display:flex;flex-direction:column;gap:12px;padding-top:12px}
.auth-legal{font-size:11.5px;line-height:1.5;color:var(--mute);margin:0}
.auth-legal a{color:var(--slate)}
.auth-title{font-size:19px;letter-spacing:-.02em;margin:0}
.auth-google{width:100%;padding:11px 14px;min-height:46px;border-radius:8px;font-weight:600}
.auth-google:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.auth-divider{
  display:flex;align-items:center;gap:10px;color:var(--mute);
  font-size:11px;letter-spacing:.04em;margin:0;
}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--line-soft)}
.auth-footer{font-size:11.5px;line-height:1.45;color:var(--mute);margin:0;max-width:48ch}
.auth-submit{width:100%;min-height:48px;padding:13px 16px;font-size:15px;margin-top:2px}
.auth-submit:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.field{display:flex;flex-direction:column;gap:5px}
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field label{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--slate)}
.field-hint{font-size:11.5px;line-height:1.35;color:var(--mute);margin:0}
.opt-tag{font-weight:400;color:var(--mute)}
input,select,textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--field-line);border-radius:8px;padding:10px 12px;width:100%;
}
textarea{resize:vertical;min-height:96px}
input:focus,select:focus,textarea:focus{border-color:var(--focus)}

/* --------------------------------------------------------------- buttons */
.btn{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  border-radius:8px;padding:11px 16px;border:1px solid transparent;
  min-height:44px;
}
.btn-primary{background:var(--dough);color:var(--ink);box-shadow:var(--shadow-cta)}
.btn-primary:hover{background:var(--focus)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--ink);box-shadow:var(--shadow)}
.btn-ghost:hover{color:var(--ink);border-color:var(--slate);background:var(--surface)}
.btn:disabled{cursor:not-allowed;opacity:.55}
.btn-google{
  background:var(--surface);color:var(--ink);border-color:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.btn-google:hover{border-color:var(--slate);background:var(--paper)}
.btn-google .google-mark{flex-shrink:0;display:block}
.btn-quiet{
  background:none;color:var(--slate);border:1px dashed var(--line);
  width:100%;padding:9px;font-weight:500;
}
.btn-quiet:hover{color:var(--ink);border-color:var(--slate)}

.msg{font-size:13px;color:var(--slate);margin:6px 0 0;min-height:18px}
.msg.err{color:var(--owe)}
.msg.ok{color:var(--gain)}
.auth-help{
  margin:0;padding:4px 0;min-height:auto;font-size:12.5px;white-space:nowrap;
}
/* ---------------------------------------------------------------- topbar */
.topbar{
  display:flex;align-items:center;gap:24px;
  padding:11px 24px;background:rgba(248,247,245,.94);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.btn-label-short{display:none}
.inst{font-size:12px;color:var(--slate);margin-right:4px;max-width:18ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tree-section{position:absolute;left:0}
.tree-section-label{
  position:absolute;left:0;top:0;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:0 2px
}
.treeswitch{display:flex;background:var(--paper);border-radius:8px;padding:3px;gap:2px}
.tsw{
  appearance:none;border:0;background:none;font:inherit;font-size:13px;font-weight:600;
  color:var(--slate);padding:7px 16px;border-radius:7px;cursor:pointer;
}
.tsw.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- totals */
.totals{
  display:flex;gap:0;flex-wrap:wrap;
  padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line);
}
.total{
  display:flex;flex-direction:column;gap:3px;min-width:132px;
  padding:15px 22px 15px 0;margin-right:22px;border-right:1px solid var(--line-soft);
}
.total:last-child{border-right:0}
.total-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
/* Same negative-tracking problem as .node-bal, and this bar sits on the node
   screen too. Tracking to 0; the size already carries the emphasis. */
.total-value{font-family:var(--num);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.total-value.gain{color:var(--gain)}
.total-value.owe{color:var(--owe)}
.total-value.save{color:var(--save)}
.rate-hint{
  margin:0;padding:8px 20px 10px;font-size:12px;line-height:1.4;color:var(--slate);
  background:var(--surface);border-bottom:1px solid var(--line);
}

/* --------------------------------------------------------- subscriptions */
.subscription-page{max-width:920px;margin:0 auto;padding:34px 20px 64px}
.subscription-page.settings-plan{max-width:none;margin:0;padding:0}
.subscription-hero{max-width:620px;margin-bottom:24px}
.subscription-hero h1{font-size:30px;letter-spacing:-.03em;margin:0 0 8px}
.subscription-hero > p:not(.eyebrow):not(.plan-note){margin:0 0 14px;color:var(--slate);line-height:1.55}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;box-shadow:var(--shadow)}
.plan-card.is-current{border-color:var(--dough)}
.plan-card.is-included .plan-actions{display:none}
.plan-billing-bar{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.plan-billing-bar .msg{margin:0;font-size:12px;line-height:1.5}
.plan-billing-bar .msg.bad{color:var(--owe)}
.plan-kicker{margin:0 0 7px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.plan-card h2{font-size:19px;margin:0}
.plan-price{font-family:var(--num);font-size:29px;font-weight:600;letter-spacing:-.02em;margin:15px 0 2px}
.plan-price small{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;color:var(--slate)}
.plan-trial{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 4px}
.plan-alt{font-size:12px;color:var(--slate);margin:0}
.plan-card ul{padding-left:19px;margin:18px 0;line-height:1.85;font-size:13px;color:var(--slate)}
.plan-card .btn{width:100%}
/* Monthly is the primary action; annual sits under it as a quieter option. */
.plan-actions{display:flex;flex-direction:column;gap:8px}
.plan-actions .btn{width:100%}
.plan-card .msg{margin:10px 0 0;font-size:12px;line-height:1.5}
.plan-card .msg.bad{color:var(--owe)}

/* ------------------------------------------------------------- dashboard
   Same family as Recurring / Debt: ink title, one surface card for the
   number, segmented horizon, name-then-amount rows. */
.dashboard{
  max-width:560px;margin:0 auto;padding:24px 20px 72px;
}
.dashboard-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;
}
.eyebrow{
  margin:0 0 5px;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--slate);
}
.dashboard h1{
  font-size:26px;letter-spacing:-.017em;margin:0;font-weight:650;line-height:1.1;
  color:var(--ink);
}
.dashboard-head .hint{margin:8px 0 0;max-width:54ch;font-size:14px;line-height:1.5;color:var(--mute)}
.balance-focus{display:block;margin:8px 0 0;max-width:280px}
#balanceFocusSelect{
  width:100%;font-size:14px;font-weight:600;padding:8px 10px;min-height:40px;
}
.dashboard-actions{display:flex;gap:8px;flex-shrink:0;align-items:center}
.dashboard-actions .btn{
  border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;
  min-height:36px;letter-spacing:-.01em;
}
.horizon-toggle{display:none}
.horizon-rail{
  display:flex;align-items:stretch;gap:3px;
  margin:18px 0 0;padding:3px;border:1px solid var(--line);
  background:var(--paper);border-radius:8px;
}
.horizon-cell{
  appearance:none;border:0;background:transparent;flex:1;
  color:var(--slate);font:inherit;padding:8px 4px;border-radius:7px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  min-width:0;line-height:1;min-height:34px;
}
.horizon-cell-label{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:inherit;
}
.horizon-cell-amt{display:none}
.horizon-cell.is-short{color:var(--owe)}
.horizon-cell.is-on{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow);
}
.horizon-cell.is-on.is-short{color:var(--owe)}
.horizon-cell:hover{color:var(--ink)}
.horizon-cell.is-on:hover{background:var(--surface)}
.cash-account-picks{display:none}
.spend-chips{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;margin:8px 0 4px;
}
.spend-chips button{
  appearance:none;border:1px solid var(--line);background:var(--paper);color:var(--slate);
  font:inherit;font-size:12.5px;padding:8px 6px;border-radius:8px;cursor:pointer;
  width:100%;text-align:center;
}
.spend-chips button.is-on{background:var(--dough);color:var(--ink);border-color:var(--dough)}
.cash-safety{margin-bottom:0}
.cash-hero{
  background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
  padding:24px 20px 18px;margin:0;
  box-shadow:var(--shadow);
}
.cash-hero.is-short{
  background:linear-gradient(180deg, var(--owe-soft) 0%, var(--surface) 56%);
  border-color:#e8c4bb;
}
.cash-hero .cash-value{
  display:block;font-size:40px;letter-spacing:-.022em;white-space:normal;
  line-height:1.05;margin:6px 0 0;font-weight:650;
}
.cash-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);
}
.cash-horizon-tag{display:none}
.cash-hero-note{display:none}
.cash-footnote{font-size:13px;color:var(--mute);margin:12px 0 0;line-height:1.45}
.cash-bank-line{display:none}
.cash-payday-note{display:none}
.cash-warning{
  font-size:13.5px;line-height:1.45;color:var(--owe);margin:12px 0 0;font-weight:600;
}
.cash-timeline{
  margin-top:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
  padding:16px 18px 10px;
  box-shadow:var(--shadow);
}
.cash-timeline h2{
  display:block;margin:0;
  font-size:13px;font-weight:650;letter-spacing:0;text-transform:none;
  color:var(--mute);
}
.cash-timeline-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:8px;
}
.nd-sheet-wrap{
  overflow:auto;
  max-height:min(70vh, 640px);
  margin:0 -6px;
  min-width:0;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.nd-sheet{
  width:100%;
  max-width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:13px;
}
.nd-sheet th{
  text-align:left;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid var(--line);padding:8px 6px 6px;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.nd-sheet th.num,.nd-sheet td.num{text-align:right}
.nd-sheet td{
  padding:6px 6px;border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.nd-sheet th:nth-child(1),.nd-sheet td:nth-child(1){width:5.2em}
/* Signed cents (−$12,345.67 / $12,345.67). 5.6em was whole-dollar moneyUp
   and clipped −$2,280.90 into unreadability. Item still takes leftover. */
.nd-sheet th:nth-child(3),.nd-sheet td:nth-child(3){width:8.6em}
.nd-sheet th:nth-child(4),.nd-sheet td:nth-child(4){width:8.2em}
.nd-sheet-date{white-space:nowrap;color:var(--slate);overflow:visible}
.nd-sheet-date .nd-sheet-link{
  overflow:visible;text-overflow:clip;max-width:none;
}
.nd-sheet-item{
  /* max-width:0 + fixed layout lets Item take leftover space without
     shoving Amount/Running off the inspector. */
  max-width:0;overflow:hidden;
}
.nd-sheet-item-text{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nd-sheet-link{
  appearance:none;border:0;background:none;font:inherit;color:inherit;
  padding:0;margin:0;cursor:pointer;text-align:left;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nd-sheet-link:hover{text-decoration:underline;color:var(--ink)}
.nd-sheet tr.is-plan .nd-sheet-amt-btn{color:var(--slate);font-weight:500}
.nd-sheet-amt,.nd-sheet-run{
  /* Contain the cell so nowrap figures cannot widen the table and kill
     .proj vertical scroll (overflow-x:hidden + x-overflow locks y). */
  white-space:nowrap;overflow:hidden;
  font-variant-numeric:tabular-nums;
  padding-left:8px;padding-right:6px;
}
.nd-sheet-run{font-weight:600}
.nd-sheet-run.owe{color:var(--owe)}
.nd-sheet-amt-btn{
  appearance:none;border:0;background:transparent;
  font:inherit;font-weight:600;padding:0;cursor:pointer;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:clip;
}
.nd-sheet-amt-btn.gain{color:var(--gain)}
.nd-sheet-amt-btn.owe{color:var(--owe)}
.nd-sheet-amt-btn:disabled{cursor:default}
.nd-sheet-amt-btn:not(:disabled):hover{text-decoration:underline}
.nd-sheet tr.is-past .nd-sheet-item,
.nd-sheet tr.is-past .nd-sheet-date{color:var(--mute)}
.nd-sheet tr.is-today{background:rgba(249,166,0,.08)}
.nd-sheet tr.is-today .nd-sheet-date{font-weight:700;color:var(--ink)}
.nd-sheet tr.is-short{background:var(--owe-soft)}
.nd-sheet tr.is-open .nd-sheet-item{color:var(--mute);font-weight:550}
.nd-sheet-empty{text-align:left;color:var(--mute);padding:12px 8px}
.proj .nd-sheet-wrap{max-height:none;margin:0;overflow:visible;min-height:0}
.cash-timeline-note{display:none}
.zen-section-label{display:none}
.zen-timeline{display:flex;flex-direction:column;gap:0}
.cash-timeline .zen-day,
.up-list .zen-day{
  display:flex;flex-direction:column;gap:0;
  padding:12px 0 10px;
  border-bottom:1px solid var(--line-soft);
}
.cash-timeline .zen-day:last-child,
.up-list .zen-day:last-child{border-bottom:0;padding-bottom:4px}
.zen-day{display:flex;flex-direction:column;gap:0}
.zen-day-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mute);padding:0 0 4px;
}
.zen-day-bal{
  font-family:var(--num);font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--slate);font-variant-numeric:tabular-nums;
}
.zen-day-bal.gain{color:var(--gain)}
.zen-day-bal.owe{color:var(--owe)}
.zen-line{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:5px 0;min-height:32px;
}
.zen-line-agg{
  margin:0;padding:8px 0;border-radius:0;background:transparent;
  border-top:0;border-bottom:0;
}
.zen-amt{
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  font-family:var(--num);font-size:15px;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;cursor:pointer;text-align:right;color:inherit;
  justify-self:end;
}
.zen-amt:disabled{cursor:default;opacity:1}
.zen-amt:not(:disabled):hover{opacity:.75}
.zen-name{
  font-size:14.5px;font-weight:500;line-height:1.35;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.zen-when{font-size:12px;color:var(--mute);white-space:nowrap;justify-self:end}
.cash-timeline .budget-item-pay{
  font-size:12px;padding:4px 0;border-radius:0;font-weight:650;
  border:0;background:transparent;color:var(--slate);min-height:0;
}
.cash-timeline .budget-item-pay:hover{
  background:transparent;color:var(--ink);border:0;
}
.dashboard-setup{
  margin-top:32px;padding-top:22px;border-top:1px solid var(--line-soft);
}
.dashboard-setup-title{
  margin:0 0 12px;font-size:13px;font-weight:550;color:var(--mute);letter-spacing:0;
}
.dashboard-grid{display:none}
.dashboard-card{display:none}
.cash-safety-grid{display:grid;grid-template-columns:1.15fr repeat(3,1fr);gap:12px}
.cash-card{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:17px;
}
.cash-card:first-child{
  background:linear-gradient(160deg, var(--dough-soft), var(--paper));
  border-color:#e5c66d;
}
.cash-card .cash-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);margin-bottom:6px;
}
.cash-card:first-child .cash-label{color:var(--slate)}
.cash-value{
  display:block;font-family:var(--num);font-size:21px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cash-account{color:var(--ink)}
.cash-card .cash-warning,
.cash-warning strong{margin-right:4px}
.cash-day{
  display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--line-soft);font-size:13px;
}
.cash-day-date{font-weight:600}
.cash-day-movement{display:flex;gap:8px;font-family:var(--num);font-size:12px;color:var(--mute)}
.cash-day-balance{font-family:var(--num);font-size:13px;font-variant-numeric:tabular-nums}
.cash-day-events{
  grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:5px 10px;padding-bottom:2px;
  color:var(--slate);font-size:11.5px;
}
.cash-day-events span{white-space:nowrap}
.cash-onboarding{
  display:flex;align-items:center;gap:14px;padding:17px;border:1px dashed var(--line);
  border-radius:8px;background:var(--surface);font-size:15px;font-weight:650;
  margin-top:16px;
}
.cash-onboarding p{margin:2px auto 0 0;font-size:12.5px;font-weight:400;color:var(--slate)}
.cash-onboarding .btn{margin-left:auto;white-space:nowrap}
.budget-snapshot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.snapshot-card{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:17px;
}
.snapshot-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);margin-bottom:6px;
}
.snapshot-value{font-family:var(--num);font-size:21px;font-weight:600;letter-spacing:-.01em}
.dashboard-grid{display:none}
.dashboard-card{display:none;padding:12px 0;border:0;background:transparent;border-radius:0}
.dashboard-card .card-title-row{margin-bottom:8px}
.card-title-row{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.card-title-row h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0;font-weight:700}
.card-title-row .linkbtn{margin-left:auto}
.budget-item{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  padding:10px 2px;border-bottom:1px solid var(--line-soft);
}
.budget-item.has-pay{grid-template-columns:1fr auto auto auto}
.budget-item:last-child{border-bottom:0}
.budget-item-agg{background:var(--paper);margin:0 -6px;padding:10px 8px;border-radius:8px;border-bottom:0}
.budget-item-name{font-size:13.5px;font-weight:600}
.budget-item-date{font-size:12px;color:var(--mute)}
.budget-item-amount{font-family:var(--num);font-size:13px;font-variant-numeric:tabular-nums}
.budget-item-pay{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:8px;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;
}
.budget-item-pay:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.sched{max-height:360px;margin-top:8px}
.up-item-agg{background:var(--paper);border-radius:8px;padding:6px 8px}
.dashboard-next{font-size:13px;line-height:1.55;color:var(--slate)}
.dashboard-next p{margin:0}
.setup-guide{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.setup-step{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:13px}
.setup-step.is-done{color:var(--slate)}
.setup-check{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;height:20px;
  border:1px solid var(--line);border-radius:50%;font-size:11px;font-weight:700;color:var(--slate);
}
.setup-step.is-done .setup-check{color:var(--gain);border-color:var(--gain-soft);background:var(--gain-soft)}
.dashboard-next .btn{margin-top:2px;width:100%}
.setup-complete{padding:10px 11px;border-radius:8px;background:var(--gain-soft);color:var(--gain)}

/* ------------------------------------------------------------- workspace */
.workspace{display:flex;min-height:calc(100dvh - 118px)}
.canvas-wrap{flex:1;position:relative;overflow:auto}
.canvas{
  position:relative;min-width:100%;min-height:100%;
  background-image:radial-gradient(var(--line-soft) 1px,transparent 1px);
  background-size:22px 22px;
}
.wires{position:absolute;left:0;top:0;pointer-events:none}
.wire{fill:none;stroke:var(--line);stroke-width:1.5}
.wire-chip{fill:var(--surface);stroke:var(--line);stroke-width:1}
.wire-pct{
  font-family:var(--num);font-size:10px;fill:var(--slate);
  font-weight:600;letter-spacing:-.02em;
}
.canvas-msg{
  position:absolute;inset:0;display:grid;place-content:center;
  color:var(--mute);font-size:14px;pointer-events:none;
}

/* rows of nodes, connectors drawn as borders on the stem elements */




.node{
  position:absolute;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;cursor:pointer;text-align:left;font:inherit;
  display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden;
  box-shadow:0 1px 2px rgba(38,27,7,.04);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.node.has-plus{
  flex-direction:row;align-items:center;gap:4px;overflow:visible;
}
.node-body{
  min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.node-plus{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:16px;font-weight:700;line-height:1;padding:0;
  cursor:pointer;display:grid;place-items:center;z-index:3;
}
.node-plus:hover{border-color:var(--accent);background:var(--dough-soft);}
.node-plus:focus-visible{outline:2px solid var(--focus);outline-offset:1px;}
.node.compact .node-plus{width:20px;height:20px;font-size:15px;}
.node.has-plus .node-risk-flag{left:4px;right:auto;}
/* phone-sized cards: less padding, tighter type */
.node.compact{padding:5px 7px;border-radius:8px;gap:1px}
.node.compact .node-name{font-size:11px}
.node.compact .node-bal{font-size:13px}
.node:hover{border-color:var(--slate);box-shadow:0 2px 8px rgba(38,27,7,.07)}
.node.is-sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(249,166,0,.28)}
.node.is-debt{border-style:dashed}
.node.is-risk{border-color:#c04545;box-shadow:0 0 0 2px rgba(192,69,69,.16)}
.node.is-risk.is-sel{border-color:#c04545;box-shadow:0 0 0 2px rgba(192,69,69,.22)}
.node-risk-flag{
  position:absolute;top:4px;right:5px;width:16px;height:16px;border-radius:50%;
  background:#c04545;color:#fff;font-size:11px;font-weight:800;line-height:16px;
  text-align:center;letter-spacing:0;cursor:help;z-index:2;
}
.node.compact .node-risk-flag{top:3px;right:4px;width:14px;height:14px;font-size:10px;line-height:14px}
.node.root{border-color:var(--dough);border-width:2px}

.tree-username{
  font-size:12px;font-weight:600;color:var(--slate);
  padding:2px 4px 6px;letter-spacing:.01em;
}
.node-viewers{
  position:absolute;z-index:1;pointer-events:none;
  font-size:10px;line-height:1.2;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;text-align:right;
}

.node-name{
  font-size:12px;font-weight:600;margin:0;line-height:1.2;
  letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--slate);
}
/* Balance is the number that matters — keep it dense and tabular. */
.node-bal{
  font-family:var(--num);font-size:15px;font-weight:600;
  letter-spacing:-.01em;margin:0;white-space:nowrap;line-height:1.15;
}
.node-bal.gain{color:var(--gain)}
.node-bal.owe{color:var(--owe)}
.node-flow{
  display:flex;gap:12px;margin-top:3px;font-family:var(--num);font-size:11px;
  color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.node-flow .in{color:var(--gain)}
.node-flow .out{color:var(--owe)}
/* stacked bar showing income vs expense weight inside a branch */
.bar{display:flex;height:4px;border-radius:3px;overflow:hidden;margin-top:8px;background:var(--line-soft)}
.bar i{display:block;height:100%}
.bar .bi{background:var(--gain)}
.bar .bo{background:var(--owe)}

/* ------------------------------------------------------------- inspector */
.inspector{
  width:400px;flex-shrink:0;background:var(--surface);
  border-left:1px solid var(--line);padding:12px 14px;overflow-y:auto;
  min-width:0;
}
.insp-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.insp-kind{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--slate);margin:0 0 2px}
.insp-name{font-size:20px;margin:0;letter-spacing:-.025em;font-weight:650}
.insp-head .btn{margin-left:auto}
.insp-head .inspector-edit{margin-left:auto}
.insp-head .inspector-share{margin-left:0}
.insp-head .inspector-edit[hidden] + .inspector-share{margin-left:auto}
.insp-close{
  appearance:none;border:0;background:none;color:var(--slate);cursor:pointer;
  font:inherit;font-size:30px;line-height:1;padding:0 2px 3px;
}
.insp-close:hover{color:var(--ink)}

.insp-figures{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-bottom:10px}
.fig{background:transparent;border-radius:0;padding:3px 0;border-bottom:1px solid var(--line-soft)}
.fig-label{font-size:11px;font-weight:550;letter-spacing:0;text-transform:none;color:var(--slate)}
/* Inspector figures — opened from a node, so held to the same standard. */
.fig-value{font-family:var(--num);font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;margin-top:0;letter-spacing:-.02em}
.fig-value.gain{color:var(--gain)}
.fig-value.owe{color:var(--owe)}
.fig.is-clickable{cursor:pointer;min-height:36px}
.fig.is-clickable:hover{background:var(--paper)}
.fig.is-on{border-bottom-color:var(--ink)}
.fig.is-on .fig-label{color:var(--ink)}
.insp-ledger .zen-day{
  padding:10px 0 8px;
  border-bottom:1px solid var(--line-soft);
}
.insp-ledger .zen-day:last-child{border-bottom:0}
.insp-ledger .zen-day.is-short{
  background:var(--owe-soft);
  margin:0 -8px;
  padding-left:8px;padding-right:8px;
  border-radius:8px;
}
.insp-ledger .zen-line{
  grid-template-columns:minmax(0,1fr) auto auto;
}
.insp-ledger .zen-line.is-short .zen-name{font-weight:650}
.zen-run{
  font-family:var(--num);font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;min-width:4.5em;
  color:var(--slate);
}
.zen-run.owe{color:var(--owe)}
.insp-item-filter{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
#itemSectionNote{margin:0 0 4px;font-size:12px}
.item-group-label{
  font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mute);margin:10px 0 2px;
}
.item-group-label:first-child{margin-top:0}
.item-name-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.item-name-wrap .item-name{flex:none;max-width:100%}
.item-row-acct{font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-row-dates{font-size:11px;color:var(--mute);white-space:normal;line-height:1.25}

.insp-section{margin-bottom:12px}
.balance-adj-line{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:10px 0 8px;font-size:13px;color:var(--slate);
}
.balance-adj-line .item-amt{font-weight:600}
.balance-adj-line .item-amt.owe{color:var(--owe)}
.insp-section h3{
  font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--slate);margin:0 0 4px;
}
.item-list,.child-list{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.insp-add-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.insp-add-row .btn{flex:1;min-width:0}
.item,.childrow{
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  border:1px solid var(--line-soft);border-radius:8px;background:var(--surface);
}
.item-name,.childrow-name{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-amt{font-family:var(--num);font-size:13px;font-variant-numeric:tabular-nums}
.item-amt.gain{color:var(--gain)}
.item-amt.owe{color:var(--owe)}
.item-freq{font-size:11px;color:var(--mute)}
.xbtn{
  appearance:none;border:0;background:none;color:var(--mute);cursor:pointer;
  font-size:16px;line-height:1;padding:4px;min-width:32px;min-height:32px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
}
.xbtn:hover{color:var(--owe);background:var(--owe-soft)}
.empty{font-size:13px;color:var(--mute);padding:2px 0 8px}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;background:rgba(38,27,7,.38);display:grid;place-items:center;padding:20px;z-index:50}
.modal.is-behind-sheet{pointer-events:none}
.modal-card{
  background:var(--surface);border-radius:8px;padding:24px;
  width:min(430px,100%);max-height:88dvh;overflow-y:auto;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.modal-card.is-in{
  background:linear-gradient(180deg, var(--dough-soft) 0%, var(--surface) 42%);
  box-shadow:inset 0 3px 0 var(--dough);
}
.modal-card.is-out{
  background:linear-gradient(180deg, var(--owe-soft) 0%, var(--surface) 42%);
  box-shadow:inset 0 3px 0 var(--owe);
}
.modal-card.is-sheet{width:min(560px,100%)}
.modal-card h2{margin:0 0 16px;font-size:19px;letter-spacing:-.02em}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.modal .field{margin-bottom:12px}
.modal-tabs{
  display:flex;gap:4px;margin:0 0 16px;padding:3px;
  background:var(--paper);border-radius:8px;
}
.modal-tab{
  appearance:none;border:0;border-radius:7px;background:none;color:var(--slate);
  font:inherit;font-size:13px;font-weight:650;padding:8px 12px;cursor:pointer;
  flex:1;text-align:center;
}
.modal-tab.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.modal-tab-panel{min-height:40px}

/* Shared tap entry — digit pad + calendar + text chips (no keyboard required). */
.field-input-row{display:flex;align-items:stretch;gap:8px}
.field-input-row > input{flex:1 1 auto;min-width:0}
/* Money / rate fields need room for dollars on a phone — never a 1-digit box. */
.field-input-row > input[data-tap-kind="money"],
.field-input-row > input[data-tap-kind="percent"]{
  flex:1 1 auto;min-width:7.5rem;font-size:17px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.tap-open{
  flex:0 0 auto;align-self:stretch;min-width:52px;padding:0 12px;
  border:1px solid var(--field-line);border-radius:8px;background:var(--paper);
  color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
.tap-open:hover{border-color:var(--slate);background:var(--surface)}
.tap-chips{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;margin-top:8px;
}
.tap-chip{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:12px;font-weight:600;padding:8px 8px;border-radius:8px;cursor:pointer;
  min-height:36px;width:100%;text-align:center;
}
.tap-chip:hover{border-color:var(--slate);background:var(--paper)}
.tap-chip.is-on{border-color:var(--dough);background:var(--dough-soft);color:var(--ink)}
.tap-chip.is-custom{border-style:dashed;color:var(--slate);font-weight:500;grid-column:1/-1}

.tap-sheet{
  position:fixed;inset:0;background:rgba(38,27,7,.42);display:grid;place-items:end center;
  padding:12px;z-index:70;
}
.tap-sheet-card{
  width:min(440px,100%);background:var(--surface);border-radius:12px 12px 8px 8px;
  padding:18px 16px 16px;box-shadow:0 -8px 40px rgba(38,27,7,.22);
  max-height:min(92vh,640px);overflow:auto;
}
.tap-sheet-card:focus{outline:none}
.tap-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.tap-sheet-head h2{margin:0;font-size:17px;letter-spacing:-.02em}
.tap-sheet-display{
  font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:34px;font-weight:650;letter-spacing:-.03em;text-align:right;
  padding:10px 4px 4px;color:var(--ink);line-height:1.1;
}
.tap-sheet-hint{margin:0 0 10px;font-size:12px;color:var(--mute);text-align:right}
.tap-sheet-quick{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;
}
.tap-quick{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:12px;font-weight:650;padding:8px 10px;border-radius:8px;cursor:pointer;
  min-height:36px;
}
.tap-quick:hover{border-color:var(--slate);background:var(--paper)}
.tap-sheet-keys{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.tap-key{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:18px;font-weight:650;padding:14px 8px;border-radius:8px;cursor:pointer;
  min-height:52px;
}
.tap-key:hover{border-color:var(--slate);background:var(--surface)}
.tap-key.is-wide{grid-column:span 2}
.tap-key.is-accent{background:var(--dough-soft);border-color:#e0c784;color:#5a4208}
.tap-key.is-spacer{border:0;background:transparent;min-height:52px;pointer-events:none}
.tap-sheet-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

@media (max-width:560px){
  .tap-key{font-size:17px;padding:13px 6px}
  .tap-sheet-display{font-size:30px}
}

/* Date calendar sheet — tap a day, no typing. */
.date-sheet-card{width:min(380px,100%)}
.date-sheet-nav{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:4px 0 10px;
}
.date-sheet-month{
  flex:1;text-align:center;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.date-nav-btn{
  min-width:44px;min-height:44px;padding:0;font-size:22px;line-height:1;font-weight:600;
}
.date-sheet-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mute);
}
.date-sheet-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.date-day{
  appearance:none;border:1px solid transparent;background:var(--paper);color:var(--ink);
  font:inherit;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  min-height:44px;border-radius:10px;cursor:pointer;padding:0;
}
.date-day:hover{border-color:var(--slate);background:var(--surface)}
.date-day.is-other{color:var(--mute);background:transparent;font-weight:500}
.date-day.is-today{border-color:var(--accent);color:var(--accent)}
.date-day.is-selected{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.date-day.is-selected.is-today{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Phone: never squeeze Balance / How much beside a date or frequency. */
@media (max-width:560px){
  .modal .row2{grid-template-columns:1fr;gap:0}
  .modal .field-input-row > input[data-tap-kind="money"],
  .modal .field-input-row > input[data-tap-kind="percent"]{
    min-width:0;font-size:18px;
  }
}
.hint{font-size:12px;color:var(--mute);margin:-4px 0 12px;line-height:1.45}
.share-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.share-list-title{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);margin-bottom:2px;
}
.share-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--ink);min-height:32px;
}
.share-row.is-owner{color:var(--slate)}
.share-row .btn{padding:4px 10px;font-size:12px;flex:0 0 auto}

/* --------------------------------------------------------------- mobile */
@media (max-width:1280px){
  .topbar{gap:12px;padding:11px 14px}
  .inst{display:none}
  .vsw{padding:7px 10px;font-size:13px}
  .tsw{padding:7px 11px}
  .topbar-right{gap:6px}
  .topbar-right .btn{padding:8px 10px;font-size:13px}
  .topbar-right .btn-label-full{display:none}
  .topbar-right .btn-label-short{display:inline}
}

@media (max-width:900px){
  .gate{grid-template-columns:1fr}
  .gate-art{display:none}
  .workspace{flex-direction:column}
  .inspector{width:auto;border-left:0;border-top:1px solid var(--line)}
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;
    align-items:center;
  }
  .brand-head{grid-column:1;min-width:0;max-width:100%}
  .brand-head-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Actions get their own row so they never sit on top of the wordmark. */
  .topbar-right{
    grid-column:1 / -1;
    grid-row:auto;
    width:100%;
    margin-left:0;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }
  .topbar-right .btn{padding:8px 12px;font-size:13px}
  .viewswitch,.treeswitch{
    grid-column:1 / -1;width:100%;max-width:100%;overflow-x:auto;
    justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  .vsw,.tsw{flex:0 0 auto}
  /* Width comes from JS measure() — a CSS min-width here used to force 150px
     cards over 124px layout slots, so phone tiles overlapped and clipped. */
  .node{min-width:0;max-width:100%}
  .budget-snapshot{grid-template-columns:repeat(2,1fr)}
  .cash-safety-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .plan-grid-3{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* --------------------------------------------------------------- settings */
.iconbtn{
  appearance:none;background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--slate);cursor:pointer;padding:7px 8px;display:inline-flex;
  align-items:center;justify-content:center;
}
.iconbtn:hover{color:var(--ink);border-color:var(--slate)}

.settings{max-width:620px;margin:0 auto;padding:30px 20px 60px}
.settings-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.settings-head h1{font-size:25px;margin:0;letter-spacing:-.02em}
.settings-head .btn{margin-left:auto}
.settings-nav{
  display:flex;gap:4px;overflow-x:auto;margin:0 0 18px;padding:3px;
  background:var(--paper);border-radius:8px;-webkit-overflow-scrolling:touch;
}
.settings-tab{
  appearance:none;border:0;border-radius:7px;background:none;color:var(--slate);
  font:inherit;font-size:12.5px;font-weight:650;padding:8px 12px;cursor:pointer;white-space:nowrap;
}
.settings-tab.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.settings-hidden{display:none !important}
.settings-activity-link{margin:2px 0 24px;color:var(--mute);text-decoration:none}
.settings-activity-link:hover{color:var(--slate);text-decoration:underline}
.settings-links{display:flex;gap:16px;margin:2px 0 24px}
.referral-link-row{display:flex;gap:8px;align-items:center}
.referral-link{
  flex:1;min-width:0;padding:10px 11px;border-radius:8px;background:var(--paper);
  font-family:var(--num);font-size:11px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.activity-page{max-width:620px;margin:0 auto;padding:30px 20px 60px}
.activity-list{display:flex;flex-direction:column;border-top:1px solid var(--line-soft);margin-top:18px}
.activity-row{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:13px 2px;border-bottom:1px solid var(--line-soft)}
.activity-summary{font-size:13.5px;color:var(--ink)}
.activity-meta{font-size:11.5px;color:var(--mute)}
.activity-date{font-family:var(--num);font-size:11.5px;color:var(--mute);white-space:nowrap}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:22px;margin-bottom:18px;
}
.card h2{font-size:16px;margin:0 0 14px;letter-spacing:-.01em}
.card .btn-primary{margin-top:4px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0}
.kv dt{font-size:12px;font-weight:600;color:var(--slate);letter-spacing:.02em}
.kv dd{margin:0;font-size:14px;font-family:var(--num)}
#setUserId{font-size:11px;word-break:break-all;color:var(--slate)}
.household-switch{margin-top:16px}

.pw-weak{color:var(--owe)}
.pw-ok{color:var(--gain)}

/* ------------------------------------------------------- add-node buttons */
/* Same footprint as a real node so a row of them stays visually even. */






/* ------------------------------------------------------------------- mfa */
.mfa-qr{
  width:168px;height:168px;display:block;margin:12px 0;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
.secret{
  font-family:var(--num);font-size:12px;background:var(--paper);
  padding:2px 6px;border-radius:5px;user-select:all;
}

/* -------------------------------------------------------------- projection */
.h3-note{font-weight:500;color:var(--mute);text-transform:none;letter-spacing:0}
.proj{
  display:block;margin-bottom:4px;
  max-height:min(70vh, 560px);overflow:auto;
  scroll-behavior:smooth;min-width:0;min-height:0;max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.prow{
  display:grid;grid-template-columns:1fr .9fr .9fr 1.05fr;gap:6px;
  padding:3px 2px;border-bottom:1px solid var(--line-soft);
  font-family:var(--num);font-size:12px;font-variant-numeric:tabular-nums;
  text-align:right;
}
.prow span:first-child{text-align:left}
.phead{
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);border-bottom-color:var(--line);
}
.pmonth{color:var(--slate)}
.prun{font-weight:600}
.prow.is-today{background:rgba(249,166,0,.08)}
.prow.is-today .pmonth{font-weight:600;color:var(--ink)}
.pamt{
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;text-align:right;
  min-height:26px;
}
.pamt:hover{text-decoration:underline}
.pamt:disabled{cursor:default;text-decoration:none;opacity:1}

/* ------------------------------------------------------------ delete choice */
.choices{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.choice{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);cursor:pointer;font:inherit;text-align:left;
}
.choice:hover{border-color:var(--slate)}
.choice.is-on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(38,27,7,.08)}
.choice-title{font-size:14px;font-weight:600;color:var(--ink)}
.choice-sub{font-size:12px;color:var(--mute)}

/* -------------------------------------------------------------- tree cards */
.k-root{border-color:var(--dough);border-width:2px}
.k-flow{background:var(--paper);border-style:dashed}
.f-income  .node-bal{color:var(--gain)}
.f-expense .node-bal{color:var(--owe)}
.f-savings .node-bal{color:var(--save)}

/* Edge add affordances — large enough to tap on phones. */
/* Add actions live in a toolbar above the board, not as floating circles on
   the tile edges. Named buttons, out of the way of the graph. */
.canvas-actions{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  width:100%;padding:10px 0;position:sticky;top:0;z-index:4;
  background:linear-gradient(var(--paper) 70%, transparent);
}
.canvas-add{
  width:auto;padding:8px 14px;min-height:38px;
  font-size:13.5px;font-weight:600;border-style:solid;
}
.canvas-add:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ----------------------------------------------------------------- books */
.cash-card-note{display:block;margin-top:4px;font-size:11px;font-weight:500;color:var(--mute);line-height:1.35}
.tax-cat-details{margin:10px 0 4px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:8px}
.tax-cat-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--slate)}
.tax-cat-details[open] summary{margin-bottom:8px}
.books-title{font-size:24px;margin:0 0 8px;letter-spacing:-.025em}
.books-lead{margin:0 0 18px;line-height:1.5}
.books-cpa-note{margin:-6px 0 16px}
.books-nav{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.books-nav-btn{
  appearance:none;border:1px solid var(--line-soft);background:transparent;
  color:var(--slate);font:inherit;font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:8px;cursor:pointer
}
.books-nav-btn.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.books-controls{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin-bottom:18px
}
.books-field{display:flex;flex-direction:column;gap:5px;min-width:160px}
.books-field label{
  font-size:12px;font-weight:600;color:var(--slate);letter-spacing:.02em
}
.books-field select{max-width:260px}
.books-summary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px
}
.books-stat{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px
}
.books-stat-label{font-size:11px;font-weight:600;color:var(--slate);letter-spacing:.04em;text-transform:uppercase}
.books-stat-value{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:20px;font-weight:650;margin-top:4px}
.books-stat-value.gain{color:var(--gain)}
.books-stat-value.owe{color:var(--owe)}
.books-home-kicker{
  margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute)
}
.books-stmt-grid{display:grid;gap:10px;margin-bottom:16px}
.books-stmt-card{
  appearance:none;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;
  padding:14px 16px;font:inherit;color:inherit
}
.books-stmt-card:hover{border-color:var(--line)}
.books-stmt-name{font-size:15px;font-weight:650;margin:0 0 4px}
.books-stmt-desc{font-size:13px;color:var(--slate);margin:0 0 8px;line-height:1.4}
.books-stmt-amt{font-family:var(--num);font-size:18px;font-weight:650}
.books-stmt-amt.gain{color:var(--gain)}
.books-stmt-amt.owe{color:var(--owe)}
.books-pack-row{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 10px}
.books-pack-card{
  border:1px solid var(--line-soft);border-radius:8px;padding:16px;margin-bottom:12px
}
.books-pack-card h3{margin:0 0 8px;font-size:16px}
.books-pack-card p{margin:0 0 12px;color:var(--slate);line-height:1.5;font-size:13.5px}
.books-panel-title{font-size:18px;margin:10px 0 6px}
.books-back{margin-bottom:4px}
.books-ask-list{display:grid;gap:8px}
.books-ask-item{
  appearance:none;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px
}
.books-ask-q{font-weight:650;margin:0 0 3px}
.books-ask-a{font-size:12.5px;color:var(--slate);margin:0}
.books-subhead{font-size:14px;margin:18px 0 8px}
.books-tax-banner{
  margin:0 0 14px;padding:10px 12px;border-radius:8px;
  background:rgba(180,60,40,.08);border:1px solid rgba(180,60,40,.22);
  color:var(--ink);font-size:13px;line-height:1.45
}
.books-checklist{margin:0 0 16px;padding-left:18px;color:var(--slate);line-height:1.55}
.books-row-emph{font-weight:650;border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.books-section{margin-bottom:18px}
.books-section h2{font-size:15px;margin:0 0 8px}
.books-row{
  display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px
}
.books-row:last-child{border-bottom:0}
.books-row-amt{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.books-row-amt.gain{color:var(--gain)}
.books-row-amt.owe{color:var(--owe)}
.books-row-meta{font-size:11.5px;color:var(--mute);font-weight:400;margin-top:2px}
.books-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.books-cat{
  display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:5px 0 3px;
  border-bottom:1px dashed var(--line);font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.books-empty{color:var(--mute);font-size:13px;margin:0}
.books-locked{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;margin-top:8px
}
.books-locked h2{font-size:18px;margin:0 0 8px}
.books-locked p{margin:0 0 14px;color:var(--slate);line-height:1.5}

@media (max-width:700px){
  .books-summary{grid-template-columns:1fr}
  .books-page{padding:18px 12px 48px}
  .books-title{font-size:20px}
}

/* ------------------------------------------------------------ view switch */
.viewswitch{display:flex;align-self:stretch;gap:4px;min-width:0}
.vsw{
  appearance:none;border:0;border-bottom:2px solid transparent;background:none;font:inherit;
  font-size:13px;font-weight:600;color:var(--slate);padding:8px 10px 7px;cursor:pointer;
}
.vsw:hover{color:var(--ink)}
.vsw.is-on{color:var(--ink);border-bottom-color:var(--dough)}

/* --------------------------------------------------------- recurring page */
.recurring{max-width:1080px;margin:0 auto;padding:24px 20px 60px}
.rec-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.rec-head h1{font-size:26px;margin:0;letter-spacing:-.03em;font-weight:700}
.rec-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#recSummary{
  border:0;border-radius:0;margin-bottom:18px;padding:0 0 14px;
  border-bottom:1px solid var(--line-soft);background:transparent;
}

.filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filter-label{
  font-size:13px;font-weight:550;letter-spacing:0;text-transform:none;
  color:var(--slate);margin-right:4px;
}
.filter-sep{width:14px}
.chip{
  appearance:none;border:0;background:transparent;
  color:var(--slate);font:inherit;font-size:13px;padding:5px 10px;
  border-radius:8px;cursor:pointer;
}
.chip:hover{color:var(--ink);background:var(--paper)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.rtable{border:0;border-radius:0;background:transparent;overflow:visible}
.rrow{
  display:grid;
  grid-template-columns:1.5fr 1.1fr .7fr 1fr .9fr .9fr 32px;
  gap:10px;align-items:center;padding:11px 2px;
  border-bottom:1px solid var(--line-soft);font-size:14px;
}
.rrow:last-child{border-bottom:0}
.rhead{
  font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--slate);background:transparent;padding-top:4px;padding-bottom:8px;
}
.rhead span[data-sort]{cursor:pointer;user-select:none}
.rhead span[data-sort]:hover{color:var(--ink)}
.rname{font-weight:600}
.racct,.rcad{color:var(--slate);font-size:13px}
.ramt,.rmo{
  font-family:var(--num);font-variant-numeric:tabular-nums;text-align:right;font-size:14px;
}
.rmo{font-weight:650}

.tag{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;justify-self:start;white-space:nowrap;
}
.tag-income{background:var(--gain-soft);color:var(--gain)}
.tag-expense,.tag-savings,.tag-charge{background:var(--owe-soft);color:var(--owe)}
.tag-transfer{background:var(--paper);color:var(--slate);border:1px solid var(--line)}
.tag-credit-card{background:var(--dough-soft);color:#6f510a}
.insp-risk{
  grid-column:1 / -1;margin:4px 0 0;padding:8px 10px;border-radius:8px;
  background:#fdecec;color:#8a2b2b;font-size:12.5px;line-height:1.4;
}
.managed-card-row{box-shadow:inset 3px 0 0 var(--dough)}

.card-setup{
  display:flex;align-items:center;gap:16px;padding:14px 16px;margin-bottom:16px;
  border:1px solid #e5c66d;border-radius:8px;background:var(--dough-soft);
}
.card-setup.is-info{
  border-color:#e5c66d;background:var(--paper);
}
.card-setup.is-info h2{color:var(--ink)}
.card-setup h2{font-size:14px;margin:0 0 3px}
.card-setup p{font-size:12px;color:var(--slate);margin:0;line-height:1.45}
.card-setup-list{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto}
.card-setup-action{background:var(--surface)}
.card-formula{
  margin:-5px 0 12px;padding:9px 11px;border-radius:8px;
  background:var(--paper);font-size:12px;color:var(--slate);line-height:1.5;
}

/* ------------------------------------------------------- ownership picker */
.owners{
  display:flex;flex-direction:column;gap:4px;margin:6px 0 10px;
  max-height:210px;overflow-y:auto;
}
.owner{
  display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;
  border:1px solid var(--line-soft);border-radius:8px;
  background:var(--surface);
}
.owner:hover{border-color:var(--line)}
.owner.is-on{
  border-color:var(--ink);background:var(--dough-soft);
}
.owner-name{
  flex:1;appearance:none;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:650;text-align:left;
  padding:8px 10px;border-radius:6px;cursor:pointer;min-height:40px;
}
.owner-name:hover{background:rgba(38,27,7,.04)}
.owner.is-on .owner-name{color:var(--ink)}
.owner-pct{
  width:66px;padding:5px 8px;font-family:var(--num);
  font-variant-numeric:tabular-nums;text-align:right;
}
.owner-pct:disabled{opacity:.4}
.owner-sign{font-size:12px;color:var(--mute)}
.owner-total{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.owner-sum{
  margin-left:auto;font-family:var(--num);font-size:12px;font-variant-numeric:tabular-nums;
}
.owner-sum.ok{color:var(--gain)}
.owner-sum.bad{color:var(--owe)}
.linkbtn{
  appearance:none;border:0;background:none;color:var(--focus);font:inherit;
  font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline;
}

.gain{color:var(--gain)}
.owe{color:var(--owe)}
.save{color:var(--save)}

/* canvas scroll area centres its content when the tree is narrower.
   Column direction matters: the add-action toolbar is a child here, and with
   the default row direction it sat BESIDE the board instead of above it. */
.canvas-wrap{display:flex;flex-direction:column;align-items:center}
.canvas{margin:0 auto}

/* --------------------------------------------------------------- business */
.k-business{border-color:var(--save);border-style:solid}
.k-business .node-kind{color:var(--save)}
#addSection .btn-quiet{margin-bottom:6px}

/* rows that open an editor */
.is-clickable{cursor:pointer}
.item.is-clickable:hover{border-color:var(--slate);background:var(--paper)}
.rrow.is-clickable:hover{background:var(--paper)}

/* ------------------------------------------------------------- checkboxes */
.opt{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;margin:2px 0 12px;
  border:1px solid var(--line-soft);border-radius:9px;cursor:pointer;
}
.opt:hover{border-color:var(--line)}
.opt input{width:auto;margin-top:2px;flex-shrink:0}
.opt-text{display:flex;flex-direction:column;gap:2px}
.opt-label{font-size:13.5px;font-weight:600}
.opt-hint{font-size:12px;color:var(--mute);line-height:1.45}

/* --------------------------------------------------------- phone layout */
@media (max-width:560px){
  .topbar{padding:calc(9px + env(safe-area-inset-top)) 12px 9px;gap:8px}
  .brand-head{gap:7px;align-items:center}
  .brand-head img{width:22px;height:22px}
  .wordmark.sm,.brand-head-name{font-size:16px}
  .btn-label-full{display:none}
  .btn-label-short{display:inline}
  .topbar-right .btn{padding:8px 10px;font-size:12.5px}
  /* figure strip, one line each, no sideways scroll (360px-class phones) */
  .totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0 10px;overflow-x:hidden}
  .total{min-width:0;margin-right:0;padding:9px 8px 9px 0;border-right:1px solid var(--line-soft)}
  .total+.total{padding-left:8px}
  .total:last-child{border-right:0;padding-right:0}
  .total-label{font-size:10px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .total-value{font-size:clamp(11.5px,3.6vw,15px);white-space:nowrap}
  .viewswitch,.treeswitch{padding:2px;scroll-snap-type:x proximity}
  .vsw,.tsw{min-height:44px;padding:10px 12px;font-size:12px;scroll-snap-align:start}
  .inst{display:none}

  .workspace{min-height:auto}
  .canvas-wrap{min-height:52vh;padding:0 2px}
  .canvas{background-size:16px 16px}
  .inspector{padding:14px;max-height:none}
  .insp-name{font-size:18px}
  .insp-figures{gap:4px}
  .fig{padding:3px 4px}
  .fig-value{font-size:15px}

  .node-plus{width:22px;height:22px;font-size:16px}
  .plus{width:40px;height:40px;font-size:22px}
  .wire-pct{font-size:9px}
  .cash-card:first-child{background:linear-gradient(160deg, var(--dough-soft), var(--paper))}

  /* the recurring table stops pretending to be a table */
  .rrow{grid-template-columns:1fr auto auto;gap:4px 8px;padding:9px 11px}
  .rhead{display:none}
  .rname{grid-column:1 / -1;font-size:13.5px}
  .racct{grid-column:1;font-size:11.5px}
  .rcad{grid-column:1;font-size:11.5px}
  .ramt{display:none}
  .rmo{grid-column:2;font-size:13px}
  .recurring{padding:16px 12px 48px}
  .rec-head h1{font-size:20px}
  .settings{padding:18px 12px 48px}
  .card{padding:16px}
  .dashboard{padding:20px 16px 64px}
  .dashboard-head{align-items:center;flex-direction:row;margin-bottom:16px;gap:10px}
  .dashboard h1{font-size:22px}
  .dashboard-actions{width:auto}
  .dashboard-actions .btn{flex:0 0 auto}
  .cash-hero{padding:18px 16px 14px;border-radius:8px}
  .cash-hero .cash-value{font-size:34px;margin:6px 0 0}
  .horizon-rail{margin:16px 0 0}
  .horizon-cell{padding:7px 2px;min-height:32px}
  .horizon-cell-label{font-size:11.5px}
  .cash-timeline{margin-top:14px;padding:14px 16px 8px;border-radius:8px}
  .cash-timeline .zen-day,
  .up-list .zen-day{padding:10px 0 8px}
  .zen-line{min-height:30px;padding:4px 0}
  .zen-amt{font-size:14.5px}
  .zen-name{font-size:14px}
  .dashboard-actions .linkbtn{align-self:center}
}

/* scaled drawing surface — keeps scroll bounds honest when the tree is zoomed */
.stage{position:absolute;left:0;top:0;transform-origin:0 0}

/* --------------------------------------------------------------- upcoming */
.rec-list-head{
  display:flex;align-items:baseline;gap:12px;margin:6px 0 12px;
}
.rec-list-head h2{
  font-size:15px;margin:0;letter-spacing:0;text-transform:none;
  color:var(--ink);font-weight:650;
}
.rec-list-head .up-net{margin-left:auto}
.up-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.up-head h2{
  font-size:14px;margin:0;letter-spacing:0;text-transform:none;
  color:var(--slate);font-weight:600;
}
.collapse-head{cursor:pointer;user-select:none;border-radius:8px}
.collapse-head:hover h2{color:var(--accent)}
.collapse-head:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.collapse-caret{margin-left:auto;color:var(--mute);font-size:12px;line-height:1}
.up-net{
  margin-left:auto;font-family:var(--num);font-size:13px;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.up-list{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto}
.up-day{display:flex;flex-direction:column;gap:3px}
.up-date{display:flex;align-items:baseline;gap:8px;padding-bottom:3px;border-bottom:1px solid var(--line-soft)}
.up-when{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.up-full{font-size:11px;color:var(--mute)}
.up-item{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding:5px 2px;border-radius:6px;
}
.up-item:hover{background:var(--paper)}
.up-name{font-size:13.5px}
.up-acct{font-size:11.5px;color:var(--mute)}
.up-amt{font-family:var(--num);font-size:13px;font-variant-numeric:tabular-nums;font-weight:600}

.rnext{color:var(--mute)}

/* --------------------------------------------------------------- warnings */
.warn{
  background:var(--owe-soft);color:var(--owe);border-radius:8px;
  padding:9px 11px;font-size:12.5px;font-weight:600;margin:0 0 10px;line-height:1.45;
}
.prow.is-short{background:var(--owe-soft);border-radius:5px}
.prow.is-on{background:var(--paper)}
.btn-quiet.danger{color:var(--owe);border-color:var(--owe-soft)}
.btn-quiet.danger:hover{border-color:var(--owe);background:var(--owe-soft)}
#editSection .btn-quiet{margin-bottom:6px}
#balanceSection .btn-quiet{margin-bottom:6px}
.danger-link{color:var(--owe);margin-top:4px}
.danger-link:hover{color:#7d1831}
.undo-toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;
  background:var(--ink);color:#fff;border-radius:8px;box-shadow:0 8px 28px rgba(38,27,7,.24);
  font-size:13px;
}
.undo-toast .btn{border-color:#59616d;color:#fff;padding:7px 10px}
.undo-toast .btn:hover{border-color:#fff;color:#fff}

/* -------------------------------------------------------------- first run */
.firstrun{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  max-width:300px;text-align:center;pointer-events:none;
  background:rgba(248,247,245,.92);border:1px solid var(--line-soft);
  border-radius:8px;padding:12px 14px;
}
.fr-title{font-size:15px;font-weight:600;margin:0 0 5px}
.fr-body{font-size:13px;color:var(--slate);line-height:1.55;margin:0}
.fr-plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:1px solid var(--line);border-radius:50%;
  font-size:12px;vertical-align:middle;background:var(--surface);
}

@media (max-width:560px){
  .upcoming{padding:12px 13px}
  .up-list{max-height:none}
  .up-acct{display:none}
  .firstrun{max-width:88%;bottom:6%}
}

/* ----------------------------------------------------------------- payoff */
.payoff{display:flex;flex-direction:column;gap:8px}
.payoff-head{
  background:var(--paper);border-radius:9px;padding:12px 13px;
}
.payoff-term{
  font-family:var(--num);font-size:20px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);
}
.payoff-term.owe{color:var(--owe);font-size:17px}
.payoff-sub{font-size:12px;color:var(--slate);margin-top:2px;line-height:1.4}
.payoff-now{font-size:12.5px;color:var(--slate);margin:0;line-height:1.5}
.payoff-whatif{
  font-size:12.5px;line-height:1.55;margin:0;padding:10px 12px;
  background:var(--gain-soft);color:var(--gain);border-radius:8px;
}
.payoff-whatif strong{font-weight:700}
.terms{
  border-top:1px solid var(--line-soft);margin-top:6px;padding-top:12px;
}

/* ------------------------------------------------------------ payoff page */
.payoffpage{max-width:660px;margin:0 auto;padding:26px 20px 60px}
.pp-title{font-size:24px;margin:0 0 18px;letter-spacing:-.025em}

.pp-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.pm{
  position:relative;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:14px 15px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);cursor:pointer;font:inherit;
}
.pm:hover{border-color:var(--slate)}
.pm.is-on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(38,27,7,.08);background:var(--paper)}
.pm-pick{
  display:none;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dough);margin-bottom:2px;
}
.pm.is-on .pm-pick{display:inline-block}
.pm-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pm-desc{font-size:12px;color:var(--slate);line-height:1.4}
.pm-stat{
  font-family:var(--num);font-size:11.5px;color:var(--mute);
  font-variant-numeric:tabular-nums;margin-top:3px;
}
.pm.is-on .pm-stat{color:var(--ink)}

.pp-remaining{display:none}
.pp-remaining label{
  display:block;font-size:12px;font-weight:600;color:var(--slate);margin-bottom:6px;
}
.pp-remaining-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pp-remaining-row select{max-width:230px}
.pp-remaining-row .btn{flex:0 0 auto}
.pp-remaining-amt{
  font-family:var(--num);font-variant-numeric:tabular-nums;font-size:17px;font-weight:650;
}
.pp-remaining-amt.gain{color:var(--gain)}
.pp-remaining-amt.owe{color:var(--owe)}
.pp-remaining .hint{margin:6px 0 0}

.pp-budget{margin:0 0 22px}
.pp-afford{
  margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line-soft);
}
.pp-afford-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0 0 8px;
}
.pp-afford-top select{max-width:min(100%,220px);font-size:13px}
.pp-afford-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.pp-afford-row .pp-budget-amt{font-size:22px}
.pp-afford-row .btn{flex:0 0 auto}
.pp-budget-stat{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.pp-budget-label{font-size:14px;font-weight:550;color:var(--slate)}
.pp-budget-amt{
  font-family:var(--num);font-size:18px;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.pp-budget-amt.gain{color:var(--gain)}
.pp-budget-amt.owe{color:var(--owe)}
.pp-dedicated{margin:0 0 8px}
.pp-dedicated label{
  display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px;
}
.pp-budget-hint{
  margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--slate);
}
.pp-budget-hint strong{color:var(--ink);font-weight:650}
.pp-budget-hint.is-over{color:var(--owe)}
.pp-budget-hint.is-over strong{color:var(--owe)}

.pp-extra{margin-bottom:20px}
.pp-extra label{
  display:block;font-size:12px;font-weight:600;color:var(--slate);margin-bottom:6px;
}
.pp-extra-row{display:flex;align-items:center;gap:14px}
.pp-extra-row input[type=number]{
  width:120px;font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:16px;text-align:right;
}
.pp-extra-row input[type=range]{flex:1;accent-color:var(--ink);width:auto}

.pp-head{
  background:var(--ink);color:#fff;border-radius:8px;padding:20px 22px;margin-bottom:12px;
}
.pp-label{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#c9b99a;
}
.pp-big{
  font-family:var(--num);font-size:31px;font-weight:600;letter-spacing:-.02em;
  margin:5px 0 4px;line-height:1;
}
.pp-sub{font-size:12.5px;color:#e3dfd5;line-height:1.5}

.pp-advice{
  font-size:13px;line-height:1.6;margin:0 0 18px;padding:12px 14px;
  background:var(--gain-soft);color:var(--gain);border-radius:9px;font-weight:500;
}

.pp-order-intro{margin:18px 0 9px}
.pp-order-intro h2{font-size:16px;margin:0 0 3px}
.pp-order-intro p{font-size:12px;color:var(--slate);margin:0;line-height:1.45}

.pp-order{display:flex;flex-direction:column;gap:6px}
.pd{
  display:flex;align-items:center;gap:14px;padding:13px 15px;
  border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);
}
/* Zen payoff rows: amount · name · when — same rhythm as Balance / Recurring. */
.pd.zen-pay{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;align-items:center;
  padding:10px 12px;
}
.pd.zen-pay .zen-amt{
  cursor:inherit;font-size:16px;font-weight:650;
}
.pd.zen-pay .zen-amt:hover{text-decoration:none}
.pd.zen-pay .zen-name{font-weight:550}
.pd.zen-pay.is-focus .zen-amt.gain{color:var(--gain)}
.pd.is-clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.pd.is-clickable:hover{border-color:var(--line)}
.pd.is-focus{border-color:var(--ink);background:var(--surface);box-shadow:0 1px 3px rgba(38,27,7,.08)}
.pd.is-out{
  opacity:.48;background:var(--paper);border-style:dashed;filter:grayscale(.55);
}
.pd.is-out:hover{opacity:.68;border-color:var(--slate)}
.pd-main{flex:1;min-width:0}
.pd-name{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.pd-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--dough);color:#3a2a05;padding:2px 7px;border-radius:20px;white-space:nowrap;
}
.pd-badge-out{background:transparent;color:var(--mute);border:1px solid var(--line);padding:1px 6px}
.pd-roll{
  color:var(--mute);font-size:9.5px;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap;
}
.pd-meta{
  font-family:var(--num);font-size:11.5px;color:var(--slate);margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.pd-when{text-align:right;flex-shrink:0}
.pd-term{font-family:var(--num);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pd-int{font-size:11px;color:var(--mute);font-family:var(--num);margin-top:2px}
.pd.is-locked{
  border-style:dashed;background:var(--paper);opacity:.92;
}
.pd.is-locked .pd-name{color:var(--slate)}
.pd-badge-lock{background:var(--ink);color:#fff}
.pd-locked{letter-spacing:.18em;color:var(--mute)}
.pp-upgrade{width:100%;margin-top:8px}

@media (max-width:560px){
  .payoffpage{padding:18px 12px 48px}
  .pp-title{font-size:20px}
  .pp-methods{grid-template-columns:1fr;gap:8px}
  .pm{padding:12px 13px}
  .pp-big{font-size:26px}
  .pp-extra-row input[type=number]{width:100px}
  .pd{padding:11px 12px;gap:10px}
  .pd-name{font-size:13.5px}
  .pd-name{align-items:flex-start;flex-direction:column;gap:4px}
  .pd-roll{white-space:normal}
  .card-setup{align-items:flex-start;flex-direction:column}
  .card-setup-list{width:100%;margin-left:0}
  .card-setup-action{width:100%}
}

/* anchors styled as buttons (quick-entry link) */
a.btn{text-decoration:none;display:inline-flex;align-items:center}

/* ---------------------------------------------- mobile inspector drawer */
.inspector-backdrop{
  display:none;position:fixed;inset:0;z-index:39;margin:0;padding:0;
  border:0;background:rgba(38,27,7,.34);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:900px){
  .inspector-backdrop:not([hidden]){display:block}
  .inspector{
    position:fixed;top:0;right:0;bottom:0;z-index:40;
    width:min(92vw,400px);height:100dvh;max-height:none;
    border-top:0;border-left:1px solid var(--line);
    box-shadow:-18px 0 44px rgba(38,27,7,.22);
    display:block !important;visibility:hidden;
    transform:translateX(103%);
    transition:transform .28s ease,visibility 0s linear .28s;
    overflow-y:auto;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .inspector:not([hidden]){
    visibility:visible;transform:translateX(0);
    transition:transform .28s ease;
  }
  .insp-close{font-size:34px;padding:2px 12px;min-height:44px;min-width:44px}
}

/* bank sign-in shortcut above balance history */
.bank-btn{display:flex;width:100%;justify-content:center;margin-bottom:8px;text-decoration:none}