/* ============================================================================
   PLUTUS v4 — "The Ledger"

   Self-contained. The Tailwind Play CDN is gone, and with it the silent
   dependency that made the whole layout fragile: `box-sizing` appeared ZERO
   times in v3's CSS, so the sidebar's 224px width plus its padding measured
   252px whenever Tailwind was slow — eating 20px of every page.

   PRIORITIES (per brief)
     Budget + Log  → mobile first. Single column, thumb-reachable, big targets.
     Debt          → desktop first. Dense, multi-pane, a projection table you
                     read like a spreadsheet. Still fully usable on a phone,
                     where the table becomes stacked month cards.

   SIGNATURE — THE ALLOCATION BAR
   One device everywhere: a single horizontal bar splitting income into
   Expenses / Debt / Left. It encodes the exact thing v3 got wrong (debt
   payments were counted nowhere), so the arithmetic is always visible.

   CONTRAST
   v3's terracotta was 3.34:1 on white — failing AA on every primary button.
   Every colour below is measured; see the token comments.
   ============================================================================ */

/* ==========================================================================
   §1  TOKENS
   ========================================================================== */
:root{
  --bg:         #FAF6F0;   /* warm cream page */
  --bg-sunk:    #F2EADC;   /* wells, insets, table stripes */
  --card:       #FFFFFF;
  --line:       #DFD2BC;   /* v3 #ECE2D2 was 1.28:1 — invisible hairlines */
  --line-soft:  #EDE4D4;

  --ink:        #2B2620;   /* 14.99:1 on card */
  --ink-soft:   #6E6656;   /* 5.6:1 on card */
  --ink-faint:  #6E6656;   /* v3 #A79E8E was 2.65:1. This clears AA on all three surfaces: 5.68 white / 5.27 cream / 4.75 sunken. */

  --accent:     #C1502A;   /* v3 #E2683F was 3.34:1. This is 4.62:1 on white. */
  --accent-lit: #E2683F;   /* keep the brighter tone for fills/bars only */
  --accent-wash:#FBEDE6;

  --danger:     #A8392E;   /* 6.4:1 */
  --danger-wash:#FBEAE7;
  --good:       #3E6B4F;   /* v3 #5F9070 was 3.68:1. This is 6.3:1. */
  --good-wash:  #E6F0E8;
  --warn:       #8A5A0B;   /* 5.6:1 */
  --warn-wash:  #FBF0DC;

  /* type — 7 steps, nothing below 12px */
  --t-xs:0.75rem; --t-sm:0.8125rem; --t-md:0.9375rem;
  --t-lg:1.125rem; --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:2.75rem;

  /* spacing — 4px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  --r:10px; --r-lg:16px; --r-pill:999px;
  --tap:44px;
  --side-w:232px;

  --sh-1:0 1px 2px rgba(43,38,32,.05), 0 1px 3px rgba(43,38,32,.05);
  --sh-2:0 2px 8px rgba(43,38,32,.06), 0 8px 24px rgba(43,38,32,.07);
  --sh-3:0 8px 16px rgba(43,38,32,.08), 0 24px 48px rgba(43,38,32,.12);

  --f:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ==========================================================================
   §2  BASE  — box-sizing lives here now, not in a CDN
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:var(--t-md);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
table{border-collapse:collapse;width:100%;}
::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--ink);color:#fff;padding:var(--s3) var(--s5);font-weight:700;}
.skip:focus{left:0;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ==========================================================================
   §3  TYPE
   ========================================================================== */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em;}
.lbl{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);}
.t-xs{font-size:var(--t-xs);} .t-sm{font-size:var(--t-sm);} .t-md{font-size:var(--t-md);}
.t-lg{font-size:var(--t-lg);} .t-xl{font-size:var(--t-xl);} .t-2xl{font-size:var(--t-2xl);}
.t-3xl{font-size:var(--t-3xl);}
.b{font-weight:700;} .sb{font-weight:600;}
.soft{color:var(--ink-soft);} .faint{color:var(--ink-faint);}
.c-acc{color:var(--accent);} .c-good{color:var(--good);} .c-bad{color:var(--danger);} .c-warn{color:var(--warn);}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.right{text-align:right;} .center{text-align:center;}

/* ==========================================================================
   §4  SIGNATURE — THE ALLOCATION BAR
   Income split into Expenses / Debt / Left. The one device that makes the
   money model visible at a glance, at every scale.
   ========================================================================== */
.alloc{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--bg-sunk);border:1px solid var(--line);}
.alloc i{display:block;height:100%;transition:width .4s ease;}
.alloc .a-exp{background:var(--accent-lit);}
.alloc .a-debt{background:var(--warn);}
.alloc .a-left{background:var(--good);}
.alloc .a-over{background:var(--danger);}
.alloc-sm{height:8px;}
.alloc-key{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2);}
.alloc-key span{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--ink-soft);}
.alloc-key i{width:9px;height:9px;border-radius:3px;flex:none;}

/* progress bar (budget rows, payoff) */
.bar{height:7px;background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--accent-lit);transition:width .4s ease;}
.bar i.over{background:var(--danger);}
.bar i.ok{background:var(--good);}

/* ==========================================================================
   §5  CHROME — sidebar on desktop, tab bar on mobile
   ========================================================================== */
.side{display:none;}
@media(min-width:900px){
  .side{
    display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--side-w);
    background:var(--card);border-right:1px solid var(--line);padding:var(--s5) var(--s3);z-index:50;
  }
  .shell{margin-left:var(--side-w);}
}
.side-brand{font-weight:800;font-size:var(--t-lg);letter-spacing:-.02em;padding:0 var(--s3) var(--s5);}
.side-brand span{color:var(--accent);}
.side-link{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r);
  color:var(--ink-soft);font-weight:600;font-size:var(--t-md);min-height:var(--tap);transition:background .12s,color .12s;
}
.side-link svg{width:20px;height:20px;flex:none;}
.side-link:hover{background:var(--bg-sunk);color:var(--ink);}
.side-link[aria-current="page"]{background:var(--accent-wash);color:var(--accent);}
.side-foot{margin-top:auto;padding:var(--s3);font-size:var(--t-xs);color:var(--ink-faint);}
.side-money{margin:var(--s4) var(--s2) 0;padding:var(--s3);background:var(--bg-sunk);border-radius:var(--r);}

.tabs{
  position:fixed;inset:auto 0 0 0;z-index:60;display:flex;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:900px){.tabs{display:none;}}
.tabs a{
  flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:var(--t-xs);font-weight:600;color:var(--ink-faint);
}
.tabs a[aria-current="page"]{color:var(--accent);}
.tabs svg{width:20px;height:20px;}

.wrap{max-width:1180px;margin:0 auto;padding:var(--s4) var(--s4) var(--s7);}
@media(min-width:900px){.wrap{padding:var(--s6) var(--s6) var(--s7);}}
@media(max-width:899px){.wrap{padding-bottom:100px;}}
.wrap-wide{max-width:1440px;}

/* mobile top bar — Budget/Log are phone-first, so the month control is
   pinned where a thumb can reach it rather than buried in the page */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(250,246,240,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:var(--s3) var(--s4);
  display:flex;align-items:center;gap:var(--s3);
}
@media(min-width:900px){.topbar{position:static;background:none;backdrop-filter:none;border:0;padding:0 0 var(--s4);}}

/* ==========================================================================
   §6  PANELS
   ========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);}
.card-pad{padding:var(--s4);}
@media(min-width:900px){.card-pad{padding:var(--s5);}}
.card-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);}
.card-head h2,.card-head h3{font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;}
.card-dark{background:linear-gradient(150deg,#2F2921,#3D3529);color:#F7F2E8;border:0;border-radius:var(--r-lg);box-shadow:var(--sh-2);}
.card-dark .lbl{color:#C3B7A2;}
.card-dark .soft{color:#D6CCBA;}
.rule{height:1px;background:var(--line-soft);margin:var(--s5) 0;}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4);}
.head h1{font-size:var(--t-xl);font-weight:800;letter-spacing:-.025em;}
@media(min-width:900px){.head h1{font-size:var(--t-2xl);}}

/* ==========================================================================
   §7  CONTROLS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r);
  font-size:var(--t-sm);font-weight:700;white-space:nowrap;border:1px solid transparent;
  transition:background .14s,border-color .14s,color .14s,transform .08s;
}
.btn:active{transform:translateY(1px);}
.btn-go{background:var(--accent);color:#fff;}
.btn-go:hover{background:#A9441F;}
.btn-line{border-color:var(--line);background:var(--card);color:var(--ink);}
.btn-line:hover{border-color:var(--ink-faint);}
.btn-quiet{color:var(--ink-soft);}
.btn-quiet:hover{background:var(--bg-sunk);color:var(--ink);}
.btn-kill{border-color:var(--danger);color:var(--danger);}
.btn-kill:hover{background:var(--danger);color:#fff;}
.btn-sq{width:var(--tap);padding:0;flex:none;}
.btn-sm{min-height:36px;padding:0 var(--s3);font-size:var(--t-xs);}
/* 36px is fine for a mouse; on touch every control gets the full 44px. */
@media(max-width:899px){ .btn-sm{min-height:var(--tap);padding:0 var(--s4);} }
.btn[disabled]{opacity:.35;pointer-events:none;}
.btn svg{width:17px;height:17px;flex:none;}
.btn-block{width:100%;}

/* icon-only controls keep a 44px hit area without growing visually */
.tapfix{position:relative;}
.tapfix::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--tap);height:var(--tap);}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px var(--s2);border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:700;border:1px solid var(--line);color:var(--ink-soft);background:var(--bg-sunk);
}
.pill-good{border-color:var(--good);color:var(--good);background:var(--good-wash);}
.pill-bad{border-color:var(--danger);color:var(--danger);background:var(--danger-wash);}
.pill-warn{border-color:var(--warn);color:var(--warn);background:var(--warn-wash);}
.pill svg{width:13px;height:13px;flex:none;}
.dot{width:9px;height:9px;border-radius:3px;flex:none;}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);}
.seg button{padding:0 var(--s3);min-height:40px;font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);border-right:1px solid var(--line-soft);transition:background .12s;}
.seg button:last-child{border-right:0;}
.seg button:hover{background:var(--bg-sunk);}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;}

.field{display:block;margin-bottom:var(--s4);}
.field > .lbl{display:block;margin-bottom:6px;}
.inp{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);font-size:var(--t-md);min-height:var(--tap);transition:border-color .14s,box-shadow .14s;
}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);}
.inp::placeholder{color:var(--ink-faint);}
.inp-lg{font-size:var(--t-xl);font-weight:700;min-height:56px;}
.row2{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media(min-width:520px){.row2{grid-template-columns:1fr 1fr;}}
.row3{display:grid;grid-template-columns:1fr;gap:0;}
.row3 > div{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line-soft);}
.row3 > div:last-child{border-bottom:0;}
@media(min-width:760px){
  .row3{grid-template-columns:repeat(3,1fr);gap:var(--s3);}
  .row3 > div{display:block;padding:0;border-bottom:0;}
}

.month-nav{display:flex;align-items:center;gap:var(--s2);}
.month-label{font-weight:700;font-size:var(--t-md);min-width:118px;text-align:center;}

/* ==========================================================================
   §8  LISTS — mobile-first rows (Budget, Log)
   ========================================================================== */
.rows{display:flex;flex-direction:column;}
.row-item{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s2) var(--s3);border-radius:var(--r);min-height:var(--tap);
  transition:background .12s;
}
.row-item + .row-item{border-top:1px solid var(--line-soft);}
.row-item:hover{background:var(--bg-sunk);}
.row-main{flex:1 1 9rem;min-width:9rem;min-height:var(--tap);display:flex;flex-direction:column;justify-content:center;text-align:left;}
.row-title{font-size:var(--t-md);font-weight:600;}
.row-sub{font-size:var(--t-xs);color:var(--ink-faint);margin-top:1px;}
.row-amt{font-weight:700;font-variant-numeric:tabular-nums;flex:none;}
.row-acts{display:flex;gap:2px;flex:none;}
@media(max-width:600px){
  .row-item > .row-acts{display:none;}    /* tapping the row edits it */
}

/* budget category row */
.cat-row{padding:var(--s3);border-radius:var(--r);border:1px solid var(--line-soft);margin-bottom:var(--s2);background:var(--card);}
.cat-top{display:flex;align-items:center;gap:var(--s3);}
.cat-name{flex:1;min-width:0;font-weight:600;}

/* ==========================================================================
   §9  SHEET — spreadsheet grid (Log + Debt), desktop-dense
   ========================================================================== */
.sheet-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);}
.sheet-table{min-width:640px;font-size:var(--t-sm);background:var(--card);}
.sheet-th{
  position:sticky;top:0;z-index:2;background:var(--bg-sunk);
  padding:var(--s2) var(--s3);text-align:left;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);
  border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;
}
.sheet-th:hover{color:var(--ink);}
.sheet-td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-soft);white-space:nowrap;min-height:40px;}
.sheet-table tbody tr:hover .sheet-td{background:var(--bg-sunk);}
.sheet-td-formula{background:rgba(193,80,42,.05);font-variant-numeric:tabular-nums;}
.sheet-edit-input{width:100%;min-width:80px;border:1px solid var(--accent);border-radius:6px;padding:5px 7px;font-size:var(--t-sm);}
.sheet-col-menu-btn{margin-left:5px;color:var(--ink-faint);vertical-align:middle;}
.sheet-num{text-align:right;font-variant-numeric:tabular-nums;}

/* ==========================================================================
   §10  DEBT — desktop-first projection
   ========================================================================== */
.due-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media(min-width:820px){.due-grid{grid-template-columns:repeat(3,1fr);}}
.debt-grid{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:start;}
@media(min-width:900px){.debt-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}}

.debt-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--d-color,var(--accent));border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s2);}
.debt-top{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;}
.debt-name{font-weight:700;flex:1;min-width:0;}
.debt-bal{font-weight:800;font-variant-numeric:tabular-nums;}
.debt-meta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2);font-size:var(--t-xs);color:var(--ink-faint);}

/* the month scrubber — "where will I be in January?" */
.scrub{padding:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);}
.scrub-range{width:100%;margin:var(--s3) 0 var(--s2);accent-color:var(--accent);height:var(--tap);}
.scrub-read{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);}
@media(min-width:640px){.scrub-read{grid-template-columns:repeat(4,1fr);}}
.scrub-cell{padding:var(--s3);background:var(--bg-sunk);border-radius:var(--r);}
.scrub-n{font-size:var(--t-lg);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;}
@media(min-width:900px){.scrub-n{font-size:var(--t-xl);}}

/* projection table — desktop; becomes stacked cards on phones */
.proj-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);}
.proj-table{min-width:480px;font-size:var(--t-sm);background:var(--card);}
.proj-table th{position:sticky;top:0;background:var(--bg-sunk);padding:var(--s2) 6px;text-align:right;font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border-bottom:1px solid var(--line);white-space:nowrap;}
.proj-table th:first-child{text-align:left;}
.proj-table td{padding:7px 6px;text-align:right;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;white-space:nowrap;}
.proj-table td:first-child{text-align:left;font-weight:600;}
.proj-table tr.short td{background:var(--danger-wash);}
.proj-table tr.paid td{background:var(--good-wash);}
.proj-table tr.now td{box-shadow:inset 3px 0 0 var(--accent);}
.proj-table tfoot td{border-top:2px solid var(--line);border-bottom:0;background:var(--bg-sunk);font-weight:700;}
.proj-table tfoot td:first-child{font-weight:800;}
@media(max-width:760px){
  .proj-table tr.now td{box-shadow:none;}
  .proj-table tr.now{border-color:var(--accent);border-left-width:3px;}
}
@media(max-width:899px){
  /* the strategy switch overflowed 390px — let it use the full width */
  .card-head{flex-wrap:wrap;}
  .card-head .seg{width:100%;}
  .card-head .seg button{flex:1;padding:0 var(--s2);}
  /* scrubber header stacked awkwardly, chevrons wrapping under the label */
  .scrub > .between{flex-wrap:wrap;}
  .scrub > .between > div:last-child{width:100%;}
  .scrub > .between > div:last-child .btn{flex:1;}
}
@media(max-width:760px){
  .proj-wrap{border:0;overflow:visible;}
  .proj-table{min-width:0;}
  .proj-table thead{display:none;}
  .proj-table tfoot td{background:transparent;}
  .proj-table tr{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s3);
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2);}
  .proj-table td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:var(--s2);text-align:right;}
  .proj-table td::before{content:attr(data-l);font-size:var(--t-xs);color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
  .proj-table td:first-child{grid-column:1/-1;font-size:var(--t-md);font-weight:800;border-bottom:1px solid var(--line-soft);padding-bottom:var(--s2);margin-bottom:var(--s1);}
  .proj-table td:first-child::before{content:none;}
}

/* the borrow-to-pay answer */
.shortfall{border:1px solid var(--danger);background:var(--danger-wash);border-radius:var(--r);padding:var(--s4);}
.shortfall .t-2xl{color:var(--danger);}

/* ==========================================================================
   §11  MODAL / TOAST / EMPTY
   ========================================================================== */
.veil{position:fixed;inset:0;z-index:200;background:rgba(43,38,32,.5);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:var(--s4);}
.veil.on{display:flex;}
.sheet-modal{
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-3);
}
/* on phones a modal is a bottom sheet — reachable, and it can't be missed */
@media(max-width:600px){
  .veil{align-items:flex-end;padding:0;}
  .sheet-modal{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh;padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom));}
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft);}
.sheet-head h2{font-size:var(--t-lg);font-weight:800;}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);}

.toast{
  position:fixed;left:50%;bottom:var(--s5);z-index:400;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:var(--s2);background:var(--ink);color:#fff;
  padding:var(--s3) var(--s4);border-radius:var(--r);font-size:var(--t-sm);font-weight:600;
  transition:opacity .2s,transform .2s;box-shadow:var(--sh-2);max-width:92vw;
}
.toast.on{opacity:1;transform:translate(-50%,0);}
.toast.bad{background:var(--danger);}
.toast svg{width:17px;height:17px;flex:none;}
@media(max-width:899px){.toast{bottom:78px;}}

.empty{padding:var(--s6) var(--s4);text-align:center;border:1px dashed var(--line);border-radius:var(--r-lg);color:var(--ink-faint);}
.empty p{margin-top:var(--s2);font-size:var(--t-sm);}
.empty svg{width:26px;height:26px;}

.fab{
  position:fixed;right:var(--s4);bottom:calc(76px + env(safe-area-inset-bottom));z-index:50;
  width:56px;height:56px;border-radius:20px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -4px rgba(193,80,42,.5);
}
.fab svg{width:24px;height:24px;}
@media(min-width:900px){.fab{display:none;}}


/* ==========================================================================
   §14  BUDGET — donut + allocation
   ========================================================================== */
.donut-wrap{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:center;}
@media(min-width:640px){.donut-wrap{grid-template-columns:210px minmax(0,1fr);gap:var(--s5);}}
.donut{width:190px;height:190px;margin:0 auto;display:block;flex:none;}
.donut circle{transition:stroke-dasharray .5s ease;}
.donut-hole{font-variant-numeric:tabular-nums;}
.legend{display:flex;flex-direction:column;gap:2px;min-width:0;}
.legend-row{
  display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;align-items:center;gap:var(--s2);
  width:100%;min-width:0;text-align:left;padding:7px var(--s2);border-radius:var(--r);min-height:40px;
  transition:background .12s;
}
.legend-row:hover{background:var(--bg-sunk);}
.legend-row.dim{opacity:.4;}
.legend-dot{width:11px;height:11px;border-radius:3px;}
.legend-pct{font-size:var(--t-xs);color:var(--ink-faint);font-variant-numeric:tabular-nums;min-width:38px;text-align:right;}

/* allocation meter: how much of income is actually budgeted */
.alloc-meter{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;background:var(--bg-sunk);border:1px solid var(--line);}
.alloc-meter i{display:block;height:100%;}

.bgt-row{
  display:grid;grid-template-columns:14px 1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s3);border-bottom:1px solid var(--line-soft);
}
.bgt-row:last-child{border-bottom:0;}
.bgt-name{font-weight:600;}
.bgt-nums{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.bgt-set{
  width:130px;text-align:right;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-radius:var(--r);padding:8px var(--s2);min-height:40px;background:var(--card);
}
.bgt-set:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);}
.bgt-bar{grid-column:2/-1;}
@media(max-width:600px){
  .bgt-row{grid-template-columns:14px 1fr;row-gap:var(--s2);}
  .bgt-nums{grid-column:2/-1;text-align:left;}
  .bgt-bar{grid-column:1/-1;}
}


/* ---- debt: the month's bill + 12-month outlook ---- */
.due-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media(min-width:820px){.due-grid{grid-template-columns:1.2fr 1fr 1fr;}}
.trend{width:100%;height:120px;display:block;}
.trend-area{fill:rgba(193,80,42,.12);}
.trend-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.trend-dot{fill:var(--accent);}
.trend-lbl{font-size:10px;fill:var(--ink-faint);font-weight:600;}


/* ---- schedule dots on a debt card ----
   These are <i> elements; without display:inline-block a width does nothing
   and they collapse to 2px. */
.peg{display:flex;flex-wrap:wrap;gap:3px;}
.peg i{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none;}


/* ---- term chooser chips ---- */
.chipbar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  min-height:36px;padding:0 var(--s3);border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);
  font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);
  transition:background .12s,border-color .12s,color .12s;
}
/* 36px suits a mouse; touch gets the full 44px floor, same rule used
   everywhere else in the app. */
@media(max-width:899px){ .chip, #termCustom{ min-height:var(--tap); } }
.chip:hover{border-color:var(--ink-faint);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}

/* helpers */
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.grow{flex:1;min-width:0;}
.stack>*+*{margin-top:var(--s4);}
.stack-sm>*+*{margin-top:var(--s2);}
.hide{display:none!important;}
@media(max-width:899px){.desk-only{display:none!important;}}
@media(min-width:900px){.mob-only{display:none!important;}}