:root { --nav-plan-color: #68657e; --nav-outlook-color: #43688f; }
.schedule-document-kind { display: none; }
#plan-preview-today { flex-shrink: 0; padding: 6px 8px; font: 600 12px var(--sans); color: var(--ink2); border: 1px solid var(--bd2); border-radius: 4px; }
#plan-preview-today[hidden] { display: none; }
#desktop-collapsed-today { display: none; }
.period-cash-edit,.period-stashes-link { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.set-aside-held-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; border-bottom:1px solid var(--bd); font:500 13px var(--sans); color:var(--ink2); }
.set-aside-held-row .period-stashes-link { font-family:var(--serif); font-style:italic; color:var(--ink); font-variant-numeric:tabular-nums; }
.period-stashes-link:focus-visible { outline:none; text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover) { .period-stashes-link:hover { text-decoration:underline; text-underline-offset:3px; } }
.period-cash-edit:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
@media (hover:hover) { .period-cash-edit:hover { text-decoration: underline; text-underline-offset: 3px; } }

:root {
  /* Light mode — warm parchment, increased contrast between chrome and content */
  --bg:      #f8f5ef;
  --s1:      #e4ddd0;
  --s2:      #d8d0c4;
  --s3:      #ccc4b8;
  --bd:      rgba(60,48,32,.10);
  --bd2:     rgba(60,48,32,.20);
  --ink:     #2a2218;
  --ink2:    #6a5e50;
  --ink3:    #756a5c;
  --gold:    #8a6a18;
  --navy:    #2a5a96;
  --navy-a:  rgba(42,90,150,.12);
  --teal:    #1e7858;
  --teal-a:  rgba(30,120,88,.12);
  --red:     #b03820;
  --red-a:   rgba(176,56,32,.10);
  --paid:    #1a8a5a;
  --paid-a:  rgba(30,120,88,.22);
  --bal-bg:  #1a3a28;
  --serif:   'Lora','Georgia',serif;
  --sans:    'Nunito',system-ui,sans-serif;
  --mono:    'DM Mono',monospace;
  --ui:      system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Spacing & sizing tokens */
  --tap-min:  44px;
  --bar-h:    44px;
  --card-px:  18px;
  --card-py:  14px;
  --modal-px: 22px;
  --sp-6:     6px;
  --sp-md:    14px;
  --ink1:     #3a3028;
  /* Radius scale */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-pill:  20px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:center;padding:0;}
button,[role="button"]{touch-action:manipulation;user-select:none;-webkit-user-select:none;}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms !important;}}
/* Touch feedback — fast in, gentle out */
.tr-btn,
.pnav-arr,
.tab,
.mcal-nav,
.mcal-day,
.bill-freq-btn,
.hrz-pill,
.date-btn,
.modal-cancel,
.modal-save,
.modal-close,
.tools-item,
.hdr-add-btn,
.inc-del,
.inc-stepper,
.ec-step-btn,
.ec-btn-schedule,
.rollup-tab,
.brand-name,
.hdr-cash,
.bcard-del,
.sel-btn,
.inc-section-hdr,
.ec-remove,
.inc-off-stepper,
.dock-now {
  transition:background 40ms ease-out,opacity 40ms ease-out,
             color 40ms ease-out,transform 40ms ease-out;
}
/* html fill paints the camera-notch / status-bar letterbox under viewport-fit=cover.
   body keeps the page parchment. Mismatch here reads as a white "headset" above the header. */
html{height:100%;background:#e4ddd0; /* = --s1 header chrome */}
body{height:100%;overflow:hidden;background:var(--bg);
  font-family:var(--sans);font-size:14px;color:var(--ink);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;}
.app{height:100dvh;display:flex;flex-direction:column;position:relative;background:var(--bg);}

/* Browser tabs use the branded loader. Installed apps already have a native
   launch logo, so their hydration cover shows only a quiet loading thread. */
.boot-splash{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  padding:max(28px,env(safe-area-inset-top,0px)) 28px max(28px,env(safe-area-inset-bottom,0px));
  background:#e4ddd0;opacity:1;visibility:visible;
  transition:opacity 220ms ease,visibility 0s linear 220ms;
}
.boot-splash.is-done{opacity:0;visibility:hidden;pointer-events:none;}
.boot-splash-lockup{width:min(78vw,360px);display:grid;justify-items:center;}
.boot-wordmark{display:block;width:100%;height:auto;}
.boot-thread{display:block;width:92%;height:auto;margin-top:-7px;overflow:visible;}
.boot-thread path{
  fill:none;stroke:#1f654f;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320;
  animation:boot-thread-draw 560ms cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes boot-thread-draw{to{stroke-dashoffset:0;}}
@keyframes boot-tag-settle{to{opacity:1;}}
@media(display-mode:standalone){
  .boot-splash{transition:none;}
}
@media(prefers-reduced-motion:reduce){
  .boot-splash{transition:none;}
  .boot-thread path{animation:none;stroke-dashoffset:0;}
}

/* ── HEADER ── */
.app-header{
  flex-shrink:0;background:var(--s1);
  border-bottom:1px solid var(--bd);
  /* black-translucent status bar: keep logo below notch / Dynamic Island */
  padding:calc(8px + env(safe-area-inset-top,0px)) 18px 10px;
  display:flex;align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  flex:1;min-width:0;gap:1px;
}
.brand-name{
  font-family:'Caveat',cursive;
  font-style:normal;
  font-size:30px;
  font-weight:600;
  color:var(--ink2);
  letter-spacing:.02em;
  line-height:1;
  cursor:pointer;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.brand-name:active{opacity:.65;}
.app > .app-header .brand{
  display:grid;grid-template-columns:max-content;justify-content:start;align-content:center;
}
/* ── Cash stat in header — mirrors .ah-end styling ── */
.hdr-cash{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;padding:4px 0;flex-shrink:0;margin-left:auto;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.hdr-cash:active{opacity:.55;}
.hdr-cash-lbl{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);font-family:var(--ui);
}
.hdr-cash-val{
  font-family:var(--serif);font-style:italic;
  font-size:20px;font-weight:400;line-height:1;
  color:var(--teal);letter-spacing:-.01em;
}
.hdr-cash-input{
  display:none;font-family:var(--serif);font-style:italic;
  font-size:20px;font-weight:400;width:72px;
  text-align:center;background:transparent;border:none;
  border-bottom:1.5px solid var(--ink3);
  color:var(--ink);outline:none;line-height:1;
}

/* ── Cash calculator popover ── */
.calc-scrim{
  position:fixed;inset:0;background:rgba(20,16,10,.38);
  z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding-top:calc(var(--header-h,88px) + 8px);
  -webkit-tap-highlight-color:transparent;
}
.calc-scrim.open{display:flex;}
.calc{
  width:min(320px,calc(100vw - 24px));
  background:var(--bg);
  border:1px solid var(--bd2);
  border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(20,16,10,.28),0 2px 6px rgba(20,16,10,.12);
  padding:14px 14px 12px;
  display:flex;flex-direction:column;gap:10px;
  font-family:var(--ui);
}
.calc-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.calc-head-l{display:flex;flex-direction:column;gap:3px;min-width:0;}
.calc-lbl{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);
}
.calc-sub{
  font-family:var(--ui);font-size:11px;font-weight:400;line-height:1.2;
  letter-spacing:.01em;color:var(--ink3);
}
.calc-cancel{
  background:none;border:none;color:var(--ink3);
  font-size:18px;line-height:1;padding:2px 4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.calc-cancel:active{opacity:.55;}
.calc-display{
  display:flex;flex-direction:column;align-items:flex-end;
  padding:6px 8px 8px;border-bottom:1px solid var(--bd);
  min-height:52px;
}
.calc-expr{
  font-family:var(--mono);font-size:13px;color:var(--ink3);
  min-height:16px;letter-spacing:.02em;
  word-break:break-all;text-align:right;line-height:1.25;
}
.calc-total{
  font-family:var(--serif);font-style:italic;
  font-size:28px;color:var(--teal);line-height:1;margin-top:4px;
  letter-spacing:-.01em;
}
.calc-total.err{color:var(--red);font-size:18px;font-style:normal;font-family:var(--ui);font-weight:600;}
.calc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.calc-btn{
  appearance:none;-webkit-appearance:none;
  background:var(--s1);border:1px solid var(--bd);
  border-radius:var(--r-md);
  font-family:var(--ui);font-size:18px;font-weight:500;color:var(--ink);
  min-height:46px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .08s;
}
.calc-btn:active{background:var(--s2);}
.calc-btn.op{color:var(--teal);font-weight:600;}
.calc-btn.util{color:var(--ink3);font-size:15px;}
.calc-btn.commit{
  grid-column:span 2;
  background:var(--teal);color:#f8f5ef;border-color:var(--teal);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px;
}
.calc-btn.commit:active{background:#155e43;}
.calc-btn.commit[disabled]{opacity:.45;}
.calc { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.pname-date{color:rgba(100,168,228,.95);}
.pname-date.skipped{text-decoration:line-through;opacity:.45;cursor:pointer;-webkit-tap-highlight-color:transparent;}
/* Mobile already has the double-tap-Today-tab gesture for this (openDateJumpCal);
   desktop has no tab bar, so it gets an explicit button instead. */
.pnav-datejump{display:none;}
.ah-horizon-date{font-size:10px;color:var(--ink3);font-weight:500;letter-spacing:.04em;text-transform:none;vertical-align:middle;}
.ah-lbl{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-family:var(--ui);}
.ah-val{font-family:var(--serif);font-style:italic;font-size:17px;font-weight:400;line-height:1;letter-spacing:-.01em;color:var(--ink2);}
.ah-val.ok{color:var(--ink2);}
.ah-val.bad{color:var(--red);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:3px;}
.ah-val.warn{color:var(--gold);}
.ah-end{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:4px 0;min-width:0;}
.ah-end .ah-lbl{text-align:right;}
.ah-end .ah-val{text-align:right;}

/* ── ALERT ── */
.alert{
  position:absolute;
  left:0;right:0;
  top:var(--header-h, 88px);
  z-index:50;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.alert.on{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.alert-in{
  display:flex;align-items:center;padding:8px 14px;gap:8px;
  background:#f2e4dc;
  font-size:12px;font-weight:600;color:var(--red);cursor:pointer;
  border-top:2px solid;
  border-image:repeating-linear-gradient(
    90deg,
    rgba(30,22,10,.85) 0px, rgba(30,22,10,.85) 5px,
    rgba(220,170,0,.9) 5px, rgba(220,170,0,.9) 10px
  ) 1;
}
.alert-ico{flex-shrink:0;}
/* Goal-flavor toast: gold-on-parchment instead of alarm red, so users
   recognize it's informational (which goal is this $?) not an overdraft. */
.alert-in.goal {
  color:#8a6f1f;
  background:#f6efde;
  border-image: repeating-linear-gradient(
  90deg,
  rgba(80,60,15,.65) 0px, rgba(80,60,15,.65) 5px,
  rgba(220,170,0,.95) 5px, rgba(220,170,0,.95) 10px) 1;
}
.alert-in.goal .alert-ico{font-family:Georgia,serif;font-style:italic;font-weight:800;color:rgba(180,140,30,.95);}
.alert-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* "Not now" — narrow the chart focus, don't dismiss the truth. Hidden when
   shrinking wouldn't help (banner would still show even on the 60-day view). */
.alert-later{
  flex-shrink:0;
  background:transparent;border:none;padding:2px 0 2px 6px;
  color:var(--ink2);font:600 11px/1 var(--ui);
  text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.alert-later:active{opacity:.55;}
.alert-later[hidden]{display:none;}
.chart-labels{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 0;margin-bottom:8px;min-height:28px;}
.chart-title{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-family:var(--ui);}
.chart-title.clickable{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
.chart-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;}
.reset-plan-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:0;border-radius:7px;background:transparent;
  padding:0;color:var(--navy);cursor:pointer;
}
.reset-plan-btn svg{width:17px;height:17px;flex-shrink:0;}
.reset-plan-btn:active{background:rgba(42,90,150,.12);}
.reset-plan-btn[hidden]{display:none;}
.reset-plan-btn:focus-visible{outline:2px solid rgba(100,168,228,.75);outline-offset:2px;}
/* Undo badge — baby-blue tint to echo the postpone (forward) button: both
   represent shuffling/undoing actions, so they share the same visual family. */
.chart-title.solve-on{background:var(--navy-a);color:var(--navy);padding:2px 7px;border-radius:4px;font-weight:800;}
svg#sch-chart{display:block;width:100%;cursor:pointer;}
.chart-section{transition:background .3s ease;}
.chart-section.collapsed svg#sch-chart{display:none;}
.chart-section.collapsed .chart-labels{margin-bottom:0;padding-bottom:2px;}
/* When the chart is collapsed, bump the Today header stat (.ah-val) to the same
   bolder/larger style so SHORT $45 / SAFE TO SPEND reads clearly; keep the
   lighter default when the chart is expanded. */
.chart-section.collapsed .ah-val{font-weight:600;color:var(--ink1);}
.chart-section.collapsed .ah-val.bad{color:var(--red);}
.chart-section.collapsed .ah-val.warn{color:var(--gold);}
/* Drag grip: three-dot handle sitting in chrome between the crochet bar and
   the period-nav bar. Tiny strip, same chrome background, so it blends in and
   doesn't steal chart real estate. Drag up = collapse chart, drag down = expand. */
.chart-drag-handle{
  flex-shrink:0;height:10px;display:flex;align-items:center;justify-content:center;
  background:var(--s1);border-bottom:1px solid var(--bd);
  cursor:ns-resize;touch-action:none;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
.chart-drag-dots{display:inline-flex;gap:3px;align-items:center;}
.chart-drag-dots>span{
  width:3px;height:3px;border-radius:50%;
  background:rgba(60,48,32,.32);
  transition:background .15s ease;
}
.chart-drag-handle.dragging .chart-drag-dots>span{background:rgba(60,48,32,.6);}
@media(hover:hover){.chart-drag-handle:hover .chart-drag-dots>span{background:rgba(60,48,32,.6);}}
.chart-section.od-tint{
  background:
    linear-gradient(rgba(60,48,32,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,48,32,.06) 1px, transparent 1px);
  background-size:14px 14px;
}
/* Health pills on the SHORT / SAFE header label. Pure primary red and
   primary green — saturated hues so red-green colorblind eyes can still
   distinguish them; the muted brick/teal hues elsewhere in the palette read
   as brown/pink. POTENTIALLY intentionally has no pill — the Prefund
   green badge already carries that call-to-action, so the dollar label
   stays neutral here to avoid competing for attention. */
.ah-horizon-date.short{
  background:#e6001f;color:#fff;
  padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:.10em;
}
.ah-horizon-date.safe{
  background:#00a000;color:#fff;
  padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:.10em;
}

/* ── PERIOD NAV BAR ── */
.pnav-bar{
  flex-shrink:0;background:var(--s1);border-bottom:1px solid var(--bd);
  display:flex;flex-direction:column;
}
.pnav-row{display:flex;align-items:center;padding:8px 12px 4px;}
.pnav-arr{
  width:var(--tap-min);height:var(--tap-min);border-radius:22px;background:transparent;
  border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--ink3);cursor:pointer;flex-shrink:0;transition:all .15s;user-select:none;
  margin:2px;
}
.pnav-arr:active{background:var(--navy);color:#fff;border-color:var(--navy);}
.pnav-arr.off{opacity:.2;pointer-events:none;}
.pnav-arr.menu{opacity:1;border-color:transparent;}
.pnav-center{flex:1;padding:0 10px;display:flex;align-items:center;justify-content:center;min-width:0;}
.pnav-name{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Ledger strip — inline labels, centered below date row */
.pnav-ledger{
  display:flex;justify-content:center;align-items:baseline;gap:14px;
  padding:0 0 7px;
  font:600 11px/1 var(--sans);color:var(--ink3);
  font-variant-numeric:tabular-nums;
}
.pnav-ledger-item{display:flex;align-items:baseline;gap:4px;}
.pnav-ledger-lbl{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);opacity:.65;font-family:var(--ui);}
.pnav-ledger-val{font-size:12px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums;}
.pnav-ledger-val.teal{color:var(--teal);}
.pnav-ledger-val.neg{color:var(--red);}
.pnav-ledger-val.skipped{text-decoration:line-through;opacity:.45;}


/* ── SWIPEABLE CARDS ── */
.cards-area{flex:1;overflow:hidden;position:relative;}
.sw-track{display:flex;width:300%;height:100%;transition:transform .26s cubic-bezier(.4,0,.2,1);will-change:transform;}
.sw-page{width:33.333%;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.sw-page.expense-open .sw-content{filter:blur(2px);opacity:.5;pointer-events:none;}
.sw-content{flex:1;overflow-y:auto;padding:0 0 calc(var(--bar-h) + 36px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.sw-content::-webkit-scrollbar{display:none;}

/* ── BILL CARD ── */
.bcard{
  display:flex;align-items:center;padding:var(--card-py) var(--card-px);
  border-bottom:1px solid var(--bd);gap:12px;position:relative;
  min-height:calc(var(--tap-min) + 28px);box-sizing:border-box;
}
.bcard-info{flex:1;min-width:0;}
.bcard-name{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
  display:flex;align-items:center;gap:7px;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;
}
.bcard-name-link{cursor:pointer;width:fit-content;-webkit-tap-highlight-color:transparent;}
@media(hover:hover){.bcard-name-link:hover{color:var(--navy);text-decoration:underline;text-underline-offset:2px;}}
.stag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:var(--s3);color:var(--ink2);font-family:var(--ui);}
.stag.slack{background:var(--navy-a);color:var(--navy);}
.stag.def  {background:rgba(138,122,90,.18);color:var(--ink3);}
.stag.limit{background:none;color:var(--red);padding:0 4px;}
.stag.overdue{background:none;color:var(--red);padding:0 4px;letter-spacing:.06em;}
.stag.today{background:rgba(138,106,24,.14);color:var(--gold);font-weight:700;font-size:10px;padding:3px 8px;letter-spacing:.08em;}
.stag.paid{background:var(--paid-a);color:var(--paid);font-weight:700;font-size:10px;padding:3px 8px;}

.bcard-amt{font-family:var(--serif);font-style:italic;font-size:26px;font-weight:400;color:var(--ink);letter-spacing:-.01em;line-height:1.1;}
.bcard-meta{font-size:11px;color:var(--ink3);margin-top:2px;}

/* Roll-up drawer for recurring bills with multiple instances in one period */
.rollup-tab{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:10px 18px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);
  background:var(--s1);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-bottom:1px solid var(--bd);
  position:sticky;top:0;z-index:5;
}
.rollup-tab:active{background:var(--s2);}
/* No drawer-tab marker for shuffled bills — the signal lives in the label
   text itself (e.g. "Lunch · 5 · 1 postponed"). Any background tint, stripe,
   or icon glyph in the header read as pressed-in or ambiguous in testing. */
.rollup-tab-left{display:flex;align-items:center;gap:8px;}
.rollup-tab-amt{font-family:var(--serif);font-style:italic;font-size:13px;font-weight:400;color:var(--ink);letter-spacing:0;text-transform:none;text-align:right;font-variant-numeric:tabular-nums;}
/* Expanded items show their own amounts; only collapsed groups need a total. */
.rollup-tab[aria-expanded="true"] .rollup-tab-amt{visibility:hidden;}
.rollup-tab-lbl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);}
.rollup-chev{flex-shrink:0;color:var(--ink3);transition:transform .2s;line-height:0;transform:rotate(-90deg);}
.rollup-chev.open{transform:none;}
.rollup-env{flex-shrink:0;color:var(--ink3);opacity:.38;line-height:0;}
.rollup-body{max-height:0;overflow:hidden;visibility:hidden;}
.rollup-body.open{max-height:none;visibility:visible;}
/* Wrapper around each rollup drawer: a tight 4px parchment sliver below
   each tab so its shadow has somewhere to land. The shadow is concentrated
   (small blur, higher opacity) so adjacent collapsed drawers read as a
   tight stack of pages — like flipping through cards with your thumb.
   Gap collapses when the drawer is expanded so its cards sit flush. */
.rollup-wrap{margin-bottom:4px;}
.rollup-wrap:has(.rollup-body.open){margin-bottom:0;}
.rollup-wrap:has(> .rollup-body.open) + .rollup-wrap{margin-top:10px;}
.rollup-body .bcard{
  padding:8px 18px 8px 14px;min-height:0;
  border-left:2px solid var(--bd2);margin-left:16px;
}
.rollup-body .bcard-amt{font-size:20px;}
.rollup-body .bcard-meta{font-size:10px;}

/* Expense bills (created via Spend feature) — subtle navy tint to distinguish from scheduled bills */
.bcard.expense-bill{
  background:rgba(42,90,150,.045);
  border-left:3px solid rgba(42,90,150,.22);
  padding-left:15px; /* compensate for the border */
}
/* Delete button — top-right corner of each card */
.bcard-del{
  position:absolute;top:2px;right:2px;
  width:var(--tap-min);height:var(--tap-min);
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--ink3);opacity:.45;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .12s,color .12s;
}
.bcard-del:active{opacity:1;color:var(--red);}

/* Goal card (plan page) */
.bcard.goal-card{
  border:1.5px dashed rgba(138,106,24,.35);
  background:linear-gradient(135deg,rgba(138,106,24,.04),rgba(138,106,24,.08));
  box-shadow:none;
}
.bcard.goal-card .bcard-info{gap:2px;}
.bcard.goal-card .bcard-name{display:flex;align-items:center;gap:5px;}
.goal-icon{width:14px;height:14px;flex-shrink:0;}
.bcard.goal-card .bcard-amt{color:var(--gold);font-weight:600;}
.goal-meta{color:var(--ink3);font-size:11px;}
/* Goal schedule card */
.bill-card.is-goal{border-left:3px solid var(--gold);}
/* Debt schedule card — red-wine accent mirrors goal's gold accent */
.bill-card.is-debt{border-left:3px solid var(--red);}
.bcard.debt-card{border-left:3px solid var(--red);}
.bcard.debt-card .bcard-amt{color:var(--red);font-weight:600;}
.bcard.due-today{border-left:3px solid var(--gold);padding-left:calc(var(--card-px) - 3px);}
.goal-schedule-preview{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--ink2);
  line-height:1.4;
}

/* Ghost card — faded + dotted border to distinguish from real cards */
.bcard.ghost{border:1.5px dashed var(--bd2);border-bottom:1.5px dashed var(--bd2);background:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(60,48,32,.025) 8px,rgba(60,48,32,.025) 10px);}
.bcard.ghost .bcard-info{opacity:.3;}
.bcard.ghost .bcard-amt{color:var(--ink3);}
.ghost-hop{font-size:11px;font-weight:700;letter-spacing:.03em;color:rgba(185,50,30,.75);flex-shrink:0;margin-right:6px;align-self:center;}
/* Destination card — bill moved here from a different period */
.bcard.moved-here{border-left:3px solid rgba(42,90,150,.3);padding-left:calc(var(--card-px) - 3px);}
.bcard.selected{outline:2px solid rgba(74,122,184,.75);outline-offset:-1px;background:rgba(74,122,184,.13);box-shadow:0 0 0 3px rgba(74,122,184,.18);}
/* Paid card */
.bcard.paid .bcard-info{opacity:.38;}
.bcard.paid .bcard-amt{text-decoration:line-through;color:var(--ink3);}

/* ── TRANSPORT BUTTON GROUP — soft compound bar ── */
.transport{
  flex-shrink:0;display:inline-flex;align-items:stretch;
  border:1px solid var(--bd);
  border-radius:var(--r-pill);
  overflow:hidden;
  background:var(--bg);
}
.tr-btn{
  display:flex;align-items:center;justify-content:center;
  padding:10px 13px;min-width:44px;
  cursor:pointer;transition:all .15s;
  color:var(--ink3);font-family:var(--sans);
  font-size:13px;line-height:1;
  border:none;
  border-right:1px solid var(--bd);
  background:transparent;
  border-radius:0;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.tr-btn:last-child{border-right:none;}
@media(hover:hover){
.tr-btn.latched:focus-visible{background:var(--s2);}
.tr-btn.pay.latched:focus-visible{background:var(--navy-a);}
.tr-btn.fwd.latched:focus-visible{background:var(--navy-a);}
}
.tr-btn:active{background:var(--s2);}
.tr-btn[disabled]{opacity:.35;pointer-events:none;cursor:not-allowed;}
.tr-label{display:none;}
/* Latched state — gentle warm fill */
.tr-btn.latched{background:var(--s2);color:var(--ink2);}
.tr-btn.latched:active{background:var(--s3);}
/* Back button */
.tr-btn.back{color:var(--ink3);}
.tr-btn.back.latched{background:var(--s2);color:var(--ink2);}
/* Pay button (center) — wider, soft blue invite */
.tr-btn.pay{
  color:var(--navy);
  padding:10px 20px;min-width:50px;
  font-size:15px;
  background:transparent;
}
.tr-btn.pay:active{background:var(--s2);}
.tr-btn.pay.latched{background:var(--navy-a);color:var(--navy);}
/* Forward button */
.tr-btn.fwd{color:var(--ink3);}
.tr-btn.fwd.latched{background:var(--navy-a);color:var(--navy);}
/* Agenda keeps postponement visibly pressed even on touch and original rows. */
#view-plan .today-agenda .bcard .agenda-postpone.latched {
  background:rgba(43,36,26,.12); color:var(--navy); border-color:var(--ink2);
  box-shadow:inset 0 2px 3px rgba(43,36,26,.2);
}
.tr-btn.locked{opacity:.18;pointer-events:none;}
/* Long-press fill: a 500ms background transition that visually "charges" the
   button, signaling to the user that holding it does something extra. */
.tr-btn.holding{
  background:var(--s3);
  transition:background 450ms linear;
}
.tr-btn.pay.holding{background:var(--navy-a);}
.tr-count{font-size:9px;font-weight:700;font-family:var(--ui);letter-spacing:-.02em;vertical-align:middle;margin:0 1px;}

/* Phone density: keep the tape-deck controls finger-friendly, but remove the
   extra air that makes one bill card consume too much of a small viewport. */
@media(max-width:430px){
  :root{--card-px:12px;--card-py:5px;}
  .rollup-tab{padding:7px 12px;}
  .rollup-tab-lbl{font-size:9px;letter-spacing:.1em;}
  .rollup-body .bcard{padding:5px 10px 5px 10px;margin-left:10px;}
  /* min-height floor stays at one tap target; the transport buttons already
     hold the row open, so cards collapse to their text and several fit at once.
     The three lines (name / italic amount / meta) carry no extra leading. */
  .bcard{gap:8px;min-height:44px;}
  .bcard-name{font-size:10px;letter-spacing:.1em;margin-bottom:0;gap:5px;line-height:1.15;}
  .bcard-amt{font-size:20px;line-height:1.0;}
  .bcard-meta{font-size:10px;margin-top:1px;line-height:1.15;}
  .stag{font-size:9px;padding:2px 6px;}
  .ghost-hop{font-size:10px;margin-right:2px;}
  .transport{border-radius:18px;}
  .tr-btn{min-width:36px;min-height:38px;padding:6px 8px;font-size:12px;}
  .tr-btn.pay{min-width:40px;padding:6px 11px;font-size:14px;}
}

.empty-pg{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;}
.ep-ico{font-size:24px;opacity:.2;margin-bottom:8px;}
.ep-txt{font-size:14px;color:var(--ink2);font-family:var(--serif);font-style:italic;}
.ep-summary{font-size:13px;color:var(--navy);font-family:var(--serif);font-style:italic;margin-top:18px;max-width:270px;line-height:1.65;text-align:center;}
.period-quick-add{display:none;}
/* ── EXPENSE CARD NAME INPUT + ADD BUTTON ── */
.ec-name-input{
  width:100%;background:none;border:none;border-bottom:1px solid var(--bd2);
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink);
  padding:3px 0 5px;outline:none;text-align:center;
}
.ec-name-input::placeholder{color:var(--ink3);font-style:italic;}
.ec-btn-row{display:flex;gap:8px;width:100%;}
.ec-btn-schedule{
  flex:1;background:var(--s1);color:var(--ink2);border:1.5px solid var(--bd2);border-radius:var(--r-md);
  padding:12px 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;transition:opacity .15s;
}
.ec-btn-schedule:active{opacity:.6;}
.ec-btn-schedule:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.expense-card{
  background:#ece5d8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .58 0 0 0 0 .52 0 0 0 0 .44 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
  border:1px solid rgba(60,48,32,.18);
  border-radius:var(--r-lg);
  padding:14px 18px 16px;margin:0 12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:absolute;left:0;right:0;bottom:calc(var(--bar-h) + 12px);z-index:10;
  box-shadow:0 2px 4px rgba(42,90,150,.18),0 10px 28px rgba(60,48,32,.32);
}
.ec-header{display:flex;align-items:center;justify-content:space-between;width:100%;}
.expense-card .ec-name{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-family:var(--sans);}
.ec-stepper{display:flex;align-items:center;gap:10px;}
.ec-step-btn{
  background:none;border:1px solid var(--bd2);
  width:44px;height:44px;border-radius:22px;
  color:var(--ink2);font-size:20px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
}
.ec-step-btn:active{background:var(--s2);}
.ec-step-btn[disabled]{opacity:.2;pointer-events:none;}
.expense-card .ec-amt{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--ink);min-width:80px;text-align:center;cursor:pointer;}
.ec-amt-input{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--ink);width:90px;text-align:center;background:none;border:none;border-bottom:1.5px solid var(--bd2);outline:none;display:none;}
.ec-label{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-family:var(--ui);}
.expense-card .ec-remove{background:none;border:none;color:var(--ink2);font-size:18px;font-weight:600;cursor:pointer;padding:10px;margin:-6px;opacity:.9;}
.expense-card .ec-remove:active{opacity:1;color:var(--red);}

/* ── STATS STRIP ── */
.stats-strip{
  flex-shrink:0;background:var(--s1);border-top:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-md);height:var(--bar-h);
}
.ss-right{
  display:flex;align-items:center;
}
.period-bal-tab{
  display:flex;flex-direction:column;align-items:center;
  gap:1px;
  padding:5px 20px 6px 20px;
  border-radius:5px 5px 0 0;
  position:relative;
  justify-content:center;
  min-width:120px;width:auto;
  height:auto;min-height:44px;box-sizing:border-box;
  flex-shrink:0;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .15s cubic-bezier(.2,0,.2,1.4), background .15s, box-shadow .15s;
}
/* The register-tape tab pops UP when overdrawn */
.period-bal-tab.od{
  background:repeating-linear-gradient(
    -45deg,
    rgba(185,60,36,1) 0px,
    rgba(185,60,36,1) 7px,
    rgba(155,42,22,1) 7px,
    rgba(155,42,22,1) 9px
  );
  transform:translateY(-18px);
  border-radius:5px 5px 0 0;
  box-shadow:0 -4px 12px rgba(185,50,30,.4);
}
.period-bal-tab.od::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:4px;
  background:repeating-linear-gradient(
    -45deg,
    rgba(185,60,36,1) 0px,
    rgba(185,60,36,1) 7px,
    rgba(155,42,22,1) 7px,
    rgba(155,42,22,1) 9px
  );
}
.period-bal-tab.od #period-bal-lbl{
  color:rgba(255,210,200,.9);letter-spacing:.14em;font-size:10px;
  text-shadow:0 1px 2px rgba(120,20,0,.5);
}
.period-bal-tab.od #period-bal{
  color:#ffffff;font-family:var(--sans);
  font-size:16px;font-weight:800;line-height:1;
  text-shadow:0 1px 4px rgba(100,15,0,.55);
}
.period-bal-tab #period-bal-lbl{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  display:block;
}
.period-bal-tab #period-bal{
  font-size:16px;font-weight:800;line-height:1;
  color:#fff;
  font-family:var(--sans);
  display:block;
  font-variant-numeric:tabular-nums;
}
/* Normal tab: dark-green raised chip with vivid green amount — the color
   system carries the signal (green = good, red-hatched .od = bad), giving
   the eye a clear at-a-glance read. */
.period-bal-tab:not(.od){
  background:var(--bal-bg);
  transform:translateY(-18px);
  border-radius:5px 5px 0 0;
  box-shadow:0 -4px 12px rgba(0,0,0,.25);
}
.period-bal-tab.net-today{
  background:var(--bal-bg);
}
.period-bal-tab:not(.od)::after{
  content:'';
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:4px;
  background:var(--bal-bg);
}
.period-bal-tab:not(.od) #period-bal-lbl{color:rgba(120,220,150,.7);}
.period-bal-tab:not(.od) #period-bal{color:rgba(88,192,142,1);}

/* (spend-btn removed — spend affordance moved to dock-spend in tab bar) */
.ss-l{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-family:var(--ui);}
.ss-v{font-size:12px;font-weight:600;color:var(--ink2);margin-left:5px;font-variant-numeric:tabular-nums;}
.ss-v.bad{color:var(--red);text-decoration:underline wavy;text-underline-offset:2px;}.ss-v.ok{color:var(--teal);}

.sel-btn{
  background:var(--navy);color:#fff;border:none;
  font:700 11px/1 var(--sans);letter-spacing:.04em;padding:10px 14px;border-radius:var(--r-sm);cursor:pointer;margin-left:6px;white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.sel-cancel{background:transparent;color:var(--ink2);}
#sel-total{font-size:9px;font-weight:700;letter-spacing:.04em;white-space:nowrap;}

/* ── TAB BAR — 3-column dock with center NOW bookplate ──
   Now is the center of gravity: tap to recenter on today, the dollar
   readout is the safe-to-spend (the heart of the app). Schedule and Spend
   are satellites — one looks ahead, one takes an action. */
.tabbar{
  flex-shrink:0;background:var(--s1);border-top:1px solid var(--bd);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:end;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tab{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 4px 6px;background:transparent;border:none;
  cursor:pointer;color:var(--ink3);font-family:var(--sans);
  border-top:3px solid transparent;
}
.tab .tab-svg-ico{opacity:.55;}
.tab:active{opacity:.6;}
/* Active tab: filled pill behind icon + full ink + clear top line */
.tab.active{color:var(--ink);}
.tab.active .tab-svg-ico{opacity:1;}
.tab.active .tab-iwrap{
  background:var(--s3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(60,48,32,.12);
}
/* Spend tab gets a navy-tinted active state when the expense flow is staged —
   takes over the role the old dock-spend bookplate played for "spend mode." */
#tab-spend.spend-active{color:var(--navy);}
#tab-spend.spend-active .tab-svg-ico{opacity:1;color:var(--navy);}
#tab-spend.spend-active .tab-iwrap{
  background:var(--navy-a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(42,90,150,.18);
}
/* ── Center NOW dock — bookplate/stamp aesthetic ── */
.dock-now{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  width:104px;height:58px;
  border-radius:10px;
  background:linear-gradient(180deg,#d6cdbc 0%,#c8bea9 55%,#bbb09a 100%);
  border:1px solid rgba(60,48,32,.25);
  box-shadow:0 2px 5px rgba(60,48,32,.18),
             inset 0 1px 0 rgba(255,255,255,.25),
             inset 0 -1px 2px rgba(60,48,32,.08),
             inset 0 0 0 3px var(--s1),
             inset 0 0 0 4px rgba(60,48,32,.12);
  cursor:pointer;
  margin-top:-16px;margin-bottom:6px;
  position:relative;
  transition:transform 60ms ease-out,box-shadow 60ms ease-out;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
.dock-now:active{
  transform:translateY(1px);
  box-shadow:0 1px 2px rgba(60,48,32,.18),
             inset 0 1px 0 rgba(255,255,255,.15),
             inset 0 2px 4px rgba(60,48,32,.15),
             inset 0 0 0 3px var(--s1),
             inset 0 0 0 4px rgba(60,48,32,.14);
}
.dock-now[disabled]{opacity:.4;pointer-events:none;}
/* When on Schedule view, fade the Now dock slightly so the active tab is
   visibly the Schedule one. Tap Now to return to the Plan view + period 0. */
.dock-now:not(.active){opacity:.78;filter:saturate(.7);}
/* Top "AVAIL UP TO" label — static framing text, recedes after first read.
   Smaller and lighter so the eye lands on the dollar amount and the
   dynamic timeframe below it. */
.dock-now-lbl{
  font-size:7px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);
  font-family:var(--ui);line-height:1;
}
.dock-now-amt{
  font-family:var(--serif);font-style:italic;
  font-size:17px;font-weight:600;line-height:1;
  color:var(--ink);letter-spacing:-.01em;
}
.dock-now-amt.zero{color:var(--ink3);font-size:14px;font-style:normal;}
.dock-now-amt.warn{color:var(--gold);}
.dock-now-amt.bad{color:var(--red);}
/* Bottom line: "today" or "in 6 months" — the dynamic timeframe is the
   important variable here, so size up and bold to draw the eye. */
.dock-now-when{
  font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:lowercase;color:var(--ink2);
  font-family:var(--ui);line-height:1;
}
/* Away from today: subtle desaturation of the bookplate. No back-arrow —
   Now is the gravitational center, users intuit that tapping it returns home. */
.dock-now.tab-home-away{
  background:linear-gradient(180deg,#cfc6b4 0%,#c1b7a2 55%,#b4a994 100%);
  opacity:.92;
}
.dock-now.tab-home-away .dock-now-lbl{color:var(--navy);}
.tab-iwrap{padding:3px 12px;border-radius:18px;margin-bottom:3px;}
.tab-ico{font-size:18px;line-height:1;}
.tab-svg-ico{width:20px;height:20px;}
.tab-lbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:var(--ui);}
.tab.active .tab-lbl{font-weight:800;}

/* ── INCOME VIEW ── */
.inc-scroll{
  position:relative;z-index:1;
  flex:1;overflow-y:auto;min-height:0;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scroll-padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--bar-h) + 24px);
}
.inc-scroll::-webkit-scrollbar{display:none;}
#inc-list{padding-bottom:18px;}

.inc-section-hdr{
  position:sticky;top:0;z-index:10;
  background:var(--s1);
  padding:10px 18px;
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
}
#hdr-bill{top:var(--inc-hdr-h,40px);z-index:9;}
.inc-section-hdr:active{background:var(--s2);}
.inc-chev{flex-shrink:0;color:var(--ink3);transition:transform .2s;line-height:0;}
.inc-chev.collapsed{transform:rotate(-90deg);}
.inc-section-body{overflow:hidden;transition:max-height .22s cubic-bezier(.4,0,.2,1);max-height:none;}
.inc-section-body.collapsed{max-height:0;visibility:hidden;}
.inc-section-title{
  font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  color:inherit;line-height:1;font-family:inherit;
}
.inc-section-sub{
  font-family:var(--serif);font-style:italic;font-size:13px;font-weight:400;
  color:var(--ink);letter-spacing:0;text-transform:none;
}
.inc-section-count{
  font-family:var(--sans);
  font-size:inherit;color:var(--ink3);font-weight:600;
  letter-spacing:.04em;opacity:.65;
}
/* Master toggle — flips every bill and paycheck on or off in one tap so the
   user can rapidly bracket lifestyle scenarios. Three states:
     on    — every row active. Track teal, thumb right.
     off   — every row inactive. Track grey, thumb left.
     mixed — reality has drifted from the master's intent because individual
             rows were toggled. Track shows diagonal stripes (drift); thumb
             sits at the intent position so the user knows which side a tap
             will swing toward. */
.pnav-master-btn{
  width:44px;height:44px;flex-shrink:0;
  background:none;border:none;cursor:pointer;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s;
}
.pnav-master-btn:active{opacity:.6;}
.pnav-master-track{
  position:relative;display:inline-block;
  width:30px;height:14px;border-radius:8px;
  background:#8a8275;
  flex-shrink:0;
  transition:background .18s;
}
.pnav-master-thumb{
  position:absolute;top:1px;left:1px;
  width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:left .2s cubic-bezier(.4,0,.2,1);
}
.pnav-master-btn[data-state="on"] .pnav-master-track{background:var(--teal);}
#forecast-view-toggle { display:inline-flex; align-items:center; gap:7px; }
#forecast-view-toggle[aria-checked="true"] .pnav-master-track { background:var(--teal); }
#forecast-view-toggle[aria-checked="true"] .pnav-master-thumb { left:17px; }
.pnav-master-btn[data-state="on"] .pnav-master-thumb{left:17px;}
.pnav-master-btn[data-state="off"] .pnav-master-track{background:#8a8275;}
.pnav-master-btn[data-state="off"] .pnav-master-thumb{left:1px;}
.pnav-master-btn[data-state="mixed"] .pnav-master-track{
  background:repeating-linear-gradient(45deg,#a89070,#a89070 3px,#d8c0a0 3px,#d8c0a0 6px);
}
.pnav-master-btn[data-state="mixed"][data-intent="on"] .pnav-master-thumb{left:17px;}
.pnav-master-btn[data-state="mixed"][data-intent="off"] .pnav-master-thumb{left:1px;}
.hdr-add-btn{
  margin:-6px 0 -6px auto;
  background:none;border:none;
  color:#7eacc8;
  cursor:pointer;padding:10px;
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  line-height:0;
  transition:opacity .1s, transform .1s;
  flex-shrink:0;
}
.hdr-add-btn:active{opacity:.65;transform:scale(.94);}
.hdr-compact-btn{
  background:none;border:none;
  color:var(--ink3);
  cursor:pointer;padding:10px;
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  line-height:0;
  transition:color .15s,opacity .1s;
  flex-shrink:0;
}
.hdr-compact-btn svg{width:15px;height:15px;display:block;}
.hdr-compact-btn:active{opacity:.65;}
.hdr-compact-btn.on{color:var(--gold);}

/* Income card */
.inc-card{
  background:var(--bg);
  border:1px solid var(--bd2);
  border-radius:var(--r-md);
  padding:10px 14px 8px;
  margin:8px 14px 0;
  position:relative;
  box-shadow:0 2px 8px rgba(60,48,32,.09), 0 1px 2px rgba(60,48,32,.05);
}
.paycheck-card .inc-name{color:var(--teal);font-weight:800;}
.bill-card .inc-name{color:var(--red);font-weight:800;}
/* Stabilize bill-card height so the footer (and the type toggle inside it)
   doesn't jump under your finger when switching between bill / goal / debt.
   Bill & debt cards have a multi-row recurrence section, goal cards have a
   one-line preview — without this, the foot would pop ~50px on every flip. */
.bill-card{min-height:212px;display:flex;flex-direction:column;}
.bill-card .card-foot{margin-top:auto;}
.inc-card.sc-selected{outline:2px solid rgba(42,90,150,.5);outline-offset:-1px;box-shadow:0 0 0 4px rgba(42,90,150,.1),0 2px 8px rgba(60,48,32,.09);}
.inc-card.sc-flash{outline:2px solid rgba(42,90,150,.5);outline-offset:-1px;box-shadow:0 0 0 4px rgba(42,90,150,.1),0 2px 8px rgba(60,48,32,.09);transition:outline-color 2s,box-shadow 2s;}
.inc-card.sc-dimmed{opacity:.35;}
/* In selection mode, disable all inner controls */
.inc-card.sc-selected>*:not(.inc-card-header){pointer-events:none;opacity:.6;}
.inc-card.sc-dimmed>*{pointer-events:none;}
.inc-card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.inc-name-wrap{
  display:flex;align-items:center;gap:8px;flex:1;min-width:0;
  cursor:default;
}
.inc-name{
  font-size:13px;font-weight:600;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid transparent;
  outline:none;width:100%;font-family:var(--sans);
  transition:border-color .15s;padding:2px 0;
  pointer-events:auto;cursor:text;
}
@media(hover:hover){.inc-name:focus{border-bottom-color:var(--navy);}}
.inc-name:focus-visible,.modal-title-input:focus-visible,.mf-input:focus-visible,
.hdr-cash-input:focus-visible,.inc-amt-input:focus-visible,.ec-name-input:focus-visible,.ec-amt-input:focus-visible{
  outline:none;border-bottom-color:var(--navy);
}
.inc-del{
  display:flex;align-items:center;justify-content:center;gap:5px;
  width:100%;margin-top:12px;
  background:none;border:none;border-top:1px solid var(--bd);
  color:var(--ink3);cursor:pointer;
  font-size:10px;font-weight:600;letter-spacing:.06em;
  font-family:var(--sans);text-transform:uppercase;
  padding:8px 0 2px;line-height:1;
  opacity:.6;transition:opacity .1s,color .1s;
}
@media(hover:hover){.inc-del:hover{opacity:1;color:var(--red);}}
.inc-del:active{color:var(--red);opacity:1;}

/* Footer row: full-width Remove button, compact Active toggle on the right */
.card-foot{
  display:flex;align-items:center;gap:8px;
  margin-top:12px;border-top:1px solid var(--bd);
  padding-top:2px;
}
.card-foot .inc-del{
  flex:1;margin-top:0;border-top:none;padding-top:6px;
}
#view-schedule .inc-card:not(.is-collapsed) .inc-del.is-confirming{
  background:var(--red);color:#fff;opacity:1;
}
.card-active-toggle{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:6px 2px 4px;line-height:1;
  color:var(--ink3);font-size:9px;font-weight:600;
  letter-spacing:.06em;font-family:var(--sans);text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  transition:color .1s,opacity .1s;
  flex-shrink:0;
}
.cat-track{
  position:relative;display:inline-block;
  width:22px;height:12px;border-radius:7px;
  /* Off-state track is a strong neutral — light beiges like --s3 read as
     "dim" against the card background, which defeats the purpose of keeping
     the toggle full-strength. */
  background:#8a8275;
  transition:background .15s;
  flex-shrink:0;
}
.cat-thumb{
  position:absolute;top:1px;left:1px;
  width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:left .15s;
}
.card-active-toggle[aria-pressed="true"] .cat-track{background:var(--teal);}
.card-active-toggle[aria-pressed="true"] .cat-thumb{left:11px;}

/* "Piles up if missed" — deliberately a CHECKBOX, not a slide switch, so it
   never reads as (or crowds against) the footer's Active On/Off toggle. Left-
   aligned and a row above the footer to keep a fat-thumb gap from that switch.
   Checked = accruing (piles up, the normal state); unchecked = use-it-or-lose-it.
   The check glyph carries the state by shape, not colour alone (colourblind-safe). */
.bill-perish-check{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;
  padding:8px 4px;line-height:1;
  color:var(--ink2);font-size:11px;font-weight:600;
  letter-spacing:.02em;font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
}
.bpc-box{
  position:relative;flex-shrink:0;
  width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--bd2);background:transparent;
  transition:background .12s,border-color .12s;
}
.bpc-box svg{
  position:absolute;top:50%;left:50%;
  width:11px;height:11px;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .12s;
}
.bill-perish-check[aria-checked="true"] .bpc-box{background:var(--teal);border-color:var(--teal);}
.bill-perish-check[aria-checked="true"] .bpc-box svg{transform:translate(-50%,-50%) scale(1);}

/* Four-state type toggle on the bill card header — bill / goal / debt / reserve.
   Same idiom as the on/off active toggle but a 4-position track: a sliding
   thumb under four icon-only segments. The thumb tints with the type so a
   glance at the card tells you what it is, and a tap retypes it in place. */
.bill-type-toggle{
  position:relative;display:inline-flex;
  background:var(--s2);border-radius:var(--r-pill);
  padding:2px;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.bill-type-toggle::after{
  content:'';position:absolute;top:2px;bottom:2px;left:2px;
  width:calc((100% - 4px) / 4);
  background:var(--bg);border-radius:calc(var(--r-pill) - 2px);
  box-shadow:0 1px 2px rgba(0,0,0,.10);
  transition:transform .18s cubic-bezier(.4,0,.2,1),background .15s;
  pointer-events:none;z-index:0;
}
.bill-type-toggle[data-pos="0"]::after{transform:translateX(0);}
.bill-type-toggle[data-pos="1"]::after{transform:translateX(100%);background:#f7eed7;}
.bill-type-toggle[data-pos="2"]::after{transform:translateX(200%);background:#f3dad2;}
.bill-type-toggle[data-pos="3"]::after{transform:translateX(300%);background:#d7eeee;}
.bill-type-btn{
  width:22px;height:18px;padding:0;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  color:var(--ink3);opacity:.55;
  transition:color .15s,opacity .15s;
}
.bill-type-btn svg{width:11px;height:11px;display:block;}
.bill-type-btn.on{opacity:1;}
.bill-type-btn[data-type="bill"].on{color:var(--ink);}
.bill-type-btn[data-type="goal"].on{color:var(--gold);}
.bill-type-btn[data-type="debt"].on{color:var(--red);}
.bill-type-btn:active{opacity:.55;}

/* Italic intent tag — spells out what the type means in plain English so a
   glance answers "what am I doing with this?". Lives just under the header,
   color-matched to the type accent. Skipped for plain bills (no clarification
   needed — the default obligation is self-evident). */
.bill-intent-tag{
  font-family:var(--serif);font-style:italic;font-size:11px;
  letter-spacing:.01em;line-height:1;
  margin:-2px 0 8px 2px;
  display:inline-flex;align-items:center;gap:5px;
  opacity:.85;
}
.bill-intent-tag.saving{color:var(--gold);}
.bill-intent-tag.repaying{color:var(--red);}
.bill-intent-tag.holding{color:var(--teal);}
.bill-intent-tag::before{
  content:'';width:14px;height:1px;background:currentColor;opacity:.5;
}
/* Toggle stays full-strength in both states — track color + thumb position
   carry the on/off signal, so the control always reads as live. */
.card-active-toggle{opacity:1;}
.cat-lbl{min-width:16px;text-align:left;}

/* Inactive cards — visually muted but still readable/editable. Dim the card
   contents (not the card itself) so the Active toggle stays full-strength —
   it's the user's only way back, so it must always read as interactive. */
.inc-card.is-inactive{
  background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 8px,rgba(60,48,32,.04) 8px,rgba(60,48,32,.04) 16px);
}
.inc-card.is-inactive > *:not(.card-foot){opacity:.6;}
.inc-card.is-inactive .card-foot > *:not(.card-active-toggle){opacity:.6;}
.inc-card.is-inactive .inc-name,
.inc-card.is-inactive .inc-amt-val{
  text-decoration:line-through;
  text-decoration-color:rgba(60,48,32,.45);
}

/* Card summary subline — recurrence + amount, in small text under the name.
   Shown only when a card is collapsed (see .inc-card.is-collapsed). */
.inc-compact-sub{display:none;}
.inc-compact-sub .cs-freq{flex-shrink:0;}
.inc-compact-sub .cs-sep{color:var(--ink3);opacity:.55;}
.inc-compact-sub .cs-amt{
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;
  padding:1px 3px;border-radius:3px;
}
.inc-compact-sub .cs-amt:active{color:var(--navy);background:var(--navy-a);}
.cs-amt-input{
  font:600 11px/1.25 var(--ui);color:var(--ink2);
  background:transparent;border:none;border-bottom:1px solid var(--bd2);
  width:60px;padding:0;outline:none;font-variant-numeric:tabular-nums;
}
/* Tiny × delete affordance — shown on a collapsed card where the full Remove
   button is hidden. Two-tap (arms red, second tap deletes) so a stray finger
   on the toggle row doesn't blow away a real bill. */
.inc-compact-del{
  display:none;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  width:28px;height:28px;padding:0;
  font:600 18px/1 var(--ui);color:var(--ink3);
  -webkit-tap-highlight-color:transparent;flex-shrink:0;
  transition:color .12s,opacity .12s;
}
.inc-compact-del:active{color:var(--red);}
.inc-compact-del.armed{color:#fff;background:var(--red);border-radius:6px;font-size:14px;}

/* ── Card collapse ──
   A collapsed card flattens to a thin summary row: name + freq·amount subline,
   the right-edge date chip, the × delete, and the on/off switch. The header
   chevron toggles one card; the schedule's collapse-all/expand-all button is the
   same operation applied to every card. State lives in _collapsedCards (session
   only — a view preference, never persisted into a saved scenario). */
.card-collapse-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  /* Leftmost in the header: nudge toward the card edge so it lines up under the
     global collapse-all button, with a small gap before the name. */
  width:28px;height:30px;padding:0;margin:0 4px 0 -6px;flex-shrink:0;
  color:var(--ink3);-webkit-tap-highlight-color:transparent;
  transition:color .12s;
}
.card-collapse-btn svg{width:15px;height:15px;display:block;transition:transform .18s ease;}
.card-collapse-btn:active{color:var(--navy);}
.inc-card.is-collapsed .card-collapse-btn svg{transform:rotate(-90deg);}
/* Flatten the card to a single summary row. */
.inc-card.is-collapsed{
  padding:6px 12px;min-height:0;
  display:flex;flex-direction:row;align-items:center;gap:10px;
  box-shadow:0 1px 2px rgba(60,48,32,.06);
}
.inc-card.is-collapsed > *{display:none;}
.inc-card.is-collapsed > .inc-card-header{
  display:flex;flex:1;min-width:0;margin:0;
}
.inc-card.is-collapsed > .card-foot{
  display:flex;margin:0;padding:0;border-top:none;flex:0 0 auto;gap:0;
}
.inc-card.is-collapsed .inc-card-header > *:not(.inc-name-wrap):not(.card-collapse-btn){display:none;}
.inc-card.is-collapsed .card-foot > *:not(.card-active-toggle):not(.inc-compact-del){display:none;}
.inc-card.is-collapsed .inc-name-wrap{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:0;
}
.inc-card.is-collapsed .inc-name{
  pointer-events:none;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:13px;font-weight:600;border-bottom:none;padding:0;
}
.inc-card.is-collapsed .inc-compact-sub{
  display:flex;align-items:center;gap:5px;margin-top:1px;
  font:500 11px/1.25 var(--ui);color:var(--ink3);letter-spacing:.02em;flex-wrap:wrap;
}
.inc-card.is-collapsed .inc-compact-del{display:inline-flex;}
.inc-card.is-collapsed.is-inactive > *:not(.card-foot){opacity:.85;}

/* Schedule layout hooks. Static geometry belongs to CSS so desktop can
   collapse and reshape these fields without fighting inline declarations. */
.schedule-date-field{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;
}
.pnav-balance-slot{width:44px;height:44px;flex-shrink:0;}
.schedule-forecast-ledger{justify-content:center;}
.schedule-forecast-copy{font:500 12px/1 var(--sans);color:var(--ink3);}
.inc-section-copy{min-width:0;}
.inc-section-heading,.inc-section-actions{display:flex;align-items:center;}
.inc-section-heading{gap:8px;}
.inc-section-actions{gap:4px;}

/* Amount row */
.inc-amt-row{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.check-funded-row{
  display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:8px 0;
}
.check-funded-balance{
  display:flex;gap:4px;color:var(--ink2);font:600 12px/1.4 var(--ui);
}
/* Stash, Fund and Goal share one pair of balance actions. */
.check-funded-actions{display:flex;gap:6px;}
.check-put-aside,.check-take-back{padding:5px 12px;border-radius:4px;font-size:12px;font-weight:600;}
.check-put-aside{background:var(--teal);color:white;}
.check-take-back{background:var(--red-a);color:var(--red);}
.inc-field-lbl{
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);width:52px;flex-shrink:0;font-family:var(--ui);
}
.inc-amt-wrap{
  display:flex;align-items:center;gap:6px;flex:1;
}
.inc-stepper{
  background:none;border:none;color:var(--ink3);font-size:16px;
  cursor:pointer;padding:10px 12px;line-height:1;
  transition:color .15s;font-family:var(--sans);
}
.inc-stepper:active{color:var(--gold);}
.inc-amt-val{
  font-family:var(--serif);font-style:italic;font-size:22px;font-weight:400;
  color:var(--gold);cursor:text;letter-spacing:-.01em;min-width:80px;
}
.inc-amt-input{
  display:none;font-family:var(--serif);font-style:italic;
  font-size:22px;color:var(--gold);background:transparent;border:none;
  border-bottom:1.5px solid var(--gold);outline:none;width:100px;padding:1px 0;
  appearance:textfield;
  -moz-appearance:textfield;
}
.inc-amt-input::-webkit-inner-spin-button,
.inc-amt-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.inc-amt-input.editing{display:block;}
.inc-amt-val.editing{display:none;}

.inc-off-lbl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-family:var(--ui);}
.inc-off-stepper{
  background:none;border:none;color:var(--ink3);font-size:16px;
  cursor:pointer;padding:10px 12px;transition:color .15s;
}
.inc-off-stepper:active{color:var(--navy);}
.inc-off-val{
  font-size:13px;font-weight:600;color:var(--ink2);min-width:28px;text-align:center;
}
.inc-grace-input{
  width:42px;min-height:34px;padding:4px 2px;
  font:600 13px/1 var(--ui);color:var(--ink2);text-align:center;
  background:transparent;border:0;border-bottom:1px solid var(--bd2);border-radius:0;
  outline:none;appearance:textfield;-moz-appearance:textfield;cursor:text;
}
.inc-grace-input:focus{border-bottom-color:var(--teal);}
.inc-grace-input::-webkit-inner-spin-button,
.inc-grace-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.inc-grace-suffix{font-size:12px;font-weight:600;color:var(--ink3);margin-left:-2px;}

.recur-every-wrap{
  display:flex;align-items:center;gap:4px;
  opacity:1;transition:opacity .15s;
}
.recur-every-wrap.hidden{opacity:0;pointer-events:none;}

/* Bill frequency pill */
.bill-freq-group{
  display:flex;border:1px solid var(--bd2);border-radius:var(--r-pill);overflow:hidden;flex-shrink:0;
}
.bill-freq-btn{
  background:transparent;border:none;color:var(--ink3);
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:8px 11px;
  cursor:pointer;transition:all .15s;font-family:var(--sans);
}
.bill-freq-btn:active{background:var(--s2);}
.bill-freq-btn.on{background:var(--navy);color:#fff;}
.bill-freq-btn.on:active{opacity:.7;}


/* ── HORIZON PILLS ── */
.hrz-pills{
  display:flex;position:relative;
  background:var(--s2);border-radius:var(--r-pill);
  padding:2px;flex-shrink:0;
}
/* Sliding thumb — geometry is JS-measured (vars set in updateHrzStrip) because
   the pills are variable-width in paycheck mode ("Til payday" vs "2 checks"),
   so equal-thirds math no longer holds. */
.hrz-pills::after{
  content:'';position:absolute;top:2px;bottom:2px;
  left:var(--hrz-thumb-x,2px);
  width:var(--hrz-thumb-w,calc(100% / 3 - 1px));
  background:var(--navy);border-radius:calc(var(--r-pill) - 2px);
  transition:left .2s cubic-bezier(.4,0,.2,1),width .2s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:0;
}
.hrz-pill{
  background:transparent;border:none;
  font:600 11px/1 var(--ui);letter-spacing:.04em;
  color:var(--ink3);padding:6px 11px;min-height:32px;display:inline-flex;align-items:center;
  justify-content:center;white-space:nowrap;
  border-radius:calc(var(--r-pill) - 2px);
  cursor:pointer;transition:color .15s;
  position:relative;z-index:1;flex:0 0 auto;
}
.hrz-pill.on{color:#fff;}
/* Double-clicked pill — locked as default for random scenario generation */
.hrz-pill.default{color:var(--gold);font-weight:700;}
.hrz-pill.on.default{color:#ffe090;}  /* gold tint on white when also active */

/* Horizon mode toggle — sits to the RIGHT of the (primary) paycheck pills as a
   quiet text link. Shows the unit you'd switch TO: "days" while counting by
   paychecks, "checks" while counting by days. Text carries the state, so it's
   colourblind-safe. The leading middot reads as " · days". */
.hrz-left{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.hrz-mode-chip{
  flex-shrink:0;min-height:32px;padding:6px 6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  font:600 11px/1 var(--ui);letter-spacing:.04em;color:var(--ink3);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .15s,opacity .15s;
}
.hrz-mode-chip::before{content:'\00B7';margin-right:5px;color:var(--bd2);font-weight:700;}
.hrz-mode-chip:active{color:var(--ink2);}
/* No real paycheck to count → dimmed so it doesn't read as a live option.
   Still tappable (shows a toast explaining what to do). */
.hrz-mode-chip.disabled{opacity:.4;}


/* ── DATE PICKER BUTTON ── */
.date-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;
  cursor:pointer;padding:10px 12px;min-height:44px;border-radius:var(--r-pill);
  transition:background .15s;
  font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.date-btn:hover{background:var(--s3);}}
.date-btn:active{background:var(--bd2);}
.date-btn-ico{
  width:13px;height:13px;flex-shrink:0;color:var(--ink3);
}
.date-btn-txt{
  font-size:12px;font-weight:600;color:var(--ink);
  letter-spacing:.01em;
}

/* Optional recurrence end-date pill (inline on the recurrence detail row).
   Unset: faint, low-emphasis so it reads as an offer, not a set value.
   Set: navy text + chevron-less × to clear. */
.end-date-pill{display:inline-flex;align-items:center;gap:1px;flex-shrink:0;}
.end-date-pill .end-date-btn{padding:6px 8px;min-height:32px;gap:4px;}
.end-date-pill .date-btn-txt{font-size:11px;}
.end-date-pill:not(.is-set) .date-btn-ico,
.end-date-pill:not(.is-set) .date-btn-txt{color:var(--ink3);}
.end-date-pill.is-set .date-btn-txt{color:var(--navy);font-weight:700;}
.end-date-pill.is-set .date-btn-ico{color:var(--navy);}
.end-date-clear{font-size:18px;line-height:1;padding:4px 6px;}

/* ── MINI CALENDAR POPUP ── */
.mcal{
  position:fixed;
  z-index:200;
  background:var(--bg);
  border:1px solid var(--bd2);
  border-radius:var(--r-lg);
  box-shadow:0 8px 28px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
  padding:0;
  width:224px;
  display:none;
}
.mcal.open{display:block;}
.mcal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 8px;
  border-bottom:1px solid var(--bd);
}
.mcal-nav{
  background:none;border:none;color:var(--ink3);
  font-size:20px;cursor:pointer;padding:10px 12px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;line-height:1;transition:color .1s,background .1s;
}
@media(hover:hover){.mcal-nav:hover{background:var(--s3);color:var(--ink);}}
.mcal-nav:active{background:var(--s2);}
.mcal-month{
  font-family:var(--serif);font-style:italic;font-size:15px;
  font-weight:400;color:var(--ink);letter-spacing:.01em;
}
.mcal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  padding:8px 8px 10px;gap:2px;
}
.mcal-dow{
  text-align:center;font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);padding:2px 0 4px;font-family:var(--ui);
}
.mcal-day{
  text-align:center;font-size:14px;padding:8px 4px;
  border-radius:var(--r-md);cursor:pointer;color:var(--ink2);
  transition:background .1s,color .1s;border:none;background:none;
  font-family:var(--sans);
}
@media(hover:hover){.mcal-day:hover{background:var(--s3);color:var(--ink);}}
.mcal-day:active{background:var(--s2);}
.mcal-day.today{color:var(--navy);font-weight:700;}
.mcal-day.selected{background:var(--navy);color:#fff !important;}
.mcal-day.other-month{color:var(--ink3);opacity:.4;}
.mcal-day.empty{pointer-events:none;}
.mcal-day.has-goal{position:relative;}
.mcal-day.has-goal::after{
  content:'';position:absolute;left:50%;bottom:3px;
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);transform:translateX(-50%);
}
.mcal-day.has-goal.selected::after{background:#ffe090;}

/* ── INTERACTIVE HOVER HIGHLIGHTS — subtle, consistent ── */
/* Defer/transport buttons — hover only on pointer devices (prevents sticky hover on mobile) */
@media(hover:hover){
  .tr-btn:hover{
    background:rgba(42,34,24,.05);
    border-radius:5px;
  }
}
/* ── ADD MODAL ── */
.modal-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease-out;
}
.modal-backdrop.open{opacity:1;pointer-events:auto;}
.modal-sheet{
  visibility:hidden;
  position:fixed;bottom:0;left:0;right:0;z-index:101;
  background:var(--s1);
  border-top:1px solid var(--bd2);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  max-height:85dvh;
  display:flex;flex-direction:column;
}
.modal-sheet.open{transform:translateY(0);visibility:visible;}
.modal-handle{
  width:36px;height:4px;border-radius:2px;
  background:var(--bd2);margin:10px auto 0;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px 8px;border-bottom:1px solid var(--bd);
}
/* Paycheck/Bill/Goal/Debt flow collapses the header — the type toggle up
   top already identifies what we're adding. Reclaimed space goes into
   bigger tap targets on the hero amount and name input. */
.modal-sheet.no-hdr .modal-header{display:none;}
.modal-sheet.is-file-menu .modal-footer{display:none;}
.modal-title-input{
  font-family:var(--serif);font-style:italic;font-size:19px;
  font-weight:400;color:var(--ink);
  background:none;border:none;outline:none;
  padding:0;margin:0;min-width:0;flex:1;
}
.modal-title-input::placeholder{color:var(--ink);opacity:.4;}
.modal-close{
  background:none;border:none;color:var(--ink3);font-size:20px;
  cursor:pointer;padding:10px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.modal-close:active{color:var(--ink);opacity:.6;background:var(--s2);border-radius:var(--r-pill);}
.modal-body{padding:var(--sp-6) var(--modal-px) 10px;display:flex;flex-direction:column;gap:0;overflow-y:auto;flex:1;min-height:0;scroll-padding-bottom:80px;}
.modal-body::-webkit-scrollbar{display:none;}

/* Modal field rows — mirrors the inc-card aesthetic */
.mf-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--bd);flex-wrap:wrap;row-gap:6px;}
.mf-row:last-child{border-bottom:none;}
.mf-lbl{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);flex-shrink:0;width:52px;font-family:var(--ui);}
.mf-lbl-wide{width:auto;}
.mf-input{
  background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;
  padding:2px 0;font:600 13px/1 var(--sans);color:var(--ink);outline:none;
  transition:border-color .15s;flex:1;min-width:0;
  appearance:textfield;-moz-appearance:textfield;
}
.mf-input::-webkit-inner-spin-button,.mf-input::-webkit-outer-spin-button{-webkit-appearance:none;}
@media(hover:hover){.mf-input:focus{border-bottom-color:var(--navy);}}
.mf-input::placeholder{color:var(--ink3);opacity:.5;}
.modal-footer{
  display:flex;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--bd);
}
.modal-cancel{
  flex:1;padding:13px;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--bd2);
  font:600 13px/1 var(--sans);color:var(--ink3);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.modal-cancel:active{background:var(--s2);}
.modal-save{
  flex:1;padding:13px;border-radius:var(--r-pill);
  background:var(--navy);border:none;
  font:700 13px/1 var(--sans);color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.modal-save:active{background:#1a3a6c;}

/* ── GOALS SHEET ──
   The "why" view — set-asides sprinkled through cash flow, listed elegantly.
   Mirrors the bcard aesthetic: italic serif name, gold target amount, ink2 meta. */
.goals-title{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);}
.goals-body{padding:8px 0 18px;overflow-y:auto;flex:1;min-height:0;}
.goals-body::-webkit-scrollbar{display:none;}
.goal-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;border-bottom:1px solid var(--bd);
  border-left:3px solid var(--gold);
}
.goal-row:last-of-type{border-bottom:none;}
.goal-row-icon{
  width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.goal-row-icon svg{width:22px;height:22px;}
.goal-row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.goal-row-name{
  font-family:var(--serif);font-style:italic;font-size:16px;
  color:var(--ink);line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.goal-row-meta{
  font:500 11px/1.3 var(--sans);color:var(--ink2);
  letter-spacing:.01em;
}
.goal-row-meta .goal-rate{color:var(--ink3);}
.goal-row-meta .goal-tag{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--gold);letter-spacing:.005em;
}
.goal-row-meta .repaying-tag{color:var(--red);}
/* Paying Down rows: swap the gold rail for a wine-red one and recolor the
   amount so the palette shift makes the tab change feel obvious. */
.goal-row.repaying-row{border-left-color:var(--red);}
.goal-row-amt.repaying-amt,
.goals-summary-val.repaying-amt{color:var(--red);}
.goal-row-amt{
  font-family:var(--serif);font-style:italic;font-size:20px;font-weight:600;
  color:var(--gold);flex-shrink:0;letter-spacing:-.01em;
  line-height:1;
}
.goals-summary{
  padding:18px 22px 4px;display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--ui);
}
.goals-summary-lbl{
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);
}
.goals-summary-val{
  font-family:var(--serif);font-style:italic;font-size:22px;font-weight:600;
  color:var(--gold);letter-spacing:-.01em;
}
.goals-empty{
  padding:38px 28px 28px;text-align:center;
}
.goals-empty-icon{
  margin:0 auto 14px;width:42px;height:42px;opacity:.55;
}
.goals-empty-title{
  font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);
  margin-bottom:6px;
}
.goals-empty-msg{
  font:400 13px/1.4 var(--sans);color:var(--ink2);max-width:280px;margin:0 auto;
}
.goals-tagline{
  padding:6px 22px 14px;
  font:italic 400 12px/1.4 var(--serif);color:var(--ink3);
  letter-spacing:.01em;
}

/* ── TOOLS SHEET ── */
.tools-menu{display:flex;flex-direction:column;}
.tools-item{
  background:none;border:none;border-bottom:1px solid var(--bd);
  padding:16px 22px;text-align:left;
  font:600 14px/1 var(--sans);color:var(--ink);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.tools-item:last-child{border-bottom:none;}
.tools-item:active{background:var(--navy-a,rgba(36,58,92,.08));}

/* ── GOALS + WISHLIST — one view, two levels of commitment ── */
.hdr-wishlist{
  width:42px;height:42px;margin-right:12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  border:0;background:transparent;position:relative;
  transition:color .18s ease,opacity .18s ease;
}
.hdr-wishlist svg{width:19px;height:19px;display:block;}
.hdr-wishlist:active{background:transparent;opacity:.68;transform:translateY(1px);}
.hdr-wishlist.has-earned{
  color:var(--teal);border-color:transparent;background:transparent;
}
.hdr-wishlist.has-goal-alert{color:#b86b24;}
.wishlist-earned-count{
  position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);
  background:var(--gold);color:#fffdf8;font:700 10px/1 var(--sans);
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--bg);
}
.wishlist-earned-count.is-goal-alert{
  min-width:18px;padding:0;background:#e3a33a;color:#382d19;font-size:12px;
}
.wishlist-earned-count[hidden]{display:none;}
.desktop-wishlist-icon{
  display:none;position:relative;flex:0 0 34px;width:34px;height:34px;
  align-items:center;justify-content:center;color:var(--gold);
}
.desktop-wishlist-icon svg{width:20px;height:20px;display:block;}
.desktop-wishlist-icon .wishlist-earned-count{right:-3px;top:-3px;box-shadow:0 0 0 2px #e9e3d8;}
.desktop-plan-footer, .desktop-nav, .desktop-top-nav, .desktop-header-menu, .desktop-money-now, .desktop-chart-heading, .wishlist-rail {display:none;}
.desktop-period-footer{display:none;}
.desktop-period-actions, .wishlist-rail-tab, .wishlist-rail-collapse {display:none;}
.wishlist-sheet .modal-header{border-bottom:1px solid var(--bd);}
.wishlist-sheet-title,.wishlist-title{
  font-family:var(--serif);font-style:italic;color:var(--ink);
}
.wishlist-sheet-title{font-size:20px;}
.wishlist-plans-scroll{overflow-y:auto;min-height:0;flex:1;scrollbar-width:none;}
.wishlist-plans-scroll::-webkit-scrollbar{display:none;}
.wishlist-goals:empty {display:none;}
.wishlist-goals{padding:2px 14px 12px;}
.wishlist-goal-card{border-style:dashed;border-color:rgba(138,106,24,.34);background:rgba(248,245,239,.35);box-shadow:none;}
.wishlist-goal-card.is-funding-shortfall{background:#f0c98d;}
.wishlist-goal-card::before{display:none;}
.wishlist-goal-card .wish-state{color:var(--gold);background:transparent;padding:0;}
.wishlist-goal-card .wish-date{margin-top:-1px;}
.wish-goal-warning{
  grid-column:1/-1;display:flex;align-items:center;gap:7px;
  padding-top:8px;border-top:1px solid rgba(112,48,37,.28);
  color:#74352c;font:650 11px/1.35 var(--sans);
}
.wish-goal-warning-mark{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 19px;
  width:19px;height:19px;border:1.5px solid currentColor;border-radius:50%;
  background:#e3a33a;color:#382d19;font:800 13px/1 var(--sans);
}
.wishlist-goal-card .wish-action{margin-right:auto;padding-left:0;color:var(--gold);font-size:10px;letter-spacing:.01em;text-transform:none;}
.wishlist-list{display:flex;flex-direction:column;gap:10px;padding:0 14px 20px;}
.wishlist-option-group{display:flex;flex-direction:column;gap:8px;}
.wishlist-option-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 3px 1px;border-top:1px solid rgba(109,91,65,.14);}
.wishlist-option-head strong{font:600 12px/1.4 var(--sans);color:var(--ink2);}
.wishlist-option-head span{font:700 9px/1 var(--sans);color:var(--gold);white-space:nowrap;}
.wishlist-option-head-side{display:flex;align-items:center;gap:8px;}
.wishlist-deck-nav{display:none;align-items:center;gap:5px;}
.wishlist-deck-nav button{width:28px;height:28px;border-radius:50%;color:var(--ink2);font:600 20px/1 var(--serif);}
.wishlist-deck-nav button:disabled{opacity:.25;cursor:default;}
.wishlist-deck-nav button:not(:disabled):active{background:rgba(109,91,65,.09);}
/* Mobile deck dots for wishlist options */
.wishlist-deck-dots{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 0 0;min-height:18px;}
.wishlist-deck-dot{width:6px;height:6px;border-radius:50%;background:rgba(138,106,24,.25);transition:background .2s,transform .2s;}
.wishlist-deck-dot.active{background:var(--gold);transform:scale(1.3);}
@media(min-width:1200px){

  .wishlist-deck-dots{display:none;}
}
.wishlist-option-deck{position:relative;min-width:0;}
.wishlist-option-deck.has-options{padding:0 7px 8px 0;}
.wishlist-option-deck.has-options::before,.wishlist-option-deck.has-options::after{
  content:'';position:absolute;border:1px solid rgba(109,91,65,.10);border-radius:var(--r-lg);background:rgba(228,221,208,.48);pointer-events:none;
}
.wishlist-option-deck.has-options::before{inset:5px 2px 3px 5px;transform:rotate(.45deg);}
.wishlist-option-deck.has-options::after{inset:3px 4px 5px 3px;transform:rotate(-.25deg);}
.wishlist-option-track{position:relative;z-index:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;}
.wishlist-option-track::-webkit-scrollbar{display:none;}
.wishlist-option-track>.wishlist-card{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;}
.wishlist-unreachable-list{display:flex;flex-direction:column;gap:8px;}
.wishlist-option-group.is-multiple .wish-date{display:none;}
.wishlist-option-group.is-multiple .wishlist-goal-card .wish-date{display:grid;}
@media(min-width:1200px){.wishlist-deck-nav{display:flex;}}
.wishlist-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;
  padding:15px 16px 14px 19px;border:1px solid rgba(109,91,65,.12);border-radius:var(--r-lg);
  background:rgba(245,239,228,.58);
  box-shadow:0 2px 7px rgba(60,48,32,.035);
}
.wish-period-cue{display:none;}
.wishlist-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;opacity:.55;
  background:repeating-linear-gradient(to bottom,var(--gold) 0 8px,transparent 8px 12px);
}
.wishlist-card[data-state="earned"]::before{background:var(--teal);}
.wishlist-card[data-state="locked"]::before{background:repeating-linear-gradient(to bottom,var(--ink3) 0 5px,transparent 5px 10px);opacity:.55;}
/* Every wish stays a complete, readable row. Earned is already communicated
   by the teal edge, state pill, and gauge; overlapping cards or repeating a
   gold badge turns a useful list into visual noise. */
.wishlist-card.is-actionable{cursor:pointer;}
.wishlist-card.is-actionable:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
@media(hover:hover){.wishlist-card.is-actionable:hover{background:rgba(248,245,239,.72);}}
.wish-main{min-width:0;}
.wish-name{font:italic 600 17px/1.15 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wish-state{
  display:inline-flex;align-items:center;margin-top:6px;padding:3px 7px;border-radius:var(--r-pill);
  font:800 8px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);background:rgba(138,106,24,.11);
}
.wishlist-card[data-state="earned"] .wish-state{color:var(--teal);background:var(--teal-a);}
.wishlist-card[data-state="locked"] .wish-state{color:var(--ink3);background:rgba(90,80,65,.08);}
.wish-amount{font:italic 600 20px/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;}
.wish-date{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 10px;}
.wish-date-label{grid-column:1/-1;font:500 10px/1.2 var(--sans);color:var(--ink3);}
.wish-date-main{font:600 13px/1.2 var(--sans);color:var(--ink2);}
.wish-goal-date{appearance:none;background:none;border:0;padding:6px 0;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;}
.wish-goal-date:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
@media(hover:hover){.wish-goal-date:hover{text-decoration-style:solid;color:var(--ink);}}
.wish-away{font:500 11px/1.2 var(--sans);color:var(--ink3);white-space:nowrap;}
.wish-gauge-bar{grid-column:1/-1;height:3px;margin-top:1px;border-radius:2px;background:rgba(60,48,32,.1);overflow:hidden;}
.wish-gauge-fill{display:block;height:100%;border-radius:inherit;background:var(--gold);transition:width .3s ease;}
.wishlist-card[data-state="earned"] .wish-gauge-fill{background:var(--teal);}
.wishlist-card[data-state="locked"] .wish-gauge-fill{background:var(--ink3);opacity:.5;}
.wish-shift{grid-column:1/-1;font:italic 500 11px/1.3 var(--serif);color:var(--navy);}
.wish-fit{grid-column:1/-1;padding-top:7px;border-top:1px solid rgba(109,91,65,.11);font:500 10px/1.4 var(--sans);color:var(--ink3);}
.wish-fit-label{display:block;margin-bottom:3px;font:700 9px/1 var(--sans);color:var(--ink2);}
.wish-fit strong{font:700 11px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;}
.wish-fit-plus{padding:0 3px;color:var(--gold);font-weight:800;}
.wish-actions{grid-column:1/-1;display:flex;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;margin-top:1px;}
.wish-decision-actions,.wish-maintenance-actions{display:flex;align-items:center;gap:3px;}
.wish-action{padding:5px 7px;font:700 9px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.wish-action.wish-commit{margin-right:auto;padding-left:0;color:var(--gold);font-size:10px;letter-spacing:.01em;text-transform:none;}
.wish-action:active{color:var(--ink);}
.wish-action.remove:active{color:var(--red);}
@media(max-width:759px){
  .wishlist-list{gap:8px;padding-left:12px;padding-right:12px;}
  .wishlist-card{gap:6px 10px;padding:12px 14px 11px 17px;}
  .wish-state{margin-top:4px;}
  .wishlist-card[data-state="earned"] .wish-gauge-bar{display:none;}
  .wish-actions{margin-top:0;}
}
.wishlist-empty{padding:28px 20px 32px;text-align:center;color:var(--ink2);}
.wishlist-empty-mark{
  width:48px;height:48px;margin:0 auto 12px;border:1px dashed var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);font:italic 600 26px/1 var(--serif);
}
.wishlist-empty strong{display:block;font:italic 600 16px/1.2 var(--serif);color:var(--ink);margin-bottom:5px;}
.wishlist-empty span{display:block;font:400 12px/1.4 var(--sans);max-width:260px;margin:0 auto;}

/* Slippage decoder — the crochet stitches, spelled out as a list */
.slippage-sheet .modal-title{font:600 19px/1.3 var(--sans);}
.slippage-sheet .modal-header{padding:14px 18px 8px;}
.slippage-stats{
  margin:0 18px 8px;padding:8px 0;border-radius:0;
  background:transparent;border-bottom:1px solid rgba(60,48,32,.12);
  font:500 12px/1.5 var(--sans);color:var(--ink2);
}
.slippage-stats strong{font:600 12px/1.5 var(--sans);color:var(--ink);}
.slippage-list{display:flex;flex-direction:column;gap:0;padding:0 18px 14px;}
.slippage-row{
  padding:10px 0;border-radius:0;border-bottom:1px solid rgba(60,48,32,.12);
  background:transparent;box-shadow:none;
}
.slip-group-summary{position:relative;display:block;padding-right:18px;list-style:none;cursor:pointer;}
.slip-group-summary::-webkit-details-marker{display:none;}
.slip-group-summary::after{content:'›';position:absolute;right:0;top:50%;font:600 18px/1 var(--sans);color:var(--ink3);transform:translateY(-50%) rotate(0deg);transition:transform .16s ease;}
.slippage-row[open] .slip-group-summary::after{transform:translateY(-50%) rotate(90deg);}
.slip-main{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.slip-name{font:600 13px/1.4 var(--sans);color:var(--ink);}
.slip-amt{font:600 13px/1 var(--sans);color:var(--ink2);font-variant-numeric:tabular-nums;}
.slip-group-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:3px;font:500 11px/1.3 var(--sans);color:var(--ink3);}
.slip-days{font:700 11px/1 var(--sans);color:var(--red);}
.slippage-row.early .slip-days{color:var(--teal);}
.slip-occurrences{display:grid;gap:0;margin-top:6px;border-top:1px solid rgba(60,48,32,.10);}
.slip-occurrence{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid rgba(60,48,32,.07);font:550 11px/1.35 var(--sans);color:var(--ink2);}
.slip-occurrence:last-child{border-bottom:0;padding-bottom:0;}
.slip-route{display:flex;min-width:0;align-items:baseline;gap:6px;flex-wrap:wrap;}
.slip-arrow{color:var(--ink3);}
.slip-occ-amt{font-variant-numeric:tabular-nums;color:var(--ink2);}
.slip-occ-days{font-weight:700;color:var(--red);white-space:nowrap;}
/* Always-present "add a wish" card — replaces the old header + button (and
   the mobile sheet's separate bottom button) so there's one obvious,
   permanent way in, no matter how many wishes have already stacked up. */
:is(#wishlist-sheet,#wishlist-rail) .wishlist-placeholder:active{
  background-color:rgba(83,70,49,.04);box-shadow:none;
}
:is(#wishlist-sheet,#wishlist-rail) .wishlist-placeholder:focus-visible{
  outline:2px solid var(--blue,#456b91);outline-offset:3px;
}
.desktop-compact-status{display:none;}
.wishlist-editor{display:none;padding:14px 18px 18px;border-bottom:1px solid var(--bd);background:rgba(228,221,208,.5);}
.wishlist-editor.open{display:block;}
.wishlist-editor-row{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px;}
.wishlist-inline-editor{display:block;}
:is(.wishlist-editor,.wishlist-inline-editor) label{display:flex;flex-direction:column;gap:5px;font:700 9px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);}
:is(.wishlist-editor,.wishlist-inline-editor) input{width:100%;padding:8px 2px 6px;border:none;border-bottom:1px solid var(--bd2);background:transparent;color:var(--ink);font:600 15px/1 var(--sans);outline:none;}
:is(.wishlist-editor,.wishlist-inline-editor) input[type="number"]{font:italic 600 18px/1 var(--serif);text-align:right;appearance:textfield;-moz-appearance:textfield;}
:is(.wishlist-editor,.wishlist-inline-editor) input::-webkit-inner-spin-button{display:none;}
.wish-amount-control{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;border-bottom:1px solid var(--bd2);}
.wish-amount-control input[type="number"]{border-bottom:none;text-align:center;min-width:0;}
.wish-step{height:38px;color:var(--gold);font:600 20px/1 var(--serif);border-radius:50%;}
.wish-step:active{background:rgba(138,106,24,.09);}
.wishlist-editor-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:13px;}
.wishlist-editor-buttons button{padding:9px 13px;border-radius:var(--r-pill);font:700 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;}
.wishlist-editor-cancel{border:1px solid var(--bd2);color:var(--ink3);}
.wishlist-editor-save{background:var(--gold);color:#fff;}
/* Desktop shared ledger header — hide on mobile/tablet */
.desktop-shared-ledger{display:none;}

/* Tablet gets a contained workspace without pretending it is a desktop. */
@media(min-width:760px) and (max-width:1199px){
  body{background:var(--s2);}
  .app{max-width:900px;margin:0 auto;background:var(--bg);box-shadow:0 0 28px rgba(60,48,32,.18);}
  .cards-area{max-width:760px;width:100%;margin:0 auto;}
}

/* ── VIEWS ── */
/* View stack: both views always laid out, swap via visibility — no relayout cost on tab change */
.view-stack{flex:1;position:relative;min-height:0;overflow:hidden;}
#desktop-forecast-stage{display:none;}
.mobile-forecast-summary{display:none;}
.view{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;min-height:0;
     visibility:hidden;pointer-events:none;}
.view.active{visibility:visible;pointer-events:auto;}
/* Open drawers explicitly restore visibility; keep them inside their own view. */
.view:not(.active) .rollup-body.open{visibility:hidden;}
#view-schedule{overflow:hidden;}
.desktop-period-head{display:none;}
#mobile-plan-range{display:none;}

/* ── DEPTH & SHADOW LAYER ──
   Warm, minimal shadows — adds z-axis without fighting the parchment tone.
*/

/* App header casts downward onto everything below */
.app-header {
  box-shadow: 0 3px 16px rgba(60,48,32,.22), 0 1px 0 rgba(60,48,32,.12);
  position: relative; z-index: 10;
}

/* Period nav bar — floating shelf above the scrolling bill list */
.pnav-bar {
  box-shadow: 0 3px 12px rgba(60,48,32,.18), 0 1px 0 rgba(60,48,32,.1);
  position: relative; z-index: 5;
}


/* Sticky section headers in schedule view (already z-index:10) */
.inc-section-hdr {
  box-shadow: 0 3px 12px rgba(60,48,32,.18), 0 1px 0 rgba(60,48,32,.1);
}

/* Rollup/drawer headers inside pay periods — tight concentrated shadow
   so the tabs read as a stack of pages you could flip through with your
   thumb. Tighter/darker than .inc-section-hdr because the gap below is
   only a few pixels. */
.rollup-tab {
  box-shadow: 0 2px 5px rgba(60,48,32,.24), 0 1px 0 rgba(60,48,32,.14);
}

/* Stats strip and tab bar float above the view from below */
.stats-strip {
  box-shadow: 0 -4px 18px rgba(60,48,32,.18), 0 -1px 0 rgba(60,48,32,.1);
  position: relative; z-index: 8;
}
.tabbar {
  box-shadow: 0 -3px 14px rgba(60,48,32,.18), 0 -1px 0 rgba(60,48,32,.1);
  position: relative; z-index: 9;
}

/* ── CROCHET TENSION DIAGRAM ── */
.crochet-bar {
  flex-shrink: 0; height: 22px;
  background: var(--s1);
  border-bottom: 1px solid var(--bd);
  display: block;
  position: relative; z-index: 11;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.crochet-bar:focus-visible{outline:2px solid rgba(100,168,228,.75);outline-offset:-2px;}
#croch-svg { display: block; width: 100%; height: 22px; overflow: visible; }

/* Desktop pointer: show thin scrollbars */
@media(pointer:fine){
  .sw-content,.inc-scroll,.modal-body{
    scrollbar-width:thin;scrollbar-color:var(--s3) transparent;
  }
  .sw-content::-webkit-scrollbar,.inc-scroll::-webkit-scrollbar,.modal-body::-webkit-scrollbar{display:block;width:6px;}
  .sw-content::-webkit-scrollbar-thumb,.inc-scroll::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px;}
}

/* The period ledger's fold is a phone affordance only — desktop shows all four
   rows at once and never renders the control. mobile.css opts back in. */
.period-ledger-toggle{display:none;}

.mobile-calendar-date, .period-mobile-title, .mobile-period-home { display: none; }

.mobile-check-amount, .mobile-check-description, .mobile-check-label { display: none; }

/* Center the complete date range as one naturally sized label. */
.pname-date { display: flex; justify-content: center; gap: 6px; align-items: center; width: 100%; }
.period-range-start { text-align: right; }
.period-range-separator { text-align: center; }
.period-range-end { text-align: left; }

/* Scheduling confirmation belongs to the same paper desk as the plan. */
.plan-confirm-dialog { box-sizing: border-box; width: min(440px,calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 26px; overflow: auto; border: 1px solid var(--bd2); border-radius: 9px; background: var(--paper-hi); color: var(--ink); box-shadow: 0 12px 40px rgba(43,36,26,.2); }
.plan-confirm-dialog::backdrop { background: rgba(43,36,26,.36); }
.goal-contribution-period { display: flex; align-items:center; justify-content:space-between; gap:12px; width: 100%; min-height: 44px; padding: 6px 2px; text-align: left; font: 500 13px/1.4 var(--sans); color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--bd2); cursor: pointer; }
.goal-contribution-period:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .goal-contribution-period:hover { text-decoration: underline; } }
.plan-confirm-dialog h2 { margin: 0 0 14px; font: 600 30px/1.15 'Caveat',cursive; }
.plan-confirm-dialog p { margin: 0 0 12px; font: 500 14px/1.55 var(--sans); }
.plan-confirm-dialog .plan-confirm-note { color: var(--ink2); font-size: 12px; }
:is(#actual-payment-dialog,#put-aside-amount-dialog) { width:min(288px,calc(100% - 32px)); padding:18px 20px; border:1px solid var(--rule); border-radius:16px; background:#fafaf8; box-shadow:0 12px 36px rgba(24,30,27,.18); }
:is(#actual-payment-dialog,#put-aside-amount-dialog)::backdrop { background:rgba(24,30,27,.25); }
:is(#actual-payment-dialog,#put-aside-amount-dialog) h2 { margin:0 0 4px; font:600 19px/1.25 var(--serif); }
:is(#actual-payment-dialog,#put-aside-amount-dialog) .payment-name { margin:0 0 14px; color:var(--ink2); font:500 12px/1.4 var(--sans); overflow-wrap:anywhere; }
:is(#actual-payment-dialog,#put-aside-amount-dialog) label { display:grid; gap:3px; color:var(--ink2); font:500 11px/1.4 var(--sans); }
:is(#actual-payment-dialog,#put-aside-amount-dialog) input { min-width:0; width:100%; box-sizing:border-box; padding:5px 0; border:0; border-bottom:1px solid var(--rule-3); border-radius:0; background:transparent; color:var(--ink); font:500 24px/1.3 var(--serif); appearance:textfield; -moz-appearance:textfield; }
:is(#actual-payment-dialog,#put-aside-amount-dialog) input::-webkit-inner-spin-button,
:is(#actual-payment-dialog,#put-aside-amount-dialog) input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
:is(#actual-payment-dialog,#put-aside-amount-dialog) input:focus { outline:none; border-bottom-color:var(--navy); box-shadow:0 1px 0 var(--navy); }
:is(#actual-payment-dialog,#put-aside-amount-dialog) .payment-error { margin:8px 0 0; font:500 12px/1.4 var(--sans); }
:is(#actual-payment-dialog,#put-aside-amount-dialog) .payment-error:empty { display:none; }
:is(#actual-payment-dialog,#put-aside-amount-dialog) .plan-confirm-actions { margin-top:16px; gap:8px; }
:is(#actual-payment-dialog,#put-aside-amount-dialog) .plan-confirm-actions button { min-height:34px; padding:6px 12px; border-radius:8px; font:600 12px/1.3 var(--sans); }
:is(#actual-payment-dialog,#put-aside-amount-dialog) .plan-confirm-cancel { border-color:transparent; }
@media (pointer:coarse) { :is(#actual-payment-dialog,#put-aside-amount-dialog) .plan-confirm-actions button { min-height:44px; } }
/* Put aside reads like the card it came from: parchment paper, the card's
   name and caption type, and an amount set like a card balance. */
#put-aside-amount-dialog { width:min(300px,calc(100% - 32px)); padding:18px 20px 16px; border-color:var(--bd2); border-radius:9px; background:var(--paper-hi); }
#put-aside-amount-dialog .put-aside-title { margin:0 0 2px; font:500 17px/1.3 var(--serif); overflow-wrap:anywhere; }
#put-aside-amount-dialog .payment-name { margin:0 0 14px; font:500 11px/1.4 var(--sans); }
#put-aside-amount-dialog .put-aside-field { gap:4px; color:var(--ink3); font:500 10.5px/1.3 var(--sans); }
#put-aside-amount-dialog .put-aside-entry { display:flex; align-items:baseline; gap:3px; border-bottom:1px solid var(--rule-3); color:var(--ink2); font:italic 600 18px/1.3 var(--serif); }
#put-aside-amount-dialog .put-aside-entry:focus-within { border-bottom-color:var(--navy); box-shadow:0 1px 0 var(--navy); }
#put-aside-amount-dialog input { padding:3px 0; border:0; font:italic 600 18px/1.3 var(--serif); font-variant-numeric:tabular-nums; }
#put-aside-amount-dialog input:focus { border:0; box-shadow:none; }
#put-aside-amount-dialog input::placeholder { color:var(--ink3); }
#put-aside-amount-dialog .put-aside-hint { margin:6px 0 0; color:var(--ink2); font:400 11px/1.4 var(--sans); }
#put-aside-amount-dialog .plan-confirm-actions { margin-top:14px; }
#put-aside-amount-dialog .plan-confirm-actions button { border-radius:4px; }
#put-aside-amount-dialog .plan-confirm-actions .plan-confirm-accept { background:var(--teal); border-color:var(--teal); color:white; }
@media (hover:hover) {
  :is(#actual-payment-dialog,#put-aside-amount-dialog) .plan-confirm-cancel:hover { background:var(--sheet-hi); color:var(--ink); }
  :is(#actual-payment-dialog,#put-aside-amount-dialog) .plan-confirm-accept:hover { filter:brightness(.94); }
}
.plan-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.plan-confirm-actions button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--bd2); border-radius: 6px; font: 650 13px/1.3 var(--sans); cursor: pointer; }
.plan-confirm-cancel { background: transparent; color: var(--ink2); }
.plan-confirm-actions .plan-confirm-accept { background: var(--green-dp); color: var(--paper-hi); border-color: var(--green-dp); }
.plan-confirm-actions button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* Disclosure glyphs support the heading instead of competing with it. */
.hdr-compact-btn > svg { opacity: .55; }
.hdr-compact-btn > svg :is(line,polyline) { stroke-width: 1.35; }

/* Shared paper and fabric materials for both responsive shells. */
:root {
  --cloth-weave: repeating-linear-gradient(0deg,rgba(62,48,32,.04) 0 1px,transparent 1px 3px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(62,48,32,.025) 1px 2px,transparent 2px 4px);
  --agenda-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23584d3c' opacity='.045' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}

/* Selected money steps slightly toward the viewer; its cast stays on the paper. */
.chart-selected-bar,
.chart-selection-pointer { transform: translate(1px, 2px); }

@keyframes chart-pointer-wiggle {
  0%, 100% { transform:translate(1px,2px); }
  25% { transform:translate(-2px,0); }
  50% { transform:translate(3px,2px); }
  75% { transform:translate(-1px,1px); }
}
.chart-selection-pointer { animation:chart-pointer-wiggle .55s ease-out; }
@media (prefers-reduced-motion:reduce) {
  .chart-selection-pointer { animation:none; }
}

/* Hover readouts can clear the annotation stack above a tall column. */
#sch-chart, #chart { overflow: visible; }

/* Optional affordability detail stays compact until requested. */
.wish-fit > summary { width: fit-content; padding: 5px 0; cursor: pointer; color: var(--ink2); font: 500 11px/1.4 var(--sans); }
.wish-fit > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.wish-fit-detail { padding: 3px 0 5px; }



/* Reward tickets: a short paper body and a perforated action stub. */
:is(#wishlist-sheet,#wishlist-rail) .wishlist-card.is-ticket {
  --ticket-paper: #e9dfc4;
  position: relative; isolation: isolate; background: transparent; border: 0;
  border-radius: 2px; box-shadow: none; padding: 12px 16px 8px;
  gap: 5px 10px; min-height: 0; align-content: start; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(60,46,25,.18)) drop-shadow(0 3px 2px rgba(60,46,25,.10));
}
:is(#wishlist-sheet,#wishlist-rail) .wishlist-card.is-ticket[data-state="earned"] { --ticket-paper: #e5e9dc; }
:is(#wishlist-sheet,#wishlist-rail) .wishlist-card.is-ticket::after {
  content: ''; position: absolute; inset: 7px; z-index: -1;
  border: 3px double rgba(83,67,40,.42); border-radius: 3px;
  pointer-events: none;
}
:is(#wishlist-sheet,#wishlist-rail) .wishlist-card.is-ticket.is-funding-shortfall { --ticket-paper: #ecddc8; }
:is(#wishlist-sheet,#wishlist-rail) .wishlist-card.is-ticket::before {
  content: ''; display: block; position: absolute; inset: 0; width: auto; z-index: -1;
  opacity: 1; border-radius: 2px; background-color: var(--ticket-paper); background-image: var(--agenda-grain);
  border: 1px solid rgba(83,67,40,.28); box-shadow: inset 0 0 0 4px rgba(255,252,240,.25);
}
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-main { padding: 0; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-name { font-size: 18px; line-height: 1.2; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-state { padding: 0; background: transparent; font-size: 10px; line-height: 14px; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-amount { font-size: 20px; padding: 0 0 0 10px; align-self: start; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-date { display: block; padding: 0; border: 0; margin: 0; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket :is(.wish-date-label,.wish-away) { display: none; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-date-main { font: 500 12px/18px var(--sans); }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-fit { margin: 0; font-size: 11px; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-fit > summary { padding: 3px 0; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-actions { border-top: 1px dashed rgba(83,67,40,.34); padding-top: 5px; margin: 5px 0 0; min-height: 30px; align-items: center; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket .wish-action { min-height: 28px; padding-block: 3px; font-size: 11px; }
:is(#wishlist-sheet,#wishlist-rail) .is-ticket:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* Quiet, directly selectable ticket pages replace the arrow/count strip. */
:is(#wishlist-sheet,#wishlist-rail) .wishlist-deck-dots { justify-content: center; gap: 0; }
:is(#wishlist-sheet,#wishlist-rail) .wishlist-deck-dot { appearance: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
:is(#wishlist-sheet,#wishlist-rail) .wishlist-deck-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .25; }
:is(#wishlist-sheet,#wishlist-rail) .wishlist-deck-dot.active::before { opacity: 1; }
:is(#wishlist-sheet,#wishlist-rail) .wishlist-deck-dot:focus-visible { outline: 2px solid var(--navy); outline-offset: -3px; }

.period-upcoming-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 7px; border-radius: var(--r-pill); background: rgba(138,106,24,.11); color: var(--gold); font: 600 10px/1.2 var(--sans); white-space: nowrap; }
@media (max-width: 1199px) { .period-upcoming-badge { margin-left: 0; } }

/* Open groups become quiet headings; the obligations below carry the emphasis. */
#view-plan .rollup-tab[aria-expanded="true"] :is(.rollup-tab-lbl,.rollup-tab-detail,.rollup-tab-amt,.rollup-chev,.rollup-env) { color: #777168; }

/* One floating return control: never participates in the money/header layout. */
#chart-section-plan { position: relative; }
#chart-section-plan > #plan-preview-today { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 3; box-sizing: border-box; min-height: 28px; padding: 3px 12px; border-radius: 999px; background-color: #dcebf6; border: 1px solid rgba(74,58,38,.22); color: #235273; font: 600 12px/1.4 var(--sans); box-shadow: none; }
#chart-section-plan > #plan-preview-today::after { content: ''; position: absolute; inset: -8px 0; }
#chart-section-plan > #plan-preview-today:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
@media (hover: hover) { #chart-section-plan > #plan-preview-today:hover { background-color: #cbdfee; text-decoration: none; } }
#chart-section-plan > #plan-preview-today::before { content: '‹'; font: 500 17px/12px var(--sans); margin: 0; }
#chart-section-plan > #plan-preview-today[hidden] { display: none; }

.ynab-import-review { margin: 12px 0; padding-left: 20px; color: var(--ink2); font: 400 12px/1.5 var(--sans); }
.ynab-import-review li { margin-bottom: 6px; }
/* Read-only provider status and review use the existing paper/modal surfaces. */
.ynab-source-status { display:block; border:0; background:transparent; color:var(--ink3); font:11px/1.4 var(--sans); padding:0; cursor:pointer; }
.ynab-source-status[hidden] { display:none; }
.ynab-link-review { padding-left:20px; font:13px/1.5 var(--sans); }
.ynab-link-review li { padding:8px 0; border-bottom:1px solid var(--line); }
@media (hover:hover) { .ynab-source-status:hover { text-decoration:underline; } }
.fund-level { display:inline-flex; flex:0 0 16px; width:16px; height:16px; align-items:center; vertical-align:middle; background:transparent; }
.fund-level svg { display:block; width:16px; height:16px; overflow:visible; }
.fund-level-fill { fill:#777; fill-opacity:.22; }
.fund-level-outline { fill:none; stroke:#737373; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.ynab-mode-row { display:flex; align-items:center; gap:10px; }
.funding-review { clear:both; padding:10px 0; }
.funding-review label { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font:12px/1.5 var(--sans); }
.funding-review input { min-height:32px; padding:4px; }
.funding-review select {
  min-width:0; max-width:100%; min-height:36px; box-sizing:border-box;
  padding:6px 26px 6px 4px; border:0; border-bottom:1px solid var(--rule-3);
  border-radius:0; color:var(--ink); font:500 12px/1.4 var(--sans);
  appearance:none; cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%236d685f' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 6px center;
}
.funding-review select:focus-visible { outline:0; border-bottom:2px solid var(--row-focus); }
@media (hover:hover) {
  .funding-review select:hover { background-color:var(--sheet-hi); border-bottom-color:var(--ink2); }
}
.funding-review button { display:block; min-height:36px; margin-top:8px; }

/* The menu groups choices, rather than stacking full-width form rows. */
#tools-sheet .tools-item { min-width:0; padding:8px 12px; line-height:1.3; }
#tools-sheet .record-help { margin:0 12px 3px; font:400 11px/1.4 var(--sans); color:var(--ink2); }
#tools-sheet .tools-item:focus-visible { outline:none; background:rgba(60,60,60,.06); text-decoration:underline; text-underline-offset:3px; }
.record-fields [hidden] { display:none !important; }

/* Mobile relies on the OS launch screen; retain only a plain hydration cover. */
@media(max-width:1199px){
  .boot-splash{transition:none;}
  .boot-splash-lockup{display:none;}
}

.period-payday-text { margin-left:auto; text-align:right; color:var(--ink2); font:500 11px/1.2 var(--sans); white-space:nowrap; }

.funding-limit-mark { display:inline-flex; align-items:center; margin-right:7px; color:#a6a39e; vertical-align:middle; }

.goal-contributions-link { border:0; background:none; padding:4px 0; color:var(--ink2); font:12px/1.4 var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.goal-contributions-link:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

/* A deadline reminder has its own layout, independent of bill/installment grids. */
#view-plan .sw-content .rollup-body .bcard.goal-due-card {
  display:grid; grid-template-columns:minmax(0,1fr) max-content;
  grid-template-rows:auto auto; gap:5px 12px;
  height:auto; min-height:0; max-height:none; padding:10px 12px; margin-block:8px;
  border:2px dotted color-mix(in srgb,var(--ink2) 65%,transparent); border-left:3px solid var(--ink2); background:transparent;
  border-radius:0; box-sizing:border-box;
}
.goal-due-title { grid-column:1; grid-row:1; min-width:0; overflow-wrap:anywhere; font:600 16px/1.3 var(--serif); color:var(--ink); }
.goal-due-amount { grid-column:2; grid-row:1; justify-self:end; text-align:right; white-space:nowrap; font:600 16px/1.3 var(--serif); color:var(--ink); font-variant-numeric:tabular-nums; }
.goal-due-detail { grid-column:1; grid-row:2; min-width:0; align-self:baseline; font:11px/1.4 var(--sans); color:var(--ink2); }
.goal-due-actions { grid-column:2; grid-row:2; min-width:0; justify-self:end; align-self:baseline; }
.goal-due-actions .goal-contributions-link { display:block; margin:0; padding:2px 0; max-width:100%; white-space:nowrap; text-align:right; }

.goal-contributions-dialog { width:min(340px,calc(100% - 32px)); padding:18px; }
.goal-contributions-dialog h2 { margin:0 0 8px; font:600 21px/1.2 var(--serif); }
.goal-contributions-dialog p { margin:0 0 10px; font:400 12px/1.4 var(--sans); color:var(--ink2); }
.goal-contributions-dialog .goal-contributions-title { padding-right:28px; overflow-wrap:anywhere; }
.goal-contributions-close { position:absolute; top:6px; right:6px; width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:var(--ink2); font:400 22px/1 var(--sans); cursor:pointer; }
.goal-contributions-close:focus-visible { outline:1px solid var(--bd2); outline-offset:-4px; border-radius:4px; }
@media(max-width:1199px) { .goal-contributions-close { top:2px; right:2px; width:44px; height:44px; } }
.goal-contribution-list { max-height:240px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.goal-contributions-dialog { scrollbar-width:none; }
.goal-contribution-list::-webkit-scrollbar,
.goal-contributions-dialog::-webkit-scrollbar { display:none; width:0; height:0; }
.goal-contributions-dialog .goal-contribution-period { padding:10px 8px; text-decoration:none; }
.goal-contributions-dialog .goal-contribution-period:last-child { border-bottom:0; }
.goal-contributions-dialog .goal-contribution-period:focus-visible { outline:none; background:var(--sheet-hi); box-shadow:inset 0 0 0 1px var(--ink2); }
@media (hover:hover) { .goal-contributions-dialog .goal-contribution-period:hover { text-decoration:none; background:var(--sheet-hi); } }
.goal-contribution-amount { font-variant-numeric:tabular-nums; white-space:nowrap; }
.period-savings-dialog { width:min(380px,calc(100% - 32px)); }
.padding-explanation-dialog p { padding-right:28px; }
.period-savings-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; font:500 13px/1.4 var(--sans); }
.period-savings-row > span:first-child { min-width:0; overflow-wrap:anywhere; }
.period-savings-row small { display:block; color:var(--ink2); font:400 11px/1.4 var(--sans); }
.period-savings-row.is-total { border-top:1px solid var(--bd2); margin-top:6px; font-weight:700; }

/* Wishlist creation uses the same quiet paper and ink as its cards. */


:is(#wishlist-sheet,#wishlist-rail) .wishlist-placeholder {
  display: flex; align-items: center; cursor: pointer; border-radius: 4px; letter-spacing: 0; text-transform: none;
  justify-content: center; width: 100%; align-self: stretch; justify-self: stretch; min-height: 44px; padding: 8px 12px;
  color: var(--ink); background-color: var(--sheet-hi);
  box-shadow: 0 1px 2px rgba(42,34,24,.12);
  border: 1px solid var(--rule-3); font: 600 13px/1.4 var(--sans); text-align: center;
}
@media (hover:hover) {
  :is(#wishlist-sheet,#wishlist-rail) .wishlist-placeholder:hover { background-color: var(--sheet-hi); border-color: var(--rule-3); filter: none; }
}
.wishlist-create-card { padding: 14px; border: 1px solid rgba(68,58,44,.2); border-radius: 4px; background-color: var(--sheet-hi); }

/* Agenda capture: one ruled checklist row; forms only appear on explicit entry. */
#view-plan .agenda-entry { border-bottom:1px solid var(--rule); min-width:0; }
#view-plan .agenda-entry-prompt { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 10px; border:0; border-radius:0; background:transparent; color:var(--ink2); text-align:left; font:400 13px/1.4 var(--sans); cursor:pointer; }
#view-plan .agenda-entry-box { display:block; box-sizing:border-box; width:18px; height:18px; border:1px solid var(--ink3); border-radius:4px; margin:0 calc((var(--agenda-hit,44px) - 18px)/2); flex-shrink:0; }
#view-plan .agenda-entry-plus { display:grid; place-items:center; flex:0 0 var(--agenda-hit,44px); font:400 20px/1 var(--sans); }
#view-plan .agenda-entry-form { display:grid; grid-template-columns:calc(var(--agenda-hit,44px) + 6px) minmax(0,1fr) 70px 44px 44px; align-items:center; gap:4px; padding:8px 10px; margin:0; }
#view-plan .agenda-entry-form input { box-sizing:border-box; width:100%; min-width:0; min-height:40px; padding:6px 3px; border:0; border-bottom:1px solid var(--rule-3); border-radius:0; background:transparent; color:var(--ink); font:400 13px/1.4 var(--sans); }
#view-plan .agenda-entry-amount { text-align:right; appearance:textfield; -moz-appearance:textfield; }
#view-plan .agenda-entry-amount::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#view-plan .agenda-entry-form button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:3px; background:transparent; color:var(--ink2); font:500 18px/1 var(--sans); cursor:pointer; }
#view-plan .today-list-entry .agenda-entry-form { grid-template-columns:minmax(0,1fr) 70px 44px 44px; padding:4px 0; }
#view-plan .agenda-entry :is(button,input,select):focus-visible, #view-plan .agenda-income-row button:focus-visible { outline:2px solid var(--row-focus,var(--blue)); outline-offset:2px; }
#view-plan .agenda-income-row { display:grid; grid-template-columns:var(--agenda-hit,44px) minmax(0,1fr) max-content; align-items:center; gap:10px; box-sizing:border-box; padding:0 10px; min-height:60px; border-bottom:1px solid var(--rule); }
#view-plan .agenda-income-check { display:flex; align-items:center; justify-content:center; width:var(--agenda-hit,44px); height:var(--agenda-hit,44px); padding:0; border:0; background:transparent; cursor:pointer; }
#view-plan .agenda-income-check span { box-sizing:border-box; display:grid; place-items:center; width:18px; height:18px; border:1.5px solid var(--ink2); border-radius:4px; color:var(--paper-hi); font:600 13px/1 var(--sans); }
#view-plan .agenda-income-check[aria-checked="true"] span { background:var(--ink2); }
#view-plan .agenda-income-info { min-width:0; }
#view-plan .agenda-income-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:550 14px/1.4 var(--sans); }
#view-plan .agenda-income-row.received .agenda-income-name { text-decoration:line-through; }
#view-plan .agenda-income-meta { display:flex; align-items:center; gap:8px; color:var(--ink3); font:400 11px/1.4 var(--sans); }
#view-plan .today-agenda .agenda-repeat { position:relative; padding:0; margin-left:8px; border:0; background:transparent; color:var(--ink2); font:400 11px/1.4 var(--sans); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; cursor:pointer; }
#view-plan .agenda-income-meta .agenda-repeat { margin-left:0; }
#view-plan .agenda-income-amount { text-align:right; font:500 14px/1.4 var(--sans); font-variant-numeric:tabular-nums; }
@media (hover:hover) { #view-plan .agenda-entry-prompt:hover { color:var(--ink); background-color:rgba(74,58,38,.03); } }

#view-plan .today-agenda .agenda-repeat::after { content:""; position:absolute; left:-3px; right:-3px; top:50%; height:44px; transform:translateY(-50%); }

/* Actual payments use compact paper-dialog typography and a quiet ledger rule. */
#actual-payment-dialog { width:min(320px,calc(100% - 32px)); padding:18px; border-radius:5px; background:var(--paper-hi); border:1px solid var(--rule-3); box-shadow:0 6px 20px rgba(43,36,26,.15); }
#actual-payment-dialog h2 { margin:0 0 5px; font:600 16px/1.4 var(--sans); }
#actual-payment-dialog .payment-name { margin:0 0 10px; font:400 13px/1.4 var(--sans); }
#actual-payment-dialog .payment-available { margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--rule); color:var(--ink2); font:400 12px/1.4 var(--sans); }
#actual-payment-dialog input { font:500 20px/1.4 var(--sans); padding:5px 0; }
#actual-payment-dialog input:focus { outline:0; box-shadow:inset 0 -1px 0 var(--ink2); border-bottom-color:var(--ink2); }
#actual-payment-dialog .payment-error { color:var(--ink); font:500 12px/1.5 var(--sans); }
#actual-payment-dialog .plan-confirm-actions { margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); }
#actual-payment-dialog .plan-confirm-actions button { border-radius:4px; }
/* A persistent exception, below the ordinary money summary. */
#protection-warning {
  position:absolute; left:32px; right:32px; bottom:5px;
  border:0; background:transparent; padding:0; text-align:left;
  color:var(--ink); font:600 12px/1.4 var(--sans); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
#protection-warning[hidden] { display:none; }

/* Funding overview: one scrolling ledger, with totals and actions kept visible. */
#protection-review { width:min(640px,calc(100% - 32px)); padding:18px; max-height:calc(100dvh - 32px); overflow:hidden; }
#protection-review[open] { display:flex; flex-direction:column; gap:12px; }
#protection-review h2 { font:600 24px/1.2 var(--serif); }
#protection-review p { margin:0; font:400 12px/1.4 var(--sans); }
.protection-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; border-bottom:1px solid var(--bd2); padding-bottom:12px; }
.protection-summary > div { display:flex; flex-direction:column; gap:4px; }
.protection-summary span { color:var(--ink2); font:500 11px/1.3 var(--sans); }
.protection-summary strong { font:500 18px/1.2 var(--serif); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.protection-review-warning { font-weight:700 !important; }
.protection-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto 36px 36px; align-items:center; gap:6px; font:500 12px/1.4 var(--sans); }
.protection-rows { min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; flex:1 1 auto; scrollbar-width:none; padding:2px; }
.protection-rows::-webkit-scrollbar { display:none; }
.protection-row { display:grid; align-items:center; gap:6px; padding:3px 0; border-top:1px solid var(--bd2); }
.protection-item { min-width:0; }
.protection-item strong { display:block; font:600 13px/1.35 var(--sans); overflow-wrap:anywhere; }
.protection-item small { display:block; color:var(--ink2); }
.protection-entry { display:flex; align-items:center; gap:3px; min-width:0; }
.protection-entry input { min-width:0; width:100%; border:0; background:transparent; color:var(--ink); font:inherit; }
.protection-entry[hidden],.protection-add[hidden] { display:none; }
.protection-row button, .protection-toolbar button { min-height:36px; border:1px solid var(--bd2); border-radius:4px; padding:5px 8px; color:var(--ink); background:transparent; font:600 12px/1.3 var(--sans); cursor:pointer; }
.protection-row .protection-add { border-color:transparent; }
#protection-review button:disabled { opacity:.45; cursor:default; }
#protection-review :is(button,input):focus { outline:none; }
#protection-review button:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.protection-review-error { color:var(--red); }
.protection-empty { padding:12px 0; color:var(--ink2); }
@media (hover:hover) { #protection-review button:not(:disabled):hover { filter:brightness(.94); } }

/* Every stash is ready to edit without disclosure. */
.protection-row .protection-add { font-size:20px; }
.protection-row .protection-clear { font-size:19px; }
.protection-row > * { min-width:0; }

#protection-review h2 { display:flex; align-items:center; gap:8px; }
#protection-review h2 svg { width:20px; height:20px; flex:none; }

#stash-funding-metric { display:none; }

/* Same small icon, name, detail and amount rhythm as Goals & envelopes. */
.protection-item { position:relative; padding-left:22px; }
.protection-icon { position:absolute; left:0; top:50%; transform:translateY(-50%); line-height:0; }
.protection-icon .goal-icon { width:18px; height:18px; }
.protection-row .protection-item strong { display:block; font:500 12px/1.4 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.protection-item small { margin:0; font:400 10px/1.4 var(--sans); overflow:hidden; text-overflow:ellipsis; }
.protection-row button { min-height:32px; border:0; padding:0; font-weight:400; }
.protection-row .protection-add { background:transparent; color:var(--ink); }
.protection-row .protection-less { font-size:20px; }
.protection-entry { border:0; font:400 12px/1.4 var(--sans); }
.protection-entry input { min-height:32px; text-align:right; padding:0; appearance:textfield; }
.protection-entry input::-webkit-inner-spin-button,.protection-entry input::-webkit-outer-spin-button { appearance:none; margin:0; }
@media (hover:hover) { .protection-entry:hover { box-shadow:inset 0 -1px var(--bd2); } }

#protection-review .protection-close { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:36px; height:36px; border:0; padding:0; background:transparent; color:var(--ink2); font:400 24px/1 var(--sans); cursor:pointer; }

/* Reuse the woven title strap and intent-revealed steppers from Plan. */
#protection-review { background-color:var(--paper-hi,var(--bg)); }
#protection-review h2 { margin:-18px -18px 0; padding:12px 58px 12px 18px; background-color:#e6dfcf; background-image:var(--cloth-weave); border-bottom:1px solid var(--bd2); box-shadow:0 3px 6px rgba(43,36,26,.1); font-size:21px; }
.protection-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:10px; }
.protection-row .protection-item strong,.protection-item small { min-width:0; }
.protection-row :is(.protection-less,.protection-add) { visibility:hidden; }
.protection-row.is-selected :is(.protection-less,.protection-add),
.protection-row:has(.protection-entry:focus-within,.protection-less:focus,.protection-add:focus) :is(.protection-less,.protection-add) { visibility:visible; }
.protection-entry:focus-within { box-shadow:inset 0 -1px var(--ink2); }

/* Quiet ledger tools; cash itself is the editing link. */
.protection-summary > .protection-cash { display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.protection-count { margin-right:0; }
.protection-toolbar .protection-sort { display:flex; align-items:center; justify-self:start; gap:4px; margin-left:34px; min-width:44px; min-height:36px; border:0; padding:0; font:500 12px var(--sans); }
.protection-sort span { width:28px; text-align:left; }
.protection-sort svg { flex:none; width:12px; height:12px; }
.protection-toolbar .protection-filter { display:grid; place-items:center; width:36px; min-height:36px; border:0; padding:0; }
.protection-filter svg { width:20px; height:20px; }
.protection-filter .filter-check { visibility:hidden; }
.protection-filter[aria-pressed='true'] { background:var(--bd); box-shadow:inset 0 0 0 1px var(--ink2); }
.protection-filter[aria-pressed='true'] .filter-check { visibility:visible; }
#protection-review :is(.protection-sort,.protection-filter):focus-visible { outline:1px solid var(--ink2); outline-offset:2px; }
.protection-toolbar .protection-clear-all { margin-left:0; border:0; padding:0; width:36px; min-height:36px; font:400 19px var(--sans); }
.protection-row { cursor:pointer; padding-inline:4px; }
.protection-item { cursor:pointer; }
.protection-row:is(.is-selected,:focus-within) { outline:none; border-radius:6px; box-shadow:none; background:rgba(40,112,88,.055); }
.protection-row:focus-visible { outline:none; box-shadow:inset 2px 0 var(--green); border-radius:6px; }
@media (hover:hover) { .protection-cash:hover strong { text-decoration:underline; text-underline-offset:3px; } }

.protection-row .protection-icon { display:grid; place-items:center; width:22px; height:32px; min-height:32px; left:-4px; border:0; background:transparent; cursor:pointer; }
.bill-debt-option { display:flex; align-items:center; gap:7px; min-height:36px; font:12px var(--sans); cursor:pointer; }
.bill-debt-option input { accent-color:var(--green); }
.bill-debt-option small { color:var(--ink2); font-size:10px; }
.bill-debt-option input:focus-visible { outline:none; box-shadow:0 1px 0 var(--ink); }
.protection-row { grid-template-columns:minmax(0,1fr) 30px 90px 30px 26px; }
.protection-wish svg { width:14px; height:14px; }
#stash-wishlist-confirm button:focus-visible { outline:none; text-decoration:underline; text-underline-offset:3px; }

/* Actual payment reuses Spend's minus / editable amount / plus control. */
#actual-payment-dialog .payment-stepper { justify-content:space-between; }
#actual-payment-dialog .payment-amount { display:flex; flex:1; min-width:0; align-items:baseline; justify-content:center; gap:3px; font:500 24px/1.4 var(--serif); }
#actual-payment-dialog .payment-amount input { min-width:0; width:100%; max-width:120px; text-align:center; font:inherit; }
#actual-payment-dialog .payment-stepper button { flex-shrink:0; }
#actual-payment-dialog .plan-confirm-accept:disabled { opacity:.45; cursor:default; }
#actual-payment-dialog button:focus-visible { outline:none; text-decoration:underline; text-underline-offset:3px; }
#actual-payment-dialog .plan-confirm-actions { flex-wrap:wrap; }


/* Shared bill and paycheck dialog fields. */
.record-fields {
  overflow-y: auto; overscroll-behavior: contain; scroll-padding: 12px; min-height: 0;
  padding: 4px var(--record-gutter,18px) calc(18px + env(safe-area-inset-bottom,0px));
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px 20px; align-content: start;
}
.record-kind {
  grid-column: 1 / -1; display: grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:44px; gap: 0 8px;
  border: 0; padding: 0; background: transparent;
}
.record-kind button {
  flex: 1 0 26%; min-width: 56px; min-height:44px; padding: 0 4px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font: 500 13px var(--sans); color: var(--ink2); background: transparent;
}
.record-kind button[aria-pressed="true"] { color: var(--green-dp); border-bottom-color: var(--green); font-weight: 700; }
.record-paycheck-kind { align-items: center; font: 600 13px var(--sans); color: var(--ink2); }
.record-field { display: flex; flex-direction: column; min-width: 0; gap: 1px; font: 500 12px/1.4 var(--sans); color: var(--ink2); }
.record-name, .record-amount { grid-column: 1 / -1; }
.record-fields input:not([type="checkbox"]), .record-fields select {
  display: block; width: 100%; box-sizing: border-box; min-width: 0; height: 44px;
  border: 0; border-bottom: 1px solid var(--bd2); border-radius: 0;
  background: transparent; color: var(--ink); padding: 7px 0;
  font: 400 16px/1.3 var(--sans); box-shadow: none;
}
.record-fields input[type="date"] { appearance: none; -webkit-appearance: none; }
.record-fields #record-name { font: 500 23px/1.3 var(--serif); }
.record-amount { position: relative; flex-direction: row; align-items: center; gap: 20px; }
.record-amount::after { content: "$"; position: absolute; left: 42%; top: 50%; transform: translateY(-50%); font: 400 21px var(--serif); color: var(--gold); pointer-events: none; }
.record-amount > span { flex: 1; }
.record-fields #record-amount { width: 58%; padding-left: 20px; text-align: right; font: 500 28px/1.2 var(--serif); color: var(--gold); }
.record-income .record-amount { flex-direction: column; align-items: stretch; gap: 4px; }
.record-amount:has(.record-amount-stepper)::after { content: none; }
.record-amount-stepper { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 8px; position: relative; }
.record-amount-stepper::before { content: '$'; position: absolute; left: 60px; color: var(--gold); font: 400 21px var(--serif); pointer-events: none; }
.record-fields .record-amount-stepper #record-amount { width: 100%; padding-inline: 24px 8px; }
.record-amount-stepper .inc-stepper { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 4px; background: rgba(88,77,60,.08); color: var(--ink2); font: 500 24px/1 var(--sans); }
.record-amount-stepper .inc-stepper:active { background: rgba(88,77,60,.18); }
.record-fields select { appearance: none; padding-right: 24px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%236d685f' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 6px center; }
.record-fields input::placeholder { color: var(--ink3); opacity: 1; }
.record-fields :is(input,select):focus-visible { outline: none; border-bottom-color: var(--indigo); box-shadow: 0 1px 0 var(--indigo); background-color: rgba(67,104,143,.035); }
.record-fields :is(button,input[type="checkbox"]):focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.record-fields input:disabled, .record-fields select:disabled {
  opacity: 1; color: var(--ink3); background: transparent;
  border-bottom-style: dotted; border-bottom-color: var(--bd2); box-shadow: none;
  -webkit-text-fill-color: var(--ink3);
}
.record-fields button:disabled { opacity: .55; }
.record-fields fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 10px 0 0; border: 0; border-radius: 0; }
.record-fields legend { padding: 0; font: 500 16px var(--serif); color: var(--ink); }
.record-options { position: relative; display: grid; gap: 2px; }
.record-options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.record-options label, .record-footer label { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 400 13px var(--sans); }
.record-fields input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 30px; height: 18px; border: 0; border-radius: 12px; margin: 0;
  background: rgba(88,77,60,.25); flex-shrink: 0;
}
.record-fields input[type="checkbox"]::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(43,36,26,.16); }
.record-fields input[type="checkbox"]:checked { background: var(--green); }
.record-fields input[type="checkbox"]:checked::before { left: 14px; }
.record-fields input[type="checkbox"]:disabled { background: rgba(88,77,60,.12); }
.record-options input[type="number"] { width: 72px; margin-left: auto; text-align: right; }
.record-options label:has(input:disabled) { color: var(--ink3); }
.record-protection { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 20px; }
.record-protection-status, .record-protection label, .record-help { grid-column: 1 / -1; font: 400 12px/1.5 var(--sans); margin: 0; }
.record-protection-status { min-height: 36px; color: var(--ink2); }
.record-protection label { display: flex; flex-direction: column; gap: 1px; color: var(--ink2); }
.record-protection button { min-height: 44px; border: 0; border-radius: 4px; font: 600 12px var(--sans); padding: 6px 0; text-align: left; color: var(--green-dp); background: transparent; }
.record-protection > button:first-of-type { grid-column: 1 / -1; width: fit-content; padding-inline: 14px; background: var(--green-dp); color: var(--paper); }
.record-protection:disabled > button:first-of-type { background: transparent; color: var(--ink3); padding-left: 0; }
.record-help { color: var(--ink3); }
.record-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border: 0; padding-top: 8px; }
.record-footer button { min-height: 44px; min-width: 116px; padding: 8px 12px; border-radius: 4px; font: 600 12px var(--sans); color: var(--red); }
.record-footer button[data-confirm="yes"] { background: var(--red); color: var(--paper); font-weight: 700; }
.record-income .record-options, .record-income .record-protection { display: none; }

/* Conditional Padding: shape and explanatory text accompany the red cue. */
.padding-condition{display:inline-block;color:#b42318;font-size:.65em;vertical-align:super;line-height:1;margin-left:3px;padding:3px;cursor:help;}
.padding-condition:focus-visible{outline:none;text-decoration:underline;text-underline-offset:3px;}

/* Independent columns keep held-money actions directly below the balance. */
.record-held-column, .record-stash-column { display:flex; flex-direction:column; align-items:stretch; gap:0; min-width:0; }
.record-held-column .record-protection-status { min-height:0; margin-bottom:4px; }
.record-held-column button { align-self:flex-start; }
.record-stash-column { gap:10px; }
.record-stash-column input { text-align:right; }
.record-stash-column .record-stash-action { align-self:flex-end; width:fit-content; padding-inline:14px; background:var(--green-dp); color:var(--paper); }
.record-protection:disabled .record-stash-action { background:transparent; color:var(--ink3); }

.goal-due-warning { grid-column:1 / -1; grid-row:3; color:var(--red); font:600 12px/1.4 var(--sans); padding-top:4px; }

.wishlist-card .wish-goal-warning .wish-goal-warning-mark { background:none; border:0; box-shadow:none; border-radius:0; font-size:12px; width:16px; height:16px; flex:0 0 16px; }
@media (hover:hover) and (pointer:fine) {
  .wishlist-option-deck.has-options .wishlist-option-track { cursor:grab; }
  .wishlist-option-track.is-dragging { cursor:grabbing; user-select:none; scroll-snap-type:none !important; scroll-behavior:auto; }
}

.record-stashed-stepper { grid-column:2; display:grid; grid-template-columns:36px minmax(0,1fr) 36px; align-items:center; gap:6px; }
.record-stashed-stepper label { display:flex; flex-direction:row; align-items:center; gap:4px; }
.record-stashed-stepper input { text-align:right; }
.record-stashed-stepper button { text-align:center; font-size:22px; background:rgba(88,77,60,.08); }
.record-protection > .record-protection-status { align-self:center; }

/* Carousel content must shrink inside the panel; only its track scrolls sideways. */
.wishlist-state-section, .wishlist-option-group, .wishlist-option-deck, .wishlist-option-track { min-width:0; max-width:100%; box-sizing:border-box; }
.wishlist-option-group { width:100%; }
#wishlist-list-rail, #wishlist-list-sheet { overflow-x:hidden; }

/* One full-width balance row, followed by its funding summary. */
.record-protection .record-stashed-stepper { grid-column:1 / -1; grid-row:1; grid-template-columns:44px minmax(0,1fr) 44px; gap:12px; }
.record-protection .record-stashed-stepper > label { grid-column:auto; min-width:0; flex-direction:row; }
.record-protection .record-stashed-stepper input { width:100%; min-width:0; text-align:center; }
.record-protection > .record-protection-status { grid-column:1 / -1; grid-row:2; min-height:0; }
.record-protection > .record-help { grid-row:3; }

/* A common editing grid keeps shared concepts in the same place across types. */
.record-fields:not(.record-income) .record-kind { grid-row:1; }
.record-fields:not(.record-income) .record-name { grid-row:2; }
.record-fields:not(.record-income) .record-date { grid-column:1; grid-row:3; }
.record-fields:not(.record-income) .record-amount { grid-column:2; grid-row:3; flex-direction:column; align-items:stretch; gap:1px; }
.record-fields:not(.record-income) .record-amount > span { flex:initial; }
.record-fields:not(.record-income) .record-amount::after { left:0; top:38px; }
.record-fields:not(.record-income) #record-amount { width:100%; font-size:24px; }
.record-fields:not(.record-income) .record-every { grid-column:1; grid-row:4; width:72px; }
.record-fields:not(.record-income) .record-frequency { grid-column:2; grid-row:4; }
.record-fields:not(.record-income) .record-end { grid-column:1 / -1; grid-row:5; }
.record-fields:not(.record-income) .record-options { grid-row:6; }
.record-fields:not(.record-income) .record-protection { grid-row:5; }
.record-fields:not(.record-income) .record-footer { grid-row:7; }
/* Keep Goal and Stash balances aligned; inactive recurrence takes no attention. */
.record-fields[data-mode="goal"] :is(.record-every,.record-frequency),
.record-fields[data-mode="wish"] :is(.record-every,.record-frequency,.record-date) { display:flex !important; visibility:hidden; }
.record-options { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px; }
.record-options label:has(input[type="number"]) { grid-column:1 / -1; }
#mobile-record-dialog .mobile-record-toolbar .record-delete { color:var(--red); }


.record-fields:not(.record-income) .record-kind { grid-template-columns:repeat(2,minmax(0,1fr)); }
.record-fields[data-mode="goal"] :is(.record-every,.record-frequency) { visibility:visible; }
.protection-item small { white-space:normal; line-height:1.5; }
.agenda-wish { min-width:36px; min-height:36px; font-size:18px; vertical-align:middle; }

.wishlist-heart { width:20px; height:20px; vertical-align:middle; flex-shrink:0; }
.agenda-wish .wishlist-heart { width:18px; height:18px; }
/* Destructive action stays across the footer from completion. */
#mobile-record-dialog .mobile-record-toolbar .record-delete { order:-1; margin-right:12px; padding:4px 6px; min-width:28px; background:transparent; border:0; box-shadow:none; }
#mobile-record-dialog .mobile-record-toolbar .record-delete[data-confirm="yes"] { background:transparent; color:var(--red); width:auto; }
#mobile-record-dialog .mobile-record-toolbar .record-delete svg { display:block; }

/* Shared, quiet dismissal for the check editor and phone sheet. */
#mobile-record-dialog .record-close { position:absolute; top:2px; right:2px; z-index:45; width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:var(--ink2); font:400 22px/1 var(--sans); cursor:pointer; }
#mobile-record-dialog .record-close:focus-visible { outline:1px solid var(--bd2); outline-offset:-4px; border-radius:4px; }
@media(max-width:1199px) { #mobile-record-dialog .record-close { width:44px; height:44px; } #mobile-record-dialog .mobile-record-toolbar { padding-right:44px; } }

.record-type-switch { display:none; }

/* Stashes, Postpones and Debt share the same woven header and paper body. */
#protection-review .stash-completion-gauge { margin-left:auto; flex:0 0 28px; width:28px; height:28px; border-radius:50%; border:1px solid var(--green); background:conic-gradient(var(--green) var(--stash-fill,0deg),transparent 0); }
#goals-sheet, #slippage-sheet { background:var(--paper-hi,var(--bg)); border:1px solid var(--bd2); border-radius:9px; overflow:hidden; width:min(640px,calc(100% - 32px)); max-height:calc(100dvh - 32px); }
#goals-sheet > .modal-handle, #slippage-sheet > .modal-handle { display:none; }
#goals-sheet > .modal-header, #slippage-sheet > .modal-header { position:relative; flex:none; box-sizing:border-box; height:50px; min-height:50px; padding:12px 58px 12px 18px; background-color:#e6dfcf; background-image:var(--cloth-weave); border-bottom:1px solid var(--bd2); box-shadow:0 3px 6px rgba(43,36,26,.1); }
#goals-sheet .modal-title, #slippage-sheet .modal-title { font:600 21px/1.2 var(--serif); color:var(--ink); }
#goals-sheet .modal-close, #slippage-sheet .modal-close { position:absolute; top:8px; right:8px; width:36px; height:36px; padding:0; border:0; background:transparent; color:var(--ink2); }
#goals-sheet .goals-body { min-height:0; overflow-y:auto; scrollbar-width:none; }
@media(max-width:1199px) {
  #goals-sheet, #slippage-sheet { left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%); }
  #goals-sheet.open, #slippage-sheet.open { transform:translate(-50%,-50%); }
}

/* Compact funding thermometer replaces the repeated balance sentence. */
#protection-review .protection-item { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:8px; padding-left: 28px; }
#protection-review .protection-item small { width:100%; padding: 2px 4px; box-sizing: border-box; }
.stash-meter-labels { display:flex; justify-content:space-between; gap:8px; font-variant-numeric:tabular-nums; }
.stash-meter { display:block; height:5px; border-radius:3px; background:rgba(72,99,78,.13); overflow:hidden; margin:2px 0 3px; }
.stash-meter > span { display:block; height:100%; background:var(--green); border-radius:inherit; }
.stash-meter-date { display:block; color:var(--ink3); font-size:10px; }

#view-plan .bcard-meta .agenda-wish { margin-left:0; margin-right:6px; }

/* Funding overview belongs with the balances, not the title strap. */
#protection-review .protection-summary { gap:10px; grid-template-columns: repeat(3,minmax(0,1fr)) 52px; }
#protection-review .protection-summary .stash-completion-gauge {
  border-radius:50%;
  display: grid;
  place-items: center;
  margin: 0;
  align-self: center;
  justify-self: center;
  border: 0;
  background: none;
  color: var(--green);
  width: 52px;
  height: 36px;
}

#protection-review .stash-completion-gauge svg { display:block; width: 52px; height: 36px; }
#protection-review .protection-summary { align-items:center; }

#protection-review .protection-summary > :is(div,button) { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0; padding:0; text-align:left; align-self:center; }
#protection-review .protection-summary .protection-cash:focus-visible { outline:none; box-shadow:none; border-radius:0; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--green); }


#goals-sheet, #slippage-sheet { color:var(--ink); box-shadow:0 12px 40px rgba(43,36,26,.2); padding-bottom:0; }
#goals-sheet .modal-close:focus-visible, #slippage-sheet .modal-close:focus-visible { outline:none; box-shadow:none; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1199px) {
  #goals-sheet, #slippage-sheet { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
  #goals-sheet > .modal-header, #slippage-sheet > .modal-header { padding-left:16px; }
}

#goals-sheet .modal-close, #slippage-sheet .modal-close { display:grid; place-items:center; font:400 24px/1 var(--sans); border-radius:0; box-shadow:none; cursor:pointer; }

/* Reveal the optional wishlist action without shifting the due-date text. */
@media (hover:hover) and (pointer:fine) {
  #view-plan .bcard .agenda-wish { opacity:0; pointer-events:none; }
  #view-plan .bcard:hover .agenda-wish,
  #view-plan .bcard:focus-within .agenda-wish { opacity:1; pointer-events:auto; }
}

/* The optional heart shares the title line; it must not enlarge the date row. */
#view-plan .bcard-name .agenda-wish { position:relative; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; width:18px; height:18px; min-width:18px; min-height:18px; margin:0 0 0 6px; padding:0; border:0; background:transparent; text-decoration:none; line-height:1; }
#view-plan .bcard-name .agenda-wish .wishlist-heart { width:14px; height:14px; }

#pname.spending-plan-heading, #mobile-plan-range.spending-plan-heading { font:500 23px/1.2 'Caveat',cursive; color:var(--blue-ink,#285a8e); letter-spacing:0; }

#view-plan #pname.spending-plan-heading .pname-date, #mobile-plan-range.spending-plan-heading { font:600 23px/1.2 'Caveat',cursive; color:#365f94; letter-spacing:.015em; }

#pname.spending-plan-heading .spending-plan-date { font:500 10px/1.3 var(--sans); color:var(--ink2); border:1px solid var(--bd2); border-radius:9px; padding:2px 6px; white-space:nowrap; letter-spacing:0; }

/* Agenda deletion shares the amount row, without adding vertical space. */
#view-plan .agenda-trash { display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; width:28px; height:28px; padding:0; margin-left:8px; border:0; border-radius:5px; background:transparent; color:var(--rust); cursor:pointer; }
#view-plan .agenda-trash.armed { background:rgba(166,66,44,.12); box-shadow:inset 0 -2px currentColor; }
#view-plan .agenda-trash:focus-visible { outline:none; box-shadow:inset 0 -2px currentColor; }
@media(hover:hover){
  #view-plan .bcard .agenda-trash { opacity:0; pointer-events:none; }
  #view-plan .bcard:hover .agenda-trash,
  #view-plan .bcard:focus-within .agenda-trash { opacity:1; pointer-events:auto; }
}
@media(hover:none){ #view-plan .agenda-trash { width:36px; height:36px; } }

#view-plan .period-savings-toggle { padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; border-bottom:1px dotted currentColor; }
#view-plan .period-savings-toggle:focus-visible { outline:none; border-bottom:2px solid var(--green-dp); }
#view-plan .desktop-period-head .today-savings-details { grid-column:1 / -1; position:static; width:100%; min-width:0; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
#view-plan .desktop-period-head .today-savings-details > .rollup-tab { display:none; }
#view-plan .desktop-period-head .today-savings-details > .rollup-body { margin:0; padding:0; }
#view-plan .desktop-period-head .today-savings-details > .rollup-body.open { padding-top:8px; }

/* Stash milestones share the agenda checklist rails and spacing. */
#view-plan .sw-content .rollup-body.today-agenda .bcard.goal-due-card {
  position:relative; grid-template-columns:var(--agenda-hit,32px) minmax(0,1fr) 44px var(--period-amount-width,max-content);
  grid-template-rows:minmax(22px,auto) minmax(18px,auto); gap:0 10px;
  height:auto; min-height:60px; max-height:none; margin:0; padding:10px;
  border:0; border-bottom:1px dotted var(--rule); border-radius:0; background:transparent; box-shadow:none;
}
@media(min-width:1200px){
  #view-plan .sw-content .rollup-body.today-agenda .bcard.goal-due-card { grid-template-columns:var(--agenda-hit,32px) minmax(0,1fr) 92px var(--period-amount-width,max-content); }
}
#view-plan .today-agenda .goal-due-card::before {
  content:''; grid-column:1; grid-row:1 / 3; align-self:center; justify-self:center;
  width:18px; height:18px; box-sizing:border-box; border:1.5px dotted var(--ink2); border-radius:4px; opacity:.35;
}
#view-plan .today-agenda .goal-due-title { grid-column:2; grid-row:1; align-self:center; font:550 14px/1.4 var(--sans); }
#view-plan .today-agenda .goal-due-amount { grid-column:4; grid-row:1 / 3; align-self:center; justify-self:end; font:500 14px/1.4 var(--sans); }
#view-plan .today-agenda .goal-due-detail { grid-column:2; grid-row:2; align-self:center; font:400 11px/1.4 var(--sans); }
#view-plan .today-agenda .goal-due-detail::before {
  content:''; display:inline-block; vertical-align:-2px; margin-right:5px; width:8px; height:12px;
  background:rgba(64,105,91,.45); clip-path:polygon(0 0,100% 0,100% 100%,50% 73%,0 100%);
}
#view-plan .today-agenda .goal-due-actions { grid-column:3; grid-row:1 / 3; align-self:center; justify-self:center; }
#view-plan .today-agenda .goal-due-actions .goal-contributions-link { white-space:normal; text-align:center; font:400 10px/1.4 var(--sans); color:var(--ink2); }
#view-plan .today-agenda .goal-due-warning { grid-column:2 / -1; font-weight:500; }

.goal-contributions-link .stash-action-icon { display:none; }
#view-plan .today-agenda .goal-contributions-link .stash-action-text { display:none; }
#view-plan .today-agenda .goal-contributions-link .stash-action-icon { display:block; width:20px; height:20px; }
#view-plan .today-agenda .goal-due-actions .goal-contributions-link { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; background:transparent; }
#view-plan .today-agenda .goal-due-actions .goal-contributions-link:focus-visible { outline:none; border-radius:4px; box-shadow:inset 0 -2px var(--green-dp); }

.agenda-swipe-wish { display:none; }

/* Keep actions in the title rail; the money rail contains only numbers. */
#view-plan .today-agenda .bcard-name.has-agenda-trash { position:relative; padding-right:32px; overflow:visible; }
#view-plan .today-agenda .bcard-name > .agenda-trash { position:absolute; right:0; top:50%; transform:translateY(-50%); margin:0; }

#chart-title-plan { display:inline-flex; align-items:center; min-height:28px; height:auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--ink2); font:500 11px/1.25 var(--sans); text-transform:none; letter-spacing:0; white-space:normal; }
#chart-title-plan.clickable { color:var(--green-dp); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
#chart-title-plan:focus-visible { outline:none; box-shadow:inset 0 -2px var(--green-dp); }

.goal-due-meter { width:100%; max-width:220px; min-width:0; }
#view-plan .today-agenda .goal-due-detail.goal-due-meter::before { display:none; }
.goal-due-meter.is-at-risk .stash-meter { background:rgba(165,65,46,.17); box-shadow:inset 0 0 0 1px rgba(165,65,46,.3); }
.goal-due-meter.is-at-risk .stash-meter > span { background:var(--rust); }
.goal-due-meter.is-at-risk .stash-meter-date { color:var(--rust); }
#view-plan .today-agenda .goal-due-card:has(.goal-due-meter) { grid-template-rows:22px auto; }

/* Set aside: solid held funding plus striped planned progress. */
.set-aside-stash-row { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:center; gap:8px; width:100%; min-height:32px; padding:3px 4px; border:0; border-bottom:1px dotted var(--rule); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.set-aside-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:12px var(--sans); }
.set-aside-stash-row > .goal-icon { display:block; width:20px; height:20px; margin:0; color:var(--green-dp); justify-self:center; }
.set-aside-meter { min-width:0; width:120px; max-width:100%; justify-self:center; }
.set-aside-meter .stash-meter-labels { font-size:9px; }
.set-aside-amount { padding-left:8px; text-align:right; font:11px/1.4 var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink2); }
.today-stash-action { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:5px; border:0; background:transparent; color:var(--green-dp); cursor:pointer; flex-shrink:0; }
.today-stash-action svg { width:20px; height:20px; display:block; flex:0 0 20px; }
.set-aside-drawer { position:relative; }
.set-aside-drawer > .today-stash-action { position:absolute; right:70px; top:3px; }
.set-aside-drawer > .rollup-tab { padding-right:110px; }
.set-aside-drawer > .rollup-tab > .rollup-tab-amt { position:static; margin-left:auto; }
.today-savings-details > .today-stash-action { display:none; }
.desktop-period-stat.savings .set-aside-label { display:inline-flex; align-items:center; gap:5px; }
.set-aside-stash-row:focus-visible,.today-stash-action:focus-visible { outline:none; border-radius:3px; box-shadow:inset 0 -2px var(--green-dp); }
@media(hover:hover){ .set-aside-stash-row:hover,.today-stash-action:hover { background:rgba(40,100,75,.06); } }

/* Due stashes share the quiet Stashes-list rhythm, not a separate card frame. */
#view-plan .sw-content .rollup-body .bcard.goal-due-card,
#view-plan .sw-content .rollup-body.today-agenda .bcard.goal-due-card {
  display:grid; grid-template-columns:22px minmax(0,1fr) minmax(75px,140px) var(--period-amount-width,max-content);
  grid-template-rows:auto auto; gap:0 10px; padding:5px 8px; margin:0; min-height:0; height:auto;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
#view-plan .today-agenda .goal-due-card::before { display:none; }
#view-plan .goal-due-card .goal-due-bag { grid-column:1; grid-row:1 / 3; align-self:center; width:20px; height:20px; color:var(--green-dp); }
#view-plan .goal-due-card .goal-due-title { grid-row:1; align-self:center; font:500 12px/1.4 var(--sans); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#view-plan .goal-due-card .goal-due-meter { grid-column:3; grid-row:1; align-self:center; width:100%; max-width:140px; }
#view-plan .goal-due-card .goal-due-amount { grid-column:4; grid-row:1 / 3; align-self:center; font:500 14px/1.4 var(--serif); }
#view-plan .goal-due-card .goal-due-actions { align-self:center; }
#view-plan .goal-due-card .goal-due-date { grid-column:3; grid-row:2; font:10px/1.4 var(--sans); color:var(--ink3); }
#view-plan .goal-due-card .goal-contributions-link { min-height:18px; padding:0; font:10px/1.4 var(--sans); text-align:left; }
#view-plan .goal-due-card .stash-meter-labels { font:400 10px/1.4 var(--sans); }
#view-plan .goal-due-card .goal-due-warning { grid-column:2 / -1; grid-row:3; margin:0; font-size:10px; }
#view-plan .today-agenda .goal-due-card .stash-action-text { display:inline; }
#view-plan .today-agenda .goal-due-card .stash-action-icon { display:none; }
@media(max-width:759px){
  #view-plan .sw-content .rollup-body .bcard.goal-due-card,
  #view-plan .sw-content .rollup-body.today-agenda .bcard.goal-due-card { grid-template-columns:22px minmax(0,1fr) minmax(70px,100px) var(--period-amount-width,max-content); gap:0 8px; }
}

.set-aside-meter .stash-meter { position:relative; }
.set-aside-meter .stash-meter > span { position:absolute; left:0; top:0; }
.set-aside-meter .stash-meter > .set-aside-planned-fill { background:repeating-linear-gradient(135deg,rgba(40,112,88,.5) 0 2px,rgba(40,112,88,.15) 2px 4px); }
.set-aside-meter .stash-meter > .set-aside-held-fill { background:var(--green); }

#view-plan .desktop-period-head .set-aside-disclosure { display:inline-flex; align-items:center; gap:5px; padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.set-aside-disclosure svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.set-aside-disclosure[aria-expanded="true"] svg { transform:rotate(180deg); }
.set-aside-disclosure:focus-visible { outline:none; box-shadow:inset 0 -2px var(--green-dp); }
#view-plan .desktop-period-head :is(.desktop-period-ledger,.today-savings-details,.today-savings-details > .rollup-body) { scrollbar-width:none; }
#view-plan .desktop-period-head :is(.desktop-period-ledger,.today-savings-details,.today-savings-details > .rollup-body)::-webkit-scrollbar { display:none; width:0; height:0; }

/* One shared ledger grid keeps every meter and amount aligned across rows. */
#view-plan .rollup-body.open:has(> .set-aside-stash-row, > .set-aside-lock-row) { display:grid; grid-template-columns:20px minmax(0,.85fr) minmax(100px,1.15fr) max-content; column-gap:8px; }
/* Postponed goal rows share this list but do not use its meter subgrid. */
#view-plan .rollup-body.open:has(> .set-aside-stash-row, > .set-aside-lock-row) > * { grid-column:1 / -1; min-width:0; }
.set-aside-meter .stash-meter-labels { white-space:nowrap; gap:4px; }

#view-plan .goal-due-card .goal-due-title { display:flex; align-items:center; gap:8px; }
.goal-due-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goal-fuel-gauge { display:inline-flex; flex:0 0 36px; width:36px; color:var(--green-dp); }
.goal-fuel-gauge svg { display:block; width:36px; height:25px; }
.goal-fuel-gauge.is-at-risk { color:var(--rust); }
#view-plan .goal-due-card .goal-due-title { grid-column:2 / 4; }

#view-plan .goal-due-card .goal-gauge-control { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; margin-left:6px; padding:3px; border:0; background:transparent; cursor:pointer; }
#view-plan .goal-due-card .goal-fuel-gauge { width:30px; flex-basis:30px; }
#view-plan .goal-due-card .goal-fuel-gauge svg { width:30px; height:21px; }
.goal-gauge-control:focus-visible { outline:none; border-radius:4px; box-shadow:inset 0 -2px var(--green-dp); }
#view-plan .goal-due-card .goal-due-bag { display:none; }
#view-plan .goal-due-card .goal-due-actions { grid-column:1; grid-row:1 / 3; justify-self:center; }
#view-plan .goal-due-card .goal-contributions-link { display:grid; place-items:center; height:32px; }
#view-plan .goal-due-card .goal-contributions-link .stash-action-text { display:none; }
#view-plan .goal-due-card .goal-contributions-link .stash-action-icon { display:block; width:20px; height:20px; color:var(--green-dp); }

/* A ready ribbon certifies held cash; an unfunded stash states what is missing. */
#view-plan .goal-due-card { position:relative; }
#view-plan .goal-due-card .goal-readiness-control { border:0; padding:2px 6px; margin-left:6px; background:transparent; color:var(--ink2); font:11px/1.4 var(--sans); text-align:left; cursor:pointer; white-space:normal; }
#view-plan .goal-due-card.stash-ready .goal-readiness-control { position:absolute; top:0; right:calc(var(--period-amount-width,64px) + 26px); padding:0; margin:0; width:12px; height:17px; color:var(--green); }
.stash-ready-ribbon { display:block; width:12px; height:17px; opacity:.8; filter:drop-shadow(0 1px 1px rgba(35,55,40,.18)); }

.goal-readiness-control:focus-visible { outline:none; border-radius:3px; box-shadow:inset 0 -2px var(--green-dp); }

#monthly-view-control { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font:11px var(--sans); color:var(--ink2); cursor:pointer; }
#monthly-view-control[hidden] { display:inline-flex; visibility:hidden; pointer-events:none; }
#monthly-view-check { appearance:none; display:grid; place-content:center; width:14px; height:14px; margin:0; border:1px solid var(--ink3); border-radius:3px; background:transparent; cursor:pointer; }
#monthly-view-check:checked { background:var(--green-dp); border-color:var(--green-dp); }
#monthly-view-check:checked::after { content:''; width:6px; height:3px; border-left:1.5px solid var(--paper-hi); border-bottom:1.5px solid var(--paper-hi); transform:rotate(-45deg) translateY(-1px); }
#monthly-view-check:focus-visible { outline:1px solid var(--green-dp); outline-offset:2px; }

/* Past-due funding lives with its bill; no extra agenda row or amount column. */
.past-due-cue { display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; width:24px; height:24px; margin-left:6px; padding:3px; border:0; background:transparent; color:var(--ink3); cursor:pointer; flex-shrink:0; }
.past-due-cue .goal-icon { width:18px; height:18px; margin:0; }
.past-due-cue.ready { color:var(--green); }
.past-due-cue:focus-visible { outline:none; border-radius:3px; box-shadow:inset 0 0 0 1px var(--ink3); }

.record-past-due-money { display:inline-flex; align-items:baseline; gap:6px; margin-left:auto; min-width:0; }
.record-past-due-money > span { color:var(--ink3); }
.record-past-due-money input { min-width:0; width:72px; text-align:right; }

/* Conventional budget menu: one action per row, native keyboard disclosures. */
#tools-sheet .tools-submenu { border-top:1px solid var(--rule); }
#tools-sheet .tools-submenu > summary { cursor:pointer; display:list-item; list-style-position:inside; }
#tools-sheet .tools-submenu > button { padding-left:28px; }
#tools-sheet .tools-item { width:100%; text-align:left; }
#tools-sheet .tools-item[aria-current="true"] { color:var(--green); font-weight:700; opacity:1; }
#tools-sheet #ynab-refresh { border-top:1px solid var(--rule); }

/* Persistent, quiet affordance for editable/openable period values. */
#view-plan :is(.period-cash-edit,.period-stashes-link,button.mobile-check-amount,.period-paycheck-link,button.receipt-start .receipt-amt),
.protection-cash strong {
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
#view-plan :is(.period-cash-edit,.period-stashes-link,button.mobile-check-amount,.period-paycheck-link):focus-visible {
  outline:none;
  text-decoration-style:solid;
  text-decoration-color:currentColor;
}

/* Ready stashes use the checkbox lane for their ribbon and title-side actions. */
#view-plan .goal-due-card.stash-ready > .goal-readiness-control { position:static; grid-column:1; grid-row:1 / 3; align-self:center; justify-self:center; display:grid; place-items:center; width:28px; height:32px; margin:0; padding:0; }
#view-plan .goal-due-card.stash-ready .stash-ready-ribbon { width:15px; height:21px; }
#view-plan .goal-due-card.stash-ready .goal-due-title > .goal-due-actions { display:flex; flex:0 0 auto; align-self:center; margin-left:4px; }
@media (hover:hover) and (pointer:fine) {
  #view-plan .goal-due-card.stash-ready .goal-due-actions { opacity:0; pointer-events:none; }
  #view-plan .goal-due-card.stash-ready:hover .goal-due-actions,
  #view-plan .goal-due-card.stash-ready:focus-within .goal-due-actions { opacity:1; pointer-events:auto; }
}

#view-plan .goal-due-card .goal-contributions-link { width:36px; min-width:36px; }

/* Completed milestones use the same checked marker as paid bills. */
#view-plan .goal-paid-check { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:18px; height:18px; border:1.5px solid var(--ink2); border-radius:4px; background:var(--ink2); color:var(--paper-hi,#f7f8f6); font:650 13px/1 var(--sans); }

#stash-spending-dialog form > label { display:block; margin:12px 0; font:13px/1.5 var(--sans); }
#stash-spending-dialog input[type="number"], #stash-spending-dialog select { display:block; width:100%; box-sizing:border-box; min-height:40px; border:0; border-bottom:1px solid var(--ink2); background:transparent; color:var(--ink); font:inherit; }
#stash-spending-dialog :is(input,select):focus { outline:none; border-bottom:2px solid var(--green); }


#stash-spending-dialog .stash-cash-included { display:flex; align-items:center; gap:8px; color:var(--ink2); font-size:12px; }
#stash-spending-dialog input[type="checkbox"] { accent-color:var(--green); width:16px; height:16px; flex:none; }

/* Today uses the same trailing amount edge as the other pay periods. */
#view-plan .set-aside-drawer > .rollup-tab { padding-right:0; }
#view-plan .set-aside-drawer > .today-stash-action { right:calc(var(--ledger-money-width,88px) + 12px); }

/* Completed rows are a review option, separate from the section disclosure. */
#view-plan .has-completed-toggle { position:relative; }
#view-plan .has-completed-toggle > .rollup-tab { padding-right:125px; }
#view-plan .show-completed-toggle { position:absolute; right:0; top:0; min-height:40px; display:flex; align-items:center; gap:5px; font:11px var(--sans); color:var(--ink2); cursor:pointer; }
#view-plan .show-completed-toggle input { accent-color:var(--green); margin:0; }
#view-plan .show-completed-toggle:has(input:disabled) { color:var(--ink3); opacity:.55; cursor:default; }
#view-plan .unpaid-total { font:11px var(--sans); color:var(--ink2); margin-left:8px; white-space:nowrap; }
#view-plan .has-completed-toggle > .rollup-tab > .rollup-tab-amt { display:none; }
#view-plan .all-paid-note { padding:8px 12px; margin:0; font:12px var(--sans); color:var(--ink2); }
#view-plan .show-completed-toggle { z-index:5; }
#view-plan .has-completed-toggle:has(> .today-agenda) > .show-completed-toggle { min-height:24px; }
#view-plan .has-completed-toggle > .today-agenda > .bill-day-group:first-child > .bill-day-heading { padding-right:125px; }
#view-plan .has-completed-toggle > .today-agenda > .all-paid-note { padding-top:30px; }

/* Completion stays in the checkbox lane; protection stays beside the name. */
#view-plan .goal-due-card.simple-goal .goal-due-title > .goal-due-actions { opacity:1; pointer-events:auto; display:inline-flex; position:static; }
#view-plan .goal-due-card.simple-goal .goal-due-actions .goal-contributions-link { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:4px; }
#view-plan .goal-due-card.simple-goal .goal-due-actions .goal-fuel-gauge { position:static; display:block; width:26px; height:22px; }
#view-plan .goal-due-card.simple-goal .goal-due-actions .stash-action-icon { display:block; width:20px; height:20px; }
#view-plan .goal-due-card.simple-goal:not(.paid) .goal-paid-check { background:transparent; }
#view-plan .goal-due-card.simple-goal.paid .goal-due-name { text-decoration:line-through; }

#mobile-record-dialog .mobile-record-toolbar button.record-show-plan { background:transparent; border:0; box-shadow:none; color:var(--ink3); font:400 11px var(--sans); text-decoration:none; cursor:pointer; }

#mobile-record-dialog .mobile-record-toolbar button.record-show-plan:focus-visible { outline:none; box-shadow:none; background:rgba(80,90,75,.07); }
@media (hover:hover) {
  #mobile-record-dialog .mobile-record-toolbar button.record-show-plan:hover { outline:none; box-shadow:none; background:rgba(80,90,75,.07); }
}
@media (min-width:1200px) {
  #mobile-record-dialog .mobile-record-toolbar { position:relative; }
  #mobile-record-dialog .mobile-record-toolbar button.record-show-plan { position:absolute; left:50%; transform:translateX(-50%); }
}
@media (max-width:1199px) {
  #mobile-record-dialog .mobile-record-toolbar { flex-wrap:wrap; }
  #mobile-record-dialog .mobile-record-toolbar button.record-show-plan { order:10; flex-basis:100%; text-align:center; }
}

#mobile-record-dialog .mobile-record-toolbar button.record-show-plan { transition:none; animation:none; }

@media (max-width:1199px) {
  #view-plan .show-completed-toggle { display:none; }
  #view-plan .has-completed-toggle > .rollup-tab { padding-right:0; }
  #view-plan .has-completed-toggle > .today-agenda > .bill-day-group:first-child > .bill-day-heading { padding-right:0; }
}

/* One primary payment action, with quiet cash-neutral completion below. */
#actual-payment-dialog .plan-confirm-actions { flex-direction:column; gap:4px; }
#actual-payment-dialog .payment-secondary-actions { display:flex; justify-content:space-between; gap:12px; }
#actual-payment-dialog .payment-secondary-actions button { background:transparent; border-color:transparent; color:var(--ink2); font-weight:500; min-height:44px; }
@media (hover:hover) { #actual-payment-dialog .payment-secondary-actions button:hover { background:var(--sheet-hi); color:var(--ink); } }

/* Quiet, structured menus: stable rows and small non-collapsible captions. */
#tools-sheet .tools-menu { padding:8px; }
#tools-sheet .tools-section-label { padding:8px 12px 6px; color:var(--ink3); font:600 10px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
#tools-sheet .tools-section-divider { margin-top:8px; padding-top:12px; border-top:1px solid var(--rule); }
#tools-sheet .tools-menu .tools-item { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 12px; border:0; border-radius:5px; font:500 13px/1.4 var(--sans); color:var(--ink); text-decoration:none; }
#tools-sheet .tools-menu .tools-item:disabled { color:var(--ink3); opacity:.55; cursor:default; background:transparent; }
#tools-sheet .tools-menu .tools-item[aria-current="true"] { color:var(--green-dp); background:var(--sheet); font-weight:600; cursor:default; }
#tools-sheet .tools-item[aria-current="true"]::after { content:'✓'; font-size:13px; }
#tools-sheet .tools-menu .tools-item:focus-visible { background:var(--sheet); box-shadow:inset 0 0 0 1px var(--rule-3); outline:none; text-decoration:none; }
#tools-sheet .record-help { padding:0 0 7px; }
@media (hover:hover) { #tools-sheet .tools-menu .tools-item:not(:disabled):hover { background:var(--sheet); } }

#tools-sheet.modal-sheet { background-color:#f3efe3; }

/* A small gauge leaves the stash name room; the editable balance stays beside it. */
#protection-review .protection-item { grid-template-columns:minmax(0,1fr) 30px; column-gap:6px; row-gap:1px; }
#protection-review .protection-item strong { grid-column:1; grid-row:1; }
#protection-review .protection-item small { display:contents; }
#protection-review .stash-row-gauge { grid-column:2; grid-row:1 / 3; align-self:center; color:var(--green); }
#protection-review .stash-row-gauge svg { display:block; width:30px; height:22px; }
#protection-review .stash-row-gauge svg text { display:none; }
#protection-review .protection-item .stash-meter-date { grid-column:1; grid-row:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#protection-review .protection-item .stash-meter-date.has-unplanned { grid-column:1 / -1; }
#protection-review .protection-item:has(.has-unplanned) .stash-row-gauge { grid-row:1; }

.ynab-source-status.needs-review { background:#f1e3bd; color:#755717; border-radius:4px; padding:4px 7px; white-space:nowrap; }
.period-cash-review { display:block; color:#755717; font:400 10px/1.4 var(--sans); margin-top:3px; }

/* Individual protection occupies the existing leading icon slot. */
.set-aside-lock-row { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; position:relative; min-width:0; }
.set-aside-lock-row > .set-aside-stash-row > .goal-icon { visibility:hidden; }
.set-aside-lock-action { position:absolute; left:0; top:0; bottom:0; width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; border:0; padding:0; background:transparent; color:var(--ink2); cursor:pointer; }
.set-aside-lock-action svg { width:20px; height:20px; display:block; flex:0 0 20px; }
.set-aside-lock-action.is-locked { color:var(--green-dp); }
.set-aside-lock-action:focus-visible { outline:none; box-shadow:inset 0 -2px var(--green-dp); }
@media(hover:hover){ .set-aside-lock-action:hover { background:rgba(40,100,75,.06); } }

/* One quiet, shared Plan filter; it only changes which editor rows are visible. */
#schedule-search { display:flex; align-items:center; gap:8px; min-width:0; width:100%; max-width:460px; height:40px; border-bottom:1px solid var(--bd2); color:var(--ink2); box-sizing:border-box; }
#schedule-search[hidden], #schedule-search-clear[hidden], #view-schedule .inc-card[hidden], .schedule-search-empty[hidden] { display:none !important; }
#schedule-search > svg { flex:0 0 18px; width:18px; height:18px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
#schedule-search-input { flex:1; min-width:0; width:100%; height:40px; margin:0; padding:0; border:0; border-radius:0; outline:none; box-shadow:none; background:transparent; color:var(--ink); font:400 16px/1.3 var(--sans); -webkit-appearance:none; }
#schedule-search-input::placeholder { color:var(--ink2); opacity:.85; }
#schedule-search-input::-webkit-search-cancel-button { -webkit-appearance:none; }
#schedule-search:focus-within { border-bottom-color:var(--teal); }
#schedule-search-clear { flex:0 0 40px; width:40px; height:40px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--ink2); font:400 22px/1 var(--sans); cursor:pointer; }
#schedule-search-clear:focus-visible { background:rgba(80,90,70,.1); outline:1px solid var(--bd2); }
@media (hover:hover) { #schedule-search-clear:hover { background:rgba(80,90,70,.08); } }
.schedule-search-empty { padding:16px 4px; color:var(--ink2); font:400 14px/1.4 var(--sans); }

#schedule-search-count { flex:none; white-space:nowrap; color:var(--ink2); font:500 11px/1.3 var(--sans); }
#schedule-search-count[hidden] { display:none; }
/* Shared compact forecast: text and bars have separate, readable lanes. */
#compact-chart { display:none; width:100%; height:64px; outline:none; }
#desktop-compact-balance { display:none; padding:0; border:0; background:transparent; color:var(--ink2); cursor:pointer; font:500 11px/1.2 var(--sans); }
#desktop-compact-balance:focus-visible { outline:none; text-decoration:underline; }
#compact-chart:focus-visible .compact-selection-pointer { stroke-width:2.5; }
/* Persistent automatic savings switch shares the horizon bar. */
/* A physical latch: raised when off, pressed in when on. Border and size never change between states. */
.auto-stash-power { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:32px; height:32px; padding:5px; border:1px solid var(--bd2); border-radius:var(--r-sm); background:var(--paper-hi,#fffdf8); color:var(--ink2); cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(60,48,32,.18); }
.auto-stash-power svg { width:14px; height:14px; }
.auto-stash-power[aria-pressed="true"] { color:var(--green-dp); background:var(--s2); box-shadow:inset 0 2px 4px rgba(60,48,32,.3), inset 0 0 0 1px rgba(60,48,32,.06); }
.auto-stash-power:not(:disabled):active { box-shadow:inset 0 2px 4px rgba(60,48,32,.28); }
.auto-stash-power:disabled { color:var(--ink3); background:transparent; box-shadow:none; opacity:.55; cursor:default; }
.auto-stash-power:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
/* A noninteractive count sits immediately beside the recurring record name. */
#view-plan .bcard-name.has-occurrence-count { display:flex; align-items:center; gap:2px; overflow:visible; }
#view-plan .bcard-name.has-occurrence-count > .stag:is(.today,.paid) { display:none; }
.occurrence-name-text { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.occurrence-count { flex:0 0 auto; font:500 9px/1 var(--sans); color:var(--ink2); transform:translateY(-5px); white-space:nowrap; pointer-events:none; }
/* Compact non-agenda bills expose timing directly; no disclosure card. */
.bill-row-exception { display:block; color:var(--warn,var(--ink)); font:600 10px/1.4 var(--sans); }
/* Header controls occupy their own tracks, including when savings are folded. */
#view-plan .set-aside-drawer:not(.today-savings-details) { display:grid; grid-template-columns:minmax(0,1fr) 32px 32px max(68px,var(--period-amount-width,64px)); padding-inline:10px; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .rollup-tab { display:grid; grid-template-columns:subgrid; grid-column:1/-1; grid-row:1; padding-inline:0; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .rollup-tab > :first-child { grid-column:1; min-width:0; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .rollup-tab > .rollup-tab-amt { grid-column:4; margin:0; text-align:right; width:auto; min-width:0; padding:0; visibility:visible; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .today-stash-action { position:relative; inset:auto; grid-column:3; grid-row:1; align-self:center; z-index:5; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .rollup-body { grid-column:1/-1; grid-row:2; }
#view-plan .set-aside-drawer .rollup-body.open { grid-template-columns:32px minmax(0,1fr) minmax(100px,150px) max(68px,var(--period-amount-width,64px)); padding-inline:0; }
#view-plan .set-aside-drawer .set-aside-stash-row { padding:9px 0; gap:8px; }
#view-plan .set-aside-drawer .set-aside-name { font-weight:600; }
#view-plan .set-aside-drawer .set-aside-amount { padding:0; }
@media(hover:hover) { .auto-stash-power[aria-pressed="false"]:not(:disabled):hover { background:var(--bg); } }
.sa-act-label, .set-aside-note { display:none; }
.rollup-tab-summary { display:none; }
.set-aside-stash-row.no-target .stash-meter { display:none; }
.set-aside-off { opacity:.42; filter:grayscale(1); pointer-events:none; }
.set-aside-off .set-aside-amount { text-decoration:line-through; }
/* The savings drawer heading stays independent of Lock all. */
#view-plan .set-aside-drawer:not(.today-savings-details) { grid-template-columns:minmax(0,1fr) max-content max(68px,var(--period-amount-width,64px)); }
#view-plan .set-aside-heading { grid-column:1; grid-row:1; display:flex; align-items:center; gap:6px; min-width:0; }
#view-plan .set-aside-heading > .rollup-tab { display:flex; flex:0 1 auto; min-width:0; padding-inline:0; }
#view-plan .set-aside-heading .sa-act-label { display:none; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .today-stash-action { grid-column:2; }
#view-plan .set-aside-drawer > .rollup-tab-amt { grid-column:3; grid-row:1; align-self:center; text-align:right; margin:0; }
#view-plan .set-aside-heading > .rollup-tab { width:auto; padding:6px 0; }
#view-plan .set-aside-heading .rollup-tab-left { gap:8px; }
#view-plan .set-aside-heading .rollup-tab-lbl { white-space:nowrap; font:600 13px/1.4 var(--sans); letter-spacing:0; text-transform:none; }
#view-plan .set-aside-drawer > .rollup-tab-amt { width:auto; min-width:0; padding:0; border:0; color:var(--ink); }
/* One savings section and one header in both Today modes. */
#view-plan .set-aside-drawer { border:0; border-radius:0; box-shadow:none; background:transparent; }
#view-plan .set-aside-heading > .rollup-tab { padding:6px 0; min-height:46px; }
#view-plan #pg-cur.period-today .sw-content > .rollup-wrap .rollup-env { display:none; }
#view-plan #pg-cur.period-today .sw-content > .rollup-wrap .rollup-chev { width:10px; flex:0 0 10px; }
#view-plan .set-aside-drawer > .rollup-body { overflow-x:hidden; }
.today-stash-action:disabled { cursor:default; color:var(--ink3); }
/* Disclosure alignment applies to every selected pay period. */
#view-plan .sw-page .sw-content > .rollup-wrap .rollup-env { display:none; }
#view-plan .sw-page .sw-content > .rollup-wrap .rollup-chev { width:10px; flex:0 0 10px; }
.period-section-header-paper { display:none; }
/* Each section pins its heading, amount and controls as one paper row. */
#view-plan .sticky-period-sections .sw-content > .rollup-wrap { overflow:visible; display:grid; }
#view-plan .sticky-period-sections .sw-content > .rollup-wrap > .rollup-tab { grid-column:1/-1; grid-row:1; position:sticky; top:0; z-index:6; background:var(--paper-hi); }
#view-plan .sticky-period-sections .sw-content > .rollup-wrap > .rollup-body { grid-column:1/-1; grid-row:2; }
#view-plan .sticky-period-sections .sw-content > .rollup-wrap > .show-completed-toggle { grid-column:1/-1; grid-row:1; justify-self:end; position:sticky; top:0; right:auto; z-index:7; background:var(--paper-hi); }
#view-plan .sticky-period-sections .set-aside-drawer > :is(.set-aside-heading,.today-stash-action,.rollup-tab-amt) { position:sticky; top:0; z-index:6; background:var(--paper-hi); }
#view-plan .sticky-period-sections .period-section-header-paper { display:block; grid-column:1/-1; grid-row:1; position:sticky; top:0; z-index:5; background:var(--paper-hi); align-self:stretch; }
#view-plan .sticky-period-sections { --section-header-height:46px; }
#view-plan .sticky-period-sections .set-aside-drawer:not(.today-savings-details) > .rollup-tab-amt { position:sticky; top:calc((var(--section-header-height) - 1lh)/2); }
#view-plan .sticky-period-sections .set-aside-drawer:not(.today-savings-details) > .today-stash-action { position:sticky; top:calc((var(--section-header-height) - 32px)/2); }

.hrz-left { flex:1 1 auto; min-width:0; }
.hrz-left > .auto-stash-power { margin-left:auto; width:auto; min-width:44px; min-height:44px; height:44px; padding:0 10px; gap:6px; font:500 11px var(--sans); }
.hrz-left > .auto-stash-power svg { width:18px; height:18px; flex:0 0 18px; }

/* Optional recurrence dates can return to ongoing from the calendar itself. */
.mcal-clear { display:block; width:100%; min-height:44px; border-top:1px solid var(--bd); color:var(--ink2); font:600 12px/1.3 var(--sans); }
.mcal-clear[hidden] { display:none; }
.mcal-clear:focus-visible { outline:none; text-decoration:underline; }
@media(hover:hover) { .mcal-clear:hover { background:var(--s2); } }


/* Timing is a quiet, fixed-width instrument. Hover reveals full-sized arrows. */
.bill-slack { display:inline-flex; align-items:center; justify-content:center; width:48px; height:32px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--ink2); cursor:pointer; }
.bill-slack svg { display:block; width:auto; max-width:46px; height:12px; overflow:visible; }
.bill-slack-line { fill:none; stroke:var(--ink3,#a6a39e); stroke-width:1; }
.bill-slack-dot { fill:var(--paper-hi,#f4f0e6); stroke:var(--ink3,#a6a39e); stroke-width:1; }
.bill-slack-dot.passed { fill:var(--ink3,#a6a39e); }
.bill-slack-dot.current { fill:var(--indigo,#41698c); stroke:var(--indigo,#41698c); }
.bill-slack-dot.terminal.current, .bill-slack-dot.past-limit { fill:var(--red,#a04e42); stroke:var(--red,#a04e42); }
.bill-slack-move { fill:none; stroke:var(--indigo,#41698c); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.bill-slack-gap { fill:none; stroke:var(--paper-hi,#f4f0e6); stroke-width:3; }
.bill-timing-step { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--ink2); cursor:pointer; }
.bill-timing-step:disabled { color:var(--ink3); cursor:default; }
:is(.bill-slack,.bill-timing-step):focus-visible { outline:1px solid var(--indigo); outline-offset:-2px; }
@media(hover:hover) { :is(.bill-slack,.bill-timing-step:not(:disabled)):hover { color:var(--indigo); background:rgba(65,105,140,.07); } }
.bill-timing-menu { position:fixed; z-index:1200; width:248px; max-width:calc(100vw - 16px); padding:12px; border:1px solid var(--bd); border-radius:7px; background:var(--paper-hi); color:var(--ink); box-shadow:0 4px 14px rgba(43,36,26,.16); }
.bill-timing-menu-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 13px/1.4 var(--sans); }
.bill-timing-menu-current { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:48px; padding:5px 4px; border-radius:4px; background:var(--indigo); color:#fff; }
.bill-timing-menu-current-label { display:flex; align-items:center; gap:3px; font:600 11px/1.3 var(--sans); }
.bill-timing-menu-current svg { flex:none; }
.bill-timing-menu-current strong { font:700 13px/1.3 var(--sans); white-space:nowrap; }
.bill-timing-menu-detail { margin-top:2px; color:var(--ink2); font:400 11px/1.4 var(--sans); }
.bill-timing-menu-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px; margin-top:10px; padding:3px; border:1px solid var(--bd); border-radius:7px; }
.bill-timing-menu-actions button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:48px; padding:5px 4px; border:0; border-radius:4px; background:transparent; color:var(--ink); font:600 11px/1.3 var(--sans); cursor:pointer; }
.bill-timing-menu-action-label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.bill-timing-menu-action-label svg { flex:none; }
.bill-timing-menu-actions small { font:400 11px/1.3 var(--sans); }
.bill-timing-menu-actions button:disabled { color:var(--ink3); cursor:default; }
.bill-timing-menu-actions button:focus-visible { outline:1px solid var(--indigo); outline-offset:-3px; }
@media(hover:hover) { .bill-timing-menu-actions button:not(:disabled):hover { background:rgba(65,105,140,.07); } }

/* Outlook amounts that reduce this period's cash read as subtractions. The
   minus is a display prefix only: amounts stay positive wherever they are typed. */
#view-plan .rollup-body .bcard:not(.paid) .bcard-amt::before,
#view-plan .rollup-body .set-aside-amount::before,
#view-plan .rollup-wrap :is(.rollup-tab-amt,.unpaid-total)::before,
#view-plan .set-aside-held-row .period-stashes-link::before,
#view-plan .desktop-period-stat:is(.bills,.savings) strong::before { content:"\2212"; margin-right:1px; }

/* With Auto-stash inactive, held stash money is one line that opens My stashes. */
/* It is a ledger line in the Due column, not a section heading: the label lines
   up with "Due by …" (the chevron keeps its slot), reads at row weight, and sits on
   the same rule as the rows above with no heading band. */
.stash-summary-line > .rollup-body,
.stash-summary-line .rollup-tab-detail,
.stash-summary-line .rollup-env { display:none !important; }
.stash-summary-line .rollup-chev { visibility:hidden; }
.stash-summary-line .rollup-tab { cursor:pointer; }
#view-plan .stash-summary-line :is(.set-aside-heading,.rollup-tab,.rollup-tab-amt) { background:transparent; }
#view-plan .stash-summary-line .rollup-tab-lbl { font:500 14px/1.25 var(--sans); color:var(--ink2); letter-spacing:0; text-transform:none; }
#view-plan .stash-summary-line { border-bottom:1px solid rgba(74,65,43,.18); }
@media(hover:hover){ #view-plan .stash-summary-line:hover .rollup-tab-lbl { color:var(--ink); } }

/* Paid rows take no timing controls, and disabled legacy Earlier/Later arrows
   are never shown; the column stays so amounts keep their alignment. */
#view-plan .bcard.paid > .transport,
#view-plan .bcard .transport > .tr-btn:is(.back,.fwd):disabled { visibility:hidden; pointer-events:none; }

/* Cash privacy is a display choice, with a separate explicit edit action. */
.cash-head-wrap,.savings-cash-controls { display:flex; align-items:flex-end; gap:4px; min-width:0; }
.cash-metric-wrap { display:contents; }
.cash-edit-action { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:32px; padding:4px; border:0; background:transparent; color:var(--ink2); cursor:pointer; }
.cash-edit-action[hidden] { display:none !important; }
.cash-edit-action svg { width:14px; height:14px; }
.cash-edit-action:focus-visible,[data-cash-control]:focus-visible { outline:1px solid var(--ink2); outline-offset:2px; border-radius:2px; }
[data-cash-control] { touch-action:manipulation; }
.cash-is-hidden [data-cash-value],.cash-is-hidden[data-cash-value] { letter-spacing:.08em; }
#protection-review .protection-summary { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
#protection-review .protection-summary > div { min-width:0; align-self:start; }
#protection-review .protection-summary .savings-funded-summary { display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:4px; background:none; border:0; border-radius:0; width:auto; height:auto; margin:0; }
#protection-review .savings-funded-summary strong { color:var(--ink); font:400 17px/1.2 var(--serif); font-variant-numeric:tabular-nums; }
#protection-review .protection-cash { min-width:0; border:0; padding:0; background:transparent; color:inherit; cursor:pointer; text-align:left; }

#protection-review .protection-cash-edit-label { border:0; padding:0; margin:0; background:transparent; color:var(--ink2); font:400 11px/1.2 var(--sans); text-align:left; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }

/* Temporary editing paper beneath the one live forecast. */
#view-schedule.plan-editor-sheet {
  position:absolute; inset:var(--plan-sheet-top,50%) 0 0; z-index:6;
  padding:0; margin:0; min-height:0; width:auto; height:auto;
  background-color:#f0ede6; background-image:var(--agenda-grain); border:1px solid var(--rule,rgba(74,58,38,.18));
  border-bottom:0; border-radius:12px 12px 0 0;
  box-shadow:0 -5px 18px rgba(43,36,26,.13); overflow:hidden;
  transform:translateY(100%); visibility:hidden; pointer-events:none;
  transition:transform 220ms ease,visibility 220ms;
}
#view-schedule.plan-editor-sheet.active { transform:translateY(0); visibility:visible; pointer-events:auto; }
.plan-sheet-grip { display:flex; flex:none; align-items:center; justify-content:center; width:100%; height:20px; padding:0; border:0; background:transparent; cursor:grab; touch-action:none; }
.plan-sheet-grip span { width:34px; height:3px; border-radius:3px; background:var(--ink3); opacity:.6; }
#view-schedule.plan-editor-sheet > .pnav-bar { display:block; flex:none; height:auto; min-height:0; max-height:none; margin:0; padding:0 16px 8px; width:100%; border:0; background:transparent; box-shadow:none; }
#view-schedule.plan-editor-sheet .pnav-row { display:flex; position:static; align-items:center; gap:10px; height:44px; min-height:44px; padding:0; }
#view-schedule.plan-editor-sheet > .pnav-bar .pnav-center { position:static; transform:none; display:flex; flex:1; min-width:0; width:auto; margin:0; }
#view-schedule.plan-editor-sheet :is(#sch-pnav-datejump,#sch-date,#mobile-plan-range,.schedule-forecast-ledger) { display:none; }
#view-schedule.plan-editor-sheet #schedule-search { display:flex; align-items:center; width:100%; min-width:0; max-width:none; margin:0; gap:6px; }
#view-schedule.plan-editor-sheet #schedule-search > svg { flex:none; width:16px; height:16px; }
#view-schedule.plan-editor-sheet #schedule-search-input { text-align:left; width:0; min-width:0; flex:1; font:400 15px/1.3 var(--sans); }
#view-schedule.plan-editor-sheet #schedule-search-count { flex:none; font-size:11px; }
#view-schedule.plan-editor-sheet #schedule-search-clear { flex:none; width:32px; height:44px; }
#view-schedule.plan-editor-sheet #schedule-search-clear[hidden] { display:none; }
#view-schedule.plan-editor-sheet #schMasterBtn { flex:none; position:static; margin:0; }
#view-schedule.plan-editor-sheet #monthly-view-control { margin:0; }
#view-schedule.plan-editor-sheet #monthly-view-control[hidden] { display:none; }
.plan-editor-frost { display:none; }
#plan-card-controls { display:none; }
.plan-sheet-grip:focus-visible { outline:2px solid var(--ink2); outline-offset:-3px; }
.plan-editor-open #desktop-plan-tools > #forecast-view-toggle { visibility:hidden; }
@media(prefers-reduced-motion:reduce){ #view-schedule.plan-editor-sheet { transition:none; } }

/* Spend is a temporary paper card, like Bills & paychecks, over Outlook. */
#mobile-expense-sheet.expense-card {
  position:absolute; z-index:12; left:50%; right:auto; bottom:8px;
  width:min(440px,calc(100% - 32px)); max-height:calc(100% - var(--expense-sheet-top,0px) - 16px);
  margin:0; padding:0 18px 16px; overflow-y:auto; overscroll-behavior:contain;
  background-color:#f0ede6; background-image:var(--agenda-grain);
  border:1px solid var(--rule,rgba(74,58,38,.18)); border-radius:18px;
  box-shadow:0 -6px 24px rgba(43,36,26,.18),0 8px 24px rgba(43,36,26,.18);
  align-items:stretch; gap:8px; transform:translate(-50%,calc(100% + 16px));
  transition:transform 220ms ease;
}
#mobile-expense-sheet.is-open { transform:translate(-50%,0); }
#mobile-expense-sheet > * { flex-shrink:0; }
#mobile-expense-sheet .expense-sheet-grip { width:calc(100% + 36px); margin:0 -18px -8px; height:28px; }
#mobile-expense-sheet .ec-header { min-height:36px; gap:12px; }
#mobile-expense-sheet .ec-name { font:500 21px/1.25 var(--serif); color:var(--ink); text-transform:none; letter-spacing:0; }
#mobile-expense-sheet .ec-field-label { font:600 13px/1.3 var(--sans); color:var(--ink2); }
#mobile-expense-sheet .ec-name-input {
  min-height:44px; padding:10px 12px; border:1px solid var(--bd2); border-radius:6px;
  background:var(--paper-hi); font:400 16px/1.4 var(--sans); text-align:left; margin-bottom:6px;
}
#mobile-expense-sheet .ec-name-input::placeholder { font-style:normal; color:var(--ink2); }
#mobile-expense-sheet .ec-name-input:focus-visible { outline:2px solid var(--indigo); outline-offset:1px; }
#mobile-expense-sheet .ec-stepper { display:grid; grid-template-columns:44px minmax(90px,1fr) 44px; gap:8px; }
#mobile-expense-sheet .ec-amt,#mobile-expense-sheet .ec-amt-input { width:100%; min-width:0; font:500 30px/1.2 var(--serif); text-align:center; }
#mobile-expense-sheet .ec-label { font:400 12px/1.4 var(--sans); color:var(--ink2); text-align:center; letter-spacing:0; text-transform:none; }
#mobile-expense-sheet .ec-remove,#mobile-expense-sheet .ec-step-btn { min-width:44px; min-height:44px; }
#mobile-expense-sheet .ec-btn-schedule { min-height:44px; font:600 15px/1.3 var(--sans); text-transform:none; letter-spacing:0; background:var(--green-dp); color:var(--paper-hi); }
#mobile-expense-sheet .ec-btn-schedule:disabled { background:#d8d5cb; color:#5e5b52; opacity:1; }
@media(max-width:1199px){#mobile-expense-sheet.expense-card { transform:translateY(calc(100% + 16px)); } #mobile-expense-sheet.is-open { transform:translateY(0); }}
@media(prefers-reduced-motion:reduce){#mobile-expense-sheet.expense-card { transition:none; }}

/* A pocket edits the existing amount; it never adds a header row. */
#pocket-budget-action { display:inline-flex; flex:none; align-items:center; justify-content:center; box-sizing:border-box; width:36px; height:36px; padding:11px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--ink2); cursor:pointer; touch-action:manipulation; }
#pocket-budget-action[hidden] { display:none; }
#pocket-budget-action svg { width:14px; height:14px; }
#pocket-budget-action .pocket-clear-icon, #pocket-budget-action[data-active="true"] .pocket-set-icon { display:none; }
#pocket-budget-action[data-active="true"] .pocket-clear-icon { display:block; }
#pocket-budget-action:focus-visible { outline:1px solid var(--ink2); outline-offset:1px; }
@media(hover:hover) { #pocket-budget-action:hover { color:var(--ink); } }
#stash-funding-metric[data-pocket-state] #stash-funding-percent::after { font:500 11px/1 var(--sans); color:var(--ink2); vertical-align:middle; }
#stash-funding-metric[data-pocket-state="over"] #stash-funding-percent::after { content:" over"; }
#stash-funding-metric[data-pocket-state="used"] #stash-funding-percent::after { content:" used"; }
#stash-funding-metric[data-pocket-state="limited"] #stash-funding-percent::after { content:" available"; }
#stash-funding-metric[data-pocket-state="over"] #stash-funding-percent { background:#eadfc7; border-radius:3px; }
#pocket-budget-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.pocket-budget-dialog h2 { padding-right:28px; }
.pocket-budget-dialog .pocket-padding { color:var(--ink2); font-size:12px; }
.pocket-budget-dialog label { display:flex; flex-direction:column; gap:5px; margin:16px 0 12px; color:var(--ink2); font:600 12px/1.4 var(--sans); }
.pocket-budget-dialog input { box-sizing:border-box; width:100%; min-width:0; min-height:44px; border:0; border-bottom:1px solid var(--rule-3); border-radius:0; padding:6px 0; background:transparent; color:var(--ink); font:400 21px/1.3 var(--serif); }
.pocket-budget-dialog .payment-error { font:600 12px/1.5 var(--sans); }
.pocket-budget-dialog .payment-error:empty { display:none; }
.pocket-budget-dialog .plan-confirm-actions { flex-wrap:wrap; margin-top:16px; gap:8px; }
.pocket-budget-dialog .plan-confirm-actions button { min-height:44px; }