/* =====================================================================
   POP BENTO EVERYWHERE — fix layer (2026-07-25, Fable final-QA pass)

   🔴 RULING (Nick, verbatim intent, 2026-07-25): "everything was supposed to
   look like this [the Health screen]" — Pop Bento app-wide, INCLUDING Home.
   This SUPERSEDES the execution brief §1.1 "keep both systems" ruling.
   css/reskin-warm.css (the WP-7 Warm override layer) is REMOVED from
   index.html — bento.css's Waves 2+3 pop treatment (Jul-9, Nick-approved
   "reskin the whole app like this") shows through again on Home, Calendar,
   To-Do, Finances, Shopping, Extras.

   This sheet keeps ONLY the parts of the removed warm layer that were
   genuine FIXES (not skin), plus small pop-alignment polish:
     §1 skeleton loading rows (the "Placeholder personal task" replacement)
     §2 wrapping / truncation / 375px safety fixes
     §3 evening red-shift — extended to EVERY view (was missing on
        Home / Health / Updates even before this pass)
     §4 floating pills ("Skippy's watching" / "Ask Skippy") — compact to
        icon circles on phones so they stop covering content (WP-7 item
        the overseer left to this pass)
     §5 Home pulse + capture entry — pop polish (hard outline language)
   NO page-level max-width caps anywhere — banned (the WP-7 mid-width bug).
   Visual layer only: zero selector renames, zero behavior changes.
   ===================================================================== */

/* =====================================================================
   1. Skeleton loading rows (To-Do / Shopping) — quiet ink shimmer
   ===================================================================== */
#view-todo .td-skel, #view-shopping .td-skel{ pointer-events:none; }
#view-todo .td-skel .chk, #view-shopping .td-skel .chk{ border-color:var(--pb-line,rgba(25,22,33,.16)); opacity:.6; }
#view-todo .sk-line, #view-shopping .sk-line{
  height:12px; width:62%; border-radius:6px;
  background:linear-gradient(90deg, rgba(25,22,33,.08) 25%, rgba(25,22,33,.16) 37%, rgba(25,22,33,.08) 63%);
  background-size:400% 100%; animation:popSkel 1.4s ease-in-out infinite;
}
#view-todo .td-skel:nth-child(2) .sk-line{ width:48%; }
#view-todo .td-skel:nth-child(3) .sk-line{ width:70%; }
@keyframes popSkel{ 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion:reduce){ #view-todo .sk-line, #view-shopping .sk-line{ animation:none; } }

/* =====================================================================
   2. Wrapping / truncation / 375px safety (ported fixes, token-free)
   ===================================================================== */
#view-calendar .cal-allday-chip{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#view-calendar .cal-timeline{ overflow-x:hidden; }
#view-calendar .cal-block{ max-width:100%; }
#view-todo .td-prio .pt, #view-todo .td-prio .pw,
#view-shopping .td-prio .pt,
#view-todo .todo-noah-intro,
#view-extras .xtr-note, #view-extras .vlb-n, #view-extras .vlb-note,
#view-extras .bc-collapse summary{ overflow-wrap:anywhere; }
#view-extras .bc-name, #view-extras .med-name, #view-extras .xtr-item-name{ min-width:0; }
/* no one-word-per-line columns: every grid/flex child may shrink */
#view-home *, #view-calendar *, #view-todo *, #view-shopping *,
#view-finances *, #view-extras *, #view-updates *{ min-width:0; }
@media (max-width:400px){
  #view-finances .fin-months{ flex-wrap:wrap; }
  #view-shopping .segmented, #view-finances .segmented, #view-todo .segmented,
  #view-extras .segmented{ flex-wrap:wrap; }
}

/* =====================================================================
   3. Evening red-shift — ALL views (the house runs red incandescent after
   sunset; js/evening.js sets :root[data-evening]). Uniform filter is used
   because bento hardcodes #fff on many surfaces token flips can't reach.
   Per-view (not app-wide) so fixed chrome (tabbar, pills, modals) is not
   trapped in a filter containing-block.
   ===================================================================== */
:root[data-evening] #view-home,
:root[data-evening] #view-health,
:root[data-evening] #view-calendar,
:root[data-evening] #view-todo,
:root[data-evening] #view-shopping,
:root[data-evening] #view-finances,
:root[data-evening] #view-extras,
:root[data-evening] #view-updates,
:root[data-evening] #view-business,
:root[data-evening] #view-actions,
:root[data-evening] #view-skippy{
  filter:brightness(.82) contrast(.97) sepia(.34) hue-rotate(-14deg) saturate(1.16);
  /* opaque paper behind each filtered view — without it the dark body bleeds
     through and ink headings (the greeting) go dark-on-dark */
  background:var(--pb-paper,#f3f5f6);
}
:root[data-evening] body{ background:#241813; }

/* =====================================================================
   4. Floating pills — stop covering content on phones (WP-7 leftover).
   ≤899px: icon-only circles (labels stay in DOM for a11y, visually hidden),
   stacked tight bottom-right above the tabbar. Desktop keeps labels.
   ===================================================================== */
@media (max-width:899px){
  .sk-fab, .fl-fab{ padding:0; width:46px; height:46px; border-radius:50%; justify-content:center; }
  .sk-fab .sk-fab-txt, .fl-fab .fl-fab-txt{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .fl-fab{ bottom:calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 68px); }
  /* count badge rides the circle's corner instead of inline */
  .fl-fab .fl-fab-badge{ position:absolute; top:-4px; right:-4px; }
}

/* =====================================================================
   5. Home pulse card + capture entry — pop alignment (Health-bar language:
   ink outline, sticker shadow on the feature card, Bricolage title)
   ===================================================================== */
#view-home .skp-card{
  background:#fff; border:1.5px solid var(--pb-ink,#191621);
  border-radius:26px; box-shadow:4px 4px 0 var(--pb-ink,#191621);
}
#view-home .skp-title{ font-family:var(--pb-head,"Bricolage Grotesque",sans-serif); font-weight:800; letter-spacing:-.02em; }
#view-home .skp-row{ border:1.5px solid var(--pb-line,rgba(25,22,33,.16)); border-radius:16px; background:#fff; }
/* quiet one-line capture entry (js/capture.js renders .cap9-entry) */
.cap9-entry{
  display:inline-flex; align-items:center; gap:6px; margin:2px 0 10px;
  font-family:var(--pb-num,"Space Grotesk",sans-serif); font-size:12px; font-weight:600;
  color:var(--pb-dim,#6f6a78); background:none; border:none; cursor:pointer; padding:0;
}
.cap9-entry:hover{ color:var(--pb-ink,#191621); }

/* =====================================================================
   6. Home H&S tile — the "H&S · WEEK OF JUL 6" one-word-per-line column
   (WP-7 layout bug, root-caused: the inline judgment pill squeezed
   .hm-biz-left to ~0px width). Pill wraps to its own row; label ellipsizes.
   ===================================================================== */
#view-home .hm-biz{ flex-wrap:wrap; align-content:flex-start; }
#view-home .hm-biz-left{ flex:1 1 100%; min-width:0; }
#view-home .hm-biz-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-home .hm-biz .hm-pill{ margin-top:8px; }

/* =====================================================================
   7. "Out of range only" filter — REPAIR (found live in the Fable audit).
   bento.css styles marker tiles as `#view-health .dc-m{display:flex}`
   (specificity 1-1-0), which silently overrode styles.css's
   `.hp-panel.oor-only .dc-m:not(.oor){display:none}` (0-4-0) — the filter
   toggled its classes but hid nothing. Same-ID, higher class count wins.
   ===================================================================== */
/* !important because bento's `#view-health #hp-nick .dc-m` selector carries
   TWO ids (2-1-0) — no class-stack can outrank it; bento's display is not
   !important, so this wins cleanly on every member panel. */
#view-health .hp-panel.oor-only .dc-m:not(.oor){ display:none !important; }
#view-health .hp-panel.oor-only .dc-sgrp{ display:none !important; }

/* =====================================================================
   8. DATA-TAB CLEANUP (Nick, 2026-07-25: "redundant as hell" / "messy" /
   "cutoff slop") — trend chains never wrap mid-token, marker names may
   take 2 lines instead of amputating ("Cortisol ser…"), Skippy's-read
   list compacts (it's the projected-to-today view, not a second wall).
   ===================================================================== */
#view-health .dc-m .trend{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-health .dc-m .nm{ white-space:normal; overflow-wrap:break-word; line-height:1.25; }
#view-health .he-row{ padding:6px 0; }
#view-health .he-now{ font-size:12.5px; }
#view-health .he-meas{ font-size:10px; opacity:.75; }
@media (min-width:1100px){
  #view-health .he-list{ column-count:2; column-gap:26px; }
  #view-health .he-row{ break-inside:avoid; }
}

/* =====================================================================
   9. HOME PULSE — compact chip-row (Nick: "could be WAY smaller and fit
   in with the rest of the bubbles... i dont have to scroll past it").
   Title+eyebrow shrink, explainer prose hides, the 4 domain rows become
   side-by-side chips on one band.
   ===================================================================== */
#view-home .skp-card{ padding:12px 16px 10px; }
#view-home .skp-sub, #view-home .skp-foot{ display:none; }
#view-home .skp-head{ display:inline; }
#view-home .skp-eyebrow{ font-size:10px; }
#view-home .skp-title{ display:inline; font-size:15px; margin:0 0 0 8px; }
#view-home .skp-rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
@media (min-width:700px){ #view-home .skp-rows{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
#view-home .skp-row{ padding:7px 8px; margin:0; gap:7px; }
#view-home .skp-fuel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; }
/* 🔴 2026-07-27 (audit P2-8) — root cause: at the 375px 2-col grid, each .skp-row is only
   ~150px wide; the fixed-width .skp-chip ("↗ Growing") + its gaps left .skp-rowtxt only
   ~28px wide. .skp-dm never had overflow-hiding, so a longer label ("Parenting"/"Business")
   didn't wrap (one word, white-space:normal) — it overflowed its own box and visually
   painted over/behind the chip instead of clipping cleanly. Fix: reclaim a few px from the
   row gap/padding/dot, AND give the label the same ellipsis treatment .skp-fuel already
   has, so a long label truncates ("Parentin…") instead of overlapping the chip. */
#view-home .skp-dot{ width:7px; height:7px; }
#view-home .skp-dm{
  font-size:11.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#view-home .skp-chip{ font-size:9.5px; padding:2px 6px; gap:3px; }

/* =====================================================================
   10. DESKTOP DENSITY (Nick: "'calendar' and date could go on same line
   on desktop... unnecessary negative space needs to be removed anywhere
   possible" — applied where it fits naturally, not forced).
   ===================================================================== */
@media (min-width:1100px){
  /* global: headers sit tighter, sections breathe less */
  .topbar{ padding-top:16px; padding-bottom:6px; }
  .view .section-title{ margin-top:14px; }
  /* CALENDAR — title + date share one line; the Upcoming column rises */
  #view-calendar .topbar{ padding-bottom:2px; }
  #view-calendar .page{ position:relative; padding-top:6px; }
  #view-calendar .page > .pp-mount:first-child{
    position:absolute; top:-52px; right:0; margin:0; z-index:2;
  }
  #view-calendar .page > .pp-mount:first-child > *{
    display:flex; align-items:baseline; gap:10px; justify-content:flex-end;
  }
  #view-calendar .pp-cal-eyebrow{ font-size:11px; }
  #view-calendar .pp-cal-day{ font-size:22px; }
  #view-calendar .pp-cal-num{ font-size:26px; }
  #view-calendar .pp-cal-sub{ font-size:12px; }
  /* SHOPPING — compact hero; the sparse list doesn't get a stadium */
  #view-shopping .pp-hero{ padding:16px 20px; }
}

/* =====================================================================
   11. FINANCES SNAPSHOT COLUMNS (Nick, 2026-07-26: "lots of negative
   space"). app.js now wraps the four cards in two .fin-col wrappers so
   each desktop column packs independently — no hole under the short
   right stack (the old column-count flow left the bottom of column 2
   empty). Mobile keeps the ORIGINAL card order (summary · balances ·
   decision · insights) via display:contents + order.
   ===================================================================== */
#fin-snapshot-panel .fin-top{ display:flex; flex-direction:column; }
#fin-snapshot-panel .fin-col{ display:contents; }
#fin-snapshot-panel .fin-col:first-child > :nth-child(1){ order:1; } /* Actual (summary) */
#fin-snapshot-panel .fin-col:last-child  > *{ order:2; }             /* Live balances */
#fin-snapshot-panel .fin-col:first-child > :nth-child(2){ order:3; } /* Needs your decision */
#fin-snapshot-panel .fin-col:first-child > :nth-child(3){ order:4; } /* Insights */
@media (min-width:1100px){
  #fin-snapshot-panel .fin-top{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:20px; align-items:start;
  }
  #fin-snapshot-panel .fin-col{ display:block; min-width:0; }
}

/* =====================================================================
   12. STATEMENT HEROES — desktop two-zone band (Nick, 2026-07-26: "big
   black open space… could hold the other subitems on the right of the
   number"). ≥1100px only; mobile stacking untouched.
   · To-Do: the command bar (chips · next up · add) rides the right half.
   · Finances/Shopping: pills + status line move beside the count so the
     band is slim instead of a tall empty stadium.
   ===================================================================== */
@media (min-width:1100px){
  #pp-hero-todo .pp-hero{
    display:grid; grid-template-columns:minmax(220px,auto) minmax(0,1fr);
    column-gap:56px; align-items:center;
  }
  #pp-hero-todo .pp-eyebrow{ grid-column:1; grid-row:1; }
  #pp-hero-todo .pp-stat{ grid-column:1; grid-row:2; }
  #pp-hero-todo .pp-pills{ grid-column:1; grid-row:3; }
  #pp-hero-todo .pp-line{ grid-column:1; grid-row:4; }
  #pp-hero-todo .pp-cmd{
    grid-column:2; grid-row:1 / span 4; align-self:center;
    margin-top:0; padding-top:0; border-top:none;
    border-left:1px solid rgba(255,255,255,.13); padding-left:44px;
  }
  #pp-hero-fin .pp-hero, #pp-hero-shop .pp-hero{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    column-gap:56px; align-items:center; padding:18px 28px;
  }
  #pp-hero-fin .pp-eyebrow, #pp-hero-shop .pp-eyebrow{ grid-column:1; grid-row:1; }
  #pp-hero-fin .pp-stat, #pp-hero-shop .pp-stat{ grid-column:1; grid-row:2; }
  #pp-hero-fin .pp-pills, #pp-hero-shop .pp-pills{ grid-column:2; grid-row:1; align-self:end; margin-top:0; }
  #pp-hero-fin .pp-line, #pp-hero-shop .pp-line{ grid-column:2; grid-row:2; align-self:start; margin-top:4px; }
  /* SHOPPING — the add-item card and the order bar start on the same level
     (they sat on offset levels — "lazy on desktop"). */
  #view-shopping .page > .shop-add-card{ margin-top:0; }
  #view-shopping .shop-order-bar{ margin:0 0 12px; }
}

/* =====================================================================
   13. PUNCH LIST 2026-07-26 (Monday doc 18423814687) — items 8 / 9 / 10 / 11 / 17
   ===================================================================== */
/* (9) To-Do / Shopping task bubbles pop directly on the cream page — bento.css's
   generic #view-todo .card rule re-whited the wrapping .td-card AFTER
   reskin-family.css had made it transparent (load order), so every bubble sat in
   a flat white box. The wrapper goes transparent again; the .td-prio bubbles keep
   their white + ink-outline pop treatment against the cream. */
#view-todo .td-card, #view-shopping .td-card{
  background:transparent; border:none; box-shadow:none; padding:0; border-radius:0;
}
#view-todo .td-list, #view-shopping .td-list{ gap:10px; }
/* (8) "DUE TODAY" section labels stop crowding the card below — clear air above
   and below, quiet Space-Grotesk eyebrow. */
#view-todo .td-bucket{
  margin:22px 4px 10px;
  font-family:var(--pb-num,"Space Grotesk",system-ui,sans-serif);
  color:rgba(25,22,33,.55);
}
#view-todo .td-list .td-bucket:first-child{ margin-top:6px; }
/* (10) Finances months: chips stay on desktop; phones get the dropdown app.js
   builds (.fin-mo-select) — same data-mo values, same handlers. */
#fin-months .fin-mo-select{
  display:none; width:100%; padding:12px 40px 12px 14px;
  border:1.5px solid var(--pb-ink,#191621); border-radius:14px;
  background:#fff; color:var(--pb-ink,#191621);
  font-family:var(--pb-num,"Space Grotesk",system-ui,sans-serif);
  font-size:16px; font-weight:700; /* ≥16px: never triggers iOS focus-zoom */
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23191621' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
}
@media (max-width:520px){
  #fin-months .fin-mo-btn{ display:none; }
  #fin-months .fin-mo-select{ display:block; }
}
/* (11) spacing class: the yellow reps hero sat 2px off the black
   "Last complete day" hero (inline cw2 css margin:2px 0 14px) — real air now. */
#view-health #hp-nick .cw2-hero{ margin-top:14px; }
/* (17) Updates header: tighten the dead zone between the subtitle / "Mark all
   seen" bar and the first card on phones. */
@media (max-width:520px){
  #view-updates .nu-sub{ margin-bottom:10px; }
  #view-updates .nu-bulkbar{ margin:0 0 10px; }
}

/* =====================================================================
   14. SHOPPING — store selectors move INTO the hero + controls-row alignment
   (Nick, live feedback 2026-07-27).

   (a) "just use all the empty space on the black bar and put the different
   list selectors in that section." js/pop.js's mountShopCommandBar() MOVES
   the real .shop-segmented node (not a copy — same click listeners app.js's
   initShoppingTabs() already bound) into a .pp-shopcmd wrapper appended
   inside #pp-hero-shop .pp-hero, at boot, before any data loads. This is the
   ONLY styling that control needs on the hero — everything below just resets
   the below-the-page skin (horizontal-scroll fade mask, desktop max-width
   centering meant for a full-width row) that doesn't apply once it's a
   compact cluster living inside the ink card.

   (b) "elements on different levels — no alignment across the screen." With
   the store pills relocated into the hero, the page below it now starts
   directly with the add-item card + the active panel's "Order via Skippy"
   bar — already grid-aligned to the same top edge on desktop (≥1100px, see
   §12 above); this section closes the two remaining gaps: the order button's
   own align-items:center inset made its top sit 6px below the add-form's
   inputs even though their rows share one grid line, and mobile carried two
   slightly different margin-top values (16px vs 12px) between the same two
   blocks, reading as "lazy"/uneven even though both share the same left
   edge. Both are normalized to one shared rhythm here.
   ===================================================================== */
#pp-hero-shop .pp-shopcmd{
  margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.13);
}
/* Reset the page-level .segmented skin (horizontal-scroll fade mask + desktop
   max-width/auto-margin centering, both meant for a full-width row below the
   hero) — inside the hero it's a compact, wrapping chip cluster instead. */
#pp-hero-shop .pp-shopcmd .shop-segmented{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;
  max-width:none; overflow:visible;
  -webkit-mask-image:none; mask-image:none;
}
/* Light-on-dark chip skin — the base .seg-btn (styles.css/bento.css) is a
   white pill made for the cream page below, not the ink card. */
#pp-hero-shop .pp-shopcmd .seg-btn{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.88);
}
#pp-hero-shop .pp-shopcmd .seg-btn.is-active{
  background:#fff; color:var(--pb-ink,#191621); border-color:#fff; font-weight:700;
}
#pp-hero-shop .pp-shopcmd .seg-btn[hidden]{ display:none; }
/* desktop.css/bento.css both darken .seg-btn on hover with a cream/tan fill made
   for the page below — override so it stays light-on-dark inside the hero. */
#pp-hero-shop .pp-shopcmd .seg-btn:hover:not(.is-active){
  background:rgba(255,255,255,.18); color:#fff;
}

/* Controls-row alignment — mobile: same margin-top on both blocks (was
   16px vs 12px), so the add-item card and the order bar read as one
   consistent rhythm instead of two arbitrarily-spaced ones. Also switches
   the order bar from align-items:center to flex-start — centering in a
   row a few px taller than the button put its top edge ~6px below the
   add-form's inputs even when both rows shared one grid line; flex-start
   makes the button's top pixel-identical to the row's top, always. */
#view-shopping .page > .shop-add-card{ margin-top:14px; }
#view-shopping .shop-order-bar{ margin:14px 0 10px; align-items:flex-start; }
/* the real culprit (found live, DOM-verified): the base .btn class carries its
   own margin-top:6px + align-self:flex-start (styles.css:271-274, meant for a
   button sitting after inline text) — inside this flex row it pushed the
   button 6px below the row's own top regardless of the row's align-items. */
#view-shopping .shop-order-btn{ margin-top:0; }

@media (min-width:1100px){
  /* Desktop (≥1100px, §12's two-column .page grid): the add-card/order-bar
     already start on the same grid row — restore the zero top-margin that
     collapses them onto that shared line (this pass's 14px mobile value
     would otherwise win here too, same specificity, later in the file). */
  #view-shopping .page > .shop-add-card{ margin-top:0; }
  #view-shopping .shop-order-bar{ margin:0 0 12px; }

  /* Re-shape the shop hero's own grid (redeclares §12's #pp-hero-shop .pp-hero
     rules — same specificity, later in the file, shop only; #pp-hero-fin is
     untouched) so .pp-shopcmd can ride the right side exactly like the To-Do
     command bar does: count/pills/line stack in column 1, the store control
     spans the full height of column 2. Without this, grid auto-placement
     would just drop the newly-appended .pp-shopcmd into an implicit row
     under column 1, stacking it below the count instead of beside it. */
  #pp-hero-shop .pp-hero{
    display:grid; grid-template-columns:minmax(220px,auto) minmax(0,1fr);
    column-gap:56px; align-items:center; padding:18px 28px;
  }
  #pp-hero-shop .pp-eyebrow{ grid-column:1; grid-row:1; }
  #pp-hero-shop .pp-stat{ grid-column:1; grid-row:2; }
  #pp-hero-shop .pp-pills{ grid-column:1; grid-row:3; margin-top:10px; }
  #pp-hero-shop .pp-line{ grid-column:1; grid-row:4; margin-top:4px; }
  #pp-hero-shop .pp-shopcmd{
    grid-column:2; grid-row:1 / span 4; align-self:center;
    margin-top:0; padding-top:0; border-top:none;
    border-left:1px solid rgba(255,255,255,.13); padding-left:44px;
  }
}

/* =====================================================================
   🔴 UNIVERSAL LAYOUT SWEEP — 2026-07-30
   Nick, verbatim: "the way these amouts are stacked below and off to the side is
   werid - look for issues like this and fix universally." Read as a CLASS, not an
   instance: values wrapping off-axis, a control separated from its own figure, and
   floating chrome sitting on top of content. The stepper/amount instance is fixed at
   source in css/finance-planner.css; the two rules below are the shared ones.
   ===================================================================== */

/* (a) FLOATING FABs MUST NOT LAND ON CONTENT.
   `.fl-fab` ("Skippy's watching") and `.sk-fab` (Ask Skippy) are position:fixed above
   the tabbar, so the LAST element of any scrollable view sits underneath them — which is
   exactly what Nick screenshotted, the "Skippy's watching 7" pill covering the text of the
   beach-conditions note. Only #view-actions had cleared them (its own padding-bottom:96px).
   Give every view the same floor. Bottom padding only — it can never reflow a layout, it
   just guarantees the last line is reachable. */
.view > .page{
  padding-bottom:calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 128px);
}

/* (b) A LABEL AND ITS VALUE STAY ON ONE AXIS.
   Rows across the app pair a left-hand label with a right-hand figure via
   `justify-content:space-between`. With no min-width:0 on the label, a long string forces
   the row past its container and the figure wraps BELOW and off to one side — the same
   visual failure as the stepper rows. Let the label shrink; keep the number whole and
   right-aligned with tabular figures so columns of values line up down a list. */
.fin-gauge-foot > *:first-child,
.cwk-schrow > span:first-child{ min-width:0; overflow-wrap:anywhere; }
.fin-gauge-foot > *:last-child,
.cwk-schrow > b{ flex:none; text-align:right; font-variant-numeric:tabular-nums; }