/* Phone ledger — the desktop design, recomposed for one hand.
   One shared money band and forecast plate; one scrolling selected period.
   All touch controls use 44px targets. No competing legacy gauge or status. */
:root {
  --mobile-gutter: clamp(14px,4vw,24px);
  --mobile-heading-padding: 16px;
  --mobile-heading-font: 500 21px/1.25 var(--serif);
  --mobile-support-font: 500 12px/1.5 var(--sans);
  --mobile-ledger-money: 600 20px/1.25 var(--serif);
  --mobile-secondary-ink: #4f4638;
  --mobile-rule: rgba(74,58,38,.28);
  --mobile-paper: #f5f0e6;
  --mobile-chrome: #e6dfcf;
  --paper: #eee9df;
  --paper-hi: #f5f0e6;
  --ground: #e2dacb;
  --sheet: #eee9df;
  --sheet-hi: #f5f0e6;
  --ink: #2b241a;
  --ink2: #584d3c;
  --ink3: #5d5242;
  --green: #1e6b50;
  --green-dp: #14513c;
  --indigo: #43688f;
  --tap-min: 44px;
  --nav-plan-color: #4e4a68;
}
html { background: var(--mobile-chrome); }
.ynab-mode-row { display: none; } /* Local-only connection controls stay on desktop. */
body, .app { background: var(--paper); }
body { font-family: var(--sans); }
.app { margin-inline: auto; }
button:disabled { cursor: default; }
button:active:not(:disabled) { filter: brightness(.94); }
input,select,textarea { font-size: 16px; }

/* Brand and two obvious destinations; cash lives in the shared money band. */
.app-header {
  min-height: 50px;
  padding: calc(2px + env(safe-area-inset-top,0px)) var(--mobile-gutter) 2px;
  gap: 2px;
  background: var(--mobile-chrome);
  border-bottom: 1px solid var(--mobile-rule);
  box-shadow: none;
}
.brand { flex: 1; min-width: 0; }
.brand-name { color: var(--green-dp); font-size: 29px; }
.hdr-cash { display: none; }
.hdr-wishlist, .desktop-header-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; color: var(--ink2);
}
.desktop-header-menu { order: 3; }
.desktop-header-menu svg, .hdr-wishlist svg { width: 20px; height: 20px; }
.hdr-wishlist .wishlist-earned-count { top: 1px; right: 0; }

/* The same two answers as desktop. Shortfall text owns reserved vertical room. */
.view-stack > .desktop-money-now {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: block; flex: 0 0 60px; height: 60px;
  padding: 9px var(--mobile-gutter) 4px;
  background: #ebe4d5;
}
#view-plan, #view-schedule { padding-top: 60px; }
.desktop-money-now-heading, .desktop-money-fact.next, .desktop-money-fact.month,
.desktop-money-fact.safe small, #desktop-plan-story { display: none; }
.desktop-money-facts { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.desktop-cash-stack { flex: 1; min-width: 0; }
.desktop-money-fact { display: flex; flex-direction: column; gap: 3px; }
.desktop-money-fact.cash { min-height: 44px; text-align: left; }
.desktop-money-fact.safe { align-items: flex-end; text-align: right; max-width: 48%; }
.desktop-money-fact.safe > span { white-space: nowrap; }
.desktop-money-fact > span { font: 600 11px/1.2 var(--sans); color: var(--ink2); }
.desktop-money-fact strong { font: 600 22px/1.15 var(--serif); font-variant-numeric: tabular-nums; }
.desktop-money-fact.safe strong { color: var(--green-dp); font-size: 25px; }
.desktop-cash-shortfall {
  font: 600 11px/1.25 var(--sans); color: #8b392a;
  text-align: left; text-decoration: none;
}
.desktop-cash-shortfall[hidden] { display: none; }
.alert:not(.on) { visibility: hidden; }
.alert.on { top: auto !important; bottom: calc(68px + env(safe-area-inset-bottom,0px)); }
.alert-in { background: #f0e0d7; border: 1px solid var(--mobile-rule); border-image: none; padding: 12px 16px; }
.alert-txt { white-space: normal; line-height: 1.4; }

/* The forecast is the centrepiece of the phone app, not a strip above the
   forms. It gets the largest single block of the screen; everything below it
   discloses progressively rather than competing for the same pixels. */
#view-plan .chart-section, #view-schedule .chart-section {
  display: flex; flex-direction: column; flex: 0 0 var(--mobile-forecast-h,112px);
  height: var(--mobile-forecast-h,112px); min-height: var(--mobile-forecast-h,112px); padding: 0 var(--mobile-gutter) 4px;
  background-color: #ebe4d5;
  background-image: linear-gradient(rgba(107,96,63,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(107,96,63,.07) 1px,transparent 1px);
  background-size: 12px 12px; border: 0; transition: none;
}
/* Keep the same warm graph paper for Today and future periods. */
#chart-section-plan.od-tint { background-color: #ebe4d5; }
#view-plan .chart-labels, #view-schedule .chart-labels {
  align-items: center;
  margin: 0; padding: 0; gap: 8px;
}
.desktop-chart-heading { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; color: var(--ink2); font: 600 15px/1.2 var(--serif); text-align: left; cursor: pointer; white-space: nowrap; }
.desktop-chart-heading::after { content: '⌃'; font: 600 14px var(--sans); }
.mobile-forecast-summary { display: inline; color: var(--green-dp); font: 700 12px/1.2 var(--sans); overflow:hidden; text-overflow:ellipsis; }
.mobile-forecast-label { display:none; }
.mobile-forecast-compact .mobile-forecast-summary, .mobile-forecast-collapsed .mobile-forecast-summary { display: inline; }
.mobile-forecast-compact .desktop-chart-heading, .mobile-forecast-collapsed .desktop-chart-heading {
  display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 7px; row-gap: 1px;
  align-content: center;
}
.mobile-forecast-compact .mobile-forecast-label, .mobile-forecast-collapsed .mobile-forecast-label { grid-column: 1; font: 600 12px/1.2 var(--serif); }
.mobile-forecast-compact .mobile-forecast-summary, .mobile-forecast-collapsed .mobile-forecast-summary { grid-column: 1; white-space: nowrap; }
.mobile-forecast-compact .desktop-chart-heading::after, .mobile-forecast-collapsed .desktop-chart-heading::after { grid-column: 2; grid-row: 1; align-self: center; }
.mobile-forecast-collapsed .desktop-chart-heading::after { content: '⌄'; }
.mobile-forecast-collapsed #sch-chart, .mobile-forecast-collapsed .crochet-bar { display: none !important; }
.mobile-forecast-collapsed #desktop-plan-tools { display: grid; }
.mobile-forecast-collapsed :is(#view-plan,#view-schedule) .chart-labels { height: 52px; min-height: 52px; max-height: 52px; }
.chart-horizon-summary, .plan-verdict { display: none !important; }
.chart-heading-group { min-width: 0; align-items: center; gap: 7px; flex:1; }
#ah-mid-icon { display: flex; width: 28px; height: 20px; flex: 0 0 28px; align-items: center; justify-content: center; }
.chart-actions { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.chart-title { font: 700 11px/1 var(--sans); letter-spacing: 0; text-transform: none; min-height: 34px; height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; position:relative; }
.chart-title.clickable::after { content:''; position:absolute; inset:-3px 0; }
.chart-title.solve-on { padding: 0 10px; border-radius: 5px; box-shadow: none; }
.reset-plan-btn { width: 40px; height: 40px; color: var(--ink2); }
#view-plan #sch-chart, #view-schedule #sch-chart { display: block; width: 100%; height: 172px; flex: 1; min-height: 0; }
#sch-chart .chart-date-label { font: 600 10px var(--sans); fill: var(--ink2); }
#sch-chart:focus, #sch-chart:focus-visible { outline: none; }
#plan-chart-drag { display: flex; position: relative; z-index: 6; flex: 0 0 20px; height: 20px; border-bottom: 1px solid var(--mobile-rule); }
#plan-chart-drag .chart-drag-dots span { width: 32px; height: 3px; border-radius: 2px; background: rgba(88,77,60,.38); }
#plan-chart-drag .chart-drag-dots span:not(:first-child) { display: none; }
#view-plan .chart-section.collapsed, #view-schedule .chart-section.collapsed { flex-basis: 112px; height: 112px; }
.crochet-bar { flex: 0 0 16px; height: 16px; background-color: #ebe4d5; border: 0; box-shadow: none; }
#croch-svg { height: 16px; }
/* Nothing rescheduled means nothing to SAY — but the lane still holds its
   ground. Collapsing it made the entire page jump 26px every time Prefund
   added stitches or Undo removed them. Reserve the space, hide the contents. */
.crochet-bar.is-empty #croch-svg { visibility: hidden; }
#desktop-plan-tools { padding: 0 var(--mobile-gutter); background-color: #ebe4d5; }
/* One printed scale, not a segmented control: every range stays visible for
   context, the chosen one is simply darker and heavier. No container chrome,
   no raised selected block — those made the row read as a broken empty box. */
.hrz-left { display: flex; width: 100%; align-items: center; gap: 0; }
.hrz-pills { display: flex; flex: 0 0 auto; align-items: center; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hrz-pills::after { display: none; }
.hrz-pill { flex: 0 0 auto; min-width: 0; height: 44px; padding: 0 13px; border: 0; border-radius: 5px; background: transparent; box-shadow: none; font: 550 12px/1 var(--sans); letter-spacing: .02em; color: var(--ink3); opacity: 1; }
.hrz-pill.on { background: transparent; color: var(--green-dp); font-weight: 800; opacity: 1; box-shadow: none; }
.hrz-pill.default { color: var(--ink3); }
.hrz-pill.on.default { color: var(--green-dp); }
.hrz-mode-chip { min-height: 44px; padding: 0 11px; border: 0; background: transparent; font: 600 11px/1 var(--sans); color: var(--ink3); opacity: 1; letter-spacing: 0; }
.hrz-mode-chip.on { color: var(--green-dp); font-weight: 800; opacity: 1; }
/* A hairline separates the range pills from the unit toggle; the inherited middle dot read as a stray speck. */
.hrz-mode-chip::before { content: ''; display: inline-block; width: 1px; height: 18px; margin-right: 11px; vertical-align: middle; background: var(--mobile-rule); }

/* Date navigation: calendar and arrows are discoverable, not hidden gestures. */
.pnav-bar { flex: 0 0 auto; min-height: 48px; border-block: 1px solid var(--mobile-rule); background: var(--mobile-chrome); box-shadow: none; }
.pnav-row { min-height: 47px; padding: 0 6px; gap: 0; }
.pnav-arr { width: 44px; height: 44px; flex: 0 0 44px; margin: 0; border: 0; border-radius: 5px; background: transparent; box-shadow: none; font-size: 23px; color: var(--ink2); }
.pnav-center { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.pnav-datejump { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 44px; flex: 0 0 36px; }
.pnav-datejump svg { width: 17px; height: 17px; }
.pnav-name, .pname-date { color: var(--ink); font: 650 12px/1.3 var(--sans); }
.pnav-ledger { display: none !important; }
.pnav-master-btn { width: 44px; height: 44px; }

/* The period is a scrollable page; its summary and bills travel together. */
.cards-area { min-height: 0; max-width: none; --period-peek: calc(var(--mobile-gutter) + 12px); }
/* Keep twelve pixels of the next sheet visible after its normal gutter.
   Three equal pages preserve the existing one-third page-turn transforms. */
.sw-track { width: calc(300% - 3 * var(--period-peek)); }
.sw-page { flex: 0 0 calc(100% / 3); scrollbar-width: none; }
.sw-page::-webkit-scrollbar { display: none; }
.sw-track.end-edge, .sw-track.middle-period { position: relative; left: var(--period-peek); }
.sw-track.middle-period { width: calc(300% - 6 * var(--period-peek)); }
.sw-track.end-edge #pg-next { visibility: hidden; }
.sw-page:not(#pg-cur) > :not(.desktop-period-head) { opacity: 0; pointer-events: none; }
/* Bottom padding clears the fixed dock. Without it the last card — usually the
   editor you just opened — ends underneath the tab bar and cannot be scrolled
   into view, which is what made the forms feel like they had no room. */
.sw-page { overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; padding: 14px 0 calc(84px + env(safe-area-inset-bottom,0px)) var(--mobile-gutter); gap: 12px; }
.sw-content { flex: 0 0 auto; overflow: visible; padding: 0; }
.desktop-period-head {
  display: block; flex: 0 0 auto; padding: 16px;
  border: 1px solid var(--mobile-rule); border-radius: 7px;
  background: var(--paper-hi); box-shadow: 0 2px 5px rgba(43,36,26,.06);
  transition: padding 140ms ease,border-radius 140ms ease,box-shadow 140ms ease;
}
.desktop-period-heading {  margin-bottom: 12px; }
.desktop-period-date { color: var(--ink); font: 600 23px/1.2 var(--serif); }
.desktop-period-kicker { color: var(--ink2); font: 500 11px/1.4 var(--sans); margin-top: 3px; }
.desktop-period-ledger { display: grid; gap: 7px; }
.desktop-period-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.desktop-period-stat > span { color: var(--ink2); font: 500 12px/1.4 var(--sans); }
.desktop-period-stat strong { color: var(--ink); font: 600 17px/1.25 var(--serif); font-variant-numeric: tabular-nums; }
.desktop-period-stat.left { border-top: 1px solid var(--mobile-rule); padding-top: 9px; margin-top: 2px; }
.desktop-period-stat.left strong { color: var(--green-dp); font-size: 22px; }
.desktop-period-stat.short strong { color: #923d2c; }
/* Folded by default: the answer stays at full size, the arithmetic behind it
   waits until asked for. Nothing is shrunk to fit — it is simply not shown. */
.desktop-period-ledger.is-folded .desktop-period-stat:not(.left) { display: none; }
.desktop-period-ledger.is-folded .desktop-period-stat.left { border-top: 0; padding-top: 0; margin-top: 0; }
.period-ledger-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px;
  margin-top: 2px; padding: 0; border: 0; background: transparent;
  color: var(--ink3); font: 600 12px/1.3 var(--sans); text-align: left;
}
.period-ledger-toggle::after { content: '⌄'; font: 700 13px/1 var(--sans); }
.period-ledger-toggle[aria-expanded="true"]::after { content: '⌃'; }
/* The explanatory sentence is the first thing to go on a phone — the numbers
   above it already say this, and it cost a full line of the forecast's room. */
.desktop-period-context { display: none; }
.desktop-period-footer { display: none; }
.period-quick-add { display: block; flex: 0 0 auto; }
.period-quick-prompt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Secondary paperwork, styled as such. Two heavy outlined slabs gave filing a
   bill the same visual weight as the forecast above it. Targets stay 44px. */
.period-quick-link { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 0; border-radius: 6px; font: 600 12px var(--sans); color: var(--ink3); background: transparent; }
.desktop-action-icon { width: 18px; height: 18px; }
.period-quick-form { display: none; }
.period-quick-add.editing .period-quick-prompt { display: none; }
.period-quick-add.editing .period-quick-form { display: grid; grid-template-columns: minmax(0,1fr) 90px 44px; gap: 8px; }
.period-quick-input { width: 100%; min-width: 0; min-height: 44px; background: var(--paper-hi); border: 0; border-bottom: 1px solid var(--mobile-rule); padding: 6px; font: 16px var(--sans); color: var(--ink); }
.period-quick-input:first-child { grid-column: 1 / 3; }
.period-quick-input.amount { grid-column: 1; grid-row: 2; }
.period-quick-save { grid-column: 2; grid-row: 2; min-height: 44px; border-radius: 5px; color: white; background: var(--green-dp); }
.period-quick-cancel { grid-column: 3; grid-row: 1; font-size: 24px; }
.rollup-wrap { margin: 0; }
.rollup-tab { position: static; min-height: 50px; padding: 8px 2px; background: transparent; box-shadow: none; border-bottom: 1px solid var(--mobile-rule); border-radius: 0; }
.rollup-tab-lbl { font: 650 14px/1.3 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.rollup-tab-amt { color: var(--ink); font: 600 18px var(--serif); }
.rollup-tab-detail { font-size: 11px; color: var(--ink2); }
.rollup-body .bcard, .bcard {
  margin: 0; padding: 10px 0; min-height: 64px;
  background: transparent; border: 0; border-bottom: 1px solid var(--mobile-rule); border-radius: 0; box-shadow: none;
}
.bcard-name { font: 650 14px/1.3 var(--sans); color: var(--ink); }
.bcard-amt, .rollup-body .bcard-amt { font: var(--mobile-ledger-money); }
.bcard-meta, .rollup-body .bcard-meta { font: 500 11px/1.4 var(--sans); color: var(--ink2); }
.transport { flex-shrink: 0; gap: 2px; }
.tr-btn { min-width: 44px; min-height: 44px; border-radius: 5px; }
.bcard.selected { box-shadow: inset 0 0 0 1px var(--indigo); background: rgba(67,104,143,.04); }
.empty-pg { padding: 16px 0; color: var(--mobile-secondary-ink); text-align: left; }
.empty-pg .ep-ico { display: none; }
.empty-pg .ep-txt { font: 600 14px/1.4 var(--sans); color: var(--ink); }
.empty-pg .ep-summary { margin-top: 4px; font: var(--mobile-support-font); text-align: left; }

/* Plan: two quiet ledgers stacked naturally. The header is a section masthead;
   saved items are ruled rows until their editing paper is unfolded. */
#view-schedule { overflow: hidden; }
.inc-scroll { overflow-y: auto; min-height: 0; padding: 14px var(--mobile-gutter) calc(88px + env(safe-area-inset-bottom,0px)); }
.plan-pane { margin: 0 0 20px; padding: 0; border: 0; border-top: 1px solid var(--mobile-rule); border-radius: 0; background: transparent; }
.inc-section-hdr {
  position: static; display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; min-height: 70px; padding: 9px 2px 8px; gap: 2px 8px;
  background: transparent; border-bottom: 2px solid rgba(68,58,44,.2); box-shadow: none;
}
.inc-section-copy { min-width: 0; }
.inc-section-heading { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 6px; }
.inc-chev { width: 20px; color: var(--ink2); }
.inc-section-title { color: var(--ink); font: 600 21px/1.15 var(--serif); letter-spacing: 0; text-transform: none; }
.inc-section-count { align-self: center; color: var(--ink2); font: 650 11px/1 var(--sans); opacity: 1; }
.inc-section-count::before { content: '('; }
.inc-section-count::after { content: ')'; }
.inc-section-sub { display: block; margin: 3px 0 0 26px; color: var(--ink2); font: 500 11px/1.3 var(--sans); }
.inc-section-actions { display: flex; gap: 0; }
.hdr-add-btn, .hdr-compact-btn {
  width: 46px; height: 48px; margin: 0; padding: 3px 0 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: transparent; box-shadow: none;
}
.hdr-add-btn::after, .hdr-compact-btn::after { font: 650 9px/1 var(--sans); letter-spacing: .01em; }
.hdr-add-btn::after { content: 'Add'; }
.hdr-compact-btn::after { content: 'Fold'; }
.hdr-compact-btn[aria-pressed="true"]::after { content: 'Open'; }
.hdr-compact-label { display: none; }
.hdr-compact-btn .compact-mark-expand { display: none; }
.hdr-compact-btn.on .compact-mark-collapse { display: none; }
.hdr-compact-btn.on .compact-mark-expand { display: inline; }
.inc-section-body { padding: 0 2px; background: transparent; transition: none; }
.inc-section-body[hidden], .inc-section-body.collapsed { display: none !important; }
.inc-section-body:not(.collapsed) { max-height: none !important; overflow: visible; }
/* Every open editor uses the same neutral paper and inset. Goal/debt meaning
   may add a semantic edge, but never a different content indentation. */
.inc-card { margin: 10px 0; padding: 12px; border: 1px solid rgba(68,58,44,.16); border-radius: 7px; background: #faf8f3; box-shadow: 0 3px 9px rgba(43,36,26,.08); }
.inc-card.is-collapsed { min-height: 66px; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--mobile-rule); border-radius: 0; background: transparent; box-shadow: none; }
.inc-card.is-collapsed .inc-name { font: 650 15px/1.3 var(--sans); color: var(--ink); }
.inc-card.is-collapsed .inc-compact-sub { font: 500 11px/1.4 var(--sans); color: var(--ink2); gap: 6px; }
.inc-card.is-collapsed .cs-amt { font: 600 17px/1.3 var(--serif); color: var(--ink); }
.inc-card.is-collapsed .cs-amt-input { font: 600 17px/1.3 var(--serif); min-height: 44px; }
.inc-card.is-collapsed { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 0 6px; }
.inc-card.is-collapsed > .inc-card-header, .inc-card.is-collapsed .inc-name-wrap, .inc-card.is-collapsed .inc-compact-sub { display: contents; }
.inc-card.is-collapsed .compact-active-toggle { display: flex; grid-column: 1; grid-row: 1 / 3; align-self: center; min-width: 44px; min-height: 44px; justify-content: center; margin: 0; padding: 0; }
.inc-card.is-collapsed .inc-name { grid-column: 2; grid-row: 1; width: 100%; pointer-events: auto; cursor: pointer; }
.inc-card.is-collapsed .cs-cadence-toggle { grid-column: 2; grid-row: 2; display: flex; min-width: 0; align-items: center; gap: 8px; }
.inc-card.is-collapsed .cs-freq { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-card.is-collapsed :is(.cs-amt,.cs-amt-input) { grid-column: 3; grid-row: 1 / 3; min-height: 44px; display: flex; align-items: center; max-width: 110px; }
.inc-card.is-collapsed .card-collapse-btn { display: none; }
.inc-card.is-collapsed > .card-foot, .inc-card.is-collapsed .schedule-name-edit, .inc-card.is-collapsed .cs-sep { display: none; }
.inc-card:not(.is-collapsed) .inc-card-header {
  display: grid; grid-template-columns: auto minmax(0,1fr) 44px;
  grid-template-rows: 24px minmax(44px,auto); align-items: center;
  column-gap: 6px; row-gap: 2px; min-height: 70px;
}
.inc-card:not(.is-collapsed) .compact-active-toggle { display: none; }
.inc-card:not(.is-collapsed) .schedule-document-kind {
  grid-column: 1; grid-row: 1; align-self: center; justify-self: start;
  width: auto; min-width: 0; height: 24px; padding: 0;
  border: 0; background: transparent; color: var(--ink3);
  font: 650 11px/1 var(--sans); text-transform: none; letter-spacing: 0;
}
.inc-card:not(.is-collapsed) .schedule-date-field {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: end;
  flex-direction: row; min-width: 0;
}
.inc-card:not(.is-collapsed) .schedule-date-field .date-btn {
  min-height: 24px; height: 24px; padding: 0 3px; border: 0;
  background: transparent; color: var(--ink2);
}
.inc-card:not(.is-collapsed) .card-collapse-btn {
  grid-column: 3; grid-row: 1 / 3; align-self: center;
}
.inc-card:not(.is-collapsed) .inc-name-wrap {
  grid-column: 1 / 3; grid-row: 2; min-width: 0;
}
.inc-card:not(.is-collapsed) .inc-name {
  width: 100%; min-width: 0; min-height: 44px; padding: 4px 0;
  color: var(--ink); font: 600 20px/1.25 var(--serif);
}
.inc-name-wrap { min-width: 0; }
.inc-name { min-width: 0; color: var(--ink); font: 600 19px/1.3 var(--serif); }
.card-collapse-btn { width: 44px; height: 44px; flex: 0 0 44px; }
.inc-amt-row { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 6px; margin: 4px 0 8px; }
.inc-field-lbl { width: auto; font: 650 10px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.inc-amt-wrap {
  display: grid; grid-template-columns: 44px minmax(72px,1fr) 44px;
  align-items: center; gap: 0; min-width: 0;
  border-block: 1px solid var(--mobile-rule);
}
.inc-amt-val, .inc-amt-input { width: 100%; min-width: 0; text-align: center; font: 600 24px/1.2 var(--serif); }
/* Steppers keep their 44px target but read as quiet controls, not empty white
   blocks — the card fill is already near-white, so they need their own edge. */
.inc-stepper, .inc-off-stepper { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink2); font-size: 19px; }
.inc-stepper:first-child { border-right: 1px solid var(--mobile-rule); }
.inc-stepper:last-child { border-left: 1px solid var(--mobile-rule); }
.date-btn { min-height: 44px; padding: 7px 10px; border: 1px solid var(--mobile-rule); border-radius: 5px; background: rgba(255,255,255,.35); font-size: 12px; }
.schedule-detail-section { margin-top: 4px !important; padding-top: 7px !important; }
.recurrence-controls { display: grid !important; grid-template-columns: auto minmax(0,1fr); align-items: center !important; gap: 2px 6px !important; }
.recurrence-controls > .inc-off-lbl { grid-column: 1; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.recurrence-controls > :nth-child(2) { grid-column: 2; justify-self: end; }
.bill-freq-group { grid-column: 1 / 3; display: flex; flex: 1 1 100%; width: 100%; min-width: 0; flex-wrap: nowrap; gap: 0; margin-left: 0 !important; border: 0; border-bottom: 1px solid var(--mobile-rule); border-radius: 0; background: none; overflow: visible; }
.bill-freq-btn { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0 2px; font: 600 11px var(--sans); border: 0; border-radius: 0; background: transparent; color: var(--ink3); }
.bill-freq-btn.on { background: transparent; color: var(--green-dp); box-shadow: inset 0 -2px currentColor; }
.card-foot { flex-wrap: wrap; gap: 8px; }
.bill-type-toggle { width: 100%; display: flex; flex-wrap: wrap; border: 0; background: transparent; }
.bill-type-btn { flex: 1; min-width: 0; min-height: 44px; font-size: 11px; flex-direction: column; gap: 5px; opacity: 1; color: var(--ink2); }
.bill-type-btn::after { content: attr(aria-label); font: 600 11px/1 var(--sans); }
.bill-type-btn svg { width: 16px; height: 16px; }
.bill-type-btn.on { background: var(--paper-hi); box-shadow: inset 0 -2px currentColor; }
.bill-perish-check, .card-active-toggle, .inc-del { min-height: 44px; }
.cat-lbl { display: none; }
/* Plan inclusion switches share the master control's footprint and centerline. */
#view-schedule .compact-active-toggle .cat-track { width: 30px; height: 14px; border-radius: 8px; }
#view-schedule .compact-active-toggle .cat-thumb { width: 12px; height: 12px; }
#view-schedule .compact-active-toggle[aria-pressed="true"] .cat-thumb { left: 17px; }
.schedule-name-edit { width: 44px; height: 44px; }
.schedule-name-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.inc-card.sc-active, .inc-card.sc-selected, .inc-card.sc-flash { outline: 0; box-shadow: inset 0 0 0 1px var(--indigo); }

/* Reward sheets: quiet warm-gray paper behind distinct cream tickets. Keep the
   carousel structure, but drop the pink board / white-title contrast. */
.modal-sheet { max-height: 90dvh; border-radius: 14px 14px 0 0; background: var(--paper-hi); box-shadow: 0 -8px 28px rgba(43,36,26,.18); }
.modal-header { min-height: 58px; padding: 8px 18px; border-bottom: 1px solid var(--mobile-rule); }
.modal-title, .modal-title-input, .wishlist-title { font: 600 25px/1.2 var(--serif); color: var(--ink); }
.modal-close { min-width: 44px; min-height: 44px; }
.modal-handle { background: var(--mobile-rule); }
.modal-cancel, .modal-save { min-height: 44px; border-radius: 5px; font: 650 14px var(--sans); }
#wishlist-sheet { background-color: #f0ede6; background-image: var(--agenda-grain); }
#wishlist-sheet .modal-header { background-color: var(--mobile-chrome); background-image: var(--cloth-weave); border-bottom-color: rgba(68,58,44,.18); box-shadow: 0 3px 6px rgba(43,36,26,.1); }
#wishlist-sheet .wishlist-sheet-title { color: #302b24; }
.wishlist-plans-scroll { background: transparent; }
.wishlist-goals, .wishlist-list { padding-inline: 14px; }
.wishlist-list { padding-bottom: 24px; gap: 12px; }
.wishlist-state-title { color: var(--ink2); font: 600 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
/* Keep nested labels and actions in the card's paint group inside the
   scroll-snap track; otherwise Chromium can omit them when the sheet opens. */
.wishlist-card { isolation: isolate; padding: 16px; gap: 10px; border: 1px solid rgba(68,58,44,.2); border-radius: 4px; background-color: #f5f0e6; background-image: var(--agenda-grain); box-shadow: 0 2px 4px rgba(43,36,26,.07); }
.wishlist-unreachable-list .wishlist-card,
.wishlist-card[data-state="locked"] { border: 1px dashed rgba(68,58,44,.38); box-shadow: none; }
.wishlist-card::before { display: none; }
/* Gold marks a locked commitment; green means available to choose. */
#wishlist-sheet .wishlist-card[data-state="goal"] { background-color: var(--paper-hi); color: var(--ink); }
#wishlist-sheet .wishlist-card.is-ticket[data-state="goal"] { --ticket-paper: var(--paper-hi); }
#wishlist-sheet .wishlist-card[data-state="goal"].is-funding-shortfall { background-color: #ecddc8; }
.wishlist-card[data-state="goal"] :is(.wish-name,.wish-amount,.wish-action,.wish-lock) { color: #382d19; }
.wishlist-card[data-state="goal"] :is(.wish-fit,.wish-shift) { color: #57452a; }
.wishlist-card[data-state="goal"] .wish-state { background: #fae9b9; color: #554019; }
.wishlist-card[data-state="goal"].is-funding-shortfall .wish-state { background: #fff0c9; color: #733f18; font-weight: 800; }
.wishlist-card[data-state="goal"] .wish-goal-warning { color: #682d26; font-size: 12px; }
.wishlist-card[data-state="goal"] .wish-goal-warning-mark { flex-basis: 20px; width: 20px; height: 20px; }
.wish-name { color: var(--ink); font: 500 20px/1.3 var(--serif); }
.wish-amount { color: var(--ink); font: 500 23px/1.3 var(--serif); }
.wish-state { font: 600 11px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.wish-goal-date { min-height:44px; }
.wish-fit, .wish-shift { color: var(--ink2); font: 500 12px/1.5 var(--sans); }
.wish-action, .wish-lock { min-height: 44px; min-width: 44px; padding: 8px; border-radius: 5px; font: 650 12px var(--sans); letter-spacing: 0; text-transform: none; }
.wishlist-option-deck.has-options::before, .wishlist-option-deck.has-options::after { display: none; }
.wishlist-option-track { scroll-padding-inline: 2px; gap: 10px; padding: 2px 2px 7px; }
.wishlist-option-deck.has-options .wishlist-option-track > .wishlist-card { flex-basis: calc(100% - 16px); width: calc(100% - 16px); }
/* Let the next card slide off the screen edge instead of being cut by the section margin. */
.wishlist-option-deck.has-options { margin-right: -14px; padding-right: 0; max-width: none; }
.wishlist-option-deck.has-options .wishlist-option-track { padding-right: 16px; max-width: none; }
/* The section heading already says "Available now"; the group head keeps only the choice count. */
.wishlist-state-section.is-available .wishlist-option-head { border-top: 0; padding-top: 0; }
.wishlist-state-section.is-available .wishlist-option-head strong { display: none; }
.wishlist-state-section.is-available .wishlist-option-head-side { margin-left: auto; }
.wishlist-unreachable-list { gap: 10px; }
.wishlist-deck-dot { width: 8px; height: 8px; }
.wishlist-deck-dot.active { background: #536f62; }
.wishlist-deck-dots { min-height: 24px; }
.wish-editor input { min-height: 44px; font-size: 16px; }
.wishlist-editor-row { grid-template-columns: minmax(0,1fr); gap: 12px; }
.wish-amount-control { grid-template-columns: 44px minmax(0,1fr) 44px; }
.wish-step { min-width: 44px; height: 44px; border: 1px solid var(--mobile-rule); border-radius: 5px; }
:is(.wishlist-editor,.wishlist-inline-editor) input { min-height: 44px; font-size: 16px; }
.wishlist-editor-cancel, .wishlist-editor-save { min-height: 44px; padding: 8px 16px; border-radius: 5px; font: 650 13px var(--sans); text-transform: none; letter-spacing: 0; }
.tools-item { min-height: 44px; font: 500 14px var(--sans); }
#tools-sheet .modal-header { padding:10px 18px; }
#tools-sheet .tools-menu { padding:0 10px max(10px,env(safe-area-inset-bottom)); }
.mcal { width: min(340px,calc(100vw - 20px)); border-radius: 9px; background: var(--paper-hi); }
.mcal-day, .mcal-nav { min-height: 42px; }
/* Spend shares the raised card and keeps the Home dock available. */
.ec-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.ec-name { font: 600 20px/1.25 var(--serif); color: var(--ink); text-transform: none; letter-spacing: 0; }
.ec-field-label { color: var(--ink2); font: 650 12px/1.3 var(--sans); text-align: left; }
.ec-name-input { font: 500 16px/1.3 var(--sans); min-height: 42px; padding: 4px 0 7px; text-align: left; font-style: normal; }
.ec-stepper { display: grid; grid-template-columns: 44px minmax(90px,1fr) 44px; gap: 8px; width: 100%; }
.ec-step-btn { border: 0; border-radius: 6px; background: rgba(43,36,26,.055); }
.expense-card .ec-amt, .ec-amt-input { justify-self: stretch; align-self: center; width: 100%; min-width: 0; font: 650 31px/1.2 var(--serif); font-style: normal; }
.expense-card .ec-label { margin-bottom: 6px; color: var(--ink2); font: 500 11px/1.3 var(--sans); text-align: center; text-transform: none; letter-spacing: 0; }
.ec-btn-row { margin-top: 7px; }
.ec-btn-schedule { min-height: 46px; border: 0; border-radius: 7px; background: var(--indigo); color: #fff; font: 700 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.expense-card .ec-btn-schedule:disabled { background: #d8d5cb; color: #5e5b52; opacity: 1; }
.ec-step-btn, .ec-remove, .ec-btn-schedule { min-height: 44px; min-width: 44px; }

/* Thumb dock: one action per destination; safe money already has its own band. */
#stats-strip { display: none !important; }
#stats-strip:has(#sel-area:not([style*="display: none"]):not([style*="display:none"])) { display: flex !important; height: 44px; box-shadow: none; }
#stats-strip .period-bal-tab { display: none; }
/* Three destinations, sized like navigation rather than like three slabs.
   Every state below is checked for readable contrast against its own fill. */
.tabbar { min-height: calc(56px + env(safe-area-inset-bottom,0px)); padding: 0 8px env(safe-area-inset-bottom,0px); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; border-top: 1px solid var(--mobile-rule); background: var(--mobile-chrome); box-shadow: none; }
.tab, .dock-now { width: auto; min-width: 0; height: 48px; margin: 4px 0; padding: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border: 0; border-radius: 6px; color: var(--ink2); background: transparent; box-shadow: none; transform: none; filter: none; }
.tab-iwrap { padding: 0; margin: 0; height: 20px; background: transparent !important; box-shadow: none !important; }
.tab-svg-ico, .dock-home-icon { width: 19px; height: 19px; opacity: 1; }
.tab .tab-svg-ico { opacity: 1; }
.tab-lbl, .dock-home-label { font: 650 11px/1.2 var(--sans); text-transform: none; letter-spacing: 0; }
.dock-now-lbl, .dock-now-amt, .dock-now-when { display: none; }
.dock-now, .dock-now:not(.active), .dock-now.tab-home-away { background: transparent; color: var(--nav-outlook-color); opacity: 1; }
#tab-plan.active { background-color: var(--nav-outlook-color); color: #fff; }
.tab.active { color: var(--green-dp); background: var(--paper-hi); }
#tab-spend { background: transparent; color: var(--green-dp); }
#tab-spend .tab-svg-ico, #tab-spend .tab-lbl { color: currentColor; }
#tab-spend.is-aside { background: transparent; color: var(--green-dp); }
/* Spend and Save retain their money-action ink when their sheet is open. */
#tab-spend.spend-active { color: var(--green-dp); }
#tab-spend.spend-active .tab-svg-ico { background:transparent; color:inherit; }
#tab-spend.spend-active .tab-iwrap { background: transparent !important; box-shadow: none !important; }
#tab-spend:disabled { background: #d8d5cb; color: #4a4c44; opacity: 1; }
#tab-spend:disabled .tab-svg-ico { color: #4a4c44; opacity: 1; }
/* base.css dims the whole control to 60% on press, which reads as "broken"
   more than "pressed" on the coloured action. Keep the press subtle. */
.tab:active { opacity: 1; }
@media (min-width:760px) {
  .app { max-width: 900px; box-shadow: 0 0 24px rgba(43,36,26,.1); }
  .cards-area { --period-peek: 60px; }
  .sw-page { padding-inline: 48px 0; }
  .inc-scroll { padding-inline: 48px; }
  .app:not(.is-forecast-view) #desktop-plan-tools { padding-inline: 48px; }
  .desktop-period-head { padding: 22px; }
}
@media (max-height:700px) {
  .app-header { min-height: 48px; }
  .view-stack > .desktop-money-now { flex-basis: 66px; height: 66px; }
  #view-plan, #view-schedule { padding-top: 66px; }
  #view-plan .chart-section, #view-schedule .chart-section { flex-basis: var(--mobile-forecast-h,184px); height: var(--mobile-forecast-h,184px); min-height: var(--mobile-forecast-h,184px); }
  .crochet-bar, #croch-svg { height: 22px; }
  .crochet-bar { flex-basis: 22px; }
}
@media (prefers-reduced-motion:reduce) {
  .sw-track, .wishlist-option-track { scroll-behavior: auto; transition: none; }
}

/* Calendar date retained within the original pay-card layout. */
.desktop-period-heading { display: flex; align-items: center; gap: 12px; }
.period-desktop-title { display: none; }
.period-mobile-title { display: inline; }
.mobile-calendar-date { display: flex; flex: 0 0 56px; height: 56px; box-sizing: border-box; flex-direction: column; align-items: center; overflow: hidden; color: var(--ink); background: var(--paper-hi); border: 1px solid rgba(74,58,38,.25); border-radius: 4px; box-shadow: 0 2px 2px rgba(65,45,22,.10); }
.mobile-calendar-date span { width: 100%; padding: 2px 0; text-align: center; color: #fff; background: #285a48; font: 600 11px/1.3 var(--serif); }
.mobile-calendar-date strong { margin: auto 0; font: 600 30px/1.1 var(--serif); font-variant-numeric: tabular-nums; }

#view-plan .mobile-check-label { white-space: normal; text-align: right; font-size: 11px; line-height: 1.3; }

#view-plan .period-quick-add { padding-top: 8px; }
#view-plan .rollup-tab { min-height: 44px; }
#view-plan .bcard-name { max-width: 100%; text-transform: none; letter-spacing: 0; }

/* Two working surfaces: forecast above, one aligned period column below. */
#view-plan .cards-area {
  background-color: #f0ede6;
  background-image: var(--agenda-grain);
}
#view-plan .sw-page { padding: 22px var(--mobile-gutter) calc(84px + env(safe-area-inset-bottom,0px)); gap: 16px; }
#view-plan .sw-content, #view-plan .period-quick-add { margin-inline: 0; }
#view-plan .desktop-period-heading { grid-template-columns: 56px minmax(0,1fr) auto; }

/* Date navigation is printed on the chrome between the two surfaces. */
:is(#view-plan, #view-schedule) .pnav-bar {
  position: relative;
  z-index: 6;
  border-block: 1px solid var(--mobile-rule);
  background-color: var(--mobile-chrome);
  background-image: var(--cloth-weave);
  background-size: auto;
}
#view-plan .pnav-row { padding-inline: 6px; }
#view-plan .pnav-center { flex: 1; }
#view-plan .pnav-datejump { width: 28px; flex-basis: 28px; }
.mobile-period-home { display: none; }
#view-plan #plan-chart-drag { border-bottom: 1px solid rgba(74,58,38,.13); box-shadow: inset 0 -3px 5px -4px rgba(43,36,26,.20); }

/* The desktop ledger card, in one natural scrolling phone column: the
   selected pay period is a full-width masthead. Relative positioning anchors
   the Agenda toggle. */
#view-plan .desktop-period-head {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  width: calc(100% + 2 * var(--mobile-gutter)); height: auto; max-height: none;
  margin: 0 calc(-1 * var(--mobile-gutter));
  padding: var(--mobile-heading-padding) var(--mobile-gutter) 8px;
  overflow: visible;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  transition: none;
}
#view-plan .desktop-period-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
#view-plan .desktop-period-heading > div { min-width: 0; }
#view-plan .desktop-period-date { font: 600 32px/1.1 'Caveat', cursive; letter-spacing: .01em; }
#view-plan .period-desktop-title { display: block; overflow-wrap: anywhere; }
#view-plan .period-mobile-title,
#view-plan .mobile-check-label,
#view-plan .mobile-check-amount,
#view-plan .mobile-check-description,
#view-plan .period-ledger-toggle { display: none; }
#view-plan .desktop-period-kicker { display: block; margin-top: 3px; }
#view-plan .mobile-calendar-date { flex: 0 0 48px; height: 52px; border-radius: 2px; }
#view-plan .mobile-calendar-date span { padding: 0; font: 600 12px/1.5 var(--sans); }
#view-plan .mobile-calendar-date strong { font: 600 27px/1.1 var(--serif); }
#view-plan .desktop-period-ledger { display: grid; gap: 0; overflow: visible; }
#view-plan .desktop-period-ledger .desktop-period-stat { display: flex; }
#view-plan .desktop-period-stat > span { font-size: 13px; }
#view-plan .desktop-period-ledger .desktop-period-stat.left { display: flex; }
#view-plan .desktop-period-stat.pay:not(.is-empty) strong { color: var(--green-dp); }
#view-plan .desktop-period-stat.left strong { font-size: 25px; }
#view-plan .desktop-period-context { display: block; margin: 7px 0 0; font: 500 11px/1.5 var(--sans); color: var(--ink2); }
#view-plan .summary-actions { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; }
/* The bottom toolbar owns Spend/Put aside on phones. */
#view-plan .summary-actions .desktop-period-footer { display: none; }
#view-plan .desktop-period-spend { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; border: 0; background: var(--green-dp); color: var(--paper-hi); }
#view-plan .desktop-period-spend.spend { background: var(--indigo); }
#view-plan .desktop-period-spend.active { background: #74391f; }
#view-plan .desktop-period-spend:disabled { background: rgba(43,36,26,.13); color: var(--ink2); }
#view-plan .desktop-spend-reason { font: italic 500 12px/1.45 var(--serif); color: var(--ink3); }
#view-plan .summary-actions .period-quick-add { padding: 0; }
#view-plan .summary-actions .period-quick-link { border: 1px solid var(--mobile-rule); background: rgba(255,252,243,.55); color: var(--ink2); border-radius: 8px; white-space: nowrap; }

/* Keep the range dash on the same centerline as the graph gripper. */
:is(#view-plan, #view-schedule) .pnav-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 128px; padding: 0; }
:is(#view-plan, #view-schedule) .pnav-name { width: 100%; padding: 0; }
:is(#view-plan, #view-schedule) .pnav-datejump { position: absolute; right: calc(100% + 2px); width: 36px; min-width: 36px; }
#view-plan #nav-prev { position: absolute; left: 6px; width: 44px; min-width: 44px; }
#view-plan #nav-next { margin-left: auto; }
#view-schedule #schMasterBtn { position: absolute; right: 6px; margin: 0; order: -1; }

/* A compact receipt opens into the full ledger only on request. */
#view-plan .desktop-period-heading[role="button"] { cursor: pointer; }
#view-plan .desktop-period-heading[role="button"]:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 3px; }

#view-plan .desktop-period-head .mobile-calendar-date { flex-basis: 42px; }
#view-plan .desktop-period-head:not(.mobile-details-open) .desktop-period-stat:not(.left),
#view-plan .desktop-period-head:not(.mobile-details-open) .desktop-period-context,
#view-plan .desktop-period-head:not(.mobile-details-open) .summary-actions { display: none; }
#view-plan .desktop-period-head:not(.mobile-details-open) .desktop-period-stat.left { border: 0; margin: 0; padding: 0; min-height: 22px; }
#view-plan .desktop-period-head .desktop-period-stat.left > span { font-size: 12px; }
#view-plan .desktop-period-head .desktop-period-stat.left strong { font-size: 19px; }

/* The translated swipe track must not acquire a second scroll offset on focus. */
#view-plan .cards-area { overflow: clip; }
#view-plan .sw-page { overflow-anchor: none; }

/* Cash on hand already carries the persistent shortage notice. */
.alert.persistent-shortfall { display: none; }

/* The separator grip is the mobile graph disclosure affordance. */
.desktop-chart-heading::after { display: none; }

/* Preserve the selected period balance without changing scroll geometry. */
#view-plan .mobile-period-balance {
  position: sticky;
  z-index: 4;
  flex: 0 0 0;
  height: 0;
  margin-bottom: -16px;
  visibility: hidden;
  pointer-events: none;
  top: 0;
}
#view-plan .mobile-period-balance.is-visible { visibility: visible; }
#view-plan .mobile-period-balance > div { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 14px; background: #f0ede6; border-bottom: 1px solid var(--mobile-rule); box-shadow: 0 3px 5px rgba(43,36,26,.06); }
#view-plan .mobile-period-balance span { font: 500 12px/1.4 var(--sans); color: var(--ink2); }
#view-plan .mobile-period-balance strong { font: 600 19px/1.4 var(--serif); color: var(--green-dp); }
#view-plan .mobile-period-balance strong.short { color: var(--red); }

/* The allowance stays above the graph while the agenda scrolls below it. */
.desktop-money-fact.safe { display: none; }
#view-plan .period-safe { display: none; }
#view-plan .period-safe > span { font: 500 12px/1.4 var(--sans); color: var(--ink2); }
#view-plan .period-safe strong { font: 600 19px/1.4 var(--serif); color: var(--indigo); }
#view-plan .desktop-period-head.mobile-details-open .period-safe,
#view-plan .desktop-period-head:not(.mobile-details-open) .desktop-period-stat.left { display: none; }

/* The full-width period masthead leaves no peek or top padding. */
#view-plan .cards-area { --period-peek: 0px; }
#view-plan .sw-page { padding-top: 0; }

/* Equal edge tracks keep the period identity centered between date and details. */
#view-plan .desktop-period-head .desktop-period-heading { display: grid; gap: 12px; margin: 0; }
#view-plan .desktop-period-head .desktop-period-date { font: var(--mobile-heading-font); letter-spacing: 0; }
#view-plan .desktop-period-head .mobile-calendar-date { width: 38px; height: 46px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#view-plan .desktop-period-head .mobile-calendar-date span { background: transparent; color: var(--ink2); font: 600 11px/1.4 var(--sans); }
#view-plan .desktop-period-head .mobile-calendar-date strong { font-size: 21px; }
#view-plan > .pnav-bar { display: none; }
#view-schedule > .pnav-bar { display: none; }
#mobile-plan-period-title { display: none; grid-column: 1; grid-row: 1; font: var(--mobile-heading-font); color: var(--ink); }
#view-schedule > .pnav-bar .pnav-row { min-height: 32px; display: flex; padding-inline: var(--mobile-gutter); justify-content: space-between; }
#view-schedule > .pnav-bar .pnav-datejump { height: 32px; }
#view-schedule > .pnav-bar :is(.pnav-center,.pnav-balance-slot) { display: none; }
#view-schedule #mobile-plan-range { display: block; margin: 0 0 0 auto; }
#view-plan .desktop-period-head .mobile-calendar-date { display: none; }
#view-plan .desktop-period-heading > div { grid-template-columns: auto auto; justify-content: space-between; align-items: center; column-gap: 12px; }
#view-plan .desktop-period-kicker { grid-column: 1 / -1; text-align: left; }
.mobile-period-range { display: block; margin: 0 auto; min-height: 32px; padding: 4px 8px; background: transparent; border: 0; color: var(--ink2); font: 600 12px/1.4 var(--sans); text-decoration: underline dotted; text-underline-offset: 4px; }
.mobile-period-range:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.mobile-record-dialog { padding: 0 14px 14px; max-height: calc(100dvh - 24px); }
.mobile-record-dialog[open] { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(600px,100%); height: min(60dvh,540px); max-height: calc(100dvh - 24px); border: 1px solid rgba(74,58,38,.3); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(35,30,22,.24); }
.mobile-record-dialog::backdrop { background: rgba(35,30,22,.08); backdrop-filter: none; }
#mobile-record-dialog { max-width: min(600px,100vw); }
#mobile-record-dialog::backdrop { background: rgba(35,30,22,.06); backdrop-filter: none; }
#mobile-record-dialog .bill-intent-tag { display: none; }
@media(max-height:600px){.mobile-record-dialog[open] { height: calc(100dvh - 24px); }}
.wish-protected { grid-column: 1 / -1; font: 600 12px/1.4 var(--sans); color: var(--green-dp); }
#desktop-plan-tools > #schMasterBtn { position: static; margin-right: auto; flex: 0 0 44px; }
.mobile-record-toolbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; background: var(--paper-hi); border-bottom: 1px solid var(--mobile-rule); }
.mobile-record-toolbar span { font: 500 11px/1.4 var(--sans); color: var(--ink2); }
.mobile-record-toolbar button { min-height: 44px; padding: 8px 14px; font: 700 14px var(--sans); color: var(--green-dp); }
#view-schedule .mobile-record-dialog .inc-card:not(.is-collapsed) { margin: 0; padding: 12px 0 0; border: 0; box-shadow: none; display: block; min-height: 0; background: transparent; }
#view-schedule .mobile-record-dialog .inc-card-header { min-height: 0; }
#view-schedule .mobile-record-dialog .schedule-detail-section { min-height: 0; }
#view-schedule .mobile-record-dialog .card-collapse-btn { display: none; }
#view-schedule .mobile-record-dialog .card-foot { margin-top: 12px; }
/* A compact editing document: identity, money, timing, then record options. */
#view-schedule .mobile-record-dialog .inc-card-header { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; row-gap: 0; }
#view-schedule .mobile-record-dialog .inc-name-wrap { grid-column: 1; grid-row: 1; }
#view-schedule .mobile-record-dialog .inc-name { font: 500 24px/1.25 var(--serif); padding-right: 44px; }
#view-schedule .mobile-record-dialog .schedule-date-field { grid-column: 1; grid-row: 2; justify-self: start; min-height: 36px; }
#view-schedule .mobile-record-dialog .schedule-date-field .date-btn { min-height: 36px; }
#view-schedule .mobile-record-dialog .schedule-document-kind { display: none; }
#view-schedule .mobile-record-dialog .inc-amt-row { grid-template-columns: minmax(0,1fr) minmax(120px,1fr); margin: 8px 0; padding-block: 6px; border-block: 1px solid var(--mobile-rule); }
#view-schedule .mobile-record-dialog .inc-amt-wrap { display: block; border: 0; background: transparent; }
#view-schedule .mobile-record-dialog .inc-amt-wrap .inc-stepper { display: none; }
#view-schedule .mobile-record-dialog :is(.inc-amt-val,.inc-amt-input) { width: 100%; min-height: 44px; text-align: right; font: 600 26px/1.5 var(--serif); }
#view-schedule .mobile-record-dialog :is(.inc-field-lbl,.inc-off-lbl) { font: 500 12px/1.4 var(--sans); color: var(--ink2); }
#view-schedule .mobile-record-dialog .schedule-detail-section { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
#view-schedule .mobile-record-dialog .bill-type-btn { flex-direction: row; gap: 6px; }
#view-schedule .mobile-record-dialog .bill-type-btn::after { display: none; }
#view-schedule .mobile-record-dialog .bill-type-btn svg { width: 14px; height: 14px; }
#view-schedule .mobile-record-dialog .card-foot { padding-top: 8px; gap: 4px; }
#view-schedule .mobile-record-dialog .card-foot .cat-lbl { display: inline; font: 500 12px var(--sans); }
#view-schedule .mobile-record-dialog .inc-del { margin-right: auto; font: 500 12px var(--sans); text-transform: none; letter-spacing: 0; }
#view-schedule #mobile-record-dialog .inc-card { display: block; }
#view-schedule #mobile-record-dialog .inc-amt-val:not(.editing) { display: block; }
#view-schedule #mobile-record-dialog .inc-amt-row { margin: 8px 0; }
#view-schedule #mobile-record-dialog .card-foot .inc-del { flex: 0 0 auto; padding-inline: 0; }
#view-schedule #mobile-record-dialog .card-foot .card-active-toggle { margin-left: auto; }
#view-schedule #mobile-record-dialog .card-foot { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
#view-schedule #mobile-record-dialog .bill-type-toggle { grid-column: 1 / -1; }
#view-schedule #mobile-record-dialog .card-foot .inc-del { grid-column: 1; grid-row: 2; width: auto; justify-self: start; }
#view-schedule #mobile-record-dialog .card-foot .card-active-toggle { grid-column: 2; grid-row: 2; }
#view-plan .desktop-period-kicker { font: var(--mobile-support-font); color: var(--mobile-secondary-ink); }
.mobile-agenda-details { display: none; }
.mobile-agenda-details::after { content: ' ⌄'; }
[aria-expanded="true"] > .mobile-agenda-details::after { content: ' ⌃'; }
#view-plan .desktop-period-head.mobile-details-open .desktop-period-ledger { margin-top: 16px; }
#view-plan .sw-content { padding-bottom: 12px; }
#view-plan .forecast-period-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; margin-top: 12px; padding: 6px 0 2px; color: var(--mobile-secondary-ink); font: var(--mobile-support-font); }
#view-plan .forecast-period-total strong { color: var(--ink); font: var(--mobile-ledger-money); font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-plan .forecast-period-total.short strong { color: var(--red); }
#view-plan .sw-page:has(> .desktop-period-head.mobile-details-open) .forecast-period-total { display: flex; }
/* The collapsed card uses the list footer instead of a second sticky total. */
#view-plan .sw-page:has(> .desktop-period-head:not(.mobile-details-open)) .mobile-period-balance { display: none; }
#view-plan .rollup-env { display: none; }
#view-plan .rollup-tab-lbl { font-size: 13px; }
#view-plan .rollup-tab-detail { font-size: 11px; font-weight: 500; }
#view-plan .bcard-name { font-size: 15px; line-height: 1.4; }
#view-plan .bcard-meta, #view-plan .rollup-body .bcard-meta { font: var(--mobile-support-font); color: var(--mobile-secondary-ink); }
#view-plan .transport { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
#view-plan .tr-btn { border: 0; box-shadow: none; background: transparent; flex-direction: column; border-radius: 4px; }
/* Stable two-line tracks: paid badges and movement captions never resize a row. */
#view-plan .bcard { display: grid; grid-template-columns: minmax(0,1fr) 136px var(--period-amount-width,max-content); grid-template-rows: 22px 22px; gap: 0 8px; align-items: center; }
#view-plan .bcard-info { display: contents; }
#view-plan .bcard-name { grid-column: 1; grid-row: 1; white-space: normal; overflow-wrap: anywhere; margin: 0; }
#view-plan .bcard-amt { grid-column: 3; grid-row: 1 / 3; text-align: right; }
#view-plan .bcard-meta { grid-column: 1; grid-row: 2; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-plan .transport { grid-column: 2; grid-row: 1 / 3; justify-self: center; display: grid; grid-template-columns: repeat(3,44px); gap: 2px; }
#view-plan .ghost-hop { grid-column: 1 / -1; font-size: 11px; }
#view-plan .tr-label { font: 500 10px/1.2 var(--sans); white-space: nowrap; }
#view-plan .tr-btn:not(:disabled) { color: var(--mobile-secondary-ink); }
#view-plan .tr-btn.latched { color: var(--indigo); background: rgba(67,104,143,.1); }
#view-plan .tr-btn:disabled { opacity: .55; }
#view-plan .bcard:is(.selected,:focus-visible),
#view-schedule .inc-card:is(.sc-active,.sc-selected,:focus-visible),
#wishlist-sheet .wishlist-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--indigo); }

/* The pay-period ledger: one quiet money column and ruled paper rows. */
#view-plan .sw-page { --ledger-money-width: clamp(88px,24vw,116px); }
#view-plan .desktop-period-head .desktop-period-heading { border-bottom: 3px double rgba(74,58,38,.32); }
#view-plan .rollup-tab { padding-inline: 0; border-bottom-color: rgba(74,58,38,.26); }
#view-plan .rollup-tab-amt,
#view-plan .bcard-amt,
#view-plan .desktop-period-stat strong { box-sizing: border-box; min-width: var(--ledger-money-width); padding-left: 12px; border-left: 1px solid var(--mobile-rule); font-variant-numeric: tabular-nums; text-align: right; font-style: normal; }
#view-plan .rollup-tab-amt { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
#view-plan .bcard-amt { min-width: 0; padding-left: 8px; white-space: nowrap; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; border-left: 0; color: var(--mobile-secondary-ink); font: 400 17px/1.25 var(--serif); }
#view-plan .rollup-tab-amt { border-left: 0; color: var(--mobile-secondary-ink); font: 400 17px/1.25 var(--serif); }
#view-plan .desktop-period-head.mobile-details-open .desktop-period-ledger { gap: 0; }
#view-plan .desktop-period-ledger .desktop-period-stat { align-items: stretch; padding: 0; min-height: 36px; border-bottom: 1px solid var(--mobile-rule); }
#view-plan .desktop-period-stat > span { align-self: center; padding-block: 8px; }
#view-plan .desktop-period-stat strong { padding-block: 8px; }
#view-plan .desktop-period-ledger .desktop-period-stat.left { margin-top: 0; padding-top: 0; border-top: 0; border-bottom: 3px double rgba(74,58,38,.32); }

/* Plan shares Forecast's light workspace and full-width paper headings. */
#view-schedule .inc-scroll { background-color: #f0ede6; background-image: var(--agenda-grain); padding-top: 0; overflow-anchor: none; }
#view-schedule .plan-pane { border-top: 0; margin-bottom: 0; }
#view-schedule .inc-section-hdr { margin-inline: calc(-1 * var(--mobile-gutter)); padding: 12px var(--mobile-gutter); background-color: #f0ede6; background-image: var(--agenda-grain); }
#view-schedule .inc-section-title { font: var(--mobile-heading-font); letter-spacing: 0; }
#view-schedule .inc-section-sub { font: var(--mobile-support-font); color: var(--ink2); }
#view-schedule .inc-section-heading { grid-template-columns: 38px auto 1fr; }
#view-schedule .inc-card.is-collapsed .inc-name { font-size: 15px; line-height: 1.4; }
#view-schedule .inc-card.is-collapsed .inc-compact-sub { font: var(--mobile-support-font); }
#view-schedule .inc-section-body { padding-inline: 0; }
#view-schedule .inc-card:not(.is-collapsed) { background-color: var(--paper-hi); background-image: var(--agenda-grain); }
#view-schedule .hdr-add-btn { color: var(--green-dp); }
#view-schedule .hdr-compact-btn { color: var(--ink2); }

/* Quiet editing paper; keep the existing field rows and touch targets. */
#view-schedule .inc-card:not(.is-collapsed) .inc-name { font: 500 19px/1.35 var(--serif); }
#view-schedule .inc-card:not(.is-collapsed) .inc-amt-wrap { background: rgba(255,255,255,.2); }
#view-schedule .inc-card:not(.is-collapsed) :is(.inc-amt-val,.inc-amt-input) { font: 500 23px/1.3 var(--serif); }
#view-schedule .inc-card:not(.is-collapsed) :is(.inc-field-lbl,.inc-off-lbl) { font: 500 11px/1.4 var(--sans); text-transform: none; letter-spacing: 0; }

/* Muted fabric colors give each destination its own identity. */
#tab-sch { background-color: transparent; color: var(--nav-plan-color); }
#tab-sch :is(.tab-svg-ico,.tab-lbl) { color: currentColor; }
#tab-plan.active { background-image: var(--cloth-weave); }
/* Spend is a sheet over the current page; it alone owns the active dock color. */
.tabbar:has(#tab-spend.spend-active) #tab-sch { background: transparent; color: var(--nav-plan-color); box-shadow: none; }
.tabbar:has(#tab-spend.spend-active) #tab-plan { background: transparent; color: var(--nav-outlook-color); }


/* Keep the active Plan ledger's identity and monthly total above its rows. */
#view-schedule .inc-section-hdr { position: sticky; top: 0; z-index: 5; min-height: 0; padding-block: 6px 8px; border-bottom: 3px solid transparent; box-shadow: none; display: grid; grid-template-columns: 56px minmax(0,1fr) 56px; grid-template-rows: auto auto; gap: 1px 0; }
#view-schedule .inc-section-hdr::after { content: ''; position: absolute; bottom: -3px; inset-inline: var(--mobile-gutter); border-bottom: 3px double rgba(74,58,38,.32); pointer-events: none; }
#view-schedule .inc-section-copy { display: contents; }
#view-schedule .inc-section-heading { grid-column: 2; grid-row: 1; display: flex; justify-content: center; gap: 4px; }
#view-schedule .inc-section-copy > .inc-chev { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; justify-self: start; }
#view-schedule .inc-section-count { margin: 0; }
#view-schedule .inc-section-sub { grid-column: 2; grid-row: 2; margin: 0; text-align: center; font-size: 11px; line-height: 1.3; color: var(--mobile-secondary-ink); }
#view-schedule .inc-section-actions { grid-column: 3; grid-row: 1 / 3; justify-content: flex-end; align-self: center; }
#view-schedule .inc-section-actions .hdr-compact-btn { display: none; }
#view-schedule .inc-card.is-collapsed { min-height: 60px; padding: 8px 0; }
#view-schedule .inc-card.is-collapsed :is(.cs-amt,.cs-amt-input) { border-left: 0; padding-left: 8px; font:400 17px/1.25 var(--serif); color:var(--mobile-secondary-ink); font-variant-numeric: tabular-nums; }
#view-schedule .inc-card.is-collapsed .cs-freq { color: var(--mobile-secondary-ink); font: var(--mobile-support-font); }
#view-schedule .inc-card:not(.is-collapsed) { border-radius: 3px; box-shadow: 0 2px 3px rgba(43,36,26,.08); }
#view-schedule .inc-card:not(.is-collapsed) .inc-amt-wrap { border-radius: 0; border-block: 1px solid var(--mobile-rule); }
#view-schedule .inc-section-title { font-size: 18px; line-height: 1.2; }
#view-schedule .inc-section-actions .hdr-add-btn,
#view-schedule .inc-section-actions .hdr-compact-btn { height: 44px; }

/* Stable editing slots prevent type changes from moving the controls. */
#view-schedule .bill-card:not(.is-collapsed):not(.schedule-draft) { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 70px 20px 56px minmax(220px,auto) auto; align-content: start; }
#view-schedule .bill-card:not(.is-collapsed) > .inc-card-header { grid-row: 1; margin: 0; }
#view-schedule .bill-card:not(.is-collapsed) > .bill-intent-tag { grid-row: 2; margin: 0; align-self: center; }
#view-schedule .bill-card:not(.is-collapsed) > .inc-amt-row { grid-row: 3; margin: 4px 0 8px; }
#view-schedule .bill-card:not(.is-collapsed) > .schedule-detail-section { grid-row: 4; align-self: stretch; }
#view-schedule .bill-card:not(.is-collapsed) > .card-foot { grid-row: 5; align-self: start; }

#wishlist-sheet .wishlist-card[data-state="earned"] { background-color: #e5e9dc; color: var(--ink); }
.wishlist-card[data-state="earned"] .wish-state { background: #c9dfc6; color: #28533b; }

/* Primary money actions use the same quiet fabric finish as the toolbar. */
#view-plan .desktop-period-spend { max-width: 300px; margin-inline: auto; border-radius: 5px; background-image: var(--cloth-weave); font: 600 14px/1.3 var(--sans); box-shadow: inset 0 1px 0 rgba(255,252,243,.14), 0 2px 3px rgba(43,36,26,.12); }

/* One legible handwritten voice for the changing allowance. */
#stash-funding-percent[data-allowance="true"],
#desktop-safe-amt,
#view-plan .period-safe strong,
#sch-collapsed-val,
#ah-end-val[data-allowance="true"] {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-style: normal;
  font-variant-numeric: normal;
  letter-spacing: .015em;
  color: #365f94;
  padding-inline: .12em .22em;
  box-sizing: border-box;
  overflow: visible;
}
#view-plan .period-safe { padding-right: 0; }
/* Let cursive overhang paint past the aligned numeric edge. */
#view-plan .period-safe strong { padding-right: .22em; margin-right: -.22em; text-align: right; }
/* A softly curled paper foot, kept below the card's usable content. */
#wishlist-rail .wishlist-card,
.wishlist-card {
  background-image: var(--agenda-grain);
  border-radius: 3px 3px 9px 3px;
  padding-bottom: 22px;
  box-shadow: 0 1px 2px rgba(43,36,26,.07), 2px 7px 7px -6px rgba(43,36,26,.3);
}


#wishlist-sheet .wishlist-sheet-title { flex: 1; text-align: center; }

#wishlist-sheet .modal-header { position: relative; }


/* A visible paper lip above the mobile woven period strap. */
:is(#view-plan, #view-schedule) .pnav-bar {
  border-top: 0;
  box-shadow: 0 -1px 0 rgba(85,75,56,.12), 0 2px 3px rgba(43,36,26,.06);
}
#wishlist-sheet .wishlist-card {
  background-image: var(--agenda-grain);
  border-radius: 3px 3px 9px 3px;
  box-shadow: 0 1px 2px rgba(43,36,26,.07), 2px 7px 7px -6px rgba(43,36,26,.3);
}
/* Goals and available wishes are tickets; future and unreachable wishes stay plain. */

#wishlist-sheet .wish-name { white-space: normal; overflow-wrap: anywhere; font-size: 20px; }
/* Restore the earlier free-standing money figure; no vertical amount divider. */
#wishlist-sheet .wish-amount { padding-left: 0; border-left: 0; font: 500 23px/1.3 var(--serif); font-variant-numeric: tabular-nums; }
#wishlist-sheet :is(.wish-away,.wish-date-label,.wish-fit) { color: var(--mobile-secondary-ink); font: var(--mobile-support-font); }
#wishlist-sheet .wish-date { padding-top: 8px; border-top: 3px double rgba(74,58,38,.24); }
#wishlist-sheet .wish-away { white-space: normal; line-height: 1.4; }
#wishlist-sheet .wishlist-goal-card .wish-date { grid-template-columns: 1fr; gap: 0; }
#wishlist-sheet .wishlist-goal-card .wish-away { display: none; }
#wishlist-sheet .wish-actions { align-items: center; margin: 0; padding-top: 4px; border-top: 1px solid var(--mobile-rule); }
#wishlist-sheet .wish-lock { display: inline-flex; align-items: center; gap: 8px; padding-inline: 0; }
#wishlist-sheet .wish-lock svg { width: 18px; height: 18px; flex: 0 0 18px; }
#wishlist-sheet .wish-lock { margin-left: auto; justify-content: center; min-width: 44px; }
#wishlist-sheet .wishlist-goal-card .wish-lock { margin-right: 0; }
/* Pale paper under the horizon controls separates graph paper from burlap. */
#desktop-plan-tools,
#plan-chart-drag {
  background-color: #f0ede6;
  background-image: var(--agenda-grain);
}
#desktop-plan-tools { border-top: 1px solid rgba(85,75,56,.09); }

#plan-chart-drag { background-color: #ebe4d5; background-image: none; }
#desktop-plan-tools { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); flex: 0 0 48px; height: 48px; box-sizing: border-box; gap: 8px; align-items: center; }
#desktop-plan-tools > #schMasterBtn { grid-column: 1; grid-row: 1; }
.is-forecast-view #desktop-plan-tools > #schMasterBtn { visibility: hidden; }
#chart-section-plan { position: relative; }
#view-plan .chart-section, #view-schedule .chart-section { padding-top: 26px; box-sizing: border-box; }
#desktop-plan-tools { position: relative; }

#desktop-plan-tools > #mobile-plan-range { display: inline-grid; grid-column: 1 / -1; grid-row: 1; margin: 0; justify-self: center; padding-inline: 0; color: var(--mobile-secondary-ink); text-transform: none; letter-spacing: 0; font: 650 15px/18px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; grid-template-columns: auto auto auto; column-gap: 6px; align-items: center; }
.app:not(.is-forecast-view) #desktop-plan-tools > #mobile-plan-range { display: none; }
.mobile-horizon-controls { position:relative; z-index:7; flex: 0 0 44px; min-height:44px; width: auto; padding-inline: var(--mobile-gutter); background-color: #ebe4d5; }
.mobile-horizon-controls .hrz-pills { height: 44px; }
.mobile-horizon-controls .hrz-pill { min-width:44px; height:44px; padding:0 8px; touch-action:manipulation; }
.mobile-horizon-controls .hrz-mode-chip { min-width:64px; min-height:44px; height:44px; padding:0 12px; font-size:13px; touch-action:manipulation; }
.mobile-forecast-collapsed .mobile-horizon-controls { display: none; }
/* One grip in both states: centered above the date rail, with a roomy touch target. */
#plan-chart-drag::before {
  content: ''; position: absolute; bottom: 0; left: 50%;
  width: 72px; height: 44px; transform: translateX(-50%);
}
#desktop-plan-tools .hrz-left { flex: 1; min-width: 0; width: auto; }
#desktop-plan-tools .hrz-pills { flex: 0 1 auto; min-width: 0; overflow-x: auto; }
#desktop-plan-tools .hrz-pill { padding-inline: 6px; }
#desktop-plan-tools .hrz-mode-chip { flex-shrink: 0; padding-inline: 5px; }
#mobile-plan-range .period-range-start { text-align: right; }
#mobile-plan-range .period-range-end { text-align: left; }
#mobile-plan-range .period-range-single { grid-column: 1 / -1; }

#desktop-plan-tools .desktop-money-fact.safe { flex: 0 0 auto; flex-direction: row; align-items: center; max-width: none; margin-left: auto; margin-right: 0; gap: 6px; }
#desktop-plan-tools .desktop-money-fact.safe > span { font-size: 13px; font-weight: 700; color: var(--ink); }
#desktop-plan-tools .desktop-money-fact.safe strong { font-size: 26px; font-weight: 700; }
.mobile-forecast-collapsed .desktop-money-fact.safe { margin-left: auto; display: none; }
/* Caveat needs a larger size to visually match the serif cash figure. */
#stash-funding-metric #stash-funding-percent[data-allowance="true"] { font-size: 28px; line-height: 25.3px; }
.mobile-forecast-collapsed .view-stack > .desktop-money-now { height: 60px; flex-basis: 60px; }
.mobile-forecast-collapsed :is(#view-plan, #view-schedule) { padding-top: 60px; }
.mobile-forecast-collapsed .desktop-money-fact.safe > span,
.mobile-forecast-collapsed .desktop-money-fact.safe strong { font-weight: 700; }
.desktop-money-facts > .chart-actions { align-self: center; margin-left: auto; }
#view-plan .chart-labels, #view-schedule .chart-labels { display: none; }

/* Rescheduling actions belong with the visible graph, not the collapsed summary. */
.mobile-forecast-collapsed .chart-actions,
.mobile-forecast-collapsed .plan-verdict { display: none !important; }

/* The trend belongs between the two money facts, including collapsed mode. */
.desktop-money-facts { position: relative; }
.desktop-compact-status {
  display: flex;
  position: static;
  flex: 0 0 32px;
  align-self: center;
  align-items: center;
  pointer-events: none;
}
#desktop-compact-balance { display: none; }
#desktop-compact-trend { height: 20px; }
.chart-heading-group { display: none; }
#view-plan .chart-labels, #view-schedule .chart-labels {
  justify-content: flex-end;
  height: 28px; min-height: 28px; max-height: 28px;
}
.mobile-forecast-collapsed :is(#view-plan, #view-schedule) .chart-section {
  height: 0; min-height: 0; flex-basis: 0; padding: 0; overflow: hidden;
}
.mobile-forecast-collapsed :is(#view-plan, #view-schedule) .chart-labels { display: none; }
/* A working page in the pocket ledger: familiar paper, writing lines, quiet tools.
   Keep the fixed field positions and keyboard geometry in app.js. */
#mobile-record-dialog.canonical-record-dialog[open] {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--mobile-paper); color: var(--ink);
  border: 0; border-top: 1px solid var(--bd2); border-radius: 14px 14px 0 0;
  /* A close contact shadow and a wider falloff lift the sheet over the ledger. */
  box-shadow: 0 -3px 8px rgba(35,30,22,.18), 0 -16px 38px rgba(35,30,22,.22);
}
.canonical-record-dialog .mobile-record-toolbar {
  position: static; flex: 0 0 48px; padding: 0 var(--mobile-gutter);
  background: transparent; border: 0;
}
.canonical-record-dialog .mobile-record-toolbar span { color: var(--ink3); }
.canonical-record-dialog .mobile-record-toolbar button { padding-inline: 10px; }


/* Horizontal Plan gestures browse periods; vertical gestures scroll templates. */
#view-schedule .inc-scroll { touch-action: pan-y; }

/* One rule beneath the complete date label, including its spaces. */
#desktop-plan-tools > #mobile-plan-range { text-decoration: none; position: relative; }
#desktop-plan-tools > #mobile-plan-range::after { content: none; }
#view-plan .desktop-period-date { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Expanded bills read as ledger entries, with the group naming each recurrence. */
#view-plan .rollup-tab[aria-expanded="true"] { min-height: 36px; padding-block: 3px; border-bottom-color: transparent; }
#view-plan .rollup-tab[aria-expanded="true"] .rollup-tab-amt { border-left: 0; font-size: 15px; }
#view-plan .rollup-body .bcard { padding-block: 5px; min-height: 54px; }
#view-plan .tr-label { display: none; }
#view-plan .tr-btn { min-width: 44px; min-height: 44px; padding: 4px; gap: 0; }
#view-plan .recurring-bill-group > .rollup-body > .bcard:not(.ghost) .bcard-name { display: none; }
#view-plan .recurring-bill-group > .rollup-body > .bcard:not(.ghost) .bcard-meta { grid-column: 1; grid-row: 1; margin: 0; }
#view-plan .bcard-shift-status { display: block; }

/* The mobile period heading names the source and shows its incoming money. */
#view-plan .desktop-period-head .desktop-period-heading { grid-template-columns: minmax(0,1fr) auto; align-items: start; }
#view-plan .desktop-period-heading > div { display: block; text-align: left; grid-column: 1; }
#view-plan .desktop-period-heading .mobile-check-amount { display: block; grid-column: 2; grid-row: 1; align-self: start; color: var(--mobile-secondary-ink); font: 500 16px/1.5 var(--sans); white-space: nowrap; text-align: right; margin: 0; }
#view-plan .desktop-period-heading button.mobile-check-amount { position: relative; padding: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
#view-plan .desktop-period-heading button.mobile-check-amount::before { content: ''; position: absolute; inset: -10px 0; }
#view-plan .desktop-period-heading button.mobile-check-amount:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }


/* Every obligation shares the same compact name/detail pair beside its controls. */
#view-plan .bcard .bcard-name { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-plan .bcard .goal-icon { vertical-align: -2px; margin-right: 5px; }

/* Moving an occurrence changes its caption, not its row geometry. */
#view-plan .bcard.ghost, #view-plan .bcard.moved-here { border: 0; border-bottom: 1px solid var(--mobile-rule); background: transparent; padding-inline: 0; }
#view-plan .bcard.ghost .bcard-info { opacity: 1; }

/* One forecast message, on the graph rather than beside Spend Cap. */
#chart-section-plan .chart-heading-group { display:flex; justify-content:center; width:100%; min-height:28px; }
#chart-section-plan .chart-heading-group.has-shortfall #forecast-disclosure { display:none; }
#chart-section-plan .chart-heading-group #ah-mid-icon { order:-1; }
#chart-section-plan .chart-heading-group .desktop-cash-shortfall { display:block; margin:0; padding:4px 0; color:var(--ink2); font:400 12px/1.4 var(--sans); text-align:center; white-space:normal; }
#chart-section-plan .chart-heading-group .desktop-cash-shortfall[hidden] { display:none; }

#view-plan #chart-section-plan .chart-labels, #view-schedule #chart-section-plan .chart-labels { display:flex; position:absolute; top:0; left:0; right:0; justify-content:center; align-items:center; height:26px; min-height:26px; max-height:26px; margin:0; padding:0 8px; box-sizing:border-box; }
#chart-section-plan .chart-labels > :not(.chart-heading-group) { display:none; }
#desktop-compact-trend { display:none; }

/* Reserve equal side space so Today never covers the centered heading. */
#chart-section-plan > #plan-preview-today { left:8px; transform:none; }
#chart-section-plan:has(> #plan-preview-today:not([hidden])) .chart-heading-group { width:calc(100% - 136px); }
#chart-section-plan:has(> #plan-preview-today:not([hidden])) .desktop-cash-shortfall { font-size:11px; line-height:1.15; padding:0; }

/* Future periods are compact forecast rows; payment remains available. */
#view-plan .forecast-managed-label { margin-left:8px; color:var(--ink2); font:400 11px/1.3 var(--sans); letter-spacing:0; text-transform:none; }
#view-plan .rollup-body .bcard.system-managed {
  grid-template-columns:minmax(0,1fr) 44px var(--period-amount-width,max-content);
  grid-template-rows:20px 16px;
  height:44px; min-height:44px; max-height:44px;
  padding-block:4px; column-gap:8px;
}
#view-plan .bcard.system-managed .transport { display:flex; gap:0; }
#view-plan .bcard.system-managed .tr-btn:is(.back,.fwd),
#view-plan .bcard.system-managed.goal-card .transport { display:none; }
#view-plan .bcard.system-managed .bcard-name { font-size:13px; line-height:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#view-plan .bcard.system-managed .bcard-meta { font-size:11px; line-height:16px; }
#view-plan .bcard.system-managed .bcard-shift-status { display:inline; margin-left:6px; }

/* Quiet calendar landmarks within Today's Bills Due. */
#view-plan .bill-day-heading {
  padding:7px 0;
  color:var(--ink2);
  font:600 11px/1.4 var(--sans);
  letter-spacing:.04em;
  background-color: transparent;
  background-image: none;
}
#view-plan .today-agenda.open { overflow:visible; }
#view-plan .bill-day-group { padding-top:17px; }
#view-plan .bill-day-group:first-child { padding-top:0; }

/* Today's checklist retains the full-size interactive row rhythm. */
#view-plan .today-agenda > .bill-day-group > .bcard:last-child { border-bottom-color:transparent; }

/* Inline paycheck amount controls keep the collapsed card in place. */
#view-schedule .inc-card.is-collapsed .cs-amount-editor { grid-column:3; grid-row:1 / 3; display:flex; align-items:center; justify-self:end; gap:3px; width:158px; }
#view-schedule .inc-card.is-collapsed .cs-amount-editor .cs-amt-input { flex:1; width:0; min-width:0; max-width:none; padding:2px; text-align:center; }
#view-schedule .inc-card.is-collapsed .cs-amount-editor .inc-stepper { flex:0 0 44px; width:44px; height:44px; min-width:44px; padding:0; font-size:18px; }

#view-plan .today-agenda { --agenda-hit:44px; }

/* Today opens as a familiar checklist; collapsed sections keep ledger chrome. */
#view-plan .sw-content > .rollup-wrap:has(> .today-agenda.open) > .rollup-tab,
#view-plan .sw-content:has(.today-agenda.open) > .forecast-disclosure-all { display:none; }
#view-plan .today-agenda .bill-day-heading { padding:0 0 8px; color:var(--ink); font:650 14px/1.4 var(--sans); letter-spacing:0; border-bottom:1px solid var(--rule); }
#view-plan .today-agenda .bill-day-group { padding-top:24px; }
#view-plan .today-agenda .bill-day-group:first-child { padding-top:0; }
#view-plan .rollup-body.today-agenda .bcard { grid-template-columns:var(--agenda-hit,32px) minmax(0,1fr) 44px var(--period-amount-width,max-content); grid-template-rows:22px 18px; column-gap:10px; height:60px; min-height:60px; max-height:60px; padding:10px 0; border-radius:0; background:transparent; border-bottom:1px solid var(--rule); }
#view-plan .today-agenda .bcard .bcard-name { grid-column:2; grid-row:1; align-self:center; font:550 14px/1.4 var(--sans); }
#view-plan .today-agenda .bcard .bcard-meta { grid-column:2; grid-row:2; align-self:center; font:400 11px/1.4 var(--sans); }
#view-plan .today-agenda .bcard .bcard-amt { grid-column:4; text-align:right; justify-self:end; grid-row:1 / 3; font:500 15px/1.4 var(--serif); font-variant-numeric:tabular-nums; padding:0; }
#view-plan .today-agenda .bcard .transport { grid-column:3; grid-row:1 / 3; display:flex; justify-self:stretch; gap:0; }
#view-plan .today-agenda .transport .tr-btn.back,
#view-plan .today-agenda .bcard.paid .transport { display:none; }
#view-plan .today-agenda .bcard .agenda-check { grid-column:1; grid-row:1 / 3; align-self:center; justify-self:center; display:flex; align-items:center; justify-content:center; width:var(--agenda-hit,32px); height:var(--agenda-hit,32px); min-width:var(--agenda-hit,32px); min-height:var(--agenda-hit,32px); padding:0; background:transparent; border:0; box-shadow:none; }
#view-plan .today-agenda .agenda-check .tr-symbol { 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; color:transparent; font:650 13px/1 var(--sans); }
#view-plan .today-agenda .agenda-check.latched .tr-symbol { background:var(--ink2); border-color:var(--ink2); color:var(--paper-hi,#f7f8f6); }
#view-plan .today-agenda .agenda-check .tr-label,
#view-plan .today-agenda .bcard-name .stag:is(.paid,.today) { display:none; }
#view-plan .today-agenda .bcard.paid .bcard-name { text-decoration:line-through; font-weight:400; }
#view-plan .today-agenda .bcard .ghost-hop { grid-column:2; grid-row:2; }
@media (hover:hover) {  #view-plan .today-agenda .agenda-check:hover .tr-symbol { border-color:var(--ink); } }

/* Postpone owns the same trailing column on every agenda row. */
#view-plan .today-agenda .bcard .agenda-postpone { display:flex; align-items:center; justify-content:center; width:44px; min-width:44px; min-height:var(--agenda-hit,32px); padding:0; box-sizing:border-box; border:0; background:transparent; color:var(--ink2); opacity:1; }
#view-plan .today-agenda .agenda-postpone .tr-count { display:none; }
#view-plan .today-agenda .agenda-postpone .tr-symbol { 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; font-size:7px; line-height:1; }
#view-plan .today-agenda .agenda-postpone.latched .tr-symbol { width:auto; height:auto; border:0; }
#view-plan .today-agenda .agenda-postpone .tr-label { display:none; position:static; padding:0; color:inherit; font:500 11px/1.3 var(--sans); white-space:nowrap; opacity:1; }
#view-plan .today-agenda .bcard .agenda-postpone:disabled { visibility:hidden; pointer-events:none; }
#view-plan .today-agenda .bcard .agenda-postpone:focus-visible { outline:2px solid var(--indigo); outline-offset:2px; }
@media (hover:hover) { #view-plan .today-agenda .bcard .agenda-postpone:not(:disabled):not(.latched):hover { border-color:var(--ink); } }
/* Envelope allocations are supporting detail; their roll-up carries the total. */
#view-plan .rollup-body .bcard.envelope-row { display:flex; align-items:center; gap:8px; height:32px; min-height:32px; max-height:32px; padding:4px 8px; }
#view-plan .bcard.envelope-row .bcard-info { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
#view-plan .bcard.envelope-row .bcard-name { flex:0 1 auto; max-width:48%; margin:0; font:500 12px/1.4 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-plan .bcard.envelope-row .bcard-meta { order:1; flex:1 1 0; min-width:0; margin:0; align-self:center; font:400 10px/1.4 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-plan .bcard.envelope-row .bcard-amt { order:2; margin:0; padding:0; align-self:center; font:500 12px/1.4 var(--sans); }
#view-plan .bcard.envelope-row .goal-icon { width:12px; height:12px; vertical-align:-2px; }
#view-plan .bcard.envelope-row .transport { display:none; }


/* Agenda disclosures share existing headings rather than taking another row. */
#view-plan .today-agenda .bill-day-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; padding-bottom:4px; }
/* Envelope funding is the quiet footer to the bills, not another task. */
#view-plan .agenda-envelope-caption { display:none; }
#view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope { margin-top:16px; border-top:1px solid var(--rule,var(--mobile-rule)); }
#view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope > .rollup-tab { min-height:40px; padding:8px 0 2px; margin:0; border:0; background:transparent; box-shadow:none; }
#view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope > .rollup-tab .rollup-tab-left { gap:8px; }
#view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope > .rollup-tab .rollup-tab-lbl, #view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope > .rollup-tab .rollup-tab-detail { display:none; }
#view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope .agenda-envelope-caption { display:block; font:550 13px/1.4 var(--sans); color:var(--ink); text-transform:none; letter-spacing:0; }
#view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope > .rollup-tab .rollup-tab-amt { visibility:visible; min-width:0; padding:0; color:var(--ink); font:500 14px/1.4 var(--sans); }
#view-plan .sw-content:not(:has([data-drawer-key="0_bills"] > .rollup-tab[aria-expanded="false"])) > .agenda-envelope > .rollup-body { margin-left:0; }

/* The chevron sits beside the existing title and cash, not below them. */
#view-plan .desktop-period-head .desktop-period-heading { position:relative; padding-right:0; padding-bottom:10px; }
#view-plan .desktop-period-head .desktop-period-ledger,
#view-plan .desktop-period-head .desktop-period-context { display:none; }
#view-plan .desktop-period-heading > .period-ledger-toggle { display:flex; position:absolute; left:-10px; top:-6px; align-items:center; justify-content:center; width:40px; min-height:44px; height:44px; padding:0; margin:0; border:0; background:transparent; color:var(--ink2); }
#view-plan .desktop-period-heading > .period-ledger-toggle > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#view-plan .desktop-period-heading > .period-ledger-toggle::after { content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
#view-plan .desktop-period-heading > .period-ledger-toggle[aria-expanded="true"]::after { content:''; transform:rotate(225deg); }
#view-plan .desktop-period-heading > .period-ledger-toggle:focus-visible { outline:2px solid var(--indigo); outline-offset:1px; }

#view-plan .desktop-period-heading > div { padding-left:28px; }

/* Future bills share one text line; payment retains its full hit target. */
#view-plan .rollup-body .bcard.system-managed:not(.goal-card) { grid-template-columns:minmax(0,1fr) 70px 16px 44px max(56px,var(--period-amount-width,64px)); grid-template-rows:auto; height:44px; min-height:44px; max-height:44px; padding-block:0; align-items:center; }
#view-plan .bcard.system-managed:not(.goal-card) .bcard-name { grid-column:1; grid-row:1; min-width:0; align-self:center; }
#view-plan .bcard.system-managed:not(.goal-card) .bcard-meta { grid-column:2; grid-row:1; align-self:center; margin:0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-plan .bcard.system-managed:not(.goal-card) .transport { grid-column:4; grid-row:1; align-self:center; }
#view-plan .bcard.system-managed:not(.goal-card) .bcard-amt { grid-column:5; grid-row:1; font-size:13px; text-align:right; }
#view-plan .bcard.system-managed:not(.goal-card) .tr-btn.pay { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; }

#view-plan .bcard.system-managed:not(.goal-card) > .funding-limit-mark { grid-column:3; grid-row:1; justify-self:center; align-self:center; margin:0; }


/* Today uses the ordinary ledger list until Agenda view is chosen. */
#view-plan .rollup-body .bcard.today-accounting { grid-template-rows:auto; height:44px; min-height:44px; max-height:44px; padding-block:0; align-items:center; }
#view-plan .bcard.today-accounting .bcard-name { grid-column:1; grid-row:1; min-width:0; align-self:center; }
#view-plan .bcard.today-accounting .bcard-meta { grid-column:2; grid-row:1; align-self:center; margin:0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-plan .bcard.today-accounting .transport { grid-row:1; align-self:center; }
#view-plan .bcard.today-accounting .bcard-amt { grid-row:1; font-size:13px; text-align:right; }
#view-plan .bcard.today-accounting .tr-btn.pay { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; }
#view-plan .rollup-body .bcard.today-accounting { grid-template-columns:minmax(0,1fr) 60px 108px max(56px,var(--period-amount-width,64px)); }
#view-plan .bcard.today-accounting .transport { grid-column:3; display:flex; align-items:center; justify-content:flex-end; }
#view-plan .bcard.today-accounting .bcard-amt { grid-column:4; }
#view-plan .bcard.today-accounting .transport .funding-limit-mark { flex:0 0 10px; margin:0 3px; }

/* The same bright paper is used for every selected period. */
#chart-section-plan.chart-section:not(.future-tint) { background-color:#ebe4d5; }

/* Reserve the same pause and amount columns for every envelope allocation. */
#view-plan .bcard.envelope-row .bcard-amt { position:relative; flex:0 0 calc(max(56px,var(--period-amount-width,64px)) + 20px); box-sizing:border-box; padding-left:20px; text-align:right; }
#view-plan .bcard.envelope-row .bcard-amt .funding-limit-mark { position:absolute; left:0; top:50%; transform:translateY(-50%); width:12px; margin:0; justify-content:center; }

/* Payment leads ledger rows; each timing cue owns a stable column. */
#view-plan .rollup-body .bcard.ledger-bill .ledger-check { width:44px; height:44px; min-width:44px; min-height:44px; border-radius:5px; padding:0; }
#view-plan .rollup-body .bcard.ledger-bill .transport { display:grid; grid-template-columns:44px 12px 44px; gap:0; align-items:center; }
#view-plan .rollup-body .bcard.ledger-bill .transport .back { grid-column:1; grid-row:1; }
#view-plan .rollup-body .bcard.ledger-bill .transport .fwd { grid-column:3; grid-row:1; }
#view-plan .rollup-body .bcard.ledger-bill .transport .tr-btn { width:44px; min-width:44px; padding:0; }
#view-plan .rollup-body .bcard.ledger-bill .transport .funding-limit-mark { grid-column:2; grid-row:1; margin:0; justify-self:center; }

#view-plan .today-agenda .agenda-deadline-note { margin-left:8px; color:var(--ink3); font-size:10px; white-space:nowrap; }

/* Payment state is an empty box until paid, with immediate feedback in every period. */
#view-plan .bcard .tr-btn.pay:not(.holding) { transition:none; }
#view-plan .bcard .tr-btn.pay .tr-symbol { 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; color:transparent; font:650 13px/1 var(--sans); transition:none; }
#view-plan .bcard .tr-btn.pay.latched .tr-symbol { background:var(--ink2); border-color:var(--ink2); color:var(--paper-hi,#f7f8f6); }


#chart-section-plan.chart-section { position:relative; }


/* The view switch occupies the existing date strip, never a bill-list row. */
#view-plan .pnav-bar { position:relative; }
#view-plan .pnav-row { position:static; }
#forecast-view-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); min-height:32px; padding:0 8px; border:0; background:transparent; color:var(--ink2); font:500 11px/1.4 var(--sans); cursor:pointer; }
#forecast-view-toggle[hidden] { display:none; }
#forecast-view-toggle:focus-visible { outline:2px solid var(--indigo); outline-offset:2px; }

/* Phone ledger: compact metadata below the name, full-height controls beside it. */
#view-plan .rollup-body .bcard .bcard-name.has-occurrence-count { display:flex; width:100%; max-width:100%; height:24px; align-items:center; overflow:visible; }
#view-plan .rollup-body .bcard.ledger-bill:not(.goal-card) {
  grid-template-columns:44px minmax(0,1fr) 100px max(56px,var(--period-amount-width,64px));
  grid-template-rows:24px 16px; height:52px; min-height:52px; max-height:52px; padding-block:6px; column-gap:4px;
}
#view-plan .rollup-body .bcard.ledger-bill .bcard-name { grid-column:2; grid-row:1; align-self:end; }
#view-plan .rollup-body .bcard.ledger-bill .bcard-meta { grid-column:2; grid-row:2; align-self:start; margin:0; font-size:10px; line-height:16px; }
#view-plan .rollup-body .bcard.ledger-bill .ledger-check { grid-column:1; grid-row:1 / 3; align-self:center; }
#view-plan .rollup-body .bcard.ledger-bill .transport { grid-column:3; grid-row:1 / 3; align-self:center; }
#view-plan .rollup-body .bcard.ledger-bill .bcard-amt { grid-column:4; grid-row:1 / 3; align-self:center; }
/* Expanded goal headings do not repeat the pause cues in their allocation list. */
#view-plan .rollup-body.open .goal-card:not(.envelope-row) .funding-limit-mark { display:none; }

/* Today has no earlier payday: return that control's width to the name. */
#view-plan .rollup-body .bcard.ledger-bill.today-accounting:not(.goal-card) { grid-template-columns:44px minmax(0,1fr) 56px max(56px,var(--period-amount-width,64px)); }
#view-plan .rollup-body .bcard.ledger-bill.today-accounting .transport { grid-template-columns:12px 44px; }
#view-plan .rollup-body .bcard.ledger-bill.today-accounting .transport .funding-limit-mark { grid-column:1; }
#view-plan .rollup-body .bcard.ledger-bill.today-accounting .transport .fwd { grid-column:2; }


/* Mirror Plan's global control in the shared mobile chrome, outside the cards. */
#desktop-plan-tools > #forecast-view-toggle { position:relative; right:auto; top:auto; transform:none; grid-column:3; grid-row:1; justify-self:end; z-index:3; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; color:var(--ink2); font:600 11px/1.4 var(--sans); text-decoration:none; }
.app:not(.is-forecast-view) #desktop-plan-tools > #forecast-view-toggle,
#desktop-plan-tools > #forecast-view-toggle[hidden] { display:none; }

/* Each agenda day stays readable until the following day pushes it away. */
#view-plan .today-agenda.open .bill-day-heading {
  position:sticky; top:0; z-index:4;
  background-color:#f0ede6;
  background-image:var(--agenda-grain);
}

/* Checked state belongs to the small checkbox, not its larger touch target. */
#view-plan .bcard .tr-btn.pay.latched { background-color:transparent; color:var(--ink2); box-shadow:none; border-color:transparent; }
@media(hover:hover) {
  #view-plan .bcard .tr-btn.pay.latched:hover:not(:disabled) { background-color:transparent; box-shadow:none; border-color:transparent; }
}

/* Envelopes share the leading control column with the bill ledger. */
#view-plan .rollup-body .bcard.ledger-bill:not(.goal-card),
#view-plan .rollup-body .bcard.envelope-row { padding-left:8px; padding-right:8px; }
#view-plan .bcard.envelope-row .bcard-info { position:relative; }
#view-plan .bcard.envelope-row .bcard-name { padding-left:48px; box-sizing:border-box; }
#view-plan .bcard.envelope-row .goal-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); margin:0; }
#view-plan .agenda-envelope .bcard.envelope-row { padding-left:0; padding-right:0; }

/* Managed goal installments retain a single compact ledger line. */
#view-plan .rollup-body .bcard.goal-card:not(.envelope-row):not(.goal-due-card) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 16px max(56px,var(--period-amount-width,64px)); column-gap:6px; height:32px; min-height:32px; max-height:32px; padding:4px 8px; align-items:center; }
#view-plan .bcard.goal-card:not(.envelope-row):not(.goal-due-card) .bcard-info { display:contents; }
#view-plan .bcard.goal-card:not(.envelope-row):not(.goal-due-card) .bcard-name { grid-column:1; grid-row:1; font:500 12px/1.4 var(--sans); min-width:0; overflow:hidden; white-space:nowrap; }
#view-plan .bcard.goal-card:not(.envelope-row):not(.goal-due-card) .bcard-meta { grid-column:2; grid-row:1; margin:0; font:10px/1.4 var(--sans); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#view-plan .bcard.goal-card:not(.envelope-row):not(.goal-due-card) .bcard-amt { grid-column:4; grid-row:1; text-align:right; white-space:nowrap; font:400 12px/1.4 var(--sans); color:var(--ink2); }
#view-plan .rollup-body.open .bcard.goal-card:not(.envelope-row):not(.goal-due-card) > .funding-limit-mark { grid-column:3; grid-row:1; display:inline-flex; margin:0; justify-self:center; }
#view-plan .rollup-body .bcard.goal-due-card { min-height:0; padding:6px 8px; }
#view-plan .goal-due-card .bcard-amt { font-size:13px; text-align:right; }

/* Keep the selection inside the row, with an always-present content gutter. */
#view-plan .sw-content .rollup-body .bcard { padding-left:10px; padding-right:10px; box-sizing:border-box; }
#view-plan .sw-content .rollup-body .bcard:is(.selected,:focus-visible) { outline:none; border-radius:2px; box-shadow:inset 0 0 0 1px var(--indigo); }
#view-schedule .inc-card { padding-left:12px; padding-right:12px; box-sizing:border-box; }

/* Compact funding rows share columns and never retain the old two-row grid. */
#view-plan .sw-content .rollup-body .bcard.goal-card:not(.goal-due-card) {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 16px max(56px,var(--period-amount-width,64px));
  grid-template-rows: minmax(0,1fr); column-gap: 6px;
  height: 32px; min-height: 32px; max-height: 32px; padding: 3px 4px; align-items: center;
}
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-info { display: contents; }
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-name { grid-column:1; grid-row:1; min-width:0; font:500 12px/1.4 var(--sans); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) :is(.bcard-meta,.ghost-hop) { grid-column:2; grid-row:1; min-width:0; margin:0; padding:0; font:400 10px/1.4 var(--sans); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#view-plan .sw-content .rollup-body .goal-card.ghost .bcard-meta { display:none; }
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-amt { grid-column:4; grid-row:1; position:relative; margin:0; text-align:right; font:400 11px/1.4 var(--sans); white-space:nowrap; }
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-amt > .funding-limit-mark { position:absolute; top:50%; transform:translateY(-50%); width:16px; margin:0; justify-content:center; }
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .transport { display:none; }

#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-name {
  position:relative; display:block; box-sizing:border-box; width:100%; max-width:none;
  align-self:center; margin:0; padding:0 0 0 28px; height:auto; min-height:18px; line-height:18px;
}
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-name .goal-icon {
  position:absolute; left:0; top:50%; transform:translateY(-50%); width:20px; height:20px; margin:0;
}
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) :is(.bcard-meta,.ghost-hop,.bcard-amt) { align-self:center; max-width:none; }

#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 16px max(48px,var(--period-amount-width,56px)); column-gap:4px; }
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-amt { padding:0; }
#view-plan .sw-content .rollup-body .goal-card:not(.goal-due-card) .bcard-amt > .funding-limit-mark { left:auto; right:calc(100% + 4px); }
#view-plan .sw-content > .rollup-wrap > .rollup-tab .rollup-tab-lbl { white-space:nowrap; font:600 13px/1.4 var(--sans); letter-spacing:0; }

/* Mobile Agenda starts at its Today checklist; List retains the money breakdown. */
#view-plan .desktop-period-head.agenda-today-head { display:none; }
#view-plan .mobile-period-balance:has(~ .agenda-today-head) { display:none; }
#view-plan .desktop-period-head.agenda-today-head .desktop-period-stat.start { display:none; }
#view-plan .desktop-period-head.agenda-today-head .desktop-period-heading { cursor:default; }


#view-plan .agenda-today-head .desktop-period-heading > div { padding-left:0; }

.view-stack:has(#protection-warning:not([hidden])) > .desktop-money-now { height:84px; }
.view-stack:has(#protection-warning:not([hidden])) #view-plan,
.view-stack:has(#protection-warning:not([hidden])) #view-schedule { padding-top:84px; }
#protection-warning { left:var(--mobile-gutter); right:var(--mobile-gutter); font-size:11px; }

@media (max-width:600px) {
  #protection-review { width:calc(100% - 24px); padding:16px; max-height:calc(100dvh - 24px); }
  #protection-review[open] { gap:10px; }
  #protection-review .protection-summary { grid-template-columns:repeat(3,max-content) 32px; justify-content:space-between; gap:4px; align-items:center; }
  #protection-review .protection-summary strong { font-size:clamp(12px,3.5vw,16px); white-space:nowrap; overflow-wrap:normal; }
  #protection-review .protection-summary > :is(div,button) > span { font-size:10px; }
  #protection-review .protection-summary .stash-completion-gauge,
  #protection-review .protection-summary .stash-completion-gauge svg { width:32px; height:24px; }
  #protection-review .protection-summary .stash-completion-gauge { justify-self:end; align-self:center; }
  .protection-row { gap:2px; }
  .protection-row .protection-item { grid-column:auto; }
  .protection-row .protection-entry,.protection-row .protection-add,.protection-row .protection-clear { grid-column:auto; }
  .protection-row button, .protection-row input, .protection-toolbar button { min-height:44px; }
}

@media (max-width:600px) {
  .protection-toolbar { grid-template-columns:minmax(0,1fr) auto 44px 44px; }
  .protection-toolbar :is(.protection-sort,.protection-filter,.protection-clear-all) { min-height:44px; }
  .protection-toolbar :is(.protection-filter,.protection-clear-all) { width:44px; }
  .protection-sort svg { width:10px; height:10px; }
  .protection-toolbar .protection-clear-all { font-size:17px; }
  /* Small visible control, with the full touch target left intact. */
  .protection-toolbar .protection-filter { position:relative; }
  .protection-toolbar .protection-filter[aria-pressed='true'] { background:transparent; box-shadow:none; }
  .protection-filter[aria-pressed='true']::before { content:''; position:absolute; inset:6px; border:1px solid var(--ink2); border-radius:4px; background:var(--bd); pointer-events:none; }
  .protection-filter svg { position:relative; width:18px; height:18px; }
}

#protection-review .protection-close { width:44px; height:44px; top:4px; right:4px; }

@media (max-width:600px) {
  #protection-review h2 { margin:-16px -16px 0; padding-left:16px; }
  .protection-item { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:5px; padding-left:18px; }
}

#protection-review .protection-icon { width:28px; height:44px; min-height:44px; left:-7px; }
@media(max-width:600px) { .protection-row { grid-template-columns:minmax(0,1fr) 28px 60px 28px 26px; } }

/* Compact type choice: same switch language as the form options. */
@media (max-width:1199px) {
  #mobile-record-dialog .record-fields:not(.record-income) .record-kind { display:flex; justify-content:flex-end; padding-right:30px; }
  #mobile-record-dialog .record-kind > button { display:none; }
  #mobile-record-dialog .record-type-switch { display:inline-flex; align-items:center; gap:9px; min-height:40px; cursor:pointer; font:500 13px var(--sans); }
  #mobile-record-dialog .record-type-switch input { margin:0; flex:none; }
}

#desktop-plan-tools > #mobile-plan-range.spending-plan-heading { display:flex; flex-wrap:wrap; justify-content:center; gap:2px 8px; max-width:100%; min-width:0; white-space:normal; text-transform:none; letter-spacing:0; }
#mobile-plan-range.spending-plan-heading .spending-plan-title { font:600 23px/1.1 'Caveat',cursive; color:#365f94; }
#mobile-plan-range.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; }


/* Direct finger tracking, with no transition lag while dragging. */
#view-plan .today-agenda .wishlist-swipe-row { position:relative; overflow:hidden; touch-action:pan-y; }
#view-plan .today-agenda .wishlist-swipe-row :is(.agenda-wish,.agenda-trash) { display:none; }
#view-plan .today-agenda .bcard-name.has-agenda-trash { padding-right:0; }
#view-plan .today-agenda .swipe-dragging > :not(.agenda-swipe-wish):not(.bcard-info),
#view-plan .today-agenda .swipe-dragging > .bcard-info > :not(.bcard-amt) { transform:translate3d(var(--swipe-offset,0px),0,0); }
#view-plan .today-agenda .swipe-dragging > .agenda-swipe-wish { display:flex; position:absolute; inset:0 auto 0 0; width:var(--swipe-offset,0px); overflow:hidden; align-items:center; justify-content:center; white-space:nowrap; border:0; background:#eac2cf; color:#752b4a; font:600 12px/1.3 var(--sans); pointer-events:none; }
#view-plan .today-agenda .swipe-dragging .bcard-amt { transform:none; position:relative; z-index:2; background:var(--paper-hi); }

#view-plan .today-agenda .agenda-swipe-wish { gap:7px; }
#view-plan .today-agenda .agenda-swipe-wish svg { width:18px; height:18px; flex-shrink:0; }
#view-plan .today-agenda .swipe-delete > .agenda-swipe-wish { background:#a83f39; color:#fff; }
#view-plan .today-agenda .agenda-swipe-wish:focus-visible { outline:none; box-shadow:inset 0 -2px currentColor; }

#view-plan .today-agenda .agenda-swipe-wish .wishlist-heart { color:#c43d4d; }

/* Cash stays left; Padding and Stash Percentage share the right-hand control. */
.desktop-money-now .desktop-money-facts { padding-right:128px; }
#stash-funding-metric {
  position:absolute;
  right:var(--mobile-gutter);
  top:8px;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  min-height:44px;
  padding:0 2px;
  border:0;
  background:transparent;
  color:var(--ink2);
  cursor:pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#stash-funding-metric span { font:500 10px/1.2 var(--sans); }
#stash-funding-metric strong { font:500 18px/1.2 var(--serif); font-variant-numeric:tabular-nums; }
#stash-funding-metric #stash-funding-percent[data-allowance="true"] { font-family:'Caveat',cursive; font-weight:600; }
#stash-funding-metric:focus-visible { outline:none; box-shadow:inset 0 -2px var(--green-dp); }

.desktop-money-now .desktop-compact-status { min-width:0; gap:4px; pointer-events:auto; }
#desktop-compact-trend { flex:0 0 24px; width:24px; }
#desktop-compact-status #chart-title-plan { min-width:0; }

/* Mobile Today agenda keeps planned savings at the bottom, outside the checklist. */
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content { display:flex; flex-direction:column; flex:1 0 auto; padding-bottom:0; }
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > [data-drawer-key="0_goals"] {
  order:10; flex-shrink:0; margin-top:auto; position:sticky; bottom:0; z-index:5;
  background:var(--paper-hi); border-top:1px solid var(--rule); padding-top:4px;
}
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > [data-drawer-key="0_goals"] > .rollup-body.open { max-height:35vh; overflow-y:auto; overscroll-behavior:contain; }

/* Restore the original compact green chart status treatment. */
#desktop-compact-status #chart-title-plan {
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 7px; border:0; border-radius:4px; box-shadow:none;
  background:transparent; color:var(--ink3); font:600 11px/1 var(--sans);
  text-align:center; text-decoration:none; box-sizing:border-box;
}
#desktop-compact-status #chart-title-plan[data-status="good"] { color:#fff; background:rgba(30,120,88,.88); font-weight:800; }
#desktop-compact-status #chart-title-plan[data-status="prefund"] { color:var(--green-dp); background:rgba(30,120,88,.09); font-weight:600; }
#desktop-compact-status #chart-title-plan[data-status="attention"] { color:#fff; background:#98552f; font-weight:700; }
#desktop-compact-status #chart-title-plan[data-status="adjusted"] { color:#fff; background:#47677b; font-weight:700; }
#desktop-compact-status #chart-title-plan:focus-visible { outline:none; box-shadow:inset 0 -2px currentColor; }

/* Keep the money controls visible with either forecast height. */
#stash-funding-metric { display:flex; max-width:45%; }
.desktop-money-now .desktop-compact-status { flex:0 0 24px; }
#desktop-compact-status #chart-title-plan { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; min-height:36px; }
.mobile-forecast-collapsed #desktop-compact-status #chart-title-plan { display:none; }

/* Phone graph heading: trend icon plus its compact disclosure, without prose. */
#chart-section-plan .chart-heading-group :is(.mobile-forecast-label,.mobile-forecast-summary,.desktop-cash-shortfall) { display:none; }
#chart-section-plan .chart-heading-group #forecast-disclosure { width:28px; min-width:28px; padding:0; }

#desktop-plan-tools > #monthly-view-control { grid-column:3; grid-row:1; justify-self:end; font-size:10px; z-index:3; }
.is-forecast-view #desktop-plan-tools > #monthly-view-control { visibility:hidden; pointer-events:none; }

/* The agenda page already ends at the dock; do not reserve its height twice. */
#view-plan #pg-cur.period-today:has(> .agenda-today-head) { padding-bottom:0; }
/* Bills with arrears have both an end date and held money. Give each its own row. */
#mobile-record-dialog .record-fields[data-mode="bill"]:has(.record-protection:not([hidden])) .record-protection { grid-row:6; }
#mobile-record-dialog .record-fields[data-mode="bill"]:has(.record-protection:not([hidden])) .record-options { grid-row:7; }
#mobile-record-dialog .record-fields[data-mode="bill"]:has(.record-protection:not([hidden])) .record-footer { grid-row:8; }

/* Budget actions open below the masthead, as a compact dropdown. */
#tools-sheet { top:calc(env(safe-area-inset-top) + 68px); bottom:auto; left:auto; right:12px; width:min(320px,calc(100vw - 24px)); max-height:calc(100dvh - 100px); border-radius:var(--rr-md); transform:none; overflow-y:auto; }
#tools-sheet .modal-handle, #tools-sheet .modal-header { display:none; }
#tools-sheet .tools-item { min-height:44px; }

/* Today has no expandable action panel; keep the cash shortcut independent. */
#view-plan .period-today .desktop-period-heading > div { padding-left:0; }
#view-plan .period-today .desktop-period-heading { cursor:default; }

/* Goal markers share the checkbox lane in every mobile pay period. */
#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:var(--agenda-hit,44px) minmax(0,1fr) 44px var(--period-amount-width,max-content);
  column-gap:10px;
  padding-left:10px;
  padding-right:10px;
}
#view-plan .sw-content .rollup-body.today-agenda .goal-due-card .goal-due-date { grid-column:2 / 4; }

/* Compact status pills sit quietly alongside mobile bill names. */
#view-plan .bcard-name .stag:is(.today,.paid) {
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.035em;
  padding:2px 5px;
}
#view-plan .today-agenda .bcard-name .stag:is(.today,.paid) { display:none; }


#view-plan .sw-content .rollup-body:not(.today-agenda) .bcard.goal-due-card { padding-left:8px; }

#mobile-record-dialog .record-fields:is([data-mode="stash"],[data-mode="goal"]):has(.record-end:not([hidden])) .record-protection { grid-row:6; }
#mobile-record-dialog .record-fields:is([data-mode="stash"],[data-mode="goal"]):has(.record-end:not([hidden])) .record-footer { grid-row:8; }

/* Due goals share the bill row's title/date rhythm and amount edge. */
#view-plan .sw-content .rollup-body .bcard.goal-due-card {
  grid-template-rows:auto auto;
  row-gap:0;
  min-height:62px;
  padding-top:8px;
  padding-bottom:8px;
}
#view-plan .sw-content .rollup-body .goal-due-card .goal-due-title {
  grid-column:2 / 4;
  grid-row:1;
  font:650 14px/1.4 var(--sans);
  gap:4px;
}
#view-plan .sw-content .rollup-body .goal-due-card .goal-due-date {
  grid-column:2 / 4;
  grid-row:2;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font:500 11px/1.4 var(--sans);
  color:var(--mobile-secondary-ink);
}
#view-plan .sw-content .rollup-body .goal-due-card .goal-due-amount {
  grid-column:4;
  grid-row:1 / 3;
  align-self:center;
  font:400 17px/1.25 var(--serif);
  color:var(--mobile-secondary-ink);
}

/* Keep the goal subtitle tucked beneath its title without shrinking tap targets. */
#view-plan .sw-content .rollup-body .bcard.goal-due-card { min-height:54px; padding-top:4px; padding-bottom:4px; }
#view-plan .sw-content .rollup-body .goal-due-card .goal-due-date { margin-top:-5px; }

/* Stashed cash is a deduction even when the mobile cash breakdown is closed. */
#view-plan .desktop-period-head:not(.mobile-details-open) .desktop-period-stat.protected { display:flex; }
#view-plan .desktop-period-head .desktop-period-ledger:has(> .desktop-period-stat.protected) { display:grid; }


/* A collapsed forecast must retain its actionable shortfall warning. */
.mobile-forecast-collapsed #desktop-compact-status #chart-title-plan[data-status="attention"] { display:block; }

/* Goal titles and dates use the same checkbox-to-text gap as regular bills. */
#view-plan .sw-content .rollup-body:not(.today-agenda) .bcard.goal-due-card { column-gap:4px; }
/* A quiet status tag beside the goal name, with its control padding retained. */
#view-plan .goal-due-card .goal-gauge-control .goal-fuel-gauge { width:24px; flex-basis:24px; }
#view-plan .goal-due-card .goal-gauge-control .goal-fuel-gauge svg { width:24px; height:17px; }

/* Collapsed forecast: one centered action or trend, with both money facts intact. */
.mobile-forecast-collapsed .desktop-money-now .desktop-money-facts { position:static; }
.mobile-forecast-collapsed #desktop-compact-status {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:96px; height:44px; justify-content:center;
}
.mobile-forecast-collapsed #desktop-compact-status #chart-title-plan:is([data-status="prefund"],[data-status="attention"]) {
  display:inline-flex; position:static; transform:none; width:96px; min-height:40px;
  line-height:1.2; padding:4px 8px;
}
.mobile-forecast-collapsed #desktop-compact-trend { display:flex; align-items:center; justify-content:center; }
.mobile-forecast-collapsed #desktop-compact-status:has(#chart-title-plan:is([data-status="prefund"],[data-status="attention"])) #desktop-compact-trend { display:none; }

@media (max-width:359px) {
  .mobile-forecast-collapsed #desktop-compact-status,
  .mobile-forecast-collapsed #desktop-compact-status #chart-title-plan:is([data-status="prefund"],[data-status="attention"]) { width:72px; }
}

#desktop-plan-tools > #schedule-search { grid-column:1 / -1; grid-row:1; justify-self:stretch; width:auto; max-width:none; margin-left:48px; }

/* Search fits above the keyboard while retaining the live forecast and its disclosure. */
.app.mobile-plan-searching { height:var(--plan-search-height,100dvh); top:var(--plan-search-top,0px); }
.app.mobile-plan-searching .mobile-horizon-controls { display:none; }
.app.mobile-plan-searching:not(.mobile-forecast-collapsed) #view-schedule .chart-section {
  /* Leave a complete amount row reachable on short keyboard viewports. */
  flex-basis:min(var(--mobile-forecast-h,120px),max(100px,calc(var(--plan-search-height,100dvh) - 350px)));
  height:min(var(--mobile-forecast-h,120px),max(100px,calc(var(--plan-search-height,100dvh) - 350px)));
  min-height:0;
}
.app.mobile-plan-searching #view-schedule .inc-scroll { padding-bottom:16px; }
.app.mobile-plan-searching #view-schedule .plan-pane.search-no-matches { display:none; }
.app.mobile-plan-searching #view-schedule .inc-section-hdr { position:static; padding-block:2px; grid-template-rows:44px; }
.app.mobile-plan-searching #view-schedule .inc-section-title { font-size:17px; }
.app.mobile-plan-searching #view-schedule .inc-section-sub { display:none; }
.app.mobile-plan-searching #view-schedule .inc-section-actions { grid-row:1; }
/* Center the graph trend without the invisible disclosure adding a side gap. */
.app:not(.mobile-forecast-collapsed) #chart-section-plan .chart-heading-group #forecast-disclosure {
  position:absolute; left:50%; transform:translateX(-50%); width:44px; min-width:44px; height:28px; z-index:1;
}
.app:not(.mobile-forecast-collapsed) #chart-section-plan #ah-mid-icon { pointer-events:none; }
/* Phones fold to a balanced money band, without a second graph. */
#compact-chart, #desktop-compact-balance { display:none !important; }
.mobile-forecast-collapsed #desktop-compact-status #chart-title-plan:is([data-status="prefund"],[data-status="attention"]) {
  font:600 11px/1.2 var(--sans); text-align:center;
}
/* Only the raised Agenda savings drawer gets additional elevation. */
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > [data-drawer-key="0_goals"]:has(> .rollup-tab[aria-expanded="true"]) {
  border-radius:12px 12px 0 0; box-shadow:0 -10px 28px rgba(43,36,26,.26),0 -2px 5px rgba(43,36,26,.16);
}
#view-plan .rollup-body .bcard.ledger-bill.compact-bill:not(.goal-card) { grid-template-columns:44px minmax(0,1fr) 100px max(56px,var(--period-amount-width,64px)); min-height:44px; height:44px; max-height:none; padding-block:0; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-bill-exception:not(.goal-card) { min-height:56px; height:auto; grid-template-rows:24px minmax(16px,auto); padding-block:0; }
#view-plan .unpaid-total { text-transform: none; letter-spacing: 0; font-size: 12px; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .bcard-name { font-weight:600; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .bcard-meta { font-size:11px; white-space:normal; overflow:visible; color:var(--ink2); }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .bcard-amt { font:500 16px/1.2 var(--serif); color:var(--ink); }
/* Set aside: money the system plans around pinned bills, set out as a quiet ledger. */
#view-plan .set-aside-drawer:not(.today-savings-details) { display:grid; grid-template-columns:minmax(0,1fr) auto; padding-inline:0; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .rollup-tab { display:flex; grid-column:1/-1; grid-row:1; padding-inline:0 var(--set-aside-scrollbar-width,0px); }
#view-plan .set-aside-drawer:not(.today-savings-details) > .rollup-tab > .rollup-tab-amt { margin-left:auto; }
#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:has(> .set-aside-stash-row, > .set-aside-lock-row) { grid-template-columns:44px minmax(0,1fr) auto; column-gap:0; row-gap:0; padding:0; scrollbar-width:none; }
#view-plan .set-aside-drawer .rollup-body::-webkit-scrollbar { display:none; }
#view-plan .set-aside-note { display:block; grid-column:1/-1; margin:0; padding:2px 0 10px; color:var(--mobile-secondary-ink); font:400 12px/1.4 var(--sans); }
#view-plan .set-aside-drawer .set-aside-stash-row { grid-template-columns:subgrid; grid-template-rows:auto auto; gap:0; align-items:center; padding:6px 0; min-height:46px; border-bottom:1px solid var(--mobile-rule); }
#view-plan .set-aside-drawer .set-aside-stash-row > .goal-icon { grid-column:1; grid-row:1/3; justify-self:start; margin-left:10px; width:20px; height:20px; }
#view-plan .set-aside-drawer .set-aside-name { grid-column:2; grid-row:1; font:600 14px/1.25 var(--sans); }
#view-plan .set-aside-drawer .set-aside-amount { grid-column:3; grid-row:1; padding:0 10px 0 12px; color:var(--ink); font:500 15px/1.25 var(--serif); }
/* The progress bar shares the info line with its labels instead of owning a row. */
#view-plan .set-aside-drawer .set-aside-meter { grid-column:2/4; grid-row:2; display:flex; align-items:center; gap:10px; width:100%; max-width:none; margin:1px 0 0; padding-right:10px; box-sizing:border-box; justify-self:stretch; }
#view-plan .set-aside-drawer .set-aside-meter .stash-meter-labels { display:flex; flex:1 1 auto; min-width:0; justify-content:space-between; gap:8px; color:var(--mobile-secondary-ink); font:400 11px/1.3 var(--sans); }
#view-plan .set-aside-drawer .set-aside-meter .stash-meter { flex:0 0 52px; height:4px; margin:0; background:rgba(74,58,38,.22); }
#view-plan .set-aside-drawer .set-aside-meter .stash-meter > .set-aside-planned-fill { background:rgba(30,107,80,.55); }
#view-plan .set-aside-drawer .set-aside-meter .stash-meter > .set-aside-held-fill { background:var(--green); }
#view-plan .set-aside-drawer .set-aside-lock-row { grid-template-columns:subgrid; }
#view-plan .set-aside-drawer .set-aside-lock-row > .set-aside-stash-row { grid-column:1/-1; }
#view-plan .set-aside-drawer .set-aside-lock-action { left:0; top:0; bottom:0; width:44px; height:auto; min-height:44px; }
#view-plan .set-aside-drawer .set-aside-lock-action svg { width:22px; height:22px; flex-basis:22px; }
#view-plan .set-aside-drawer .set-aside-lock-action:not(.is-locked) { color:var(--mobile-secondary-ink); }
/* Drawer actions sit in one footer row, labelled so they explain themselves. */
#view-plan .set-aside-drawer:not(.today-savings-details) > .today-stash-action { position:static; inset:auto; grid-row:3; display:inline-flex; align-items:center; gap:8px; width:auto; height:44px; min-height:44px; margin:0; padding:0; border-top:1px solid var(--mobile-rule); font:600 13px/1 var(--sans); color:var(--green-dp); }
#view-plan .set-aside-drawer:not(.today-savings-details) > .today-stash-action { grid-column:2; justify-content:flex-end; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .today-stash-action svg { width:18px; height:18px; flex:0 0 18px; }
#view-plan .set-aside-drawer:not(.today-savings-details) .sa-act-label { display:inline; }
#view-plan .set-aside-drawer:has(> .rollup-tab[aria-expanded="false"]) > .today-stash-action { display:none; }
#view-plan .set-aside-drawer .set-aside-stash-row.no-target .set-aside-meter .stash-meter { display:none; }
#view-plan .set-aside-drawer .rollup-body > .set-aside-stash-row:last-child,
#view-plan .set-aside-drawer .rollup-body > .set-aside-lock-row:last-child > .set-aside-stash-row { border-bottom:0; }
/* Due by and Set aside share one money column, flush with the Left over total. */
#view-plan [data-drawer-key$="_bills"] > .rollup-tab > .rollup-tab-left { flex:1 1 auto; min-width:0; }
#view-plan [data-drawer-key$="_bills"] .unpaid-total { margin-left:auto; color:var(--ink); font:400 17px/1.25 var(--serif); font-variant-numeric:tabular-nums; }
#view-plan [data-drawer-key$="_bills"] .unpaid-word { display:none; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill:not(.goal-card) { padding-right:0; }
#view-plan [data-drawer-key$="_bills"]:has(> .rollup-tab[aria-expanded="true"]) .unpaid-total { font-size:15px; }
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > [data-drawer-key="0_goals"].set-aside-drawer { padding-inline:12px; }
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > [data-drawer-key="0_goals"] > .rollup-tab { padding-right:var(--set-aside-scrollbar-width,0px); }
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > [data-drawer-key="0_goals"] > .today-stash-action { margin-right:var(--set-aside-scrollbar-width,0px); }
@media (max-width: 359px) {
  #mobile-plan-range.spending-plan-heading { min-width:0; }
  #mobile-plan-range.spending-plan-heading .spending-plan-title { font-size:20px; }
  #mobile-plan-range.spending-plan-heading .spending-plan-date { display:none; }
}
/* Phone legibility: section headers and their amounts read in full ink. */
#view-plan .rollup-tab :is(.rollup-tab-left,.rollup-tab-amt,.unpaid-total) { color:var(--ink); }
#view-plan .rollup-tab[aria-expanded="true"] :is(.rollup-tab-lbl,.rollup-tab-amt) { color:var(--ink); }
#view-plan .rollup-tab[aria-expanded="true"] :is(.rollup-tab-detail,.rollup-chev,.rollup-env) { color:var(--mobile-secondary-ink); }
.mobile-check-amount { color:var(--ink); }
/* A collapsed Set aside says what is coming up, so the line explains itself without opening. */
#view-plan .rollup-tab:has(> .rollup-tab-summary) { flex-wrap:wrap; align-content:center; row-gap:0; padding-block:8px 6px; }
#view-plan .rollup-tab-summary { display:block; order:3; flex:0 0 100%; min-width:0; padding:0 0 0 18px; color:var(--mobile-secondary-ink); font:400 12px/1.35 var(--sans); text-transform:none; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
#view-plan .rollup-tab[aria-expanded="true"] > .rollup-tab-summary { display:none; }

#view-plan .rollup-body .bcard.ledger-bill.compact-bill .transport { grid-column:3; grid-row:1/3; align-self:center; display:grid; grid-template-columns:44px 12px 44px; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .transport .back { grid-column:1; grid-row:1; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .transport .fwd { grid-column:3; grid-row:1; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .transport .funding-limit-mark { grid-column:2; grid-row:1; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .bcard-amt { grid-column:4; grid-row:1/3; font-size:13px; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill .ledger-check { grid-row:1/3; }
/* Phone header switch stays available when the savings list is collapsed. */
#view-plan .set-aside-drawer:not(.today-savings-details) { grid-template-columns:minmax(0,1fr) max-content max(56px,var(--period-amount-width,56px)); column-gap:6px; }
#view-plan .set-aside-heading { gap:4px; }
#view-plan .set-aside-drawer:not(.today-savings-details) > .today-stash-action { grid-row:1; grid-column:2; border-top:0; font-size:10px; gap:4px; }
#view-plan .set-aside-drawer:has(.set-aside-heading > .rollup-tab[aria-expanded="false"]) > .today-stash-action { display:none; }
#view-plan .set-aside-drawer > .rollup-tab-amt { font:500 17px/1.25 var(--serif); }
/* Keep both Today modes on the same compact savings component. */
#view-plan .set-aside-drawer .set-aside-stash-row { box-sizing:border-box; border-radius:0; box-shadow:none; }
#view-plan .set-aside-heading > .rollup-tab { min-height:44px; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill { min-height:46px; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill:not(.goal-card) { height:48px; min-height:48px; max-height:none; }
#view-plan .set-aside-drawer .set-aside-stash-row { height:48px; min-height:48px; }
#view-plan .set-aside-drawer .set-aside-stash-row { height:44px; min-height:44px; padding:3px 0; }
#view-plan .sticky-period-sections { --section-header-height:44px; }
#view-plan .sticky-period-sections .set-aside-drawer:not(.today-savings-details) > .today-stash-action { position:sticky; top:0; }
#view-plan .bcard.forecast-active,
#view-plan .set-aside-stash-row.selected { outline:none; border-radius:2px; box-shadow:inset 0 0 0 1px var(--row-focus,rgba(55,55,48,.55)); }
@media(max-width:1199px) { .calc-scrim { padding-top: max(12px,env(safe-area-inset-top)); } }

@media (max-width:1199px) {
  .mobile-horizon-controls > .auto-stash-power { width:44px; min-width:44px; padding:0; }
  .mobile-horizon-controls .auto-savings-label { display:none; }
}

/* Optional end dates use the clearable shared picker; required dates stay native. */
#mobile-record-dialog .record-native-date { display:none; }
#mobile-record-dialog .record-date-controls { display:flex; align-items:center; gap:8px; min-height:44px; }
#mobile-record-dialog .record-date-controls > button { min-width:44px; min-height:44px; }
#mobile-record-dialog .record-date-controls .date-btn { flex:1; justify-content:flex-start; }
#mobile-record-dialog .record-date-controls button:focus-visible { outline:none; text-decoration:underline; }
#mobile-record-dialog .mcal { position:absolute; }


/* Committed Goal contributions stay compact inside Due while Auto Save is off. */
@media (max-width:1199px) {
  #view-plan .period-bill-drawer .set-aside-stash-row { box-sizing:border-box; grid-template-columns:44px minmax(0,1fr) max(68px,var(--period-amount-width,64px)); grid-template-rows:auto auto; height:44px; min-height:44px; gap:0 8px; padding:3px 8px; border-bottom:1px solid var(--mobile-rule); }
  #view-plan .period-bill-drawer .set-aside-stash-row > .goal-icon { grid-column:1; grid-row:1/3; width:20px; height:20px; }
  #view-plan .period-bill-drawer .set-aside-name { grid-column:2; grid-row:1; font:500 14px/1.25 var(--sans); }
  #view-plan .period-bill-drawer .set-aside-amount { grid-column:3; grid-row:1/3; padding:0; font:500 15px/1.25 var(--serif); color:var(--ink); }
  #view-plan .period-bill-drawer .set-aside-meter { grid-column:2; grid-row:2; display:flex; align-items:center; gap:6px; width:100%; max-width:none; }
  #view-plan .period-bill-drawer .stash-meter-labels { display:flex; flex:1; min-width:0; font:400 10px/1.3 var(--sans); color:var(--mobile-secondary-ink); }
  #view-plan .period-bill-drawer .set-aside-meter .stash-meter { flex:0 0 32px; height:4px; margin:0; }
}

@media (max-width:1199px) {
  #view-plan .period-bill-drawer .stash-meter-labels > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  #view-plan .period-bill-drawer .stash-meter-labels > span:last-child { flex-shrink:0; }
}


/* A single 44px timing target keeps mobile names readable; its menu has two large actions. */
#view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-timing-slack:not(.goal-card),
#view-plan .today-agenda .bcard.has-timing-slack { grid-template-columns:44px minmax(0,1fr) 48px max(56px,var(--period-amount-width,64px)); }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-timing-slack .transport,
#view-plan .today-agenda .bcard.has-timing-slack .transport { display:grid; grid-column:3; grid-row:1/3; grid-template-columns:48px; gap:0; width:48px; opacity:1; }
#view-plan .bcard.has-timing-slack .bill-timing-step { display:none; }
#view-plan .bcard.has-timing-slack .bill-slack { grid-column:1; grid-row:1; height:44px; }
#view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-timing-slack .bcard-amt,
#view-plan .today-agenda .bcard.has-timing-slack .bcard-amt { grid-column:4; grid-row:1/3; }

/* Design consistency pass (2026-10-09).
   Money reads in the serif everywhere, section dividers span the full row
   including the amount column, and the record amount keeps room for its digits. */
#view-plan .desktop-period-heading .mobile-check-amount { font:500 18px/1.35 var(--serif); }
#view-plan .set-aside-drawer:not(.today-savings-details) > .period-section-header-paper { box-sizing:border-box; border-bottom:1px solid var(--mobile-rule); }
#view-plan .set-aside-drawer:not(.today-savings-details):has(> .period-section-header-paper) > :is(.set-aside-heading,.rollup-tab-amt) { background:transparent; }
#view-plan .set-aside-drawer:not(.today-savings-details):has(> .period-section-header-paper) .set-aside-heading > .rollup-tab { border-bottom:0; }
.record-fields:not(.record-income) .record-amount-stepper { grid-template-columns:36px minmax(0,1fr) 36px; gap:4px; }
.record-fields:not(.record-income) .record-amount-stepper .inc-stepper { width:36px; }
.record-fields:not(.record-income) .record-amount-stepper::before { left:48px; }
.record-fields:not(.record-income) .record-amount-stepper #record-amount { padding-inline:22px 4px; font-size:22px; }

/* ── Wallet glance (2026-10-12) ──────────────────────────────────────────
   The masthead keeps its original layout: Cash on hand (the one number the user
   edits) on the left, Padding on the right. Each pay period reads in a few
   quiet lines at the existing ledger scale: Rolls in and + Paycheck on paydays,
   Going out, and a pinned Left by. Detail folds behind Going out and opens
   without adding bars, bands or heavier rules. */
#stash-funding-metric { top:4px; gap:1px; }
#padding-hint { font:500 10px/1.2 var(--sans); color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#padding-hint[hidden] { display:none; }

#view-plan .sw-page.receipt-mode .desktop-period-heading :is(.mobile-check-label,.mobile-check-amount),
#view-plan .sw-page.receipt-mode .mobile-period-balance,
#view-plan .sw-page.receipt-mode .receipt-out-detail > .empty-pg,
#view-plan .sw-page.receipt-mode.period-today > .desktop-period-head { display:none !important; }
#view-plan .sw-page.receipt-mode > .desktop-period-head .desktop-period-heading { border-bottom:0; }
#view-plan .receipt-mode .receipt-line {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  width:100%; min-height:44px; margin:0; padding:8px 0; box-sizing:border-box;
  border:0; background:transparent; color:var(--ink); text-align:left;
  font:400 15px/1.3 var(--sans);
}
#view-plan .receipt-mode button.receipt-line { cursor:pointer; }
#view-plan .receipt-mode .receipt-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink2); }
#view-plan .receipt-mode .receipt-amt { font:400 17px/1.25 var(--serif); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); }
#view-plan .receipt-mode .receipt-chev { display:inline-block; width:6px; height:6px; margin:0 0 2px 7px; border-right:1.5px solid var(--ink3); border-bottom:1.5px solid var(--ink3); transform:rotate(-45deg); transition:transform .15s; }
#view-plan .receipt-mode .receipt-out[aria-expanded="true"] .receipt-chev { transform:rotate(45deg); }
/* Expanded, the Going out total turns quiet so it is not read as one more
   subtraction above its own items. */
#view-plan .receipt-mode .receipt-out[aria-expanded="true"] .receipt-amt { color:var(--ink3); font-size:15px; }

/* Opened detail sits flush under Going out: no side bar, no paper bands, no
   section rules. Individual bill rows keep only their own hairlines. */
#view-plan .receipt-out-detail { margin:0; padding:0 0 4px; }
#view-plan .receipt-out-detail[hidden] { display:none; }
#view-plan .receipt-out-detail .period-section-header-paper { display:none; }
#view-plan .receipt-out-detail :is(.rollup-tab,.set-aside-heading,.set-aside-heading > .rollup-tab,.set-aside-drawer > .rollup-tab-amt) { background:transparent !important; border-bottom:0 !important; box-shadow:none !important; }
#view-plan .receipt-out-detail .rollup-wrap { border:0 !important; box-shadow:none !important; background:transparent !important; }
#view-plan .receipt-out-detail .rollup-body .bcard { border-bottom-color:rgba(74,58,38,.12); }

/* Left by is pinned above the dock; the rows above it open and close. */
#view-plan .sw-page.receipt-mode { padding-bottom:0; }
#view-plan .sw-page.receipt-mode > .sw-content { display:flex; flex-direction:column; flex:1 0 auto; padding-bottom:0; }
#view-plan .receipt-mode .receipt-foot {
  order:9; margin-top:auto; position:sticky; bottom:0; z-index:6;
  padding:0; background:var(--paper-hi,#f4f1ea); border-top:1px solid var(--mobile-rule);
}
#view-plan .receipt-mode .receipt-foot .forecast-period-total { margin:0; }
#view-plan .receipt-mode .receipt-foot .forecast-period-total > span { color:var(--ink); font:500 15px/1.3 var(--sans); }
#view-plan .receipt-mode .receipt-foot .forecast-period-total strong { font:var(--mobile-ledger-money); font-variant-numeric:tabular-nums; }
/* Undo sits just right of the plan badge instead of underneath it. */
.desktop-money-facts .reset-plan-btn:not([hidden]) { position:absolute; left:calc(50% + 38px); top:50%; transform:translateY(-50%); }
/* Paydays keep their name and timing on one compact line. */
#view-plan .sw-page.receipt-mode:not(.period-today) > .desktop-period-head { padding-top:6px; padding-bottom:0; margin-bottom:0; min-height:0; }
#view-plan .sw-page.receipt-mode:not(.period-today) > .desktop-period-head .desktop-period-heading { min-height:0; padding:4px 0; }
#view-plan .sw-page.receipt-mode:not(.period-today) > .desktop-period-head .period-desktop-title { font:600 15px/1.3 var(--sans); }
#view-plan .sw-page.receipt-mode:not(.period-today) > .desktop-period-head .desktop-period-kicker { font:var(--mobile-support-font); color:var(--ink2); }
#view-plan .sw-page.receipt-mode:not(.period-today) > .desktop-period-head .desktop-period-heading > div:not(.desktop-period-date) { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; }
#view-plan .receipt-out-detail.single-section > .period-bill-drawer > .rollup-tab,
#view-plan .receipt-out-detail.single-section > .period-bill-drawer > .show-completed-toggle { display:none; }
#view-plan .receipt-out-detail.single-section > .period-bill-drawer > .rollup-body { max-height:none; visibility:visible; }

/* ── Outlook design B (prototype, 2026-10-12) ─────────────────────────────
   The masthead answers "what can I spend": Padding is the hero, and Cash on
   hand is its quiet, editable source. Each pay period is one bar split into
   Due, Stashing, For later bills and Padding, with a matching list. Slices sum
   to the money the period starts with, so no signs or running totals.
   Slices separate by lightness, never hue alone (red-green colourblind user). */
:root { --seg-bills:#4a3d2c; --seg-stash:#c2a35a; --seg-later:#d8d0c4; --seg-padding:var(--indigo,#43688f); --seg-short:var(--red,#b03820); }

/* Masthead: hero Padding left, Cash on hand right and smaller. */
.outlook-v2 .app #stash-funding-metric { left:var(--mobile-gutter); right:auto; align-items:flex-start; max-width:55%; }
.outlook-v2 .app #stash-funding-metric span { font:600 10px/1.2 var(--sans); color:var(--ink2); }
.outlook-v2 .app #stash-funding-metric #stash-funding-percent[data-allowance="true"] { font-size:34px; line-height:30px; color:var(--seg-padding); }
.outlook-v2 .app .desktop-money-now .desktop-money-facts { padding-right:0; padding-left:55%; }
.outlook-v2 .app .desktop-cash-stack { display:flex; justify-content:flex-end; }
.outlook-v2 .app .desktop-money-fact.cash { align-items:flex-end; text-align:right; }
.outlook-v2 .app .desktop-money-fact.cash > span { font:500 10px/1.2 var(--sans); color:var(--ink2); }
.outlook-v2 .app .desktop-money-fact.cash strong {
  font:500 16px/1.25 var(--serif); color:var(--ink2);
  text-decoration:underline dotted color-mix(in srgb,currentColor 45%,transparent); text-underline-offset:4px;
}
.outlook-v2 .app .desktop-money-facts .reset-plan-btn:not([hidden]) { left:auto; right:calc(50% + 40px); }

/* Period page */
#view-plan .sw-page.split-mode { padding-bottom:0; }
#view-plan .sw-page.split-mode .desktop-period-heading :is(.mobile-check-label,.mobile-check-amount),
#view-plan .sw-page.split-mode .mobile-period-balance,
#view-plan .sw-page.split-mode .split-sections,
#view-plan .sw-page.split-mode.period-today > .desktop-period-head { display:none !important; }
#view-plan .sw-page.split-mode > .desktop-period-head .desktop-period-heading { border-bottom:0; min-height:0; padding:4px 0; }
#view-plan .sw-page.split-mode:not(.period-today) > .desktop-period-head { padding-top:6px; padding-bottom:0; margin-bottom:0; min-height:0; }
#view-plan .sw-page.split-mode:not(.period-today) > .desktop-period-head .period-desktop-title { font:600 15px/1.3 var(--sans); }
#view-plan .sw-page.split-mode:not(.period-today) > .desktop-period-head .desktop-period-kicker { font:var(--mobile-support-font); color:var(--ink2); }
#view-plan .sw-page.split-mode:not(.period-today) > .desktop-period-head .desktop-period-heading > div:not(.desktop-period-date) { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; }

#view-plan .split-mode .split-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0 0; color:var(--ink2); font:var(--mobile-support-font); }
#view-plan .split-mode .split-head strong { font:500 15px/1.3 var(--serif); color:var(--ink); font-variant-numeric:tabular-nums; }
#view-plan .split-mode .split-bar { display:flex; gap:2px; height:10px; margin:12px 0 6px; border-radius:5px; overflow:hidden; background:var(--seg-later); }
#view-plan .split-mode .split-bar.is-short { outline:2px solid var(--seg-short); outline-offset:1px; }
#view-plan .split-mode .split-seg { display:block; flex-basis:0; min-width:3px; }
#view-plan .split-mode .seg-bills { background:var(--seg-bills); }
#view-plan .split-mode .seg-stash { background:var(--seg-stash); }
#view-plan .split-mode .seg-later { background:var(--seg-later); }
#view-plan .split-mode .seg-padding { background:var(--seg-padding); }

/* List rows: chip, label, amount. Ledger sections take the same shape. */
#view-plan .split-mode .split-row {
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; margin:0; padding:8px 0;
  box-sizing:border-box; border:0; background:transparent; color:var(--ink); text-align:left; font:400 15px/1.3 var(--sans);
}
#view-plan .split-mode button.split-row { cursor:pointer; }
#view-plan .split-mode .split-label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-plan .split-mode .split-amt { font:400 17px/1.25 var(--serif); font-variant-numeric:tabular-nums; white-space:nowrap; }
#view-plan .split-mode .split-chip { flex:0 0 10px; width:10px; height:10px; border-radius:2px; }
#view-plan .split-mode .split-bills .split-chip { background:var(--seg-bills); }
#view-plan .split-mode .split-later .split-chip { background:var(--seg-later); box-shadow:inset 0 0 0 1px rgba(74,58,38,.25); }
#view-plan .split-mode .split-later :is(.split-label,.split-amt) { color:var(--ink2); }
#view-plan .split-mode .split-padding .split-chip { background:var(--seg-padding); }
#view-plan .split-mode .split-padding :is(.split-label,.split-amt) { color:var(--seg-padding); font-weight:700; }
#view-plan .split-mode .split-short .split-chip { background:var(--seg-short); }
#view-plan .split-mode .split-short :is(.split-label,.split-amt) { color:var(--seg-short); font-weight:700; }
#view-plan .split-mode .split-chev { display:inline-block; width:6px; height:6px; margin:0 0 2px 8px; border-right:1.5px solid var(--ink3); border-bottom:1.5px solid var(--ink3); transform:rotate(-45deg); }

#view-plan .split-mode .split-section { border:0 !important; box-shadow:none !important; background:transparent !important; }
#view-plan .split-mode .split-section .period-section-header-paper,
#view-plan .split-mode .split-section .rollup-env,
#view-plan .split-mode .split-section .show-completed-toggle { display:none !important; }
#view-plan .split-mode .split-section :is(.rollup-tab,.set-aside-heading,.set-aside-heading > .rollup-tab,> .rollup-tab-amt) { background:transparent !important; border-bottom:0 !important; box-shadow:none !important; }
#view-plan .split-mode .split-section .rollup-tab-left { gap:10px; }
#view-plan .split-mode .split-section .rollup-tab-left::before { content:''; order:0; flex:0 0 10px; width:10px; height:10px; border-radius:2px; background:var(--seg-bills); }
#view-plan .split-mode .split-stash .rollup-tab-left::before { background:var(--seg-stash); }
#view-plan .split-mode .split-section .rollup-tab-lbl { order:1; font:400 15px/1.3 var(--sans); color:var(--ink); }
#view-plan .split-mode .split-section .rollup-chev { order:2; margin-left:-2px; color:var(--ink3); }
#view-plan .split-mode .split-section .rollup-tab-amt { font:400 17px/1.25 var(--serif) !important; color:var(--ink) !important; }
#view-plan .split-mode .split-section :is(.rollup-tab-amt,.unpaid-total,.period-stashes-link)::before { content:none !important; }
#view-plan .split-mode .split-section .rollup-body .bcard { border-bottom-color:rgba(74,58,38,.12); }
#view-plan .split-mode .split-section .rollup-body .bcard:not(.paid) .bcard-amt::before { content:none; }
#view-plan .split-mode .split-section .unpaid-total,
#view-plan .split-mode .split-section .rollup-tab-summary { display:none !important; }
#view-plan .split-mode .split-section .rollup-tab-left { flex:1 1 auto; min-width:0; }
#view-plan .split-mode .split-section .rollup-tab-amt { display:flex !important; visibility:visible !important; margin-left:auto; }
/* Opened, a slice's total turns quiet and its items read as its parts. */
#view-plan .split-mode .split-section .rollup-tab[aria-expanded="true"] .rollup-tab-amt,
#view-plan .split-mode .split-stash:has(> .rollup-body.open) .rollup-tab-amt { color:var(--ink3) !important; font-size:15px !important; }
#view-plan .split-mode .split-section .rollup-body .bcard-amt { font-size:15px; }
#view-plan .split-mode .split-row.split-stash .split-chip { background:var(--seg-stash); }

/* The bar is the chrome's bottom lip, above the fold grip, in both chart states. */
#split-lip { display:none; }
.outlook-v2 .app #split-lip:not([hidden]) { display:block; padding:6px var(--mobile-gutter) 2px; background:transparent; }
.outlook-v2 #split-lip .split-bar { display:flex; gap:2px; height:8px; margin:0; border-radius:4px; overflow:hidden; background:var(--seg-later); }
.outlook-v2 #split-lip .split-bar.is-short { box-shadow:0 0 0 2px var(--seg-short); }
.outlook-v2 #split-lip .split-seg { display:block; flex-basis:0; min-width:3px; }
.outlook-v2 #split-lip .seg-bills { background:var(--seg-bills); }
.outlook-v2 #split-lip .seg-stash { background:var(--seg-stash); }
.outlook-v2 #split-lip .seg-later { background:var(--seg-later); }
.outlook-v2 #split-lip .seg-padding { background:var(--seg-padding); }
#view-plan .split-mode .split-head { padding-top:10px; }
#view-plan .split-mode:not(.period-today) .split-head + .split-section,
#view-plan .split-mode.period-today > .sw-content > :first-child { margin-top:4px; }

.outlook-v2 .app #split-lip:not([hidden]) { background:transparent; position:relative; z-index:6; padding:2px var(--mobile-gutter) 8px; }
.outlook-v2 .app .desktop-money-facts > .desktop-compact-status { flex:0 0 0; width:0; min-width:0; overflow:visible; }
.outlook-v2 .app .desktop-money-now .desktop-money-facts { gap:0; }
#view-plan .split-mode .split-when { margin-left:7px; font:400 12px/1.3 var(--sans); color:var(--ink3); }
#view-plan .split-mode .split-section .rollup-tab-lbl .split-when { font-size:12px; }

/* B header: one number on the left (Padding, or Cash on hand after a tap) and
   the plan badge on the right, with Undo beside it, in both chart states. */
.outlook-v2 .app .desktop-money-fact.cash { visibility:hidden; pointer-events:none; }
.outlook-v2 .app #stash-funding-metric #stash-funding-percent[data-allowance="cash"] { font:500 30px/30px var(--serif); color:var(--ink); }
.outlook-v2 .app #desktop-compact-status #chart-title-plan {
  display:inline-flex !important; left:auto; right:var(--mobile-gutter); top:50%; transform:translateY(-50%);
  width:auto; min-height:32px; padding:0 12px;
}
.outlook-v2 .app .desktop-money-facts .reset-plan-btn:not([hidden]) {
  display:inline-flex !important; left:auto; right:calc(var(--mobile-gutter) + 96px); top:50%; transform:translateY(-50%);
}
.outlook-v2 .app.mobile-forecast-collapsed .chart-actions { display:flex !important; }
/* Folded, the status box is centered, so measure the badge and Undo back to the
   masthead's right edge from it (the phone masthead is full viewport width). */
.outlook-v2 .app.mobile-forecast-collapsed #desktop-compact-status #chart-title-plan { right:calc(48px - 50vw + var(--mobile-gutter)); width:auto; font-size:inherit; line-height:1; padding:0 12px; }
.outlook-v2 .app.mobile-forecast-collapsed #desktop-compact-status #desktop-compact-trend { display:flex !important; }
/* One header layout in both chart states: number left, trend centered, badge right. */
.outlook-v2 .app #desktop-compact-status {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:96px; height:44px; display:flex; align-items:center; justify-content:center;
}
.outlook-v2 .app #desktop-compact-status #desktop-compact-trend { display:flex !important; align-items:center; justify-content:center; }
.outlook-v2 .app #desktop-compact-status #chart-title-plan { right:calc(48px - 50vw + var(--mobile-gutter)); }
.outlook-v2 .app #chart-section-plan #ah-mid-icon { visibility:hidden; }
.outlook-v2 .app:not(.mobile-forecast-collapsed) .desktop-money-facts .reset-plan-btn:not([hidden]) { right:calc(var(--mobile-gutter) + 82px); }
#protection-review .protection-summary .stash-completion-gauge.as-percent { width:auto; height:auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; border-radius:0; color:var(--ink2); }
#protection-review .protection-summary .stash-completion-gauge.as-percent span { font:500 10px/1.2 var(--sans); }
#protection-review .protection-summary .stash-completion-gauge.as-percent strong { font:600 26px/1 'Caveat',cursive; color:var(--green-dp); font-variant-numeric:tabular-nums; }
/* Folded chart: the badge keeps the same right-edge spot as the open chart. */
.outlook-v2 .app.mobile-forecast-collapsed #desktop-compact-status #chart-title-plan { right:calc(48px - 50vw + var(--mobile-gutter)); width:auto; min-height:32px; padding:0 12px; font:600 13px/1 var(--sans); }
.outlook-v2 .app.mobile-forecast-collapsed #desktop-compact-status #chart-title-plan:is([data-status],[data-status="prefund"],[data-status="attention"]) { position:absolute; top:50%; transform:translateY(-50%); left:auto; right:calc(48px - 50vw + var(--mobile-gutter)); width:auto; display:inline-flex !important; }
/* Folded B header: center the number, trend and badge between the logo rule and the grip. */
/* Same vertical position whether the chart is open or folded, so nothing shifts. */
.outlook-v2 .app #stash-funding-metric { top:12px; }
.outlook-v2 .app #desktop-compact-status { top:calc(50% + 8px); }
.outlook-v2 .app .desktop-money-facts .reset-plan-btn:not([hidden]) { top:calc(50% + 8px) !important; }
/* Undo keeps a clear gap from the badge in both chart states. */
.outlook-v2 .app .desktop-money-facts .reset-plan-btn:not([hidden]) { right:calc(var(--mobile-gutter) + 110px) !important; }
#view-plan .split-mode .split-link {
  padding:0; border:0; background:transparent; color:inherit; cursor:pointer; min-height:44px;
  text-decoration:underline dotted color-mix(in srgb,currentColor 45%,transparent); text-decoration-thickness:1px; text-underline-offset:4px;
}
#view-plan .split-mode .split-later .split-link { color:var(--ink2); }
#view-plan .split-mode .split-link:focus-visible { outline:none; text-decoration-style:solid; }
#view-plan .split-mode .split-link { position:relative; min-height:0; line-height:1.25; }
#view-plan .split-mode .split-link::before { content:''; position:absolute; inset:-12px -6px; }
/* One badge size in both chart states, and Undo clears the widest badge too. */
.outlook-v2 .app #desktop-compact-status #chart-title-plan { font:600 13px/1 var(--sans) !important; min-height:32px; padding:0 12px; white-space:nowrap; }
.outlook-v2 .app .desktop-money-facts .reset-plan-btn:not([hidden]) { right:calc(var(--mobile-gutter) + 88px) !important; }
.outlook-v2 .app:has(#chart-title-plan[data-status="attention"]) .desktop-money-facts .reset-plan-btn:not([hidden]) { right:calc(var(--mobile-gutter) + 117px) !important; }
/* Undo measures from the same box in both chart states. */
.outlook-v2 .app .desktop-money-now .desktop-money-facts { position:relative; }
/* Bills before and after the payday are one stream: same type, only the date differs. */
#view-plan .split-mode .split-later :is(.split-label,.split-amt,.split-link) { color:var(--ink); }
/* The split bar is a pastel wash like the rest of the paper UI: thinner, softer
   segments and matching chips. Colors and their lightness order are unchanged. */
:is(#split-lip,#view-plan .desk-split,#view-plan .split-mode) .split-bar { height:7px; gap:2px; background:rgba(216,208,196,.55); box-shadow:inset 0 0 0 1px rgba(74,58,38,.06); }
:is(#split-lip,#view-plan .desk-split,#view-plan .split-mode) .split-seg { opacity:.62; }
:is(#split-lip,#view-plan .desk-split,#view-plan .split-mode) .seg-padding { opacity:.7; }
:is(#view-plan .desk-split,#view-plan .split-mode) :is(.split-chip,.split-section .rollup-tab-left::before) { opacity:.62; }
:is(#view-plan .desk-split,#view-plan .split-mode) .split-padding .split-chip { opacity:.7; }
#view-plan .split-mode .split-section .rollup-tab-left::before { opacity:.62; }

/* Heart availability uses motion and light/dark contrast, not color alone.
   Wait for the sheet to arrive, then give the selected ticket two small pulses. */
#wishlist-sheet .wishlist-card.wish-heart-focus,
#wishlist-sheet .wishlist-card.wish-heart-focus:is(:focus,:focus-visible) {
  outline:none; box-shadow:inset 0 0 0 2.5px var(--ink2),0 2px 4px rgba(43,36,26,.07);
  animation:wishlist-heart-notice 1.5s ease-in-out .35s 1;
}
@keyframes wishlist-heart-notice {
  0%,45%,100% { transform:translateX(0) scale(1); box-shadow:inset 0 0 0 2.5px var(--ink2),0 2px 4px rgba(43,36,26,.07); }
  15%,65% { transform:translateX(2px) scale(.99); box-shadow:inset 0 0 0 4px var(--ink),0 2px 4px rgba(43,36,26,.07); }
  30%,80% { transform:translateX(-1px) scale(1); box-shadow:inset 0 0 0 3px var(--ink2),0 2px 4px rgba(43,36,26,.07); }
}
@media (prefers-reduced-motion:reduce) {
  #wishlist-sheet .wishlist-card.wish-heart-focus,
  #wishlist-sheet .wishlist-card.wish-heart-focus:is(:focus,:focus-visible) {
    animation:none; transform:none;
    box-shadow:inset 0 0 0 3px var(--ink),0 2px 4px rgba(43,36,26,.07);
  }
}

/* Quieter Cash typography; keep Padding and the plan controls in their places. */
.desktop-money-fact.cash strong { font:400 21px/1.15 var(--serif); }
.cash-edit-action { width:28px; min-height:44px; height:44px; }
.outlook-v2 .app .cash-head-wrap { visibility:hidden; pointer-events:none; }
.outlook-v2 .app .cash-metric-wrap { display:flex; align-items:flex-end; gap:2px; position:absolute; left:var(--mobile-gutter); top:12px; max-width:52%; }
.outlook-v2 .app .cash-metric-wrap #stash-funding-metric { position:static; max-width:none; min-width:0; }
.outlook-v2 .app .cash-metric-wrap #stash-funding-percent[data-allowance="cash"] { font:400 21px/26px var(--serif); }
#protection-review .protection-summary { grid-template-columns:repeat(4,minmax(0,1fr)); justify-content:stretch; gap:6px; }
#protection-review .protection-summary > div > span { min-height:24px; font:500 10px/1.2 var(--sans); }
#protection-review .protection-summary strong { font:400 clamp(12px,3.5vw,16px)/1.2 var(--serif); }
#protection-review .savings-cash-controls { gap:0; align-items:center; }
#protection-review .cash-edit-action { width:24px; min-height:32px; height:32px; margin:-8px -6px -8px 0; }

#protection-review .protection-summary .protection-cash-edit-label { min-height:24px; font:500 10px/1.2 var(--sans); }

/* The editor slides over the period ledger while the forecast stays in place. */
/* A separate paper card floats over the forecast; keep the chart legible. */
.app #view-schedule.plan-editor-sheet {
  /* Above both horizon controls (7) and the crochet strip (11). */
  z-index:12; padding:0; top:max(0px,calc(var(--plan-sheet-top,50%) - 8px));
  left:8px; right:8px; bottom:8px; border-bottom: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);
}
.plan-editor-frost {
  display:block; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:rgba(225,220,207,.12); backdrop-filter:blur(var(--sheet-frost-blur,1.2px)); -webkit-backdrop-filter:blur(var(--sheet-frost-blur,1.2px));
  opacity:0; visibility:hidden; transition:opacity 220ms ease,visibility 220ms;
}
.plan-editor-open .plan-editor-frost { --sheet-frost-blur:.4px; opacity:1; visibility:visible; }
@media(prefers-reduced-motion:reduce){ .plan-editor-frost { transition:none; } }
@media(prefers-reduced-transparency:reduce){ .plan-editor-frost { backdrop-filter:none; -webkit-backdrop-filter:none; } }
#view-schedule.plan-editor-sheet .inc-scroll { flex:1; min-height:0; padding:0 var(--mobile-gutter) 24px; overscroll-behavior:contain; }
#view-schedule.plan-editor-sheet .plan-pane { margin-bottom:12px; }
/* Keep the heading divider anchored to its own heading as the list scrolls. */
#view-schedule.plan-editor-sheet .inc-section-hdr { position:relative; }
#view-schedule.plan-editor-sheet > .pnav-bar { padding-inline:12px; }
#view-schedule.plan-editor-sheet #schMasterBtn { width:32px; min-width:32px; }
#view-schedule.plan-editor-sheet .pnav-row { gap:5px; }
#view-schedule.plan-editor-sheet #schedule-search-input { font-size:14px; }
#view-schedule.plan-editor-sheet #schedule-search-count { position:absolute; top:4px; left:14px; font-size:10px; }
/* Temporary sheets share one selected treatment; blue Home stays distinct. */
#tab-sch .tab-lbl { white-space:nowrap; }
#tab-sch.active, #tab-spend.spend-active { background:transparent; box-shadow:inset 0 2px currentColor; }
#tab-sch.active .tab-lbl, #tab-spend.spend-active .tab-lbl { font-weight:700; }
.app.mobile-plan-searching:not(.mobile-forecast-collapsed) #view-plan .chart-section {
  flex-basis:min(var(--mobile-forecast-h,120px),max(52px,calc(var(--plan-search-height,100dvh) - 340px)));
  height:min(var(--mobile-forecast-h,120px),max(52px,calc(var(--plan-search-height,100dvh) - 340px))); min-height:0;
}

#view-schedule.plan-editor-sheet .pnav-row:has(#monthly-view-control:not([hidden])) { flex-wrap:wrap; height:auto; }
#view-schedule.plan-editor-sheet #monthly-view-control:not([hidden]) { order:4; flex-basis:100%; min-height:28px; }

.app.mobile-expense-editing { height:var(--expense-viewport-height,100dvh); top:var(--expense-viewport-top,0px); }
.has-expense-sheet .plan-editor-frost { opacity:1; visibility:visible; }
.app #mobile-expense-sheet { left:8px; right:8px; width:auto; bottom:8px; border-radius:18px; }

/* Keep the pocket action beside the amount, below the unchanged label. */
.cash-metric-wrap { display:flex; align-items:flex-end; gap:0; position:absolute; right:var(--mobile-gutter); top:4px; max-width:52%; }
.cash-metric-wrap #stash-funding-metric { position:static; max-width:none; }
#pocket-budget-action { margin-bottom:-3px; }
.outlook-v2 .app #pocket-budget-action { position:absolute; top:14px; left:calc(var(--header-amount-width, 48px) + 2px); margin:0; }

/* The Planner handle resizes only its temporary paper, not the chart. */
#view-schedule.plan-editor-sheet > .plan-sheet-grip { height:36px; min-height:36px; user-select:none; -webkit-user-select:none; }
#view-schedule.plan-editor-sheet > .plan-sheet-grip.dragging { cursor:grabbing; }