/* ══════════════════════════════════════════════════════════════════════════
   SHOESTRING — DESKTOP
   ══════════════════════════════════════════════════════════════════════════

   Design brief: a handmade ledger, not a dashboard.

   Shoestring is the money between paychecks. The desktop surface should feel
   like a well-kept paper ledger somebody made themselves and made *beautiful* —
   pressed linen, warm ink, unhurried spacing. The Caveat wordmark sets the
   language: handmade, elegant, confident. Warm paper, green ink, serif headings and restrained reward details
   give the working surface its character.

   Four principles behind every rule below:

     1. PREDICTABLE GEOMETRY. Switching views keeps the upper workspace stable.
        Closing Wishlist lets the chart reclaim its space. Switching periods replaces the one selected-period plane
        without changing its width or reflowing the chart.

     2. SEPARATE WITH AIR, NOT LINES. Borders are the cheap way to say "these
        are different things", and a page full of them reads as compartmen-
        talised packaging. Tone, spacing and alignment do that work here. A
        hairline has to earn its place; almost none do.

     3. THE NUMBERS LIVE WITH THEIR PERIOD. The selected pay period owns the
        full lower workspace, pairing its summary directly with its bills.

     4. QUIET UNTIL IT MATTERS. Chrome recedes; money advances. Row actions
        stay hidden until you're on the row. Colour is never the only signal —
        every state also has a word and a shape (the user is red-green
        colourblind).

   Solidity comes from discipline, not from boxes: one type scale, tabular
   figures, a consistent baseline, and figures that always land on the same
   right edge.

   This file owns desktop presentation entirely (min-width:1200px) and starts
   from the mobile DOM contracts. Its final composition section owns the shared desktop visual language.
   ────────────────────────────────────────────────────────────────────────── */


/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */

:root {
  /* Paper stack — warm linen through to raised card stock */
  --pg:        #e6dcc6;   /* page ground: manila stock, properly warm */
  --pg-soft:   #ece3d1;
  --paper:     #f9f4e7;   /* standard sheet */
  --paper-hi:  #fffcf3;   /* raised / focused sheet */
  --paper-sub: #f2ebda;   /* quietly tinted band */
  --spine:     #2e3a2b;   /* cloth binding — the left rail */
  --spine-hi:  #3a4735;

  /* Ink */
  --ink:       #2b241a;
  --ink2:      #584d3c;
  --ink3:      #8a7c63;
  --ink-inv:   #f7f2e5;

  /* The few hairlines that survive */
  --rule:      rgba(74,58,38,.10);
  --rule-2:    rgba(74,58,38,.20);
  --rule-3:    rgba(74,58,38,.34);

  /* Accents */
  --green:     #1e6b50;
  --green-dp:  #14513c;
  --green-wash:#e4ece0;
  --rust:      #a63f26;
  --rust-dp:   #872f19;
  --rust-wash: #f3e6dd;
  --gold:      #8a6a18;
  --gold-wash: #f3ead3;
  --indigo:    #3a5d8c;   /* fountain-pen blue — the interactive voice */
  --today-period-blue:#43688f; /* shared Today chart/action identity */
  --today-period-blue-hover:#4d7399;
  --today-return-blue:#dcebf6; /* blue is reserved for the return control */

  /* Elevation — warm brown, never black. This is how surfaces separate. */
  --lift-1: 0 1px 2px rgba(74,58,38,.05), 0 2px 8px rgba(74,58,38,.045);
  --lift-2: 0 1px 3px rgba(74,58,38,.06), 0 6px 18px rgba(74,58,38,.07);
  --lift-3: 0 2px 5px rgba(74,58,38,.08), 0 16px 36px rgba(74,58,38,.11);
  --lift-4: 0 6px 16px rgba(74,58,38,.13), 0 30px 64px rgba(74,58,38,.19);

  /* Handmade paper grain — the one texture that says "made by a person". */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.38'/%3E%3C/svg%3E");

  /* Geometry — paper has small radii; big ones read as plastic */
  --rr:    3px;
  --rr-md: 6px;
  --rr-lg: 10px;

  /* Shell metrics — fixed for the session. Nothing here is view-dependent. */
  --wish-w: 316px;
  --mast-h: 84px;
  --foot-h: 60px;
  --gut:    32px;   /* the standard breathing gutter */
  --ledger-card-lift: 0 1px 2px rgba(74,58,38,.07), 0 5px 12px rgba(74,58,38,.075);
}

.app > .app-header::before,
#view-plan .sw-page::before,
.wishlist-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}


/* ── 2. SHELL ───────────────────────────────────────────────────────────── */
/* Three columns, fixed. No view may change this geometry — see principle 1. */

body {
  padding: 0;
  background: var(--pg);
  color: var(--ink);
}

.app {
  display: grid;
  width: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--pg);
  box-shadow: none;
}

.view-stack {
  grid-row: 2;
  min-width: 0;
  background: var(--pg);
}
.tabbar { display: none; }


/* ── 3. MASTHEAD ────────────────────────────────────────────────────────── */
/* Wordmark left, cash right, deliberate air between. No bottom rule: the tone
   change and a soft shadow already say where the page begins. */

.app > .app-header {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  align-items: center;
  border-bottom: 0;
  z-index: 40;
}
.app > .app-header > * { position: relative; z-index: 1; }

.brand {
  display: flex;
  padding-left: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
/* The wordmark is the brand and the source of the whole design language:
   Caveat, handwritten, unhurried. Desktop only scales and inks it — family,
   style, weight and tracking are inherited from the mobile definition and are
   never restyled here. */
.app > .app-header .brand-name {
  color: var(--green-dp);
}

/* Cash on hand — the opening figure of the ledger. Set apart by air alone. */
.hdr-cash {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 8px 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  border: 0;
  background: transparent;
}
.hdr-cash-lbl {
  color: var(--ink3);
  font: 700 10px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hdr-cash-val {
  margin-top: 0;
  color: var(--green-dp);
  font: italic 600 30px/1 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}
.hdr-wishlist { display: none; }

/* Alert: a pinned note in the masthead's air, not a full-bleed slab. Its box
   is fixed regardless of view, so appearing never shifts anything. */
.alert {
  z-index: 45;
  justify-content: center;
  pointer-events: none;
}
.alert-in {
  max-width: 100%;
  padding: 8px 10px 8px 13px;
  gap: 10px;
  border: 0;
  border-top: 0;
  border-image: none;
  border-radius: var(--rr-md);
  background: var(--rust-wash);
  box-shadow: var(--lift-1);
  color: var(--rust-dp);
  font: 650 12px/1.25 var(--sans);
  pointer-events: auto;
}
.alert-in.goal { background: var(--gold-wash); color: var(--gold); }
.alert-ico { font-size: 12px; }
.alert-later {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--rr);
  background: rgba(255,253,247,.78);
  color: var(--rust-dp);
  font: 700 10px/1 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* ── 4. LEFT RAIL — the cloth spine ─────────────────────────────────────── */

.desktop-nav {
  display: flex;
  grid-column: 1;
  grid-row: 2 / 4;
  min-height: 0;
  padding: 22px 16px 18px;
  flex-direction: column;
  gap: 4px;
  /* Solid colour first so the spine is never light if a renderer drops the
     gradient layer; the gradient only adds the cloth's fall of light. */
  background-color: var(--spine);
  background-image: linear-gradient(180deg, var(--spine-hi), var(--spine) 42%, #263021);
  border-right: 0;
  box-shadow: 2px 0 16px -6px rgba(74,58,38,.28);
}
.desktop-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--rr-md);
  color: rgba(246,241,228,.64);
  font: 650 13.5px/1 var(--sans);
  letter-spacing: .01em;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.desktop-nav button svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .68; }

/* Active tab is a slip of the same paper as the work surface it opens, so the
   rail reads as a tabbed binder. */
.desktop-nav button.active {
  background: var(--paper);
  color: var(--spine);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.desktop-nav button.active svg { opacity: 1; }
.desktop-nav button.has-earned { color: #c3e5d1; }
.desktop-nav button.has-earned::after {
  content: '\2726';
  margin-left: auto;
  color: #e6cd7c;
  font: 700 12px/1 var(--serif);
}
.desktop-nav button.active.has-earned { color: var(--spine); }


/* Safe to spend — the one number the whole app exists to produce. Quietest
   ground, loudest type, and nothing but space to set it off. */
.desktop-safe {
  padding: 22px 14px 16px;
  border-top: 0;
}
.desktop-safe span {
  display: block;
  color: rgba(246,241,228,.55);
  font: 700 10px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.desktop-safe strong {
  display: block;
  margin-top: 11px;
  color: #a5dcc0;
  font: italic 600 36px/1 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.desktop-safe small {
  display: block;
  max-width: 170px;
  margin-top: 9px;
  color: rgba(246,241,228,.44);
  font: 500 11px/1.45 var(--sans);
}

.desktop-nav .desktop-nav-menu {
  width: 40px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: var(--rr-md);
  background: transparent;
  color: rgba(246,241,228,.46);
}


/* ── 5. CASH-FLOW CHART BAND ────────────────────────────────────────────── */
/* Identical geometry on both views so switching never nudges the chart. */


#view-plan .chart-title {
  font: 700 10px/1 var(--sans);
}
#view-plan .crochet-bar {
  border-bottom: 0;
}


/* ── 6. FORECAST — horizon ribbon ───────────────────────────────────────── */
/* Names the selected period. The figures live in the period cards, so this
   row stays a place-marker rather than a second scoreboard. */

#view-plan .pnav-bar {
  display: grid;
  align-items: center;
  padding: 0 30px;
  border-bottom: 0;
  box-shadow: none;
}
#view-plan .pnav-row { width: auto; padding: 0; }
#view-plan .pnav-row > .pnav-arr { display: none; }
#view-plan .pnav-center {   padding: 0; }
#view-plan .pnav-name {
  width: auto;
  overflow: hidden;
  color: var(--ink);
  font: italic 600 22px/1.15 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-plan .pnav-datejump {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--rr-md);
  color: var(--green);
}
#view-plan .pnav-datejump svg { width: 16px; height: 16px; }
#view-plan .pnav-ledger { display: none; }

#view-plan .desktop-shared-ledger {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0;
}
/* Superseded by the per-period ledger inside each card — keeping the numbers
   beside the money they describe beats a remote summary row. */


#view-plan .today-peek-tab {
  position: static;
  display: inline-flex;
  align-items: center;
}
#view-plan .today-peek-tab::before { content: '\2190'; font: 700 14px/1 var(--sans); }
#view-plan .today-peek-tab strong { font: 700 11.5px/1 var(--sans); white-space: nowrap; }
#view-plan .today-peek-tab[hidden] { display: inline-flex; visibility: hidden; pointer-events: none; }


/* ── 7. FORECAST — shared period primitives ────────────────────────────── */

#view-plan .cards-area {
  max-width: none;
  margin: 0;
}
#view-plan .sw-track {
  display: grid;
  width: 100% !important;
  height: 100% !important;
  align-items: start;
  transform: none !important;
  transition: none !important;
}

/* Sheets of paper on a desk: no outline anywhere, only tone and shadow. */
#view-plan .sw-page {
  position: relative;
  width: auto;
  min-width: 0;
  transition: box-shadow .15s ease, background .15s ease;
}
#view-plan .sw-page > * { position: relative; z-index: 1; }
#view-plan .sw-page.period-selectable { cursor: pointer; }

/* Selection geometry is owned by the lower workspace section. */
#view-plan .sw-page.period-current,
#view-plan .sw-page.period-selectable:focus-visible {
  z-index: 2;
  outline: 0;
}

/* Period head — date, subtitle, status. Separated from the ledger by space. */
#view-plan .desktop-period-head {
  order: -1;
}
/* Use the same calendar date tile as the phone in the desktop summary. */
#view-plan .desktop-period-heading { justify-content: flex-start; gap: 20px; }
#view-plan .mobile-calendar-date {
  display: flex;
  flex: 0 0 38px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
}
#view-plan .mobile-calendar-date span {
  width: 100%;
  padding: 0;
  text-align: center;
  color: var(--ink2);
  background: transparent;
  font: 600 11px/1.4 var(--sans);
}
#view-plan .mobile-calendar-date strong {
  margin: auto 0;
  font: 600 21px/1.1 var(--serif);
  font-variant-numeric: tabular-nums;
}
#view-plan .desktop-period-date {
  color: var(--ink);
}
#view-plan .desktop-period-kicker {
  color: var(--ink3);
  font: 500 11.5px/1.35 var(--sans);
}


/* Per-period ledger. Figures land on one right edge in tabular numerals —
   that alignment is what makes it scan, so no rules are needed between rows. */
#view-plan .desktop-period-ledger {
  display: block;
  padding: 0;
  border-top: 0;
}
#view-plan .desktop-period-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 0;
}
#view-plan .desktop-period-stat span {
  font: 600 11px/1.3 var(--sans);
  white-space: nowrap;
}
#view-plan .desktop-period-stat span small {
  margin-top: 2px;
  color: var(--ink3);
  font: 500 9.5px/1 var(--sans);
  opacity: .75;
}
#view-plan .desktop-period-stat strong {
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}
#view-plan .desktop-period-stat.pay strong { color: var(--green); }


/* Utilisation thread — a shoestring pulled across the card. */
#view-plan .sw-content {  overflow: visible; scroll-padding-block: 16px; }

#view-plan .desktop-period-footer { display: none;   }
#view-plan .sw-page.period-current .desktop-period-footer { display: flex; }
#view-plan .desktop-period-spend {
  border: 0;
  border-radius: var(--rr-md);
  background: var(--green-wash);
  color: var(--green-dp);
  font: 700 11.5px/1 var(--sans);
  box-shadow: var(--lift-1);
  transition: background .12s ease, color .12s ease;
}
#view-plan .desktop-period-spend.active { background: var(--green); color: var(--ink-inv); }
#view-plan .desktop-period-spend:disabled {
  background: transparent;
  color: var(--ink3);
  opacity: .55;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── 8. FORECAST — bill rows & drawers ──────────────────────────────────── */
/* Rows are separated by their own padding and by the weight difference between
   label and figure. No rules between them. */

#view-plan .bcard {
  min-height: 0;
  padding: 11px 20px;
  gap: 12px;
  border-bottom: 0;
  background: transparent;
}


#view-plan .stag { padding: 2px 7px; font-size: 9.5px; letter-spacing: .06em; }

/* Inline "add to this period" line */
#view-plan .period-quick-add {
  display: flex;
  align-items: center;
  border-bottom: 0;
}
#view-plan .period-quick-prompt { display: flex;  align-items: center;   }
#view-plan .period-quick-link {
  font: 650 11px/1 var(--sans);
  transition: color .12s ease;
}
#view-plan .period-quick-link::before { content: '+'; margin-right: 5px; font-weight: 700; }
#view-plan .period-quick-form { display: none; grid-template-columns: minmax(90px,1fr) 86px auto auto; gap: 8px; width: 100%; align-items: center; }
#view-plan .period-quick-add.editing { min-height: 48px; }
#view-plan .period-quick-add.editing .period-quick-prompt { display: none; }
#view-plan .period-quick-add.editing .period-quick-form { display: grid; }
#view-plan .period-quick-input { height: 32px; min-width: 0; }
#view-plan .period-quick-save {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--rr);
  font: 700 11px/1 var(--sans);
}
#view-plan .period-quick-cancel { width: 32px; height: 32px; color: var(--ink3); }

#view-plan .empty-pg {
  margin: 4px 20px 18px;
  padding: 8px 0 18px;
  align-items: flex-start;
  justify-content: flex-start;
  border: 0;
  color: var(--ink3);
  text-align: left;
}


/* ── 11. WISHLIST RAIL — the wish board ─────────────────────────────────── */
/* Always present, on every view — see principle 1. */

.wishlist-rail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;


  /* The rail genuinely sits above the work surface, so it casts rather than
     merely being tinted — the detail that makes a side panel read as a panel. */
}
.wishlist-rail > * { position: relative; z-index: 1; }
.wishlist-rail.is-focused { box-shadow: -10px 0 26px -14px rgba(43,36,26,.42), inset 3px 0 0 var(--gold); }

/* The rail's masthead is the app's one dark anchor besides the spine. It gives
   the right edge weight so the work area sits framed between the two. */
.wishlist-rail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.desktop-wishlist-icon { display: flex;  }


.wishlist-goals { padding: 0 18px 4px; }
.wishlist-option-head strong {
  letter-spacing: .15em;
  text-transform: uppercase;
}
.wishlist-option-head-side > span { display: none; }
.wishlist-option-head {
  margin: 12px 0 8px;
  border-bottom: 1px solid rgba(74,58,38,.12);
}

.wishlist-rail .wishlist-editor {
  margin: 0 18px 12px;
  padding: 14px;
  border: 0;
  border-radius: var(--rr-md);
  background: rgba(255,253,247,.62);
}
.wishlist-rail .wishlist-editor-row { grid-template-columns: 1fr; }
.wishlist-rail .wishlist-card.wishlist-inline-editor {
  display: block;
  padding: 16px 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--lift-2);
}
.wishlist-rail .wishlist-card.wishlist-inline-editor label { color: var(--ink2); }
.wishlist-rail .wishlist-card.wishlist-inline-editor input { border-bottom-color: var(--rule-3); }
.wishlist-rail .wishlist-card.wishlist-inline-editor .wish-amount-control { border-bottom-color: var(--rule-3); }
.wishlist-rail .wishlist-card.wishlist-inline-editor .wish-step { color: var(--green-dp); }
.wishlist-rail .wishlist-card.wishlist-inline-editor .wishlist-editor-cancel {
  border-color: var(--rule-3);
  color: var(--ink2);
}
.wishlist-rail .wishlist-card.wishlist-inline-editor .wishlist-editor-save {
  background: var(--green-dp);
  color: var(--ink-inv);
}
.wishlist-rail .wishlist-list { min-height: 0;   overflow: visible; }

/* A wish is a slip of paper on the board — tone and a soft shadow, no outline. */
.wishlist-rail .wishlist-card {
  position: relative;
  gap: 5px 12px;
  transition: box-shadow .14s ease, background .14s ease;
}
.wishlist-rail .wishlist-card::before { display: none; }


.wishlist-rail .wishlist-goal-card {
  border: 0;
  box-shadow: inset 3px 0 0 rgba(138,106,24,.5);
}

.wishlist-rail .wish-name {
  letter-spacing: -.01em;
}
.wishlist-rail .wish-amount {
  color: var(--ink);
}
.wishlist-rail .wish-state {
  margin-top: 3px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font: 700 9px/1 var(--sans);
}
.wishlist-rail .wishlist-card[data-state="earned"] .wish-state { background: transparent; color: #28533b; }
.wishlist-rail .wishlist-card[data-state="locked"] .wish-state { background: transparent; color: var(--ink3); }
/* Inside a grouped list the group heading already states the status, so the
   per-card chip is pure repetition — eleven cards all stamped "Locked" under a
   heading that reads "Not reachable yet". */
.wishlist-rail .wishlist-unreachable-list .wish-state { display: none; }
.wishlist-rail .wishlist-goal-card .wish-state { color: var(--gold); }

.wishlist-rail .wish-date { margin-top: 2px; }

/* One date line answers the question; the second-order commentary stays out. */
.wishlist-rail .wish-away,
.wishlist-rail .wish-fit,
.wishlist-rail .wish-shift { display: none; }

.wishlist-rail .wish-gauge-bar {
  height: 2px;
  margin-top: 8px;
  border-radius: 1px;
  background: rgba(74,58,38,.1);
}
.wishlist-rail .wish-gauge-fill { opacity: .85; border-radius: 1px; }

/* Row actions stay out of the way until you are actually on the row. Two
   buttons on every card was the loudest source of noise in the rail. */
.wishlist-rail .wish-actions {
  transition: opacity .12s ease;
}
.wishlist-rail .wishlist-card:focus-within .wish-actions { opacity: 1; }
@media (hover:hover) {
  .wishlist-rail .wishlist-card:hover .wish-actions { opacity: 1; }
}
.wishlist-rail .wish-action {
  border-radius: var(--rr);
  font: 700 10px/1 var(--sans);
}
.wishlist-rail .wish-action.wish-commit {
  padding-left: 0;
  color: var(--gold);
  font: 650 11px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.wishlist-rail .wishlist-goal-card .wish-action { text-transform: none; letter-spacing: 0;  }

.wishlist-rail .wishlist-card.is-actionable { cursor: pointer; }
.wishlist-rail .wishlist-card.is-actionable:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--indigo), var(--lift-2);
}


/* ── 12. FOOTER STRIP ───────────────────────────────────────────────────── */
/* Identical on both views, so nothing appears or disappears when switching. */

.app > .stats-strip {
  display: grid;
  grid-row: 3;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  column-gap: var(--gut);
  height: var(--foot-h);
  padding: 0 var(--gut);
  border: 0;
  border-top: 0;
  background: var(--pg-soft);
  box-shadow: 0 -6px 18px -12px rgba(74,58,38,.2);
}

/* Horizon control — the app's primary planning frame. */
.hrz-left {
  display: flex;
  min-width: 260px;
  align-items: center;
  gap: 0;
  padding: 3px;
  border: 0;
  border-radius: var(--rr-md);
  background: transparent;
  box-shadow: none;
}
.hrz-pills { padding: 0; border: 0; border-radius: var(--rr); background: transparent; }
.hrz-pills::after { display: none; }
.hrz-pill {
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--rr);
  color: var(--ink2);
  font: 700 11.5px/1 var(--sans);
  letter-spacing: .02em;
  transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.hrz-pill:not(.on) {
  color: var(--ink3);
  font-weight: 550;
  opacity: .72;
}
.hrz-pill.on {
  background: transparent;
  color: var(--green-dp);
  font-weight: 800;
  box-shadow: none;
}
.hrz-pill.on.default { color: var(--green-dp); }
.hrz-pill.default:not(.on) { color: var(--ink3); }
.hrz-mode-chip {
  min-height: 30px;
  margin-left: 6px;
  padding: 0 10px;
  border-left: 0;
  border-radius: var(--rr);
  color: var(--ink3);
  font: 600 11px/1 var(--sans);
}
.hrz-mode-chip::before { display: none; }


.stats-strip .ss-right { justify-self: end; }

/* Running balance — a ledger tag seated IN the strip. The mobile skin pops it
   18px upward to peek above the bar; on desktop that collided with the cards. */
.period-bal-tab,
.period-bal-tab:not(.od),
.period-bal-tab.od,
.period-bal-tab.net-today {
  min-width: 128px;
  min-height: 40px;
  padding: 6px 16px;
  border: 0;
  border-radius: var(--rr-md);
  box-shadow: var(--lift-1);
  transform: none;
}
.period-bal-tab:not(.od),
.period-bal-tab.net-today { background: var(--spine); }
.period-bal-tab.od { background: var(--rust-dp); box-shadow: var(--lift-1); }
.period-bal-tab:not(.od)::after,
.period-bal-tab.od::after { display: none; }
.period-bal-tab #period-bal-lbl {
  font: 700 9.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.period-bal-tab:not(.od) #period-bal-lbl { color: rgba(165,220,192,.7); }
.period-bal-tab.od #period-bal-lbl { color: rgba(255,225,215,.78); text-shadow: none; }
.period-bal-tab #period-bal {
  margin-top: 4px;
  font: italic 600 18px/1 var(--serif);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
.period-bal-tab:not(.od) #period-bal { color: #a5dcc0; }
.period-bal-tab.od #period-bal { color: #fff; }


/* ── 13. DIALOGS, POPOVERS, PICKERS ─────────────────────────────────────── */

.calc-scrim { align-items: center; padding-top: 0; background: rgba(42,34,24,.3); }
.calc { border: 0; border-radius: var(--rr-lg); background: var(--paper-hi); box-shadow: var(--lift-4); }
.calc-btn { border-color: transparent; background: rgba(74,58,38,.05); }
.calc-btn.commit { border-color: var(--green); background: var(--green); color: var(--ink-inv); }

.mcal { border: 0; border-radius: var(--rr-md); background: var(--paper-hi); box-shadow: var(--lift-3); }
.mcal-header { border-bottom-color: var(--rule); }
.mcal-day.selected { background: var(--green); color: var(--ink-inv); }

.modal-backdrop { background: rgba(42,34,24,.3); }
.modal-sheet:not(.wishlist-sheet) {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  max-width: none;
  box-shadow: var(--lift-4);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.985);
  transition: opacity .14s ease, transform .14s ease;
}
.modal-sheet.open:not(.wishlist-sheet) { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-sheet:not(.wishlist-sheet) .modal-handle { display: none; }

#tools-sheet.desktop-popover {
  position: fixed;
  right: auto;
  bottom: auto;
  width: 320px;
  max-height: calc(100dvh - 24px);
  padding: 6px;
  border: 0;
  border-radius: var(--rr-md);
  background: var(--paper-hi);
  box-shadow: var(--lift-3);
  opacity: 0;
  transform: none;
  transition: opacity .12s ease-out;
}
#tools-sheet.desktop-popover.open { opacity: 1; transform: none; }
#tools-sheet.desktop-popover .modal-handle,
#tools-sheet.desktop-popover .modal-header { display: none; }
#tools-sheet.desktop-popover .tools-menu { padding: 3px 0; }
.cs-freq-link { appearance:none; border:0; padding:0; margin:0; background:none; color:inherit; font:inherit; cursor:pointer; text-align:inherit; }
.cs-freq-link:focus-visible { outline:1px solid var(--ink2); outline-offset:3px; text-decoration:underline; text-underline-offset:3px; }
@media(hover:hover) { .cs-freq-link:hover { text-decoration:underline; text-underline-offset:3px; } }
#tools-sheet.desktop-popover .tools-item {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: var(--rr);
  font-size: 12.5px;
  text-align: left;
}
.modal-backdrop.desktop-menu-backdrop.open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }


/* ── 14. FOCUS & HOVER ──────────────────────────────────────────────────── */

.desktop-nav button:focus-visible,
.stats-strip button:focus-visible,
.hdr-cash:focus-visible,
#view-plan .today-peek-tab:focus-visible,
#view-plan .pnav-datejump:focus-visible,
#view-plan .desktop-period-spend:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.desktop-nav button:focus-visible { outline-color: #a5dcc0; }

@media (hover: hover) {
  .desktop-nav button:hover:not(.active) { background: rgba(246,241,228,.08); color: var(--ink-inv); }
  .hdr-cash:hover .hdr-cash-val { color: var(--green); }

  #view-plan .today-peek-tab:hover,
  #view-plan .pnav-datejump:hover { background: #fff; }
  #view-plan .period-quick-link:hover { color: var(--green); }
  #view-plan .desktop-period-spend:hover { background: var(--green); color: var(--ink-inv); }
  .wishlist-rail .wishlist-card:hover { background: var(--paper-hi); }
  .wishlist-rail .wish-action:hover { background: rgba(74,58,38,.06); color: var(--ink); }
  .wishlist-rail .wish-action.remove:hover { color: var(--rust); }
  .hrz-pill:hover:not(.on) { color: var(--ink); }
  #tools-sheet.desktop-popover .tools-item:hover { background: rgba(60,60,60,.035); }
}


/* Outer shells do not own scrolling; the inner panes do. */
#view-plan .cards-area,
.wishlist-rail .wishlist-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#view-plan .cards-area::-webkit-scrollbar,
.wishlist-rail .wishlist-list::-webkit-scrollbar { display: none; width: 0; height: 0; }


/* ── 16. NARROW DESKTOP (1200–1399) ─────────────────────────────────────── */
/* Same structure, tightened. The column count never changes. */

@media (min-width: 1200px) and (max-width: 1399px) {

  .app > .app-header .brand-name { font-size: 29px; }
  .hdr-cash-val { font-size: 26px; }

  .desktop-safe strong { font-size: 31px; }

  #view-plan .pnav-bar { grid-template-columns: minmax(170px, 1fr) auto; gap: 12px; padding: 0 22px; }
  #view-plan .pnav-name { font-size: 19px; }
  #view-plan .chart-section { padding: 10px 22px 5px; }
  #view-plan .sw-track { gap: 16px; }
  #view-plan .desktop-period-head { padding: 16px 15px 4px; }
  #view-plan .desktop-period-date { font-size: 20px; }
  #view-plan .desktop-period-ledger { margin: 14px 15px 0; }
  #view-plan .desktop-period-stat span { font-size: 10.5px; }
  #view-plan .desktop-period-stat strong { font-size: 15px; }
  #view-plan .desktop-period-stat.left strong { font-size: 19px; }
  #view-plan .bcard { padding: 10px 15px; }
  #view-plan .bcard-amt { font-size: 19px; }
  #view-plan .rollup-tab, #view-plan .period-quick-add { padding-left: 15px; padding-right: 15px; }
  #view-plan .desktop-period-footer { padding: 6px 15px 16px; }


  .wishlist-rail-head { padding: 18px 16px 4px; }
  .wishlist-rail .wishlist-list { padding: 2px 14px 24px; }
  .wishlist-rail .wishlist-editor { margin: 0 14px 10px; }
}

/* ── 17. FORECAST-FIRST DESKTOP COMPOSITION ──────────────────────────────
   The forecast is the workbench. Navigation moves into the masthead, the
   money summary becomes one calm ledger, and the period cards read as one
   connected cash-flow sequence. Mobile never loads this stylesheet. */

:root {
  --gut: 28px;
}

.app {
  grid-template-columns: minmax(0, 1fr) var(--wish-w);
  grid-template-rows: var(--mast-h) minmax(0, 1fr) var(--foot-h);
}
.app.wishlist-rail-collapsed { grid-template-columns: minmax(0,1fr) 0; }


.app > .app-header {
  padding: 0 28px;
}
.app > .app-header .brand-name {  line-height: .92; }
.app > .app-header .hdr-cash { display: none; }

.desktop-top-nav {
  display: flex;
}
.desktop-top-nav button {
  position: relative;
  letter-spacing: .005em;
}
.desktop-top-nav button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
}


.desktop-top-nav button.has-earned::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.desktop-header-menu {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink3);
}
.desktop-header-menu svg { width: 19px; height: 19px; }

.alert {
  left: 270px;
  right: calc(var(--wish-w) + 270px);
  top: calc(var(--mast-h) + 124px) !important;
}

.wishlist-rail {
  grid-column: 2;
  grid-row: 2 / 4;
  justify-self: end;
  transition: transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s;
}
.app.wishlist-rail-collapsed .wishlist-rail {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear .24s;
}
.wishlist-rail-head {
  margin: 0;
  background: transparent;
}
.wishlist-title {
  color: var(--ink);
  font: 700 18px/1.15 var(--sans);
  letter-spacing: -.01em;
}
.desktop-wishlist-icon { color: var(--gold); }
.wishlist-rail-head-actions {  align-items: center; gap: 6px; }
.wishlist-rail-collapse {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: var(--rr-sm);
  color: var(--ink3);
}
.wishlist-rail-collapse svg { width: 17px; height: 17px; }
.wishlist-rail-tab {
  position: fixed;
  z-index: 38;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--rule-2);
  border-right: 0;
  color: var(--green-dp);
}
.app.wishlist-rail-collapsed .wishlist-rail-tab { display: flex; }
.wishlist-rail-tab-icon {
  position: relative;
  display: grid;
  place-items: center;
}

.wishlist-rail-tab-icon .wishlist-earned-count { right: -8px; top: -8px; box-shadow: 0 0 0 2px var(--paper-sub); }
.wishlist-rail-tab-label {
  writing-mode: vertical-rl;
  font: 700 11px/1 var(--sans);
}
.app.wishlist-rail-collapsed .alert { right: 270px; }
.wishlist-goals { padding-top: 8px; }


.wishlist-rail .wish-name,
.wishlist-rail .wish-amount {
  font-family: var(--sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}


.wishlist-state-section + .wishlist-state-section { margin-top: 18px; }
.wishlist-state-title,
.wishlist-rail .wishlist-option-head strong {
  margin: 0;
  color: var(--ink2);
  font: 700 12px/1.2 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.wishlist-state-title { padding: 0 4px 7px; border-bottom: 1px solid var(--rule); }

#view-plan { background: var(--pg); }
.desktop-money-now {
  display: grid;
  min-height: 116px;
  padding: 18px 34px 16px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.view-stack > .desktop-money-now {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
}


.desktop-money-now-heading span {
  max-width: 170px;
  margin-top: 6px;
  color: var(--ink3);
  font: 500 11px/1.4 var(--sans);
}

.desktop-money-fact {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
  color: var(--ink);
}
.desktop-money-fact:first-child { border-left: 0; }

.desktop-money-fact strong {
  display: block;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-money-fact.next strong,
.desktop-money-fact.month strong { font-size: 18px; letter-spacing: -.015em; }
.desktop-money-fact small {
  display: block;
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-money-fact.next small { color: var(--green); font-weight: 650; }

#view-plan .chart-horizon-summary { display: none !important; }
#view-plan .chart-title {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
#view-plan #sch-chart { display: block;  }


#view-plan .pnav-bar {
  min-height: 52px;
  grid-template-columns: minmax(96px,1fr) auto minmax(250px,1fr);
  grid-template-areas: "ledger date actions";
  padding: 0 34px;
  background: var(--pg-soft);
  border-top: 1px solid var(--rule);
}


#view-plan .pnav-row { grid-area: date; justify-self: center; }
#view-plan .pnav-center { justify-content: center; }
#view-plan .desktop-shared-ledger { grid-area: ledger; justify-self: start; justify-content: flex-start; }
#view-plan .desktop-period-actions {
  display: flex;
  grid-area: actions;
  min-width: 0;
  justify-self: stretch;
  justify-content: flex-end;
  align-items: center;
}
#view-plan .desktop-period-actions .desktop-period-footer {
  display: flex;
  min-height: 0;
  padding: 0;
  border: 0;
  align-items: center;
  justify-content: flex-end;
}
#view-plan .desktop-period-actions .desktop-period-spend {
  min-height: 32px;
  padding: 0 11px;
  border-radius: var(--rr-sm);
  background: rgba(255,253,247,.38);
  box-shadow: none;
}
#view-plan .pnav-name { font-family: var(--sans);  font-style: normal; font-weight: 700; }
#view-plan .pname-date { color: var(--ink2); }
#view-plan .pnav-datejump { width: 32px; height: 32px; background: transparent; box-shadow: none; }
#view-plan .desktop-shared-ledger-stats { display: none; }

#view-plan .sw-track,
#view-plan .sw-track.has-today {
  position: relative;
  grid-template-columns: minmax(0,1fr);
  align-items: start;
}
#view-plan .sw-page {
  display: grid;
  align-items: start;
  overflow: visible;
}
#view-plan .sw-page:not([data-period-index]) {
  display: none;
}
#view-plan .sw-page::before { border-radius: inherit; overflow: hidden; }
#view-plan .sw-page.period-current::after { display: none; }
#view-plan .sw-page::after,
#view-plan .desktop-period-head::after { display: none; }
#view-plan .desktop-period-head { position: relative;    }


#view-plan .desktop-period-stat span small { display: none; }
#view-plan .period-quick-add { grid-column: 2; grid-row: 1;   }
#view-plan .sw-content {   min-width: 0; }


#view-plan .desktop-period-spend {   letter-spacing: .02em; text-transform: none; }

.app > .stats-strip { grid-column: 1; }

.desktop-top-nav button:focus-visible,
.desktop-header-menu:focus-visible,
.desktop-money-fact.cash:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

@media (hover:hover) {
  .desktop-top-nav button:hover { color: var(--green-dp); }
  .desktop-header-menu:hover { background: var(--green-wash); color: var(--green-dp); }

}

/* The Wishlist is a drawer, not a layout column. Its motion must never resize
   the forecast chart or make the bars jump between two geometries. */
.app,
.app.wishlist-rail-collapsed { grid-template-columns: minmax(0,1fr) 0; }
.view-stack { grid-column: 1; }
.wishlist-rail {
  position: fixed;
  z-index: 37;
  width: var(--wish-w);
}
.app:not(.wishlist-rail-collapsed) .wishlist-rail { visibility: visible; transform: translateX(0); }

@media (min-width:1200px) and (max-width:1399px) {
  :root { --wish-w: 286px; --gut: 22px; }
  .app > .app-header { grid-template-columns: 205px minmax(390px,1fr) 38px; gap: 16px; padding: 0 22px; }
  .desktop-top-nav { gap: 20px; }
  .alert { left: 210px; right: calc(var(--wish-w) + 210px); }
  .desktop-money-now { grid-template-columns: 150px minmax(0,1fr); gap: 16px; padding-left: 24px; padding-right: 24px; }
  .desktop-money-fact { padding-left: 13px; padding-right: 13px; }
  .desktop-money-fact strong { font-size: 20px; }
  .desktop-money-fact.next strong,
  .desktop-money-fact.month strong { font-size: 16px; }
  #view-plan .chart-section { padding-left: 24px; padding-right: 24px; }
  #view-plan #sch-chart { height: 120px; }
  #view-plan .pnav-bar { padding-left: 24px; padding-right: 24px; }

  #view-plan .sw-track,
  #view-plan .sw-track.has-today { gap: 18px; }
}

/* ── 18. SELECTED-PERIOD WORKSPACE ──
   The chart chooses the period. Below it, that period becomes the page rather
   than another floating card, with the ledger and its bills sharing one plane. */
#view-plan .cards-area {
  padding: 0 0 36px;
  overflow: hidden;
}
#view-plan .sw-track,
#view-plan .sw-track.has-today {
  height: 100%;
  min-height: 0;
  gap: 0;
}
#view-plan .sw-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0,1fr);
  align-content: stretch;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#view-plan .sw-page.period-current {
  background: transparent;
  box-shadow: none;
}
#view-plan .sw-page.period-current:focus-visible {
  outline: 0;
  box-shadow: none;
}
#view-plan .desktop-period-head {
  grid-column: 1;
  grid-row: 1;
}
#view-plan .desktop-period-kicker { margin-top: 7px; font-size: 12px; }


#view-plan .desktop-period-ledger { margin: 28px 0 0; }

#view-plan .desktop-period-stat span { font-size: 14px; color: var(--ink2); }

#view-plan .desktop-period-stat.left strong { letter-spacing: -.025em; }


/* Income & bills is the same ledger workspace, not a separate visual world. */


#view-plan .period-quick-add {
  min-height: 34px;
  padding: 0;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
#view-plan .period-quick-prompt { width: auto; justify-content: flex-end; gap: 8px; }
#view-plan .period-quick-link {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--rr-sm);
  background: rgba(255,253,247,.38);
  color: var(--ink2);
  font-size: 11px;
  text-decoration: none;
}
#view-plan .period-quick-link::before { margin-right: 6px; font-family: var(--sans); }
#view-plan .desktop-period-actions .period-quick-add.editing { background: transparent; }
#view-plan .sw-content {
  grid-column: 2;
  grid-row: 1;
  height: auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-self: stretch;
}
#view-plan .sw-page > .rollup-wrap,
#view-plan .sw-page > .expense-card { grid-column: 2; margin-left: 36px; }

#view-plan .rollup-tab-lbl {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
  order: 0;
}

#view-plan .bcard-name {
  margin-bottom: 2px;
  text-transform: none;
}
#view-plan .desktop-period-footer {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  padding: 12px 36px 28px 0;
  align-items: flex-start;
  justify-content: flex-start;
  border-right: 1px solid var(--rule);
}
#view-plan .desktop-period-spend { min-height: 38px; padding: 0 18px; font-size: 11px; }


#view-plan .today-peek-tab svg { width: 18px; height: 18px; }

/* Final desktop chrome: quiet icon actions and one aligned closing figure. */
#view-plan .desktop-period-actions .desktop-period-spend,
#view-plan .desktop-period-actions .period-quick-link,
#view-plan .today-peek-tab {
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--ink2);
}
#view-plan .desktop-period-actions .desktop-period-spend,
#view-plan .desktop-period-actions .period-quick-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  font: 650 11px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
#view-plan .desktop-period-actions .period-quick-link::before { content: none; }
#view-plan .desktop-action-icon { width: 17px; height: 17px; flex: 0 0 auto; }

#view-plan .today-peek-tab::before { content: none; }


#view-plan .desktop-period-stat { grid-template-columns: minmax(0,1fr) auto; }


@media (hover:hover) {
  #view-plan .desktop-period-actions .desktop-period-spend:hover:not(:disabled),
  #view-plan .desktop-period-actions .period-quick-link:hover,
  #view-plan .today-peek-tab:hover { background: rgba(74,58,38,.07); color: var(--green-dp); }
}

@media (min-width:1200px) and (max-width:1399px) {
  #view-plan .cards-area { padding-left: 0; padding-right: 0; }
  #view-plan .sw-page { padding-left: 24px; padding-right: 24px; grid-template-columns: minmax(245px,34%) minmax(0,1fr); }
  #view-plan .desktop-period-head { padding-right: 26px; }
  #view-plan .sw-content { padding-left: 26px; }
  #view-plan .sw-page > .rollup-wrap,
  #view-plan .desktop-period-footer { padding-right: 26px; }


  .app.wishlist-rail-collapsed .alert { right: 210px; }
}

@media (min-width:1400px) {
  .app.wishlist-rail-collapsed .alert { right: 270px; }
}

/* Shared upper canvas; the global rail has a reserved column.
   These dimensions are identical in Forecast and Income & bills. */
:root {
  --drawer-space: calc(var(--wish-w) + 34px);
}
.app.wishlist-rail-collapsed { --drawer-space: 34px; }
.app { transition: none; }


.alert,
.app.wishlist-rail-collapsed .alert { left: 270px; right: 270px; }
.wishlist-rail {
  top: 0;
  bottom: 0;
  border-top: 0;
}
.wishlist-rail-head {  align-items: flex-start; }
.wishlist-rail-head-actions { display: none; }
.wishlist-rail-tab {
  display: flex;
  top: 18px;
  transition: right .24s cubic-bezier(.22,.61,.36,1);
}

.wishlist-rail-tab-label { text-transform: none;   }
.wishlist-rail-tab::after { content: '\203a'; font: 500 20px/1 var(--sans); }
.app.wishlist-rail-collapsed .wishlist-rail-tab::after { content: '\2039'; }
.wishlist-rail-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: -4px; }
#view-plan .pnav-bar {
  margin-right: var(--drawer-space);
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 12px;
  padding-left: 28px;
  padding-right: 20px;
}
#view-plan .pnav-name { font-size: 14px; }
#view-plan .pnav-center { min-width: 0; gap: 8px; }
#view-plan .desktop-period-actions { gap: 2px; }
#view-plan .desktop-period-actions .desktop-period-spend,
#view-plan .desktop-period-actions .period-quick-link { font-size: 12px; padding: 0 8px; }
#view-plan .cards-area { margin-right: var(--drawer-space); width: auto; padding-bottom: 0; }


#view-plan .desktop-period-heading > div { min-width: 0; }
#view-plan .period-desktop-title { display: block; overflow-wrap: anywhere; }
#view-plan .desktop-period-kicker { line-height: 1.5; }
#view-plan .rollup-tab-left { min-width: 0; }
#view-plan .rollup-tab-lbl { overflow-wrap: anywhere; text-align: left; color: var(--ink); font-size: 19px; font-weight: 700; line-height: 1.35; }
#view-plan .rollup-tab-detail { margin-left: 5px; color: var(--ink3); font-size: 13px; font-weight: 500; white-space: nowrap; }
#view-plan .rollup-tab-amt { flex-shrink: 0; color: var(--ink2); font: 700 19px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
#view-plan .rollup-tab {
  position: static;
  gap: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}
#view-plan .rollup-tab-left { gap: 12px; }
#view-plan .rollup-env { display: none; }
#view-plan .rollup-chev { order: -1; color: var(--ink2); }
#view-plan .rollup-chev svg { width: 13px; height: 13px; }
#view-plan .rollup-wrap { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }

#view-plan .rollup-body { background: transparent; }
#view-plan .rollup-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
#view-plan .bcard { min-width: 0; }
#view-plan .bcard-info {  grid-template-columns: minmax(0,1fr) auto; column-gap: 20px; align-items: baseline; }


#view-plan .bcard-name { overflow-wrap: anywhere; }
#view-plan .rollup-body .goal-card { border-right: 0; }


.wishlist-rail .wishlist-list { scrollbar-width: none; }

.wishlist-rail .wish-name { overflow-wrap: anywhere; }
.wishlist-rail .wish-actions {  flex-wrap: wrap;   }
.wishlist-rail .wish-action {  font-size: 12px; text-transform: none; letter-spacing: 0; }
.wishlist-rail .wishlist-goal-card .wish-action { font-size: 12px; }
@media (hover:hover) {
  .wishlist-rail .wishlist-card:hover { box-shadow: none; }
}

.wishlist-rail .wish-state { font-size: 11px; letter-spacing: 0; text-transform: none; }
.wishlist-rail .wishlist-goal-card { gap: 4px 12px; padding: 14px 16px; }
.wishlist-rail .wishlist-goal-card .wish-actions { margin-top: 2px; }
.wishlist-rail-head { min-height: 0;  }


#view-plan .period-quick-input { border: 0; border-bottom: 1px solid var(--rule-3); background: transparent; font: 500 14px/1.4 var(--sans); }
#view-plan .period-quick-input:focus-visible { outline:0; outline-offset:0; border-bottom-color:var(--ink2); box-shadow:inset 0 -1px 0 var(--ink2); }
#view-plan .period-quick-save { background: var(--green); color: var(--paper-hi); }
@media (prefers-reduced-motion:reduce) {
  .wishlist-rail, .app.wishlist-rail-collapsed .wishlist-rail, .wishlist-rail-tab { transition: none; }
}

/* Desktop row interaction system. This is the sole owner of row focus,
   timing actions and inner-pane scrollbars in Forecast and Income & bills. */
:root {
  --row-radius: 10px;
  --row-focus-ring: inset 0 0 0 1.5px rgba(49,94,119,.62);
  --row-hover-paper: rgba(88,116,125,.045);
}

.wishlist-rail .wishlist-plans-scroll { margin: 8px 8px 12px 0; padding-right: 8px; }

#view-plan .rollup-body .bcard {
  position: relative;
  display: grid;
  align-items: center;
  border: 0;
  border-radius: var(--row-radius);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background .1s ease;
}
#view-plan .bcard-info { display: contents; }
#view-plan .bcard-name {   max-width: 100%; }
@media (hover:hover) {
  #view-plan .bcard-name-link:hover { text-decoration: none; }
}
#view-plan .bcard-amt {   font-variant-numeric: tabular-nums; }
#view-plan .goal-card .bcard-amt { color: #6c511b; font-weight: 650; }
#view-plan .bcard-meta {  margin-top: 0;   }
#view-plan .goal-card .bcard-meta { color: var(--ink2); }
#view-plan .bcard.paid .bcard-info > * { opacity: .65; }
#view-plan .bcard.ghost .bcard-info > * { opacity: .65; }
#view-plan .ghost-hop { grid-column: 1; grid-row: 2; justify-self: start; }
#view-plan .bcard-del { top: 12px; right: -2px; }
#view-plan .rollup-body .bcard::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}


#view-plan .rollup-body .bcard:is(.forecast-active,.selected,:focus-within) {
  outline: 0;
  border-radius: var(--row-radius);
  background: var(--row-focus-paper);
  box-shadow: var(--row-focus-ring);
}
#view-plan .rollup-body .bcard:is(.forecast-active,.selected,:focus-within)::after { background: transparent; }

/* Money stays on the first line. Timing lives beside the date on line two. */
#view-plan .transport {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#view-plan .bcard:is(.forecast-active,.selected,:focus-within) .transport { opacity: 1; pointer-events: auto; }
#view-plan .tr-btn {
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 650 12px/1 var(--sans);
  box-shadow: none;
  transition: background .1s ease;
}


#view-plan .tr-btn.back::before { content: '\2190'; }
#view-plan .tr-btn.fwd::after { content: '\2192'; }
#view-plan .tr-btn.pay::before { content: '\2713'; }

#view-plan .tr-btn:focus-visible { outline: 2px solid var(--row-focus); outline-offset: 1px; }
@media (hover:hover) {
  #view-plan .rollup-body .bcard:hover { background: var(--row-hover-paper); }
  #view-plan .bcard:hover .transport { opacity: 1; pointer-events: auto; }
  #view-plan .tr-btn:hover:not(:disabled) { color: var(--ink); background: rgba(105,152,191,.13); }
}
@media (hover:none) {
  #view-plan .transport { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion:reduce) {
  #view-plan .rollup-body .bcard,
#view-plan .tr-btn { transition: none; }
}

/* Global desktop workspace: muted paper, legible rules and aligned forms. */


.app > .app-header { margin-right: var(--drawer-space);  gap: 16px;  }

.desktop-money-now,
#view-plan .chart-section,
#view-plan .crochet-bar { margin-right: var(--drawer-space); }
.desktop-money-now { grid-template-columns: 140px minmax(0,1fr); gap: 12px;  }


#view-plan .summary-actions { display: flex; }
#view-plan .summary-actions .desktop-period-footer {  justify-content: flex-start; }
#view-plan .summary-actions .period-quick-link,
#view-plan .summary-actions .desktop-period-spend {  padding: 0 12px; font-size: 13px; border: 1px solid var(--rule-2); border-radius: 7px;   }
#view-plan .summary-actions .desktop-action-icon { width: 18px; height: 18px; }

#view-plan .summary-actions .period-quick-form { position: static; width: 100%; max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none;   }

#view-plan .summary-actions .period-quick-save {  border-radius: 6px; }



@media (max-width:1350px) {

  .app > .app-header { grid-template-columns: 155px minmax(0,1fr) 30px; padding: 0 20px; }
  .desktop-top-nav { gap: 14px; }
  .desktop-money-now { grid-template-columns: 1fr; gap: 6px; padding: 12px 20px; }
  .desktop-money-now-heading span { display: none; }
  .desktop-money-facts { width: 100%; }
}
#view-plan .summary-actions .period-quick-add { justify-content: flex-start; }


#view-plan .desktop-period-head {    scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; scroll-padding-block: 20px; }
#view-plan .summary-actions .period-quick-input:focus-visible { outline:0; outline-offset:0; border-bottom-color:var(--ink2); box-shadow:inset 0 -1px 0 var(--ink2); }


/* Readable desktop hierarchy: surface and control colors have separate roles. */

.app > .app-header::before { opacity: 0; }
.desktop-money-now { background: #e4e7e3; }

#view-plan .pnav-bar { background: #ced9d5; color: var(--ink); }


.desktop-money-fact > span,
.desktop-money-fact small,
.desktop-money-now-heading span { font-size: 13px; color: var(--ink2); }


/* Desktop composition — a pocket ledger on a paper desk.
   This section owns the shared geometry, material and typography. */
:root { --mast-h: 48px; --foot-h: 0px;
  --pg: #e2dacb; --paper: #eee9df; --paper-hi: #f5f0e6; --pg-soft: #e6dfcf;
  --ink: #302f26; --ink2: #535747; --ink3: #656859;
  --rule: rgba(74,65,43,.18); --rule-2: rgba(74,65,43,.28);
 --row-focus: #527c65;
  --row-focus-paper: #e5ecdf; --scroll-thumb: #aaa794; --navy: #286149;
}
.app > .app-header .brand-name { font-size: 31px; }
#desktop-nav-goals { display: none; }
.alert { display: none !important; }
.view-stack > .desktop-money-now {     grid-template-columns: minmax(0,1fr) auto;    border: 0; }
.desktop-money-now-heading { display: flex; align-items: baseline; gap: 12px; }

.desktop-money-now-heading span { display: none; }
#desktop-plan-tools { grid-column: 2; grid-row: 1; }


.desktop-money-facts { grid-column: 1 / -1; grid-row: 2;   }
.desktop-money-fact { border: 0; padding: 0; min-width: 0; min-height: 0; }
.desktop-money-fact.cash { order: -1; background: transparent; }

.desktop-money-fact.month { display: none; }
.desktop-money-fact strong { font: 600 23px/1.2 var(--serif); }


.desktop-money-fact > span { font: 600 12px/1.4 var(--sans); color: var(--ink2); }
.desktop-money-fact small { font: 500 11px/1.5 var(--sans); color: var(--ink2); }
.plan-story { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;  }
.plan-story strong { font: 600 12px/1.4 var(--sans); }
.plan-story span { display: none; }
.plan-story.covered strong { color: var(--green-dp); }
.plan-story.needs-attention strong { color: var(--rust-dp); }
.plan-story button { min-height: 30px; padding: 0 12px; border-radius: 5px; background: var(--rust-wash); color: var(--rust-dp); border: 1px solid var(--rule); font: 650 12px var(--sans); cursor: pointer; }

#view-plan .chart-section {    border: 0; }


#view-plan .pnav-bar { min-height: 42px; background-color: var(--pg-soft); background-image: linear-gradient(rgba(107,96,63,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,96,63,.055) 1px,transparent 1px); background-size: 12px 12px; border-block: 1px solid var(--rule); }
#view-plan .cards-area { background: var(--paper); }
#view-plan .desktop-period-head {   align-self: start;  background: var(--paper-hi); border: 1px solid var(--rule); border-radius: 7px;  }


#view-plan .desktop-period-stat strong { font: 600 17px/1.4 var(--serif); }
#view-plan .desktop-period-stat.left {   border-top: 1px solid var(--rule); }
#view-plan .desktop-period-stat.left strong { color: var(--green-dp); }
#view-plan .desktop-period-stat.left.short strong { color: var(--rust-dp); }
.desktop-period-context { font: 500 11px/1.5 var(--sans); color: var(--ink2);  }

#view-plan .summary-actions .period-quick-link, #view-plan .summary-actions .desktop-period-spend { min-height: 34px; background: transparent; border-color: var(--rule-2); color: var(--green-dp); }
#view-plan .sw-content {  margin: 0; }
#view-plan .rollup-tab-lbl, #view-plan .rollup-tab-amt { font-size: 16px; }

.wishlist-rail {   box-shadow: none; }
.wishlist-rail-head { padding: 22px 22px 16px;  }
.wishlist-rail .wishlist-title { font: italic 600 25px/1.3 var(--serif); }
.wishlist-rail-tab { background: var(--pg-soft);    }
.wishlist-rail .wishlist-plans-scroll { margin-top: 0; }

#wishlist-rail .wishlist-card[data-state="goal"] { background: #edcf82; color: #382d19; }
#wishlist-rail .wishlist-card[data-state="goal"].is-funding-shortfall { background: #f0c98d; box-shadow: inset 3px 0 0 #b86b24; }
#wishlist-rail .wishlist-card[data-state="goal"] :is(.wish-name,.wish-amount,.wish-action,.wish-lock) { color: #382d19; }
#wishlist-rail .wishlist-card[data-state="goal"].is-funding-shortfall .wish-state { font-weight: 800; }


.wishlist-rail .wish-name {  color: var(--ink); }
.wishlist-rail .wish-action { color: var(--green-dp); }
.wishlist-rail .wishlist-card[data-state="earned"] .wish-state::before { content: '★ '; color: #28533b; }


#view-plan .summary-actions .period-quick-add { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; }
#view-plan .summary-actions .period-quick-link { padding-inline: 8px; }
/* Creation forms use the same paper, ink, selectors and actions as the ledger. */
.modal-sheet:not(.wishlist-sheet) { background: var(--paper-hi); width: min(520px,calc(100vw - 48px)); border: 1px solid var(--rule); border-radius: 9px; }
.modal-sheet .modal-footer { justify-content: flex-end; border-color: var(--rule); padding: 16px 22px; }
.modal-sheet .modal-save, .modal-sheet .modal-cancel { flex: 0 1 120px; min-height: 38px; border-radius: 6px; }
.modal-sheet .modal-save { background: var(--green-dp); color: var(--paper-hi); }
.modal-sheet .modal-cancel { border-color: var(--rule-2); color: var(--ink2); }
.modal-sheet .inc-card-header { gap: 16px; margin-bottom: 18px; }
.modal-sheet .inc-name { font: 600 17px/1.5 var(--sans); }
.modal-sheet .inc-field-lbl, .modal-sheet .inc-off-lbl { font: 600 12px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink2); min-width: 88px; }
.modal-sheet .inc-amt-val { font: 600 26px/1.3 var(--serif); color: var(--green-dp); }
.modal-sheet .inc-stepper, .modal-sheet .inc-off-stepper { min-width: 34px; min-height: 34px; padding: 6px; border-radius: 18px; background: transparent; color: var(--green-dp); }
.modal-sheet .bill-freq-group { flex-basis: 100%; display: flex; margin-top: 8px; border: 0; background: transparent; gap: 4px; }
.modal-sheet .bill-freq-btn { flex: 1; min-height: 34px; padding: 6px 10px; border-radius: 18px; font: 600 12px/1 var(--sans); color: var(--ink2); }
.modal-sheet .bill-freq-btn.on { background: #dce6d6; color: var(--green-dp); }
.modal-sheet .date-btn { min-height: 34px; color: var(--ink2); }
.modal-sheet .date-btn-ico { width: 17px; height: 17px; }
@media (hover:hover) {

  .modal-sheet .modal-save:hover { background: var(--green); }

}
@media (max-width:1350px) {
  .desktop-money-facts { gap: 14px; }
  #view-plan .sw-page { gap: 16px; padding: 14px 20px; grid-template-columns: 240px minmax(0,1fr); }
  #view-plan .desktop-period-head { padding: 16px; }
}
#stats-strip { display: none !important; }
#stats-strip:has(#sel-area[style*="display: flex"]),
#stats-strip:has(#sel-area[style*="display:flex"]) { display: flex !important; position: fixed; inset: auto auto 18px 30px; width: auto; height: auto; min-height: 42px; padding: 8px 16px; border-radius: 8px; background: var(--pg-soft); box-shadow: var(--lift-2); z-index: 40; }
#period-bal-block { display: none !important; }
#view-plan .summary-actions .desktop-period-footer { flex-wrap: wrap;  }


/* One bounded desk keeps overview, forecast and bills related on wide monitors. */
:root { --desk-max: 1800px; --desktop-edge: max(0px, calc((100vw - var(--desk-max)) / 2)); }
.app { max-width: var(--desk-max); margin-inline: auto; }
.wishlist-rail { right: var(--desktop-edge); }
.wishlist-rail-tab { right: calc(var(--desktop-edge) + var(--wish-w)); }
.app.wishlist-rail-collapsed .wishlist-rail-tab { right: var(--desktop-edge); }


/* ── 19. THE DESK ────────────────────────────────────────────────────────────
   Bounding the workspace stopped the layout stretching to absurd widths, but it
   left the ledger floating in an undifferentiated field the same colour as
   itself: on an ultra-wide monitor the Wishlist rail simply dissolved into the
   page, with no right edge to end on. A bound only reads as deliberate if the
   thing inside it reads as an object. So the page becomes a desk — darker,
   grained, lit from above — and the app becomes a sheet lying on it, with real
   edges the rail can belong to. Below the bound nothing changes: the sheet
   fills the window and the desk is never seen. */

body {
  background-color: #cdc3aa;
  background-image:
    radial-gradient(128% 86% at 50% -14%, rgba(255,251,240,.34), rgba(255,251,240,0) 62%),
    repeating-linear-gradient(112deg, rgba(92,76,50,.055) 0 2px, rgba(92,76,50,0) 2px 9px),
    repeating-linear-gradient(22deg, rgba(92,76,50,.035) 0 1px, rgba(92,76,50,0) 1px 6px);
}

/* The sheet only earns edges once there is desk to see them against. */
@media (min-width: 1801px) {
  .app {
    box-shadow:
      0 0 0 1px rgba(74,58,38,.20),
      0 2px 4px rgba(40,32,20,.10),
      0 34px 78px -38px rgba(38,30,18,.62);
  }
  /* The rail is fixed, so it sits outside .app's shadow and has to close the
     sheet's right edge itself. */
  .wishlist-rail {
    box-shadow:
      1px 0 0 rgba(74,58,38,.20),
      0 2px 4px rgba(40,32,20,.10),
      0 34px 78px -38px rgba(38,30,18,.62);
  }
}
.wishlist-rail { border-left: 1px solid var(--rule-2); }


/* ── 20. THE FORECAST PLATE ──────────────────────────────────────────────────
   The chart is the one thing on this screen a person looks at before reading
   anything, and it had been thinned to a row of tally marks. Give it a taller
   plate and let the columns be columns. The crochet lane below it had the
   opposite problem: the renderer draws a 42-unit strip into a 28px box, and an
   SVG that does not fit is scaled down whole — so the stitches shrank away from
   the bars they are supposed to point at. Both now measure the box the
   stylesheet gives them (see drawChartOn / _renderCrochetOn), which makes these
   two heights the single source of truth for chart geometry. */

#view-plan .chart-section {
  padding: 10px 30px 4px;
}


#view-plan .crochet-bar {
  background: var(--paper-hi);
}


/* Chart lettering belongs to the warm ledger, not to the cool slate the
   interim palette left behind. */
#view-plan #sch-chart text[font-size="7.5"] { font-size: 11px; fill: #5d5340; font-weight: 600; }
#view-plan #sch-chart text[font-size="7"] { font-size: 9.5px; letter-spacing: .1em; }
#view-plan #sch-chart text[font-size="8"] { font-size: 12px; }
#view-plan #croch-svg text { font-size: 11px; fill: #7a5548; }

/* ── 21. THE SELECTED PERIOD — one action that matters ───────────────────────
   The period ledger had been squeezed into a 300px column beside a 740px bill
   list, both centred inside a workspace nearly twice that wide: three buttons
   wrapped onto two lines with a third of the desk standing empty beside them.
   The column now takes a real share of the width, and the actions stop
   pretending to be peers. Adding a bill or a paycheck files a fact. Putting
   money aside is the one control here that changes the forecast — the question
   the whole app exists to answer — so it leads, at full width, in ink. */

#view-plan .sw-page {
  grid-template-columns: minmax(390px, 34%) minmax(0, 1fr);
  justify-content: stretch;
  gap: 0 34px;
}

#view-plan .sw-content { padding: 6px 8px 6px 0; }


#view-plan .summary-actions .desktop-period-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 0;
  border: 0;
}
#view-plan .summary-actions .desktop-period-spend {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 0;
  border-radius: 5px;
  background-color: #285f4b;
  background-image: var(--cloth-weave);
  color: #f7f3e6;
  font: 600 14px/1.3 var(--sans);
  letter-spacing: .005em;
  box-shadow: inset 0 1px 0 rgba(255,252,243,.14), 0 2px 3px rgba(43,36,26,.12);
}
#view-plan .summary-actions .desktop-period-spend .desktop-action-icon { width: 21px; height: 21px; }

.desktop-spend-reason {
  flex-basis: 100%;
  margin: 0;
  font: italic 500 12px/1.45 var(--serif);
  color: var(--ink3);
}

/* Two quiet additions, side by side, that never wrap. */
#view-plan .summary-actions .period-quick-add { padding: 0; }
#view-plan .summary-actions .period-quick-prompt {
  grid-template-columns: 1fr 1fr;
  flex-wrap: nowrap;
  width: 100%;
}
#view-plan .summary-actions .period-quick-link {
  width: 100%;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: rgba(255,252,243,.55);
  color: var(--ink2);
  font: 650 13px/1 var(--sans);
  white-space: nowrap;
}
@media (hover:hover) {
  #view-plan .summary-actions .desktop-period-spend:hover:not(:disabled) {
    background-color: #306e57;
    color: var(--ink-inv);
  }
  #view-plan .summary-actions .period-quick-link:hover {
    background: var(--paper-hi);
    border-color: var(--rule-3);
    color: var(--green-dp);
  }
}

/* The period summary is short enough to read as one card. Let the card take its
   natural height instead of turning its four ledger figures into a nested
   scroller. On a short screen the lower workspace can scroll as a whole, with
   its existing hidden scrollbar, while the card always shows complete content. */
:root { --money-band-h: 152px; }
.view-stack > .desktop-money-now {
  grid-template-rows: auto auto minmax(0,1fr);
  align-content: start;
}
#view-plan { padding-top: var(--money-band-h); }
/* The plate owns one number — its own height. The heading takes what it needs
   and the chart fills the rest, so the two can never be budgeted apart and
   leave the date labels cropped under the crochet lane. */
#view-plan .chart-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#view-plan .chart-labels { flex: 0 0 auto; }
#view-plan #sch-chart { flex: 1 1 0; min-height: 0; height: auto; }


#view-plan .cards-area { overflow-y: auto; }
#view-plan .sw-page { padding: 14px 32px; }
#view-plan .desktop-period-head {
  display: flex;
  flex-direction: column;
  height: max-content;
  min-height: 0;
  max-height: 100%;
  padding: 16px 20px 14px;
  overflow: hidden;
}
/* A column flex container shrinks its items by default; here that squeezed the
   date block until the pay-period name overlapped the first ledger line. */
#view-plan .desktop-period-head > * { flex: 0 0 auto; }
#view-plan .desktop-period-ledger {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  overflow-x: hidden;
  padding-right: 6px;
  margin-right: -6px;
}
#view-plan .desktop-period-stat { min-height: 26px; padding: 3px 0; }
#view-plan .desktop-period-stat.left { margin-top: 5px; padding-top: 8px; }
.desktop-period-context { margin: 7px 0 0; }
#view-plan .summary-actions { margin-top: 0;   }


/* ── 22. PAYCHECKS & BILLS — two open sheets ─────────────────────────────────
   This page had flattened onto a single tone: two lists, one plane, no edges,
   and every figure set in the same sans as the labels around it. Nothing was
   wrong with it and nothing was alive in it either. Sections 9 and 10 designed
   it as two open sheets on a manila ground with a money column set in the app's
   display voice; later passes painted over that. This restores it — three warm
   steps (ground → sheet → opened row) and the italic serif back on the money,
   which is what makes a column of figures read as a ledger instead of a table.

   The two lists are distinguished by their own labels and their own column,
   never by hue alone: colour here is reinforcement, and the one place hue
   carries real information — a Goal or a Debt inside the bill list — also
   carries a left edge and its own word. */


/* ── 23. THE WISH BOARD ──────────────────────────────────────────────────────
   Wishes that land on the same payday are alternatives — you can take one of
   them, not all — and on a phone that reads beautifully as a deck you swipe
   through. On a monitor it read as a bug: one card, a "1 of 4" pager, and two
   feet of empty rail below it. The Goals list directly above already unfolds
   its deck into a column at this width; the wish deck simply never got the
   same treatment. It does now, and the group heading ("Choose one of 4") goes
   on carrying the meaning the deck used to carry by itself. */

.wishlist-option-track {
  flex-direction: column;
  gap: 9px;
  overflow-x: visible;
  scroll-snap-type: none;
}
.wishlist-option-track > .wishlist-card { flex: initial; width: auto; }
.wishlist-option-deck.has-options { padding: 0; }
.wishlist-option-deck.has-options::before,
.wishlist-option-deck.has-options::after { display: none; }
.wishlist-deck-nav,
.wishlist-deck-dots { display: none; }

.wishlist-rail-head { border-bottom: 1px solid var(--rule); }
.wishlist-rail .wishlist-list { padding: 14px 18px 26px; gap: 16px; }
.wishlist-option-head {
  padding: 12px 3px 2px;
  border-top: 1px solid var(--rule);
}
.wishlist-option-head strong { color:var(--ink2); font:600 12px/1.4 var(--sans); }
.wishlist-option-head span { font: 700 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.wishlist-state-title {
  margin: 4px 3px 0;
  color: var(--ink3);
  font: 700 10px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wishlist-rail .wish-amount { font: italic 600 22px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
#wishlist-rail .wishlist-card[data-state="earned"] { background: #e1eddf; }


/* ── 24. SHORT DESKTOPS ──────────────────────────────────────────────────────
   A 1280×800 laptop has ~140px less to spend than the screens above. Give it
   back in the order the page can most afford to lose it: the explanatory asides
   first, then a little off the chart plate and the display figures — never the
   ledger, and never the button. */

@media (max-height: 900px) {
  :root { --money-band-h: 132px; }
  .desktop-money-fact strong { font-size: 20px; }
  .desktop-money-fact.cash strong { font-size: 25px; }

  #view-plan .crochet-bar { height: 36px; flex: 0 0 36px; flex-basis: 36px; }
  #view-plan #croch-svg { height: 36px; }
  .desktop-period-context { display: none; }
  #view-plan .sw-page { padding: 10px 26px; }
}
@media (max-height: 830px) {
  .desktop-spend-reason { display: none; }
  #view-plan .desktop-period-stat { min-height: 24px; padding: 2px 0; }
  #view-plan .desktop-period-date { font-size: 23px; }
  #view-plan .summary-actions { padding-top: 10px; }
  #view-plan .summary-actions .desktop-period-spend { min-height: 46px; }
  #view-plan .summary-actions .period-quick-link { min-height: 38px; }
}


/* ── 25. TALL DESKTOPS ───────────────────────────────────────────────────────
   The mirror of section 24. On a big monitor the forecast was drawn at laptop
   proportions with two feet of ground beneath it, which is what made the
   columns look thin — they were the right thickness for the wrong plate. Spend
   the extra height where the eye actually goes. */

@media (min-height: 1080px) {
  :root { --money-band-h: 166px; }
  .desktop-money-fact strong { font-size: 25px; }
  .desktop-money-fact.cash strong { font-size: 31px; }
  #view-plan .chart-section {    padding: 14px 30px 6px; }
  #view-plan .crochet-bar { height: 54px; flex: 0 0 54px; flex-basis: 54px; }
  #view-plan #croch-svg { height: 54px; }
  #view-plan .sw-page { padding: 22px 32px; }
  #view-plan .desktop-period-head { padding: 22px 24px 18px; }
}


/* ── 26. ONE QUIET STAT ROW ──────────────────────────────────────────────────
   Zan's read of the top of the page: the numbers looked randomly grouped and
   randomly sized, and a fourth line about shortfalls hung off the bottom of the
   cash stack with a button that competed with Prefund. Four problems, one
   cause — the band had accumulated four type sizes and three kinds of content
   in a space that answers three questions:

       how much have I got   ·   how much may I spend   ·   when does more come

   So: three columns, one label register, one figure size, one support register.
   Nothing here is emphasised by being bigger than its neighbour; the eye reads
   left to right and stops. Next paycheck used to put the DATE in the figure
   slot and hide "+$170" in the caption, which is why that stat looked small —
   the money is the figure now and the date supports it, exactly like the other
   two. And the plan's verdict left this band entirely (section 27). */

.desktop-money-now-heading h2 {
  font: italic 600 19px/1.2 var(--serif);
  letter-spacing: -.012em;
  color: var(--ink);
}
.desktop-money-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.desktop-money-fact {
  display: block;
  text-align: left;
}
.desktop-money-fact > span,
.desktop-money-fact.safe > span {
  display: block;
  color: var(--ink3);
  font: 700 10.5px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* One size for all three. A figure that is bigger than its neighbour is making
   a claim about importance; these three are peers. */
.desktop-money-fact strong,
.desktop-money-fact.cash strong,
.desktop-money-fact.safe strong {
  display: block;
  margin-top: 3px;
  font: italic 600 29px/1.1 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink);
}

.desktop-money-fact.next strong { color: var(--green-dp); }
.desktop-money-fact small,
.desktop-money-fact.cash small {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font: 500 12px/1.4 var(--sans);
  text-decoration: none;
}
/* Cash on hand is the one editable figure, so it alone carries a link cue. */
.desktop-money-fact.cash small {
  color: var(--green-dp);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
@media (hover:hover) {
  .desktop-money-fact.cash:hover { background: transparent; }
  .desktop-money-fact.cash:hover strong { color: var(--green-dp); }
}

/* The old verdict block is now only a live region for screen readers. */
.plan-story {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ── 27. THE VERDICT, AND THE PLANNING GRID ──────────────────────────────────
   One sentence, beside the chart that draws it. When the plan is short the
   sentence is the jump — the whole thing, styled as a sentence, because a
   pill-shaped "Review shortfall" beside the pill-shaped "Prefund?" read as two
   buttons offering the same thing when only one of them changes anything.

   And the surface says which mode you are in. A future pay period used to wash
   the chart baby blue, which is a colour, not a meaning. The graph paper the
   period strip already uses for planning now runs up behind the chart and the
   crochet lane, so selecting a payday visibly moves the whole forecast onto
   planning paper. Today stays plain: today is not a projection. */

.plan-verdict {
  margin-left: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink2);
  font: 500 13px/1.4 var(--sans);
  text-align: left;
  cursor: default;
}
.plan-verdict.needs-attention {
  color: var(--rust-dp);
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(135,47,25,.35);
  text-underline-offset: 4px;
}
.plan-verdict.needs-attention::after { content: ' \2192'; }
.plan-verdict:disabled { cursor: default; }
@media (hover:hover) {
  .plan-verdict.needs-attention:hover { text-decoration-color: currentColor; }
}
/* The chart row: the name, then the verdict, then the state badge at the far
   end. Identical on both views — the horizon restatement Income & bills used
   to keep here said what the band above already says. */
#view-plan .chart-labels {  gap: 0; }


/* The forecast is drawn on graph paper — always, not only while planning ahead.
   It was introduced as a mode signal and turned out to do a better job of a
   different thing: it separates the working surface from the header band above
   it by texture rather than by tint, which is the one kind of separation that
   survives being read by a colourblind eye. Planning mode is still announced,
   by the badge at the end of the chart row and by the selected bar's ring. */
#view-plan .chart-section,
#view-plan .crochet-bar {
  background-image:
    linear-gradient(rgba(107,96,63,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,96,63,.09) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: -1px -1px;
}


/* ── 28. CONTRAST WITHOUT WEIGHT ─────────────────────────────────────────────
   Zan, on the build so far: the coloured slivers curling around the corners of
   the two ledger sheets are exactly the tell he cannot stand, and everywhere
   else surfaces were dissolving into whatever they sat on — expanded bill
   cards into their sheet, the overview band into the chart, wish cards into
   the rail. Two rules come out of that, and they run through this whole
   section:

     1. TAKE THE LANGUAGE FROM THE FORECAST PAGE. The Today card is the pattern
        that works: a lighter sheet, one hairline, one soft lift, a small
        radius, no colour. Everything below is that card at other sizes. A
        coloured edge is never the answer; it is decoration pretending to be
        information.

     2. SEPARATE BY LIGHTNESS, NEVER BY HUE. Zan is red-green colourblind and a
        page that separates by tint separates for nobody. Every step here is a
        step in luminance, so the ladder survives being read in grey.

   The ladder, darkest to lightest: page ground → ledger ground → sheet →
   raised card. Four steps, each one visible, none of them loud. */


/* ── The upper stack reads top to bottom as it gets more like work.
      Masthead is chrome, the overview is a header, the chart is the surface
      you actually use — each one a step lighter than the last, with a hairline
      where the eye needs to be told there is a seam. */
.app > .app-header { background: var(--pg-soft); box-shadow: 0 1px 0 var(--rule); }


/* ── Wish cards: lift them off the rail ──────────────────────────────────── */

.wishlist-rail { background: var(--ground); }
.wishlist-rail .wishlist-card {
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--sheet-hi);
  box-shadow: var(--lift-2);
}
.wishlist-rail .wishlist-card[data-state="forecast"] { background: var(--sheet); }
.wishlist-rail .wishlist-card[data-state="locked"] {
  background: transparent;
  box-shadow: none;
}
.wishlist-rail.has-period-match .wishlist-card:not(.is-period-match) {
  opacity: 1;
}
.wishlist-rail.has-period-match .wishlist-card.wishlist-inline-editor {
  opacity: 1;
}

.wishlist-rail .wishlist-card.is-period-match .wish-period-cue {
  display: inline-flex;
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;
  align-items: center;
  border: 1px solid rgba(103,86,34,.20);
  border-radius: 999px;
  background: rgba(103,86,34,.10);
  color: #675622;
  font: 650 10px/1 var(--sans);
  letter-spacing: .02em;
}

@keyframes wishlist-attention-pulse {
  0% { box-shadow: 0 0 0 5px rgba(103,86,34,.24), 0 10px 22px rgba(53,42,22,.14); }
  100% { box-shadow: 0 0 0 1px rgba(103,86,34,.28), 0 7px 16px rgba(53,42,22,.11); }
}
.wishlist-rail .wishlist-card.wish-attention {
  animation: wishlist-attention-pulse 1.4s ease-out both;
}

@keyframes chart-selection-arrive {
  0% { opacity: .3; transform: translateY(-3px); }
  38% { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}
.chart-selection-pointer {
  transform-box: fill-box;
  transform-origin: center;
  animation: chart-pointer-wiggle .55s ease-out;
}

.wishlist-rail-tab.has-period-match {
  box-shadow: inset 4px 0 0 #675622, 0 5px 14px rgba(42,34,24,.14);
}
@media (prefers-reduced-motion: reduce) {
  .wishlist-rail .wishlist-card.is-period-match { transform: none; }
  .wishlist-rail .wishlist-card.wish-attention,
  .chart-selection-pointer { animation: none; }
}
.wishlist-rail .wish-state { color: var(--ink2); font-weight: 650; }
.wishlist-rail .wishlist-state-section { display: grid; gap: 9px; }
.wishlist-rail .wishlist-state-title {
  margin: 2px 2px 0;
  color: var(--ink3);
  font: 650 12px/1.25 var(--sans);
  letter-spacing: .01em;
  text-transform: none;
}
.wishlist-rail .wishlist-option-head {
  align-items: end;
  padding-top: 14px;
}
.wishlist-rail .wishlist-option-head strong {
  color: var(--ink2);
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0;
}
.wishlist-rail .is-available .wishlist-option-head { display: none; }
.wishlist-rail .wishlist-option-head-side > span {
  color: var(--ink3);
  font-size: 10.5px;
  letter-spacing: .035em;
}
.wishlist-rail .wishlist-option-group.is-single .wish-date { display: grid; }
.wishlist-rail .wish-date {
  grid-template-columns: 1fr;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.wishlist-rail .wish-date-label {
  color: var(--ink3);
  font: 500 10px/1.2 var(--sans);
}
.wishlist-rail .wish-date-main {
  color: var(--ink);
  font: 650 13px/1.25 var(--sans);
}
.wishlist-rail .wish-lock {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 3px;
  border: 1px solid rgba(103,86,34,.38);
  border-radius: 5px;
  color: #675622;
  background: transparent;
}
.wishlist-rail .wish-lock svg { width: 17px; height: 17px; }
.wishlist-rail .wish-lock.is-locked {
  color: var(--ink2);
  border-color: var(--rule-2);
  background-color: rgba(255,255,255,.28);
}
@media (hover:hover) {
  .wishlist-rail .wish-lock:hover {
    color: var(--ink);
    background-color: rgba(255,255,255,.5);
    box-shadow: inset 0 0 0 1px currentColor;
  }
}
.wishlist-rail .wish-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  opacity: 1;
}
.wishlist-rail .wish-decision-actions,
.wishlist-rail .wish-maintenance-actions { display: flex; align-items: center; gap: 3px; }
.wishlist-rail .wish-maintenance-actions { justify-content: flex-end; }
.wishlist-rail .wish-action { min-height: 30px; padding: 6px; }
.wishlist-rail .wish-action.wish-commit { margin-right: 0; }


/* ── 29. ONE COMPACT MONEY MASTHEAD ──────────────────────────────────────────
   Forecast and Income & bills share one stable, single-line money band. Cash on
   hand stays because it seeds every projection; the other conclusions live in
   the forecast itself. Keeping the same compact masthead on both views gives the
   graph and working area the room instead of spending it on repeated numbers. */


/* Flex, not the three-row grid above: with one line of content the grid's row
   placement had nothing to place and the cash figure spilled past both edges
   of the band. */
.view-stack > .desktop-money-now {
  display: flex;
  height: var(--money-band-h);
  min-height: var(--money-band-h);
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  overflow: hidden;
}
.desktop-money-now-heading,
.desktop-money-fact.safe,
.desktop-money-fact.next { display: none; }
.desktop-money-facts {
  display: flex;
  margin: 0;
  min-width: 0;
}
.desktop-money-fact.cash {
  display: flex;
     /* the stacked-fact rule above would otherwise win */
  padding: 0;
}
.desktop-money-fact.cash small { margin-top: 0; }


/* ── 30. SPENDING TODAY IS NOT SETTING MONEY ASIDE ───────────────────────────
   Same button, two different acts, and until now they looked identical.
   Spending today takes money out of your hand this minute; putting money aside
   holds it back so it is there on a payday you have not reached yet. They now
   differ in three ways at once — word, glyph and colour — so no single one of
   them has to carry it, and green-vs-indigo stays legible to a red-green
   colourblind reader in a way green-vs-rust would not. */

#view-plan .summary-actions .desktop-period-spend.spend {
  background-color: #43688f;
}
@media (hover:hover) {
  #view-plan .summary-actions .desktop-period-spend.spend:hover:not(:disabled) {
    background-color: #4d7399;
    color: var(--ink-inv);
  }
}


/* ── 31. GETTING BACK TO TODAY ───────────────────────────────────────────────
   Zan kept missing the return-to-Today control: an earlier pass had stripped it
   to two grey glyphs on a grey strip, so the one button that always takes you
   home looked like a caption. It is a button again — the same soft blue this
   app has always used for "now", which is also safe to read as distinct from
   the green money and the rust shortfalls without depending on hue alone,
   since it is the only filled control on that strip.

   It works with the chart, not instead of it: Today's bar is drawn in solid
   ink against the lighter forecast bars and its axis label is the heaviest on
   the strip, so home base is findable in two places at once. */

#view-plan .today-peek-tab {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 14px 0 10px;
  gap: 6px;
  justify-content: center;
  border: 1px solid rgba(42,90,150,.32);
  border-radius: 999px;
  background: var(--today-return-blue);
  color: #235273;
  box-shadow: 0 1px 2px rgba(35,82,115,.14);
}
#view-plan .today-peek-tab > span { font: 600 17px/1 var(--sans); transform: none; }
#view-plan .today-peek-tab > strong { font: 700 12px/1 var(--sans); letter-spacing: .01em; }
@media (hover:hover) {
  #view-plan .today-peek-tab:hover { background: #cfe3f2; border-color: rgba(42,90,150,.46); color: #1c4462; }
}


/* Today's control sits on the forecast plate now (moved there in renderPages),
   so it lines up with the chart row rather than the period strip. */

#view-plan .chart-labels .today-peek-tab[hidden] { display: none; }


/* ── 32. ONE SURFACE, NO SEAM, NOTHING MOVING ────────────────────────────────
   Zan reading the page cold: too many things announce themselves, too many of
   them move, and half of them are named in language a ten-year-old saving for a
   baseball glove would not use. Four decisions here, and they all pull the same
   way — take things out.

   THE HEADING GOES. "Cash flow forecast" is what this is called in a finance
   textbook, not what it is. It is a picture of your money over the next few
   paydays, and the picture says that by itself. "Choose a payday to see its
   bills" goes with it: the bars are obviously pressable, they highlight under
   the pointer, and a permanent instruction is a permanent admission that the
   thing is not obvious.

   THE SEAM GOES. The band and the plate were two different papers with a rule
   between them. Now they are the same paper and the graph paper is the only
   thing that changes — drawn as an overlay that fades out at both ends, so the
   grid feathers into the band above and the crochet lane below instead of
   stopping at a line. Separation you can see without being able to see colour.

   THE COLOUR CHANGES GO. The plate is one tone in every state: today, a future
   payday, a shortfall, a spend preview. Stepping between periods changes the
   bars and nothing else. */

.view-stack > .desktop-money-now {
  background: #ebe4d5;
  border-bottom: 0;
}
#view-plan .chart-section,
#view-plan .chart-section.od-tint {
  position: relative;
  background-color: #ebe4d5;
  background-image: none;
  border-bottom: 0;
}
/* The grid as a feathered overlay rather than a tiled background: it has to
   fade at both ends, which a background-image cannot do. */
#view-plan .chart-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(107,96,63,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,96,63,.10) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  pointer-events: none;
}
#view-plan .chart-labels,
#view-plan #sch-chart { position: relative; z-index: 1; }

/* The crochet lane is its own reading — arcs of rescheduled bills — and putting
   it on the same grid made it look like part of the plot. Same paper, no grid,
   no rule above it. */
#view-plan .crochet-bar {
  background-color: #ebe4d5;
  background-image: none;
  border-top: 0;
}


/* ── The chart's own row: what is wrong, how to get home, what state we are in */

#view-plan .chart-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 38px;
  padding: 0 0 2px;
}
#view-plan .plan-verdict { grid-column: 1; justify-self: start; margin-left: 0; }
#view-plan .chart-labels .today-peek-tab { grid-column: 2; justify-self: center; margin-left: 0; }
#view-plan .chart-actions { grid-column: 3; justify-self: end; margin-left: 0; }

/* Read top to bottom: forecast, crochet diagram, then the period it covers. */
#view-plan > #desktop-plan-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: var(--drawer-space);
  padding: 0 30px;
  background-color: #ebe4d5;
}
#desktop-plan-tools .hrz-left { padding: 0; background: transparent; }

/* Today's placeholder paycheck line holds the card's height without pretending
   there is money in it. */
#view-plan .desktop-period-stat.pay.is-empty strong { color: var(--ink3); font-weight: 500; }
#view-plan .desktop-period-stat.pay.is-empty span { color: var(--ink3); }

/* The period row no longer consumes plot space, so restore the chart heights
   that preserve the original bar and axis geometry. */
#view-plan .chart-section { height: 196px; flex: 0 0 196px; flex-basis: 196px; }
@media (max-height: 900px) {
  #view-plan .chart-section { height: 178px; flex: 0 0 178px; flex-basis: 178px; }
}
@media (min-height: 1080px) {
  #view-plan .chart-section { height: 250px; flex: 0 0 250px; flex-basis: 250px; }
}


/* ── 33. COMPACT BILLS AND CASH CONSEQUENCE ─────────────────────────────────
   A ledger should show a run of obligations, not spend a card on every line.
   Hidden timing actions leave no empty row behind; the focused bill expands
   just enough to expose its mouse-sized controls. The shortfall is caused by
   the cash position, so it sits beside that figure as subordinate live text. */


.desktop-cash-shortfall {
  text-underline-offset: 3px;
}
.desktop-cash-shortfall::after { content: ' \2192'; }
.desktop-cash-shortfall[hidden] { display: none; }
#view-plan .chart-labels > .plan-verdict { display: none !important; }
@media (hover:hover) {
  .desktop-cash-shortfall:hover { text-decoration-color: currentColor; }
}


/* ── 35. ONE DESKTOP, ONE PALETTE ───────────────────────────────────────────
   Forecast is the source of truth. Income & Bills uses the same gray-paper
   family instead of a tan ground with white cards. Forecast bill rows keep one
   compact geometry and expose their familiar check / move controls at rest;
   focus changes emphasis, never height. */

:root {
  --ground:   var(--paper);
  --sheet:    var(--pg-soft);
  --sheet-hi: var(--paper-hi);
}


#view-plan .rollup-tab {
  min-height: 46px;
  padding: 6px 16px;
}
#view-plan .rollup-wrap + .rollup-wrap { margin-top: 4px; }
#view-plan .rollup-body .bcard {
  margin: 0;
  gap: 2px 12px;
}
#view-plan .transport {
  pointer-events: auto;
}
#view-plan .tr-btn {
  padding: 0;
}
#view-plan .tr-label { display: none; }
#view-plan .tr-symbol { display: inline-flex; }
#view-plan .tr-btn.back::before,
#view-plan .tr-btn.fwd::after,
#view-plan .tr-btn.pay::before { content: none; }

.desktop-cash-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.desktop-cash-shortfall {
  margin: 5px 0 0;
  padding: 0;
  color: var(--ink3);
  font: 500 12px/1.5 var(--sans);
  opacity: 1;
  text-decoration: none;
}
.desktop-cash-shortfall::after { content: none; }

#view-plan .crochet-bar {
  height: 28px;
  flex: 0 0 28px;
  flex-basis: 28px;
}
#view-plan #croch-svg { height: 28px; }
#view-plan > #desktop-plan-tools {
  height: 26px;
  flex: 0 0 26px;
  padding-inline: 26px;
}
#desktop-plan-tools .hrz-pill,
#desktop-plan-tools .hrz-mode-chip {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 10.5px;
}

/* A handwritten heading and a soft paper lift belong to the same desk as the chart. */
#view-plan .desktop-period-date { font: 500 25px/1.25 var(--serif); letter-spacing: 0; }
#view-plan .desktop-period-head { box-shadow: var(--ledger-card-lift); }
#view-plan .summary-actions { padding-top: 10px; }
#view-plan .summary-actions .desktop-period-spend { min-height: 44px; }
#view-plan .summary-actions .period-quick-link { min-height: 36px; }
#view-plan .summary-actions .period-quick-form {
  grid-template-columns: minmax(90px,1fr) 76px 54px 32px;
  gap: 6px;
}
#view-plan .summary-actions .period-quick-input {
  grid-column: auto;
  height: 34px;
  font-size: 12px;
}
#view-plan .summary-actions .period-quick-save { min-height: 34px; height: 34px; padding-inline: 8px; }
#view-plan .summary-actions .period-quick-cancel { width: 32px; height: 34px; }


/* ── 36. QUIET STITCHES, FORECAST-LED SCHEDULE ────────────────────────────
   Paychecks are a short stack of tangible cash cards; bills are the longer
   ruled ledger. Forecast instances use the same hierarchy and lighter glyphs. */

/* Forecast bills: one calm reading line plus a quiet consequence line. */
#view-plan .rollup-body .bcard {
  grid-template-columns: minmax(0, 1fr) auto 64px;
  grid-template-rows: 1fr 1fr;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 4px 8px 4px 14px;
  column-gap: 16px;
}
#view-plan .bcard-name {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  color: var(--ink);
  font: 650 15px/1.3 var(--sans);
  letter-spacing: 0;
}
#view-plan .bcard-amt {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  text-align: right;
  color: var(--ink);
  font: italic 550 17px/1.1 var(--serif);
  letter-spacing: -.01em;
}
#view-plan .bcard-meta {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  color: var(--ink2);
  font: 550 11.5px/1.3 var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-plan .ghost-hop,
#view-plan .bcard-shift-status {
  color: #315f82;
  font: 700 11px/1.2 var(--sans);
  letter-spacing: .005em;
  white-space: nowrap;
}
#view-plan .bcard-shift-status { margin-left: 10px; }
#view-plan .transport {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  gap: 2px;
  opacity: 1;
}
#view-plan .tr-btn {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  color: var(--ink2);
  font-weight: 650;
}
#view-plan .tr-btn[disabled] { opacity: .36; }
/* Use the same solid ◀ ✓ ▶ glyphs the phone uses. This previously set
   font-size:0 to hide them and substituted hairline ← → arrows, which were
   hard to pick out against the row at 30px. The filled triangles read at a
   glance and keep one prepone/postpone vocabulary across both layouts. */
#view-plan .tr-btn .tr-symbol {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1;
  font-weight: 650;
}
#view-plan .tr-btn.pay .tr-symbol { font-size: 15px; }
#view-plan .tr-count {
  color: var(--ink3);
  font: 700 9px/1 var(--sans);
  letter-spacing: 0;
}
#view-plan .tr-btn.latched {
  color: #274f6b;
  background: rgba(49,94,119,.14);
}

/* Plan workspace — the sole desktop Schedule layer. */
/* Shoestring desktop Schedule
   One authoritative visual layer for Income & Bills. The DOM and behavior are
   shared with mobile; this file owns only the desktop working surface. */

:root {
  /* Forecast owns the desktop palette. Schedule names describe roles only;
     every value resolves to the exact paper, ink and action colors next door. */
  --schedule-ink: var(--ink);
  --schedule-muted: var(--ink3);
  --schedule-rule: var(--rule);
  --schedule-hover: rgba(60,60,60,.035);
  --schedule-focus: var(--indigo);
  --schedule-green: var(--green-dp);
  --schedule-chrome: var(--paper);
  --schedule-row-rule: rgba(74,58,38,.17);
  /* A whole card carries its category; fields remain clear paper. */
  --paycheck-wash: #e2e8df;
  --paycheck-accent: #456653;
  --bill-wash: #e0e5e8;
  --bill-accent: #4e6472;
  --goal-accent: #776630;
  --debt-accent: var(--rust-dp);
  --reserve-accent: #436667;
}

#view-schedule .inc-scroll {
  min-height: 0;
}


/* Every view stops at the same Wishlist edge. This remains true with the rail
   open or collapsed, so the chart, period strip and workspace never jump. */
#view-plan .chart-section,
#view-plan .crochet-bar,
#view-plan .pnav-bar,
#view-plan .cards-area,
#view-schedule .chart-section,
#view-schedule .crochet-bar,
#view-schedule .pnav-bar,
#view-schedule .inc-scroll {
  margin-right: var(--drawer-space);
}

#view-plan .chart-section,
#view-schedule .chart-section {
  position: relative;
  height: 196px;
  flex: 0 0 196px;
  padding: 4px 28px;
  background-color: #ebe4d5;
  background-image: none;
  border: 0;
}

/* One physical forecast component moves between Plan and Forecast. Styling
   the shared plate by its own identity keeps it invariant in either host. */
#chart-section-plan,
#chart-section-plan.od-tint {
  position: relative;
  background-color: #ebe4d5;
  background-image: none;
  border: 0;
}
#plan-preview-today { display: none; }
#chart-section-plan::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(107,96,63,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,96,63,.10) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  pointer-events: none;
}
#chart-section-plan .chart-horizon-summary,
#chart-section-plan .chart-labels > .plan-verdict { display: none !important; }
#chart-section-plan .chart-labels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0;
  padding: 0 0 2px;
}
#chart-section-plan .desktop-chart-heading {
  opacity: 1;
  cursor: default;
  justify-self: start;
  text-align: left;
  padding: 0;
  display: block;
  grid-column: 1;
  font: 600 16px/1.2 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
#chart-section-plan .chart-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
}
#chart-section-plan #ah-mid-icon {
  display: flex;
  width: 28px;
  height: 20px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
}
#chart-section-plan .chart-labels .today-peek-tab {
  grid-column: 2;
  justify-self: center;
  margin-left: 0;
}
#chart-section-plan .chart-actions {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}
#chart-section-plan #sch-chart {
  position: relative;
  z-index: 1;
}
#chart-section-plan #sch-chart text[font-size="7.5"] { font-size: 11px; fill: #5d5340; font-weight: 600; }
#chart-section-plan #sch-chart text[font-size="7"] { font-size: 9.5px; letter-spacing: .1em; }
#chart-section-plan #sch-chart text[font-size="8"] { font-size: 12px; }
#croch-svg text {  fill: #7a5548; }
#view-schedule .chart-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(107,96,63,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,96,63,.10) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  pointer-events: none;
}
#view-schedule .chart-labels { position: relative; z-index: 1; }
#view-plan #sch-chart,
#view-schedule #sch-chart { height: 142px; }
#view-plan .crochet-bar,
#view-schedule .crochet-bar {
  height: 28px;
  flex: 0 0 28px;
  background-color: #ebe4d5;
  background-image: none;
  border: 0;
}
#view-plan .pnav-bar,
#view-schedule .pnav-bar {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  background-color: var(--pg-soft);
  background-image:
    linear-gradient(rgba(107,96,63,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,96,63,.055) 1px, transparent 1px);
  background-size: 12px 12px;
  border-block: 1px solid var(--rule);
}
#view-plan > #desktop-plan-tools,
#view-schedule > #desktop-plan-tools {
  display: flex;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  padding: 0 26px;
  background-color: #ebe4d5;
}

/* The final shared workspace rule below owns column geometry. */
#view-schedule .inc-scroll {
  display: grid;
}

/* Forecast and Schedule share one period strip. The master switch must fit
   inside it instead of making only this view four pixels taller. */
#view-schedule .pnav-bar {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 20px 0 28px;
}
#view-schedule .pnav-row {
  width: 100%;
  height: 40px;
  padding: 0;
}
#view-schedule .pnav-row > span[aria-hidden="true"] {
  width: 34px !important;
  height: 34px !important;
}

#view-schedule .pnav-ledger { display: none; }
#view-schedule .pnav-name {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
#view-schedule .pnav-master-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
}

/* Center an empty period within the bills column beside the summary card. */
#view-plan .sw-content > .empty-pg {
  width: 100%;
  margin: 0;
  padding-left: 0;
  align-items: center;
  text-align: center;
}

#view-schedule #hdr-inc,
#view-schedule #hdr-bill {
  position: static;
  height: 46px;
  padding: 0 2px 10px;
  border: 0;
  border-bottom: 1px solid var(--schedule-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
}
#view-schedule #hdr-inc { grid-column: 1; grid-row: 1; }
#view-schedule #hdr-bill { grid-column: 2; grid-row: 1; }
#view-schedule .inc-chev { display: none; }
#view-schedule .inc-section-title {
  color: var(--schedule-ink) !important;
  font: 500 22px/1.25 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
#view-schedule .inc-section-count {
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--schedule-muted);
  font: 500 11px/1 var(--sans);
}
#view-schedule #hdr-inc .inc-section-count {
  background-color: var(--paycheck-wash);
  color: var(--paycheck-accent);
}
#view-schedule #hdr-bill .inc-section-count {
  background-color: var(--bill-wash);
  color: var(--bill-accent);
}

#view-schedule .hdr-add-btn,
#view-schedule .hdr-compact-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--schedule-ink) !important;
  box-shadow: none;
}
#view-schedule .hdr-compact-btn .compact-mark-expand { display: none; }
#view-schedule .hdr-compact-btn.on .compact-mark-collapse { display: none; }
#view-schedule .hdr-compact-btn.on .compact-mark-expand { display: inline; }

/* Forecast's Bills due list is open on the workspace. These are two ledger
   columns, not beige panels sitting on top of it. */
#view-schedule #body-inc,
#view-schedule #body-bill {
  grid-row: 2;
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#view-schedule #body-inc { grid-column: 1; }
#view-schedule #body-bill { grid-column: 2; }
#view-schedule #inc-list,
#view-schedule #bill-edit-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  background: transparent;
}

/* Every collapsed item is a ruled ledger line. Paychecks and bills differ by
   content and money color, never by a separate container style. */
#view-schedule .inc-card,
#view-schedule .paycheck-card.is-collapsed,
#view-schedule .bill-card.is-collapsed {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto 30px;
  align-items: center;
  gap: 1px 10px;
  min-height: 52px;
  margin: 0;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--schedule-rule);
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .1s ease;
}
#view-schedule .inc-card:last-child { border-bottom: 0; }
#view-schedule .inc-card::after { display: none; }
#view-schedule .inc-card.is-collapsed .inc-card-header,
#view-schedule .inc-card.is-collapsed .inc-compact-sub,
#view-schedule .inc-name-wrap { display: contents; }
#view-schedule .inc-card.is-collapsed .schedule-document-kind { display: none; }
#view-schedule .inc-name { grid-column: 2; grid-row: 1; }

#view-schedule .inc-card.is-collapsed .cs-sep { display: none; }

#view-schedule .inc-card.is-collapsed .inc-card-header > .schedule-date-field {
  display: flex;
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end;
}
#view-schedule .inc-card.is-collapsed > .card-foot {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  min-width: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: .5;
}
#view-schedule .inc-card.is-collapsed .cat-lbl,
#view-schedule .inc-card.is-collapsed .inc-compact-del { display: none; }

#view-schedule .inc-name,
#view-schedule .inc-card.is-collapsed .inc-name {
  width: 100%;
  min-width: 0;
  padding: 1px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--schedule-ink);
  font: 550 14px/1.2 var(--sans);
  letter-spacing: 0;
  text-overflow: ellipsis;
}
#view-schedule .inc-name:focus {
  border-bottom-color: var(--schedule-focus);
  outline: 0;
}
#view-schedule .inc-card.is-collapsed .cs-freq,
#view-schedule .inc-card.is-collapsed .date-btn-txt {
  color: var(--schedule-muted);
  font: 450 10.5px/1.25 var(--sans);
  letter-spacing: 0;
}
#view-schedule .inc-card.is-collapsed .cs-amt {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}
#view-schedule .paycheck-card.is-collapsed .cs-amt { color: var(--paycheck-accent); }
#view-schedule .bill-card.is-collapsed .cs-amt { color: var(--bill-accent); }
#view-schedule .plan-bills .bill-card.is-collapsed { border-bottom-color: var(--schedule-row-rule); }
#view-schedule .bill-card.is-goal.is-collapsed .cs-amt { color: var(--goal-accent); }
#view-schedule .bill-card.is-debt.is-collapsed .cs-amt { color: var(--debt-accent); }
#view-schedule .bill-card.is-reserve.is-collapsed .cs-amt { color: var(--reserve-accent); }
#view-schedule .bill-card.is-goal,
#view-schedule .bill-card.is-debt { box-shadow: none; }


#view-schedule .paycheck-card .schedule-document-kind { color: var(--paycheck-accent); }
#view-schedule .bill-card .schedule-document-kind { color: var(--bill-accent); }
#view-schedule .bill-card.is-goal .schedule-document-kind { color: var(--goal-accent); }
#view-schedule .bill-card.is-debt .schedule-document-kind { color: var(--debt-accent); }
#view-schedule .bill-card.is-reserve .schedule-document-kind { color: var(--reserve-accent); }
#view-schedule button.schedule-kind-collapse { cursor: pointer; }
#view-schedule button.schedule-kind-collapse:focus-visible {
  outline: 1px solid var(--schedule-focus);
  outline-offset: 2px;
}
@media (hover:hover) {
  #view-schedule button.schedule-kind-collapse:hover { background-color: var(--schedule-hover); }
}
#view-schedule .inc-card.is-collapsed .schedule-name-edit { display: none; }
/* Date shares the Amount / Target caption so every field names itself alike. */
#view-schedule .schedule-field-label {
  color: var(--schedule-muted);
  font: 500 10.5px/1.3 var(--sans);
  letter-spacing: 0;
}

/* The same quiet focus rectangle as a selected bill instance on Forecast. */
#view-schedule .inc-card:is(.sc-active,.sc-flash,.sc-selected,:focus-within) {
  border-radius: 5px;
}
@keyframes schedule-landing-pulse {
  0% { background-color: rgba(71,112,137,.18); }
  100% { background-color: var(--row-focus-paper); }
}
#view-schedule .inc-card.sc-flash {
  animation: schedule-landing-pulse 1.6s ease-out both;
}

/* Controls are ledger marks, not phone tiles. Their text and underline carry
   the state; the click target no longer has to masquerade as a block. */
#view-schedule .card-collapse-btn,
#view-schedule .date-btn,
#view-schedule .bill-freq-btn,
#view-schedule .bill-type-btn,
#view-schedule .card-active-toggle,
#view-schedule .bill-perish-check,
#view-schedule .inc-del {
  min-height: 26px;
  border-radius: 0;
  color: var(--schedule-muted);
  box-shadow: none;
}
#view-schedule .date-btn {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}
#view-schedule .inc-stepper,
#view-schedule .inc-off-stepper {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--schedule-rule);
  background: transparent;
  font: 500 13px/1 var(--sans);
}
#view-schedule .bill-freq-group,
#view-schedule .bill-type-toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
}
#view-schedule .bill-type-toggle::after { display: none; }
#view-schedule .bill-freq-btn,
#view-schedule .bill-type-btn {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-weight: 500;
}
#view-schedule .bill-freq-btn.on,
#view-schedule .bill-type-btn.on {
  border-bottom-color: var(--schedule-green);
  background: transparent;
  color: var(--schedule-ink);
  font-weight: 600;
}

#view-schedule .bill-type-btn[data-type="bill"].on {
  border-bottom-color: var(--bill-accent);
  background-color: transparent;
  color: var(--bill-accent);
}


@media (hover:hover) {
  #view-schedule .inc-card.is-collapsed:hover { background-color: var(--schedule-hover); }
  #view-schedule .inc-card:is(.sc-active,.sc-flash,.sc-selected,:focus-within):hover { filter: brightness(.985); }
  #view-schedule .hdr-add-btn:hover,
  #view-schedule .hdr-compact-btn:hover,
  #view-schedule .card-collapse-btn:hover,
  #view-schedule .date-btn:hover { background-color: var(--schedule-hover); }
  #view-schedule #sch-pnav-datejump:hover {
    border-radius: 4px;
    background: rgba(255,255,255,.34);
  }
}


/* Forecast rollups and collapsed Plan entries are the same ledger disclosure.
   Their contents differ only after opening: instances on Forecast, the editor
   on Plan. Keeping this visual primitive shared prevents a page switch from
   teaching the user a second row language. */
:is(#view-plan .rollup-tab, #view-schedule .inc-card.is-collapsed) {
  min-height: 46px;
  margin: 0;
  padding: 6px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
#view-schedule .inc-card.is-collapsed {
  align-items: center;
}

#view-schedule .inc-card.is-collapsed .inc-card-header,
#view-schedule .inc-card.is-collapsed .inc-name-wrap,
#view-schedule .inc-card.is-collapsed .inc-compact-sub { display: contents; }
#view-schedule .inc-card.is-collapsed .inc-name {
  padding: 0;
  color: var(--ink);
  font: 600 14px/1.3 var(--sans);
}
#view-schedule .inc-card.is-collapsed .card-collapse-btn {
  width: 20px;
  height: 24px;
  margin: 0;
  color: var(--ink2);
  opacity: 1;
}
#view-schedule .inc-card.is-collapsed .card-collapse-btn svg { width: 13px; height: 13px; }
#view-schedule .inc-card.is-collapsed .cs-amt {
  justify-self: end;
  padding: 0;
  color: var(--ink2) !important;
}
#view-schedule .inc-card.is-collapsed .cs-freq,
#view-schedule .inc-card.is-collapsed .cs-sep,
#view-schedule .inc-card.is-collapsed .inc-card-header > .schedule-date-field,
#view-schedule .inc-card.is-collapsed > .card-foot { display: none; }
#view-schedule .inc-card.is-collapsed:is(.sc-active,.sc-flash,.sc-selected,:focus-within) {
  border-radius: 5px;
  background: var(--row-focus-paper);
}

@media (prefers-reduced-motion: reduce) {
  #view-schedule .inc-card { transition: none; }
  #view-schedule .inc-card.sc-flash {
    animation: none;
    background-color: rgba(71,112,137,.15);
  }
}

/* Forecast and Plan workspace parity
   Below the shared date rail, both pages use the same composition: one lifted
   money card on the left and one independently scrolling ledger on the right. */
#view-plan .sw-page,
#view-schedule .inc-scroll {
  grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  gap: 0 34px;
  padding: 14px 32px;
}
#view-schedule .inc-scroll {
  grid-template-rows: minmax(0,1fr);
  /* The shared rule above owns both workspaces' column geometry. */
  align-items: start;
  overflow: hidden;
  background: var(--schedule-chrome);
}
#view-schedule .plan-pane {
  min-width: 0;
  min-height: 0;
  container: ledger / inline-size;
}
#view-schedule .plan-paychecks {
  grid-column: 1;
  grid-row: 1;
  overflow: visible;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper-hi);
  box-shadow: var(--ledger-card-lift);
}
#view-schedule .plan-bills {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px 0 14px;
  border-top: 0;
  background: transparent;
}
#view-schedule #hdr-inc,
#view-schedule #hdr-bill,
#view-schedule #body-inc,
#view-schedule #body-bill {
  grid-column: auto;
  grid-row: auto;
}
#view-schedule #hdr-inc {
  height: auto;
  min-height: 38px;
}
#view-schedule #body-inc {
  overflow: visible;
}
#view-schedule #body-bill {
  flex: 1 1 auto;
  overflow-y: auto;
}
#view-schedule .plan-paychecks .inc-card {
  padding-inline: 0;
}
#view-schedule .plan-paychecks .inc-card.is-collapsed {
  background: transparent;
}
#view-schedule .plan-bills #hdr-bill {
  flex: 0 0 38px;
  padding: 0 2px 8px;
}

@media (max-height: 900px) {
  #view-plan .chart-section,
  #view-schedule .chart-section { height: 178px; flex-basis: 178px; }
}

@media (min-height: 1080px) {
  #view-plan .chart-section,
  #view-schedule .chart-section { height: 250px; flex-basis: 250px; }
}

/* Masthead answer hierarchy
   Cash on hand opens the ledger at the left reading edge. Safe to Spend is
   the plan's answer and closes the band at the right. */
.desktop-money-facts {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  justify-content: space-between;
}


.desktop-money-fact.cash {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.desktop-money-fact.cash > span {
  color: var(--ink3);
  font: 700 10.5px/1.1 var(--sans);
  letter-spacing: .02em;
  text-transform: none;
}
.desktop-money-fact.cash strong {
  margin: 0;
  font-size: 27px;
  line-height: 1;
}
.desktop-cash-shortfall {
  margin-top: 6px;
  align-self: flex-start;
  text-align: left;
  white-space: normal;
  max-width: 42ch;
  font-size: 11px;
  line-height: 1.35;
}

/* Plan upper-control parity
   The horizon, empty crochet annotation, and selected-date rail share the same
   readable center line and stop at the same Wishlist edge as Forecast. */
#view-plan > #desktop-plan-tools,
#view-schedule > #desktop-plan-tools {
  width: auto;
  margin-right: var(--drawer-space);
  padding-inline: 28px;
  box-sizing: border-box;
  justify-content: flex-start;
}
#view-schedule .pnav-center {
  justify-content: center;
  gap: 8px;
  padding: 0;
}
#view-schedule #sch-pnav-datejump {
  display: inline-flex;
  width: 32px;
  min-width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green-dp);
  box-shadow: none;
}
#view-schedule #sch-pnav-datejump svg {
  width: 17px;
  height: 17px;
}
#view-schedule .pnav-name {
  color: var(--ink2);
  font: 700 14px/1 var(--sans);
}


/* Shared Forecast and Plan chrome
   The cash-flow plate moves between views, while each view keeps its own date
   rail. These identity-based rules are deliberately last so changing pages
   cannot change type, color, or which money facts are visible. */
.desktop-money-facts {
  gap: 32px;
}
.desktop-money-fact.safe {
  display: none;
  min-height: 0;
  padding: 0;
  flex-direction: column;
  gap: 2px;
  border: 0;
  background: transparent;
}
.desktop-money-fact.safe > span {
  color: var(--ink3);
  font: 600 11px/1.15 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.desktop-money-fact.safe strong {
  margin: 0;
  color: var(--green-dp);
  font: italic 600 28px/1 var(--serif);
  font-variant-numeric: tabular-nums;
}
.desktop-money-fact.safe small { display: none; }

:is(#view-plan, #view-schedule) .pnav-center {
  justify-content: center;
  gap: 8px;
  padding: 0;
}
:is(#view-plan, #view-schedule) :is(#pnav-datejump, #sch-pnav-datejump) {
  display: inline-flex;
  width: 32px;
  min-width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink2);
  box-shadow: none;
}
:is(#view-plan, #view-schedule) :is(#pnav-datejump, #sch-pnav-datejump) svg {
  width: 17px;
  height: 17px;
}
:is(#view-plan, #view-schedule) .pnav-name {
  color: var(--ink2);
  font: 700 15px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
:is(#view-plan, #view-schedule) .pnav-name.is-skippable {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
:is(#view-plan, #view-schedule) .pnav-name.is-skippable:focus-visible {
  outline: 2px solid var(--row-focus);
  outline-offset: 1px;
}
@media (hover:hover) {
  :is(#view-plan, #view-schedule) .pnav-name.is-skippable:hover {
    background: rgba(105,152,191,.10);
  }
}
#view-plan .pname-date,
#view-schedule .pname-date {
  color: var(--ink2);
}
:is(#view-plan, #view-schedule) .crochet-bar {
  height: 28px;
  flex: 0 0 28px;
}
:is(#view-plan, #view-schedule) #croch-svg {
  height: 28px;
}
#chart-section-plan .chart-title {
  color: var(--ink);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
#croch-svg text {
  font-family: var(--sans);
}
#croch-svg .crochet-hop-label {
  font-size: 12px;
  font-weight: 600;
}
#croch-svg .crochet-edge-note {
  font-size: 10px;
  font-weight: 600;
}
#croch-svg .crochet-empty-note {
  font-size: 12px;
  font-weight: 550;
}

/* Woven period rail above the paper workspace, shared by both views. */
:is(#view-plan, #view-schedule) .pnav-bar {
  position: relative;
  z-index: 6;
  background-image: var(--cloth-weave);
  background-size: auto;
  box-shadow: 0 2px 3px rgba(43,36,26,.12), 0 7px 10px -4px rgba(43,36,26,.16);
}

/* Desktop Plan polish sweep
   The Plan editor is the Forecast ledger in edit mode. These final rules own
   its row density and narrow paycheck composition so older mobile-oriented
   declarations cannot add phantom rows or squeeze the form into two slivers. */
#view-schedule .inc-card.is-collapsed {
  height: 42px;
  min-height: 42px;
  grid-template-columns: minmax(0,1fr) 132px 124px 30px;
  grid-template-rows: 1fr;
  gap: 8px;
  padding: 4px 12px;
}
#view-schedule .inc-card.is-collapsed + .inc-card.is-collapsed { margin-top: 0; }
#view-schedule .inc-card.is-collapsed .inc-name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-weight: 600;
}
#view-schedule .inc-card.is-collapsed .cs-cadence-toggle {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#view-schedule .inc-card.is-collapsed .cs-freq {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink3);
  font: 500 11px/1.2 var(--sans);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-schedule .inc-card.is-collapsed .compact-active-toggle {
  display: flex;
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  min-height: 26px;
  padding: 0;
  transform: translateX(12px);
}
#view-schedule .inc-card.is-collapsed .compact-active-toggle .cat-lbl { display: none; }
#view-schedule .inc-card.is-collapsed .card-collapse-btn { display: none; }
#view-schedule .inc-card.is-collapsed .cs-amt {
  grid-column: 3;
  grid-row: 1;
  width: 124px;
  text-align: right;
  font: 600 15px/1.3 var(--serif);
}
#view-schedule .inc-card.is-collapsed .cs-amt-input {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 112px;
  max-width: 100%;
  padding: 2px 1px;
  border-bottom-color: var(--schedule-focus);
  color: var(--ink);
  font: 600 15px/1.3 var(--serif);
  text-align: right;
}
#view-schedule .inc-card.is-collapsed .schedule-date-field { display: none; }

#view-schedule .inc-section-copy {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px;
}
#view-schedule .inc-section-heading { gap: 7px; }
#view-schedule .inc-section-actions {
  flex: 0 0 auto;
  gap: 2px;
}
#view-schedule .inc-section-sub {
  display: block;
  color: var(--schedule-muted);
  font: 600 12px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 1550px) {
  #view-schedule .inc-section-copy { grid-template-columns: 1fr; gap: 4px; }
  #view-schedule .inc-section-sub { font-size: 12px; text-align: left; }
  #view-schedule #hdr-inc, #view-schedule .plan-bills #hdr-bill { height: 64px; min-height: 64px; flex-basis: 64px; }
}
#view-schedule #hdr-inc,
#view-schedule #hdr-bill {
  align-items: center;
  min-height: 48px;
}
#view-schedule .plan-bills #hdr-bill {
  flex-basis: 48px;
  height: 48px;
  min-height: 48px;
}


/* A narrow ledger stacks each row's cadence under its name, beside the amount. */
@container ledger (max-width: 480px) {
  #view-schedule .inc-card.is-collapsed {
    height: 40px;
    min-height: 40px;
    grid-template-columns: minmax(0,1fr) 86px 30px;
    grid-template-rows: auto auto;
    gap: 2px 6px;
    padding-inline: 10px;
  }
  #view-schedule .inc-card.is-collapsed .compact-active-toggle { grid-column: 3; grid-row: 1 / 3; }
  #view-schedule .inc-card.is-collapsed .inc-name { grid-column: 1; grid-row: 1; }
  #view-schedule .inc-card.is-collapsed .cs-cadence-toggle {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    justify-self: stretch;
  }
  #view-schedule .inc-card.is-collapsed .cs-freq {
    text-align: right;
  }
  #view-schedule .inc-card.is-collapsed :is(.cs-amt,.cs-amt-input) {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 86px;
  }
}


/* Independent Plan column scrolling
   Keep both ledger headings anchored while their natural-height documents scroll.
   The workspace itself is height-constrained, so neither column may leak below it. */
#view-schedule .plan-paychecks,
#view-schedule .plan-bills {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#view-schedule .plan-paychecks {
  align-self: start;
  max-height: 100%;
}
#view-schedule #hdr-inc,
#view-schedule #hdr-bill {
  flex: 0 0 auto;
}
#view-schedule #body-inc,
#view-schedule #body-bill {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#view-schedule #body-inc {
  align-self: stretch;
  /* Let the 12px scrollbar and 4px clearance occupy the outer gutter. */
  margin-right: -16px;
  padding-right: 4px;
}
#view-schedule .inc-card.is-collapsed .inc-name {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

/* Shared moving-plate geometry
   The physical forecast plate moves between Forecast and Plan. Its internal
   flex layout therefore belongs to the plate ID, never to whichever view happens
   to contain it; otherwise the SVG alternates between flex sizing and block sizing. */
#chart-section-plan {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#chart-section-plan .chart-labels {
  flex: 0 0 38px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
}
#chart-section-plan #sch-chart {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
}
#chart-section-plan #sch-chart:focus,
#chart-section-plan #sch-chart:focus-visible {
  outline: 0;
}

/* Stable desktop forecast stage
   The SVG remains mounted here while the lower ledger switches between
   Forecast and Plan. This avoids a blank compositor frame during reparenting. */
.app {
  --desktop-chart-h: 196px;
  --desktop-chart-grip-h: 12px;
  --desktop-horizon-h: 32px;
  --desktop-forecast-stage-h: calc(var(--desktop-chart-h) + 28px + var(--desktop-horizon-h) + var(--desktop-chart-grip-h));
  --money-band-h: 78px;
}
@media (max-height: 900px) {
  .app { --desktop-chart-h: 178px; --money-band-h: 74px; }
}
@media (min-height: 1080px) {
  .app { --desktop-chart-h: 250px; --money-band-h: 84px; }
}
#desktop-forecast-stage {
  position: absolute;
  top: var(--money-band-h);
  left: 0;
  right: var(--drawer-space);
  z-index: 4;
  display: flex;
  height: var(--desktop-forecast-stage-h);
  flex-direction: column;
  background-color: #ebe4d5;
}
#desktop-forecast-stage > #chart-section-plan {
  width: 100%;
  height: var(--desktop-chart-h);
  flex: 0 0 var(--desktop-chart-h);
  margin-right: 0;
  padding: 4px 28px;
}
#desktop-forecast-stage > .crochet-bar {
  width: 100%;
  height: 28px;
  flex: 0 0 28px;
  margin-right: 0;
  background-color: #ebe4d5;
  background-image: none;
  border: 0;
}
#desktop-forecast-stage > #plan-chart-drag {
  display: flex;
  width: 100%;
  height: var(--desktop-chart-grip-h);
  flex: 0 0 var(--desktop-chart-grip-h);
  cursor: ns-resize;
  background-color: #ebe4d5;
  border-top: 1px solid rgba(74,58,38,.12);
  border-bottom: 0;
}
#desktop-forecast-stage > #plan-chart-drag .chart-drag-dots span {
  width: 16px;
  height: 2px;
  border-radius: 2px;
}
#desktop-forecast-stage > #plan-chart-drag .chart-drag-dots span:not(:first-child) { display: none; }
#desktop-forecast-stage > #desktop-plan-tools {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--desktop-horizon-h);
  flex: 0 0 var(--desktop-horizon-h);
  margin-right: 0;
  padding: 2px 30px;
}
/* Mouse controls fit the strip; the phone keeps its separate 44px targets. */
#desktop-plan-tools .hrz-left { height: 100%; }
#desktop-plan-tools .hrz-pill,
#desktop-plan-tools .hrz-mode-chip { min-height: 28px; padding-inline: 10px; }
#desktop-plan-tools .auto-stash-power {
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
}
#desktop-plan-tools .auto-stash-power svg { width: 14px; height: 14px; flex-basis: 14px; }
#view-plan,
#view-schedule { padding-top: calc(var(--money-band-h) + var(--desktop-forecast-stage-h)); }
.view-stack > .desktop-money-now {
  padding-top: 16px;
  align-items: flex-start;
}

/* Shared Back to Today control
   This button travels inside the plate, so host-scoped #view-plan rules made it
   fall back to an unstyled browser button on Plan. Identity owns every state. */
#today-peek-tab {
  position: static;
  display: inline-flex;
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 14px 0 10px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(42,90,150,.32);
  border-radius: 999px;
  background: var(--today-return-blue);
  color: #235273;
  box-shadow: 0 1px 2px rgba(35,82,115,.14);
}
#today-peek-tab::before { content: none; }
#today-peek-tab > span { font: 600 17px/1 var(--sans); transform: none; }
#today-peek-tab > strong { font: 700 12px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; }
#today-peek-tab[hidden] { display: none; }
#today-peek-tab:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
@media (hover:hover) {
  #today-peek-tab:hover {
    border-color: rgba(42,90,150,.46);
    background: #cfe3f2;
    color: #1c4462;
  }
}

/* Ledger folder-index tabs
   Plan and Forecast are two dividers in the same working folder. Their fixed
   geometry preserves the header baseline while the active index joins the
   paper sheet below. */
.desktop-top-nav {
  height: 100%;
  padding: 0 0 0 32px;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
}
.desktop-top-nav button {
  z-index: 1;
  min-width: 92px;
  height: 36px;
  padding: 0 19px;
  border: 1px solid var(--rule-2);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #ddd3bd;
  color: var(--ink2);
  box-shadow: inset 0 1px rgba(255,255,255,.34);
  font: 650 13px/1 var(--sans);
}
.desktop-top-nav button::after {
  left: -1px;
  right: -1px;
  bottom: -2px;
  height: 3px;
  background: transparent;
}
.desktop-top-nav button.active {
  z-index: 2;
  background: var(--paper-hi);
  color: var(--green-dp);
  box-shadow: 0 -2px 5px rgba(74,58,38,.06), inset 0 1px rgba(255,255,255,.7);
}
.desktop-top-nav button.active::after { background: var(--paper-hi); }
@media (hover:hover) {
  .desktop-top-nav button:hover:not(.active) {
    background: #e5dcc8;
    color: var(--ink);
  }
}

/* Wishlist rail density polish
   The period cue already occupies the upper-right corner; it must not also
   reserve space inside the title column. Let names use the paper width and
   keep selection to a hairline instead of a heavy nested frame. */
.wishlist-rail .wishlist-card {
  border-color: rgba(74,65,43,.14);
}
.wishlist-rail .wishlist-card[data-state="locked"] {
  border: 2px dashed rgba(74,65,43,.42);
  background-color: rgba(246,242,233,.34);
}
.wishlist-rail .wish-name {
  font: italic 600 17px/1.2 var(--serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wishlist-rail .wishlist-card.is-period-match {
  border-color: rgba(103,86,34,.48);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(103,86,34,.28), 0 7px 16px rgba(53,42,22,.11);
}
.wishlist-rail .wishlist-card.is-period-match .wish-main { padding-right: 0; }
.wishlist-rail .wishlist-card.is-period-match .wish-amount { padding-top: 22px; }
.wishlist-rail .wishlist-card.is-period-match .wish-period-cue {
  min-height: 19px;
  padding: 2px 7px;
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 1px 4px rgba(42,34,24,.15);
}

/* Stable Prefund masthead geometry
   Prefund exposes the shortfall subline and Undo hides it. Reserve that line's
   height inside the money facts so the optional text grows downward without
   recentering Safe to spend or Cash on hand. */
.desktop-money-facts {
  height: 56px;
  min-height: 56px;
  align-items: flex-start;
}
.desktop-cash-stack {
  min-height: 56px;
  justify-content: flex-start;
}

/* Wishlist rail proportion polish
   The reward rail is broad enough for a calm, credit-card-like card while its
   edge control recedes to a narrow neutral ledger tab. The masthead shares the
   same deeper inset so logo and money figures no longer cling to the sheet. */
:root { --wish-w: 380px; }
.view-stack > .desktop-money-now { padding-inline: 38px; }
.app > .app-header { padding-left: 38px; padding-right: 30px; grid-template-columns: 190px minmax(0,1fr) auto 34px; }
.ynab-mode-row { gap: 8px; margin-top: 0; justify-self: end; white-space: nowrap; }
.ynab-source-status { font-size: 10px; line-height: 1.4; padding-left: 8px; border-left: 1px solid var(--rule); }
.desktop-cash-stack {
  order: 1;
  margin-right: auto;
  align-items: flex-start;
  text-align: left;
}
.desktop-money-fact.safe {
  order: 2;
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
.wishlist-rail .wishlist-list { padding-inline: 20px; }
.wishlist-rail .wishlist-card { padding: 16px 18px; }
.wishlist-rail-tab {
  width: 34px;
  min-height: 104px;
  padding: 8px 4px;
  gap: 6px;
  border-color: var(--rule);
  border-radius: 6px 0 0 6px;
  box-shadow: none;
}
.wishlist-rail-tab-icon { width: 19px; height: 19px; color: var(--ink2); }
.wishlist-rail-tab-icon svg { width: 17px; height: 17px; }
.wishlist-rail-tab-label { font-size: 10px; letter-spacing: .02em; }
.wishlist-rail-tab::after { font-size: 16px; }
@media (max-width: 1350px) {
  :root { --wish-w: 350px; }
  .view-stack > .desktop-money-now { padding-inline: 32px; }
  .app > .app-header { padding-left: 32px; padding-right: 24px; }
}

/* Today correlation
   The solid Today column and its direct action use one fountain-pen blue.
   Put aside remains green because it describes a different act. */
#view-plan .summary-actions .desktop-period-spend.spend:not(.active):not(:disabled) {
  background-color: var(--today-period-blue);
  background-image: var(--cloth-weave);
  color: var(--ink-inv);
}
@media (hover:hover) {
  #view-plan .summary-actions .desktop-period-spend.spend:not(.active):not(:disabled):hover {
    background-color: var(--today-period-blue-hover);
    background-image: var(--cloth-weave);
    color: var(--ink-inv);
  }
}

/* Draw the selection above editor surfaces so all four edges remain visible. */
#view-schedule .inc-card:is(.sc-active,.sc-flash,.sc-selected,:focus-within) { position: relative; box-shadow: var(--lift-1); }
#view-schedule .inc-card.is-collapsed:is(.sc-active,.sc-flash,.sc-selected,:focus-within) { box-shadow: none; }
#view-schedule .inc-card:is(.sc-active,.sc-flash,.sc-selected,:focus-within)::after {
  content: ''; display: block; position: absolute; inset: 0; z-index: 5;
  border: 1.5px solid rgba(49,94,119,.62); border-radius: 5px;
  pointer-events: none;
}
@keyframes schedule-arrival-overlay {
  from { background-color: rgba(71,112,137,.20); }
  to { background-color: transparent; }
}
#view-schedule .inc-card.sc-flash::after { animation: schedule-arrival-overlay 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  #view-schedule .inc-card.sc-flash::after { animation: none; background-color: rgba(71,112,137,.08); }
}

/* The group total shares the right edge of its bill amount column. */
#view-plan .rollup-wrap > .rollup-tab { padding-right: 8px; }

/* Shared desktop ledger scrollbars. */
:is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill) {
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: auto;
}
:is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill)::-webkit-scrollbar { display: block; width: 12px; }
:is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill)::-webkit-scrollbar-track { background: transparent; margin-block: 16px; }
:is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill)::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 8px;
  background: var(--scroll-thumb);
  background-clip: padding-box;
}
/* Keep the scroll target, but let the money column carry the visual weight. */
:is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill) { --scroll-thumb: rgba(74,58,38,.20); }
@media (hover:hover) {
  :is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill)::-webkit-scrollbar-thumb:hover { background-color: rgba(74,58,38,.38); }
}
@supports not selector(::-webkit-scrollbar) {
  :is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill) { scrollbar-color: var(--scroll-thumb) transparent; }
}
:is(#view-plan .sw-content, #view-schedule #body-inc, #view-schedule #body-bill)::-webkit-scrollbar-button { display: none; height: 0; }

/* The agenda reads as a page; its scroll handle recedes until interaction. */
#view-plan #pg-cur .sw-content:has(.today-agenda.open) { --scroll-thumb: transparent; }
#view-plan #pg-cur .sw-content:has(.today-agenda.open):focus-within { --scroll-thumb: rgba(74,58,38,.12); }
@media (hover:hover) {
  #view-plan #pg-cur .sw-content:has(.today-agenda.open):hover { --scroll-thumb: rgba(74,58,38,.12); }
  #view-plan #pg-cur .sw-content:has(.today-agenda.open)::-webkit-scrollbar-thumb:hover { background-color: rgba(74,58,38,.24); }
}

/* Center the calendar and its complete date range as one group. */
:is(#view-plan, #view-schedule) .pnav-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 160px);
  height: 32px;
}

/* Forecast has one global disclosure and quiet chevrons within the ledger. */
#view-plan .rollup-tab-left > .rollup-tab-detail { order: 2; }
#view-plan #pg-cur .forecast-disclosure-all { display:flex; width:max-content; margin:0 0 4px auto; }
:is(#view-plan .forecast-disclosure-all,#view-schedule .hdr-compact-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  color: var(--ink2);
  font: 600 12px/1.4 var(--sans);
}
#view-schedule .hdr-compact-btn {
  width: auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  gap: 5px;
  color: var(--ink2) !important;
}
#view-schedule .hdr-compact-btn svg { width: 14px; height: 14px; opacity: .72; }
#view-plan .rollup-body > .rollup-wrap > .rollup-tab { min-height: 34px; padding-block: 6px; }
#view-plan .rollup-body > .rollup-wrap .rollup-tab-lbl { font-size: 14px; font-weight: 500; }
#view-plan .rollup-body > .rollup-wrap .rollup-tab-amt { font-size: 14px; }
/* Repeated bills read as a parent name with subordinate dated entries. */
#view-plan .rollup-body > .rollup-wrap > .rollup-tab[aria-expanded="true"] {
  border: 0;
  background: transparent;
}
#view-plan .rollup-body > .rollup-wrap > .rollup-tab[aria-expanded="true"] .rollup-tab-lbl {
  font-weight: 650;
}
#view-plan .rollup-body > .rollup-wrap > .rollup-body.open {
  margin-bottom: 12px;
}
#view-plan .rollup-body > .rollup-wrap > .rollup-body > .bcard {
  padding-left: 32px;
}
#view-plan .rollup-body > .rollup-wrap > .rollup-body > .bcard .bcard-name {
  font-weight: 400;
  color: var(--ink2);
}
#view-plan .rollup-body:not(.open) .rollup-body.open { visibility: hidden; }

/* Top-level Forecast groups read as ledger sections, not another bill row.
   Whitespace separates adjacent groups; the quiet rule binds each heading to
   the rows it names. Nested recurring-bill drawers keep their smaller style. */
#view-plan .sw-content > .rollup-wrap:has(> .rollup-body.open) + .rollup-wrap { margin-top: 30px; }
#view-plan .sw-content > .rollup-wrap > .rollup-tab {
  min-height: 40px;
  padding: 7px 8px 8px 16px;
  border-bottom: 1px solid var(--rule);
}
#view-plan .sw-content > .rollup-wrap > .rollup-tab .rollup-tab-lbl {
  font: 700 14px/1.25 var(--sans);
  letter-spacing: .01em;
}
#view-plan .sw-content > .rollup-wrap > .rollup-tab .rollup-tab-detail {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
}
#view-plan .sw-content > .rollup-wrap > .rollup-tab .rollup-tab-amt {
  font: 700 16px/1.25 var(--sans);
}
/* Opening reveals rows without changing heading geometry. */
#view-plan .sw-content > .rollup-wrap > .rollup-tab[aria-expanded="true"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
#view-plan .sw-content > .rollup-wrap > .rollup-body.open .bcard::after {
  content: none;
}
#view-plan .sw-content > .rollup-wrap > .rollup-tab[aria-expanded="true"] .rollup-tab-lbl {
  color: var(--ink2);
}
/* Sticky headings are opaque ledger paper, including their separate controls.
   Start at the scroll edge so no row peeks through above a pinned heading. */
#view-plan .sticky-period-sections .sw-content { padding-top: 0; }
#view-plan .sticky-period-sections .sw-content > .rollup-wrap > :is(.rollup-tab,.show-completed-toggle),
#view-plan .sticky-period-sections .set-aside-drawer > :is(.set-aside-heading,.today-stash-action,.rollup-tab-amt),
#view-plan .sticky-period-sections .period-section-header-paper {
  background-color: #f0ede6;
  background-image: var(--agenda-grain);
}
#view-plan .forecast-period-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin: 12px 8px 0 16px;
  padding: 6px 0 2px;
  border: 0;
  color: var(--ink2);
  font: 650 13px/1.3 var(--sans);
}
#view-plan .forecast-period-total strong {
  color: var(--ink);
  font: 700 18px/1.25 var(--serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#view-plan .forecast-period-total.short strong { color: var(--red); }

:is(#view-plan, #view-schedule) .pnav-center { width: max-content; }
:is(#view-plan, #view-schedule) .pnav-name { width: auto; }
:is(#view-plan, #view-schedule) .pnav-name.is-skippable { padding: 0; }
:is(#view-plan, #view-schedule) :is(#pnav-datejump, #sch-pnav-datejump) { position:static; flex:0 0 32px; }

/* The period ledger leads with its incoming paycheck; global safety stays above. */
#view-plan .period-safe { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 34px; margin-bottom: 5px; color: var(--ink2); }
#view-plan .period-safe > span { font: 650 14px/1.4 var(--sans); }
#view-plan .period-safe strong { color: var(--indigo); font: 600 25px/1.25 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-plan .desktop-period-stat.left strong { font: 600 18px/1.3 var(--serif); }
#view-plan .desktop-period-ledger.is-folded .desktop-period-stat:not(.pay) { display: none; }
#view-plan .desktop-period-stat.pay > span { font-weight: 700; }
#view-plan .period-paycheck-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
@media (hover:hover) {
  #view-plan .period-paycheck-link:hover { text-decoration: underline; text-underline-offset: 2px; }
}
#view-plan .period-paycheck-link:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
#view-plan .is-cash .desktop-period-ledger.is-folded .desktop-period-stat.pay { display: none; }
#view-plan .is-cash .desktop-period-ledger.is-folded .desktop-period-stat.start { display: flex; }
#view-plan .is-cash .desktop-period-ledger.is-folded .desktop-period-stat.start strong { color: var(--ink2); font: 500 16px/1.5 var(--sans); }
#view-plan .is-cash .desktop-period-ledger.is-folded .desktop-period-stat.start > span { font-weight: 700; }
#view-plan .desktop-period-head.is-summary-folded > :is(.desktop-period-context,.summary-actions) { display: none; }
/* The same restrained paper finish as the mobile agenda. */
#view-plan .cards-area, #view-schedule .inc-scroll,
#view-plan .desktop-period-head, #view-schedule .plan-paychecks,
#wishlist-rail .wishlist-card { background-image: var(--agenda-grain); }
#wishlist-rail .wish-name { font: 500 20px/1.3 var(--serif); letter-spacing: normal; }
#wishlist-rail .wish-amount { font: 500 23px/1.3 var(--serif); }

/* The narrow rail uses the same paper tickets as the phone sheet. */
#wishlist-rail { background-color: #f0ede6; background-image: var(--agenda-grain); }
#wishlist-rail .wishlist-rail-head { min-height: 58px; padding: 8px 18px; margin: 14px 0 0; align-items: center; background-color: #e6dfcf; background-image: var(--cloth-weave); border-bottom: 1px solid rgba(68,58,44,.18); box-shadow: 0 3px 6px rgba(43,36,26,.1); }
#wishlist-rail .wishlist-title { margin: 0; color: #302b24; font: 600 25px/1.2 var(--serif); }
#wishlist-rail .wishlist-list { padding: 0 14px 24px; gap: 12px; }
#wishlist-rail .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-rail .wishlist-card[data-state="earned"] { background-color: #e5e9dc; }
#wishlist-rail .wishlist-card[data-state="goal"] { background-color: #f5f0e6; }
#wishlist-rail .wishlist-card.is-ticket[data-state="goal"] { --ticket-paper: #f5f0e6; }
#wishlist-rail .wishlist-goal-card.is-ticket { padding:10px 12px; gap:4px 8px; min-width:0; }
#wishlist-rail .wishlist-goal-card.is-ticket .wish-name { font-size:16px; line-height:1.25; }
#wishlist-rail .wishlist-goal-card .wish-protected { font:12px/1.4 var(--sans); overflow-wrap:anywhere; }
#wishlist-rail .wishlist-card[data-state="goal"].is-funding-shortfall { background-color: #ecddc8; }
#wishlist-rail .wishlist-card[data-state="locked"] { border: 1px dashed rgba(68,58,44,.38); box-shadow: none; }
#wishlist-rail .wish-amount { align-self: start; padding-top: 0; }
#wishlist-rail .wish-state { display: inline-flex; margin-top: 6px; padding: 3px 7px; border-radius: var(--r-pill); font: 600 11px/1.3 var(--sans); background: rgba(138,106,24,.11); color: var(--gold); }
#wishlist-rail .wish-state::before { content: none; }
#wishlist-rail .wishlist-card[data-state="earned"] .wish-state { background: #c9dfc6; color: #28533b; }
#wishlist-rail .wishlist-card[data-state="goal"] .wish-state { background: #fae9b9; color: #554019; }
#wishlist-rail .wishlist-card[data-state="goal"].is-funding-shortfall .wish-state { background: #fff0c9; color: #733f18; }
#wishlist-rail .wish-period-cue { display: none; }
#wishlist-rail .wish-away { display: block; }
#wishlist-rail .wish-fit, #wishlist-rail .wish-shift { display: block; color: var(--ink2); font: 500 12px/1.5 var(--sans); }
#wishlist-rail .wish-gauge-bar { height: 3px; margin-top: 1px; border-radius: 2px; }
#wishlist-rail .wish-actions { opacity: 1; }
#wishlist-rail .wish-action, #wishlist-rail .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-rail .wishlist-card[data-state="earned"] .wish-gauge-bar { display: none; }
#wishlist-rail .wish-lock { width: 44px; height: 44px; border: 0; color: var(--ink3); background: transparent; }
#wishlist-rail .wish-lock svg { width: 24px; height: 24px; }
#wishlist-rail .wish-actions { display: flex; justify-content: space-between; gap: 6px 10px; margin-top: 0; }
#wishlist-rail .wish-gauge-fill { opacity: 1; }

/* One continuous parchment beneath the shared burlap date strip. */
#view-plan .cards-area, #view-schedule .inc-scroll {
  background-color: #f0ede6;
  background-image: var(--agenda-grain);
}
#view-plan .sw-page { background: transparent; }
#view-schedule .plan-paychecks { padding: 10px 12px; }
#view-schedule .plan-bills { padding-top: 10px; }

/* Status-only planning leaves the live financial compass above the ledger. */
.desktop-compact-status { display: none; }
.app[data-desktop-forecast-state="collapsed"] #desktop-collapsed-today:not([hidden]) {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 12px;
  border: 1px solid rgba(74,58,38,.22);
  border-radius: 999px;
  background-color: var(--today-return-blue);
  color: #235273;
  font: 600 12px/1.4 var(--sans);
  white-space: nowrap;
}
#desktop-collapsed-today:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
@media (hover:hover) {
  .app[data-desktop-forecast-state="collapsed"] #desktop-collapsed-today:hover { background-color: #cbdfee; }
}
.app[data-desktop-forecast-state="collapsed"] { --desktop-forecast-stage-h: var(--desktop-chart-grip-h); }
.app[data-desktop-forecast-state="collapsed"] #desktop-forecast-stage > :not(#plan-chart-drag) { display: none; }
.app[data-desktop-forecast-state="collapsed"] .desktop-money-fact.safe { display: none; }
.app[data-desktop-forecast-state="collapsed"] .desktop-compact-status { display: flex; align-items: center; gap: 9px; order: 1; align-self: center; margin-inline: 20px; color: var(--ink2); font: 500 12px/1.4 var(--sans); }


/* Quiet, single-row period tools rather than a stack of primary buttons. */
#view-plan .summary-actions { flex-direction: row; align-items: center; }
#view-plan .summary-actions .desktop-period-footer { flex: 0 0 auto; width: auto; }
#view-plan .summary-actions .desktop-spend-reason { display: none; }
#view-plan .summary-actions .period-quick-add { flex: 1 1 auto; width: auto; min-width: 0; }
#view-plan .summary-actions .period-quick-prompt { display: flex; }
#view-plan .summary-actions .desktop-period-spend,
#view-plan .summary-actions .desktop-period-spend.spend:not(.active):not(:disabled),
#view-plan .summary-actions .period-quick-link {
  width: auto; max-width: none; min-height: 34px; margin: 0; padding: 4px 2px;
  border: 0; border-radius: 4px; background: transparent; box-shadow: none;
  color: var(--ink2); font: 500 12px/1.3 var(--sans); gap: 5px; white-space: nowrap;
}
#view-plan .summary-actions .desktop-period-spend .desktop-action-icon,
#view-plan .summary-actions .period-quick-link .desktop-action-icon { width: 16px; height: 16px; }
#view-plan .summary-actions:has(.period-quick-add.editing) { flex-wrap: wrap; }
#view-plan .summary-actions .period-quick-add.editing { flex-basis: 100%; }
/* A disabled action still has to be readable: it is quieter than the live
   actions (lighter ink, no hover, not-allowed cursor), never washed out. */
#view-plan .summary-actions .desktop-period-spend:disabled { background: transparent; box-shadow: none; color: var(--ink3); opacity: .8; }
@media (hover:hover) {
  #view-plan .summary-actions .desktop-period-spend:hover:not(:disabled),
  #view-plan .summary-actions .desktop-period-spend.spend:not(.active):not(:disabled):hover,
  #view-plan .summary-actions .period-quick-link:hover { background: rgba(74,58,38,.06); }
}

#desktop-compact-trend { display: flex; flex: 0 0 32px; align-items: center; }

/* Paychecks keeps its paper body with a woven heading strap and exposed top lip. */
#view-schedule .plan-paychecks { padding-top: 8px; }
#view-schedule #hdr-inc {
  margin: 0 -12px 6px;
  padding: 5px 12px 6px;
  background-color: #e6dfcf;
  background-image: var(--cloth-weave);
  border-bottom: 1px solid rgba(68,58,44,.18);
  box-shadow: 0 3px 6px rgba(43,36,26,.1);
  position: relative;
  z-index: 1;
}
/* A small paper date stamp supplies texture without another full-width strap. */
#view-plan .mobile-calendar-date {
  position: relative;
  flex-basis: 42px;
  height: 50px;
  padding: 3px;
  border: 1px dashed rgba(85,75,56,.38);
  border-radius: 2px;
  background-color: #f8f3e8;
  background-image: var(--agenda-grain);
  box-shadow: 0 2px 3px rgba(43,36,26,.13), inset 0 0 0 2px rgba(255,252,242,.65);
}
#view-plan .mobile-calendar-date > span {
  align-self: stretch;
  text-align: center;
  background: transparent;
}
#view-plan .summary-actions { gap: 5px; }
#view-plan .summary-actions :is(.desktop-period-spend,.period-quick-link),
#view-plan .summary-actions .desktop-period-spend.spend:not(.active):not(:disabled) {
  padding: 5px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink2);
  background: transparent;
  box-shadow: none;
}
@media (hover:hover) {
  #view-plan .summary-actions .desktop-period-spend:hover:not(:disabled),
  #view-plan .summary-actions .desktop-period-spend.spend:not(.active):not(:disabled):hover,
  #view-plan .summary-actions .period-quick-link:hover {
    background-color: rgba(230,223,207,.45);
    background-image: var(--cloth-weave);
    border-color: rgba(85,75,56,.23);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255,252,242,.65);
  }
}
#view-plan .summary-actions :is(.desktop-period-spend,.period-quick-link):focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* 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; }
/* Keep the two planning additions together; spending closes the action row. */
#view-plan .summary-actions .period-quick-add { order: 0; }
#view-plan .summary-actions .period-quick-prompt { justify-content: flex-start; gap: 8px; }
#view-plan .summary-actions .desktop-period-footer { order: 1; margin-left: auto; }
#view-plan .summary-actions .period-quick-add.editing { order: 2; }

/* The date stamp rests on a woven heading strap above the paper ledger. */
#view-plan .desktop-period-head { padding-top: 14px; }
#view-plan .desktop-period-heading {
  isolation: isolate;
  padding-block: 9px 11px;
}
#view-plan .desktop-period-heading::before {
  content: '';
  position: absolute;
  inset: 0 -22px;
  z-index: -1;
  background-color: #e6dfcf;
  background-image: var(--cloth-weave);
  border-bottom: 1px solid rgba(68,58,44,.18);
  box-shadow: 0 3px 6px rgba(43,36,26,.1);
}
#view-plan .mobile-calendar-date > span {
  background-color: #e6dfcf;
  background-image: var(--cloth-weave);
  border-bottom: 1px solid rgba(85,75,56,.12);
}

/* Keep the strap to one heading band; explanatory text belongs on the paper. */
#view-plan .desktop-period-heading::before { bottom: auto; }
#view-plan .desktop-period-heading .desktop-period-kicker { margin: 0; top: auto; left: 62px; line-height: 1.2; text-transform: none; }

/* 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);
}


/* Align the heading to the stamp, with a quiet right-aligned note on the strap. */
#view-plan .desktop-period-heading {
  min-height: 58px;
  height: 58px;
  padding: 4px 0;
}
#view-plan .desktop-period-heading > .mobile-calendar-date { margin-top: 0; }

/* Title and right-aligned subtitle share the stamp's vertical center. */
#view-plan .desktop-period-heading {
  display: grid;
  column-gap: 12px;
  align-items: center;
}
#view-plan .desktop-period-heading > div { display: contents; }
#view-plan .desktop-period-heading .desktop-period-date { grid-column: 2; margin: 0; }
#view-plan .desktop-period-heading .desktop-period-kicker {
  grid-column: 3;
  align-self: center;
  text-align: right;
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

#wishlist-rail .wishlist-rail-head { justify-content: center; }
#wishlist-rail .wishlist-rail-head > div:first-child { width: 100%; text-align: center; }


/* Tickets share the phone deck; mouse users also have explicit paging controls. */
#wishlist-rail :is(.is-goals,.is-available) .wishlist-option-track { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 6px 6px 8px; scroll-padding-inline: 6px; align-items: start; }
#wishlist-rail :is(.is-goals,.is-available) .wishlist-option-track > .wishlist-card { flex: 0 0 100%; width: 100%; box-sizing: border-box; scroll-snap-align: start; }
#wishlist-rail .wishlist-plans-scroll { margin-inline: 0; padding-inline: 0; }
#wishlist-rail :is(.is-goals,.is-available) .has-options .wishlist-card { flex-basis: calc(100% - 22px); width: calc(100% - 22px); }
#wishlist-rail :is(.is-goals,.is-available) .wishlist-deck-nav { display: flex; }
#wishlist-rail :is(.is-goals,.is-available) .wishlist-deck-dots { display: flex; }
#wishlist-rail :is(.is-goals,.is-available) .wishlist-option-head { padding-top: 0; }
#wishlist-rail .is-ticket .wish-lock { display: inline-flex; justify-content: center; width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 3px; margin-left: auto; }
#wishlist-rail .is-ticket .wish-lock svg { width: 17px; height: 17px; }
#wishlist-rail .wishlist-goal-card .wish-lock { margin-right: 0; }

#wishlist-rail .wishlist-card:not(.is-ticket) { padding: 12px 14px; gap: 6px; }
#wishlist-rail .wishlist-card:not(.is-ticket) .wish-actions { padding-top: 5px; margin-top: 0; }
#wishlist-rail .wishlist-card:not(.is-ticket) :is(.wish-action,.wish-lock) { height: 30px; min-height: 30px; padding: 3px 6px; }
#wishlist-rail .wishlist-card:not(.is-ticket) .wish-lock svg { width: 18px; height: 18px; }

/* Keep Upcoming within the fixed-height burlap title strip. */
#view-plan .desktop-period-heading { grid-template-columns: 42px minmax(0, 1fr); position: relative; }
#view-plan .desktop-period-heading .desktop-period-date { display: flex; align-items: center; min-width: 0; gap: 6px; white-space: nowrap; }
#view-plan .desktop-period-date .period-desktop-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#view-plan .desktop-period-date .period-upcoming-badge { position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-left: 0; font-size: 9px; padding: 2px 5px; }
#view-plan .desktop-period-date:has(.period-upcoming-badge) { padding-right: 58px; box-sizing: border-box; }

#view-plan .desktop-period-heading .desktop-period-kicker { position: absolute; bottom: 0; right: 0; font-size: 9px; }

/* Keep the return control in the header's free left slot, clear of its title. */
#chart-section-plan > #plan-preview-today {
  top: 9px;
  left: 28px;
  transform: none;
  background-color: var(--today-return-blue);
  color: #235273;
  border-color: rgba(74,58,38,.22);
  font-weight: 600;
}
@media (hover:hover) {
  #chart-section-plan > #plan-preview-today:hover { background-color: #cbdfee; text-decoration: none; }
}
#chart-section-plan .desktop-chart-heading { color: var(--ink3); font-weight: 400; font-size: 14px; }
#chart-section-plan #ah-mid-icon { opacity: .72; }
.app[data-desktop-forecast-state="compact"] #forecast-disclosure { display: none; }

/* Keep cash pinned right; the return control occupies the space to its left. */
.desktop-money-facts { position: relative; }
.app[data-desktop-forecast-state="collapsed"] .desktop-compact-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }

/* Match the mobile allowance's visual size without expanding the money band. */
#stash-funding-metric #stash-funding-percent[data-allowance="true"] { font-size: 28px; line-height: 25.3px; }

#chart-section-plan .chart-heading-group { position:absolute; grid-column:auto; grid-row:auto; justify-self:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; max-width:calc(100% - 160px); min-height:28px; justify-content:center; gap:6px; }
#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 { align-self:center; margin:0; padding:0; font:400 12px/1.35 var(--sans); color:var(--ink3); white-space:normal; text-align:center; min-width:0; overflow-wrap:anywhere; }
/* Type picker for collapsed Plan bill rows. */
#bill-type-menu { position:fixed; margin:0; padding:5px; width:160px; border:1px solid #d7d9d7; border-radius:6px; background:#f7f8f6; color:#303733; box-shadow:0 5px 18px rgba(0,0,0,.14); }
#bill-type-menu::backdrop { background:transparent; }
#bill-type-menu button { display:flex; align-items:center; gap:9px; width:100%; min-height:32px; padding:6px 9px; border:0; border-radius:3px; background:transparent; color:inherit; text-align:left; font:500 12px var(--sans); cursor:pointer; }
#bill-type-menu svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#bill-type-menu button[aria-pressed="true"] { background:#e6e9e6; font-weight:750; }
#bill-type-menu button:focus-visible { outline:2px solid #737e77; outline-offset:-2px; }
@media(hover:hover) { #bill-type-menu button:hover { background:#eceeeb; } }

/* The active tab rises above a flat manila-paper inactive tab. */
#desktop-nav-schedule { --destination-color: var(--nav-plan-color); }
#desktop-nav-forecast { --destination-color: var(--nav-outlook-color); }
.desktop-top-nav :is(#desktop-nav-schedule,#desktop-nav-forecast) { height: 28px; background: #ddd3bd; color: #625b4e; font-weight: 500; box-shadow: none; transition: height 80ms ease-out, background-color 80ms ease-out, color 80ms ease-out, box-shadow 80ms ease-out; }
.desktop-top-nav :is(#desktop-nav-schedule,#desktop-nav-forecast).active { height: 36px; background: var(--destination-color); color: #fff; font-weight: 700; box-shadow: 0 0 0 1px rgba(42,34,24,.12), 0 -2px 6px rgba(42,34,24,.16); }
.desktop-top-nav :is(#desktop-nav-schedule,#desktop-nav-forecast).active::after { background: var(--destination-color); }
@media (hover:hover) {
  .desktop-top-nav :is(#desktop-nav-schedule,#desktop-nav-forecast):hover:not(.active) { height: 36px; background: #e5dcc8; color: var(--ink); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-top-nav :is(#desktop-nav-schedule,#desktop-nav-forecast) { transition: none; }
}

#bill-type-menu .bill-menu-grace { margin-top:5px; border-top:1px solid #d7d9d7; }
#bill-type-menu .bill-menu-grace label { display:block; color:#59625c; }
#bill-type-menu .bill-menu-grace-controls { display:grid; gap:4px; align-items:center; }
#bill-type-menu .bill-menu-grace button { justify-content:center; font-size:18px; }
#bill-type-menu .bill-menu-grace input { width:100%; min-width:0; box-sizing:border-box; border:0; border-bottom:1px solid #aab1ac; background:transparent; color:inherit; text-align:center; appearance:textfield; }
#bill-type-menu .bill-menu-grace input::-webkit-inner-spin-button,
#bill-type-menu .bill-menu-grace input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#bill-type-menu .bill-menu-grace input:focus-visible { outline:0; outline-offset:0; border-bottom-color:var(--ink2); box-shadow:inset 0 -1px 0 var(--ink2); }
#bill-type-menu .bill-menu-grace :disabled { opacity:.4; cursor:default; }
#bill-type-menu .bill-menu-grace small { display:block; margin-top:5px; font:400 10px var(--sans); color:#59625c; }

/* 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) 32px 64px;
  grid-template-rows:20px 16px;
  height:40px; min-height:40px; max-height:40px;
  padding-block:2px; 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; display:flex; align-items:center; justify-self:end; gap:4px; width:124px; }
#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 32px; width:32px; height:32px; min-width:32px; padding:0; font-size:18px; }

/* 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 #pg-cur .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) 92px 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; flex-direction:row; align-items:center; justify-content:center; gap:6px; width:92px; min-width:92px; min-height:var(--agenda-hit,32px); padding:4px 6px; box-sizing:border-box; border:1px solid var(--rule,var(--mobile-rule)); border-radius:4px; 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 { order:1; font-size:10px; }
#view-plan .today-agenda .agenda-postpone .tr-label { display:block; 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 { background:rgba(74,58,38,.06); border-color:var(--ink2); } }
/* 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; }

/* 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) 86px 16px 32px max(56px,var(--period-amount-width,64px)); grid-template-rows:auto; height:36px; min-height:36px; max-height:36px; 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:32px; height:32px; min-width:32px; min-height:32px; 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; }


/* Associate every Plan item with its type directly beside its name. */
#view-schedule .bill-cadence-type { display:inline-flex; flex:0 0 16px; color:#a6a39e; }
#view-schedule .bill-cadence-type svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#view-schedule .bill-card .cs-cadence-toggle .fund-level { display:none; }
#bill-type-menu .bill-menu-grace { padding:5px 7px 2px; }
#bill-type-menu .bill-menu-grace label { margin-bottom:3px; font:600 11px/1.2 var(--sans); }
#bill-type-menu .bill-menu-grace-controls { grid-template-columns:26px minmax(0,1fr) 26px; }
#bill-type-menu .bill-menu-grace input { height:26px; padding:1px 3px; font:500 12px/1.2 var(--sans); }
#bill-type-menu .bill-menu-grace button { min-height:26px; height:26px; padding:0; line-height:1; }

/* Today uses the ordinary ledger list until Agenda view is chosen. */
#view-plan .rollup-body .bcard.today-accounting { grid-template-rows:auto; height:36px; min-height:36px; max-height:36px; 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:32px; height:32px; min-width:32px; min-height:32px; padding:0; }
#view-plan .rollup-body .bcard.today-accounting { grid-template-columns:minmax(0,1fr) 86px 112px 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:not(.goal-card) { grid-template-columns:32px minmax(0,1fr) fit-content(50%) 76px max(56px,var(--period-amount-width,64px)); column-gap:6px; }
#view-plan .rollup-body .bcard.ledger-bill .ledger-check { grid-column:1; grid-row:1; width:32px; height:32px; min-width:32px; min-height:32px; border-radius:5px; padding:0; }
#view-plan .rollup-body .bcard.ledger-bill .bcard-name { grid-column:2; }
#view-plan .rollup-body .bcard.ledger-bill .bcard-meta { grid-column:3; }
#view-plan .rollup-body .bcard.ledger-bill.ghost:not(.goal-card) .bcard-meta { display:none; }
#view-plan .rollup-body .bcard.ledger-bill:not(.goal-card) > .ghost-hop { grid-column:3; grid-row:1; align-self:center; justify-self:end; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; }
#view-plan .rollup-body .bcard.ledger-bill .bcard-amt { grid-column:5; }
#view-plan .rollup-body .bcard.ledger-bill .transport { grid-column:4; display:grid; grid-template-columns:32px 12px 32px; 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:32px; min-width:32px; padding:0; }
#view-plan .rollup-body .bcard.ledger-bill .transport .funding-limit-mark { grid-column:2; grid-row:1; margin:0; justify-self:center; }

/* Checked controls retain their state color under hover and focus. */
#view-plan .bcard .tr-btn.pay.latched { background-color:transparent; color:var(--ink2); box-shadow:none; border-color:transparent; }
@media(hover:hover) {
  #view-plan .rollup-body .bcard:hover { background-color:rgba(74,58,38,.035); }
  #view-plan .bcard .tr-btn.pay.latched:hover:not(:disabled) { background-color:transparent; color:var(--ink2); box-shadow:none; border-color:transparent; }
}
/* Amount editing temporarily uses the paycheck toggle's space. */
#view-schedule .paycheck-card.is-collapsed:has(.cs-amount-editor) .compact-active-toggle { display:none; }
#view-schedule .paycheck-card.is-collapsed .cs-amount-editor { grid-column:-3 / -1; grid-row:1 / -1; max-width:100%; }
/* Paycheck list rows keep cadence inline, even in the narrow summary pane. */
#view-schedule .paycheck-card.is-collapsed { grid-template-columns:minmax(0,1fr) 54px 70px 26px; grid-template-rows:1fr; height:38px; min-height:38px; gap:6px; }
#view-schedule .paycheck-card.is-collapsed .cs-cadence-toggle { grid-column:2; grid-row:1; width:auto; }
#view-schedule .paycheck-card.is-collapsed .cs-amt { grid-column:3; grid-row:1; width:70px; }
#view-schedule .paycheck-card.is-collapsed .compact-active-toggle { grid-column:4; grid-row:1; transform:none; }

#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 12px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--ink2); font:600 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; }

/* 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:32px minmax(0,1fr) 78px 44px max(56px,var(--period-amount-width,64px)); }
#view-plan .rollup-body .bcard.ledger-bill.today-accounting .transport { grid-template-columns:12px 32px; }
#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; }

/* 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);
}

@media(hover:hover) { #forecast-view-toggle:hover { background:transparent; color:var(--ink); } }

/* 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:38px; box-sizing:border-box; }
#view-plan .bcard.envelope-row .goal-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); margin:0; }
#view-plan .agenda-envelope .bcard.envelope-row { padding-left:0; padding-right:0; }

/* Goal installments share their own pause column and the existing money edge. */
#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 .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; }

/* Selection is paint only; reserve its content gutter even when unselected. */
#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(.forecast-active,.selected,:focus-within) {
  outline:none; border-radius:2px; box-shadow:inset 0 0 0 1px var(--row-focus);
}
#view-plan .sw-content .rollup-body .bcard .bcard-name { min-width:0; }
#view-plan .sw-content .rollup-body .bcard .bcard-amt { margin-right:0; }
#view-schedule .inc-card { padding-left:12px; padding-right:12px; box-sizing:border-box; }
#view-schedule .inc-card:is(.sc-active,.sc-flash,.sc-selected,:focus-within)::after {
  inset:1px; border:1px solid var(--row-focus); border-radius:3px; box-sizing:border-box;
}

/* List totals already live beside the selected period. Agenda retains its summary. */
#view-plan .desktop-period-head.list-summary .desktop-period-stat:is(.savings,.bills,.left) { display:none; }

/* All centered desktop dialogs use the working column, excluding the Wishlist rail.
   Context menus and anchored popovers retain their trigger-relative positions. */
:root dialog:not(#bill-type-menu) {
  position:fixed; top:50%; left:var(--dialog-workspace-center,50%);
  right:auto; bottom:auto; margin:0; transform:translate(-50%,-50%);
  max-width:var(--dialog-workspace-width,calc(100vw - 32px));
}
:root .modal-sheet:not(.wishlist-sheet):not(.desktop-popover) {
  left:var(--dialog-workspace-center,50%);
  max-width:var(--dialog-workspace-width,calc(100vw - 32px));
}
:root .calc-scrim .calc {
  position:fixed; top:50%; left:var(--dialog-workspace-center,50%);
  margin:0; transform:translate(-50%,-50%);
  max-width:var(--dialog-workspace-width,calc(100vw - 32px));
}
.goal-contributions-dialog .goal-contribution-period { min-height:32px; }

/* An empty period is one quiet receipt, including its remaining balance. */
#view-plan .sw-content > .empty-pg.empty-period-summary {
  align-items: stretch;
  padding: 20px 18px 14px;
  border: 1px solid rgba(68,58,44,.15);
  border-radius: 4px;
  background-color: transparent;
  text-align: left;
}
#view-plan .empty-period-summary .ep-ico { display: none; }
#view-plan .empty-period-summary .ep-txt { color: var(--ink2); font: 500 13px/1.4 var(--sans); }
#view-plan .empty-period-summary .ep-summary { max-width: none; margin-top: 6px; text-align: left; font: 400 12px/1.5 var(--sans); color: var(--ink2); }
#view-plan .empty-period-summary .forecast-period-total { justify-content: space-between; margin: 16px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(68,58,44,.15); }

/* Plan and Outlook share one woven strap geometry across desktop heights. */
:root { --period-strap-height: 58px; }
#view-schedule #hdr-inc,
#view-plan .desktop-period-heading {
  box-sizing: border-box;
  height: var(--period-strap-height);
  min-height: var(--period-strap-height);
  flex: 0 0 var(--period-strap-height);
}
#view-plan .desktop-period-heading::before { height: var(--period-strap-height); }

/* Compact funding rows share columns and never retain the old two-row grid. */
#view-plan :is(.sw-content,.desktop-period-head) .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 :is(.sw-content,.desktop-period-head) .rollup-body .goal-card:not(.goal-due-card) .bcard-info { display: contents; }
#view-plan :is(.sw-content,.desktop-period-head) .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 :is(.sw-content,.desktop-period-head) .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 :is(.sw-content,.desktop-period-head) .rollup-body .goal-card.ghost .bcard-meta { display:none; }
#view-plan :is(.sw-content,.desktop-period-head) .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 :is(.sw-content,.desktop-period-head) .rollup-body .goal-card:not(.goal-due-card) .bcard-amt > .funding-limit-mark { position:absolute; right:calc(100% + 6px); top:50%; transform:translateY(-50%); width:16px; margin:0; justify-content:center; }
#view-plan :is(.sw-content,.desktop-period-head) .rollup-body .goal-card:not(.goal-due-card) .transport { display:none; }

#view-plan :is(.sw-content,.desktop-period-head) .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 :is(.sw-content,.desktop-period-head) .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 :is(.sw-content,.desktop-period-head) .rollup-body .goal-card:not(.goal-due-card) :is(.bcard-meta,.ghost-hop,.bcard-amt) { align-self:center; max-width:none; }

/* The Wishlist invitation opens into the same finished paper editor in place. */
#wishlist-rail .wishlist-placeholder {
  width:100%; align-self:stretch; justify-self:stretch; justify-content:center; align-items:center; text-align:center; min-height:38px; padding:8px 12px; border-radius:0 0 5px 5px;
  border:1px dotted var(--rule-3); border-top:0; background:var(--paper-hi); color:var(--ink2);
  font:500 16px/1.3 var(--serif); letter-spacing:0; text-transform:none;
  box-shadow:0 2px 2px rgba(42,34,24,.10),0 6px 7px -3px rgba(42,34,24,.24);
}
@media (hover:hover) { #wishlist-rail .wishlist-placeholder:hover { background:var(--paper-hi); color:var(--ink); filter:none; } }
#wishlist-rail .wishlist-create-card {
  padding:16px; background:var(--paper-hi); border:1px solid var(--rule-3); border-radius:5px;
  box-shadow:0 2px 5px rgba(42,34,24,.10);
}
#wishlist-rail .wishlist-create-card .wishlist-editor-row { grid-template-columns:minmax(0,1fr); gap:12px; }
#wishlist-rail .wishlist-create-card label { gap:4px; color:var(--ink2); font:600 11px/1.3 var(--sans); letter-spacing:0; text-transform:none; }
#wishlist-rail .wishlist-create-card input { box-sizing:border-box; min-width:0; height:36px; padding:6px 8px; border:1px solid var(--rule-3); border-radius:3px; background:transparent; font:500 14px/1.4 var(--sans); }
#wishlist-rail .wishlist-create-card input:focus-visible { outline:0; outline-offset:0; border-bottom-color:var(--ink2); box-shadow:inset 0 -1px 0 var(--ink2); }
#wishlist-rail .wishlist-create-card .wish-amount-control { grid-template-columns:32px minmax(0,1fr) 32px; border:1px solid var(--rule-3); border-radius:3px; }
#wishlist-rail .wishlist-create-card .wish-amount-control input { border:0; text-align:right; font:500 17px/1.3 var(--serif); }
#wishlist-rail .wishlist-create-card .wish-step { height:36px; border:0; border-radius:0; color:var(--green-dp); font:500 18px/1 var(--sans); }
#wishlist-rail .wishlist-create-card .wishlist-editor-buttons { margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); gap:8px; }
#wishlist-rail .wishlist-create-card .wishlist-editor-buttons button { min-height:34px; padding:7px 12px; border-radius:4px; font:600 12px/1.3 var(--sans); text-transform:none; letter-spacing:0; }
#wishlist-rail .wishlist-create-card .wishlist-editor-save { background:var(--green-dp); color:var(--ink-inv); }
#wishlist-rail .wishlist-create-card .wishlist-editor-cancel { background:transparent; color:var(--ink2); border:1px solid var(--rule-3); }

#view-plan .agenda-entry-form { grid-template-columns:38px minmax(0,1fr) 80px 32px 32px; }
#view-plan .agenda-entry-form button { width:32px; height:32px; }
#view-plan .today-list-entry .agenda-entry-form { grid-template-columns:minmax(0,1fr) 70px 32px 32px; }

#view-plan .today-agenda { --agenda-hit:32px; }
#view-plan .today-agenda .agenda-repeat::after { height:32px; }

/* Desktop editors use the ledger's writing line, without an outer focus box.
   An inset line never changes control dimensions or crowds nearby content. */
:root :is(input:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="button"],[type="submit"],[type="reset"]),textarea,select):focus-visible,
#view-plan .agenda-entry input:focus-visible {
  outline:0; outline-offset:0; border-bottom-color:var(--ink2);
  box-shadow:inset 0 -1px 0 var(--ink2);
}
#view-plan .agenda-entry button:focus-visible {
  outline:1px solid var(--ink2); outline-offset:-4px; box-shadow:none;
}

/* Reserve room only while actual cash cannot back all earmarks. */
.app:has(#protection-warning:not([hidden])) { --money-band-h:104px; }

/* Padding and Stash Percentage share the control opposite editable cash. */
#stash-funding-metric { position:absolute; right:32px; top:16px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; min-height:44px; gap:3px; border:0; padding:0; background:transparent; color:var(--ink); cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#stash-funding-metric span { font:500 11px/1.4 var(--sans); color:var(--ink2); }
#stash-funding-metric strong { font:400 18px/1.2 var(--serif); color:var(--ink2); font-variant-numeric:tabular-nums; }
#stash-funding-metric #stash-funding-percent[data-allowance="true"] { font-family:'Caveat',cursive; font-weight:600; color:#365f94; }
#stash-funding-metric:focus-visible { outline:none; text-decoration:underline; text-underline-offset:4px; }
@media (hover:hover) { #stash-funding-metric:hover strong { text-decoration:underline; text-underline-offset:4px; } }

/* Plan stays a ledger; its shared editor opens over either workspace. */
#view-schedule .hdr-compact-btn { display:none; }
#mobile-record-dialog.canonical-record-dialog[open] { display:flex; flex-direction:column; height:auto; max-height:calc(100dvh - 48px); overflow:hidden; color:var(--ink); }
#mobile-record-dialog::backdrop { background:rgba(35,30,22,.24); }
#mobile-record-dialog .mobile-record-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex:0 0 auto; border-bottom:1px solid var(--bd2); font:12px var(--sans); color:var(--ink2); }
#mobile-record-dialog .mobile-record-toolbar span { margin-right:auto; }
#mobile-record-dialog .mobile-record-toolbar button { border:0; border-radius:4px; background:var(--green); color:var(--paper); font:600 12px var(--sans); cursor:pointer; }
#mobile-record-dialog .record-fields { scrollbar-width:none; }
#mobile-record-dialog .record-fields::-webkit-scrollbar { display:none; }
#mobile-record-dialog .record-kind { grid-template-columns:repeat(4,minmax(0,1fr)); }
#mobile-record-dialog :is(button,input[type="checkbox"]):focus-visible { outline:none; box-shadow:0 0 0 1px var(--ink2); }

/* Desktop completion controls stay at the foot of the editing document. */
#mobile-record-dialog.canonical-record-dialog .mobile-record-toolbar { order:2; border-bottom:0; border-top:1px solid var(--bd2); }
#mobile-record-dialog.canonical-record-dialog .record-fields { flex:1; }

.record-fields input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
.record-fields input[type="number"]::-webkit-inner-spin-button,
.record-fields input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.record-fields .record-native-date { display:none !important; }
.record-date-controls { display:flex; align-items:center; min-height:44px; gap:8px; }
.record-date-controls .date-btn { min-height:44px; }
.record-date-controls button:focus-visible { outline:none; text-decoration:underline; }

/* Desktop record: a wide check, with identity and amount across its ruled face. */

#mobile-record-dialog .record-fields:not(.record-income) .record-kind { justify-content:start; grid-column: 1 / 3; grid-row: 1; }

#mobile-record-dialog .record-fields:not(.record-income) .record-every { width:72px; }

#mobile-record-dialog .record-fields[data-mode="goal"] :is(.record-every,.record-frequency) { visibility:visible; }

/* Agenda savings form the desktop ledger footer, in the same amount column. */
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content {
  display:flex; flex-direction:column; padding-bottom:0;
  overflow: hidden;
}
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > * { flex-shrink:0; }
#view-plan #pg-cur.period-today:has(> .agenda-today-head) > .sw-content > .rollup-wrap:has(> .today-agenda) {
  flex:1 1 0; min-height:0; overflow-y:auto;
}
/* The desktop editor is a personal check: date above, payee and amount on a ruled face. */
#mobile-record-dialog.canonical-record-dialog[open] { background:#f5f0df; background-image:var(--agenda-grain); }
#mobile-record-dialog .record-fields { padding:22px 30px 12px; gap:12px 20px; background:transparent; }

#mobile-record-dialog .record-fields:not(.record-income) .record-date { grid-column:3; grid-row:1; }
#mobile-record-dialog .record-fields:not(.record-income) .record-name { grid-column:1 / 3; grid-row:2; }
#mobile-record-dialog .record-fields:not(.record-income) .record-amount { grid-column:3; grid-row:2; }
#mobile-record-dialog .record-fields:not(.record-income) .record-every { grid-column:1; grid-row:3; }
#mobile-record-dialog .record-fields:not(.record-income) .record-frequency { grid-column:2; grid-row:3; }
#mobile-record-dialog .record-fields:not(.record-income) :is(.record-options,.record-protection) { grid-column:1 / -1; grid-row:4; }
/* Grace is a field like Interval, not a toggle: it shares their label and underline. */
#mobile-record-dialog :is(.record-field,.record-grace-option) > span:first-child { font:italic 12px/1.4 var(--serif); color:#68644f; }
#mobile-record-dialog :is(.record-field :is(input,select),.record-grace-option input) { border-radius:0; background:transparent; border:0; border-bottom:1px solid #b1aa92; min-height:32px; padding:2px 4px; }
#mobile-record-dialog #record-name { font:italic 27px/1.25 var(--serif); }
#mobile-record-dialog .record-fields:not(.record-income) #record-amount { font:italic 28px/1.25 var(--serif); padding:4px 10px 4px 24px; }
#mobile-record-dialog .record-fields:not(.record-income) .record-amount::after { left:8px; }
#mobile-record-dialog .record-kind button { background:transparent; border-radius:0; }
#mobile-record-dialog .record-date-controls { min-height:32px; justify-content:flex-end; border-bottom:1px solid #b1aa92; }
#mobile-record-dialog .record-date-controls .date-btn { min-height:32px; font:italic 18px var(--serif); }
#mobile-record-dialog .mobile-record-toolbar { background:transparent; padding:10px 30px; border-top:1px dashed #b1aa92; }
#mobile-record-dialog .record-fields { align-content:start; grid-auto-rows:min-content; }
#mobile-record-dialog .record-options { align-items:center; }
#mobile-record-dialog .record-options label:has(input[type="number"]) { grid-column:auto; }

#mobile-record-dialog .record-footer { padding-top:0; }
/* A lightly ruled paper check, with quiet controls rather than nested boxes. */
#mobile-record-dialog.canonical-record-dialog[open] { background-color:#f8faf4; box-shadow:0 12px 40px #302b2426; }
#mobile-record-dialog .record-fields { background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#66867805 3px,#66867805 4px); }
#mobile-record-dialog .record-fields:not(.record-income) #record-amount { border:0; border-bottom:1px solid #899a8c; background:transparent; box-shadow:none; padding-right:4px; }
#mobile-record-dialog .record-fields .record-stashed-stepper input { border:0; border-bottom:1px solid #899a8c; box-shadow:none; background:transparent; }
#mobile-record-dialog .record-native-select { display:none; }
#mobile-record-dialog .record-select { position:relative; min-width:0; color:var(--ink); }
#mobile-record-dialog .record-select summary { cursor:pointer; border-bottom:1px solid #899a8c; box-sizing:border-box; font:14px var(--sans); }
#mobile-record-dialog .record-select-options { position:absolute; left:0; right:0; top:100%; z-index:20; padding:4px; border:1px solid #899a8c; background:#f8faf4; box-shadow:0 4px 12px #302b2426; max-height:160px; overflow:auto; }
#mobile-record-dialog .record-select-options button { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--ink); font:13px var(--sans); }
#mobile-record-dialog .record-select-options button[aria-pressed="true"] { background:#dce8dd; }
#mobile-record-dialog .record-select :is(summary,button):focus-visible { outline:1px solid var(--indigo); outline-offset:-1px; }
#mobile-record-dialog #mcal { position:absolute; max-height:calc(100% - 24px); overflow:auto; }
@media(hover:hover) { #mobile-record-dialog .record-select-options button:hover { background:#e8eee5; } }
/* Mouse-sized desktop checks; the mobile sheet retains its touch geometry. */
#mobile-record-dialog.canonical-record-dialog[open] {
  width:min(760px,calc(100vw - 64px)); border:1px solid #9aaa9c; border-radius:12px;
  padding:10px; box-sizing:border-box;
}
#mobile-record-dialog.canonical-record-dialog::after {
  content:''; position:absolute; inset:6px; border:3px double #829486;
  border-radius:8px; pointer-events:none; z-index:30;
}
#mobile-record-dialog.canonical-record-dialog .record-fields { padding:8px 16px 4px; gap:6px 16px; }
#mobile-record-dialog .record-kind { grid-auto-rows:28px; }
#mobile-record-dialog .record-fields:not(.record-income) .record-kind { grid-template-columns:76px 76px; }
#mobile-record-dialog .record-kind button { min-height:28px; height:28px; font-size:12px; }
#mobile-record-dialog .record-fields input:not([type="checkbox"]),
#mobile-record-dialog .record-fields select { height:28px; min-height:28px; padding-top:2px; padding-bottom:2px; }
#mobile-record-dialog .record-fields:not(.record-income) #record-amount { font-size:23px; height:30px; min-height:30px; }
#mobile-record-dialog .record-date-controls,
#mobile-record-dialog .record-date-controls .date-btn { min-height:28px; height:28px; font-size:15px; }
#mobile-record-dialog .record-select summary { min-height:28px; height:28px; padding:4px; font-size:12px; }
#mobile-record-dialog .record-select-options button { min-height:26px; padding:4px 8px; font-size:12px; }
#mobile-record-dialog .record-options { grid-template-columns:max-content max-content max-content; justify-content:start; column-gap:24px; padding-top:2px; }
#mobile-record-dialog .record-options label,
#mobile-record-dialog .record-footer label { min-height:26px; font-size:12px; }
#mobile-record-dialog .record-fields .record-protection { padding-top:8px; gap:7px 16px; }
#mobile-record-dialog .record-protection button { min-height:28px; height:28px; padding:0; font-size:18px; }
#mobile-record-dialog .record-protection-status,
#mobile-record-dialog .record-help { font-size:11px; line-height:1.45; }
#mobile-record-dialog.canonical-record-dialog .mobile-record-toolbar { margin:4px 6px 0; padding:6px 10px 2px; min-height:30px; }
#mobile-record-dialog .mobile-record-toolbar button { min-height:28px; height:28px; padding:3px 12px; font-size:12px; }

/* Space icons from their labels without enlarging desktop controls. */
#mobile-record-dialog .record-footer label { gap:10px; }
#mobile-record-dialog .record-date-controls .date-btn { gap:7px; }

/* Cadence and held money share one desktop row; phone keeps its vertical form. */
#mobile-record-dialog .record-fields:not(.record-income) { grid-template-columns:72px 200px minmax(0,1fr) 185px; }
#mobile-record-dialog .record-fields:not(.record-income) :is(.record-kind,.record-name) { grid-column:1 / 4; }
#mobile-record-dialog .record-fields:not(.record-income) :is(.record-date,.record-amount,.record-end) { grid-column:4; }
#mobile-record-dialog .record-fields:not(.record-income) .record-protection { grid-column:3; grid-row:3; border:0; padding:0; margin:0; gap:4px 12px; min-width:0; align-self:start; }
#mobile-record-dialog .record-protection legend { padding:0 0 3px; font:italic 12px/1.4 var(--serif); color:#68644f; }
#mobile-record-dialog .record-fields:not(.record-income) .record-footer { grid-row:4; }
#mobile-record-dialog .record-fields:not(.record-income) .record-options { grid-column:1 / 4; grid-row:3; }
#mobile-record-dialog .record-fields[data-mode="bill"] .record-options { grid-row:4; }
#mobile-record-dialog .record-fields[data-mode="bill"] .record-footer { grid-row:5; }

/* Let the cadence menu float over the footer instead of clipping at the form. */
#mobile-record-dialog.canonical-record-dialog:has(.record-select[open]),
#mobile-record-dialog .record-fields:has(.record-select[open]) { overflow:visible; }
#mobile-record-dialog .record-select[open] { z-index:40; }
#mobile-record-dialog .record-protection .record-stashed-stepper { width:180px; max-width:100%; justify-self:start; }
#mobile-record-dialog .record-protection > .record-protection-status { text-align:left; }

/* Today agenda retains scrolling without visible rails or a reserved gutter. */
#view-plan #pg-cur:has(> .agenda-today-head),
#view-plan #pg-cur:has(> .agenda-today-head) :is(.sw-content,.rollup-wrap,.rollup-body) { scrollbar-width:none; scrollbar-gutter:auto; }
#view-plan #pg-cur:has(> .agenda-today-head)::-webkit-scrollbar,
#view-plan #pg-cur:has(> .agenda-today-head) :is(.sw-content,.rollup-wrap,.rollup-body)::-webkit-scrollbar { display:none; width:0; height:0; }

/* Keep the check's dismiss control inside the stitch and clear of field labels. */
#mobile-record-dialog.canonical-record-dialog .record-close { top:11px; right:12px; width:22px; height:22px; font-size:19px; }
#mobile-record-dialog.canonical-record-dialog .record-fields { padding-top:24px; }
#mobile-record-dialog #record-name { font-size:20px; line-height:1.2; }
#mobile-record-dialog .record-fields #record-amount,
#mobile-record-dialog .record-fields:not(.record-income) #record-amount { font-size:20px; line-height:1.2; }
#mobile-record-dialog :is(.record-field,.record-grace-option) > span:first-child { font-size:11px; line-height:1.4; }
#mobile-record-dialog .record-date-controls .date-btn { font-size:13px; }
#mobile-record-dialog .record-fields:not(.record-income) .record-amount::after { font-size:17px; }
#mobile-record-dialog .record-amount-stepper .inc-stepper { width:28px; height:28px; min-height:28px; font-size:18px; }
#mobile-record-dialog .record-amount-stepper { grid-template-columns:28px minmax(0,1fr) 28px; }

/* A faint paper tint distinguishes check types without adding visual weight. */
#mobile-record-dialog.canonical-record-dialog[open]:has(.record-fields[data-mode="bill"]) { background-color:#faf7ef; }
#mobile-record-dialog.canonical-record-dialog[open]:has(.record-fields[data-mode="stash"],.record-fields[data-mode="goal"]) { background-color:#f1f7ef; }
#mobile-record-dialog.canonical-record-dialog[open]:has(.record-fields.record-income) { background-color:#eff5fa; }

/* A due stash is one ledger line: bag, name, centered meter, date, amount. */
#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:32px minmax(0,1fr) minmax(100px,1fr) max-content 76px max(56px,var(--period-amount-width,64px));
  grid-template-rows:auto; column-gap:6px; padding:0 8px; min-height:36px;
}
#view-plan .goal-due-card .goal-due-bag { display:none; }
#view-plan .goal-due-card .goal-due-title { grid-row:1; }
#view-plan .goal-due-card .goal-due-meter { grid-column:3; grid-row:1; justify-self:start; width:min(100%,140px); }
#view-plan .goal-due-card .goal-due-date { grid-column:4; grid-row:1; align-self:center; white-space:nowrap; font:11px/1.4 var(--sans); }
#view-plan .goal-due-card .goal-due-amount { grid-column:6; grid-row:1; }
#view-plan .goal-due-card .goal-due-actions { grid-column:1; grid-row:1; justify-self:center; }
#view-plan .goal-due-card .goal-contributions-link { display:grid; place-items:center; height:28px; padding:0; }
#view-plan .goal-due-card .goal-contributions-link .stash-action-text { display:none; }
#view-plan .goal-due-card .goal-contributions-link .stash-action-icon { display:block; width:20px; height:20px; color:var(--green-dp); }
#view-plan .goal-due-card .goal-due-warning { grid-row:2; }

#view-plan .goal-due-card .goal-due-title { grid-column:2 / 4; }

#view-plan .goal-due-card.stash-ready .goal-readiness-control { right:calc(max(56px,var(--period-amount-width,64px)) + 46px); }

#view-schedule #monthly-view-control { margin-left:auto; margin-right:10px; }
#view-schedule #schMasterBtn { margin-left:0; }

/* A bill's past-due target uses the existing savings slot alongside cadence. */
#mobile-record-dialog .record-fields[data-mode="bill"]:has(.record-past-due:not([hidden])) .record-options { grid-template-columns:max-content max-content max-content; }
#mobile-record-dialog .record-past-due input { max-width:100px; }
.check-past-due { display:flex; align-items:center; gap:12px; font:12px var(--sans); }
.check-past-due input { width:100px; text-align:right; }

/* Past-due context spans the paper below cadence, rather than squeezing under held cash. */
#mobile-record-dialog .record-debt-message:not([hidden]) { grid-column:1 / -1; grid-row:4; padding:6px 10px; background:rgba(96,112,87,.055); border-radius:3px; display:grid; gap:2px; }
#mobile-record-dialog .record-debt-message .record-protection-status { min-height:0; }
#mobile-record-dialog .record-fields:has(.record-debt-message:not([hidden])) .record-options { grid-row:5; }
#mobile-record-dialog .record-fields:has(.record-debt-message:not([hidden])) .record-footer { grid-row:6; }

/* Keep held-money controls together and out of the adjacent end-date column. */
#mobile-record-dialog .record-fields[data-mode="bill"] .record-protection { grid-column:3; }
#mobile-record-dialog .record-protection .record-stashed-stepper { grid-template-columns:28px minmax(0,1fr) 28px; gap:4px; border-bottom:1px solid var(--bd2); background:rgba(96,112,87,.04); border-radius:3px 3px 0 0; }
#mobile-record-dialog .record-stashed-stepper > label { gap:4px; }
#mobile-record-dialog .record-stashed-stepper input { border-bottom:0; }

/* Paychecks use the same compact check face as bills and stashes. */
#mobile-record-dialog .record-fields.record-income { grid-template-columns:72px 200px minmax(0,1fr) 185px; }
#mobile-record-dialog .record-income .record-kind { grid-column:1 / 4; grid-row:1; align-self:center; }
#mobile-record-dialog .record-income .record-name { grid-column:1 / 4; grid-row:2; }
#mobile-record-dialog .record-income .record-date { grid-column:4; grid-row:1; }
#mobile-record-dialog .record-income .record-amount { grid-column:4; grid-row:2; }
#mobile-record-dialog .record-income .record-every { grid-column:1; grid-row:3; width:72px; }
#mobile-record-dialog .record-income .record-frequency { grid-column:2; grid-row:3; }
#mobile-record-dialog .record-income .record-end { grid-column:4; grid-row:3; }
#mobile-record-dialog .record-income .record-footer { grid-column:1 / -1; grid-row:4; }
#mobile-record-dialog .record-amount-stepper { gap:4px; }
#mobile-record-dialog .record-fields .record-amount-stepper #record-amount { font:italic 20px/1.2 var(--serif); height:30px; min-height:30px; padding:2px 2px 2px 16px; }
#mobile-record-dialog .record-amount-stepper::before { left:33px; font-size:20px; }

/* End of schedule sits at the foot of the check, beside Include in plan. */
#mobile-record-dialog .record-fields .record-footer { grid-column:1 / 4; align-self:end; }
#mobile-record-dialog .record-fields.record-income .record-end { grid-column:4; grid-row:4; }
#mobile-record-dialog .record-fields:not(.record-income) .record-end { grid-column:4; grid-row:4; }
#mobile-record-dialog .record-fields[data-mode="bill"] .record-end { grid-row:5; }
#mobile-record-dialog .record-fields:has(.record-debt-message:not([hidden])) .record-end { grid-row:6; }
#mobile-record-dialog .record-fields .record-end { align-self:end; }

/* Keep each debt setting's label with its value instead of stretching the pair. */
#mobile-record-dialog .record-options label:has(input[type="number"]) { justify-content:flex-start; gap:10px; }
#mobile-record-dialog .record-options input[type="number"],
#mobile-record-dialog .record-options .record-past-due-money { margin-left:0; }
#mobile-record-dialog .record-options input[type="number"] { width:64px; text-align:right; }

/* Savings shares the same full-width message, without an empty bill-options row. */
#mobile-record-dialog .record-fields:is([data-mode="stash"],[data-mode="goal"]):has(.record-debt-message:not([hidden])) .record-footer { grid-row:5; }

/* A subdued heading occupies the paycheck's upper-left margin. */
#mobile-record-dialog .record-income .record-paycheck-kind { align-self:start; transform:translateY(-12px); font-weight:700; color:var(--ink2); }

/* The late-payment row: Grace sits under Interval with carryover on its
   baseline at the right; Debt and Past due follow. */
#mobile-record-dialog .record-fields[data-mode="bill"] .record-options,
#mobile-record-dialog .record-fields[data-mode="bill"]:has(.record-past-due:not([hidden])) .record-options { grid-column:1 / -1; grid-template-columns:72px 200px minmax(0,1fr) 185px; column-gap:16px; row-gap:8px; }
#mobile-record-dialog .record-options .record-grace-option:has(input[type="number"]) { grid-column:1; grid-row:1; flex-direction:column; align-items:stretch; gap:1px; min-height:0; white-space:nowrap; }
#mobile-record-dialog .record-options .record-stays-option { grid-column:4; grid-row:1; align-self:end; justify-self:end; white-space:nowrap; }
/* Debt and Past due share one 28px row, so toggling Debt never resizes the dialog. */
#mobile-record-dialog .record-fields[data-mode="bill"] .record-options label { min-height:28px; }
#mobile-record-dialog .record-options .record-debt-option { grid-column:1; grid-row:2; }
#mobile-record-dialog .record-options .record-past-due:has(input[type="number"]) { grid-column:2 / 4; grid-row:2; }

/* Stack stash money fields in the same right-hand column. */
#mobile-record-dialog .record-fields:is([data-mode="stash"],[data-mode="goal"]) .record-protection { grid-column:4; }
#mobile-record-dialog .record-fields:is([data-mode="stash"],[data-mode="goal"]) .record-stashed-stepper { width:100%; }
#mobile-record-dialog .record-fields:not(.record-income) .record-amount::after { top:27px; }

/* Type tabs share the paycheck heading's upper-left position. */
#mobile-record-dialog .record-fields:not(.record-income) .record-kind { align-self:start; transform:translateY(-12px); }

/* Pin the shared footer within the stabilized desktop form, independent of type rows. */
#mobile-record-dialog.canonical-record-dialog .record-fields:not(.record-income) { position:relative; padding-bottom:58px; }
#mobile-record-dialog .record-fields:not(.record-income) .record-footer { position:absolute; left:0; right:0; bottom:4px; width:auto; }
#mobile-record-dialog .record-fields:not(.record-income) .record-end { position:absolute; right:16px; bottom:4px; width:185px; }
#mobile-record-dialog .record-options .record-grace-option input[type="number"] { flex:none; width:72px; text-align:left; }

/* Shared amount-label spacing keeps paycheck cadence on the same baseline. */
#mobile-record-dialog .record-income .record-amount { gap:1px; }

/* Give savings feedback breathing room without growing the form. */
#mobile-record-dialog .record-fields:is([data-mode="stash"],[data-mode="goal"]) .record-debt-message:not([hidden]) { transform:translateY(8px); }
#mobile-record-dialog .record-debt-message :is(.record-protection-status,.record-help) { color:#514f45; }
#mobile-record-dialog .record-debt-message .record-protection-status { font-weight:500; }

/* Make the available Prefund action visible without hover. */
#chart-title-plan[data-status="prefund"] {
  background:#984a3b; color:#fff; font-weight:800;
  min-height:34px; padding:5px 12px; border-radius:4px;
  text-decoration:none;
}
#chart-title-plan[data-status="prefund"]:focus-visible { box-shadow:inset 0 -2px #fff; }

/* Keep the graph locator visible inside the rail's clipped card track. */
#wishlist-rail .wishlist-card.wish-attention {
  outline:2px solid rgba(71,112,137,.7); outline-offset:-3px;
  background-color:#e6edf0;
}

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

#view-plan .goal-due-card .goal-contributions-link { width:36px; min-width:36px; }
#view-plan .goal-due-card.simple-goal .goal-due-actions .goal-contributions-link { width:32px; min-width:32px; height:32px; padding:6px; }
#view-plan .goal-due-card.simple-goal .goal-due-actions .goal-fuel-gauge { width:20px; height:16px; flex-basis:20px; }
#view-plan .goal-due-card.simple-goal .goal-fuel-gauge svg { width:20px; height:16px; }
@media (hover:hover) {
  #view-plan .goal-due-card.simple-goal:not(:hover):not(:focus-within) .goal-due-title > .goal-due-actions { opacity:0; pointer-events:none; }
}

/* Quiet until requested; an engaged lock remains visible. */
.today-stash-action:not(.is-locked) { opacity:0; pointer-events:none; }
.set-aside-drawer:focus-within > .today-stash-action,
.desktop-period-stat.savings:focus-within .today-stash-action,
.today-stash-action:focus-visible { opacity:1; pointer-events:auto; }
@media (hover:hover) {
  .set-aside-drawer:hover > .today-stash-action,
  .desktop-period-stat.savings:hover .today-stash-action { opacity:1; pointer-events:auto; }
}

@media(hover:hover){ .set-aside-lock-row:not(:hover):not(:focus-within):has(.set-aside-lock-action:not(.is-locked)) > .set-aside-stash-row > .goal-icon { visibility:visible; } }
.set-aside-lock-action:not(.is-locked) { opacity:0; pointer-events:none; }
.set-aside-lock-row:focus-within > .set-aside-lock-action { opacity:1; pointer-events:auto; }
@media(hover:hover){ .set-aside-lock-row:hover > .set-aside-lock-action { opacity:1; pointer-events:auto; } }

#view-schedule .pnav-center { width:min(460px,calc(100% - 170px)); min-width:0; }
#view-schedule #sch-pnav-datejump, #view-schedule #sch-date { display:none; }
/* Equal action gutters keep the search text centered with or without a query. */
#view-schedule #schedule-search { display:grid; grid-template-columns:40px minmax(0,1fr) 40px; }
#view-schedule #schedule-search > svg { grid-column:1; grid-row:1; justify-self:center; }
#view-schedule #schedule-search-input { grid-column:2; grid-row:1; text-align:center; }
#view-schedule #schedule-search-clear { grid-column:3; grid-row:1; }

/* Agenda keeps its name/date rhythm and shared checkbox and amount lanes. */
#view-plan .sw-content .rollup-body.today-agenda .bcard.goal-due-card {
  grid-template-columns:var(--agenda-hit,32px) minmax(0,1fr) 92px var(--period-amount-width,max-content);
  grid-template-rows:22px 18px; column-gap:10px; padding:10px;
  height:auto; min-height:60px; max-height:none;
}
#view-plan .today-agenda .goal-due-card .goal-due-title { grid-column:2; grid-row:1; font:550 14px/1.4 var(--sans); }
#view-plan .today-agenda .goal-due-card .goal-due-date { grid-column:2; grid-row:2; font:400 11px/1.4 var(--sans); }
#view-plan .today-agenda .goal-due-card .goal-due-amount { grid-column:4; grid-row:1 / 3; justify-self:end; font:500 14px/1.4 var(--sans); }
#view-plan .today-agenda .goal-due-card.stash-ready > .goal-readiness-control { grid-row:1 / 3; }
#view-plan .today-agenda .goal-due-card .goal-due-warning { grid-column:2 / -1; grid-row:3; }
/* Compact cash flow fits between cash and the switchable plan metric. */
.app[data-desktop-forecast-state="collapsed"] .desktop-compact-status {
  position:absolute; left:170px; right:180px; top:-5px; transform:none;
  width:auto; max-width:520px; height:64px; margin:0 auto; display:block;
}
.app[data-desktop-forecast-state="collapsed"] #compact-chart { display:block; }
.app[data-desktop-forecast-state="collapsed"] #desktop-compact-trend { display:none; }
.app[data-desktop-forecast-state="collapsed"] #desktop-compact-balance {
  display:block; position:absolute; top:0; left:0; right:0; margin:auto; width:max-content; max-width:100%; white-space:nowrap;
}
.app[data-desktop-forecast-state="collapsed"] #desktop-compact-status #chart-title-plan {
  display:block; position:absolute; left:0; right:0; top:13px; margin:0 auto;
  width:max-content; max-width:100%; min-height:12px; padding:0 4px;
  font:600 10px/1.2 var(--sans); border:0; border-radius:0; background:transparent; color:var(--ink2);
}
.app[data-desktop-forecast-state="collapsed"] #desktop-collapsed-today:not([hidden]) { position:absolute; left:-62px; top:31px; min-height:28px; padding:2px 6px; }
.app[data-desktop-forecast-state="collapsed"] #desktop-compact-balance { font-size:12px; line-height:13px; }
.app[data-desktop-forecast-state="collapsed"] #desktop-compact-status #chart-title-plan { font-size:11px; line-height:13px; }
@media(min-width:1200px) {
  #view-plan .today-savings-details .rollup-body.open { grid-template-columns:32px minmax(0,1fr) 68px; }
  #view-plan .today-savings-details .set-aside-stash-row { grid-template-rows:auto auto; min-height:56px; }
  #view-plan .today-savings-details .set-aside-stash-row > .goal-icon { grid-column:1; grid-row:1/3; }
  #view-plan .today-savings-details .set-aside-name { grid-column:2; grid-row:1; }
  #view-plan .today-savings-details .set-aside-amount { grid-column:3; grid-row:1; }
  #view-plan .today-savings-details .set-aside-meter { grid-column:2/4; grid-row:2; width:100%; }
  #view-plan .set-aside-stash-row:is(.selected,:focus-visible),
  #view-plan .set-aside-lock-row:focus-within > .set-aside-stash-row { outline:none; border-radius:2px; box-shadow:inset 0 0 0 1px var(--row-focus); }
  #view-plan .set-aside-lock-row > .set-aside-lock-action { bottom:1px; }
  #view-plan .sw-content > .set-aside-drawer:not(.today-savings-details) > .rollup-tab { padding-inline:0; }
  /* Today section headings share the Set aside text edge in either state. */
  #view-plan #pg-cur.period-today .sw-content > .rollup-wrap { padding-left:10px; }
  #view-plan #pg-cur.period-today .sw-content > .rollup-wrap > .rollup-tab { padding-left:0; }
  #view-plan .set-aside-drawer:not(.today-savings-details) { grid-template-columns:minmax(0,1fr) 32px max-content max(68px,var(--period-amount-width,64px)); column-gap:12px; }
  #view-plan .set-aside-drawer > .today-stash-action { width:auto; min-width:32px; padding-inline:6px; gap:6px; }
  #view-plan .set-aside-drawer .sa-act-label { display:inline; font:500 10px/1.2 var(--sans); }
  #view-plan .set-aside-drawer .set-aside-note { display:block; grid-column:1/-1; margin:4px 0 8px; font:400 11px/1.4 var(--sans); color:var(--ink2); }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill:not(.goal-card) { grid-template-columns:32px minmax(0,1fr) 80px 76px max(64px,var(--period-amount-width,64px)); min-height:32px; height:32px; max-height:none; padding-block:0; }
  #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 { grid-column:3; grid-row:1; color:var(--ink2); font:400 10px/1.4 var(--sans); white-space:nowrap; }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill .transport { grid-column:4; grid-row:1; display:grid; grid-template-columns:32px 12px 32px; }
  #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 .transport .tr-label { display:none; }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill .bcard-amt { grid-column:5; grid-row:1; font:500 13px/1.2 var(--serif); color:var(--ink); }
}
@media(min-width:1200px) {
  #view-plan .set-aside-drawer:not(.today-savings-details) { grid-template-columns:minmax(0,1fr) max-content max(68px,var(--period-amount-width,64px)); column-gap:12px; }
  #view-plan .set-aside-drawer > .rollup-tab-amt { font:500 17px/1.25 var(--serif); }
}
@media(min-width:1200px) {
  /* Bills and savings share the same readable, compact ledger rhythm. */
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill:not(.goal-card) { min-height:46px; height:46px; padding-block:3px; }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill .bcard-name { font:600 14px/1.4 var(--sans); }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill .bcard-amt { font:500 15px/1.3 var(--serif); }
  #view-plan .set-aside-drawer > .rollup-body.open { grid-template-columns:32px minmax(0,1fr) minmax(100px,130px) max(68px,var(--period-amount-width,64px)); column-gap:8px; padding:0; }
  #view-plan .set-aside-drawer .set-aside-stash-row { box-sizing:border-box; min-height:46px; height:46px; padding:5px 0; border:0; border-bottom:1px solid var(--rule); border-radius:0; box-shadow:none; }
  #view-plan .set-aside-drawer .set-aside-name { font:600 13px/1.4 var(--sans); }
  #view-plan .set-aside-drawer .set-aside-meter { display:flex; align-items:center; gap:6px; width:100%; max-width:none; }
  #view-plan .set-aside-drawer .stash-meter-labels { display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; font:400 10px/1.3 var(--sans); }
  #view-plan .set-aside-drawer .stash-meter { flex:0 0 36px; height:4px; margin:0; }
  #view-plan .set-aside-drawer .set-aside-amount { font:500 15px/1.3 var(--serif); padding:0; }
  #view-plan #pg-cur.period-today .sw-content > .rollup-wrap > .rollup-tab { padding-left:0; }
  #view-plan .set-aside-heading > .rollup-tab { padding-left:0; }
}
@media(min-width:1200px) {
  #view-plan .set-aside-heading .rollup-tab-left { gap:12px; }
}
@media(min-width:1200px) {
  #view-plan .sw-page .sw-content > .rollup-wrap { padding-left:10px; }
  #view-plan .sw-page .sw-content > .rollup-wrap > .rollup-tab { padding-left:0; }
  #view-plan .set-aside-drawer .set-aside-stash-row { height:38px; min-height:38px; padding:3px 0; }
}


/* Required Goal contributions share Due's ledger, with the existing compact rhythm. */
@media (min-width:1200px) {
  #view-plan .period-bill-drawer .set-aside-stash-row { box-sizing:border-box; grid-template-columns:32px minmax(0,1fr) minmax(100px,150px) max(68px,var(--period-amount-width,64px)); grid-template-rows:auto; height:38px; min-height:38px; padding:3px 8px; gap:8px; border-bottom:1px solid var(--rule); }
  #view-plan .period-bill-drawer .set-aside-stash-row > .goal-icon { grid-column:1; grid-row:1; }
  #view-plan .period-bill-drawer .set-aside-name { grid-column:2; grid-row:1; font:500 12px/1.4 var(--sans); }
  #view-plan .period-bill-drawer .set-aside-meter { grid-column:3; grid-row:1; width:100%; max-width:none; }
  #view-plan .period-bill-drawer .set-aside-amount { grid-column:4; grid-row:1; padding:0; color:var(--ink); font:500 14px/1.4 var(--serif); }
}


/* Bill identity, dates, timing and amounts keep one alignment in every period. */
@media(min-width:1200px) {
  #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:32px minmax(0,1fr) 112px max(64px,var(--period-amount-width,64px)); grid-template-rows:20px 16px; height:46px; min-height:46px; padding:5px 8px; gap:0 8px; align-items:center; }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-timing-slack .bcard-name,
  #view-plan .today-agenda .bcard.has-timing-slack .bcard-name { grid-column:2; grid-row:1; align-self:end; }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-timing-slack .bcard-meta,
  #view-plan .today-agenda .bcard.has-timing-slack .bcard-meta { grid-column:2; grid-row:2; align-self:start; display:flex; gap:6px; min-width:0; padding:0; font:400 10px/16px var(--sans); white-space:nowrap; overflow:hidden; }
  #view-plan .bcard.has-timing-slack .bill-due-date { flex:0 0 auto; }
  #view-plan .bcard.has-timing-slack .bill-row-exception { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-timing-slack .ledger-check,
  #view-plan .today-agenda .bcard.has-timing-slack .agenda-check { grid-column:1; grid-row:1/3; align-self:center; }
  #view-plan .rollup-body .bcard.ledger-bill.compact-bill.has-timing-slack .transport,
  #view-plan .today-agenda .bcard.has-timing-slack .transport { grid-column:3; grid-row:1/3; align-self:center; display:grid; grid-template-columns:32px 48px 32px; gap:0; width:112px; opacity:1; pointer-events:auto; }
  #view-plan .bcard.has-timing-slack .bill-slack { grid-column:2; grid-row:1; justify-self:center; }
  #view-plan .bcard.has-timing-slack .bill-timing-step[data-direction="-1"] { grid-column:1; grid-row:1; }
  #view-plan .bcard.has-timing-slack .bill-timing-step[data-direction="1"] { grid-column:3; grid-row:1; }
  #view-plan .bcard.has-timing-slack .bill-timing-step { visibility:hidden; }
  #view-plan .bcard.has-timing-slack .transport:focus-within .bill-timing-step { visibility:visible; }
  @media(hover:hover) { #view-plan .bcard.has-timing-slack .transport:hover .bill-timing-step { visibility:visible; } }
  #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; align-self:center; padding:0; text-align:right; }
}

/* Design consistency pass (2026-10-09).
   Due and Plan / Stashed share one row frame: the same inset, the same serif
   amount column, and the Show completed control sits beside that column rather
   than covering the heading's rule. */
#view-plan .sw-content > .rollup-wrap.period-bill-drawer:not(:has(> .today-agenda)) { padding-inline:10px; }
#view-plan .period-bill-drawer.has-completed-toggle > .rollup-tab { padding-right:0; }
#view-plan .period-bill-drawer > .rollup-tab > .rollup-tab-left { flex:1 1 auto; min-width:0; }
#view-plan .period-bill-drawer .unpaid-total { order:9; margin-left:auto; min-width:max(68px,var(--period-amount-width,64px)); color:var(--ink); font:500 17px/1.25 var(--serif); font-variant-numeric:tabular-nums; text-align:right; }
#view-plan .period-bill-drawer .unpaid-word { display:none; }
#view-plan .sticky-period-sections .sw-content > .period-bill-drawer > .show-completed-toggle { align-self:start; min-height:0; height:calc(100% - 1px); margin-right:calc(max(68px,var(--period-amount-width,64px)) + 16px); }
/* Counts beside section headings read the same in every section; the Due
   heading itself stays the stronger label so set-asides never outrank bills. */
#view-plan .sw-content > .rollup-wrap > .rollup-tab .rollup-tab-detail { font:600 11px var(--sans); }
/* The Stash ticket's double rule sits 7px inside its edge; keep the text clear
   of it, and give its state tag the same pill as every other wishlist state. */
#wishlist-rail .wishlist-goal-card.is-ticket { padding:16px 18px 12px; }
#wishlist-rail .is-ticket .wish-state { justify-self:start; padding:3px 7px; border-radius:var(--r-pill); background:rgba(138,106,24,.11); font:600 11px/14.3px var(--sans); }

/* Stash progress reads on one line: "$283 of $850 · due Oct 30" then the meter,
   using the room to the left instead of stacking beside the amount. */
@media(min-width:1200px) {
  #view-plan .set-aside-drawer > .rollup-body.open { grid-template-columns:32px minmax(0,1fr) minmax(220px,300px) max(68px,var(--period-amount-width,64px)); }
  #view-plan .period-bill-drawer .set-aside-stash-row { grid-template-columns:32px minmax(0,1fr) minmax(220px,300px) max(68px,var(--period-amount-width,64px)); }
  #view-plan :is(.set-aside-drawer,.period-bill-drawer) .stash-meter-labels { flex-direction:row; align-items:baseline; justify-content:flex-end; gap:8px; flex:1 1 auto; white-space:nowrap; }
  #view-plan :is(.set-aside-drawer,.period-bill-drawer) .stash-meter-labels > span:empty { display:none; }
  #view-plan :is(.set-aside-drawer,.period-bill-drawer) .set-aside-meter { display:flex; align-items:center; gap:10px; }
  #view-plan :is(.set-aside-drawer,.period-bill-drawer) .stash-meter { flex:0 0 64px; height:4px; margin:0; }
}

/* The Padding change hint is a phone wallet cue; the desktop masthead stays as is. */
#padding-hint { display: none; }

/* ── Outlook design B on desktop (2026-10-12) ─────────────────────────────
   Cash on hand stays left and Padding right on both Plan and Outlook.
   Each period card shows the split bar and Bills / Later bills /
   Saving or Saved / Padding, and the ledger beside it uses the same names. */
:root { --seg-bills:#4a3d2c; --seg-stash:#c2a35a; --seg-later:#d8d0c4; --seg-padding:#43688f; --seg-short:#b03820; }

#view-plan .split-desk .desktop-period-ledger { display:none !important; }
#view-plan .split-desk .forecast-period-total { display:none !important; }
#view-plan .desk-split { margin:14px 20px 4px; }
#view-plan .desk-split .split-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; color:var(--ink2); font:500 12px/1.5 var(--sans); }
#view-plan .desk-split .split-head strong { font:500 15px/1.3 var(--serif); color:var(--ink); font-variant-numeric:tabular-nums; }
#view-plan .desk-split .split-bar { display:flex; gap:2px; height:10px; margin:10px 0 6px; border-radius:5px; overflow:hidden; background:var(--seg-later); }
#view-plan .desk-split .split-bar.is-short { box-shadow:0 0 0 2px var(--seg-short); }
#view-plan .desk-split .split-seg { display:block; flex-basis:0; min-width:3px; }
#view-plan .desk-split .seg-bills { background:var(--seg-bills); }
#view-plan .desk-split .seg-later { background:var(--seg-later); }
#view-plan .desk-split .seg-stash { background:var(--seg-stash); }
#view-plan .desk-split .seg-padding { background:var(--seg-padding); }
#view-plan .desk-split .split-row { display:flex; align-items:center; gap:10px; min-height:34px; padding:4px 0; color:var(--ink); font:400 14px/1.3 var(--sans); }
#view-plan .desk-split .split-label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-plan .desk-split .split-when { margin-left:6px; font:400 12px/1.3 var(--sans); color:var(--ink3); }
#view-plan .desk-split .split-amt { font:400 16px/1.25 var(--serif); font-variant-numeric:tabular-nums; white-space:nowrap; }
#view-plan .desk-split .split-chip { flex:0 0 10px; width:10px; height:10px; border-radius:2px; }
#view-plan .desk-split .split-bills .split-chip { background:var(--seg-bills); }
#view-plan .desk-split .split-later .split-chip { background:var(--seg-later); box-shadow:inset 0 0 0 1px rgba(74,58,38,.25); }
#view-plan .desk-split .split-stash .split-chip { background:var(--seg-stash); }
#view-plan .desk-split .split-padding .split-chip { background:var(--seg-padding); }
#view-plan .desk-split .split-later :is(.split-label,.split-amt) { color:var(--ink2); }
#view-plan .desk-split .split-padding :is(.split-label,.split-amt) { color:var(--seg-padding); font-weight:700; }
#view-plan .desk-split .split-short .split-chip { background:var(--seg-short); }
#view-plan .desk-split .split-short :is(.split-label,.split-amt) { color:var(--seg-short); font-weight:700; }
#view-plan .desk-split .split-link { padding:0; border:0; background:transparent; color:inherit; cursor:pointer; text-decoration:underline dotted color-mix(in srgb,currentColor 45%,transparent); text-decoration-thickness:1px; text-underline-offset:4px; }
#view-plan .desk-split .split-link:focus-visible { outline:none; text-decoration-style:solid; }
@media (hover:hover) { #view-plan .desk-split .split-link:hover { text-decoration-style:solid; } }
#view-plan .split-desk .rollup-tab-lbl .split-when { margin-left:6px; font:400 12px/1.3 var(--sans); color:var(--ink3); }
/* Bills before and after the payday are one stream: same type, only the date differs. */
#view-plan .desk-split .split-later :is(.split-label,.split-amt,.split-link) { color:var(--ink); }
/* Padding keeps its shared type on both tabs, without a hover underline. */
.outlook-v2 .app #stash-funding-metric #stash-funding-percent[data-allowance="true"] { font-size:32px; line-height:30px; font-weight:500; }
@media (hover:hover) { .outlook-v2 .app #stash-funding-metric:hover strong { text-decoration:none; } }
.outlook-v2 .app #stash-funding-metric:focus-visible { text-decoration:none; }
.outlook-v2 .app #stash-funding-metric:focus-visible strong { text-decoration:underline; text-underline-offset:4px; }
#view-plan .desk-split .split-padding :is(.split-label,.split-amt) { font-weight:600; }
/* 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; }

/* Cash is an editable source figure, kept quieter than the planning metric. */
.desktop-money-fact.cash strong { font:400 24px/1.15 var(--serif); }
.cash-head-wrap { align-items:flex-end; }
#protection-review .protection-summary strong { font:400 17px/1.2 var(--serif); }

/* Bills & paychecks opens editing paper; Outlook is the permanent desk. */
.desktop-top-nav { align-self:center; align-items:center; padding:0; height:auto; }
#view-schedule.plan-editor-sheet { top:calc(var(--plan-sheet-top,50%) + 8px); left:16px; right:calc(var(--drawer-space) + 16px); bottom:0; padding:0; z-index:8; }
#view-schedule.plan-editor-sheet .inc-scroll { flex:1; min-height:0; width:100%; margin:0; padding:0 20px 16px; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:24px; background:transparent; }
#view-schedule.plan-editor-sheet .plan-pane { min-height:0; padding:0; background:transparent; box-shadow:none; border:0; }
#view-schedule.plan-editor-sheet .pnav-center { max-width:460px; }

/* Equal column headings on the editing sheet's shared paper surface. */
#view-schedule.plan-editor-sheet :is(#hdr-inc,#hdr-bill) {
  height:58px; min-height:58px; max-height:58px; flex:0 0 58px;
  margin:0; padding:4px 2px 8px; box-sizing:border-box;
  background:none; box-shadow:none; border:0; border-bottom:1px solid var(--rule-2);
  align-items:center;
}


/* Editing search belongs to the woven chrome; only the records slide below it. */
#plan-editor-toolbar {
  position:absolute; top:var(--plan-chrome-top,50%); left:0; right:var(--drawer-space); z-index:7;
  display:flex; align-items:center; height:42px; min-height:42px; max-height:42px;
  box-sizing:border-box; padding:0 36px; margin:0;
  background-color:var(--pg-soft); background-image:var(--cloth-weave); background-size:auto;
  border-block:1px solid var(--rule); box-shadow:none;
}
#plan-editor-toolbar[hidden] { display:none; }
#plan-editor-toolbar .pnav-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px) minmax(0,1fr); position:static; align-items:center; gap:10px; width:100%; height:40px; padding:0; }
#plan-editor-toolbar .pnav-center { grid-column:2; grid-row:1; position:static; transform:none; min-width:0; width:100%; max-width:460px; padding:0; margin:0; }
#plan-editor-toolbar :is(#sch-pnav-datejump,#sch-date,#mobile-plan-range,.schedule-forecast-ledger) { display:none; }
#plan-editor-toolbar #schedule-search { display:grid; grid-template-columns:32px minmax(0,1fr) auto 32px; max-width:none; height:36px; gap:0; }
#plan-editor-toolbar #schedule-search > svg { grid-column:1; grid-row:1; justify-self:center; }
#plan-editor-toolbar #schedule-search-count { grid-column:3; grid-row:1; margin-inline:8px; }
#plan-editor-toolbar #schedule-search-input { grid-column:2; grid-row:1; height:36px; padding-inline:8px; box-sizing:border-box; font-size:15px; text-align:left; }
#plan-editor-toolbar #schedule-search-input:placeholder-shown { text-align:center; }
#plan-editor-toolbar #schedule-search-clear { grid-column:4; grid-row:1; width:32px; height:36px; }
#view-schedule.plan-editor-sheet > .plan-sheet-grip { height:34px; }
#plan-card-controls { display:flex; align-items:center; gap:7px; position:absolute; top:0; right:34px; z-index:1; height:34px; color:var(--ink2); font:500 11px/1 var(--sans); }
#plan-card-controls > span { order:-1; }
/* Keep the master and bill switches on one axis even when cadence wraps. */
#view-schedule.plan-editor-sheet .plan-bills .inc-card.is-collapsed { padding-right:12px; }
#plan-card-controls #schMasterBtn { position:static; flex:none; width:34px; min-width:34px; height:34px; min-height:34px; margin:0; }
#plan-editor-toolbar #monthly-view-control { grid-column:3; grid-row:1; justify-self:end; margin:0; }
#plan-editor-toolbar #monthly-view-control[hidden] { display:none; }


/* A bottom-edge tab opens the temporary editing card from the desk. */
.app { --foot-h:36px; }
.desktop-plan-footer { display:flex; grid-column:1; grid-row:3; align-items:flex-end; justify-content:center; height:var(--foot-h); min-height:0; margin-right:var(--drawer-space); padding:0 36px; position:relative; z-index:8; background-color:#f0ede6; background-image:var(--agenda-grain); }
.desktop-plan-footer #desktop-nav-schedule { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:32px; min-width:116px; padding:0 18px; border:1px solid var(--rule-3); border-bottom:0; border-radius:8px 8px 0 0; background:var(--paper); background-image:var(--agenda-grain); color:var(--nav-plan-color); box-shadow:0 -2px 7px rgba(74,58,38,.09); font:600 13px/1 var(--sans); cursor:pointer; }
.desktop-plan-footer #desktop-nav-schedule svg { width:16px; height:16px; flex:none; }
.desktop-plan-footer #desktop-nav-schedule[aria-expanded="true"] { background:var(--nav-plan-color); color:#fff; border-color:var(--nav-plan-color); }
.desktop-plan-footer #desktop-nav-schedule[aria-expanded="true"] svg { transform:rotate(180deg); }
.desktop-plan-footer #desktop-nav-schedule:focus-visible { outline:2px solid var(--indigo); outline-offset:2px; }
@media(hover:hover){ .desktop-plan-footer #desktop-nav-schedule:hover:not([aria-expanded="true"]) { background:var(--paper-hi); box-shadow:0 -3px 9px rgba(74,58,38,.14); } }
#stats-strip:has(#sel-area[style*="display: flex"]),
#stats-strip:has(#sel-area[style*="display:flex"]) { bottom:calc(var(--foot-h) + 8px); }

/* The amount and its small edit/clear action share the existing money band. */
.cash-metric-wrap { position:absolute; right:22px; top:16px; display:flex; align-items:flex-end; gap:0; }
.cash-metric-wrap #stash-funding-metric { position:static; }
#pocket-budget-action { margin-bottom:-3px; }