/* ══ SELF-HOSTED WEB FONTS (security lockdown 2 · audit I1, 2026-09-03) ═══════════════════════════
* Hearth used to pull these faces from fonts.googleapis.com / fonts.gstatic.com. That was the ONE
* third-party origin in the whole client — the single reason the CSP could not be `self` for styles
* and fonts, and the reason a FIRST load was not offline-capable. The exact woff2 files Google was
* serving are now in `web/fonts/` (provenance + the request that produced them: web/fonts/README.md),
* and the block below is Google’s own generated CSS with the urls repointed and nothing else changed:
* the same 20 faces, the same weights, the same per-face `unicode-range`, the same `font-display: swap`.
* Keeping the ranges matters — dropping them would make every page download the latin-ext file it does
* not need, which is the opposite of what self-hosting is for.
* ⚠ These files are in the service worker’s SHELL list. If you add, remove or re-version a face here,
* add, remove or re-version it there in the same edit, or the SW precache will 404 and INSTALL WILL
* FAIL — which takes the whole offline shell with it.
*/
/* latin-ext */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/dmmono-v16-aFTR7PB1QTsUX8KYvrGyEY2tbZX9.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/dmmono-v16-aFTR7PB1QTsUX8KYvrGyEYOtbQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/dmmono-v16-aFTU7PB1QTsUX8KYthSQBLyM.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/dmmono-v16-aFTU7PB1QTsUX8KYthqQBA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/dmmono-v16-aFTR7PB1QTsUX8KYvumzEY2tbZX9.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/dmmono-v16-aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 700;
font-display: block; /* the wordmark must never paint in a fallback and resize (2026-09-07) */
src: url(../fonts/syne-v24-8vIH7w4qzmVxm2NL9Hz_.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 700;
font-display: block; /* the wordmark must never paint in a fallback and resize (2026-09-07) */
src: url(../fonts/syne-v24-8vIH7w4qzmVxm25L9Hz_.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 700;
font-display: block; /* the wordmark must never paint in a fallback and resize (2026-09-07) */
src: url(../fonts/syne-v24-8vIH7w4qzmVxm2BL9A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 800;
font-display: block; /* the wordmark must never paint in a fallback and resize (2026-09-07) */
src: url(../fonts/syne-v24-8vIH7w4qzmVxm2NL9Hz_.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 800;
font-display: block; /* the wordmark must never paint in a fallback and resize (2026-09-07) */
src: url(../fonts/syne-v24-8vIH7w4qzmVxm25L9Hz_.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 800;
font-display: block; /* the wordmark must never paint in a fallback and resize (2026-09-07) */
src: url(../fonts/syne-v24-8vIH7w4qzmVxm2BL9A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The wordmark's STAND-IN (2026-09-07): a local face scaled so "Tobsy" is the same width in it as in Syne 800
(measured: Syne 111.23px vs the local face 90.77px at 153% → 187.5%; local('Arial') matches the regular face and synthesises the bold, which is why it is not the naive 153%). With font-display: block the stand-in is never SEEN, but its box
is what the header lays out against for the few ms before Syne arrives — matched, so nothing beside the
name can jump. Arial/Helvetica/Roboto have near-identical advance widths for these letters. */
@font-face {
font-family: 'Syne Standin';
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Helvetica');
size-adjust: 187.5%;
}
/* Hearth styles (static shell, Phase 2). Migrated from user-script/Styles.html — this file is now the source. */
/* Hearth colour tokens — Bible §24 (exact). */
:root {
--gut: 26px; /* Slice A (ledger panel): the reserved gap the row's flow line keeps before the amount column (human: "26 points") */
--bg-base: #0c0c12;
--bg-surface: #13131e;
--bg-elevated: #1a1a28;
--bg-input: #1e1e2e;
--bg-hover: #22223a;
--border-subtle: #1e1e30;
--border-default: #2a2a40;
--border-strong: #3a3a58;
--text-primary: #f0f0f8;
--text-secondary: #a0a0c0;
--text-tertiary: #6a6a88;
--accent-primary: #7c6aff; /* purple — brand, household, human moments */
--accent-glow: rgba(124,106,255,0.18);
--accent-warm: #e8834a; /* amber — DESTRUCTIVE actions + error/status feedback (Bible §3). NB: outgoing
MONEY moved to --accent-out (lavender trial, 2026-06-23) — amber kept here so
Remove/destructive never collides with the purple primary. */
--accent-out: #da82ff; /* TRIAL (2026-06-23, human-directed) — outgoing money amounts. Calmer than the
old amber, but COLLIDES with purple (brand/household/primary); revisit (maybe
pink). See tone-and-language.md. Was amber #e8834a. */
--accent-teal: #3ecfaa; /* teal — income, positive, goals */
--accent-red: #f06070; /* red — genuine alerts ONLY */
--accent-gold: #e8c547; /* gold — milestones */
/* ── THE PERSON / BUCKET IDENTIFIER PALETTE (human-ratified 2026-08-13, from the colour-ideas mock
`dist-live/mocks/color-ideas.html`) ──────────────────────────────────────────────────────────────
SIX identifier-ONLY hues, in this exact slot order. They are NEVER semantic: an identifier says
"this is Dev's bar", never "this is income" or "this is spending". This RETIRES the old arrangement
where the money colours (teal / lavender --accent-out / gold) doubled as person colours — the human's
reason being that a person wearing income-teal is unreadable next to an income series. The old
id4/id5/id6 hexes (#3ecc3e grass · #c87eaf rose · #a5998d taupe) are retired with it; rose survives
the cull but MOVES from slot 5 to slot 6.
MACHINE-VALIDATED on the dark surface #13131e: worst adjacent pair ΔE 16.6 under protanopia and
ΔE 22.9 under normal vision, every slot ≥3:1 contrast against the surface.
⚠ THE SKY SLOT IS AN EXPLICIT HUMAN-RATIFIED EXCEPTION TO THE APP'S NO-BLUE RULE (CLAUDE.md
non-negotiable #4 / Bible §24). It is legal ONLY as a person/bucket IDENTITY colour and must never
be used semantically — no money amount, no state, no chrome ever wears it. */
--accent-id1: #2e7d4f; /* forest — identifier only */
--accent-id2: #5da9e8; /* sky — THE one sanctioned blue, identity-only (see the note above) */
--accent-id3: #eda57e; /* peach — identifier only */
--accent-id4: #a5486e; /* berry — identifier only */
--accent-id5: #b8c92e; /* chartreuse — identifier only */
--accent-id6: #c87eaf; /* rose — identifier only (was id5 before 2026-08-13) */
/* THE HOUSEHOLD PAIR (same ratification). A household compared alongside people is not a seventh
person — it wears its own validated pair (ΔE 18 apart under CVD) so "the two of us together" reads
as a different KIND of row. At most two households can exist, hence exactly two tokens. */
--accent-hh1: #9d8cff; /* periwinkle — household identity only */
--accent-hh2: #6a4fc9; /* deep violet — household identity only */
--on-accent-primary: #ffffff; /* derived: text on purple primary buttons */
/* CHART INK (v366, SIXTH REVIEW ③ — human-ratified 2026-08-15, "great point there"). Axis labels sat on
--text-tertiary #6a6a88 over the deep #08080d chart card = 3.83:1, under the 4.5:1 readability line and
the one place text is small AND on the darkest surface in the app. This is a NEUTRAL TEXT SHADE, not a
meaning-bearing colour — it says nothing about income, spending or state (Bible §3 is untouched). It sits
deliberately between tertiary and --text-secondary (#a0a0c0, 7.78:1) so the axis is readable while still
reading as quieter chrome than the data: measured 6.38:1 on #08080d. SCREEN ONLY — the printed report has
its own palette (p.faint on white, already fine) in js/report-analysis.js, which must not follow this.
v389 — THE TOKEN IS NOW EVERY CHART'S AXIS INK, not Analysis's alone (the human: the drift/usual-ranges
and forecast day-by-day charts "feel hazy… most information feels hazy"). Measured on the real screens
before anything moved: those charts sit on a `.card` (--bg-surface #13131e), where --text-tertiary is
3.54:1 — WORSE than the 3.83:1 that earned this token in the first place. Same ink here reads 5.89:1 on
that surface. The NAME is left alone deliberately: renaming it would touch .ana-axis, AXIS_FONT_PX and
report-analysis.js's literal duplicate for no behaviour, and a second token holding the same hex is the
thing the palette rule exists to stop. Read it as "chart axis ink"; it is not Analysis-only any more. */
--ana-axis-ink: #8f8fae;
--on-accent-warm: #1a0f06; /* derived: dark ink for text on amber buttons (not a semantic colour) */
/* calendar "paper zones" (§31, Option 2): the PAST vs FUTURE half tones meeting at the "now" seam */
--cal-zone-past: #191926; /* PAST/today — a raised, lighter surface (ink; it happened) */
--cal-zone-past-border: #2e2e46;
--cal-zone-future: #0e0e16; /* FUTURE — a sunken, darker surface (pencil; expected) */
--cal-zone-hatch: rgba(160, 150, 190, 0.24); /* FUTURE cells' faint diagonal "projected" stroke (§31, ④a) */
--cal-zone-empty-border: #16161f; /* empty days recede — transparent bg + this faint border */
--radius: 14px;
--gap: 16px;
}
* { box-sizing: border-box; }
/* lock the page to the viewport width: nothing may cause a horizontal PAGE scroll on a phone
(the nav becomes its own scrollable strip below — the screen itself never pans sideways). */
/* overflow-x: CLIP (not hidden) still blocks sideways scroll but does NOT create a scroll container, so
position:sticky descendants (the Bulk live-ledger) keep working. */
html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%;
/* a horizontal swipe is OURS (swipe between tabs on mobile) — don't let the browser hijack it as a
back/forward navigation gesture (edge-swipe). Inner scrollers (nav strip, CSV columns) still scroll. */
overscroll-behavior-x: none;
/* RESERVE the vertical scrollbar's space permanently (Windows/classic scrollbars take ~15px). Without this the
centred .app shifts sideways whenever a tab is tall enough to need a scrollbar vs not — and the per-switch
re-render toggles it = a left/right FLICKER on every tab change (only visible once the frame stopped jumping).
Overlay scrollbars (mobile) reserve nothing, so phones are unaffected. */
scrollbar-gutter: stable; }
/* ── APP-NATIVE SCROLLBARS, EVERYWHERE — STANDING RULE (human-directed 2026-08-26, v406) ──────────────
Their words, on finding a stock Windows scrollbar under the Intentions "Your picture" card: *"it really
shouldn't need the scroll bar anyway, and if ever a scroll bar has to come then it has to be app
native."* Both halves are the rule. The first half is per-bug (kill the overflow — see `.intent-footer`
below). This is the second half, and it is a DEFAULT rather than a list, because a list is a thing you
forget to add to: `scrollbar-width` and `scrollbar-color` are INHERITED properties, so setting them on
the root dresses every scroll container the app will ever grow, including ones nobody remembered.
The webkit pseudo-elements do NOT inherit, so they get one universal rule beside it.
WHAT THIS DELIBERATELY DOES NOT TOUCH: a scrollbar that is hidden ON PURPOSE (`.nav`, the analysis
shape strip) or dimmed-until-hover on purpose (`.ledger-side`, the CSV column lists) sets its own
value with a CLASS selector, which outranks both rules here — so those stay exactly as they were.
Every one was checked before this block was written; do the same before adding another. */
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
*::-webkit-scrollbar-corner { background: transparent; }
body {
background: var(--bg-base);
color: var(--text-primary);
font-family: 'DM Sans', system-ui, sans-serif;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding-bottom: env(safe-area-inset-bottom);
}
/* ONE fixed app FRAME at every tab (human-ratified: cap 1500, adaptive). It fills the window up to the cap,
then centres so a big monitor/TV gets calm gutters instead of a sprawled app. The nav/header span this frame
and never jump between tabs — only the CONTENT (.view) re-caps per screen. Never binds on a phone. */
.app { width: min(100%, 1500px); margin: 0 auto; padding: 24px 20px 64px; }
/* CONTENT width per screen, centred inside the steady frame. Forms read best as a calm narrow column; data
screens use more (.app--wide); dense grids fill the frame (.app--bulk/.app--csv, below). This is the ONLY
thing that changes between tabs — the frame above stays put. (conventions.md HYBRID rule, now frame-steady.) */
.view { max-width: 680px; margin: 0 auto; }
.app--wide .view { max-width: 1100px; }
/* MOBILE swipe between tabs: new content glides in from the swiped-toward edge so the gesture feels native
instead of snapping (the human's ask). transform + opacity only (compositor-cheap); the page's overflow-x:clip
hides the brief off-screen slide so no horizontal scrollbar appears. A tab CLICK stays instant (no class added). */
@keyframes hearthViewNext { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes hearthViewPrev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.view--enter-next { animation: hearthViewNext 210ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.view--enter-prev { animation: hearthViewPrev 210ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .view--enter-next, .view--enter-prev { animation: none; } }
/* ── v417 ⑦ — AN ENTER ANIMATION IS A TRANSFORM, AND A TRANSFORM RE-PARENTS EVERY FIXED CHILD ───────
The human: arriving at Ledger or Analysis BY SWIPE flashes the side edge-tabs as a full-height line
for a frame before they settle; arriving by tab CLICK never does. Both halves of that are exactly
right, and the reason is the animation above.
MEASURED (poc/_probe-v417.mjs swipe, a per-frame recorder over a real CDP touch-swipe). During the
210ms slide, `#view` carries a transform — which makes it the containing block for every
`position: fixed` DESCENDANT. The Ledger's slide-in panel is `top:0; bottom:0; translateX(-103%)`,
so against a 1808px-tall `#view` instead of the 844px viewport it became a 320 x 1808 slab whose
right edge sat at x = +31: a 31px-wide, taller-than-the-screen strip of panel down the left margin.
Its edge tab travelled with it to y = 896, off the bottom. At the animation's end the transform
goes and everything snaps to where it belongs. Frame log, shipped tree:
t=9529 ledger-side@-289,119 320x1808 ledger-tab@40,896
t=9720 (no transform) ledger-side@-330,0 320x844 ledger-tab@0,334
A CLICK adds no class, so there is no transform and no re-parenting — hence "tab-click never does".
THE FIX IS THE ONE THE SYMPTOM ASKS FOR: an edge tab is invisible until it is positioned. For the
210ms the containing block is wrong, these overlays stand down; when the animation ends they are
already where they belong, so they appear correct rather than settling. `visibility` (not
`display`, not `opacity`) so nothing is re-laid-out and nothing fades — the reader simply never
sees the misplaced frame.
THE LIST IS EXHAUSTIVE AND IT IS ASSERTED, not hoped: seven elements, on two screens, are every
`position: fixed` descendant `#view` holds on a normal render across all ten views (measured, same
probe — every other fixed thing in the app is a popover, tip, modal or toast, none of which can
exist during a 210ms gesture animation, and the ⛶ overlay is `display: none` until opened).
verify-v417-polish ⑦ re-enumerates them at runtime and fails if a new one appears uncovered.
⚠ STANDING RULE for the next `position: fixed` overlay that lives inside `#view`: add it here. */
.view--enter-next .ledger-side, .view--enter-prev .ledger-side,
.view--enter-next .ledger-tab, .view--enter-prev .ledger-tab,
.view--enter-next .ledger-scrim, .view--enter-prev .ledger-scrim,
.view--enter-next .ana-lpanel, .view--enter-prev .ana-lpanel,
.view--enter-next .ana-lpanel-handle, .view--enter-prev .ana-lpanel-handle,
.view--enter-next .ana-tpanel, .view--enter-prev .ana-tpanel,
.view--enter-next .ana-tpanel-handle, .view--enter-prev .ana-tpanel-handle,
/* v423 — the Settings/Help thumb-bar joins the list under the standing rule above. It is
`position: fixed; bottom: 0` inside #view, so during the 210ms transform it would resolve against
the full height of the settings content and paint its bar somewhere down the page instead of on
the glass. Its sheet and scrim are its CHILDREN, so one entry covers all three. */
.view--enter-next .snav, .view--enter-prev .snav { visibility: hidden; }
/* ── v378 — THE HEADER'S POPUPS OUTRANK CONTENT-LEVEL PINNED BARS ──────────────────────────────────
The human's screenshot: on the phone Ledger, the open ACTIVE-CONTEXT dropdown was painted over by the
pinned strip — "Dev" half-hidden under "320 shown of 1,393". `.dropdown__list` carries z-index 30 and
the header created NO stacking context, so it competed at the root against `.ledger-strip` (sticky,
z-index 30) and lost on DOM order. This is a CLASS, not one screen: `.cal-sticky` pins at 40 on the
Calendar and would have done exactly the same. One stacking context on the header settles all of them.
50 is deliberately chosen: ABOVE every content-level pinned bar (30/40), and BELOW the ledger panel /
tab / scrim (61/60/59 — which are full-height overlays that SHOULD cover the header) and below every
modal and popover layer (100 / 200 / 1200). Every one of those orderings is what it already was. */
.app__header { display: flex; align-items: center; gap: 12px 16px; margin-bottom: 24px; flex-wrap: wrap;
position: relative; z-index: 50; }
.brand { font-family: 'Syne', 'Syne Standin', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.01em; margin: 0;
color: var(--accent-primary); } /* purple = brand colour (Bible §3) */
/* the bear beside the wordmark (2026-09-07). One flex lock so the mark and the name move as a unit and the
rest of the header line (picker, bell) measures against the same box it always did. */
.brandlock { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brandmark { width: 34px; height: 40px; flex: none; display: block; } /* the bear alone, no tile: its own box is 352×412 (mark PS, pocket included) */
/* header right cluster: active-context dropdown + nav */
.app__headerright { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.app__headerright .dropdown { width: auto; }
.app__headerright .dropdown__trigger { padding: 8px 10px; font-size: 14px; }
.app__headerright .dropdown__list { min-width: 180px; }
/* v395 — THE CONTEXT CHOOSER'S MENU OPENS LEFTWARD, FROM ITS OWN RIGHT EDGE.
The shared `.combo__list` sets `left: 0; right: 0`, and with `min-width: 180px` the over-constrained
box resolves in LTR by ignoring `right` — so the menu grew RIGHTWARD from the trigger's left edge.
Under a SHORT name ("Dev", a 69px trigger sitting 62px from the frame's right edge) that put its right
side at 439px on a 390px phone: 69px of the profile list hanging off the screen, silently CLIPPED
rather than scrolled because the page is `overflow-x: clip`. It is the tap you make to switch person,
so it is the tap that showed it. `left: auto` hands the anchoring to `right: 0` — the menu now hangs
from the same edge the control does, which is what a right-side control's menu should always have
done — and the viewport clamp is the belt beside that brace for any future wider list. */
.ctxslot .dropdown__list { left: auto; right: 0; max-width: calc(100vw - 24px); }
.ctxslot { display: flex; align-items: center; gap: 8px; }
.ctxslot__label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.nav { display: flex; gap: 4px; }
.nav__btn {
appearance: none; background: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
color: var(--text-secondary); font-family: inherit; font-size: 14px; padding: 6px 12px; border-radius: 8px;
}
/* ⚠ v421 ③ — THE DOUBLE-LIT TAB PILL (BUG, human-screenshot 2026-09-01; root-caused first-hand).
* Their screenshot: Calendar open, and Calendar AND Goals & Plans both wearing a pill. It was not
* the active class and it was not a focus style — MEASURED on a 390px touch page: tap Calendar,
* swipe to Goals & Plans, and the bar reads
* calendar active:false hover:TRUE bg #22223a
* goalsplans active:true hover:false bg #1a1a28
* A touch screen has no pointer to move away, so Chrome leaves `:hover` STUCK on the last thing
* tapped; a swipe moves the active class and nothing clears the hover. Worse, `--bg-hover` is
* LIGHTER than `--bg-elevated`, so the stale chip reads MORE lit than the real one — which is why
* the human read the wrong tab as current.
* THE CUT: hover is a POINTER state, so it is stated only where a pointer exists. The pill then
* means exactly one thing — the current view — and nothing else paints a filled chip.
* Keyboard users lose nothing: they get their own RING (never the pill), so "where am I" and
* "where is the caret" stay two different marks. */
@media (hover: hover) {
.nav__btn:hover { color: var(--text-primary); background: var(--bg-hover); }
}
.nav__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.nav__btn--active { color: var(--text-primary); background: var(--bg-elevated); border-color: var(--border-default); }
/* calm offline indicator (slim, neutral — not amber/red; this is information, not alarm) */
.offlinebar {
background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-secondary);
border-radius: 10px; padding: 8px 12px; margin-bottom: var(--gap); font-size: 13px; text-align: center;
}
/* profiles — the 6-slot pool */
.slot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--bg-surface); border: 1px solid var(--border-subtle);
border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
}
.slot--empty { border-style: dashed; border-color: var(--border-default); }
.slot--confirm { border-color: var(--border-strong); background: var(--bg-elevated); flex-wrap: wrap; }
.slot__name { font-size: 16px; font-weight: 500; }
.slot__confirm { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; }
.slot__actions { display: flex; gap: 8px; align-items: center; }
.slot__add { display: flex; gap: 8px; align-items: center; flex: 1; }
.slot__add input { flex: 1; min-width: 0; }
/* NB: ALL .btn--* modifiers live AFTER the base .btn (below) so they actually win — .btn--sm sat
here (before .btn) and was silently overridden: every "small" button rendered FULL-SIZE. */
/* "＋ Add someone" — reveals the next empty seat (progressive, not all 6 at once) */
.addbtn {
appearance: none; width: 100%; cursor: pointer;
background: none; border: 1px dashed var(--border-default); color: var(--text-secondary);
font-family: inherit; font-size: 14px; padding: 12px; border-radius: 10px; margin-bottom: 10px;
}
.addbtn:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-strong); }
/* row action icons — calm grey at rest, intent colour on hover (purple = neutral, amber = destructive) */
.iconbtn {
appearance: none; background: none; border: none; cursor: pointer;
color: var(--text-tertiary); padding: 7px; border-radius: 8px; line-height: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.iconbtn:disabled { opacity: 0.5; cursor: default; }
.iconbtn svg { display: block; }
.iconbtn--edit:hover { color: var(--accent-primary); } /* purple = neutral action */
.iconbtn--danger:hover { color: var(--accent-warm); } /* amber = destructive */
.iconbtn--locked, .iconbtn--locked:hover { color: var(--accent-primary); } /* purple = a PIN is set (the intimate layer) */
/* modal overlay (reusable) */
.modal__overlay {
position: fixed; inset: 0; z-index: 100;
background: rgba(6,6,12,0.66);
display: flex; align-items: flex-start; justify-content: center;
padding: 32px 16px; overflow-y: auto;
}
.modal {
width: 100%; max-width: 420px;
background: var(--bg-surface); border: 1px solid var(--border-default);
border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 0; }
.modal__head h2 { margin: 0; }
.modal__body { padding: 14px 18px 20px; }
.modal__body .field { margin-bottom: 12px; }
.modal__body > .btn { width: 100%; margin-top: 4px; }
/* PIN flows */
.pin-menu { display: flex; flex-direction: column; gap: 8px; }
.pin-menu > .btn { width: 100%; }
.pin-menu--row { flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
.pin-menu--row > .btn { width: auto; }
.pin-recovery {
text-align: center; font-size: 32px; letter-spacing: 0.18em;
color: var(--accent-primary); background: var(--bg-elevated);
border: 1px solid var(--border-default); border-radius: 10px; padding: 18px; margin: 6px 0;
}
.pin-or { text-align: center; color: var(--text-tertiary); font-size: 13px; margin: 16px 0 8px; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
/* households */
.hh-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hh-card__head h2 { margin: 0 0 2px; }
.hh-card__head p { margin: 0; }
.split__row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.split__name { flex: 1; min-width: 0; color: var(--text-secondary); }
.split__row input { width: 84px; }
.split__pct { color: var(--text-tertiary); }
/* per-category split overrides (Bible §6) */
.hh-card__ov { margin-top: 4px; }
.hh-card__customise { margin-top: 8px; padding: 0; }
.hhcat { max-height: 52vh; overflow-y: auto; margin: 8px 0 4px; border: 1px solid var(--border-default); border-radius: 10px; }
.hhcat__group { padding: 8px 12px 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); background: var(--bg-elevated); position: sticky; top: 0; z-index: 1; }
.hhcat-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border-default); }
.hhcat-row__name { flex: 1; min-width: 0; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hhcat-row__ctrl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.hhcat-row__base { color: var(--text-tertiary); }
.hhcat-row--on { background: var(--accent-glow); }
.hhcat-mini { width: 54px; padding: 6px 8px; }
.hhcat-mini__lbl { color: var(--text-tertiary); font-size: 13px; }
/* PROPORTIONAL_INCOME notable-swing prompt (§6) */
.hh-prop-swing { margin-top: 12px; padding: 12px; border: 1px solid var(--accent-primary); border-radius: 10px; background: var(--accent-glow); }
.hh-prop-swing__msg { margin: 0 0 10px; color: var(--text-primary); }
.hh-prop-swing__actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* pre-save income-split choice (in the create/edit modal): a selectable pair of pills, "use" pre-selected */
.hh-prop-choice { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.hh-prop-choice__opt { appearance: none; font-family: inherit; font-size: 14px; cursor: pointer;
padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-default);
background: var(--bg-elevated); color: var(--text-secondary); transition: background .12s, border-color .12s, color .12s; }
.hh-prop-choice__opt:hover { color: var(--text-primary); background: var(--bg-hover); }
.hh-prop-choice__opt.is-selected { background: var(--accent-primary); color: var(--on-accent-primary); border-color: var(--accent-primary); }
@media (max-width: 480px) {
.hhcat-row { flex-wrap: wrap; }
.hhcat-row__name { flex: 1 0 100%; white-space: normal; }
}
.readonly { padding: 11px 12px; color: var(--text-primary); background: var(--bg-elevated);
border: 1px solid var(--border-subtle); border-radius: 10px; }
/* categories */
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 16px; }
.cat-tab { appearance: none; background: none; border: 1px solid var(--border-default); color: var(--text-secondary);
font-family: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.cat-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.cat-tab--active { color: var(--on-accent-primary); background: var(--accent-primary); border-color: var(--accent-primary); }
/* groups (headers) read larger; categories sit indented beneath them for a clear hierarchy */
.cat-header__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cat-header__namewrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-header__name { font-size: 20px; margin: 0; }
.cat-lock { display: inline-flex; color: var(--accent-primary); }
.cat-lock svg { display: block; }
.cat-locked { display: flex; align-items: center; gap: 12px; padding: 8px 2px 2px; }
.cat-locked p { margin: 0; flex: 1; }
.cat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 2px 9px 14px; border-top: 1px solid var(--border-subtle); }
.cat-row--edit { padding-left: 2px; }
.cat-row--managed .slot__name { color: var(--text-secondary); }
.cat-managed { gap: 8px; }
.cat-managed__t { font-size: .82rem; }
.cat-row .slot__add { flex: 1; }
.cat-inline { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cat-inline__err { font-size: 13px; }
.cat-addrow { padding-top: 10px; }
.cat-add { margin-top: 10px; margin-bottom: 0; }
.cat-archived { margin-top: 8px; padding-top: 6px; }
.cat-archived__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 2px; }
.move-opt { margin-bottom: 16px; }
.move-opt > .btn { width: 100%; }
.move-opt p { margin: 6px 0 0; }
/* change history */
.history-link { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--gap); }
.history-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap); }
.history-filters .field { margin-bottom: 0; flex: 1; min-width: 140px; }
.history-row { padding: 11px 2px; border-top: 1px solid var(--border-subtle); }
.history-row:first-child { border-top: none; }
.history-row__desc { font-size: 15px; color: var(--text-primary); }
.history-row__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; }
.history-row__who { font-size: 13px; color: var(--text-secondary); }
.history-row__when { font-size: 12px; color: var(--text-tertiary); }
h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 4px; }
.muted { color: var(--text-secondary); }
.tertiary { color: var(--text-tertiary); font-size: 13px; }
.card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 20px;
margin-bottom: var(--gap);
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
select, input {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border-default);
border-radius: 10px;
padding: 11px 12px;
font-family: inherit;
font-size: 15px;
width: 100%;
}
select:focus, input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
/* number inputs: no ±spinner steppers (people type the amount; nudging by a cent is noise) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* searchable combobox (currency / country / time zone) */
.combo { position: relative; }
.combo__list {
position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
background: var(--bg-elevated); border: 1px solid var(--border-default);
border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.combo__opt { padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text-primary); }
.combo__opt:hover, .combo__opt[aria-selected="true"] { background: var(--bg-hover); }
.combo__empty { padding: 9px 10px; font-size: 13px; color: var(--text-tertiary); }
/* THEMED scrollbar for the popup lists (the default Windows bar is bright white against the dark popup) */
.combo__list, .lcat-box { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
/* tag input (Phase 5): chips + autocomplete, looks like one text field; stores a comma-separated string */
.taginput {
position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 6px 8px; min-height: 44px; cursor: text;
background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px;
}
.taginput:focus-within { border-color: var(--border-strong); }
.taginput__chip {
display: inline-flex; align-items: center; gap: 2px;
padding: 3px 3px 3px 10px; border-radius: 999px; font-size: 13px;
background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-primary);
}
.taginput__chipx {
appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
width: 18px; height: 18px; line-height: 1; font-size: 15px; border-radius: 999px;
color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center;
}
.taginput__chipx:hover { color: var(--accent-warm); background: var(--bg-hover); }
.taginput__field {
flex: 1 1 90px; min-width: 90px; border: 0; background: none; padding: 4px 2px; margin: 0;
color: var(--text-primary); font-size: 14px; outline: none; box-shadow: none;
}
/* keyboard-highlighted suggestion (↑/↓ nav) — matches the combobox hover treatment */
.taginput__opt--hi { background: var(--bg-hover); }
/* tag chips shown on a ledger row (read-only) */
.tx__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tx__tag { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.tx__tag::before { content: '#'; opacity: 0.5; }
.combo__list::-webkit-scrollbar, .lcat-box::-webkit-scrollbar { width: 10px; }
.combo__list::-webkit-scrollbar-track, .lcat-box::-webkit-scrollbar-track { background: transparent; }
.combo__list::-webkit-scrollbar-thumb, .lcat-box::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg-elevated); background-clip: content-box; }
.combo__list::-webkit-scrollbar-thumb:hover, .lcat-box::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: content-box; }
/* app-native dropdown (short fixed lists) — reuses the combobox popup look (.combo__list / .combo__opt) */
.dropdown { position: relative; }
.dropdown__trigger {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; text-align: left; line-height: 1.4;
background: var(--bg-input); color: var(--text-primary);
border: 1px solid var(--border-default); border-radius: 10px;
padding: 11px 12px; font-family: inherit; font-size: 15px; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
.dropdown__trigger:focus-visible { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.dropdown--open .dropdown__trigger { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.dropdown__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__chevron { flex: none; display: flex; color: var(--text-tertiary); transition: transform 0.15s ease; }
.dropdown--open .dropdown__chevron { transform: rotate(180deg); }
.dropdown__opt--active { background: var(--bg-hover); }
.dropdown__opt[aria-selected="true"] { font-weight: 600; }
.dropdown__opt[aria-disabled="true"] { color: var(--text-tertiary); opacity: 0.5; cursor: not-allowed; }
.dropdown__opt[aria-disabled="true"]:hover { background: transparent; }
/* the ONE grouped category picker (single-select popup; same grouped look as the Ledger filter box) */
.pick__placeholder { color: var(--text-tertiary); }
/* typable trigger (click → the value is selected so you can type to filter) + a fully scrollable grouped popup
(the popup inherits .combo__list's overflow-y:auto, so it scrolls through every category). */
.catpick__box { max-height: 320px; }
.catpick__input { width: 100%; box-sizing: border-box; padding-right: 38px; cursor: text; }
/* the chevron is a real toggle target (pointer-events:auto) with a comfortable 36px hit area down the right
edge, so tapping it while open closes the picker (you no longer have to click off the field to dismiss). */
.catpick__chev { position: absolute; right: 0; top: 0; bottom: 0; width: 36px; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; color: var(--text-tertiary); }
.catpick.dropdown--open .catpick__chev { transform: rotate(180deg); }
.catpick__h { cursor: default; }
.catpick__h:hover { background: transparent; }
.catpick__opt { justify-content: space-between; }
.catpick__opt > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catpick__opt--active { background: var(--bg-hover); }
/* ── v412 — THE ONE MERCHANT COMBO. Wears the app's existing popup (.combo__list) with no colour of
its own; the wrap is what a host sizes, because the control ATTACHES to an input the host already
had (and every one of those inputs is `width: 100%` by the global rule, so it fills the wrap).
`left: 0; right: 0` with NO `min-width` — an over-constrained absolute box drops `right` in LTR
and grows off the right edge of a phone, silently, because the page is `overflow-x: clip` (v395). */
.mcombo { position: relative; }
.mcombo > input { width: 100%; box-sizing: border-box; }
.mcombo__box { z-index: 45; max-height: 280px; max-width: calc(100vw - 24px); padding: 4px; }
.mcombo--up .mcombo__box { top: auto; bottom: calc(100% + 4px); }
.mcombo__opt { padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text-primary); overflow-wrap: break-word; }
.mcombo__opt:hover, .mcombo__opt--hi { background: var(--bg-hover); }
/* ＋Add is the one site whose merchant field ALREADY has a visible list under it — the honeycomb.
Two merchant lists on one screen is the thing the round exists to avoid, and worse, a hex under
an open popup is a mis-tap waiting to happen. `visibility: hidden` stands the comb down while the
list is up: it keeps the layout still (no shift when the popup opens) AND removes the tiles from
hit-testing, which `opacity: 0` would not. */
.entry-merch--picking .entry-hive { visibility: hidden; }
.entry-merch__row .mcombo { flex: 1 1 auto; min-width: 0; }
.bulk-cell--merch .mcombo { width: 100%; }
.bulkbar-field .mcombo { flex: 1 1 140px; min-width: 0; }
.csv-r__l2 > .mcombo { flex: 0 0 120px; min-width: 0; }
.csv-grp__rename .mcombo { flex: 1 1 auto; min-width: 0; }
/* MULTI picker (the checkbox "selector box"): checkbox + label sit together (not space-between); headers are
clickable select-all; flat lists (no header, e.g. merchants) aren't indented; a "Clear all" row sits on top. */
.catpick--multi .catpick__opt { justify-content: flex-start; }
.catpick--multi .catpick__opt > span:first-child { overflow: visible; text-overflow: clip; white-space: normal; }
.catpick--multi .catpick__opt > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.catpick--multi .catpick__opt--flat { padding-left: 10px; }
.catpick--multi .catpick__h { cursor: pointer; }
.catpick--multi .catpick__h:hover { background: var(--bg-hover); }
.catpick__clear { padding: 8px 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.catpick__clear:hover { background: var(--bg-hover); color: var(--accent-primary); }
.catpick__check { flex: none; display: flex; color: var(--accent-primary); }
/* themed date picker (replaces the OS-drawn popup) */
.datepick__pop {
position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 272px; max-width: 86vw;
background: var(--bg-elevated); border: 1px solid var(--border-default);
border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.45); padding: 12px;
}
/* (horizontal placement is clamped inline by dateInput's positionPop — stays inside card + viewport) */
.datepick__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.datepick__title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
/* v393 — the title is the FAST-TRAVEL door: tap it and the day grid becomes the month/year picker.
It keeps the exact look it had as a span (a control that shouts would be the loudest thing in a
calendar), and only picks up a small chevron + a hover to say it can be pressed. The month panel
itself reuses the `.hmonthpop__*` rules verbatim — nothing new is defined for it here. */
.datepick__title--btn { display: inline-flex; align-items: center; gap: 4px; appearance: none;
background: none; border: none; padding: 3px 6px; margin-left: -6px; border-radius: 8px;
font-family: inherit; font-weight: 600; font-size: 14px; color: var(--text-primary); cursor: pointer; }
.datepick__title--btn:hover { background: var(--bg-hover); }
.datepick__titlechev { display: inline-flex; line-height: 0; color: var(--text-tertiary); transition: transform .12s ease; }
.datepick__title--open .datepick__titlechev { transform: rotate(180deg); color: var(--accent-primary); }
.datepick__months { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .datepick__titlechev { transition: none; } }
.datepick__nav { display: flex; gap: 4px; }
.datepick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepick__wd { text-align: center; font-size: 11px; color: var(--text-tertiary); padding: 4px 0; }
.datepick__day { appearance: none; border: none; background: none; color: var(--text-primary);
font-family: inherit; font-size: 13px; padding: 7px 0; border-radius: 8px; cursor: pointer; text-align: center; }
.datepick__day:hover { background: var(--bg-hover); }
.datepick__day--out { color: var(--text-tertiary); opacity: 0.55; }
.datepick__day--disabled { color: var(--text-tertiary); opacity: 0.28; cursor: default; } /* out of min/max range */
.datepick__day--disabled:hover { background: none; }
.datepick__day--today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.datepick__day--active { background: var(--bg-hover); }
.datepick__day--sel { background: var(--accent-primary); color: var(--on-accent-primary); font-weight: 600; }
.datepick__day--sel:hover { background: var(--accent-primary); }
.datepick__foot { display: flex; justify-content: space-between; margin-top: 8px; }
/* typeable date field (opt-in): a borderless input + a calendar button, inside the trigger frame */
.datepick__trigwrap { display: flex; align-items: center; padding: 0; }
.datepick__trigwrap:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.datepick__input { flex: 1; min-width: 0; border: none; background: none; box-shadow: none; outline: none;
padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--text-primary); }
.datepick__input:focus { border: none; box-shadow: none; outline: none; }
.datepick__iconbtn { flex: none; background: none; border: none; color: var(--text-secondary); padding: 0 10px;
cursor: pointer; display: flex; align-items: center; }
.datepick__iconbtn:hover { color: var(--accent-primary); }
.datepick__err { font-size: 12px; color: var(--accent-warm); margin-top: 5px; } /* "that's not a date" feedback */
.hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; font-size: 12px; color: var(--text-tertiary); }
.linkbtn { appearance: none; background: none; border: none; padding: 0; cursor: pointer;
color: var(--accent-primary); font-family: inherit; font-size: 12px; }
.linkbtn:hover { text-decoration: underline; }
/* ── top-bar consolidation (2026-07-24) ─────────────────────────────────────────────────────── */
/* ＋Add header: title/intro left, the two quiet entry-door pills right; pills wrap below on a phone. */
.entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.entry-head__text { flex: 1 1 240px; min-width: 0; }
.entry-head__links { display: flex; gap: 8px; flex-wrap: wrap; }
/* quiet pill: primary-purple text on a hairline border, purple glow on hover — no new colours (palette law) */
.entry-modelink { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px;
color: var(--accent-primary); background: none; border: 1px solid var(--border-default); border-radius: 999px;
padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.entry-modelink:hover { background: var(--accent-glow); }
/* merged Goals & Plans view: Reserves & Goals (left) + Pay-over-time plans (right); stacks below ~900px. */
.goalsplans { display: grid; grid-template-columns: 1fr; gap: 18px; }
.goalsplans__col { min-width: 0; } /* the standing flex/grid overflow guard — long content wraps, never spills */
@media (min-width: 900px) { .goalsplans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* divider between the profiles pool and the household card in the merged Settings "Profiles" panel */
.settings-divider { border: none; border-top: 1px solid var(--border-default); margin: 22px 0; }
/* numbers / amounts always in mono — Bible §25 */
.mono, .preview__value { font-family: 'DM Mono', ui-monospace, monospace; }
.preview {
display: flex; flex-wrap: wrap; gap: 20px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 10px; padding: 14px 16px; margin-top: 4px;
}
.preview__item { display: flex; flex-direction: column; gap: 2px; }
.preview__label { font-size: 12px; color: var(--text-tertiary); }
.preview__value { font-size: 16px; color: var(--text-primary); }
.preview__value--amount { color: var(--accent-out); } /* outgoing amount (lavender trial; was amber) */
/* primary CTA = purple (brand/neutral actions: Save, Add, Continue). Bible §3. */
.btn {
appearance: none; border: none; cursor: pointer;
background: var(--accent-primary); color: var(--on-accent-primary);
font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px;
padding: 12px 20px; border-radius: 10px;
transition: filter .12s ease, transform .06s ease; /* tactile feedback on hover/press (app-wide) */
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.92); transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; filter: none; transform: none; }
/* ghost = a subtle, secondary action (Cancel, Use different…) — outlined, not a loud purple primary.
MUST sit after the base .btn (same specificity, later source) so its transparent background wins. */
.btn--ghost { background: none; border: 1px solid var(--border-default); color: var(--text-secondary); }
.btn--ghost:hover { color: var(--text-primary); background: var(--bg-hover); filter: none; }
.btn--ghost:active { background: var(--bg-hover); transform: translateY(1px); }
/* amber variant = money-outgoing & destructive actions only (e.g. Remove). Bible §3. */
.btn--warm { background: var(--accent-warm); color: var(--on-accent-warm); }
/* small variant for row-level / secondary placements (MUST sit after .btn — see the NB above) */
.btn--sm { padding: 8px 12px; font-size: 13px; }
.toast { margin-top: 14px; font-size: 14px; min-height: 20px; }
.toast--ok { color: var(--accent-teal); }
/* ERROR TEXT IS AMBER, NOT RED (human-ratified 2026-07-30 — "go with (a) for the reds").
This one rule is EVERY error message in the app: 42 call sites, 17 written strings + server prose, from
the "Something went wrong" load-failure card down to "Type a merchant name first". It had been --accent-red
since it was written, which contradicted the palette rule three ways: red is reserved for a genuine
zero-or-below boundary (non-negotiable #4 / tone-and-language.md); --accent-warm is defined ten lines above
as "DESTRUCTIVE actions + error/status feedback" in as many words; and its own sibling .hearth-toast--err
(the FLOATING toast, line ~881) was ALREADY amber — so the same message rendered two different colours
depending only on whether it appeared inline or floated.
The audit that settled it: tools/red-text-audit.src.html -> /mocks/red-text. Of the ten --accent-red uses,
the other NINE are correct and were deliberately left alone (the zero line, below-zero amounts, the zero
marks, and intentions.trackKeptNegative "Spent {amount} more than your income" — the one sentence that
SHOULD be red). Red now appears ONLY at a zero-or-below boundary, which is what the rule always said. */
.toast--err { color: var(--accent-warm); }
/* ── settings section: the LAPTOP SIDEBAR + content panel (v423, human-ratified from the round-2 mock)
One quiet line per section — icon BESIDE label, left-aligned, the current line wearing the purple
inset edge. It replaced a 78px icon RAIL (icon over a 10.5px label); the rail was compact but it
read as a wall of glyphs, and the mock's sketch is a list you can scan. While Help is the open
section its ten guides indent beneath it (`.settings-navsub`), so a wide screen keeps everything
visible at once — which is the whole reason the phone gets a different control rather than this
one squeezed. Below the breakpoint this whole sidebar is `display: none` and the bottom thumb-bar
takes over; it stays IN THE DOM there (not un-built) so every deep link and every path that
reaches a sub-tab through it keeps working on a phone. */
.settings-section { display: flex; gap: var(--gap); align-items: flex-start; }
.settings-subnav { display: flex; flex-direction: column; gap: 2px; flex: none; width: 168px; }
.settings-navbtn {
appearance: none; background: none; border: none; cursor: pointer;
width: 100%; border-radius: 8px; font-family: inherit; color: var(--text-secondary);
display: flex; flex-direction: row; align-items: center; gap: 10px;
padding: 9px 10px; text-align: left; font-size: 13px; line-height: 1.25;
}
.settings-navbtn__icon { display: flex; flex: none; color: var(--text-tertiary); }
.settings-navbtn__icon svg { width: 17px; height: 17px; }
.settings-navbtn__lbl { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
.settings-navbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-navbtn:hover .settings-navbtn__icon { color: var(--text-primary); }
}
.settings-navbtn--active {
background: var(--bg-surface); color: var(--accent-primary); font-weight: 600;
box-shadow: inset 3px 0 0 var(--accent-primary);
}
.settings-navbtn--active .settings-navbtn__icon { color: var(--accent-primary); }
.settings-navbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
/* the ten Help guides, indented beneath the Help line while you are in Help */
.settings-navsub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 2px 14px; }
.settings-navsub__btn {
appearance: none; background: none; border: none; cursor: pointer; width: 100%;
border-radius: 7px; font-family: inherit; color: var(--text-tertiary); font-size: 12px; line-height: 1.3;
display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; text-align: left;
}
.settings-navsub__n { flex: none; width: 13px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 10.5px; }
/* the guide names WRAP rather than ellipsing. Caught by eye on the first laptop screenshot: seven of
the ten read "Importing & screen…", which is a list you cannot scan. A sidebar has height to spare
and no width to spare, so height is what gives. (The nine SECTION names all fit on one line at
168px, so they keep `nowrap` above and the column stays tidy.) */
.settings-navsub__lbl { min-width: 0; white-space: normal; }
@media (hover: hover) { .settings-navsub__btn:hover { background: var(--bg-hover); color: var(--text-primary); } }
.settings-navsub__btn--active { color: var(--text-primary); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent-primary); }
.settings-navsub__btn--active .settings-navsub__n { color: var(--accent-primary); }
.settings-navsub__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.settings-panel { flex: 1; min-width: 0; }
/* the global form caps its own content width (wide forms read worse) — the SECTION frame stays
stable across sub-tabs; data sub-tabs (archive, change log, merchant rules) use the full panel */
.settings-panel--narrow { max-width: 680px; }
/* ══ v423 — THE THUMB-BAR (phone posture of the section nav) ═══════════════════════════════════════
Built from the approved round-2 mock. It exists ONLY on Settings/Help — no other screen in the app
gains bottom chrome — and it is `display: none` above the section's own 640px breakpoint, where the
sidebar is the control. Layer: 40, the content-level pinned-bar tier (below the header's 50, per the
v378 ordering, so the header's own popups still outrank it). `data-noswipe` on the wrap is what keeps
it out of the swipe-nav's way: the gesture handler walks ancestors, so bar, sheet and scrim are all
covered by the one attribute, and the sheet's own scroll is vertical. */
/* v424 (human review of v423): the bar sits FLUSH at the viewport bottom — no gap underneath (scrolled
content used to show in the 10px slot below it), and its edges align with the app frame's 20px card
inset instead of spilling 8px past the card on each side. The safe-area inset lives INSIDE the bar
(its own opaque padding), so on gesture-bar phones nothing can peek through beneath it either. */
.snav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
padding: 0 20px; pointer-events: none; }
.snav > * { pointer-events: auto; }
/* ⚠ THE LAYER MOVES WHEN THE SHEET OPENS, and both halves are deliberate (found by eye on the first
390px screenshot: the scrim dimmed the whole page EXCEPT the header, which reads as a bug).
CLOSED the bar is furniture on the content-level pinned tier (40) — under the header's own 50, so
the context picker and the bell still paint over it, which is the v378 ordering. OPEN it is a
dialog with a scrim, so it takes 90: above the header and above the ledger/analysis side panels
(60/61), and still BELOW the modal overlay (100), which must always win. */
.snav--open { z-index: 90; }
.snav__bar {
position: relative; z-index: 3; appearance: none; cursor: pointer; width: 100%;
display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 15px; text-align: left;
background: var(--bg-elevated); border: 1px solid var(--border-default); border-bottom: none;
border-radius: 16px 16px 0 0;
padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
color: var(--text-primary); box-shadow: 0 -4px 20px rgba(0, 0, 0, .35);
}
.snav__ic { display: flex; flex: none; color: var(--text-tertiary); }
.snav__ic svg { width: 17px; height: 17px; }
.snav__crumb, .snav__sep { color: var(--text-tertiary); font-size: 13px; flex: none; }
.snav__cur { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav__car { display: flex; flex: none; color: var(--text-tertiary); transition: transform .18s ease; }
.snav--open .snav__car { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .snav__car { transition: none; } }
.snav__scrim { display: none; position: fixed; inset: 0; z-index: 1; background: rgba(4, 4, 8, .55); }
.snav--open .snav__scrim { display: block; }
/* the sheet drops UP from the bar: absolutely positioned against the fixed wrap, so it needs no
second viewport calculation and can never disagree with where the bar actually is */
.snav__sheet { display: none; position: absolute; left: 20px; right: 20px; bottom: 100%; z-index: 2;
margin-bottom: 8px; background: var(--bg-surface); border: 1px solid var(--border-default);
border-radius: 16px; padding: 8px; max-height: 62vh; overflow-y: auto; overflow-x: hidden;
box-shadow: 0 -8px 34px rgba(0, 0, 0, .5);
opacity: 0; transform: translateY(10px); transition: opacity .16s ease, transform .16s ease; }
.snav--open .snav__sheet { display: block; }
.snav--shown .snav__sheet { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .snav__sheet { transition: none; } }
.snav__sheethead { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; }
.snav__sheettitle { flex: 1; min-width: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
color: var(--text-tertiary); }
.snav__back { appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; padding: 4px 6px;
border-radius: 7px; }
.snav__backarr { color: var(--text-tertiary); }
.snav__back:focus-visible, .snav__opt:focus-visible, .snav__bar:focus-visible {
outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
/* ⚠ THUMB ORDER (human-ratified, and it LOOKS LIKE A BUG if you don't know): item 1 renders LOWEST,
nearest the thumb, and the list reads UPWARD. `flex-wrap: wrap-reverse` stacks the LINES bottom-up
while leaving each line reading left-to-right — so the DOM order stays 1..N (tab order, screen
readers and the guide numbering are all unharmed) and only the visual rows are flipped. Reversing
the ARRAY instead would also have flipped the cells within each row (…3 2 1), which is not what
"reads upward" means. The render site in settings.js carries the same warning. */
.snav__grid { display: flex; flex-wrap: wrap-reverse; gap: 6px; }
.snav__opt { appearance: none; cursor: pointer; background: none; border: none; font-family: inherit;
flex: 0 0 calc((100% - 12px) / 3); display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 11px 5px 10px; border-radius: 12px; color: var(--text-secondary); font-size: 12px; line-height: 1.2;
text-align: center; }
.snav__optic { display: flex; align-items: center; justify-content: center; height: 20px; color: var(--text-tertiary); }
.snav__optic svg { width: 19px; height: 19px; }
.snav__optic--n { font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; }
.snav__optlbl { display: block; }
.snav__opt--on { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600;
box-shadow: inset 0 0 0 1px var(--accent-primary); }
.snav__opt--on .snav__optic { color: var(--accent-primary); }
/* phone: the sidebar stands down entirely and the thumb-bar is the section nav */
@media (max-width: 640px) {
.settings-section { flex-direction: column; }
/* once stacked, the panel must FILL the column — without this it sizes to its max-content and a wide data
panel (e.g. the CSV review tab-strip) blows past the viewport and clips on the right. width:100% +
min-width:0 keeps it at the section width; its own wide children (the tabs) scroll within. */
.settings-panel { width: 100%; min-width: 0; }
/* v423: the nine-tile wall is GONE from the top of the screen — content starts directly under the
screen title. The sidebar stays in the DOM (hidden) so nothing that navigates through it breaks. */
.settings-subnav { display: none; }
.snav { display: block; }
/* room for the bar, so the last card is never parked underneath it */
.settings-section { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
/* THE CONDENSED PHONE HEADER (v385, human-directed 2026-08-20). It used to cost THREE lines — the logo,
then "ACTIVE {picker} {bell}", then the tab strip — before a single figure appeared. Now it costs two.
The mechanism is `display: contents` on the right cluster: its BOX dissolves, so its three children
become direct flex children of `.app__header`, and the brand + the context picker + the bell share one
line while `.nav` (width: 100%) wraps to the next. No DOM change, so the DESKTOP header is untouched —
which is the whole reason this is a CSS-only fix rather than a re-parenting.
⚠ Nothing may `position` against `.app__headerright` below this breakpoint any more — a
`display: contents` element generates no box. The notification popup anchors on `.app__header`
instead (see the 640px block further down); `.app__header` is already `position: relative`. */
.app__headerright { display: contents; }
.app__header { gap: 10px; margin-bottom: 14px; }
.brand { font-size: 23px; }
.brandlock { gap: 8px; }
.brandmark { width: 28px; height: 33px; }
/* the picker + bell ride to the far end of the logo's line */
.ctxslot { margin-left: auto; min-width: 0; }
/* "the name suggests what it is" — the ACTIVE label word is what a 390px line cannot afford */
.ctxslot__label { display: none; }
/* a long profile / household name must ELLIPSIS, never push the bell off the line or wrap it.
.dropdown__value already carries the ellipsis rule; a flex item needs min-width: 0 to honour it.
v395 — THE CAP IS NOW THE SPACE THAT ACTUALLY EXISTS, not a flat 42vw. The line is
[ 20 pad | Hearth ~126 | 10 gap | CHOOSER | 10 gap | bell 32 | 20 pad ], so what the chooser may
take is `100vw − 218`; the 236 leaves a further 18px of air so a long household name does not sit
up against the wordmark (at 390 that is 154px, where a flat 42vw was 164 and left 8px). The clamp's
floor keeps it legible on a very narrow phone and its 42vw ceiling keeps it from sprawling on a
small tablet. The brand's width is what the middle term encodes, so the header measurements in
verify-v395 assert the two invariants directly — a gap to the wordmark, and a bell that never
moves — rather than trusting the arithmetic to stay true if the wordmark is ever resized. */
.ctxslot { min-width: 0; }
.ctxslot .dropdown { min-width: 0; }
/* 2026-09-07: the bear (28px + 8px gap) joined the wordmark, so the middle term grew by 36px → 270.
Measured at 390: [ 20 | bear 28 | 8 | Tobsy 111 | 10 | CHOOSER | 10 | bell 32 | 20 ] = 239 + chooser;
the clamp gives the chooser 120 here, which leaves ~31px of air — more than the v395 sum had. */
.ctxslot .dropdown__trigger { max-width: clamp(90px, calc(100vw - 270px), 42vw); padding: 7px 9px; }
.ctxslot .dropdown__value { min-width: 0; }
/* the top nav becomes a full-width, horizontally-SCROLLABLE strip (the TABS scroll, not the page). */
.nav {
width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
scrollbar-width: none; -ms-overflow-style: none; /* hide the scrollbar (Firefox/IE) */
}
.nav::-webkit-scrollbar { display: none; } /* hide the scrollbar (WebKit) */
.nav__btn { flex: 0 0 auto; } /* keep intrinsic width; let the strip scroll */
}
/* merchant rules */
.merchant-add { margin-bottom: var(--gap); }
/* toolbar: search · sort · add. Wraps on a phone; the search keeps the width it can. */
.mrule-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: var(--gap); }
.mrule-search { flex: 1 1 220px; min-width: 0; position: relative; }
.mrule-search input { width: 100%; padding-left: 34px; }
.mrule-search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
color: var(--text-tertiary); line-height: 0; pointer-events: none; }
.mrule-search input::-webkit-search-cancel-button { filter: invert(0.6); }
.mrule-tools .dropdown { flex: 0 0 auto; }
.mrule-tools .btn { flex: 0 0 auto; }
.mrule-list { padding: 0; overflow: hidden; }
.mrule-empty { padding: 24px 16px; text-align: center; }
/* By-category sort renders group headers; keep them quiet — they label, they don't compete. */
.mrule-grouphead { padding: 9px 16px; background: var(--bg-base); color: var(--text-tertiary);
font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
border-bottom: 1px solid var(--border-subtle); }
.mrule { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
.mrule:first-child { border-top: none; }
.mrule-grouphead + .mrule { border-top: none; }
.mrule__main { min-width: 0; flex: 1 1 200px; }
.mrule__pattern { font-size: 15px; color: var(--text-primary); word-break: break-word; }
.mrule__usage { font-size: 12.5px; color: var(--text-tertiary); margin-top: 3px;
font-variant-numeric: tabular-nums; }
.mrule__cat { flex: none; font-size: 12.5px; color: var(--text-primary); white-space: nowrap;
border: 1px solid var(--border-default); background: var(--bg-elevated); border-radius: 999px; padding: 4px 10px; }
.mrule__archived { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
.mrule__acts { display: flex; align-items: center; gap: 2px; flex: none; }
/* The BEHAVIOUR chip — the rule's confidence level, now the user's to set (tap → the level popover).
Colour carries the meaning: teal = it just works · gold = it will come back to you · muted = only a
suggestion. Never amber (destructive) and never red (the zero line only). */
.mrule-behav { flex: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
border: 1px solid var(--border-default); background: var(--bg-elevated); border-radius: 999px;
padding: 5px 10px; font-family: inherit; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.mrule-behav:hover, .mrule-behav:focus-visible { border-color: var(--accent-primary); outline: none; }
.mrule-behav__car { line-height: 0; opacity: .55; }
.mrule-behav__car svg { width: 12px; height: 12px; }
.mrule-behav--auto { color: var(--accent-teal); border-color: rgba(62, 207, 170, .35); }
.mrule-behav--ask { color: var(--accent-gold); border-color: rgba(232, 197, 71, .32); }
.mrule-behav--sug { color: var(--text-tertiary); }
/* the level popover — themed like every other Hearth popup, positioned from the chip it belongs to */
.mrule-pop { position: fixed; z-index: 200; min-width: 240px; max-width: min(320px, calc(100vw - 16px));
max-height: calc(100vh - 16px); overflow-y: auto; /* a very short landscape viewport scrolls it, never clips it */
background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; padding: 6px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.mrule-pop__o { display: block; width: 100%; text-align: left; background: none; border: 0;
color: var(--text-primary); font-family: inherit; font-size: 14px; padding: 10px 11px;
border-radius: 8px; cursor: pointer; }
.mrule-pop__o:hover, .mrule-pop__o:focus-visible { background: var(--bg-hover); outline: none; }
.mrule-pop__hint { display: block; color: var(--text-tertiary); font-size: 12px; margin-top: 2px; }
.mrule-pop__o[aria-selected="true"] .mrule-pop__lbl { color: var(--accent-primary); font-weight: 500; }
.mrule-pop__o[aria-selected="true"] .mrule-pop__lbl::before { content: '✓ '; }
/* the same three levels inside the add/edit modal, as a stacked choice */
.mrule-seg { display: flex; flex-direction: column; gap: 6px; }
.mrule-seg__o { text-align: left; background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: 10px; color: var(--text-primary); font-family: inherit; font-size: 14px;
padding: 10px 12px; cursor: pointer; }
.mrule-seg__o:hover { background: var(--bg-hover); }
.mrule-seg__hint { display: block; color: var(--text-tertiary); font-size: 12px; margin-top: 2px; }
.mrule-seg__o[aria-checked="true"] { border-color: var(--accent-primary); background: var(--accent-glow); }
/* Renaming a merchant rule offers to rename PAST entries too.
NO WARNING LINE — dropped 2026-07-30 on the human's reading, which the code bears out: the rewrite writes
one column and deletes nothing, so changing it back is editing the rule name and ticking the same box.
It carried an amber "it can't be undone" line, which was simply untrue. The count line above the tick is
the whole disclosure. (The one genuinely one-way part is a MERGE of two spellings into one — they can't
be told apart afterwards — and the human chose not to surface even that.)
Bordered top AND bottom so the offer reads as its own section — without the bottom rule it butts straight
against the next field's "Category" label (caught in the 390px screenshot). */
.mrename { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
margin: 12px 0 14px; padding: 10px 0 12px; }
.mrename:empty { border: none; margin: 0; padding: 0; }
.mrename__t { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.mrename__l { margin: 0 0 4px; font-size: 13px; }
.mrename__opt { display: flex; gap: 8px; align-items: center; font-size: 13px;
min-height: 40px; cursor: pointer; }
/* the shared .hui-check carries margin-top:4px to sit on the first line of a two-line CSV row; this label
is single-line and vertically centred, so that offset has to come back off. */
.mrename__opt .hui-check { margin-top: 0; }
/* phone: the name + usage take their own line; category, behaviour and the actions wrap beneath it */
@media (max-width: 640px) {
.mrule { padding: 12px 14px; gap: 9px; }
.mrule__main { flex: 1 1 100%; }
.mrule__acts { margin-left: auto; }
}
/* ＋Add nav button — the daily core, emphasised (purple); solid pill when it's the active tab */
.nav__btn--add { color: var(--accent-primary); border-color: var(--border-default); font-weight: 600; }
/* v421 ③ — pointer-only, for the reason stated at .nav__btn:hover above (a tapped ＋Add kept a lit
glow after a swipe carried the pill away, same sticky-hover mechanism, its own colour) */
@media (hover: hover) {
.nav__btn--add:hover { background: var(--accent-glow); color: var(--accent-primary); }
}
.nav__btn--add.nav__btn--active { background: var(--accent-primary); color: var(--on-accent-primary); border-color: var(--accent-primary); }
/* quick manual entry */
.entry-types { display: flex; gap: 8px; margin-bottom: 8px; }
/* v398 rider — the "Set aside is not income" hint, under the type row (＋Add) and at the head of the
goals section (bulk). Tertiary register, full width, wraps freely: it is a sentence to read once,
not a warning to be stopped by. */
.entry-asidehint, .bulk-asidehint { margin: 0 0 10px; line-height: 1.45; max-width: 62ch; }
.entry-type { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border-default);
background: none; color: var(--text-secondary); font-family: inherit; font-size: 15px; cursor: pointer; }
.entry-type:hover { background: var(--bg-hover); }
.entry-type--active { background: var(--accent-primary); color: var(--on-accent-primary); border-color: var(--accent-primary); }
/* phone: 4 type pills can't fit one row (the long "Reimbursement" word overflows the card with no
h-scroll) — wrap them to a 2×2 grid. Placed AFTER the base .entry-type so it wins the cascade. */
@media (max-width: 640px) {
.entry-types { flex-wrap: wrap; }
.entry-type { flex: 1 1 calc(50% - 4px); }
}
/* v418 ⑤ — NO `text-overflow: ellipsis` HERE. The whole amount is always visible: `fitDisplay` shrinks
* the type until it fits (measured fractionally, entry.js), and an ellipsis is not a fallback for that
* — it is the failure this control exists to prevent, wearing a tidy face. Removed so the outcome is
* unreachable rather than merely unlikely. `overflow: hidden` stays: it keeps a runaway figure inside
* the card instead of shoving the currency chip off the row. */
.numpad__display { font-family: 'DM Mono', ui-monospace, monospace; font-size: 34px; text-align: right;
padding: 12px 10px 6px; color: var(--text-primary); overflow: hidden; }
.numpad__display--in { color: var(--accent-teal); }
.numpad__display--reimb { color: var(--accent-gold); }
.numpad__display--neutral { color: var(--text-secondary); } /* transfer = neutral movement, muted (§5.1) */
/* FX (§9) — currency chip beside the amount + the live conversion preview */
.entry-amountrow { display: flex; align-items: center; gap: 8px; }
.entry-amountrow .numpad__display { flex: 1; min-width: 0; }
.entry-ccychip { flex: 0 0 auto; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-default);
background: none; color: var(--text-secondary); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.entry-ccychip:hover { background: var(--bg-hover); }
.entry-ccychip--on { color: var(--accent-primary); border-color: var(--accent-primary); background: var(--accent-glow); }
.entry-ccypick { margin: 6px 0 2px; }
/* date chip (§22 past-data entry) — compact "Today ▾" pill on the LEFT of the amount row; mirrors .entry-ccychip */
.entry-amountrow .entry-datechip { flex: 0 0 auto; }
.entry-datechip .dropdown__trigger { width: auto; gap: 5px; padding: 6px 10px 6px 12px; border-radius: 20px;
background: none; color: var(--text-secondary); font-size: 14px; font-weight: 600; }
.entry-datechip .dropdown__trigger:hover { background: var(--bg-hover); }
.entry-datechip .dropdown__chevron svg { width: 16px; height: 16px; }
.entry-fx { margin: 2px 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--bg-surface); }
.entry-fx__line { font-size: 15px; color: var(--text-primary); }
.entry-fx__note, .entry-fx__attr { font-size: 12px; margin-top: 3px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 6px; }
.numpad__key { padding: 15px 0; font-size: 20px; font-family: 'DM Mono', ui-monospace, monospace;
background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 10px;
color: var(--text-primary); cursor: pointer; }
.numpad__key:hover { background: var(--bg-hover); }
.numpad__key:active { transform: translateY(1px); }
.numpad__key--back { color: var(--accent-warm); }
.entry-suggest { display: inline-block; margin-top: 8px; font-size: 13px; font-family: inherit; }
.entry-suggest--applied { background: none; border: none; padding: 0;
color: var(--accent-teal); } /* the chosen category MATCHES the suggestion — a calm confirmation (no action needed) */
.entry-suggest--chip { appearance: none; cursor: pointer; padding: 6px 12px; border-radius: 16px;
border: 1px solid var(--accent-primary); background: var(--accent-glow); color: var(--accent-primary);
font-family: inherit; }
.entry-suggest--chip:hover { background: var(--accent-primary); color: var(--on-accent-primary); }
.entry-label { display: block; font-size: 13px; color: var(--text-secondary); margin: 14px 0 8px; }
.cat-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tile { padding: 9px 14px; border-radius: 20px; border: 1px solid var(--border-default);
background: none; color: var(--text-secondary); font-family: inherit; font-size: 14px; cursor: pointer; }
.cat-tile:hover { background: var(--bg-hover); }
.cat-tile--active { background: var(--accent-primary); color: var(--on-accent-primary); border-color: var(--accent-primary); }
.cat-tile--more { font-style: italic; }
.entry-more { margin-top: 10px; }
.entry-chosen { margin-top: 10px; font-size: 13px; color: var(--accent-primary); }
.entry-hh { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.entry-hh__split { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
font-size: 14px; color: var(--text-secondary); }
.entry-hh__q { font-size: 13px; color: var(--text-secondary); margin: 14px 0 8px; }
.entry-hh__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-hh__hint { margin-top: 8px; font-size: 12px; color: var(--text-tertiary); }
.entry-hh__override { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.entry-hh__field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 110px; }
.entry-hh__field > label { font-size: 12px; color: var(--text-tertiary); }
.entry-pill { appearance: none; cursor: pointer; padding: 9px 16px; border-radius: 20px;
border: 1px solid var(--border-default); background: none; color: var(--text-secondary);
font-family: inherit; font-size: 14px; }
.entry-pill:hover { background: var(--bg-hover); }
.entry-pill--active { background: var(--accent-primary); color: var(--on-accent-primary); border-color: var(--accent-primary); }
.entry-pill--ghost { border-style: dashed; font-size: 13px; }
.entry-log { width: 100%; margin-top: 16px; }
/* ── v394: the MERCHANT block — label left, typing field right, the honeycomb beneath ─────────────
The label and the field share one row so the comb gets the card's full width for names, which is
where the height saved in the approved mock's round 2 came from. */
.entry-merch { margin-top: 14px; }
.entry-merch__row { display: flex; align-items: center; gap: 10px; }
.entry-merch__lbl { flex: 0 0 auto; font-size: 13px; color: var(--text-secondary); }
.entry-merch__in { flex: 1 1 auto; min-width: 0; }
/* THE HONEYCOMB. Every tile is absolutely placed from JS (buildHive) because a tessellation is
arithmetic, not flow — the box's own width/height are set from the same numbers, including the half
tile an OFFSET row reaches past the flush ones. Nothing here is a new colour: the resting tile is
--bg-elevated on a --border-default rim, and a selected tile wears the purple primary. */
.entry-hive { position: relative; margin: 8px 0 0; max-width: 100%; }
.hex { position: absolute; padding: 0; border: 0; background: var(--border-default); cursor: pointer;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: filter .12s ease, transform .06s ease; }
.hex__in { position: absolute; inset: 1.5px; background: var(--bg-elevated); color: var(--text-secondary);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 9%; text-align: center; }
.hex:hover .hex__in { background: var(--bg-hover); color: var(--text-primary); }
.hex:active { transform: translateY(1px); }
.hex__emoji { font-size: 14px; line-height: 1.15; }
.hex__name { font-family: 'DM Sans', sans-serif; font-weight: 600; line-height: 1.12; width: 100%;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
word-break: break-word; hyphens: auto; }
.hex__sub { line-height: 1.1; color: var(--text-tertiary); width: 100%;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hex--on { background: var(--accent-primary); filter: drop-shadow(0 0 7px var(--accent-glow)); }
.hex--on .hex__in { background: var(--accent-primary); color: var(--on-accent-primary); }
.hex--on .hex__sub { color: var(--on-accent-primary); opacity: .78; }
/* ── v394: the STICKY LOG DOCK ────────────────────────────────────────────────────────────────────
The LAST child of .view, so it floats over the form while you are scrolled up it and settles into
its own space at the end — it never permanently covers content and needs no fixed-overlay geometry.
Full-bleed across .app's 20px gutters with an opaque base so the form cannot peek past its edges as
it scrolls under (the .cal-sticky rule). Sticky works because html/body use overflow-x: clip.
Log is order:99 and grows, so it stays last and full-width on whichever row the wrap leaves it. */
.entry-dock { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px;
align-items: center; margin: 14px -20px 0; padding: 10px 20px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--bg-base); border-top: 1px solid var(--border-subtle);
box-shadow: 0 -10px 24px rgba(0, 0, 0, .55); }
.entry-dock .entry-log { order: 99; flex: 1 1 132px; min-width: 132px; width: auto; margin-top: 0;
padding: 12px 14px; }
.entry-dock__mini { flex: 0 0 auto; appearance: none; cursor: pointer; white-space: nowrap;
background: none; border: 1px solid var(--border-default); border-radius: 19px;
color: var(--text-secondary); font-family: inherit; font-size: 12.5px; padding: 10px 11px; }
.entry-dock__mini:hover { color: var(--text-primary); background: var(--bg-hover); }
.entry-dock__mini--on { color: var(--accent-primary); border-color: var(--accent-primary); background: var(--accent-glow); }
/* the dock floats over the bottom of the viewport, so anything it might scroll a reader to keeps a
landing strip clear of it */
.entry .field, .entry .entry-more, .entry .entry-amort { scroll-margin-bottom: 96px; }
/* reimbursement entry (5d·5): the linkable-expense candidate list + the over-ask */
.reimb-cands { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.reimb-cand { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-default);
background: none; color: var(--text-secondary); font-family: inherit; font-size: 14px; cursor: pointer; }
.reimb-cand:hover { background: var(--bg-hover); }
.reimb-cand__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reimb-cand__t { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reimb-cand__m { font-size: 12px; color: var(--text-tertiary); }
.reimb-cand__r { flex: 0 0 auto; font-size: 12px; color: var(--accent-gold); }
/* shared reimbursement→expense finder: a category filter + working search above a scrollable list (no cap) */
.reimb-finder { display: flex; flex-direction: column; gap: 8px; }
.reimb-finder__controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reimb-finder__controls > * { flex: 1 1 150px; min-width: 0; }
.reimb-finder__search { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-default);
background: var(--bg-input); color: var(--text-primary); }
.reimb-finder__search:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
/* locked-category chip: the refund's category is fixed (bulk/Ledger finish) — shown, not pickable */
.reimb-finder__fixedcat { flex: 0 1 auto; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 10px;
background: rgba(124,106,255,.12); color: var(--text-primary); font-weight: 600; font-size: 0.92em;
border: 1px solid var(--border-subtle); }
.reimb-finder__hint { margin: 0; font-size: 0.85em; }
.reimb-finder .reimb-cands { max-height: 300px; overflow-y: auto; }
.entry-overask { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.entry-overask .entry-hh__btns { margin-top: 8px; }
/* §28 pattern double-log nudge — calm awareness (purple-tinted), never amber; only at commit */
.entry-patdup { margin-top: 14px; padding: 10px 12px; background: var(--accent-glow); border: 1px solid var(--border-default); border-radius: 10px; }
.entry-patdup .entry-hh__btns { margin-top: 8px; }
/* amortisation — "pay over time" (§4.12): the inline config on the expense form */
.entry-amort { margin-top: 14px; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--border-default); background: var(--bg-surface); }
.entry-amort__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.entry-amort__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.entry-amort__sub { font-size: 12px; color: var(--text-tertiary); }
.entry-amort__close { margin-left: auto; }
.entry-amort .entry-hh__btns { margin-top: 10px; }
.entry-amort__preview { margin-top: 10px; font-size: 13px; color: var(--accent-primary); }
/* compound selector beats the base .tx__note (which sets italic) regardless of source order */
.tx__note.tx__note--amort { font-style: normal; color: var(--text-tertiary); }
/* §8 pre-funded draw-down — gold = money previously set aside (tone-and-language.md) */
.tx__note.tx__note--fund { font-style: normal; color: var(--accent-gold); }
.txd__amort { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* pay-over-time plans surface */
.plan { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 14px 2px; border-top: 1px solid var(--border-subtle); }
.plan:first-child { border-top: none; }
.plan--inactive { opacity: 0.7; }
.plan__main { min-width: 0; flex: 1; }
.plan__titlerow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__title { font-size: 15px; color: var(--text-primary); word-break: break-word; }
.plan__shared { font-size: 12px; color: var(--accent-primary); } /* a household plan seen in a personal view (your share) */
.plan__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 3px;
font-size: 13px; color: var(--text-secondary); }
.plan__type { color: var(--accent-primary); }
.plan__prog { font-size: 12px; margin-top: 4px; }
.plan__next { font-size: 12px; margin-top: 2px; }
.plan__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.plan__total { font-size: 15px; color: var(--text-primary); }
.plan__status { font-size: 11px; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border-default); }
.plan__status--active { color: var(--accent-teal); border-color: var(--accent-teal); }
.plan__status--complete { color: var(--accent-primary); border-color: var(--accent-primary); }
.plan__status--cancelled { color: var(--text-tertiary); }
.plan__cancel { font-size: 12px; }
.plan__confirm { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--bg-surface); }
.plan__confirmq { font-size: 13px; color: var(--text-secondary); }
.plan__confirmbtns { display: flex; gap: 8px; flex: none; }
/* reserves & goals surface (§8) — teal = kept/goals, gold = a milestone reached, purple = shared */
.reserve { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 14px 2px; border-top: 1px solid var(--border-subtle); }
.reserve:first-child { border-top: none; }
.reserve--inactive { opacity: 0.72; }
.reserve__main { min-width: 0; flex: 1; }
.reserve__titlerow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.reserve__title { font-size: 15px; color: var(--text-primary); word-break: break-word; }
.reserve__kind { font-size: 11px; color: var(--accent-teal); border: 1px solid var(--accent-teal);
border-radius: 20px; padding: 1px 8px; }
.reserve__shared { font-size: 12px; color: var(--accent-primary); }
.reserve__reached { font-size: 11px; color: var(--accent-gold); border: 1px solid var(--accent-gold);
border-radius: 20px; padding: 1px 8px; } /* a goal reaching 100% — gold milestone celebration (§3/§8) */
/* v388 — THE FUND BAR, rebuilt in the INTENTIONS register (the human's ask: "the progress bar's track is
invisible and rounded — I want the whole bar visible, straight, like the intentions one"). Same fix, same
reasoning as .intent-track__bar: the old track was --bg-surface on a --bg-surface card, so only the fill
was ever on screen and a nearly-empty fund showed a 3% dot against nothing. The track now carries its own
background and border, and the corners are SQUARE. Gold throughout — this is fund money (§3). */
.reserve__bar { position: relative; height: 14px; border-radius: 0; background: var(--bg-input);
border: 1px solid var(--border-default); overflow: hidden; margin: 10px 0 5px; max-width: 420px; }
.reserve__barfill { height: 100%; background: var(--accent-gold); border-radius: 0; transition: width .25s ease; }
.reserve__barfill--done { background: var(--accent-gold); } /* target reached — gold (§3 milestone) */
.reserve__barlbl { display: flex; justify-content: space-between; gap: 12px; font-size: 12px;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; max-width: 420px; }
.reserve__emoji { font-size: 17px; line-height: 1; flex: none; }
/* v391: one notch down (19→18 / 17→16 on a phone) — the human read the headline as shouting beside the
card's other figures. Weight, gold and tabular-nums are unchanged; only the size moves.
v392 — AND THE WEIGHT COMES OFF THE FAUX BOLD. The human reported the figure as "hazy" on their phone
and it was not the size: `.reserve__holds` also carries `mono`, i.e. DM Mono, which SHIPS NO WEIGHT
ABOVE 500. Asking for 600 makes the browser synthesize a bold by smearing the 500 glyphs — crisp text
beside a blurred number, exactly the standing "cap DM Mono at 500" rule this codebase already writes
down at .csv-dupr__amt / .csv-counter__big / .ana-mtab td.mono. 500 is its real heaviest; the desktop
size drops one more notch (18→17) so losing the weight does not read as the figure growing. */
/* v406 ⑥ — the amount left the title row for its own line directly under the name, so the old
`margin-left: auto` (which right-floated it against the actions column) goes with it. Size, weight and
gold are unchanged: this is a move, not a restyle. */
.reserve__holdsrow { display: flex; margin-top: 3px; }
.reserve__holds { font-size: 17px; font-weight: 500; color: var(--accent-gold);
font-variant-numeric: tabular-nums; }
.reserve__sub { font-size: 12.5px; color: var(--text-tertiary); margin: 2px 0 0; }
/* v406 ④ — quiet, tertiary, and it simply is not there when the fund has no stamp to show. */
.reserve__since { font-size: 12px; margin: 2px 0 0; }
.reserve__pace { font-size: 13.5px; color: var(--text-secondary); margin: 7px 0 0; }
.reserve__pace b { color: var(--text-primary); font-weight: 600; }
.reserve__multiera { font-size: 12.5px; margin: 8px 0 0; max-width: 56ch; }
/* the step ladder. v403 gave it AXES ("otherwise it's just a line"): a LEFT GUTTER carrying the top of the
money scale and the zero line's own value, and the two end months in a row under the plot. All four
labels are HTML, never SVG — the svg is preserveAspectRatio='none', so anything inside it is
stretched with the box. The money labels are absolutely positioned at the same y the line uses (set
inline, as a %), which is why the gutter is the plot's padding rather than a flex column: the label has
to be free to sit anywhere vertically. Sparkline register throughout — tertiary, tiny, no ticks. */
.reserve__spark { margin: 12px 0 2px; max-width: 420px; }
.reserve__sparkplot { position: relative; padding-left: 54px; }
.reserve__sparksvg { width: 100%; height: 56px; display: block; }
.reserve__sparkline { stroke: var(--accent-gold); stroke-width: 2; }
.reserve__sparkbase { stroke: var(--text-tertiary); stroke-width: 1; } /* the zero line — soft grey (v347), never red */
.reserve__sparkval { position: absolute; left: 0; width: 48px; text-align: right; line-height: 1;
font-size: 10.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* zero sits ON the baseline, so its label hangs ABOVE the rule rather than dropping into the month row */
.reserve__sparkval--zero { transform: translateY(-100%); }
.reserve__sparkaxis { display: flex; justify-content: space-between; gap: 10px; padding-left: 54px;
margin-top: 3px; font-size: 10.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.reserve__sparkcap { font-size: 11.5px; margin: 2px 0 0; max-width: 56ch; }
/* the fund's own recent story — gold IN (money set aside), lavender OUT (spending, --accent-out) */
.reserve__events { margin: 12px 0 0; border-top: 1px solid var(--border-subtle); padding-top: 8px; max-width: 460px; }
.reserve__ev { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 4px 0; }
.reserve__evd { color: var(--text-tertiary); flex: 0 0 auto; min-width: 68px; }
/* the label WRAPS rather than ellipsising. At 390px "Paid from this fund — Bunnings" was being cut to
"Paid from t…", which is not a shortened label, it is a deleted one — and the merchant name is the whole
point of the line. Two short lines beat one meaningless one. (Found at the eyeball gate.) */
.reserve__evl { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.reserve__evamt { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.reserve__evamt--in { color: var(--accent-gold); }
.reserve__evamt--out { color: var(--accent-out); }
.reserve__seeall { display: inline-block; margin-top: 7px; font-size: 13px; color: var(--accent-primary); }
.reserve__delete { font-size: 12px; color: var(--accent-warm); } /* destructive = amber (§3), never red */
.reserve__undo { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--bg-surface);
border: 1px solid var(--border-subtle); }
.reserve__undoq { font-size: 13px; color: var(--text-secondary); }
.reserve__undogo { font-size: 13px; color: var(--accent-primary); font-weight: 600; }
.reserve__busy { margin-top: 4px; }
.reserve__emojibtn { margin: 0; }
@media (max-width: 560px) {
.reserve__holds { font-size: 16px; }
.reserve__evd { min-width: 58px; }
/* the phone card is narrow: the gutter gives back 4px and the labels drop half a point, so the plot
keeps its width and the two month captions never meet in the middle. 44px is not arbitrary —
"A$128.5k", the widest tick under a million, measures 41px here (asserted in the phone arm). */
.reserve__sparkplot, .reserve__sparkaxis { padding-left: 50px; }
.reserve__sparkval { width: 44px; }
.reserve__sparkval, .reserve__sparkaxis { font-size: 10px; }
}
.reserve__bartick { position: absolute; top: 0; width: 2px; height: 100%; background: var(--bg-elevated); }
.reserve__bartick--hit { background: var(--accent-gold); } /* a 25/50/75% milestone reached */
.reserve__prog { font-size: 13px; color: var(--text-secondary); }
.reserve__people { font-size: 12px; margin-top: 4px; word-break: break-word; }
.reserve__mine { font-size: 12px; color: var(--accent-primary); margin-top: 2px; }
.reserve__drawn { font-size: 12px; margin-top: 2px; }
.reserve__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.reserve__status { font-size: 11px; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border-default); }
.reserve__status--active { color: var(--accent-teal); border-color: var(--accent-teal); }
.reserve__status--closed { color: var(--text-tertiary); }
.reserve__status--released { color: var(--accent-primary); border-color: var(--accent-primary); }
.reserve__give, .reserve__editbtn, .reserve__release, .reserve__archive { font-size: 12px; }
.reserve__archive { color: var(--accent-warm); } /* Remove = amber, destructive (Bible §3) */
.reserve__form { flex-basis: 100%; margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--bg-surface); }
.reserve__formlabel { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.reserve__form input[type="number"] { width: 100%; }
.reserve__who { font-size: 13px; color: var(--text-secondary); margin: 10px 0 6px; }
.reserve__formbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.reserve__confirm { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--bg-surface); }
.reserve__confirmq { font-size: 13px; color: var(--text-secondary); }
.reserve__confirmbtns { display: flex; gap: 8px; flex: none; }
.reserve__confirm { flex-wrap: wrap; }
/* min-width 100% (NOT max-width) — a flex item's max-width CLAMPS its flex base size, so a 62ch cap let the
"full-width" line slip up beside the buttons on a wide strip instead of wrapping. min wins the clamp.
Secondary (not tertiary) text — the explainers must be clearly readable (human review, 2026-07-15). */
.reserve__relinfo { flex-basis: 100%; min-width: 100%; margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.reserve__howlink { display: block; margin-top: 8px; }
/* `.reserve__started` RETIRED v406 ⑤ — the standalone named-split line is gone; the named split now rides
the sub-line (`.reserve__sub`) as the fund's ONE starting sentence. */
.reserve__starthelp { font-size: 12.5px; margin: -4px 0 12px; max-width: 52ch; }
.reserve__unrelease { font-size: 12px; color: var(--accent-teal); }
.reserve__howinfo { max-width: 62ch; margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
/* expanded list of a reserve's linked draw-down expenses (each jumps to its ledger row) */
.reserve__draws { flex-basis: 100%; margin-top: 8px; padding: 4px 12px; border-radius: 10px; background: var(--bg-surface); }
.reserve__draw { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.reserve__draw:first-child { border-top: none; }
.reserve__drawmain { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.reserve__drawt { font-size: 13px; color: var(--text-primary); word-break: break-word; }
.reserve__drawm { font-size: 11px; }
.reserve__drawamt { font-size: 13px; color: var(--text-secondary); flex: none; }
.reserve__drawgo { font-size: 12px; flex: none; }
/* money input with a base-currency prefix (the Target field) */
.reserve__money { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-default);
border-radius: 10px; padding: 0 10px; background: var(--bg-surface); }
.reserve__money:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.reserve__moneysym { flex: none; color: var(--text-secondary); font-size: 14px; }
.reserve__money input { flex: 1; min-width: 0; border: none; background: none; box-shadow: none; outline: none; padding: 10px 0; }
.reserve__money input:focus { border: none; box-shadow: none; outline: none; }
/* ledger / transaction list */
.tx { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 12px 2px; border-top: 1px solid var(--border-subtle); }
.tx:first-child { border-top: none; }
.tx--pending { opacity: 0.72; }
.tx__main { min-width: 0; flex: 1; }
.tx__title { font-size: 15px; color: var(--text-primary); word-break: break-word; }
.tx__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 3px; }
.tx__cat { font-size: 13px; color: var(--text-secondary); }
.tx__date { font-size: 12px; color: var(--text-tertiary); }
.tx__pending { font-size: 12px; color: var(--accent-primary); }
.tx__note { font-size: 13px; color: var(--text-secondary); font-style: italic; margin-top: 3px; word-break: break-word; }
/* Slice A — the ledger panel row. Line 2 (.tx__meta) FLOWS: category, badges, tags and the note inline,
wrapping only when the next item would reach the reserved gap. The gap itself is the info column's right
padding (var(--gut) = 26px, ratified) — content wraps at that content-box edge, so the amounts always keep
their breathing room. Scoped to .ledger-list so the embedded/peek/arc rows are untouched. */
.ledger-list .tx { align-items: flex-start; }
.ledger-list .tx__main { padding-right: var(--gut); }
/* ── v384 — A NAME NEVER BREAKS MID-WORD; THE AMOUNT TAKES ITS OWN LINE INSTEAD ────────────────────
The defect, off the human's own phone shot: "Groce/ries" beside a nine-digit amount. Row amounts are
the RECORD and are exact to the cent by ratified rule (v382), so a huge one is legitimately ~150px
wide — and with `flex: 1` + `min-width: 0` the info column's hypothetical size was ZERO, so it never
asked the row to wrap. It just kept shrinking until a word had to be cut in half.
TWO changes, and they only work as a pair:
· `flex-basis: min-content` gives the info column a hypothetical size equal to its LONGEST WORD, so
flex line-collection wraps `.tx__right` (amount + action slot) onto its own line rather than
squeezing the name below a word. `min-width: 0` STAYS, so in the pathological case (a single
unbroken 40-character merchant) it can still shrink and break rather than overflow the card.
· `overflow-wrap: break-word` replaces the legacy `word-break: break-word`, which is an alias for
`overflow-wrap: anywhere` — and `anywhere` is precisely what makes min-content one character wide.
`break-word` breaks a word only as a last resort and leaves the intrinsic size at the longest word,
which is what the flex-basis above needs to be true.
`margin-left: auto` keeps the amount right-aligned on whichever line it lands (the row's
space-between would otherwise park a wrapped right column at the left). Scoped to `.ledger-list` —
the embedded/peek/arc rows keep today's geometry exactly. */
.ledger-list .tx__main { flex: 1 1 min-content; }
.ledger-list .tx__title { word-break: normal; overflow-wrap: break-word; }
.ledger-list .tx__right { margin-left: auto; }
/* ── v378 — A LONG PRESS IS A GESTURE, NOT A TEXT SELECTION ────────────────────────────────────────
The human's v377 phone review: holding a row highlighted its text and the selection "sometimes"
swallowed the gesture. Both symptoms are one cause — the OS selection engages on the hold, takes the
pointer, and Chrome fires pointercancel, which cancels the armed long-press timer. So the fix belongs
here, not in the timer: a ledger row is a control, and a control does not select. `touch-action: pan-y`
keeps vertical scrolling with the browser (which is also what cancels a press during a real scroll).
SCOPED to .ledger-list rows — embedded/peek/arc .tx rows elsewhere are untouched — and the expanded
detail opts BACK IN, because a note is text a person may legitimately want to copy. */
.ledger-list .tx { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.ledger-list .tx__detail { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.tx__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.tx__meta .tx__tag { margin: 0; } /* tags are inline pills in the flow, not a block strip */
.tx__meta .tx__note { margin-top: 0; } /* the note flows inline; block awareness notes below keep their top margin */
/* the day header — the date lifted out of every row (ratified 2026-07-26). A quiet divider with the day's net. */
.dayhdr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
padding: 13px 2px 6px; border-top: 1px solid var(--border-subtle); }
.dayhdr:first-child { border-top: none; }
.dayhdr + .tx { border-top: none; } /* the header already draws the divider — no double line */
.dayhdr__d { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.dayhdr__s { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* Slice C — bulk selection: the tick box appears only in select mode (reading is unchanged), selection
tints the row, and "to here" range-selects within the current filter. */
.ledger-list .tx { position: relative; }
/* the tick: a smaller 16px box in a 38px-tall grid cell that MATCHES the category avatar's height, so the
box centres on the avatar (not floating up beside the merchant line). Human, 2026-07-31: "smaller … and
centred with the icon". */
/* ── v387 — THE TICK TAKES THE AVATAR'S SLOT, IT DOES NOT ASK FOR NEW WIDTH ────────────────────────
Was: a 22px flex item of its own, which with the row's 12px gap slid EVERY row 34px sideways the
instant selection engaged (the human: "everything shifts a little bit to make space for that
checkbox"). It is now absolutely positioned inside `.catav`, a box that is already 38×38 on every row
in both states — so entering selection changes no row's geometry at all. The avatar's own glyph is
hidden underneath: `visibility` for the icon/emoji ELEMENTS, and `color: transparent` on the wrap for
the monogram fallback, which is a bare text node with no element to hide. `.tx__tickbox` re-declares
its own colour, so the check mark is unaffected by that transparent. */
.tx__tick { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.catav--ticked { position: relative; color: transparent; }
.catav--ticked > svg, .catav--ticked > .catav__emoji { visibility: hidden; }
.tx__tickbox { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-strong);
background: var(--bg-input); display: grid; place-items: center; color: #fff;
/* v392: nothing may ever paint outside the rounded square again — a clip, not a hope. */
overflow: hidden; }
.tx--sel { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-radius: 8px; }
.tx--sel .tx__tickbox { background: var(--accent-primary); border-color: var(--accent-primary); }
/* ── v392 — THE TICK LEAKED OUT OF ITS BOX, AND IT WAS A CASCADE COLLISION, NOT A FONT ──────────────
The human saw the tick draw oversized and spill past the rounded square on their phone. It is not a
font glyph (it has been inline SVG geometry — HUI.icons.check — since the box was built) and it is
not device-specific: v387 moved the tick INSIDE `.catav`, which already carries the app-wide rule
`.catav svg { width: 20px; height: 20px }` for a category icon. That rule and `.tx__tickbox svg`
have IDENTICAL specificity (0,1,1), and `.catav svg` is ~1150 lines LOWER in this file — so source
order handed it the win and the 11px tick was being painted at 20px inside a 16px box. Every screen
rendered it that way; the phone is just where it was noticed.
THE FIX is specificity that cannot be lost to source order (three classes beats one class + one
element), belt-and-braces `!important`-free, plus the `overflow: hidden` above so a future rule of
any weight still cannot push ink outside the square. The zero-reflow property v387 bought is
untouched: the tick is still absolutely positioned inside the 38×38 avatar slot and still claims no
width of its own. */
.tx__tickbox > .tx__tickmark { width: 11px; height: 11px; display: block; }
.tx__tohere { position: absolute; right: 4px; bottom: 4px; font-size: 10.5px; color: var(--accent-primary);
background: var(--bg-elevated); border: 1px solid var(--accent-primary); border-radius: 999px; padding: 1px 9px; cursor: pointer; }
.tx__tohere:hover { background: var(--bg-hover); }
/* the sticky bar is now a COLUMN: a top action row that can GROW an editor drawer in place (no modal) —
human, 2026-07-31: "make that bottom thing only become slightly bigger … shows all the editing options". */
.ledger-selbar { position: sticky; bottom: 0; z-index: 7; display: block;
background: var(--bg-elevated); border: 1px solid var(--accent-primary); border-radius: 12px; padding: 10px 14px; margin-top: 12px;
box-shadow: 0 -6px 20px rgba(0,0,0,.3); }
.ledger-selbar__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ledger-selbar__n { font-size: 13.5px; font-weight: 600; margin-right: auto; }
.ledger-selbar__end { border-color: var(--border-strong); color: var(--text-secondary); }
.ledger-selbar__drawer { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.ledger-selbar__drawer:empty { display: none; }
/* the editor drawer — one row of option chips, and the ONE active control (never every field at once) */
.bulkbar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bulkchip { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: 999px;
padding: 5px 12px; font: inherit; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.bulkchip:hover { background: var(--bg-hover); color: var(--text-primary); }
.bulkchip.is-on { border-color: var(--accent-primary); color: var(--text-primary);
background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-input)); font-weight: 600; }
/* Remove is destructive → amber (never red; red is only the zero line) */
.bulkchip--del { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 45%, var(--border-default)); }
.bulkchip--del:hover { background: color-mix(in srgb, var(--accent-warm) 14%, var(--bg-input)); color: var(--accent-warm); }
.bulkchip--del.is-on { border-color: var(--accent-warm); color: var(--accent-warm);
background: color-mix(in srgb, var(--accent-warm) 18%, var(--bg-input)); }
.bulkbar-ctl { margin-top: 11px; }
.bulkbar-ctl:empty { display: none; }
.bulkbar-field { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bulkbar-field > label { font-size: 12px; color: var(--text-secondary); min-width: 56px; }
.bulkbar-field .catpick, .bulkbar-field .dropdown { flex: 1 1 150px; min-width: 0; }
.bulkbar-input { flex: 1 1 140px; min-width: 0; background: var(--bg-input); border: 1px solid var(--border-default);
color: var(--text-primary); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; }
.bulkbar-input:focus { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.bulkbar-hint { font-size: 11.5px; color: var(--text-tertiary); margin: 8px 0 0; }
.bulkbar-link { background: none; border: 0; color: var(--accent-primary); font: inherit; font-size: 12px;
cursor: pointer; padding: 0; text-decoration: underline; }
.bulkbar-confirm { background: color-mix(in srgb, var(--accent-warm) 9%, var(--bg-input));
border: 1px solid color-mix(in srgb, var(--accent-warm) 40%, transparent); border-radius: 10px; padding: 11px 12px; }
.bulkbar-confirm__t { font-size: 13px; color: var(--text-primary); margin: 0 0 3px; }
.bulkbar-confirm__s { font-size: 12px; color: var(--text-secondary); margin: 0 0 10px; }
.bulkbar-confirm__btns { display: flex; gap: 8px; justify-content: flex-end; }
/* the drawer lives in the sticky bar at the VIEWPORT BOTTOM, so its pickers must open UPWARD — a downward
popup falls off-screen and only its header shows (human-caught 2026-07-31). Scoped to the drawer, so the
same catpick / dateInput open downward everywhere else, unchanged. */
.ledger-selbar__drawer .combo__list,
.ledger-selbar__drawer .catpick__box,
.ledger-selbar__drawer .datepick__pop { top: auto; bottom: calc(100% + 5px); }
.tx__right { display: flex; align-items: center; gap: 8px; flex: none; }
/* the actions slot is ALWAYS rendered at a fixed width (empty when a row has no actions) so the
amounts sit in ONE aligned column whether or not a row is deletable (share rows aren't). */
.tx__act { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.tx__amt { font-size: 15px; }
.tx__amt--out { color: var(--accent-out); } /* outgoing money (lavender trial 2026-06-23; was amber §3) */
.tx__amt--in { color: var(--accent-teal); } /* income = teal */
.tx__amt--reimb { color: var(--accent-gold); } /* reimbursement = gold — money returned, distinct from income at a glance (§3 amendment, 5d·5 refine) */
.tx__amt--neutral { color: var(--text-secondary); } /* transfer/provision = neutral money movement, muted — neither spend nor income (§5.1/§8) */
.tx__shared { font-size: 12px; color: var(--accent-primary); } /* a household tx seen in a personal view (share) */
.tx__fx { font-size: 12px; color: var(--text-tertiary); } /* the original foreign amount beside the base (§9) */
.tx__amt--pending { color: var(--text-tertiary); font-style: italic; } /* a not-yet-converted foreign row */
.txd__fxnote, .txd__fxattr { font-size: 12px; margin-top: 6px; }
.settings-fieldnote { font-size: 12px; margin: -4px 0 10px; } /* the base-currency change note sits under its field */
/* global toast — a brief background-op failure message, shown app-wide (optimistic-write rollback, §20) */
.hearth-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 16px); z-index: 60;
max-width: 90%; padding: 11px 16px; border-radius: 12px; font-size: 14px; pointer-events: none;
background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default);
box-shadow: 0 8px 28px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; }
.hearth-toast--show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hearth-toast--err { border-color: var(--accent-warm); color: var(--accent-warm); }
/* S3: an actionable toast (e.g. "Comparison cleared — Undo") lays its message + one purple action button in a row
and becomes pointer-interactive (the ordinary status toast stays pointer-events:none so it never blocks). */
.hearth-toast { display: inline-flex; align-items: center; gap: 14px; }
.hearth-toast--action { pointer-events: auto; }
.hearth-toast__action { appearance: none; background: none; border: none; font-family: inherit; font-size: 14px;
font-weight: 600; cursor: pointer; color: var(--accent-primary); padding: 2px 4px; border-radius: 8px; flex: none; }
.hearth-toast__action:hover { text-decoration: underline; }
.tx__owner { font-size: 12px; color: var(--accent-primary); } /* whose income (a member's income in the household view) */
/* ── Dashboard / financial summary (Phase 9a, §4) — width-aware data screen ───────────────────── */
.dash-block { margin-bottom: 18px; }
.dash-eranote, .dash-note { margin: 8px 2px; }
.dash-empty { text-align: center; }
/* 2b — this month's plans (reuses the .intent-track* row styles from the Intentions Track view) */
.dash-plans__title { margin: 0 0 6px; font-size: 1rem; }
.dash-plans__foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.dash-plans__link { color: var(--accent-primary); text-decoration: none; font-size: 0.92rem; cursor: pointer; }
.dash-plans__link:hover { text-decoration: underline; }
.dash-plans__empty { display: inline-block; margin-top: 2px; }
/* headline tiles: Income · Spending — side by side, stacked on a phone.
v409: this strip was THREE across (Income · Spending · Kept rate). The kept-rate tile is retired
(the human's own proposal, 2026-08-26) and its percentage now sits in brackets beside the kept
figure in the Kept card below, so the strip is a pair. Two 1fr tracks rather than three with a
hole in them — a grid that still declares a column nobody fills is how a retired tile leaves a
ghost. Analysis's own strip overrides this wholesale (.ana-tiles, below). */
.dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.dash-tile { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.dash-tile__label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
/* v379 (the fit rule, big-number round). A grid item defaults to min-width:auto and PUSHES its track wide
rather than overflowing, so an 8-digit amount used to shove the whole three-across strip off the card
edge and clip mid-digit. `min-width: 0` above makes the track honour its 1fr; nowrap+hidden here makes
the value the thing that overflows, which is what HUI.fitValues measures (scrollWidth > clientWidth) and
steps the type down for. The ellipsis is the floor, not the plan: a figure that still will not fit at
the smallest step is swapped for its compact form with the exact amount in `title`. tabular-nums stops
the digits jittering as the type steps. */
/* ── v417 ④ — A MONEY AMOUNT INSIDE A SENTENCE ────────────────────────────────────────────────────
Every money ELEMENT below already carries `white-space: nowrap`, which is why a tile has never
split "-A$6,001.31" across a line. A figure filled into a translated SENTENCE has no element of
its own — `t(key, {amount})` is one text node — and U+002D HYPHEN-MINUS is a line-break
opportunity, so the human's screenshot showed a bare "-" hanging at the end of a line with the
money starting the next. `HUI.tProse` (app.js) gives each money slot this span. It is a plain
utility on purpose: any future sentence with a figure in it uses the same one. */
.amt-nb { white-space: nowrap; }
.dash-tile__value { font-weight: 500; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* v386 — ONE SIZE, TWO PEERS. The Kept card's headline figure and the Income/Spending tile figures are
the same rank of thing, so they share this declaration (and its phone step-down below) rather than
carrying two numbers that drifted apart in v385. Turn it here and both move. */
.dash-tile__value, .dash-surplus__fig { font-size: 26px; }
.dash-tile__value--muted { color: var(--text-tertiary); }
/* v382 - THE ONE REVEAL. Any element carrying data-exact holds a compacted or capped figure and will
say the real one on hover (title) or tap (the anchored note, app.js). The affordance has to be
DISCOVERABLE on a phone, where there is no hover to find it with, and must not shout on a card that
may hold several of them: a hairline dotted underline in the existing border token, offset clear of
the digits. No new colour, no new component. */
[data-exact] { cursor: help; text-decoration: underline dotted 1px var(--border-default); text-underline-offset: 3px; }
[data-exact]:hover { text-decoration-color: var(--text-tertiary); }
.dash-tile__sub { margin-top: 4px; }
/* ── v409 — THE KEPT FIGURE AND ITS RATE, SIDE BY SIDE (HUI.keptPct) ────────────────────────────
The rate used to own a whole tile. It is now a bracketed secondary beside the figure it is a rate
OF, on all three surfaces that show a kept figure (Analysis's Kept tile, the WHAT=Kept subject
tile, Home's Kept card headline).
`min-width: 0` on the figure is the load-bearing declaration: it lets the amount shrink to its own
ellipsis so the rate is never the thing that gets clipped, and it is what keeps HUI.fitValues
measuring a real, constrained box (the figure is the [data-fit] element; the rate is its sibling,
because fitOne rewrites textContent and would delete a child span). `baseline` so the small
percentage sits on the amount's baseline rather than floating mid-digit. */
/* ⚠ NO `flex-wrap` HERE, and that is a decision this round made and then UNMADE — worth the two lines.
v410 first added `flex-wrap: wrap` so a big bracket beside a seven-figure amount could drop to its own
line rather than crush the figure. It reads fine, and it is WRONG: the ratified behaviour is that the
rate takes its space first and the FIT LADDER steps the amount down around it (see HUI.keptPct), which
keeps the two on one line at every width. Wrapping quietly replaced that ladder with a line break, and
kept-clarity's "…sitting BESIDE the kept figure, on its line" claim caught it on the Analysis tile —
which is exactly the assertion's job. If a future round wants the bracket on its own line, that is a
design change to ask for, not a CSS convenience. */
.dash-keptfig { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.dash-keptfig > .dash-tile__value, .dash-keptfig > .dash-surplus__fig { min-width: 0; flex: 0 1 auto; }
/* ── v411 — ROUND BRACKETS · GREY GLYPHS · A NUMBER ONE STEP SMALLER ───────────────────────────
HISTORY, because this has now reversed four times and the next reader needs the whole arc: v409
made the bracket a quiet 14px secondary; v410 gave it the figure's own size AND colour (*"let the
% match font size and colour of kept"*); v411 is the human reading THAT on their own phone and
splitting the two halves of it apart —
· SIZE: the percentage is *"one step smaller"* than the amount, a FIXED ~30% ratio. It no longer
size-matches, and that is the point: a same-size bracket is what squeezed the amount down the
fit ladder into the compact form they photographed ("A$1.8k" for A$1,763.19). The number
declared here is the ratio against the figure size on the line above (26 × 0.7 = 18.2); JS
re-applies the SAME ratio against whatever the figure actually settles at (HUI fitBrackets),
so a screen with no fitting to do never gets an inline style at all.
· COLOUR: only the NUMBER wears the figure's teal/red. The BRACKET GLYPHS are chrome, and they
are `--text-secondary` — deliberately not tertiary: at 18px beside a bold coloured figure,
tertiary parentheses read as a rendering artefact rather than as punctuation. The stray
coloured "·" the human saw is gone with the delta that needed it.
THE COLOUR IS STILL STRUCTURAL: every rule below keys off the figure element sitting immediately
BEFORE the bracket in `.dash-keptfig`, so the number inside can never be painted differently from
the figure it is a proportion of. DM Mono for the same reason DM Mono is on the figure. Weight
capped at 500 — DM Mono ships nothing heavier and 600 would smear. */
.dash-keptpct { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
color: var(--text-secondary); min-width: 0; }
.dash-tile__value + .dash-keptpct, .dash-surplus__fig + .dash-keptpct { font-size: 18.2px; }
.dash-keptpct__v { font-weight: 500; }
.dash-keptpct__b { color: var(--text-secondary); } /* the ( and the ) — chrome, never a value */
/* the four ways a kept figure is painted, and the NUMBER inside the bracket beside them. §3: red is
ONLY the genuine below-zero case, and it is the same red the figure is already wearing. */
.dash-amt--pos + .dash-keptpct .dash-keptpct__v { color: var(--accent-teal); }
.dash-amt--neg + .dash-keptpct .dash-keptpct__v { color: var(--accent-red); }
.ana-tile--kept .dash-tile__value + .dash-keptpct .dash-keptpct__v { color: var(--accent-teal); }
.ana-tile--neg .dash-tile__value + .dash-keptpct .dash-keptpct__v { color: var(--accent-red); }
/* …and the belt-and-braces twin of the same statement, for a host that carries neither class. */
.dash-keptpct--neg .dash-keptpct__v { color: var(--accent-red); }
/* ── THE DELTA'S OWN LINE (v411) ───────────────────────────────────────────────────────────────
It used to live INSIDE the bracket, and that is what widened the whole page: a nowrap run holding
"[-128.5% · ↓119.5 pts vs Feb]" gave the Kept card a ~310px minimum content width, the card became
the widest thing on a 390px phone, and "Where it went" beneath it was dragged sideways and clipped
(the human's March screenshot). Out here it is exactly the Income/Spending tiles' delta chip —
same class, same 12px, same teal / muted / tertiary — one short line under the figure it describes.
NO `margin-top` of its own: `.dash-surplus__fig` already carries 6px below itself, which lands the
chip within a pixel of where the tiles' own chips sit under their figures. */
.dash-keptdelta { margin-top: 0; }
.dash-tile--in .dash-tile__value { color: var(--accent-teal); }
.dash-tile--out .dash-tile__value { color: var(--accent-out); }
/* month picker row */
.dash-controls { margin-bottom: var(--gap); }
/* a quiet "vs last month" delta under a tile — teal when favourable, muted otherwise (never alarming) */
.dash-delta { margin-top: 5px; font-size: 12px; color: var(--text-tertiary); }
.dash-delta--good { color: var(--accent-teal); }
.dash-delta--soft { color: var(--text-secondary); }
/* body: surplus structure | where it went — two columns on a wide screen, stacked on a phone */
.dash-cols { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.dash-card__title { font-size: 15px; margin: 0 0 12px; color: var(--text-primary); }
/* the surplus (Kept → − Set aside → Free to use) */
/* v385 — the Kept figure is the card's headline now: its label row and explainer hint retired, so the
heading above it does the naming and the figure takes the weight the total row used to carry. Weight
stays at 500 — DM Mono ships nothing heavier and a 600 here would faux-bold into a smear.
v386 — THE 30px IS VETOED. The human, on their own phone, over the shipped v385: "I don't know why the
kept number is much larger font… get the font back in line. It's unnecessarily large." The figure is a
PEER of the Income/Spending tile figures, not a bigger sibling, so it takes their size EXACTLY — the
declaration below and the phone step-down are both written so the two can only ever move together.
What v385 actually earned survives untouched: the retired label row, the retired hint, the weight.
THE SIZE ITSELF IS NOT DECLARED HERE — it rides the shared `.dash-tile__value, .dash-surplus__fig`
rule beside the tile it must match (and its phone step-down), so there is ONE number to turn. */
.dash-surplus .copy-head { margin: 0 0 6px; }
/* v411 — `overflow: hidden` + the ellipsis, exactly as its declared peer `.dash-tile__value` has had
since v379. Without it a figure that has yielded its width (min-width:0, inside `.dash-keptfig`)
simply paints over the card's edge — visible on the human's March screenshot as a red figure
escaping its own card. The ellipsis is the floor and nothing should ever reach it: fitPeers sizes
this figure with its tile siblings and fitBrackets yields the bracket first. */
.dash-surplus__fig { font-weight: 500; line-height: 1.15; white-space: nowrap; margin: 0 0 6px;
overflow: hidden; text-overflow: ellipsis; }
/* ── v398 — THE WEIGHTED ROWS (mock ②, approved 2026-08-24) ────────────────────────────────────────
`.dash-surplus__row` is re-tenanted: it named the v385 label/amount rows, which v386 retired, and
these rules sat rendering nothing for two rounds. Their replacements are the mock's rows —
dot · label · mono amount — and the OLD `__label` / `__hint` / `__amt` / `__row--total` / `__rule`
declarations go with the markup they styled. (`__amt` is still referenced by three poc readers
capturing PRE-v386 state; those are re-pointed in this round, per the v387 "a moved figure's
snapshot reader follows it in the same round" rule.)
`min-width: 0` on the label is what lets a long fund name wrap instead of pushing the amount off
the row (the standing phone rule); the amount is `nowrap` because a split figure is unreadable. */
.dash-surplus__rows { margin: 10px 0 0; border-top: 1px solid var(--border-subtle); padding-top: 2px; }
.dash-surplus__row { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; font-size: 15px; }
/* THE DOT ALIGNS TO THE FIRST LINE, NOT TO THE BLOCK. Found by EYE on this round's own 390px
screenshot: "Still set aside — Holiday Fund" wraps on a phone, and `align-self: center` then parked
the dot half-way down a two-line label, pointing at nothing. `flex-start` + half a line of offset
puts it beside the first word, where a bullet belongs, at every width. */
.dash-surplus__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; align-self: flex-start; margin-top: 6px; }
.dash-surplus__dot--gold { background: var(--accent-gold); }
.dash-surplus__dot--teal { background: var(--accent-teal); }
.dash-surplus__rowlbl { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); overflow-wrap: break-word; }
.dash-surplus__rowfund { color: var(--text-primary); font-weight: 600; }
/* ── v410 ② — THE HIERARCHY SWAP ON THE NEGATIVE-KEPT STORY (human-directed 2026-08-27) ───────────
Their words, asked whether the v400 why-line shade was right: *"just switch the colour with the
words 'Still set aside' so those particular words in the tile get a lower heirarchy and then the
whole line get a bump up otherwise all is good."*
TWO declarations, and they are a SWAP — the ink each element wears trades places, and nothing else
about either changes. No size moves, no figure moves, no element is renamed, and `.dash-overall__why`
is deliberately untouched ("otherwise all is good" — the v400 shade stands).
SCOPE. `--still` is set by HUI.keptStory only on the NEGATIVE case's gold row, so the ordinary
month's "Set aside" label is not touched; the fund NAME inside the label keeps `--text-primary`
via its own rule below-in-specificity-but-on-the-child, because a fund's name is user content and
never recedes. Both screens move together because both render the one builder. */
.dash-surplus__row--still .dash-surplus__rowlbl { color: var(--text-tertiary); }
.dash-surplus__rowamt { font-size: 15.5px; font-weight: 500; white-space: nowrap; flex: 0 0 auto; }
.dash-surplus__rowamt--gold { color: var(--accent-gold); }
.dash-surplus__rowamt--teal { color: var(--accent-teal); }
.dash-surplus__rowamt--neg { color: var(--accent-red); } /* §3: a genuine below-zero value, and only that */
/* the proportion bar. A visible TRACK is not needed here because BOTH halves are filled — the bar is a
split, not a fill against a target (the `.intent-track__bar` rule is about the other shape). Square
corners, per the human's standing call on every bar in the app. */
.dash-surplus__split { display: flex; height: 8px; overflow: hidden; margin: 10px 0 0; border: 1px solid var(--border-subtle); }
.dash-surplus__split-a { background: var(--accent-gold); }
.dash-surplus__split-b { background: var(--accent-teal); }
/* ── v387 — the named-funds strip, restored under the one-line summary (the v386 rider's veto) ──────
A wrapping flex row rather than a joined string, so a fund LABEL (user content) never sits inside the
same text node as app chrome (the v383 rule) — a fund genuinely called "Car · Bike" stays legible as
ONE fund. Each name+amount pair is `nowrap`, so a fund and its own figure can never be split across
two lines; the STRIP wraps between funds instead.
THE SEPARATOR IS WHITESPACE, and that was a correction made by EYE on this round's own 390px
screenshot: the first cut put a real "·" element between funds, and the moment the strip wrapped —
which at phone width is every time there is more than one fund — the dot was left DANGLING at the end
of a line with nothing after it. A gap cannot dangle. It is also the one separator that needs no
`aria-hidden` and can never be confused with a character in a fund's name. */
.dash-surplus__named { margin: 2px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 18px; }
.dash-surplus__fund { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.dash-surplus__fundname { overflow-wrap: break-word; }
/* v417 ④ — the one money ELEMENT in the app that had missed the app-wide nowrap rule its siblings
(.dash-tile__value, .dash-surplus__rowamt, .dash-overall__amt, .dash-keptpct) all carry. */
.dash-surplus__fundamt { font-weight: 500; white-space: nowrap; }
.dash-surplus__none { margin: 4px 0 0; }
/* ── v398 — THE OVERALL BLOCK (the wealth change) ──────────────────────────────────────────────────
Sits at the FOOT of the Kept card behind its own rule, because it answers a different question from
everything above it: those rows split what this period's income kept, this one says what ALL your
money did. It renders only when the two differ (i.e. only when spending was paid from a fund), so
the rule and the block appear together or not at all — no dead chrome.
RED is on the FIGURE only, never the sentence: a red paragraph would read as an alarm, and the grey
why line is the part doing the reassuring (same reasoning as v389's paintNeg scoping). */
.dash-overall { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.dash-overall__head { display: flex; align-items: baseline; gap: 9px; font-size: 15px; }
.dash-overall__lbl { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); overflow-wrap: break-word; }
.dash-overall__amt { font-size: 17px; font-weight: 500; white-space: nowrap; flex: 0 0 auto; }
.dash-overall__amt--pos { color: var(--accent-teal); }
.dash-overall__amt--neg { color: var(--accent-red); }
/* ── v400 — THE WHY LINE IS READ, SO IT IS LEGIBLE ────────────────────────────────────────────────
The human, over their own screenshot: "Good and important information … I'd rather have it
effectively displayed and easily readable." It shipped in the `.tertiary` register, which measures
3.54:1 against the card (--text-tertiary #6a6a88 on --bg-surface #13131e) — under the 4.5:1 floor
for body text, and it is a full sentence people are meant to actually read, not a footnote to skim.
Moving it to --text-secondary measures 7.27:1 on the same surface. It stays 13px and stays grey:
the SIZE and the words are unchanged, only the shade, and only on this class — the rest of the
app's tertiary text is untouched, because most of it genuinely is a footnote. Hierarchy survives on
type size: the Overall head above it is 15px, this is 13px. */
.dash-overall__why { margin: 6px 0 0; line-height: 1.5; color: var(--text-secondary); }
/* §8: release event line + pre-funded notes — gold-tinted calm lines (money returned / previously set aside) */
.dash-surplus__released { margin: 6px 0 0; color: var(--accent-teal); } /* released = savings in hand (human-directed 2026-07-15; was gold) */
/* fund-story note colours (human-directed 2026-07-15, supersedes all-gold): RELEASED notes wear teal (the
money is savings in hand again).
v400 — the PAID-FROM-FUND half of this rule is GONE with the elements it painted. `.dash-funded` and
`.ana-fundnote` were the two lavender lines beside the Spending figure; the human asked for that story
to live INSIDE the tile, so it is `.dash-tile__srow` below and it wears the same two meanings — gold
for the fund's share, --accent-out for the rest. Do not resurrect a paid-from-fund NOTE LINE elsewhere;
amounts/badges (ledger fund badge, Sankey gold bands) keep gold, as they always have. */
.ana-relnote { color: var(--accent-teal); opacity: 0.9; }
/* ── v400 — THE SPENDING TILE'S BIFURCATION ────────────────────────────────────────────────────────
A gold/lavender split bar and two compact rows INSIDE the Spending tile, on Home and on Analysis.
THE BAR IS THE SAME MECHANISM the Kept card's split uses (HUI.splitBar) — same geometry, same square
corners, same 1px outline — and only its second half is re-painted here, from teal (free to use) to
--accent-out (spending). One bar, two meanings, no second implementation.
THE ROWS ARE NOT the Kept card's weighted rows at a smaller size. Those are a card-level statement;
these are a caption for the figure directly above them, inside a tile that is one-third of a desktop
strip and full width on a phone. So: smaller type, tighter padding, no top rule of their own (the bar
is the separator), and the label allowed to wrap while the amount never does. */
.dash-tile__split { margin: 10px 0 0; height: 6px; }
.dash-tile__split .dash-surplus__split-b { background: var(--accent-out); }
.dash-tile__srows { margin: 7px 0 0; }
.dash-tile__srow { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; font-size: 12.5px; }
/* the dot aligns to the FIRST LINE of its label, not to the block — the v398 fix, same reasoning:
a long fund name wraps at 390px and a centred dot then points at nothing. */
.dash-tile__sdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; align-self: flex-start; margin-top: 4px; }
.dash-tile__sdot--gold { background: var(--accent-gold); }
.dash-tile__sdot--out { background: var(--accent-out); }
.dash-tile__slbl { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); overflow-wrap: break-word; }
.dash-tile__sfund { color: var(--text-primary); font-weight: 600; }
/* weight 500 is DM Mono's heaviest real face — 600 here would faux-bold into a smear (the standing cap) */
.dash-tile__samt { font-size: 12.5px; font-weight: 500; white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.dash-tile__samt--gold { color: var(--accent-gold); }
.dash-tile__samt--out { color: var(--accent-out); }
/* ── v401 — THE KEPT STORY, INSIDE THE KEPT TILE (kept-attach mock, Option A, 2026-08-25) ──────────
HISTORY, because this is the third placement in three rounds and the next reader needs to know why
it stopped here. v398 built the weighted card on Home; v399 gave Analysis the SAME builder but in
its own full-width card (`.ana-keptblock`) under the tile strip; v400 put the Spending split
INSIDE the Spending tile and the human, looking at the two side by side, chose the same treatment
for Kept. So `.ana-keptblock` is gone with its card, and the compact register lives here.
ONE HOOK, `dash-tile--keptstory`, added to the HOST by HUI.keptStory when the caller asks for the
tile register — no piece is renamed, so every print transcription, test selector and screen reader
path keeps working, and the two screens still render one builder's output.
THE NUMBERS ARE THE MOCK'S: 12.5px rows over a 6px bar, the Overall head at 12.5px with its figure
at 13px, and the why line at 11.5px. Hierarchy still survives on type size (26px figure → 12.5px
rows → 11.5px prose) inside a tile that is one of four across on a desktop. */
.dash-tile--keptstory .dash-surplus__split { margin: 10px 0 0; height: 6px; }
.dash-tile--keptstory .dash-surplus__rows { margin: 7px 0 0; border-top: 0; padding-top: 0; }
.dash-tile--keptstory .dash-surplus__row { gap: 7px; padding: 2px 0; font-size: 12.5px; }
.dash-tile--keptstory .dash-surplus__dot { width: 7px; height: 7px; margin-top: 4px; }
.dash-tile--keptstory .dash-surplus__rowamt { font-size: 12.5px; }
/* ── v401 — THE BREATHING ROOM (the human's own two taps on the mock: "need a small line space
above" — once on "Free to use", once on "From this period's income") ───────────────────────────
The space goes above the SECOND row of an in-tile split, so the gold row and whatever explains it
read as one group and the row that follows is visibly a different statement. It is deliberately
scoped to the TILE register: Home's Kept CARD is a different surface with its own rhythm, and the
human was looking at tiles when they asked. */
.dash-tile--keptstory .dash-surplus__row--free { margin-top: 5px; }
.dash-tile__srow--income { margin-top: 5px; }
/* the per-fund strip, in both tiles: indented under the row it belongs to, and its figures GOLD —
the fund's share of the money, the same meaning the row above it wears (§3). On Home's Kept CARD
the strip keeps the tertiary grey it has had since v387; this is the in-tile register only. */
.dash-tile--keptstory .dash-surplus__named,
.dash-tile__named { margin: 5px 0 0 14px; gap: 3px 14px; font-size: 11.5px; }
.dash-tile--keptstory .dash-surplus__fundamt,
.dash-tile__named .dash-surplus__fundamt { color: var(--accent-gold); }
.dash-tile--keptstory .dash-overall { margin-top: 9px; padding-top: 8px; }
.dash-tile--keptstory .dash-overall__head { margin: 0; font-size: 12.5px; gap: 7px; }
.dash-tile--keptstory .dash-overall__amt { font-size: 13px; }
.dash-tile--keptstory .dash-overall__why { font-size: 11.5px; margin: 5px 0 0; line-height: 1.45; }
.dash-tile--keptstory .dash-surplus__line { font-size: 11.5px; line-height: 1.45; }
/* The sentences wear `dash-note` so the PRINTED page still gathers them (NOTE_SEL), but
`.dash-note`'s 2px side inset is for free-standing notes in the results region — inside a tile it
would push each sentence off the left edge its own rows are aligned to. Cancel the inset. */
.dash-tile--keptstory .dash-note { margin-left: 0; margin-right: 0; }
/* ── v417 ④ — AND THE IN-TILE RELEASE LINE WEARS THE RELEASE COLOUR ───────────────────────────────
FOUND BY EYE on this round's own 390px screenshot, not by an assertion. The sentence that used to
live in this slot (`analysis.keptSplitReleased`) was tertiary GREY, and when it was replaced by the
release register the grey came with it — leaving the one release line in the app that is not teal,
beside Home's `.dash-surplus__released` and Analysis's own `.ana-relnote`, which both are.
§3's 2026-07-16 amendment is explicit: a "released … back in hand" note is TEAL, because the money
is savings in hand again. A register is its colour as well as its words. Same declaration as
`.ana-relnote` so the two cannot drift. */
.ana-keptreleased { color: var(--accent-teal); opacity: 0.9; }
.dash-tile--keptstory .ana-keptreleased { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; }
/* v410 ② — the OTHER half of the swap: the sentence that explains a negative-kept month is the thing
being read, so it takes the secondary ink the row label just gave up. It arrives wearing
`.tertiary` (which also carries its 13px, and that stays), so this rule sits AFTER `.tertiary` in
source order and wins the colour at equal specificity — the size is untouched on purpose. Same
reasoning as v400's `.dash-overall__why` bump, and the same measurement: --text-secondary is
7.27:1 on --bg-surface where --text-tertiary is 3.54:1, and this is a full sentence, not a footnote. */
.dash-surplus__line--neg { color: var(--text-secondary); }
.dash-amt--pos { color: var(--accent-teal); }
.dash-amt--neg { color: var(--accent-red); } /* below the zero line — red is the only zero/below colour (§3) */
.dash-amt--gold { color: var(--accent-gold); } /* set aside / reserved (§3 gold) */
/* where it went — a CALM ranked list (no heavy bars): name · % · amount. List ⇄ Groups toggle. */
.dash-cats__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dash-cats__head .dash-card__title { margin: 0; }
.dash-seg { display: inline-flex; border: 1px solid var(--border-default); border-radius: 999px; padding: 2px; gap: 2px; }
.dash-seg__btn { appearance: none; background: none; border: none; font-family: inherit; font-size: 12px; cursor: pointer;
color: var(--text-secondary); padding: 4px 11px; border-radius: 999px; }
.dash-seg__btn.is-on { background: var(--accent-primary); color: var(--on-accent-primary); }
/* §4 fix #6: an honestly-disabled tab (e.g. the Table panel's Over-time at 1 month / on a #tag subject) must NOT
read as a live, clickable control — dimmed + not-allowed cursor; its `title` (set in JS) carries the reason. */
.dash-seg__btn:disabled { color: var(--text-tertiary); opacity: 0.5; cursor: not-allowed; }
.dash-seg__btn:disabled:hover { background: none; }
.dash-cat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.dash-cat:last-child { border-bottom: none; }
.dash-cat--sub { padding-left: 18px; }
.dash-cat--sub .dash-cat__name { color: var(--text-secondary); }
.dash-cat--toggle { cursor: pointer; }
.dash-cat--toggle:hover .dash-cat__name { color: var(--text-primary); }
.dash-cat__l { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
/* v450 ④ — the reserved emoji slot. It is on EVERY row (empty on a header, on "Other (N)" and on a
category with no emoji) so the NAMES share one left edge; a variable-width glyph would otherwise
stagger the column the row exists to make readable. Fixed width, centred, never shrinks. */
.dash-cat__emoji { flex: 0 0 18px; width: 18px; text-align: center; font-size: 14px; line-height: 1; }
.dash-cat__name { color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v450 ① — the chevron follows the name (it used to lead the row and knocked "Other (N)" out of
line with the categories above it). `flex: none` so it is never the thing that gives. */
.dash-cat__chev { color: var(--text-tertiary); font-size: 12px; transition: transform .15s; display: inline-block; flex: none; }
.dash-cat__chev.is-open { transform: rotate(180deg); }
.dash-cat__r { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.dash-cat__pct { font-size: 12px; min-width: 30px; text-align: right; flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* v379: the right group was `flex: none`, so a very large amount could never yield — it took the space
from the category NAME instead (the human's screenshot: a 7-digit amount beside a 5-digit percentage,
with the label crushed). `1 1 auto` + min-width:0 lets it shrink to its own ellipsis, and the pct is
capped in JS (catRow, PCT_CAP) so it can no longer be five digits at all. */
.dash-cat__amt { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
.dash-cols { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 520px) {
.dash-tiles { grid-template-columns: 1fr; }
.dash-tile__value, .dash-surplus__fig { font-size: 23px; } /* v386 — the pair steps down together */
/* v411 — …and the bracket beside them, at the SAME ratio (23 × 0.7 = 16.1). One media query, one
pair of numbers, all three surfaces: a rate that kept its desktop size on a 23px figure would be
the exact drift the shared declaration exists to prevent. */
.dash-tile__value + .dash-keptpct, .dash-surplus__fig + .dash-keptpct { font-size: 16.1px; }
}
/* ── Simple analysis — the four-tier Sankey (Phase 9a2, §15) ──────────────────────────────────── */
.ana-tiles { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } /* 3 or 4 (with the internal-transfers tile) across since v409 retired the rate tile; wraps on narrow */
/* ── v409 — A KEPT TILE THAT CARRIES THE STORY TAKES THE WHOLE ROW ─────────────────────────────
The human, on their own phone: *"if it's holding much information, use a full line rather than 1/2
a column."* Their screenshot showed a hard month's Kept tile at roughly three times its
neighbours' height — red figure, gold "Still set aside" row, the whole negOver paragraph — beside
a kept-rate tile holding one number and a void.
TWO declarations, both needed. The span is obvious. The TEMPLATE swap is not: `.ana-tiles` is
`auto-fit`, and auto-fit collapses only the tracks that are entirely EMPTY — the moment one item
spans `1 / -1` every track is occupied, nothing collapses, and a desktop strip would hand Income
and Spending a sixth of the width each. A bounded two-across keeps the row above whole, and it is
also exactly the phone shape the ask came from.
── v411 — …AND IT IS NO LONGER CONDITIONAL ON THE STORY. Their Analysis screenshots are the whole
argument: a half-width Kept tile sat ALONE on its row with an empty half beside it, and inside that
136px it could not hold "A$1,763.19 (37.3%)" at its siblings' size — so the fit ladder squeezed the
amount into "A$1.8k", which is the compact violation they photographed. A Kept tile now ALWAYS
carries more than a bare figure (the figure AND its rate, and often the story), which is exactly the
condition the human's own v409 rule names. Giving it the row is the geometry that simply fits, at
every width, with no media query guessing where the boundary is. `--keptstory` keeps its span so
nothing that reads that class has to change; `--keptfig` is the always-on marker. */
/* ── v417 ③ — THE v411 D1 VETO, EXERCISED (human-directed 2026-08-31) ──────────────────────────────
v411 flagged "the Kept tile now takes the FULL row ALWAYS" as veto-able, and named the reversal:
*"one media query reverses"*. The human exercised it. On a LAPTOP an ordinary month's Kept tile —
a figure and its bracket, nothing else — sat alone across a 1100px row with two empty thirds
beside it, which is the mirror image of the v409 complaint that started all this.
SO THE ROW IS DECIDED BY TWO THINGS, and each is one of the two rulings this pendulum has
produced, neither overruled:
· v409 STANDS — a Kept tile CARRYING THE STORY takes the whole row, at any width. The gate is
the story's own mark (`dash-tile--keptstory`, stamped by HUI.keptStory only when it actually
rendered something), so it cannot drift out of step with what is in the tile.
· v411's ARITHMETIC STANDS on the phone — a ~136px half-tile cannot hold "A$1,763.19 (37.3%)"
at its siblings' size, and the ladder falling to "A$1.8k" is the compact violation they
photographed. So below the 700px breakpoint `--keptfig` keeps the full row unconditionally.
Above it, an ordinary month's tile is an ordinary member of `.ana-tiles`'s auto-fit row again, and
takes back the slot the retired kept-rate tile left.
THE TEMPLATE SWAP RIDES THE SAME CONDITION, and it must: `.ana-tiles` is `auto-fit`, which
collapses only tracks that are entirely EMPTY — the moment one item spans `1 / -1` nothing
collapses and a desktop strip would hand Income and Spending a sixth of the width each. So the
bounded two-across applies exactly where something spans, and nowhere else. */
.ana-tiles--keptwide:has(.dash-tile--keptstory) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ana-tiles .dash-tile--keptstory { grid-column: 1 / -1; }
@media (max-width: 700px) {
.ana-tiles--keptwide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ana-tiles .ana-tile--keptfig { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .ana-tiles--keptwide { grid-template-columns: minmax(0, 1fr); } }
/* internal transfers — listed CATEGORY BY CATEGORY (each its own total), never summed across categories */
.ana-tile--xfer .dash-tile__label { margin-bottom: 7px; }
.ana-xfer-list { display: flex; flex-direction: column; gap: 4px; }
.ana-xfer-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.ana-xfer-row__name { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-xfer-row__amt { font-size: 15px; color: var(--text-secondary); flex: none; } /* neutral — muted, not income/spend coloured */
.ana-tile--kept .dash-tile__value { color: var(--accent-teal); } /* v409: `.ana-tile--rate` left this selector with the tile it dressed */
.ana-tile--neg .dash-tile__value { color: var(--accent-red); }
.ana-card { overflow-x: auto; position: relative; } /* the chart is wide — scroll it on a phone, never the page; relative = the expand button's containing block (S8) */
/* ── v409 — THE HEADER ROW STOPS SCROLLING WITH THE CHART ───────────────────────────────────────
The rule above gave `.ana-card` two jobs at once, and they are incompatible on a phone: it is the
`position: relative` containing block for the ⛶ button (the S8 note) AND the horizontal scroller
for a chart wider than the screen. An absolutely-positioned child of a scroll container travels
with the content, and a block heading inside one is laid out at the container's width — so the
human's screenshot showed a card titled "– Aug 26" (the "Mar" had scrolled away) with the ⛶
button pinned to a diagram halfway off-screen.
A card that has been through `wireChartExpands` therefore hands the SCROLLING job to an inner
wrapper and keeps only the positioning job. `overflow-x: visible` is the whole reset: without it
the card is still a scroll container and nothing changes. Text-only cards (the era table, the
"Where it went" list) never get the wrapper and keep the original rule untouched — checked, they
genuinely rely on it. */
.ana-card--hdrfixed { overflow-x: visible; }
.ana-card__scroll { overflow-x: auto; overflow-y: hidden; min-width: 0;
/* themed thin bar, like every other scroller here (`.combo__list`, `.ana-expand__stage`) — the
browser default light-grey bar reads as a foreign object on a #08080d chart card. */
scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.ana-card__scroll::-webkit-scrollbar { height: 10px; }
.ana-card__scroll::-webkit-scrollbar-track { background: transparent; }
.ana-card__scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px;
border: 2px solid transparent; background-clip: content-box; }
/* Slice 2 — chart cards go DEEP BLACK (#08080d, human-approved) so the raised/gradient bars pop. Scoped with :has
to cards that actually CONTAIN a chart svg — text cards (the "Where it went" list, table, era table) keep the surface bg. */
/* review round 1 · item 1: .ana-edonut was missing from this list — the Everything donut card kept the plain
surface background while its sibling (the scoped .ana-donut) went deep black. Same family, same tile. */
.ana-card:has(.ana-chart, .ana-donut, .ana-edonut, .ana-sankey) { background: #08080d; }
/* ── v383 · THE CHART HEADING: `WHO / WHAT / WHEN`, with the separator in the CHROME register ────────
A category label is USER CONTENT and may contain a slash of its own ("Rent / Mortgage"). If the app's
own separators looked identical to that one, the heading would be unreadable — so the three parts wear
the title's own ink and the separators are quiet tertiary. `white-space: pre` keeps the separator's
spaces inside the span, which is what lets `textContent` stay the plain composed string that the ⛶
bar and the printed section heading both read. */
/* the ⛶ button floats at the card's top-right (34px + 8px inset); the heading is longer now that it
carries all three facts, so it keeps clear of it rather than running underneath. Only cards that get
the heading treatment get `.ana-head`, and those are exactly the cards that get the ⛶ button. */
.ana-head { display: block; padding-right: 44px; }
.ana-head__p { color: inherit; }
.ana-head__sep { color: var(--text-tertiary); font-weight: 400; white-space: pre; }
/* v383 item 2 — ON A PHONE THE CHART CLAIMS THE CARD. At 390px the card's 20px side padding plus the
chart's own two label rails left the plot at ~215px of a 390px screen, and the human's screenshot
showed the first column's tilted label sliced against the edge while the card wasted a rail. A chart
card halves its side padding below the phone breakpoint: everything in it (title, legend, notes) is
still further inset than the surrounding page chrome, and the chart gains ~20px of real plot. */
@media (max-width: 640px) {
.ana-card { padding-left: 10px; padding-right: 10px; }
}
/* Slice 2 — raised bars: soft lift + brighten on hover (the drop-shadow lives on the SVG bars group filter). */
.ana-bar { transition: transform .12s ease, filter .12s ease; }
.ana-bar--hi { transform: translateY(-3px); filter: brightness(1.18); }
.ana-arc { transition: filter .12s ease, stroke-width .12s ease; }
.ana-arc--hi { filter: brightness(1.15); }
.ana-dlrow { border-radius: 7px; transition: background .12s ease; padding: 2px 4px; }
.ana-dlrow--hi { background: var(--bg-hover); }
/* review round 1 · item 3b: the kept slice's own parts, listed under the two headline legend rows while it
is split open — indented and quieter so the two totals still read as the headline. */
.ana-dlrow--sub { padding-left: 16px; }
.ana-dlrow--sub .ana-dl__lbl { font-size: 12px; color: var(--text-secondary); }
.ana-dlrow--sub .ana-dl__amt { font-size: 12px; color: var(--text-secondary); }
.ana-sankey__wrap { position: relative; min-width: 720px; }
.ana-sankey { display: block; width: 100%; height: auto; }
.ana-sankey__labels { position: absolute; inset: 0; pointer-events: none; }
.ana-lbl { position: absolute; transform: translateY(-50%); display: flex; flex-direction: column; line-height: 1.15;
max-width: 40%; width: max-content;
/* soft dark HALO (not a boxy pill — human-directed Round-6) so a label over a ribbon never dissolves into it */
text-shadow: 0 1px 3px rgba(10, 10, 18, 0.9), 0 -1px 3px rgba(10, 10, 18, 0.9), 1px 0 3px rgba(10, 10, 18, 0.9), -1px 0 3px rgba(10, 10, 18, 0.9); }
.ana-lbl__name { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-lbl__amt { font-size: 12px; color: var(--text-primary); }
.ana-lbl--hdr, .ana-lbl--cat, .ana-lbl--goal { flex-direction: row; align-items: baseline; gap: 6px; }
.ana-lbl__row { display: flex; align-items: baseline; gap: 6px; } /* name+amt line of a two-line label */
.ana-lbl__sub { font-size: 10.5px; color: var(--accent-gold); opacity: .85; white-space: nowrap; } /* "now holds …" */
.ana-lbl--hassub { flex-direction: column; }
.ana-lbl--gold .ana-lbl__name { color: var(--accent-gold); } /* Into {fund} / paid-from-funds */
.ana-lbl--teal .ana-lbl__name { color: var(--accent-teal); } /* Free to use */
/* the two mid TOTALS (Went out · Kept) sit LEFT of the middle bar, mirroring Income (Round-6 label layout) */
.ana-lbl--mid { flex-direction: row; align-items: baseline; gap: 6px; justify-content: flex-end; text-align: right; transform: translate(-100%, -50%); }
.ana-lbl--mid .ana-lbl__name { color: var(--text-primary); font-weight: 600; }
/* the Kept LEGEND CARD (crowded stack → one card instead of leader spaghetti) */
.ana-lgd { position: absolute; width: 250px; max-width: 46%; background: var(--bg-elevated); border: 1px solid var(--border-default);
border-radius: 10px; padding: 8px 12px 10px; pointer-events: auto; }
.ana-lgd__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-default); }
.ana-lgd__hname { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.ana-lgd__hamt { font-size: 12.5px; color: var(--text-primary); }
.ana-lgd__row { display: flex; align-items: baseline; gap: 8px; padding: 2.5px 0; }
.ana-lgd__sw { width: 9px; height: 9px; border-radius: 2.5px; flex: 0 0 auto; align-self: center; }
.ana-lgd__name { font-size: 12px; color: var(--text-secondary); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-lgd__name--teal { color: var(--accent-teal); }
.ana-lgd__amt { font-size: 12px; color: var(--text-primary); }
.ana-lgd__sub { font-size: 10.5px; color: var(--accent-gold); opacity: .85; padding-left: 17px; margin-top: -2px; }
.ana-lbl--hdr { pointer-events: auto; cursor: pointer; }
.ana-lbl--hdr:hover .ana-lbl__name { color: var(--text-primary); }
.ana-lbl--hdr .ana-lbl__amt, .ana-lbl--cat .ana-lbl__amt, .ana-lbl--goal .ana-lbl__amt { color: var(--text-secondary); }
/* review round 1 · item 7: a NOTE is a sentence ("incl. A$400.00 set aside from other funds"), and a
single-line ellipsis reduced it to three dots on a phone — unreadable, so the information was simply gone.
It wraps to at most TWO lines instead (the width comes from lbl()'s two-column allowance); the clamp keeps
a long one from growing without bound into the bands below it. */
.ana-lbl--note .ana-lbl__name { color: var(--text-tertiary); font-size: 11px; font-style: italic;
white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* review round 2 · item 2: the "incl. {amount} returned" line under a merchant fan is MONEY RETURNED, which the
ratified §3 rule colours GOLD. It needs its own (0,3,0) rule — .ana-lbl--note wins over .ana-lbl--gold on
source order alone, so a plain --gold class would silently read tertiary grey here. */
.ana-lbl--note.ana-lbl--gold .ana-lbl__name { color: var(--accent-gold); }
.ana-lbl__chev { color: var(--text-tertiary); font-size: 11px; transition: transform .15s; }
.ana-lbl__chev.is-open { transform: rotate(180deg); }
.ana-lbl--warn .ana-lbl__name, .ana-lbl--warn .ana-lbl__amt { color: var(--accent-warm); }
.ana-hnode { cursor: pointer; }
.ana-hnode.is-open { stroke: var(--accent-out); stroke-width: 1.5; }
.ana-mnode { cursor: pointer; }
.ana-mnode:hover { stroke: var(--accent-teal); stroke-width: 1.5; }
.ana-cnode { cursor: pointer; } /* a category with merchants — tap to drill in */
.ana-cnode.is-open { stroke: var(--accent-out); stroke-width: 1.25; }
.ana-lbl[role="button"] { cursor: pointer; }
.ana-leader { stroke: var(--text-tertiary); stroke-width: 1; opacity: .4; } /* connects a pushed-off label to its node */
/* income-stream labels sit to the LEFT of the income bar (Method A), right-aligned toward it */
.ana-lbl--inc { flex-direction: row; align-items: baseline; gap: 6px; justify-content: flex-end; text-align: right; transform: translate(-100%, -50%); }
.ana-lbl--inc .ana-lbl__amt { color: var(--text-secondary); }
.ana-lbl--inc.ana-lbl--indent { font-size: 11px; }
.ana-lbl--inc.ana-lbl--indent .ana-lbl__name { color: var(--text-tertiary); }
.ana-lbl--inc.ana-lbl--total .ana-lbl__name { color: var(--text-primary); } /* the income TOTAL heads its streams */
/* ── Analysis: the WHO / WHAT / WHEN axis bar — three dropdown menus (9a2 redesign) ─────────── */
.ana-axisbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; margin-bottom: var(--gap); }
.ana-menu { width: auto; }
.ana-menu__trigger { width: auto; min-width: 140px; max-width: 340px; gap: 10px; padding: 9px 12px; }
.ana-menu__lbl { flex: none; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); }
.ana-menu__val { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--text-primary); }
.ana-menu__pop { min-width: 240px; max-width: 360px; padding: 6px; }
/* v383: the shared pull-up flip (anaMenu measures and adds the class only when there is no room below) */
.ana-menu--up .ana-menu__pop { top: auto; bottom: calc(100% + 4px); }
/* WHAT is the biggest list → give it most of the screen height so there's far less scrolling */
.ana-menu--what .ana-menu__pop { max-height: min(72vh, 640px); }
/* Slice 5 — the unified WHAT ▾ dropdown (Idea C): mode toggle + search + tabs + list.
§4 fix #4: the popup was clamped to its trigger's width (300–400px) while the 5 tabs (Overall · Categories ·
Merchants · Tags · Transfers) need ~390–410px on ONE line — and the strip's scrollbar was hidden (scrollbar-
width:none + a webkit display:none rule), so an overflowing tab (Transfers) was reachable by NOTHING visible.
Widened the popup and let the tab strip WRAP to a second line instead of hiding an invisible scroll affordance. */
.ana-menu--what2 .ana-menu__pop { min-width: 420px; max-width: 460px; max-height: min(74vh, 660px); padding: 8px; }
.ana-whatmode2 { width: 100%; margin-bottom: 8px; }
.ana-whatmode2 .dash-seg__btn { flex: 1 1 0; }
.ana-whatsearch { position: relative; margin-bottom: 8px; }
.ana-whatsearch__input { width: 100%; box-sizing: border-box; }
.ana-whatsearch__pop { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 6; max-height: 240px; }
.ana-whattabs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; }
.ana-whattab { flex: 0 0 auto; appearance: none; background: transparent; border: 0; font-family: inherit; font-size: 13px; color: var(--text-tertiary); cursor: pointer; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.ana-whattab:hover { background: var(--bg-hover); color: var(--text-secondary); }
.ana-whattab.is-on { background: var(--accent-glow); color: var(--accent-primary); font-weight: 600; }
.ana-whatlist { max-height: 46vh; overflow-y: auto; }
.ana-whatempty { padding: 12px 8px; font-size: 12.5px; }
.ana-whatoverall, .ana-whatmerch { padding-left: 10px; }
.lcat-cb--drill { visibility: hidden; } /* alignment spacer where a checkbox would sit (single-mode drill rows) */
.ana-breadcrumb--slim { margin-top: 4px; }
.ana-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.ana-by--none { display: none; }
.ana-by__lbl { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.ana-by__seg { flex-wrap: wrap; }
.ana-unit { display: inline-flex; align-items: center; gap: 6px; }
.ana-unit__lbl { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.ana-unit__seg { flex-wrap: wrap; }
.ana-unitcaption { margin-top: 8px; font-size: 13px; }
/* v353 (Q2): the compare TREND's measure pills — Income · Spending · Kept, one at a time. Same dash-seg
the "Show" unit control wears, so the two read as siblings; it sits at the top of the trend card
because that is the chart it changes (the ratified mock's own placement). */
.ana-measure { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ana-measure__seg { flex-wrap: wrap; }
/* these three are the control a PHONE reader taps to change what the trend is about, so they carry a real
touch target rather than the 24px a lens-strip seg gets away with beside a row of other chrome. */
.ana-measure__seg .dash-seg__btn { min-height: 30px; display: inline-flex; align-items: center; }
.ana-leaf__count { margin: 0 0 10px; font-size: 13px; }
.ana-leaf__list { display: flex; flex-direction: column; }
.ana-leaf__more { margin-top: 8px; }
/* v353: `--tap` no longer dresses a PERSON TOTAL — that affordance was dropped outright (see compSums).
Its one remaining consumer is the periods strip's "Show all (41)" button below, which is a show-more
control, not a door into a person. `.ana-backcompare` (the "← back to comparison" breadcrumb) went with
the affordance it returned from. */
.ana-compsums__item--tap { cursor: pointer; background: none; border: 1px solid transparent; border-radius: 8px; padding: 2px 6px; font: inherit; color: inherit; }
.ana-compsums__item--tap:hover { border-color: var(--border-default); background: var(--bg-input); }
/* R7 item J1: the "Show all (41)" / "Show the last 6" tap that ends the periods sums strip. It carries its
own border at rest (unlike --tap, whose trigger is the row it sits in) so it reads as tappable on a
phone, where there is no hover to discover it with. */
.ana-compsums__more { border-color: var(--border-default); color: var(--text-secondary); }
.ana-compsums__more:hover { color: var(--text-primary); }
/* transfers (neutral) view — a calm muted tile + note (transfers are neither spending nor income) */
.ana-tile--xfer .dash-tile__value { color: var(--text-secondary); }
.ana-xfernote { margin: -4px 0 10px; }
/* INCOME & NEUTRAL ENGINES (2026-08-15) — a #tag's two halves. The section captions are quiet dividers, not
headings: they name which direction the rows below are, so income and spending are never read as one list. */
.ana-bdsect { margin: 10px 0 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ana-bdsect:first-child { margin-top: 0; }
/* v354 — the four-section tag view. RETURNED is a gold caption (§3: money coming back wears gold), so the
section reads as a return before a single figure is looked at. MOVED is one muted footnote, deliberately
the quietest thing on the card: a transfer/provision joins no number here and the line says so. */
.ana-bdsect--gold { color: var(--accent-gold); }
.ana-tagmoved { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; }
.ana-tile--gold .dash-tile__value { color: var(--accent-gold); }
/* A compare bucket carrying BOTH directions shows both figures. On a phone the pair is wider than the
frame, so this variant is allowed to WRAP onto a second line rather than run off the card edge — the
unwrapped siblings keep their single line, which is why the rule is scoped to this variant. */
.ana-compsums__item--both { white-space: normal; flex-wrap: wrap; min-width: 0; }
/* v422 — a PERIOD BEFORE THE LEDGER BEGAN. The chart leaves it undrawn (gapPreHistory); the strip says the
same thing in words with the em dash the over-time table already uses for a figure it cannot compute, and
wears the tertiary ink so it reads as absent rather than as a number. A true zero INSIDE history is
untouched and keeps its full A$0.00 in the primary ink — it is a real observation. */
.ana-compsums__item--gap, .ana-compsums__item--gap .ana-compsums__amt { color: var(--text-tertiary); }
/* ── v383 · THE WHAT PICKER STOPS DETACHING ON A PHONE (human-reported defect, 2026-08-20) ───────────
THE ROOT CAUSE, measured: WHO and WHEN open as `position: absolute` popups 4px under their own trigger
and travel with the page; WHAT opened as a `position: fixed` bottom SHEET, so it sat at a constant
viewport position (measured 184px ABOVE its own trigger) and stayed put while the page scrolled behind
it — the human's *"a little bit awkward"*. It was one media-query rule, written for a real reason (the
desktop popup's 420px min-width overflowed a 390px phone), but a sheet was the wrong instrument for it:
the sibling controls solve the same width problem by going full-width and staying attached.
THE FIX is exactly that. The WHAT menu takes its own line in the (already column-stacked) axis bar, and
its popup is an ORDINARY attached dropdown, inheriting `.combo__list`'s `top: calc(100% + 4px)` like its
two siblings. `min-width: 0` still does the work the old comment describes; nothing else about the
popup's contents, tap targets or overscroll containment changes. */
@media (max-width: 640px) {
.ana-menu--what2 .ana-whatmenu-pop { left: 0; right: 0; width: auto; min-width: 0; max-width: none; max-height: 78vh; }
/* S8: the sheet scrolls internally without the page bleeding through underneath it (overscroll containment) */
.ana-menu--what2 .ana-whatlist { max-height: 50vh; overscroll-behavior: contain; }
/* S8: the floating Table (left) / Ledger (right) panel HANDLES sit at a fixed vertical-mid position and can
occlude the sheet's (now-wrapping) tab strip at some scroll positions. Hide + inert them while the sheet is
open; :has() reacts live to the popup's own `dropdown--open` class, so closing the sheet restores them with
no extra JS/state to keep in sync. */
body:has(.ana-menu--what2.dropdown--open) .ana-lpanel-handle,
body:has(.ana-menu--what2.dropdown--open) .ana-tpanel-handle { opacity: 0; pointer-events: none; }
/* S8: comfortable (~44px) tap targets inside the sheet — tabs and rows were sized for a mouse pointer */
.ana-menu--what2 .ana-whattab { padding: 13px 14px; font-size: 13.5px; }
.ana-menu--what2 .ana-cbrow, .ana-menu--what2 .lcat-crow, .ana-menu--what2 .lcat-hrow { padding-top: 13px; padding-bottom: 13px; }
}
/* an explicit "Clear all" reset row (distinct from the "Total life costs" comparison unit) */
.ana-clearall { appearance: none; background: none; border: none; font-family: inherit; cursor: pointer;
display: block; width: 100%; text-align: left; padding: 6px 10px; border-radius: 7px;
font-size: 12.5px; color: var(--text-tertiary); }
.ana-clearall:hover { background: var(--bg-hover); color: var(--accent-warm); }
/* flat checkbox row (WHO entities + the "Total life costs" reset) — same look as the Ledger filter rows */
.ana-cbrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text-secondary); }
.ana-cbrow:hover { background: var(--bg-hover); }
.ana-cbrow.lcat-crow--on { color: var(--text-primary); }
.ana-opt__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-opt--off { color: var(--text-tertiary); opacity: 0.45; cursor: not-allowed; }
.ana-opt--off:hover { background: transparent; }
/* the Compare/Add toggle sticks to the popup's bottom edge so it stays reachable in a long category list */
.ana-menu__foot { position: sticky; bottom: -6px; background: var(--bg-elevated); border-top: 1px solid var(--border-subtle);
margin: 6px -6px -6px; padding: 8px 8px 8px; }
.ana-menu__footrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ana-menu__foot-lbl { font-size: 12px; color: var(--text-tertiary); }
.ana-menu__footnote { font-size: 11px; margin-top: 6px; line-height: 1.35; }
/* WHAT comparison buckets (A/B/C) */
.ana-buckets { padding: 6px 2px 8px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.ana-buckets__row { display: flex; flex-wrap: wrap; gap: 6px; }
.ana-bucket { appearance: none; font-family: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
padding: 5px 9px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-secondary); max-width: 100%; }
.ana-bucket.is-active { border-color: var(--accent-primary); box-shadow: 0 0 0 2px var(--accent-glow); color: var(--text-primary); }
.ana-bucket__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
/* v386 — WRAP, NEVER TRUNCATE. A slot now names every category in it (analysis.js `bucketLabel`), and an
ellipsis here would put the abbreviation straight back — a chip reading "Groceries, Dining a…" says no
more than the "+1" the round exists to remove. The pill grows a second line instead; `max-width: 100%`
above already keeps it inside the popup, and the stadium radius survives a two-line box. */
.ana-bucket__lbl { overflow-wrap: break-word; min-width: 0; }
.ana-bucket__x { flex: none; margin-left: 2px; font-size: 14px; line-height: 1; opacity: 0.7; }
.ana-bucket__x:hover { opacity: 1; }
.ana-bucket--add { font-size: 16px; line-height: 1; padding: 5px 11px; color: var(--text-tertiary); }
.ana-buckets__hint { font-size: 11px; margin-top: 6px; }
/* a category's bucket mark: the bucket COLOUR square with its letter (replaces the plain checkbox in compare mode) */
.ana-bcb { color: #15151f; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ana-limitnote { margin: 0 0 12px; }
/* WHEN: the dropdown holds the custom range; the quick presets sit beside it */
.ana-whengroup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.ana-when-presets { flex-wrap: wrap; }
.ana-when-pop { overflow: visible; max-height: none; min-width: 280px; padding: 12px; }
.ana-when-lbl { font-size: 12px; margin-bottom: 8px; }
.ana-rangerow { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; margin-top: 6px; }
/* v319: the WHEN range is ONE picker with no From/To label — full-width single column */
.ana-rangerow--single { grid-template-columns: 1fr; }
/* discrete-period comparison controls (the WHEN "Compare periods" mode) */
.ana-whenmode { margin-bottom: 10px; }
.ana-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ana-prow__lbl { flex: 0 0 auto; }
.ana-prow .dash-seg { flex-wrap: wrap; }
.ana-prow .dropdown { min-width: 130px; }
.ana-pyears { margin-top: 10px; }
.ana-pyears > .ana-prow__lbl { display: block; margin-bottom: 4px; }
.ana-pyears__box { display: flex; flex-wrap: wrap; gap: 2px 14px; max-height: 160px; overflow-y: auto; }
.ana-pyears__box .ana-cbrow { flex: 0 0 auto; padding: 5px 4px; }
.ana-customrange { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ana-customrange__lbl { font-size: 12px; }
.ana-shape { margin-left: 2px; }
/* Slice 3 — the shape ICON STRIP (replaces the breakdown-shape dropdown; hover an icon for its name). */
.ana-shaperow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ana-shapestrip { display: inline-flex; gap: 3px; background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: 12px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ana-shapestrip::-webkit-scrollbar { display: none; }
.ana-shbtn { position: relative; flex: 0 0 auto; width: 38px; height: 36px; display: inline-flex; align-items: center;
justify-content: center; background: transparent; border: 0; border-radius: 9px; cursor: pointer; color: var(--text-tertiary); padding: 0; }
.ana-shbtn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.ana-shbtn.is-on { background: var(--accent-glow); color: var(--accent-primary); }
.ana-shbtn svg { width: 20px; height: 20px; }
.ana-shbtn__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #000;
color: var(--text-primary); font-size: 12px; padding: 4px 9px; border-radius: 6px; white-space: nowrap; opacity: 0;
pointer-events: none; transition: opacity .12s ease; border: 1px solid var(--border-strong); z-index: 5; }
.ana-shbtn:hover .ana-shbtn__tip, .ana-shbtn:focus-visible .ana-shbtn__tip, .ana-shbtn--tip .ana-shbtn__tip { opacity: 1; } /* §4 fix #9: --tip is the touchstart-revealed state (JS-toggled) */
/* §4 fix #9: the active shape's NAME, always visible beside the icon strip (touch can't hover an icon to learn it) */
.ana-shaperow__label { font-size: 12.5px; white-space: nowrap; }
.ana-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
/* v386: a legend key may now carry a slot's WHOLE membership ("Groceries, Dining and Transport"), so the
item is allowed to take a second line rather than push the row into a horizontal scroll. */
.ana-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); max-width: 100%; min-width: 0; }
.ana-legend__lbl { overflow-wrap: break-word; min-width: 0; }
.ana-legend__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
/* ── REVIEW ROUND 3 · part 1: the chart draws at REAL pixels ────────────────────────────────────────────────
It used to be `width:100%` over a fixed 760x300 viewBox — i.e. the browser scaled the whole drawing, axis
text included, down to the card. On a 390px phone that made the numbers ~5px. The SVG now carries real
width/height attributes equal to its viewBox, so nothing is scaled and 12.5px text is 12.5px everywhere;
`max-width:100%` + `height:auto` stay purely as a safety net for the frame between a resize and its redraw.
(report-analysis.js deliberately overrides this with width:100% — paper scales the whole page.) */
.ana-chart__wrap { position: relative; }
/* v376 — THE CHARTS USE THE ROOM. `margin: 0 auto` was the second half of the 860px cap: with the drawing
hard-limited to 860, every wider card centred it and hung grey off both sides. The cap is gone (the JS
now sizes a chart at min(the room it has, n marks x SLOT_CAP + rails)), and the centring stays — it is
what keeps a deliberately-narrow small-data chart sitting in the middle of a wide card rather than
stranded against its left edge. Flagged veto-able on the round's card: left-aligned may read better
once several cards of different mark counts stack on a wide monitor. */
.ana-chart { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* v376 — the fullscreen amount on a mark. QUIET INK, never the series colour (a coloured amount would read
as a fifth meaning on a screen whose colours already mean four things), and a size under the axis font
so the numbers sit behind the axis in the reading order rather than competing with it. Deliberately NOT
given the `.ana-axis` class: every suite that harvests axis text reads that class, and a mark amount is
not an axis label — sharing the class would have quietly changed what a dozen existing assertions count. */
.ana-markamt { fill: var(--text-secondary); font-size: 12px; font-family: inherit; pointer-events: none; }
/* the interactive stage (part 3): the drawn SVG plus the two axis GUTTER strips laid exactly over the
gutters the chart reserves. touch-action is the whole touch policy — a vertical flick on the plot still
scrolls the page (pan-y), the strips only stretch their axis (none). */
.ana-cstage { position: relative; margin: 0 auto; max-width: 100%; touch-action: pan-y; cursor: grab; }
.ana-cstage--drag { cursor: grabbing; }
.ana-cax { position: absolute; touch-action: none; -webkit-user-select: none; user-select: none; }
/* R6 (v343): the money gutter moved to the RIGHT, so this strip did too — the gradient mirrors with it, and
still fades AWAY from the plot (strongest at the outer edge, invisible where the drawing begins). */
.ana-cax--y { cursor: ns-resize; background: linear-gradient(270deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.ana-cax--x { cursor: ew-resize; background: linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.ana-cax:hover { background: rgba(255,255,255,.06); }
/* the way back, shown ONLY once the view is off its default (at rest both buttons would be no-ops) */
.ana-cbar { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ana-cbar__btn { background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-secondary);
border-radius: 8px; font: inherit; font-size: 12px; padding: 5px 9px; min-height: 30px; cursor: pointer; }
.ana-cbar__btn:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.ana-cbar__btn.is-on { background: var(--accent-glow); border-color: var(--accent-primary); color: var(--text-primary); }
/* part 2: the "Show by" pills sit with the other trend-lens controls */
.ana-granwrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ana-granwrap__lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ana-grannote { margin: 0 2px 8px; }
/* v349 ④: the heading over the scoped WHO-compare's per-person TOTAL bars — it has to separate two charts
that now live in one card, so it carries air above as well as below. */
.ana-comptotals__ttl { margin: 10px 2px 4px; }
/* v369 (SIXTH-REVIEW ROUND D): the compare consistency rule's section captions. The REGISTER is entirely
`.ana-bdsect` above — the app's existing small-uppercase section caption, which the compare TABLE's own
`.ana-comptab__sechd` already borrows — so no second small-caps voice entered the app. This modifier adds
only what two CHARTS inside one card need that a run of list rows does not: real air, and one hairline in
the same `--border-default` the table's section rule uses. No new colour token, no new hex.
It sits AFTER `.ana-comptotals__ttl` deliberately: the v349 heading keeps its class (suites select on it)
and takes this spacing, rather than two rules fighting over the same margin. */
.ana-bdsect--chart { margin: 20px 2px 8px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.ana-bdsect--first { margin-top: 4px; padding-top: 0; border-top: 0; }
.ana-grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; } /* Slice 2: softer gridlines on the deep-black chart card */
/* R6 (v343): 12.5 → 13.5px, the human's "the axis labels need genuinely more readability". THREE PLACES MUST
AGREE: this rule, its literal duplicate in js/report-analysis.js (the printed page cannot see this file),
and AXIS_FONT_PX in js/analysis.js (which MEASURES the text to size the money gutter and to decide whether
an x label fits horizontally — a stale constant there would reserve the wrong width). */
.ana-axis { fill: var(--ana-axis-ink); font-family: inherit; font-size: 13.5px; } /* v366 ②: colour only — 13.5px is the measuring contract (AXIS_FONT_PX), do not touch it here */
.ana-eratable { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.ana-eratable th { text-align: left; color: var(--text-tertiary); font-weight: 500; font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--border-default); }
.ana-eratable td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
/* numeric column: right-align the HEADER too (the `.ana-eratable th` rule out-specifies a bare `.ana-eratable__num`,
so the header was left-aligned while its number was right-aligned → they drifted far apart in a wide column). */
.ana-eratable th.ana-eratable__num, .ana-eratable td.ana-eratable__num { text-align: right; }
/* keep the numbers from sprawling to the far edge of a very wide frame — a calmer fixed currency column + a cap */
.ana-eratable th:first-child, .ana-eratable td:first-child { width: 120px; }
/* §9 per-era SECTIONS: one labelled block per currency era when a range spans a base-currency change. A clear
divider + a header (currency name · date span) sets each era apart; sections stack single-column on a phone. */
.ana-era-section { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--border-default); }
.ana-era-section:first-of-type { margin-top: 14px; }
.ana-era-section__hd { font-family: var(--font-head, inherit); font-size: 17px; font-weight: 600; color: var(--text-primary); margin: 0 2px 10px; }
/* ── Analysis → Ledger linked panel (floating, filtered ledger view) ───────────────────────────── */
/* SLIM + GLASS handles (2026-07-16, human-picked "variant C" from the mockup artifact): the icon leads the word
along ONE vertical line (flex-direction: row in vertical-rl = the inline/vertical axis → ~25px wide, half the
old tab), and the tab is translucent purple + blur so a covered card title stays readable through it. Hover /
focus restores full purple — the tap target is never a ghost. (rgba literal of --accent-primary, the
--accent-glow precedent.) */
.ana-lpanel-handle {
position: fixed; top: 50%; right: 0; transform: translateY(-50%);
z-index: 60; display: flex; flex-direction: row; align-items: center; gap: 5px;
background: rgba(124, 106, 255, 0.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
color: #fff; border: none; cursor: pointer;
padding: 10px 5px; border-radius: 12px 0 0 12px; box-shadow: -3px 0 14px rgba(0,0,0,0.35);
writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease;
}
.ana-lpanel-handle svg { transform: rotate(90deg); }
.ana-lpanel-handle:hover, .ana-lpanel-handle:focus-visible { background: var(--accent-primary); }
.ana-lpanel-handle--gone { opacity: 0; transform: translateY(-50%) translateX(110%); pointer-events: none; }
.ana-lpanel {
position: fixed; top: 0; right: 0; height: 100vh; width: min(380px, 92vw);
z-index: 61; display: flex; flex-direction: column;
background: var(--bg-surface); border-left: 1px solid var(--border-default);
box-shadow: -6px 0 26px rgba(0,0,0,0.4);
transform: translateX(100%); transition: transform 0.22s ease, width 0.18s ease;
}
.ana-lpanel--open { transform: translateX(0); }
.ana-lpanel--wide { width: min(620px, 96vw); }
.ana-lpanel__head { padding: 14px 14px 10px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
.ana-lpanel__titlerow { display: flex; align-items: center; gap: 6px; }
.ana-lpanel__title { font-family: var(--font-head, inherit); font-size: 16px; font-weight: 600; color: var(--text-primary); }
.ana-lpanel__spacer { flex: 1 1 auto; }
.ana-lpanel__expand svg { transition: transform 0.18s ease; }
.ana-lpanel--wide .ana-lpanel__expand svg { transform: rotate(180deg); }
.ana-lpanel__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ana-lpanel__count { font-size: 13px; }
.ana-lpanel__net { font-size: 15px; font-weight: 500; }
.ana-lpanel__sortrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ana-lpanel__sortlbl { font-size: 12px; }
.ana-lpanel__filters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.ana-lpanel__filters:empty { display: none; }
.ana-lpanel__filter { display: flex; flex-direction: column; gap: 3px; flex: 1 1 100%; min-width: 0; }
.ana-lpanel--wide .ana-lpanel__filter { flex: 1 1 200px; } /* side-by-side only when there's room (expanded panel) */
.ana-lpanel__filterhd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ana-lpanel__filterhd > span { font-size: 11px; }
.ana-lpanel__clear { font-size: 11px; color: var(--text-secondary); }
.ana-lpanel__clear:hover { color: var(--accent-primary); }
.ana-lpanel__filter .dropdown, .ana-lpanel__filter .catpick, .ana-lpanel__filter .combo { width: 100%; min-width: 0; }
.ana-lpanel__filter .dropdown__trigger, .ana-lpanel__filter .catpick__input, .ana-lpanel__filter .combo input { width: 100%; min-width: 0; box-sizing: border-box; }
.ana-lpanel__body .tx__detail { width: 100%; margin-top: 4px; }
.ana-lpanel__body .txd__golink { margin-top: 8px; }
.ana-lpanel__body { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 18px; }
.ana-lpanel__body .tx { padding: 9px 4px; border-bottom: 1px solid var(--border-subtle); }
.ana-lpanel__empty { padding: 24px 8px; text-align: center; font-size: 14px; }
.ana-lpanel__more { padding: 12px 4px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) {
.ana-lpanel { width: 100vw; }
.ana-lpanel--wide { width: 100vw; }
}
/* ── Slice 4: the LEFT-sliding Table panel + its edge handle (mirror of the right ledger panel) ─────────── */
.ana-tpanel-handle {
position: fixed; top: 42%; left: 0; transform: translateY(-50%);
z-index: 60; display: flex; flex-direction: row; align-items: center; gap: 5px;
background: rgba(124, 106, 255, 0.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
color: #fff; border: none; cursor: pointer;
padding: 10px 5px; border-radius: 0 12px 12px 0; box-shadow: 3px 0 14px rgba(0,0,0,0.35);
writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease;
}
.ana-tpanel-handle:hover, .ana-tpanel-handle:focus-visible { background: var(--accent-primary); }
.ana-tpanel-handle--gone { opacity: 0; transform: translateY(-50%) translateX(-110%); pointer-events: none; }
/* S7: .ana-tpanel-handle--hidden removed — the panel is ALWAYS-ON (the review-#2 compare/periods hide is gone). */
.ana-tpanel {
position: fixed; top: 0; left: 0; height: 100vh; width: min(var(--tpanel-w, min(560px, 94vw)), 94vw);
z-index: 61; display: flex; flex-direction: column;
background: var(--bg-surface); border-right: 1px solid var(--border-default);
box-shadow: 6px 0 26px rgba(0,0,0,0.4);
transform: translateX(-102%); transition: transform 0.24s cubic-bezier(.2,.8,.2,1), width 0.2s ease;
}
.ana-tpanel--open { transform: translateX(0); }
.ana-tpanel--max { width: min(1400px, 96vw); } /* S7 §3.7: maximise → ~full width */
.ana-tpanel--dragging { transition: none; user-select: none; } /* S7: no width transition mid-drag */
/* S7 §3.7: the right-edge drag GRIP (new code — pointer events; data-noswipe so mobile swipe-nav can't hijack it) */
.ana-tpanel__grip {
position: absolute; top: 0; right: 0; width: 12px; height: 100%; z-index: 3;
cursor: col-resize; touch-action: none;
}
.ana-tpanel__grip::after {
content: ''; position: absolute; top: 50%; right: 3px; width: 3px; height: 46px; transform: translateY(-50%);
border-radius: 3px; background: var(--border-default); transition: background 0.15s ease;
}
.ana-tpanel__grip:hover::after, .ana-tpanel--dragging .ana-tpanel__grip::after { background: var(--accent-primary); }
.ana-tpanel__max { flex: 0 0 auto; }
.ana-tpanel__max.is-on { color: var(--accent-primary); }
.ana-tpanel__head { padding: 14px 14px 10px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
.ana-tpanel__titlerow { display: flex; align-items: flex-start; gap: 8px; }
/* v386 — WRAP, NEVER TRUNCATE, here too. Caught by eye on the round's own screenshot: a compare slot now
names every category in it, and this title ellipsised it to "…Eating out and Transport vs…". The row's
other child (the Over time / Totals segment) is `flex: 0 0 auto`, so letting the title take a second
line costs the panel a few pixels of header and nothing else. Same rule as the slot chip and the legend.
`align-items` moves to flex-start so the segment stays beside the FIRST line, not vertically centred
against a two-line title. */
.ana-tpanel__title { font-family: var(--font-head, inherit); font-size: 16px; font-weight: 600; color: var(--text-primary);
flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.ana-tpanel__seg { flex: 0 0 auto; }
.ana-tpanel__sub { font-size: 12.5px; margin-top: 8px; }
.ana-tpanel__pctrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ana-tpanel__pctrow:empty { display: none; }
.ana-tpanel__pctlbl { font-size: 12px; }
.ana-tpanel__body { flex: 1 1 auto; overflow: auto; padding: 8px 6px 24px; }
.ana-tpanel__empty { padding: 24px 8px; text-align: center; font-size: 14px; }
.ana-mtab { border-collapse: collapse; width: 100%; font-size: 13px; }
.ana-mtab th, .ana-mtab td { padding: 8px 10px; text-align: right; white-space: nowrap; }
.ana-mtab th:first-child, .ana-mtab td.ana-mtab__name, .ana-mtab td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-surface); }
.ana-mtab thead th { color: var(--text-tertiary); font-weight: 600; border-bottom: 1px solid var(--border-default); position: sticky; top: 0; background: var(--bg-surface); z-index: 1; }
.ana-mtab td.mono { font-family: var(--font-mono, inherit); font-weight: 500; } /* DM Mono has no weight > 500 */
.ana-mtab tbody tr:hover { background: rgba(255, 255, 255, .03); }
.ana-mtab tr.ana-mtab__tot td { border-top: 1px solid var(--border-default); color: var(--text-primary); font-weight: 600; }
.ana-mtab__totcol { border-left: 1px solid var(--border-subtle); color: var(--text-primary); }
.ana-mtab__dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
/* v325: the month table's drillable Spending row (Everything) — same chevron affordance as the breakdown
breakdown peek, sized for a table cell; its category sub-rows indent one step. */
.ana-mtab__chev { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-tertiary);
width: 18px; height: 18px; padding: 0; margin-right: 4px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.ana-mtab__chev svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.ana-mtab__chev.is-open svg { transform: rotate(180deg); }
/* v326.1: a RESERVED, empty chevron slot on a non-drilling trio row (income/kept with nothing to expand) so the
colour dots + labels stay aligned with the drilling rows — the chevron never shoves one label out of column.
v328: its OWN class (not .ana-mtab__chev + a modifier) so a `.ana-mtab__chev` selector only ever finds a real
drill button, never this hidden spacer (that collision made the table-drill test grab the wrong element). */
.ana-mtab__chevpad { display: inline-flex; width: 18px; margin-right: 4px; flex: none; vertical-align: middle; }
.ana-mtab td.ana-mtab__name--sub { padding-left: 28px; color: var(--text-secondary); }
.ana-mtab thead th.ana-mtab__num .ana-mtab__dot { margin-right: 5px; } /* S7: person/bucket column-header identifier dots */
.ana-mtab__partial { opacity: 0.72; } /* S7: the in-progress month/period column */
/* S7 §3.7: phone/tablet — the panel is already full-width, so drag/maximise are hidden (a graceful no-op) */
@media (max-width: 900px) {
.ana-tpanel, .ana-tpanel--max { width: 100vw; }
.ana-tpanel__grip, .ana-tpanel__max { display: none; }
}
/* comparison card head + per-series totals (used by WHO/WHAT comparison views) */
.ana-comphead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.ana-comphead .dash-card__title { margin: 0; }
.ana-measure { margin-left: auto; }
.ana-compsums { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.ana-compsums__item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.ana-compsums__dot { width: 10px; height: 10px; border-radius: 3px; align-self: center; flex: none; }
.ana-compsums__amt { color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ana-combined { margin: -4px 0 12px; }
/* S10 phone gate: the ranked-list-per-unit fallback for a grouped-bars compare that would be too dense at
narrow widths (analysis.js tooManyBarsForNarrow / drawCategoryCompare) — a stack of per-person mini-lists,
reusing the existing .ana-bdrow list-row look. */
/* R12 (SW v342): compare's OWN "Where it went" — one row per unit, one column per person. It reuses the
.ana-mtab look (identical data shape to the Table panel's units × people grid) but lives in a card in the
results flow, so it needs its own horizontal scroller: with six compared people the table is genuinely
wider than a 390px phone, and the PAGE must never scroll sideways — the TABLE does, inside this box. */
.ana-comptab { padding-top: 6px; padding-bottom: 10px; }
.ana-comptab .dash-card__title { margin-bottom: 6px; }
.ana-comptab__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* CONTENT-WIDTH, not 100%: .ana-mtab stretches to fill its host, which inside a wide results card pushes the
second person's column to the far right edge — and reading two people's numbers ON THE SAME LINE is the
entire reason the human chose one merged table over stacked lists. max-content keeps the columns adjacent
on a monitor (they already are on a phone, where the content fills the width) and lets the scroller above
take over when there are enough people to overflow. */
.ana-comptab__tab { width: max-content; max-width: none; }
.ana-comptab__tab th.ana-mtab__num, .ana-comptab__tab td.ana-mtab__num { padding-left: 30px; }
.ana-comptab__goldrow td.ana-mtab__gold { color: var(--accent-gold); }
/* v353 (Q3): the three labelled sections of the compare-under-Everything table — Where it came from ·
Where it went · What each kept. A section head is a full-width caption in the same small-uppercase
register the income engine's own section captions use (.ana-bdsect), so nothing new is learned. */
.ana-comptab__sec td { border-bottom: 0; border-top: 1px solid var(--border-default); padding-top: 16px; }
.ana-comptab__sec:first-child td { border-top: 0; padding-top: 2px; }
.ana-comptab__sechd { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); text-align: left; }
.ana-comptab__pctrow td { border-bottom: 0; }
/* below zero is the ONE place red belongs (§3) — a negative Kept, and its negative share of own income */
.ana-mtab__neg { color: var(--accent-red); }
.ana-comparenarrow__note { margin: 0 0 12px; }
.ana-comparenarrow__unit { margin-bottom: 18px; }
.ana-comparenarrow__unit:last-child { margin-bottom: 0; }
.ana-comparenarrow__hd { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px; border-bottom: 1px solid var(--border-default); }
.ana-comparenarrow__name { font-weight: 600; color: var(--text-primary); flex: 1 1 auto; min-width: 0; }
.ana-comparenarrow__amt { color: var(--text-primary); }
/* ── R0 redesign: control surface (breadcrumb-drill + verbs) · lens switcher · breakdown rows ───── */
.ana-controls2 { margin-bottom: var(--gap); }
/* R4: saved reports strip */
.ana-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ana-presets__lbl { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; margin-right: 2px; }
/* Slice 6 — the ★ Saved ▾ dropdown (apply · × delete · "Save this view" inside). */
.ana-menu--saved .ana-menu__lbl { display: none; } /* no uppercase axis label — just "★ Saved" */
.ana-menu--saved .ana-menu__trigger { min-width: auto; }
.ana-menu--saved .ana-menu__val { font-size: 13px; color: var(--text-secondary); }
.ana-saved-pop { min-width: 240px; max-width: 320px; padding: 6px; }
.ana-saved__empty { padding: 10px 8px; font-size: 12.5px; }
.ana-saved__row { display: flex; align-items: center; gap: 4px; }
.ana-saved__apply { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; appearance: none; background: transparent; border: 0; font-family: inherit; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; text-align: left; padding: 8px; border-radius: 7px; }
.ana-saved__apply:hover { background: var(--bg-hover); color: var(--text-primary); }
.ana-saved__star { color: var(--accent-gold); flex: none; }
.ana-saved__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-saved__x { flex: none; appearance: none; background: transparent; border: 0; color: var(--text-tertiary); font-size: 16px; line-height: 1; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.ana-saved__x:hover { color: var(--accent-warm); background: var(--bg-hover); }
.ana-saved__sep { height: 1px; background: var(--border-subtle); margin: 6px 2px; }
.ana-saved__saverow { display: flex; align-items: center; gap: 6px; padding: 2px; }
.ana-saved__nameinput { flex: 1 1 auto; min-width: 0; box-sizing: border-box; }
.ana-saved__savebtn { flex: none; padding: 8px 12px; font-size: 13px; }
/* Export slice D — "⎙ Save as PDF", beside ★ Saved. Always at least 40px tall (a real tap target); z-index
keeps it above the CLOSED ★ Saved popup box.
v383: `margin-left: auto` DROPPED. It used to push the button to the far end of the strip, which read
fine while the "SAVED REPORTS" label anchored the left. With that label retired the button was left
floating in the middle of an otherwise empty row (caught on the desktop screenshot). It now simply
follows ★ Saved — the same pairing the phone layout ratifies — and the [Explore | Usual ranges] strip's
own `margin-left: auto` still carries it to the right edge. Flagged veto-able on the round's card. */
.ana-pdfbtn { margin-left: 0; position: relative; z-index: 1; flex: none; appearance: none; cursor: pointer;
background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 9px;
color: var(--text-primary); font-family: inherit; font-size: 13px; padding: 8px 12px; min-height: 40px; }
.ana-pdfbtn:hover { border-color: var(--accent-primary); background: var(--bg-hover); }
.ana-pdfbtn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
/* On a phone the right edge of the frame is where the Ledger panel's handle tab floats, so the far-right
placement would put the button half under it (caught on the 390px screenshot). Below the breakpoint it
simply follows ★ Saved instead — same strip, same order, nothing covering it. */
@media (max-width: 700px) { .ana-pdfbtn { margin-left: 0; } }
/* ── v383 · THE PHONE HEADER SHUFFLE (human-ratified 2026-08-20) ─────────────────────────────────────
Three rows became two. The "SAVED REPORTS" heading label is gone from the markup entirely (the ★ Saved
trigger says what it is), the [Explore | Usual ranges] toggle moves ABOVE, and ★ Saved gives up just
enough width for the ⎙ button to sit on its RIGHT so the pair shares one line. It is flex `order` on a
strip that already wraps, so the DESKTOP arrangement is untouched — nothing above the breakpoint moves. */
@media (max-width: 700px) {
.ana-presets .ana-subviewstrip { order: 1; width: 100%; margin-left: 0; }
.ana-presets .ana-menu--saved { order: 2; flex: 1 1 auto; min-width: 0; width: auto; }
.ana-presets .ana-menu--saved .ana-menu__trigger { width: 100%; max-width: none; }
.ana-presets .ana-pdfbtn { order: 3; margin-left: 0; }
}
/* v350 — icon-only. The name now lives in `title`/`aria-label` (hover tooltip on desktop, long-press note on a
phone), so the button becomes a square 40px tap target holding just the ⎙ glyph. Same box, same placement. */
.ana-pdfbtn--icon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 0 10px; }
.ana-pdfbtn__ico { font-size: 17px; line-height: 1; display: block; }
.ana-preset { appearance: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px;
cursor: pointer; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-input); color: var(--text-primary); }
.ana-preset:hover { border-color: var(--border-strong); }
.ana-preset--starter { background: var(--bg-surface); color: var(--text-secondary); }
.ana-preset--save { border-style: dashed; color: var(--accent-primary); border-color: var(--accent-primary); background: none; }
.ana-preset__x { color: var(--text-tertiary); font-size: 15px; line-height: 1; }
.ana-preset__x:hover { color: var(--accent-warm); }
.ana-preset__name { width: 180px; max-width: 52vw; padding: 7px 10px; font-size: 13px; }
.ana-preset__savebtn { padding: 7px 14px; font-size: 13px; }
.ana-whowrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* the Single/Add/Compare mode toggle at the top of the WHO dropdown (gates single vs multi select) */
.ana-whomode { display: flex; margin-bottom: 8px; }
.ana-whomode .dash-seg__btn { flex: 1 1 0; text-align: center; }
.ana-menu__hint { font-size: 11px; line-height: 1.35; margin: -2px 2px 8px; }
/* "one comparison at a time" info panel — anchored to the Compare button the user clicked (2026-07-09 review) */
.ana-blocknote { position: fixed; z-index: 300; max-width: 260px; display: flex; gap: 8px; align-items: flex-start;
padding: 10px 12px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border-default);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); color: var(--text-primary); font-size: 13px; line-height: 1.4;
opacity: 0; transform: translateY(-4px); transition: opacity 0.14s ease, transform 0.14s ease; }
.ana-blocknote--show { opacity: 1; transform: translateY(0); }
.ana-blocknote__icon { flex: 0 0 auto; color: var(--accent-primary); font-weight: 700; }
.ana-blocknote__msg { flex: 1 1 auto; white-space: pre-line; } /* honour explicit line breaks so a bulleted note (drift "What is this?") reads as points; single-line notes unaffected */
/* the "More in Help →" deep link inside an anchored note (copy pass round 1 — the relocation GATE:
copy moved into Help must stay reachable from the screen it left). `display:block` puts it on its own
line under the prose without needing a inside a pre-line text node. */
.ana-blocknote__link { display: block; margin-top: 8px; background: none; border: none; padding: 0;
font-family: inherit; font-size: 12px; color: var(--accent-primary); cursor: pointer; text-align: left; }
.ana-blocknote__link:hover { text-decoration: underline; }
.ana-blocknote__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); border-radius: 6px; }
/* ── the shared ⓘ affordance (copy pass round 1) ─────────────────────────────────────────────────
Quiet by default — it must never read as a warning, so no accent fill and no alarm colour. Same
visual as the earlier hand-rolled `.intent-infobtn`, minus that screen's `margin-right:auto`. */
.info-dot { background: none; border: 1px solid var(--border-default); color: var(--text-tertiary);
width: 22px; height: 22px; border-radius: 50%; font-size: 12px; line-height: 1; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; flex: none; }
.info-dot:hover { color: var(--text-primary); border-color: var(--border-strong); }
.info-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
/* `
` + its ⓘ on one baseline. h2's own `margin: 0 0 4px` moves to the wrapper so vertical rhythm
is byte-identical to the bare heading it replaces. */
.copy-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
/* v385 — the row now also carries an h3 (Home's Kept card), so the margin reset covers both. */
.copy-head h2, .copy-head h3 { margin: 0; }
/* breadcrumb-drill row */
.ana-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 12px; }
.ana-crumb { appearance: none; background: none; border: none; font-family: inherit; font-size: 14px; padding: 4px 6px; border-radius: 8px; }
.ana-crumb--link { color: var(--text-secondary); cursor: pointer; }
.ana-crumb--link:hover { color: var(--text-primary); background: var(--bg-hover); }
.ana-crumb--cur { color: var(--text-primary); font-weight: 600; }
.ana-crumb__sep { color: var(--text-tertiary); font-size: 13px; }
/* typeable jump — §4 fix #8: the bare `.ana-jump` wrapper was only the (now-deleted) dead buildJump's own div;
the `.ana-jump__*` piece classes below stay LIVE (shared by buildWhatSearch, the WHAT popup's search box). */
.ana-jump__input { width: 150px; max-width: 46vw; padding: 7px 10px; font-size: 13px; }
.ana-jump__pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 240px; max-width: 330px; padding: 4px; }
.ana-jump__opt { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ana-jump__opt:hover, .ana-jump__opt--hi { background: var(--bg-hover); }
.ana-jump__type { flex: 0 0 64px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ana-jump__lbl { color: var(--text-primary); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* lens switcher strip (under the headline tiles) */
.ana-lensstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
/* S4 (D6): an honestly-DISABLED tab/segment button — greyed with a reason tooltip (title attr), never a
live-looking dead control and never hidden (stable geography). Wired via class + aria-disabled (a disabled
attr would swallow the hover tooltip); the :disabled selector is covered too for any future native wiring. */
.dash-seg__btn:disabled, .dash-seg__btn--off { opacity: 0.38; cursor: default; }
.dash-seg__btn--off:hover { background: none; color: inherit; }
.ana-shbtn--disabled { opacity: 0.35; cursor: default; }
.ana-shbtn--disabled:hover { background: none; }
/* S3 (§3.3/D1): the "Comparing: A vs B ✕" pill sits in the lens-tab row with TAB-CLASS visual weight (a bordered,
elevated, semibold pill — not a slim chip a thumb misses). ✕ is the one consistent, undoable compare exit. */
/* S7.5 #2: the current-subject check on WHAT-popup rows (Single mode) */
.ana-curmark { margin-left: auto; display: inline-flex; align-items: center; color: var(--accent-primary); flex: none; }
.ana-curmark svg { width: 14px; height: 14px; }
.ana-comparepill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
border: 1px solid var(--accent-primary); background: var(--bg-elevated); border-radius: 999px;
padding: 4px 5px 4px 13px; }
.ana-comparepill__lbl { font-size: 12px; font-weight: 600; color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-comparepill__x { appearance: none; background: none; border: none; cursor: pointer; flex: none;
color: var(--text-secondary); font-size: 13px; line-height: 1; width: 22px; height: 22px; padding: 0;
border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.ana-comparepill__x:hover { background: var(--bg-hover); color: var(--text-primary); }
/* the breakdown list — the "Where it went" card (v325's Everything bifurcation, generalised to every subject
at R11 and, since v367, the ONE host of the breakdown rows: the retired List skin's own card class went
with the merge and its rule folded into this one). Extra right padding keeps the right-aligned amounts clear of the
floating Ledger-panel handle (fixed at the right edge, vertically centred). */
/* v368 ④: `.ana-incomecard` is the "Where it came from" streams card that sits ABOVE it at Everything. It
wears the SAME rule (identical padding + title rhythm — two stacked cards that read as one pair) but its
OWN class, because `.ana-bifur` is what a dozen suites select as `querySelector('.ana-bifur')` and a
second card carrying that name would silently hand them the wrong one. No new colours: the rows are
`.ana-bdrow`s exactly as in the card below, teal via childColor's income family. */
.ana-bifur, .ana-incomecard { padding-top: 6px; padding-bottom: 6px; padding-right: 44px; }
.ana-bifur .dash-card__title, .ana-incomecard .dash-card__title { margin-bottom: 2px; }
/* R9 (SW v339) item (2) — STRICT COLUMNS. §4 fix #5 made name/amount fixed-basis flex items, which lined the
bars up but left the row `flex-wrap`: a long name plus a wide amount still reflowed the AMOUNT underneath
the name (the human's wrapping complaint). The row is a real GRID now — name | bar | % | amount — so a long
name wraps INSIDE its own cell and every other cell holds its place. Only the TEMPLATE varies per row kind
(below); the base carries no template of its own, so a variant rule can never be out-specified by the
phone media query further down. */
.ana-bdrow { display: grid; align-items: center; gap: 6px 10px; padding: 9px 6px; border-bottom: 1px solid var(--border-subtle); }
.ana-bdrow--bars { grid-template-columns: minmax(110px, 34%) 1fr 44px minmax(92px, max-content); }
.ana-bdrow--sw.ana-bdrow--bars { grid-template-columns: 10px minmax(110px, 34%) 1fr 44px minmax(92px, max-content); }
/* (3) no income in the period ⇒ no ruler ⇒ no bar and no % at all (the greyed-donut honesty family) */
.ana-bdrow--nobar { grid-template-columns: 1fr minmax(92px, max-content); }
.ana-bdrow--sw.ana-bdrow--nobar { grid-template-columns: 10px 1fr minmax(92px, max-content); }
.ana-bdrow:last-child { border-bottom: none; }
.ana-bdrow--sub { font-size: 13px; }
.ana-bdrow--sub .ana-bdrow__name { color: var(--text-secondary); }
/* v326: a PEEKABLE row (its tap expands the row inline — the chevron button is gone). Renamed from the old
--drill hover; the whole row is the affordance now (pointer + hover). A non-peekable leaf gets neither. */
/* R5 (SW v334): the row is a TAP SURFACE, so it gets the tap-surface treatment the donuts already carry —
`touch-action: manipulation` (no 300ms double-tap-zoom wait, which is a real part of "the tap felt slow"),
no platform tap-highlight rectangle over the bars, and a PRESSED state so a finger gets feedback in the
same frame rather than only when the merchant aggregate lands. */
.ana-bdrow--peek { cursor: pointer; border-radius: 8px; touch-action: manipulation;
-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.ana-bdrow--peek:hover { background: var(--bg-hover); }
.ana-bdrow--peek:hover .ana-bdrow__name { color: var(--text-primary); }
.ana-bdrow--peek:active { background: var(--bg-hover); filter: brightness(1.18); }
.ana-bdrow--peek:active .ana-bdrow__name { color: var(--text-primary); }
/* R5: the one calm placeholder child drawn while a just-opened category peek waits for its merchants. */
.ana-bdrow--peekwait { grid-template-columns: 1fr; cursor: default; }
.ana-bdrow--sw.ana-bdrow--peekwait { grid-template-columns: 10px 1fr; }
/* v345: the wait line carries the app's ONE loading visual (three fading dots, .hload__spin) beside the words
— the human's ask, "that same waiting thing we have built". `.hload` on the same span brings its grace-period
fade-in, so a warm drill that lands in a few ms never flashes anything. Row scale: smaller dots, tighter gap.
A FAILED read swaps that line for the shared tap-to-retry (.load-retry) — muted, never red (§3: red is the
zero line only), and it is a real affordance because the failure was never cached. */
.ana-bdrow__wait { display: inline-flex; align-items: center; gap: 8px; }
.ana-bdrow__wait .hload__spin { gap: 4px; }
.ana-bdrow__wait .hload__spin i { width: 5px; height: 5px; }
.ana-bdrow__wait .hload__txt { font-size: inherit; }
.ana-bdrow--peekfail { cursor: default; }
.ana-bdrow__retry { margin: 0; display: inline-block; }
/* the results-region + chart-card read-failure line (resultsRetry / retryCard) */
.ana-loadfail { margin: 0; padding: 6px 2px; }
/* R9 (4) — THE MERCHANT LINE. A merchant is a leaf: a bar drawn against its own parent could only ever say
"this is some of that", and against income it would say nothing about the fan it sits in. So it is a quiet
indented line with the numbers right beside the name in lighter ink — tools/merch-rows-mock.src.html,
ratified 2026-08-12. Still a GRID (not flex) so a swatched card's reserved gutter lines up cell-for-cell
with the bar rows above it. */
.ana-bdrow--mline { grid-template-columns: minmax(0, max-content) max-content; justify-content: start; align-items: baseline; padding: 6px 6px; }
.ana-bdrow--sw.ana-bdrow--mline { grid-template-columns: 10px minmax(0, max-content) max-content; }
.ana-bdrow--mline .ana-bdrow__name { color: var(--text-secondary); font-size: 13px; }
.ana-bdrow--mline .ana-bdrow__amt { color: var(--text-secondary); font-size: 13px; min-width: 0; text-align: left; }
.ana-bdrow__mnum { min-width: 0; color: var(--text-tertiary); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ana-bdrow__mpct { color: var(--text-tertiary); }
/* R10 (SW v340) — THE REIMBURSEMENT LINE-ITEM. v330's gold SENTENCE ("incl. X returned") is retired from
every list; the money that came back is now a row like the shops above it, in the same quiet --mline
shape at the same indent, so the fan reads as one column of numbers that adds up. GOLD is the ratified
colour for money returned (§3) — deliberately NOT the red of --fill--neg, even though the amount is
drawn negative: red is reserved for a genuine zero-or-below boundary and money coming back is not one.
The Sankey keeps the sentence (a ribbon fan cannot draw a negative band). */
.ana-bdrow--reimb .ana-bdrow__name,
.ana-bdrow--reimb .ana-bdrow__amt,
.ana-bdrow--reimb .ana-bdrow__mnum { color: var(--accent-gold); }
/* v326: the grain toggle ("Categories | Groups"). v367: it rehomed out of the retired List's Spending peek
onto the "Where it went" card itself, so it is a plain block in the card rather than an indented row. */
.ana-bifurgrain { padding: 6px 6px 8px 0; }
.ana-bifurgrain .dash-seg { display: inline-flex; }
/* R9 (2): the name is a real grid CELL now — it wraps inside itself instead of ellipsing, and nothing it does
can move the bar, the % or the amount. (The old `flex: 0 0 34%` + nowrap + ellipsis is gone with the flex row.) */
.ana-bdrow__name { min-width: 0; color: var(--text-primary); overflow-wrap: break-word; }
/* R9 (1): the hatched remainder TRACK IS GONE — no background, no border, no hatch. The colour fill just ends
against the card. (The Intentions hatches — .intent-meter__seg--free, .intent-track__seg--left/--past/--over,
.intent-hist__* — are a separately-ratified surface and are deliberately left byte-identical.) */
.ana-bdrow__barwrap { height: 14px; min-width: 40px; position: relative; }
.ana-bdrow__fill { display: block; height: 100%; border-radius: 2px; }
.ana-bdrow__fill--out { background: var(--accent-out); }
.ana-bdrow__fill--in { background: var(--accent-teal); }
.ana-bdrow__fill--gold { background: var(--accent-gold); }
.ana-bdrow__fill--neg { background: var(--accent-red); } /* §4 fix #1 — a below-zero row (e.g. negative liquid) */
/* R9 (5): nesting must read at a glance — a SUB-row's bar is a lighter tint of its own family colour. Derived
by LIGHTNESS only (the outShade precedent): no new semantic colour, so a child can never mean something the
palette has not already agreed on. */
.ana-bdrow__fill--tint { opacity: .55; }
.ana-bdrow__pct { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
/* review round 1 · item 3a: the optional leading colour chip (Everything donut, Spending slice split open).
R9 (6): --space is the SAME cell with no colour — a swatched card's peek children reserve the gutter, so
every row's bar/%/amount stays at one x whether or not that row carries a chip. */
.ana-bdrow__sw { width: 10px; height: 10px; border-radius: 2.5px; align-self: center; }
.ana-bdrow__sw--space { background: none; }
/* review round 1 · item 4 (the human: "the minus sign lands on its own line"). The ASCII hyphen in
"-A$2,284.67" is a UAX#14 break opportunity, so with no white-space rule the negative wrapped straight
after the minus while a positive of the same width merely overflowed — two different wrong answers to the
same problem, which is why the amount column looked misaligned at 5-7 digits. nowrap forbids the break;
flex 0 1 auto + a 92px MINIMUM keeps the old alignment for ordinary amounts and lets a genuinely wider one
take the room it needs (min-width:0 had to go — it is what let the box shrink below its own content).
R9: the flex basis is gone with the flex row — the 92px minimum now lives in the grid TEMPLATE
(`minmax(92px, max-content)`), which does the same job and additionally lets a genuinely wider amount take
the room it needs without ever shrinking the bar below its own min-width. */
.ana-bdrow__amt { white-space: nowrap; text-align: right; color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.ana-leafhint { margin-bottom: 8px; }
/* R1: breakdown SHAPES — donut + table + the shape dropdown */
.ana-shapedd .dropdown__trigger { min-width: 110px; }
.ana-donutwrap { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.ana-donut { width: 184px; height: 184px; flex: none; }
/* v328: the Everything donut — a non-square viewBox (360×300) so the "income" mark fits; sized by width,
height auto (never the .ana-donut fixed square). Slices/segments are tappable (split-in-place).
R4 (v333): when the month spent past its income the svg keeps its width and GROWS its viewBox upward
(and, on a very large overspend, downward) to hold the second lap riding outside the ring plus the income
mark above it — so `height: auto` simply draws a slightly taller card. Nothing here needs to know the
numbers; the geometry lives in analysis.js everythingDonut. */
/* review round 1 · item 2 (the human: "a transparent green/grey box flashes over the donut on a longer tap").
Nothing suppressed the platform tap-highlight / long-press selection + callout, so a slow tap on a slice
painted the OS highlight rectangle over the artwork and offered a text selection of the SVG. Both donuts in
the family get the same treatment — they are tap surfaces, not text. */
.ana-edonut, .ana-donut { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ana-edonut { width: min(100%, 300px); height: auto; flex: 0 1 300px; touch-action: manipulation; }
.ana-edonut .face { cursor: pointer; transition: filter .14s; }
.ana-edonut .face:hover { filter: brightness(1.09); }
.ana-edonut__open { animation: ana-edpop .24s ease; }
@keyframes ana-edpop { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ana-edonut .face { transition: none; } .ana-edonut__open { animation: none; } }
.ana-donut__total { fill: var(--text-primary); font-size: 20px; font-family: var(--font-mono, inherit); font-weight: 500; }
.ana-donutlegend { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ana-dlrow { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.ana-dlrow:last-child { border-bottom: none; }
.ana-dl__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; align-self: center; }
/* v376: a legend row whose colour is no longer in the ring (Spending, while the ring is drilled into its
categories) keeps the row and drops the dot — the label still lines up with its swatched siblings. */
.ana-dlrow--nodot { padding-left: 21px; }
.ana-dl__lbl { flex: 1 1 auto; min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-dl__pct { flex: 0 0 40px; text-align: right; font-size: 12px; }
.ana-dl__amt { flex: 0 1 auto; min-width: 76px; text-align: right; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* R3: interactive chart tooltip. S8 "tooltip z-index fix": was 80 — a tap/hover on a chart element INSIDE the
per-chart expand overlay (.ana-expand, z-index 90) still needs its tooltip visible, so this now paints above
the overlay (96 > 90); nothing else in the app uses 81-95, so the gap is deliberate headroom. */
.ana-tip { position: fixed; z-index: 96; pointer-events: none; max-width: 260px; padding: 8px 11px;
background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px;
box-shadow: 0 6px 22px rgba(0,0,0,0.45); font-size: 13px; }
.ana-tip__lbl { color: var(--text-primary); font-weight: 500; margin-bottom: 2px; }
.ana-tip__amt { color: var(--text-primary); font-family: var(--font-mono, inherit); }
.ana-tip__meta { font-size: 11px; margin-top: 3px; }
/* v349 ④ — THE TOOLTIP CARET (human-ratified 2026-08-13, "wherever I can choose"). A floating card that
merely appeared NEAR the pointer never said WHICH mark it was about — on a dense grouped bar chart, or a
donut whose slices meet, the reader had to infer it. A small triangle now points back at the exact bar /
dot / slice under the pointer. It is drawn in two halves so the 1px border shows: an outer triangle in
the border colour with an inner one in the card's own background sitting 1px inside it. The caret slides
along the card's edge to stay over the mark even when the card is clamped against a screen edge, and it
flips to the top edge when the card has to sit BELOW the mark (no room above).
v389 — THE GEOMETRY IS NOW `.hui-caret`, ONE BLOCK FOR EVERY CHART TOOLTIP (the drift/usual-ranges tip
gained a caret this round, and the queued "caret everywhere incl. donut" item becomes call sites rather
than copies). Each tooltip keeps its OWN identity class beside it (.ana-tip__caret / .drift-tip__caret)
— that is the hook a test or a future per-surface tweak reads; the triangle itself is drawn once here.
JS half: HUI.chartHit.placeTip (app.js), whose CARET_HALF must stay equal to the 7px border below. */
.hui-caret { position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; }
.hui-caret::after { content: ''; position: absolute; left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.hui-caret--down { bottom: -7px; border-top: 7px solid var(--border-strong); }
.hui-caret--down::after { top: -8px; border-top: 6px solid var(--bg-elevated); }
.hui-caret--up { top: -7px; border-bottom: 7px solid var(--border-strong); }
.hui-caret--up::after { bottom: -8px; border-bottom: 6px solid var(--bg-elevated); }
/* ── v392 — A CHART HIT SURFACE WEARS NO PLATFORM TAP-HIGHLIGHT ────────────────────────────────────
The human, on the forecast day-by-day trace: every tooltip tap flashes the mobile browser's grey
rectangle. The rectangle is drawn over the element that handled the tap, and on a chart that is the
whole