:root {
--bg: #F2F2F2;
--surface: #FFFFFF;
--surface-solid: #FFFFFF;
--glass-border: rgba(0,0,0,0.06);
--glass-border-dark: rgba(0,0,0,0.06);
--border: #E2E2E2;
--text: #1A1A1A;
--text-secondary: #5E5E5E;
/* #9A9A9A measured 2.81:1 on white — well under the 4.5 floor for text
this size. #6A6A6A is 5.4:1 on white and 4.8:1 on the --bg tint,
which is what most of this text actually sits on. (Pre-existing, not
introduced by the true-black work; surfaced by measuring rather than
eyeballing.) */
/* Tertiary is no longer a separate text grey (Quiet Ledger): one secondary grey explains, ink states. */
--text-tertiary: #5E5E5E;
/* --ink = structural near-black (text, borders, structural chrome).
--accent = the single chromatic action color (active/primary states only).
Palette: indigo #23004C, red-orange #DA3A16, violet #7A00E6,
teal-blue #007FAD, magenta #D515B9, green #268500. */
--ink: #1A1A1A;
--accent: #23004C;
--accent-inverse: #FFFFFF;
--accent-soft: rgba(35,0,76,0.08);
--danger: #DA3A16;
--danger-soft: rgba(218,58,22,0.08);
--success: #268500;
--success-soft: rgba(38,133,0,0.08);
--warning: #C9943A;
--warning-soft: rgba(201,148,58,0.10);
/* Status-icon-only accents (Color Schema 1) — teal-blue for exchange
initiated, violet for exchange completed. Not used as general UI
chrome color, only for refund/exchange status icons. */
--teal-blue: #007FAD;
--teal-blue-soft: rgba(0,127,173,0.08);
--violet: #7A00E6;
--violet-soft: rgba(122,0,230,0.08);
/* The sixth palette entry. It was named in the comment above but never
had a token, so the one place that wanted it would have had to
hard-code a hex. */
--magenta: #D515B9;
--magenta-soft: rgba(213,21,185,0.08);
/* Corner radius — a first-class One UI signature, not an afterthought.
The old 8/10/12/16 scale is the generic-web default range, and it is
the single most common reason a One UI attempt reads as stock
Material instead. Measured before the change: 28 elements at 8px on
History alone, nothing anywhere above 16px.
Nesting is exact, not approximate — an inner radius must equal the
outer radius minus the padding between them or the curves visibly
disagree: .segmented (md 18, pad 3) -> .segmented-btn ~15 ≈ sm 14,
.type-toggle (md 18, pad 4) -> .type-btn 14 = sm, .header-menu
(md 18, pad 4) -> item 14 = sm. Changing one means rechecking its pair. */
--radius-sm: 14px; /* chips, small buttons, menu items */
--radius-md: 18px; /* inputs, popovers, segmented tracks */
--radius-lg: 22px; /* cards and list items */
--radius-xl: 28px; /* sheets and large surfaces */
--radius-2xl: 32px; /* bottom-sheet top corners */
--radius-pill: 50px;
/* Spacing scale (4px base) */
/* Six-step type scale (round seven, board 34): 18 distinct font sizes had
drifted in, none through a token. Form fields take --fs-input, 16px,
because iOS zooms the page into any field smaller than that. */
/* Quiet Ledger scale (2026-09-16): caption 12, secondary 14, body 16,
title 20, page title 28, and the typed amount at 40. Nothing a person
reads as a sentence or a value is under 14. Was 11/12/13/15/22/32. */
--fs-12: 0.75rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-20: 1.25rem;
--fs-28: 1.75rem;
--fs-figure: 2.5rem;
--fs-input: 1rem;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-6: 24px;
/* Unified soft-elevation scale (replaces the glass + neumorphic systems) */
--elev-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
--elev-2: 0 4px 14px rgba(0,0,0,0.06);
--elev-3: 0 12px 30px rgba(0,0,0,0.10);
--inset: inset 0 1px 2px rgba(0,0,0,0.05);
/* Legacy aliases — point every old shadow name at the new scale so any
missed reference still renders coherently. */
--shadow-glass: var(--elev-2);
--shadow-neu: var(--elev-1);
--shadow-neu-inset: var(--inset);
--shadow-soft: var(--elev-1);
--shadow-hover: var(--elev-3);
--transition: 180ms cubic-bezier(0.22,0.25,0,1);
/* The One UI macro curve. Every control point stays inside [0,1], so it
decelerates hard into its resting position and STOPS there — no
overshoot, no bounce-back. That is the whole difference from what was
here before (0.34/1.56/0.64/1), whose 1.56 sent every menu, chip, dock
icon and toast past its target and back. One UI content settles; it
does not spring.
NOTE: these are duration+easing PAIRS. Dropping one into an
`animation:` shorthand that already carries a duration yields two time
values, so the pair's duration silently becomes a DELAY — and adding a
third makes the whole declaration invalid, i.e. animation:none. Always
spell the curve out when a delay is also wanted. */
--ease-settle: 340ms cubic-bezier(0.22,0.25,0,1);
/* Legacy alias — the name is a lie now, kept because it is referenced
throughout and repointing beats a risky sweep. Same pattern as the
--shadow-* aliases above. */
--ease-spring: var(--ease-settle);
--ease-out: 260ms cubic-bezier(0.16,1,0.3,1);
/* Text that carries a state (round seven, board 31). On the light
ground --danger measures 4.08:1, --success 3.8-4.7:1 and --warning
2.4:1 as text, so state words read in --text there and the colour
moves to a border, bar, dot or sign beside them. On true black every
state colour clears 4.5:1, so dark keeps coloured words. No new
colours: each ink is one of the existing tokens. */
--danger-ink: var(--text);
--success-ink: var(--text);
--warning-ink: var(--text);
}
/* One UI's dark theme is a true-black AMOLED theme, not a dark-grey one —
on the OLED panels these phones ship with, #000 pixels are simply off,
which is where the depth comes from. #0D0D0D looked black on an LCD
preview and merely dark on the actual hardware.
Surface lifted 1A -> 1C at the same time so cards keep separating from
the page now that the page is fully black. */
[data-theme="dark"] {
--bg: #000000;
--surface: #1C1C1C;
--surface-solid: #1C1C1C;
--glass-border: rgba(255,255,255,0.08);
--glass-border-dark: rgba(255,255,255,0.07);
--border: #2A2A2A;
--text: #F0F0F0;
--text-secondary: #A0A0A0;
/* 3.34:1 on the card surface at #6E6E6E; #8A8A8A is 4.9:1. */
--text-tertiary: #A0A0A0;
--ink: #F0F0F0;
--accent: #A07CFF;
--accent-inverse: #1A0938;
--accent-soft: rgba(160,124,255,0.14);
--danger: #F0714C;
--danger-soft: rgba(240,113,76,0.14);
--success: #5DBF3A;
--success-soft: rgba(93,191,58,0.14);
--warning: #D9A94E;
--warning-soft: rgba(217,169,78,0.14);
--teal-blue: #4DC8E8;
--teal-blue-soft: rgba(77,200,232,0.14);
--violet: #C48FFF;
--violet-soft: rgba(196,143,255,0.14);
--magenta: #F06FDC;
--magenta-soft: rgba(240,111,220,0.14);
--danger-ink: var(--danger);
--success-ink: var(--success);
--warning-ink: var(--warning);
/* White on --danger is 2.93:1 in dark; the accent's dark ink clears it. */
--badge-ink: var(--accent-inverse);
--elev-1: 0 1px 2px rgba(0,0,0,0.4);
--elev-2: 0 4px 14px rgba(0,0,0,0.45);
--elev-3: 0 12px 30px rgba(0,0,0,0.55);
--inset: inset 0 1px 2px rgba(0,0,0,0.5);
--shadow-glass: var(--elev-2);
--shadow-neu: var(--elev-1);
--shadow-neu-inset: var(--inset);
--shadow-soft: var(--elev-1);
--shadow-hover: var(--elev-3);
}
/* Noto Sans, self-hosted (Quiet Ledger, 2026-09-16). Two subset files from Google Fonts v42,
SIL Open Font License: Latin, and Devanagari, which carries the rupee sign. Both are precached
by the service worker, so the face works offline; the system stack stands in until they load. */
@font-face {
font-family:'Noto Sans'; font-style:normal; font-weight:400 600; font-stretch:100%; font-display:swap;
src:url('noto-sans-latin.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;
}
@font-face {
font-family:'Noto Sans'; font-style:normal; font-weight:400 600; font-stretch:100%; font-display:swap;
src:url('noto-sans-devanagari.woff2') format('woff2');
unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; overflow:hidden; }
body {
/* System font stack (§3): iOS/macOS render SF, Android renders Roboto,
Windows Segoe. 'Inter' used to lead this list but the repo ships no
@font-face and no inter-var.woff2, so it only ever resolved for the
rare user with Inter installed locally — meaning the app rendered in
a different typeface for them than for everyone else. Dropping it
makes the platform font the deliberate choice rather than an
accident of what happens to be installed. */
/* Roboto is pulled ahead of Segoe UI because it is what One UI devices
actually render and it shares One UI's geometric, slightly-rounded
letterforms. In practice system-ui still wins on every platform that
supports it (Roboto on Android, SF on iOS, Segoe on Windows), so this
is about stating the intent for the fallback path — Samsung's own
SamsungOne/SharpSans are not licensed for the web and are not an
option here. */
/* Quiet Ledger: Noto Sans on every device, so a row wraps at the same width on a phone
and a laptop; the platform face is the fallback until the files load. */
font-family:'Noto Sans',system-ui,Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:var(--bg); color:var(--text); height:100%; line-height:1.45;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
overscroll-behavior-y:none; font-size:var(--fs-16); font-weight:400;
font-feature-settings:'cv05' 1, 'ss01' 1, 'cv11' 1; text-rendering:optimizeLegibility;
}
/* Money & metric values get tabular, slashed-zero numerals for clean column alignment. */
.progress-value, .tx-amount, .report-value, .add-hero-input {
font-feature-settings:'tnum' 1, 'zero' 1; font-variant-numeric:tabular-nums slashed-zero;
}
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.app { height:100%; display:flex; flex-direction:column; max-width:720px; margin:0 auto; position:relative; }
/* ── Desktop layout ───────────────────────────────────────────────────
At 1440px the 720px shell used 48% of the window with ~374px of dead
gutter each side — the "stretched mobile layout" anti-pattern, where
extra width buys bigger margins instead of more content.
The shell now grows in steps, and the width is spent on CONTENT:
Home and Lifecycle flow their independent cards into two columns, so
more is visible at once. Surfaces that would read worse wide are
constrained individually instead — a form and a list have a natural
comfortable measure, and stretching them to 1280px would be its own
anti-pattern. The Plan tab keeps the full shell because its annual
table genuinely wants the room. */
@media (min-width:1100px) {
.app { max-width:1100px; }
/* Multicol rather than grid: cards differ in height, so column flow
packs them without the ragged gaps a 2-row grid would leave. */
#homeSection, #trackSection > #trackList { column-count:2; column-gap:var(--sp-4); }
#homeSection > *, #trackSection > #trackList > * { break-inside:avoid; -webkit-column-break-inside:avoid; }
/* Entry form keeps a comfortable measure — a 1100px-wide form is worse
than a 640px one, not better. */
#addSection { max-width:640px; margin-inline:auto; }
/* Long rows with the amount far from the label are hard to scan. */
#historySection { max-width:900px; margin-inline:auto; }
}
@media (min-width:1600px) {
.app { max-width:1280px; }
#homeSection { column-count:3; }
}
/* NOTE: the desktop navigation rail (D5) lives further down the file,
immediately after the base .dock / .main-scroll rules it overrides —
media queries add no specificity, so it has to come later in source
order to win. Putting it here would silently lose. */
/* Header */
.app-header {
position:sticky; top:0; z-index:50; background:var(--surface);
border-bottom:1px solid var(--glass-border-dark); padding:calc(12px + env(safe-area-inset-top)) 16px 12px; flex-shrink:0;
}
.header-bar { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.header-controls { display:flex; align-items:center; gap:var(--sp-1); flex-shrink:0; max-width:100%; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; padding-right:2px; }
.header-controls::-webkit-scrollbar { display:none; }
.header-menu {
position:absolute; z-index:900;
background:var(--surface-solid); border:1px solid var(--glass-border-dark); border-radius:var(--radius-md);
box-shadow:var(--shadow-glass); min-width:160px; max-width:min(260px, calc(100% - 20px)); display:none; flex-direction:column; padding:var(--sp-1);
transform-origin:top right;
animation:menuPop 0.28s cubic-bezier(0.22,0.25,0,1);
}
.header-menu.active { display:flex; }
/* Popovers spring open from their anchor corner. */
@keyframes menuPop { from { opacity:0; transform:scale(0.88) translateY(-6px); } to { opacity:1; transform:scale(1) translateY(0); } }
.header-menu-item {
display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 10px; border-radius:var(--radius-sm);
background:transparent; border:none; color:var(--text-secondary); font-size:var(--fs-14); font-weight:500;
cursor:pointer; font-family:inherit; transition:var(--transition); text-align:left; white-space:nowrap;
}
.header-menu-item:hover, .header-menu-item:active { background:var(--bg); color:var(--text); }
.header-menu-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.brand { display:flex; align-items:center; gap:var(--sp-2); min-width:0; flex-shrink:1; }
.brand-icon {
width:28px; height:28px; border-radius:11px; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #000)); color:var(--accent-inverse);
display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-soft);
}
.brand-text h1 { font-size:var(--fs-16); font-weight:600; letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text { min-width:0; overflow:hidden; }
.icon-btn {
width:32px; height:32px; border-radius:50%; border:1px solid var(--glass-border-dark);
background:var(--surface); color:var(--text-secondary); display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:var(--transition); flex-shrink:0;
}
@media (hover:hover) { .icon-btn:hover { background:var(--bg); color:var(--text); } }
.icon-btn:active { background:var(--accent-soft); transform:scale(0.95); }
.icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:480px) {
.app-header { padding:var(--sp-2) 10px; }
.header-bar { gap:var(--sp-1); }
.brand-icon { width:26px; height:26px; }
.brand-text h1 { font-size:var(--fs-14); }
.header-controls { gap:2px; }
.icon-btn { width:28px; height:28px; }
.icon-btn svg { width:14px; height:14px; }
.header-controls .chip { padding:3px 6px !important; font-size:var(--fs-14) !important; }
}
@media (max-width:360px) {
.brand-text { display:none; }
}
/* Main scroll */
/* Top padding lives on the sections, not the scroller: a position:sticky
child pins at the scroller's CONTENT edge, so scroller padding would
leave a strip above every pinned day header for rows to scroll through. */
.main-scroll { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:0 var(--sp-4); padding-bottom:calc(140px + env(safe-area-inset-bottom)); }
.main-scroll > section { padding-top:var(--sp-4); }
/* Dock */
.dock {
position:fixed; bottom:calc(10px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:100;
display:flex; gap:2px; background:var(--surface);
border:1px solid var(--glass-border); border-radius:var(--radius-pill); padding:var(--sp-1) 6px; box-shadow:var(--shadow-glass);
}
.dock-btn {
position:relative;
width:58px; height:40px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--text-secondary);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer;
font-family:inherit; font-size:var(--fs-12); font-weight:600; letter-spacing:0.03em; transition:color var(--transition), background var(--ease-spring);
}
/* Restock-alert count bubble on the Lifecycle dock icon. */
.dock-badge {
position:absolute; top:2px; right:8px; min-width:14px; height:14px; padding:0 var(--sp-1);
border-radius:999px; background:var(--danger); color:var(--badge-ink, #fff); font-size:var(--fs-12); font-weight:600;
display:flex; align-items:center; justify-content:center; line-height:1; pointer-events:none;
box-shadow:0 0 0 2px var(--surface-solid);
animation:badgePop 0.35s cubic-bezier(0.22,0.25,0,1);
}
@keyframes badgePop { from { transform:scale(0); } to { transform:scale(1); } }
/* Per-item restock blob in the Lifecycle list (color set inline: red for
<=1 day / past due, orange for the rest of the 5-day window). */
.lc-blob {
display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; flex-shrink:0;
vertical-align:middle; animation:blobPulse 2s ease-in-out infinite;
}
@keyframes blobPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
.dock-btn .dock-icon { display:flex; align-items:center; justify-content:center; transition:transform var(--ease-spring); }
.dock-btn.on { background:var(--accent); color:var(--accent-inverse); box-shadow:var(--shadow-soft); }
.dock-btn.on .dock-icon { transform:translateY(-1px) scale(1.05); animation:dockPop 0.4s cubic-bezier(0.22,0.25,0,1); }
/* Monotonic grow. The old middle keyframe punched to scale(1.22) and fell
back to 1.05 — a bounce on top of an already-bouncy curve, which read as
a Material ripple-pop rather than a One UI selection settle. */
@keyframes dockPop { 0% { transform:translateY(-1px) scale(0.88); } 100% { transform:translateY(-1px) scale(1.05); } }
/* ── Desktop navigation rail (D5) ──────────────────────────────────────
A fixed bottom dock is a phone idiom; a desktop app of this shape puts
navigation down the side. Deliberately a PURE CSS restyle of the SAME
element — markup, dock-button order, the swipe-gesture tab map and the
Lifecycle alert badge are all untouched, so none of that logic needed
re-verifying.
Gated at 1340px for a measured geometric reason: the shell is centred at
max-width 1100, so the side gutter is (viewport-1100)/2. The rail
occupies x=16..88. At 1280 the gutter is 90px, leaving just 2px of
clearance — non-overlapping but close enough that a font or zoom change
could tip it. At 1340 the gutter is 120px, giving ~32px of real
breathing room. Below this width the bottom dock stays exactly as it is.
Placement matters, and it was got WRONG here once already: a media query
carries no extra specificity, so this block has to sit after EVERY base
rule it overrides — including the .dock-fab rules below, not only .dock
and .main-scroll. It originally sat above them, so the rail's
`margin:2px 0` lost to the base `margin-top:-22px` and the FAB rode 18px
up into the "Plan" label on desktop. The block now lives immediately
after .dock-fab:focus-visible, which is the last of them. */
.dock-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-pill); }
.dock-fab {
width:52px; height:52px; margin:0 var(--sp-1); margin-top:-22px; border-radius:50%; border:none; cursor:pointer;
background:var(--accent); color:var(--accent-inverse);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
box-shadow:0 6px 16px rgba(0,0,0,0.28); transition:transform var(--ease-spring), box-shadow var(--transition);
}
@media (hover:hover) { .dock-fab:hover { box-shadow:0 8px 22px rgba(0,0,0,0.34); transform:translateY(-1px); } }
/* Softened from scale(0.90) rotate(90deg). A quarter-turn spin on press is
a playful Material flourish, not the calm, unhurried feedback One UI
gives; halving the rotation keeps the character without the drama. */
.dock-fab:active { transform:scale(0.94) rotate(45deg); filter:brightness(0.94); }
.dock-fab svg { transition:transform var(--ease-spring); }
.dock-fab:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
/* ── Desktop navigation rail (see the note above .dock-btn:focus-visible) ──
Must stay BELOW every base .dock / .dock-btn / .dock-fab / .main-scroll
rule. Anything added to those after this point will silently win. */
@media (min-width:1340px) {
.dock {
left:16px; top:50%; bottom:auto;
transform:translateY(-50%);
flex-direction:column; gap:var(--sp-1);
border-radius:var(--radius-lg); padding:6px 5px;
}
.dock-btn { width:58px; height:50px; }
/* FAB sits inline in the column rather than breaking the rhythm. The
margin reset is the whole point: the base rule lifts the FAB with a
negative top margin so it floats above a HORIZONTAL bar, and in a
vertical rail that same lift just drags it onto its upstairs
neighbour. Longhand `margin-top` too, because the base rule sets it
longhand after its own shorthand. */
.dock-fab { width:50px; height:50px; margin:2px 0; margin-top:2px; }
.dock-fab svg { width:22px; height:22px; }
/* The 140px reserved for a bottom dock is dead space once nav moves aside. */
.main-scroll { padding-bottom:32px; }
/* The mobile pass expanded these hit areas vertically only, to avoid
colliding with horizontal neighbours. In a vertical rail the
neighbours are above/below instead, so grow horizontally here. */
.dock-btn::after { left:-4px; right:-4px; height:50px; }
}
/* Cards */
.card {
background:var(--surface); border:1px solid var(--glass-border);
border-radius:var(--radius-lg); padding:var(--sp-4); transition:transform var(--transition), box-shadow var(--transition);
animation:enter 0.25s var(--ease-out) backwards; overflow:hidden;
}
@media (hover:hover) {
.card:hover { border-color:var(--glass-border-dark); }
}
/* Staggered reveal: each block in a section eases in slightly after the
last. 0.25s with the stagger capped at 0.12s — the audited 0.5s + 0.30s
stagger with a `backwards` fill left the last section invisible for
0.8s on EVERY visit (design-audit-2026-09.md D1). The data is already
in memory; the wait was pure choreography. */
#homeSection > .card, #homeSection > .section { animation:enter 0.25s var(--ease-out) backwards; }
#homeSection > *:nth-child(1) { animation-delay:0.02s; }
#homeSection > *:nth-child(2) { animation-delay:0.04s; }
#homeSection > *:nth-child(3) { animation-delay:0.06s; }
#homeSection > *:nth-child(4) { animation-delay:0.08s; }
#homeSection > *:nth-child(5) { animation-delay:0.10s; }
#homeSection > *:nth-child(n+6) { animation-delay:0.12s; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
/* The entrance plays ONCE per tab per launch. setTab marks a section
.entered on every RE-visit; from then on its blocks render instantly
(this also stops in-tab re-renders — every save used to replay the
card entrance) and the whole pane gets one quiet 120ms fade instead.
The #homeSection variants exist because the base stagger rule carries
ID specificity, which a class-only override can never beat regardless
of source order. */
section.entered .card, section.entered > * { animation:none; }
#homeSection.entered > .card, #homeSection.entered > .section, #homeSection.entered > * { animation:none; }
section.entered.revisit { animation:fadeIn 0.12s var(--ease-out); }
/* The section ids carry the entrance animation, and an id outranks
.entered.revisit, so a re-visit replayed the 240ms slide (board 21). */
#addSection.entered.revisit, #planSection.entered.revisit, #historySection.entered.revisit, #trackSection.entered.revisit, #reportsSection.entered.revisit { animation:fadeIn 0.12s cubic-bezier(0.16,1,0.3,1); }
/* Delivery view. Two stat cells rather than the Lifecycle view's four,
so the grid is declared here instead of inline; everything else reuses
.track-stat-cell so the two views read as one screen. */
.delivery-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; text-align:center; }
.delivery-stat-label { font-size:var(--fs-12); color:var(--text-secondary); font-weight:600; text-transform:none; letter-spacing:0; }
.delivery-stat-value { font-size:var(--fs-16); font-weight:600; }
.delivery-card { margin-bottom:var(--sp-2); cursor:pointer; }
.delivery-meta {
display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; margin-top:2px;
}
.delivery-badge--pending { background:var(--warning-soft, var(--bg)); color:var(--warning-ink); border-color:var(--warning); }
.delivery-badge--delivered { background:var(--success-soft); color:var(--success-ink); border-color:var(--success); }
/* Lifecycle Overdue exits + completion labels. The strip lives inside a
tap-to-edit card, so buttons swallow their own clicks; .btn already
carries the 44px floor. */
.lc-actions { display:flex; gap:var(--sp-2); margin-top:10px; }
.lc-action-btn { flex:1; justify-content:center; font-size:var(--fs-14); padding:var(--sp-2) 10px; }
.lc-action-undo { color:var(--text-secondary); }
.lc-comp-badge { background:var(--bg); color:var(--text-secondary); border-color:var(--glass-border-dark); }
/* Settings sheet (design prototypes, board 7): grouped rows, one place. */
.settings-body { padding:var(--sp-1) var(--sp-3) var(--sp-4); }
.settings-group { margin:10px 0 14px; }
.settings-group-title { font-size:var(--fs-12); font-weight:600; color:var(--text-tertiary); text-transform:none; letter-spacing:0; margin:0 2px 6px; }
.settings-card { background:var(--surface); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:0 14px; }
.settings-row {
display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:52px; padding:6px 0;
border:none; border-top:1px solid var(--glass-border); background:transparent; color:var(--text);
font-family:inherit; text-align:left; cursor:pointer;
}
.settings-row:first-child { border-top:none; }
.settings-icon {
width:32px; height:32px; border-radius:11px; background:var(--bg); border:1px solid var(--glass-border-dark);
color:var(--text-secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.settings-icon svg { width:16px; height:16px; }
.settings-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.settings-name { font-size:var(--fs-16); font-weight:600; }
.settings-sub { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; }
.settings-right { color:var(--text-secondary); font-size:var(--fs-14); font-weight:600; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.settings-right svg { width:14px; height:14px; }
/* Lifecycle card, ring layout (design prototypes, board 5). */
.lc-row { display:flex; align-items:center; gap:var(--sp-3); }
.lc-ring { width:34px; height:34px; flex-shrink:0; }
.lc-main { flex:1; min-width:0; }
.lc-meta { font-size:var(--fs-14); color:var(--text-secondary); font-weight:500; margin-top:2px; }
.lc-meta--faint { color:var(--text-tertiary); }
.lc-days { font-weight:600; }
.lc-badges { display:inline-flex; gap:var(--sp-1); align-items:center; flex-shrink:0; }
.lc-focus { outline:2px solid var(--accent); outline-offset:2px; }
/* Due-soon strip: the tab's headline, one tap from its card. */
.lc-due-strip {
display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3);
border-radius:var(--radius-sm); border:1px solid var(--warning); background:var(--warning-soft);
color:var(--text); font-family:inherit; font-size:var(--fs-14); font-weight:500; text-align:left; cursor:pointer;
}
.lc-due-strip b { font-weight:600; }
.lc-due-strip svg { width:16px; height:16px; margin-left:auto; color:var(--text-secondary); flex-shrink:0; }
.lc-due-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
/* Overdue strip (round-two board 7): the item, and Restock beside it. */
.lc-overdue-strip {
display:flex; align-items:center; gap:6px; min-height:44px; padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); margin-bottom:var(--sp-2);
border-radius:var(--radius-sm); border:1px solid var(--danger); background:var(--danger-soft); font-size:var(--fs-14);
}
.lc-overdue-text { flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:36px; background:none; border:0; padding:0; color:var(--text); font:inherit; font-size:var(--fs-14); font-weight:500; text-align:left; cursor:pointer; }
.lc-overdue-text b { font-weight:600; }
.lc-overdue-restock { min-height:36px; padding:0 10px; border-radius:var(--radius-pill); border:0; background:var(--danger); color:#fff; font:inherit; font-size:var(--fs-14); font-weight:600; white-space:nowrap; cursor:pointer; flex-shrink:0; }
.lc-overdue-strip + .lc-due-strip { margin-top:0; }
/* Stat cell words never wrap. */
.track-stat-label { font-size:var(--fs-12); color:var(--text-secondary); font-weight:600; text-transform:none; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Category group headers cost less: 8px above, 4px below (was 14/6). */
@media (max-width:1099px) {
#trackList .lc-cat-header { margin:var(--sp-2) 0 var(--sp-1); }
#trackList .lc-cat-header:first-child { margin-top:2px; }
}
/* Reorder mode on the stats card: arrows and a Done button appear only
after a long-press / right-click, so the default surface carries no
14px targets. */
.track-reorder-done { width:100%; margin-top:10px; }
.track-stats.reordering .track-stat-cell { border-style:dashed; border-color:var(--glass-border-dark); }
/* Single-line body for a ratios card with nothing to compare (D4). */
/* Every tab section eases in on entry (display:none -> block restarts the
animation, so this replays on each tab switch). Home's children already
stagger via `enter`, so it is excluded to avoid double motion. */
/* NOTE: --ease-out is "260ms cubic-bezier(...)" — a duration+easing pair,
not a bare easing — so it cannot be combined with an explicit delay in
an animation shorthand (three time values = invalid = animation:none).
These rules spell the easing function out instead. */
#addSection, #planSection, #historySection, #trackSection, #reportsSection {
animation:sectionEnter 0.24s cubic-bezier(0.16,1,0.3,1);
}
/* Add fades rather than slides: a transformed ancestor turns its fixed
Save bar into a positioned child for the length of the animation,
parking it mid-screen until the slide ends. */
#addSection {
animation-name:fadeIn;
}
@keyframes sectionEnter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
/* Line charts draw themselves in; the area fill fades up after the line
has mostly landed. pathLength="1" on the path normalizes the dash math. */
.chart-line { stroke-dasharray:1; animation:drawLine 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s backwards; }
@keyframes drawLine { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
/* ---- Bolder motion accents ---- */
/* Data dots pop in one after another, timed so each appears roughly as
the drawing line reaches it; value labels land after the draw. */
.chart-area svg circle { transform-box:fill-box; transform-origin:center; animation:dotPop 0.35s cubic-bezier(0.22,0.25,0,1) backwards; }
.chart-area svg circle:nth-of-type(1) { animation-delay:0.15s; }
.chart-area svg circle:nth-of-type(2) { animation-delay:0.26s; }
.chart-area svg circle:nth-of-type(3) { animation-delay:0.37s; }
.chart-area svg circle:nth-of-type(4) { animation-delay:0.48s; }
.chart-area svg circle:nth-of-type(5) { animation-delay:0.59s; }
.chart-area svg circle:nth-of-type(6) { animation-delay:0.70s; }
@keyframes dotPop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
.chart-value-label { animation:fadeIn 0.4s ease 0.75s backwards; }
/* Hero headline numbers focus in from a slight blur on Home entry. */
#homeSection .progress-value { animation:valueIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s backwards; }
@keyframes valueIn { from { opacity:0; filter:blur(3px); transform:translateY(4px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
/* Desktop: charts lift toward the cursor. */
@media (hover:hover) { .chart-card:hover { transform:translateY(-2px); box-shadow:var(--elev-2); } }
/* Event/Goal/Lifecycle list cards ease in with a tiny stagger on render
(covers create/delete/reorder — the list re-renders each time), and
press down on tap for touch feedback. */
#eventsList .card, #goalsList .card, #trackList .card { animation:enter 0.3s cubic-bezier(0.16,1,0.3,1) backwards; }
#eventsList .card:nth-child(2), #goalsList .card:nth-child(2), #trackList .card:nth-child(2) { animation-delay:0.04s; }
#eventsList .card:nth-child(3), #goalsList .card:nth-child(3), #trackList .card:nth-child(3) { animation-delay:0.08s; }
#eventsList .card:nth-child(n+4), #goalsList .card:nth-child(n+4), #trackList .card:nth-child(n+4) { animation-delay:0.12s; }
#eventsList .card:active, #goalsList .card:active, #trackList .card:active { transform:scale(0.985); }
/* Progress fills inside re-rendered lists grow to their value with a
clean ease-out — deliberately no overshoot, so a bar never visually
overstates its value mid-animation. (The Home hero bars persist in the
DOM and interpolate via their width transition instead.) */
#eventsList .progress-fill, #goalsList .progress-fill, #trackList .progress-fill {
transform-origin:left; animation:barGrow 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes barGrow { from { transform:scaleX(0); } }
/* History rows: render-scoped entrance. Only elements tagged .tx-enter
animate — the first screenful of a flagged render (tab entry or
filter/search change), staggered via inline delays. Everything below
the fold renders with no animation at all, so scrolling reveals rows
already in place instead of a bulk flash. A tighter 8px rise than the
generic `enter` keeps the cascade feeling calm at list density. */
/* One-by-one read: the 90ms inline stagger is a large fraction of this
duration, so each row is mostly landed before the next begins, instead
of the whole list moving as one wave. */
#historyList .tx-enter { animation:rowEnter 0.26s cubic-bezier(0.16,1,0.3,1) backwards; }
@keyframes rowEnter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
/* A just-added expense announces itself: stronger slide + a highlight
flash that fades out, distinct from the ambient stagger. */
#historyList .tx-history-row.tx-new { animation:txNew 0.7s cubic-bezier(0.16,1,0.3,1); }
@keyframes txNew {
0% { opacity:0; transform:translateX(-12px); background:var(--accent-soft); }
55% { opacity:1; transform:translateX(0); background:var(--accent-soft); }
100% { background:transparent; }
}
/* Edge-of-range nudge when a swipe can't go further. */
.edge-bounce-left { animation:edgeNudgeLeft 0.3s ease; }
.edge-bounce-right { animation:edgeNudgeRight 0.3s ease; }
@keyframes edgeNudgeLeft { 30% { transform:translateX(-8px); } }
@keyframes edgeNudgeRight { 30% { transform:translateX(8px); } }
@media (prefers-reduced-motion: reduce) {
.card, #homeSection > *,
#addSection, #planSection, #historySection, #trackSection, #reportsSection,
.chart-line, .card-info, .history-selection-bar,
.chart-area svg circle, .chart-value-label, #homeSection .progress-value,
.dock-btn.on .dock-icon, .chip.on, .add-chip.on,
.header-menu, .modal-overflow, .autocomplete-list.active,
.dock-badge, .lc-blob,
#eventsList .card, #goalsList .card, #trackList .card,
#eventsList .progress-fill, #goalsList .progress-fill, #trackList .progress-fill,
.edge-bounce-left, .edge-bounce-right,
#historyList .tx-enter,
#historyList .tx-history-row.tx-new { animation:none !important; }
.modal-panel, .tip { transition:none !important; }
/* Safety net behind the enumerated list above. The list stays because it
documents intent, but it can only cover motion someone remembered to
add to it, and a missed entry is an accessibility bug that no test
above would notice. Verified safe to apply globally: the app has zero
transitionend/animationend listeners, so nothing is waiting on a
transition to finish before it advances state. Not 0s — a hair of
duration still fires the events, so any future listener keeps working. */
*, *::before, *::after {
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
.progress-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--sp-3); }
.progress-label { font-size:var(--fs-12); font-weight:600; color:var(--text-secondary); letter-spacing:0; }
.progress-value { font-size:var(--fs-28); font-weight:600; color:var(--text); letter-spacing:-0.03em; line-height:1; }
.progress-track { height:6px; background:var(--border); border-radius:var(--radius-pill); overflow:hidden; box-shadow:var(--inset); }
.progress-fill { height:100%; background:var(--accent); border-radius:var(--radius-pill); transition:width 600ms var(--ease-out); position:relative; }
/* Subtle sheen sweep on the fill for a premium, alive feel */
.progress-fill::after {
content:''; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
transform:translateX(-100%); animation:sheen 2.6s cubic-bezier(0.16,1,0.3,1) 0.6s 1 both;
}
@media (prefers-reduced-motion: reduce) { .progress-fill::after { animation:none; } }
@keyframes sheen { 0% { transform:translateX(-100%); } 55%,100% { transform:translateX(100%); } }
.progress-fill.danger { background:var(--danger); }
.progress-fill.warning { background:var(--warning); }
/* Unified Home hero: progress + the three key stats in one surface. */
.hero-card { padding:20px 18px 18px; margin-bottom:14px; box-shadow:var(--elev-1); }
/* One line under the budget label: today's spend, count, daily average.
Replaces the Expense Log hero (design prototypes, Home). */
.hero-today { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; margin:-6px 0 10px; }
/* Plan · This month (round-two board 4) */
.plan-strip { padding:14px var(--sp-4); margin-bottom:var(--sp-3); }
.plan-strip-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.plan-strip-cell { border-left:2px solid var(--border); padding-left:10px; min-width:0; }
.plan-strip-cell--income { border-color:var(--success); } .plan-strip-cell--free { border-color:var(--accent); }
/* Sentence case (round seven, board 34): uppercase letter-spaced labels
came back after One UI A2 retired them, and truncated at 360-390px. */
.plan-strip-label { font-size:var(--fs-12); font-weight:600; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-strip-value { font-size:var(--fs-16); font-weight:600; letter-spacing:-0.03em; margin-top:var(--sp-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan-strip-cell--income .plan-strip-value { color:var(--success); }
.plan-strip-cell--free .plan-strip-value { color:var(--accent); }
.plan-strip-cell--free.over .plan-strip-value { color:var(--danger-ink); }
/* Income received against income expected (round six, board 2). */
.plan-income-in { height:3px; margin-top:5px; border-radius:var(--radius-pill); overflow:hidden; background:var(--border); }
.plan-income-in[hidden] { display:none; }
.plan-income-in-fill { height:100%; width:0; background:var(--success); transition:width 600ms var(--ease-out); }
/* ── Goals on the Saving row (round six, board 4) ── */
.goal-need-line1 { display:flex; align-items:center; flex-wrap:wrap; gap:6px var(--sp-2); }
.goal-need-line1 .goal-need-sum { margin:0; flex:1 1 180px; }
.goal-need-detail { margin-top:6px; }
.goal-need-detail[hidden] { display:none; }
.goal-need { margin:var(--sp-2) 0 var(--sp-1); padding:10px var(--sp-3); border:1px solid var(--glass-border-dark); border-radius:var(--radius-md); }
.goal-need-head {
font-size:var(--fs-12); font-weight:600; letter-spacing:0; text-transform:none;
color:var(--text-tertiary); margin-bottom:var(--sp-1);
}
.goal-need-row { display:flex; align-items:baseline; gap:var(--sp-2); padding:3px 0; font-size:var(--fs-14); }
.goal-need-name { flex:1; min-width:0; font-weight:600; }
.goal-need-left { font-weight:500; color:var(--text-tertiary); }
.goal-need-amt { font-weight:600; font-variant-numeric:tabular-nums; }
.goal-need-sum { margin:6px 0 0; font-size:var(--fs-14); color:var(--text-secondary); }
.goal-need-sum b { color:var(--text); font-variant-numeric:tabular-nums; }
.goal-need-pace { margin:var(--sp-1) 0 0; font-size:var(--fs-14); color:var(--text); font-weight:600; line-height:1.5; }
.goal-need-line1 .plan-set { margin:0; }
.goal-need-hint { margin:var(--sp-1) 0 0; font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; }
.goal-need-line { margin-top:var(--sp-1); font-size:var(--fs-14); font-weight:600; color:var(--text-secondary); }
.plan-income-sub { margin:var(--sp-2) 0 0; font-size:var(--fs-14); font-weight:500; color:var(--text-secondary); }
.plan-income-sub[hidden] { display:none; }
.plan-stack { display:flex; height:6px; border-radius:var(--radius-pill); overflow:hidden; background:var(--border); margin-top:var(--sp-3); box-shadow:var(--inset); }
.plan-stack-committed { width:0; background:var(--violet); transition:width 600ms var(--ease-out); }
.plan-stack-spend { width:0; background:var(--accent); transition:width 600ms var(--ease-out); }
.plan-stack-save { width:0; background:var(--success); transition:width 600ms var(--ease-out); }
/* The jobs, from income down (round six, board 3). */
.plan-jobs { margin:var(--sp-2) 0 0; }
.plan-job { display:flex; align-items:baseline; gap:var(--sp-2); padding:3px 0; font-size:var(--fs-14); }
.plan-job-dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--border); align-self:center; }
.plan-job-dot--committed { background:var(--violet); }
.plan-job-dot--saving { background:var(--success); }
.plan-job-dot--allowance { background:var(--accent); }
.plan-job-dot--promised { background:var(--magenta); }
.plan-job-dot--free { background:none; border:1.5px dashed var(--text-tertiary); }
.plan-job-name { flex:1; min-width:0; font-weight:600; }
.plan-job-what { font-weight:500; color:var(--text-tertiary); }
.plan-job-amt { font-weight:600; font-variant-numeric:tabular-nums; }
.plan-job-empty { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; }
.plan-job-note { margin:0; font-size:var(--fs-14); color:var(--text-secondary); line-height:1.5; flex:1; min-width:0; }
.plan-job-line { display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2); flex-wrap:wrap; }
.plan-legend-toggle { margin-left:auto; min-height:32px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-14); font-weight:600; cursor:pointer; position:relative; }
.plan-legend-toggle::after { content:''; position:absolute; inset:-6px 0; }
.plan-legend-toggle[aria-expanded="true"] { background:var(--bg); }
.plan-legend-toggle[hidden], .plan-legend[hidden] { display:none; }
.plan-job-note[hidden] { display:none; }
.plan-job-note b { color:var(--text); font-variant-numeric:tabular-nums; }
.plan-legend { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); margin:6px 0 0; font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; }
.plan-legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:var(--sp-1); vertical-align:0; }
/* Event and goal cards: the figure once, human dates, state as a badge. */
.plan-card { padding:14px var(--sp-4); margin-bottom:var(--sp-2); cursor:pointer; }
.plan-card-head { display:flex; align-items:center; gap:var(--sp-2); }
.plan-card-name { flex:1; min-width:0; font-size:var(--fs-16); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-card-meta { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-card-bar { margin:var(--sp-3) 0 6px; }
.plan-card-foot { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); font-size:var(--fs-14); color:var(--text-secondary); font-weight:500; }
.plan-card-right { white-space:nowrap; }
.plan-card-foot b { font-weight:600; }
/* Month in review (round-three board 6) */
.review-card { padding:var(--sp-4); margin-bottom:10px; box-shadow:var(--elev-1); }
.review-title { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-14); font-weight:600; }
.review-title > svg { width:16px; height:16px; flex-shrink:0; color:var(--accent); }
.review-title > span:first-of-type { flex:1; min-width:0; }
.review-headline { font-size:var(--fs-20); font-weight:600; letter-spacing:-0.03em; margin:var(--sp-3) 0 var(--sp-1); color:var(--success); }
.review-headline.over { color:var(--danger-ink); }
.review-sub { font-size:var(--fs-14); color:var(--text-secondary); font-weight:500; line-height:1.45; }
.review-bar { margin-top:var(--sp-3); }
.review-block { margin-top:14px; padding-top:var(--sp-3); border-top:1px solid var(--glass-border); }
.review-head { display:flex; align-items:baseline; gap:6px; font-size:var(--fs-14); font-weight:600; margin-bottom:var(--sp-1); }
.review-head span { font-size:var(--fs-12); color:var(--text-tertiary); font-weight:500; }
.review-mover { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:var(--fs-14); border-top:1px solid var(--glass-border); }
.review-mover:first-of-type { border-top:0; }
.review-arrow { display:inline-flex; flex-shrink:0; }
.review-arrow svg { width:14px; height:14px; }
.review-arrow.up { color:var(--danger); } .review-arrow.down { color:var(--success); }
.review-cat { flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.review-delta { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.review-delta.up { color:var(--danger-ink); } .review-delta.down { color:var(--success-ink); }
.review-now { width:60px; text-align:right; color:var(--text-tertiary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.review-note { display:flex; align-items:flex-start; gap:9px; padding:7px 0; font-size:var(--fs-14); line-height:1.45; border-top:1px solid var(--glass-border); }
.review-note:first-of-type { border-top:0; }
.review-note b { font-weight:600; }
.review-note-icon { display:inline-flex; flex-shrink:0; margin-top:1px; }
.review-note-icon svg { width:15px; height:15px; }
.review-note-icon.alert { color:var(--warning); } .review-note-icon.cycle { color:var(--accent); }
.plan-group { font-size:var(--fs-12); font-weight:600; color:var(--text-tertiary); text-transform:none; letter-spacing:0; margin:14px 0 2px; }
.plan-group:first-child { margin-top:2px; }
.plan-row { border-top:1px solid var(--glass-border); }
.plan-head { display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:44px; padding:var(--sp-2) 0; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.plan-name { flex:1; font-size:var(--fs-14); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-amt { font-size:var(--fs-14); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan-amt .of { color:var(--text-tertiary); font-weight:500; }
.plan-chev { width:14px; height:14px; color:var(--text-tertiary); flex-shrink:0; transition:transform 200ms var(--ease-out); }
.plan-row.open .plan-chev { transform:rotate(180deg); }
.plan-bar { margin:0 0 6px 30px; }
.plan-note { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; margin:0 0 var(--sp-2) 30px; }
.plan-note--over { color:var(--danger-ink); font-weight:600; }
/* Offers under a row are buttons you can see and hit (round seven, board 22):
inline text links were ~16px tall. */
.plan-set, .plan-edit-toggle { display:inline-flex; align-items:center; min-height:32px; margin:var(--sp-1) 0 0; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); font:inherit; font-size:var(--fs-14); font-weight:600; color:var(--text); cursor:pointer; position:relative; vertical-align:middle; }
.plan-set::after, .plan-edit-toggle::after { content:''; position:absolute; inset:-6px -2px; }
.plan-cats { display:flex; flex-direction:column; gap:2px; padding:0 0 6px 30px; }
.plan-cat { display:flex; align-items:center; gap:var(--sp-2); min-height:26px; font-size:var(--fs-14); }
.plan-cat-name { color:var(--text-secondary); font-weight:500; width:84px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-cat-bar { flex:1; } .plan-cat-bar .progress-track { height:3px; }
.plan-cat-amt { margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan-cat-amt .of { color:var(--text-tertiary); font-weight:500; }
.plan-cat-set { font-size:var(--fs-14); font-weight:600; color:var(--accent); padding:2px 6px; border-radius:var(--radius-pill); border:1px dashed var(--accent); background:none; font-family:inherit; cursor:pointer; white-space:nowrap; position:relative; }
.plan-cat-set::after { content:''; position:absolute; inset:-10px -6px; }
.plan-editor { margin:0 0 10px 30px; padding-top:var(--sp-2); border-top:1px dashed var(--glass-border-dark); }
.plan-editor-actions { display:flex; gap:var(--sp-2); margin-top:var(--sp-2); }
.plan-editor-actions .btn { justify-content:center; font-size:var(--fs-14); padding:9px; }
.plan-editor-actions .btn-add { flex:1; border-style:dashed; }
.plan-editor-actions .btn-total { font-size:var(--fs-14); padding:9px var(--sp-3); color:var(--text-secondary); }
@media (max-width:480px) { .plan-cat-name { width:76px; } .plan-editor, .plan-cats, .plan-bar, .plan-note { margin-left:0; } }
/* Hero trend: the Daily Averages card folded into one row. */
.hero-trend { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:14px; padding-top:var(--sp-3); border-top:1px solid var(--glass-border); }
.hero-trend:empty { display:none; }
.hero-trend-label { font-size:var(--fs-14); font-weight:600; color:var(--text-tertiary); text-transform:none; letter-spacing:0; }
.hero-trend-value { font-size:var(--fs-14); font-weight:600; margin-top:var(--sp-1); font-variant-numeric:tabular-nums; }
.hero-trend-value .up { color:var(--danger-ink); } .hero-trend-value .down { color:var(--success-ink); } .hero-trend-value .vs { color:var(--text-tertiary); font-weight:500; }
.hero-trend-sub { font-size:var(--fs-14); color:var(--text-tertiary); margin-top:2px; font-weight:500; }
.hero-trend-link { background:var(--surface); border:1px solid var(--glass-border-dark); border-radius:var(--radius-pill); padding:6px 10px; min-height:32px; font:inherit; font-size:var(--fs-14); font-weight:600; color:var(--accent); cursor:pointer; position:relative; }
.hero-trend-link::after { content:''; position:absolute; inset:-6px -4px; }
.spark { display:flex; align-items:flex-end; gap:5px; height:48px; width:150px; flex-shrink:0; }
.spark-col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; min-width:0; }
.spark-bar { width:100%; border-radius:3px 3px 1px 1px; background:var(--border); }
.spark-col.now .spark-bar { background:var(--danger); }
.spark-gap { width:100%; height:0; border-top:1px dashed var(--glass-border-dark); }
.spark-lbl { font-size:var(--fs-12); color:var(--text-tertiary); font-weight:500; line-height:1; }
.spark-col.now .spark-lbl { color:var(--text); font-weight:600; }
/* This-month chip line (the Spending Ratios card, as one row). */
.month-chips { display:flex; gap:6px; align-items:center; overflow-x:auto; scrollbar-width:none; margin:-2px 0 var(--sp-3); padding-bottom:2px; }
.month-chips::-webkit-scrollbar { display:none; }
.month-chips[hidden] { display:none; }
/* A chip that states a fact has no border; only chips that open something (attention) do (round 8, H6). */
.month-chip { flex-shrink:0; font-size:var(--fs-14); font-weight:600; padding:3px var(--sp-2); border-radius:11px; border:1px solid transparent; color:var(--text-tertiary); background:var(--bg); white-space:nowrap; }
.month-chip--good { color:var(--success-ink); border-color:var(--success); background:var(--success-soft); }
.month-chip--bad { color:var(--danger-ink); border-color:var(--danger); background:var(--danger-soft); }
/* Tracked Transactions as collapsible type rows. */
.tracked-row { border-top:1px solid var(--glass-border); }
.tracked-head { display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:44px; padding:6px 0; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.tracked-name { flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1); font-size:var(--fs-14); font-weight:600; min-width:0; }
.tracked-sub { font-weight:500; color:var(--text-tertiary); }
.tracked-amt { font-size:var(--fs-14); color:var(--text-secondary); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tracked-chev { width:14px; height:14px; color:var(--text-tertiary); flex-shrink:0; transition:transform 200ms var(--ease-out); }
.tracked-row.open .tracked-chev { transform:rotate(180deg); }
.tracked-bar { margin:0 0 var(--sp-2) var(--sp-6); }
.tracked-cats { display:none; flex-direction:column; gap:2px; padding:0 0 var(--sp-2) var(--sp-6); }
.tracked-row.open .tracked-cats { display:flex; }
.tracked-cat { display:flex; align-items:center; gap:var(--sp-2); min-height:24px; font-size:var(--fs-14); }
.tracked-cat-name { color:var(--text-secondary); font-weight:500; width:88px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracked-cat-bar { flex:1; }
.tracked-cat-bar .progress-track { height:3px; }
.tracked-cat-amt { margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tracked-cat-amt .of { color:var(--text-tertiary); font-weight:500; }
.hero-today b { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
/* Until payday (round six, board 5). */
.hero-payday { margin:10px 0 0; font-size:var(--fs-14); font-weight:500; color:var(--text-secondary); line-height:1.5; }
.hero-payday[hidden] { display:none; }
.hero-payday b { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.hero-payday-vs { color:var(--text-tertiary); }
/* Needs-attention chips: what is waiting on the user, tap to jump. */
/* Active History filters, said back to you and removable. */
/* 12px of clearance under the axis bar: the chips' hit-expanders reach
6px up, and at 6px of margin they were swallowing taps meant for the
bar's own buttons. */
#historyFilterClear { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 2px; }
#historyFilterClear[hidden] { display:none; }
.hfilter-chip {
display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:0 7px 0 10px;
border-radius:var(--radius-pill); border:1px solid var(--accent); background:var(--accent-soft);
color:var(--accent); font:inherit; font-size:var(--fs-14); font-weight:600; white-space:nowrap; cursor:pointer;
position:relative; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.hfilter-chip::after { content:''; position:absolute; inset:-6px -2px; }
.hfilter-chip svg { width:11px; height:11px; flex-shrink:0; opacity:0.8; }
.hfilter-clear-all {
min-height:32px; padding:0 var(--sp-1); background:none; border:0; font:inherit; font-size:var(--fs-14);
font-weight:600; color:var(--text-tertiary); cursor:pointer; position:relative;
}
.hfilter-clear-all::after { content:''; position:absolute; inset:-6px -4px; }
.attention-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--sp-3); }
/* A money alert states a fact and offers the entries behind it, so it
takes the full width; the count chips share the line below. Scoped to
the row so it outranks .attention-chip's own `flex`, which is declared
further down the sheet — without that it shared the line and wrapped
its text to four lines. */
.attention-row .attention-chip--wide { flex:0 0 100%; }
.attention-text { flex:1; min-width:0; text-align:left; }
.attention-act { font-size:var(--fs-14); font-weight:600; white-space:nowrap; opacity:0.9; }
.attention-act::after { content:' \203A'; }
/* Coming up */
.coming-row {
display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:7px 0;
background:none; border:0; border-top:1px solid var(--glass-border); color:inherit; font:inherit;
text-align:left; cursor:pointer;
}
.coming-row:first-child { border-top:0; }
.coming-row > svg:first-child { width:15px; height:15px; flex-shrink:0; color:var(--accent); }
.coming-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.coming-name { font-size:var(--fs-14); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.coming-when { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; }
.coming-bar { width:56px; flex-shrink:0; }
.coming-bar .progress-track { display:block; height:4px; }
.coming-bar .progress-fill { display:block; }
.coming-chev { width:14px; height:14px; flex-shrink:0; color:var(--text-tertiary); }
.attention-chip {
flex:1; display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:var(--sp-2) 10px;
border-radius:var(--radius-sm); border:1px solid; background:var(--bg); color:var(--text);
font-family:inherit; font-size:var(--fs-14); font-weight:600; text-align:left; cursor:pointer; transition:var(--transition);
}
.attention-chip svg { width:16px; height:16px; flex-shrink:0; }
.attention-chip--warning { border-color:var(--warning); background:var(--warning-soft); }
.attention-chip--warning svg { color:var(--warning); }
.attention-chip--danger { border-color:var(--danger); background:var(--danger-soft); }
.attention-chip--danger svg { color:var(--danger); }
.attention-chip:active { transform:scale(0.98); }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-top:14px; }
.hero-stat { display:flex; flex-direction:column; gap:3px; position:relative; padding-left:11px; }
.hero-stat::before {
content:''; position:absolute; left:0; top:2px; bottom:2px; width:2px;
border-radius:1px; background:var(--border);
}
.hero-stat.danger::before { background:var(--danger); }
.hero-stat.warning::before { background:var(--warning); }
.hero-stat-label { font-size:var(--fs-12); font-weight:600; color:var(--text-tertiary); text-transform:none; letter-spacing:0; }
.hero-stat-value { font-size:var(--fs-16); font-weight:600; letter-spacing:-0.03em; color:var(--text); line-height:1.1; }
.hero-stat.danger .hero-stat-value { color:var(--danger-ink); }
.hero-stat.warning .hero-stat-value { color:var(--warning-ink); }
/* Shared chart-card chrome for Cash Flow Trend and Average Spend Per Day —
same soft-card background, radius, shadow, padding, and header/graph
spacing rhythm, so the two read as one consistent system rather than
one being a flat section and the other a card. */
.chart-card { padding:18px; margin-bottom:var(--sp-2); box-shadow:0px 1px 3px rgba(0,0,0,0.06); }
/* No scroll container by design — the SVG viewBox compresses to fit any
width instead, so all 6 months are always visible without scrolling. */
.chart-area { width:100%; aspect-ratio:2/1; position:relative; }
.chart-area svg .chart-label { font-size:var(--fs-12); fill:var(--text-tertiary); font-weight:500; }
.chart-area svg .chart-value-label { font-size:var(--fs-12); fill:var(--text-secondary); font-weight:600; }
.chart-legend { display:flex; gap:6px; margin-top:var(--sp-2); flex-wrap:wrap; }
.chart-legend-item { display:flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); position:relative; }
/* Legend toggles are 23px tall, 6px apart: full-height expander, and
half the shared gap each way so neighbours touch without overlap. */
.legend-toggle::after { content:''; position:absolute; left:-3px; right:-3px; top:50%; transform:translateY(-50%); height:44px; }
.chart-legend-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.chart-legend-label { font-size:var(--fs-12); color:var(--text-secondary); font-weight:600; }
/* Legend entries double as show/hide toggles for their line. */
.legend-toggle { border:none; background:transparent; padding:var(--sp-1) var(--sp-2); border-radius:var(--radius-pill); cursor:pointer; font-family:inherit; transition:var(--transition); }
@media (hover:hover) { .legend-toggle:hover { background:var(--bg); } }
.legend-toggle:active { transform:scale(0.96); }
.legend-toggle.off { opacity:0.4; }
.legend-toggle.off .chart-legend-label { text-decoration:line-through; }
.legend-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Per-point tooltip: fades and scales in above the hovered/tapped dot. */
.chart-tip {
position:absolute; z-index:5; background:var(--surface-solid); border:1px solid var(--glass-border-dark);
border-radius:var(--radius-sm); padding:var(--sp-1) var(--sp-2); font-size:var(--fs-14); font-weight:600; white-space:nowrap;
pointer-events:none; box-shadow:var(--elev-2); opacity:0;
transform:translate(-50%, -115%) scale(0.94);
transition:opacity 150ms ease, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.chart-tip.show { opacity:1; transform:translate(-50%, -115%) scale(1); }
@media (max-width:480px) {
.chart-card { padding:14px; }
}
/* Flat secondary section: no card chrome, hairline separation.
Padding 13 -> 22: One UI does not pack content densely, and each grouped
section is supposed to get clear air around it. The hairline stays —
in a data-dense financial app it still helps scanning, and air alone
does not group as unambiguously as air plus a rule. */
.section {
padding:22px 2px; border-top:1px solid var(--glass-border);
animation:enter 0.5s var(--ease-out) backwards;
}
#homeSection > .section:first-of-type { border-top:none; }
.chip {
padding:5px var(--sp-3); border-radius:var(--radius-pill); border:1px solid var(--glass-border-dark); background:var(--surface); color:var(--text-secondary);
font-size:var(--fs-14); font-weight:500; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:var(--transition); font-family:inherit;
}
@media (hover:hover) { .chip:hover { color:var(--text); background:var(--bg); } }
.chip:active { background:var(--accent-soft); transform:scale(0.97); }
.chip.on { background:var(--accent); color:var(--accent-inverse); border-color:var(--accent); transition:var(--ease-spring); animation:chipPop 0.3s cubic-bezier(0.22,0.25,0,1); }
/* Monotonic, same reason as dockPop — no push past 1.0 and back. */
@keyframes chipPop { 0% { transform:scale(0.92); } 100% { transform:scale(1); } }
.add-chip.on { animation:chipPop 0.3s cubic-bezier(0.22,0.25,0,1); }
.chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.chip-grid { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
/* ⓘ buttons on Home cards + their toggled explanation blurbs. */
.info-btn {
width:24px; height:24px; border:1.5px solid var(--glass-border-dark); border-radius:50%; background:transparent; color:var(--text-tertiary); cursor:pointer;
padding:0; display:inline-flex; align-items:center; justify-content:center; margin-left:var(--sp-1); vertical-align:middle; flex-shrink:0;
}
.info-btn svg { width:13px; height:13px; display:block; }
@media (hover:hover) { .info-btn:hover { color:var(--text); } }
.info-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:50%; }
/* ── Desktop hover affordances ────────────────────────────────────────
Transaction rows and list cards are clickable but gave a mouse user no
hover cue at all — on desktop that reads as "not interactive". Scoped
to (hover:hover) so touch devices don't get a sticky stuck-on state
after a tap. Keyboard users are covered separately by the existing
:focus-visible rules, never by hover alone. */
@media (hover:hover) {
.tx-item:hover { background:var(--bg); }
#eventsList .card:hover, #goalsList .card:hover, #trackList .card:hover {
border-color:var(--glass-border-dark); box-shadow:var(--elev-2); transform:translateY(-1px);
}
}
/* Tooltip for [data-tip] controls — replaces mouse-only native `title`.
position:fixed because it's appended to and positioned from
viewport coords, so it can't be clipped by an overflow:hidden ancestor. */
.tip {
position:fixed; z-index:1500; pointer-events:none;
background:var(--text); color:var(--surface-solid);
font-size:var(--fs-12); font-weight:600; line-height:1.3;
padding:5px var(--sp-2); border-radius:6px; max-width:220px;
box-shadow:var(--elev-2);
opacity:0; transform:translateY(2px);
transition:opacity 120ms ease, transform 120ms cubic-bezier(0.16,1,0.3,1);
}
.tip.show { opacity:1; transform:translateY(0); }
/* Shortcut list rows in the ? dialog. */
.shortcut-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-2) 0; border-bottom:1px solid var(--glass-border-dark); font-size:var(--fs-14); font-weight:500; }
.shortcut-row:last-of-type { border-bottom:none; }
.shortcut-row kbd {
display:inline-block; min-width:20px; text-align:center; padding:2px 6px; margin:0 1px;
font-family:inherit; font-size:var(--fs-12); font-weight:600; color:var(--text-secondary);
background:var(--bg); border:1px solid var(--glass-border-dark); border-bottom-width:2px; border-radius:5px;
}
/* ── Command palette (Ctrl/Cmd+K) ──────────────────────────────────────
The desktop app's front door. The launcher lives in the header; the
overlay reuses .modal for the layer stack but positions itself
top-centre rather than as a bottom sheet. */
/* Desktop-only header launcher. Hidden by default (mobile chrome stays as
is), shown from 900px where there's room for it beside the brand. */
.cmd-launcher { display:none; }
/* Shown to a fine pointer that can hover — a keyboard-and-trackpad tablet
at 820px included — rather than by width alone (round seven, catalogue). */
@media (min-width:900px), (min-width:700px) and (hover:hover) and (pointer:fine) {
.cmd-launcher {
display:flex; align-items:center; gap:9px;
margin:0 auto 0 20px; padding:var(--sp-2) var(--sp-3); min-width:280px; max-width:420px;
background:var(--bg); border:1px solid var(--glass-border-dark);
border-radius:var(--radius-md); color:var(--text-tertiary);
font-family:inherit; font-size:var(--fs-14); font-weight:500; cursor:pointer;
transition:var(--transition);
}
@media (hover:hover) { .cmd-launcher:hover { border-color:var(--text-tertiary); color:var(--text-secondary); background:var(--surface); } }
.cmd-launcher:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cmd-launcher svg { width:15px; height:15px; flex-shrink:0; }
.cmd-launcher span { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-launcher kbd {
font-family:inherit; font-size:var(--fs-12); font-weight:600; letter-spacing:0.03em;
padding:2px 6px; border-radius:5px; color:var(--text-tertiary);
background:var(--surface); border:1px solid var(--glass-border-dark); flex-shrink:0;
}
}
/* Position the palette top-centre. .modal is flex-column, so the panel is
aligned rather than pinned to the bottom like .modal-panel. */
.cmd-modal { align-items:center; }
.cmd-panel {
margin-top:12vh; width:min(640px, 92vw); max-height:70vh;
display:flex; flex-direction:column; overflow:hidden;
background:var(--surface); border:1px solid var(--glass-border);
border-radius:var(--radius-xl); box-shadow:var(--elev-3);
transform:translateY(-8px) scale(0.98); opacity:0;
transition:transform 220ms cubic-bezier(0.22,0.25,0,1), opacity 160ms;
}
.cmd-modal.open .cmd-panel { transform:translateY(0) scale(1); opacity:1; }
.cmd-search {
display:flex; align-items:center; gap:10px; padding:var(--sp-4) 18px;
border-bottom:1px solid var(--glass-border-dark); flex-shrink:0;
}
.cmd-search-icon { width:18px; height:18px; color:var(--text-tertiary); flex-shrink:0; }
#cmdInput {
flex:1; border:none; background:transparent; outline:none;
font-family:inherit; font-size:var(--fs-16); font-weight:500; color:var(--text);
/* 16px avoids iOS zoom-on-focus; also the right size for a prominent
search field on desktop. */
}
#cmdInput::placeholder { color:var(--text-tertiary); font-weight:500; }
.cmd-esc-hint {
font-family:inherit; font-size:var(--fs-12); font-weight:600; color:var(--text-tertiary);
padding:2px 6px; border-radius:5px; background:var(--bg);
border:1px solid var(--glass-border-dark); flex-shrink:0;
}
.cmd-list { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--sp-2); flex:1; }
.cmd-item {
display:flex; align-items:center; gap:var(--sp-3); width:100%;
padding:10px var(--sp-3); border:none; border-radius:var(--radius-md);
background:transparent; color:var(--text); cursor:pointer;
font-family:inherit; text-align:left; transition:background 120ms;
}
.cmd-item.sel { background:var(--accent-soft); }
.cmd-item-icon { width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
border-radius:var(--radius-sm); background:var(--bg); color:var(--text-secondary); }
.cmd-item.sel .cmd-item-icon { background:var(--accent); color:var(--accent-inverse); }
.cmd-item-icon svg { width:17px; height:17px; }
.cmd-item-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cmd-item-label { font-size:var(--fs-16); font-weight:600; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-item-hint { font-size:var(--fs-12); font-weight:500; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-item-group { font-size:var(--fs-12); font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-tertiary); flex-shrink:0; }
.cmd-item-keys { display:flex; gap:3px; flex-shrink:0; }
.cmd-item-keys kbd {
font-family:inherit; font-size:var(--fs-12); font-weight:600; min-width:18px; text-align:center;
padding:2px 5px; border-radius:5px; color:var(--text-secondary);
background:var(--bg); border:1px solid var(--glass-border-dark);
}
.cmd-empty { padding:28px 18px; text-align:center; font-size:var(--fs-14); font-weight:500; color:var(--text-tertiary); }
.cmd-foot {
display:flex; gap:var(--sp-4); padding:10px 18px; flex-shrink:0;
border-top:1px solid var(--glass-border-dark);
font-size:var(--fs-12); font-weight:500; color:var(--text-tertiary);
}
.cmd-foot kbd {
font-family:inherit; font-size:var(--fs-12); font-weight:600; padding:1px 5px; margin-right:2px;
border-radius:4px; color:var(--text-secondary); background:var(--bg); border:1px solid var(--glass-border-dark);
}
@media (prefers-reduced-motion: reduce) {
.cmd-panel { transition:none; }
}
/* ── Touch-target expanders ────────────────────────────────────────────
These controls are drawn small on purpose (a 13px ⓘ, a 28px close) but
were 15–28px of actual HIT area, well under the 44px floor. The ::after
is absolutely positioned, so it enlarges the tap region WITHOUT changing
layout or the drawn size — nothing shifts.
Expansion is VERTICAL ONLY, deliberately: every one of these sits in a
horizontal row with a 4–6px gap to its neighbour, so growing sideways
would make adjacent hit areas overlap and steal each other's taps.
Vertical is collision-free (nothing is stacked within 44px above or
below them) and it's the dominant thumb-miss axis anyway. Widths that
remain under 44 are recorded in the findings doc. */
.info-btn, .modal-close, .icon-btn, .dock-btn, #profileChip, #monthChip,
.chip, .danger-toggle-btn, .track-move-btn { position:relative; }
.info-btn::after, .modal-close::after, .icon-btn::after,
.dock-btn::after, #profileChip::after, #monthChip::after,
.chip::after, .danger-toggle-btn::after, .track-move-btn::after {
content:''; position:absolute; left:0; right:0;
top:50%; transform:translateY(-50%); height:44px;
}
/* ── Width expanders ──────────────────────────────────────────────────
Horizontal room is scarce in these rows, so each expander grows
ASYMMETRICALLY — outward into whitespace, and only half-way into a gap
shared with an interactive neighbour, so two expanders can never
overlap. Values are derived from the real gaps (6px between the modal
header buttons, 4px between the header chips). */
.info-btn::after { left:-20px; right:-9px; } /* 15 + 29 = 44; left runs under non-interactive title text */
/* Only 1px into the 4px gap it shares with the month chip (which also
takes 1px), so the two can't overlap; the rest grows right into the
header's own padding. */
.header-controls .icon-btn::after { left:-1px; right:-15px; } /* 28 + 16 = 44 */
/* Modal headers hold up to two of these 6px apart: the first (overflow)
grows left under the title, the last (close) grows right into the
panel's own padding. Each takes only 3px of the shared gap. */
.modal-header .modal-close:not(:last-of-type)::after { left:-13px; right:-3px; }
.modal-header .modal-close:last-of-type::after { left:-3px; right:-13px; }
.chip::after { left:-1px; right:-1px; }
#profileChip::after { left:-1px; right:-1px; }
/* Lifecycle reorder arrows: a deliberate exception to the 44px floor.
They sit INSIDE the stat cell that filters the list, 2px apart from
each other. Reaching 44px would make each arrow blanket both the cell
and its twin — trading a primary action (filter) and a sibling control
for a secondary one. So: expand vertically only, and take just 1px of
the 2px gap. Measured result ~18x32. Recorded as a per-control
decision per §4 ("decide per control, record it"). */
.track-move-btn::after { left:-1px; right:-1px; height:32px; }
/* ── Minimum heights where the control IS the layout ──────────────────
Unlike the expanders above, these rows have room to simply be taller,
which is the cleaner fix than an overlay. */
.collapse-toggle { min-height:44px; box-sizing:border-box; }
.field .inp, .field input, .field select, .field textarea { min-height:44px; }
.segmented-btn, .type-btn, .add-chip, .recurring-row, .btn { min-height:44px; }
/* Flex/grid children need the box to actually grow rather than just
reserving space, and chips must stay vertically centred. */
.add-chip, .type-btn, .segmented-btn, .btn { display:inline-flex; align-items:center; justify-content:center; }
/* Higher-specificity repeats: these two are overridden by their container's
own rules, so the floor has to be restated at matching specificity.
min-width catches short labels ("FY") that flex down to ~24px. */
.add-quick-row .add-chip { min-height:44px; }
/* Row tags (design prototypes, Add): a quiet name at the head of each
chip row, so Type / Category / Mode / Recent read as different rows
without the caption line D11 removed. */
.add-row-tag {
display:inline-flex; align-items:center; flex:0 0 auto; height:44px; padding:0 var(--sp-2) 0 2px;
font-size:var(--fs-12); font-weight:600; color:var(--text-tertiary); text-transform:none; letter-spacing:0;
}
#txRecentChips:empty { display:none; }
#txBudgetChips[hidden] { display:none; }
/* Item on one tagged line, like the chip rows above it. */
.add-item-row { display:flex; align-items:center; gap:6px; margin-bottom:var(--sp-2); }
.add-item-wrap { flex:1; min-width:0; }
.add-item-wrap #txItem { width:100%; box-sizing:border-box; }
/* When · how: three pills on one line (round-two board 2). */
.meta-strip { display:flex; align-items:center; gap:6px; margin-bottom:var(--sp-2); }
.meta-pill {
flex:1; min-width:0; height:40px; padding:0 10px 0 var(--sp-3); border-radius:var(--radius-pill);
background:var(--bg); border:1px solid var(--glass-border-dark); color:var(--text);
font:inherit; font-size:var(--fs-12); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
text-align:left; cursor:pointer;
}
.meta-pill--sub { flex:0.8; }
.meta-pill:active { background:var(--accent-soft); }
.meta-pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* More: dashed chips that reveal one field each. */
.more-row { display:flex; align-items:center; gap:6px; margin-bottom:var(--sp-2); }
.more-row .add-row-tag { height:34px; }
.more-chips { display:flex; flex-wrap:nowrap; gap:6px; flex:1; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:5px 0; margin:-5px 0; }
.more-chips::-webkit-scrollbar { display:none; }
.more-chip {
display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 11px; border-radius:var(--radius-pill);
border:1px dashed var(--glass-border-dark); background:transparent; color:var(--text-secondary);
font:inherit; font-size:var(--fs-14); font-weight:600; white-space:nowrap; cursor:pointer; position:relative;
}
.more-chip::after { content:''; position:absolute; inset:-5px 0; }
.more-chip.on { border-style:solid; border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.more-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.more-chip[hidden] { display:none; }
.more-panels { display:flex; flex-direction:column; gap:6px; }
.more-panels:empty { display:none; }
.more-panel { background:var(--surface); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:10px var(--sp-3); }
.more-panel[hidden] { display:none; }
.more-panel .field:last-child { margin-bottom:0; }
.more-body { }
/* Room for the fixed Save bar over the form's tail. */
.add-tail { height:96px; }
/* Quick-add sheet (round-two board 1): #addSection as a bottom sheet
over the current tab. Below the modals (z 1000) so the date and mode
pickers open above it; above the dock, which hides meanwhile. */
.quick-sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:890; }
.quick-sheet-backdrop[hidden] { display:none; }
.quick-sheet-head { display:none; align-items:center; justify-content:space-between; gap:10px; margin:0 0 var(--sp-2); }
.quick-sheet-head[hidden] { display:none; }
.quick-sheet-handle { position:absolute; top:6px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:var(--border); }
.quick-sheet-title { font-size:var(--fs-16); font-weight:600; }
.quick-sheet-full { display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 6px; background:none; border:0; font:inherit; font-size:var(--fs-14); font-weight:600; color:var(--accent); cursor:pointer; }
.quick-sheet-full svg { width:13px; height:13px; }
body.quick-sheet #addSection {
display:block !important; position:fixed; left:0; right:0; bottom:0; z-index:900; max-width:720px; margin:0 auto;
max-height:min(88vh, 88dvh); overflow-y:auto; -webkit-overflow-scrolling:touch;
background:var(--surface); border:1px solid var(--glass-border); border-bottom:0; border-radius:var(--radius-xl) var(--radius-xl) 0 0;
padding:14px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,0.45);
animation:sheetUp 260ms var(--ease-out);
}
@keyframes sheetUp { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { body.quick-sheet #addSection { animation:none; } }
body.quick-sheet #addSection .quick-sheet-head:not([hidden]) { display:flex; }
body.quick-sheet #addSection .home-title,
body.quick-sheet #addSection .more-row,
body.quick-sheet #addSection .more-panels,
body.quick-sheet #addSection .add-tail { display:none; }
body.quick-sheet #addSection .add-sticky { position:static; padding:10px 0 0; max-width:none; }
/* The dock's One UI variant is addressed by id further down the sheet;
the sheet has to outrank that too. */
body.quick-sheet .dock, body.quick-sheet #dockNav { display:none !important; }
/* From / To on one line even at phone width — the generic .field-row
stacks below 480px, but two short place names fit side by side. */
.field-row.journey-row { flex-direction:row; gap:var(--sp-2); }
.journey-hint { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; margin-top:6px; min-height:0; }
.journey-hint:empty { display:none; }
.segmented .segmented-btn { min-height:44px; min-width:44px; }
.danger-toggle-btn::after { left:-6px; right:-6px; }
.card-info {
font-size:var(--fs-14); color:var(--text-secondary); font-weight:500; background:var(--bg);
border-radius:var(--radius-sm); padding:var(--sp-2) 10px; margin:var(--sp-2) 0; line-height:1.5;
animation:infoIn 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes infoIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
/* Size modifier: compact chip for dense header/utility contexts. */
.chip-sm { padding:var(--sp-1) 10px; font-size:var(--fs-12); }
/* Round 8 (A1): the header pills read at the size they can be hit. */
#profileChip, #monthChip { min-height:32px; padding:6px 12px; font-size:var(--fs-14); }
.month-step { width:32px; height:32px; }
.chip-36 { min-height:36px; padding:8px 12px; }
.cat-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-2); }
.cat-title { font-size:var(--fs-14); font-weight:600; display:flex; align-items:center; gap:6px; letter-spacing:-0.01em; }
.cat-badge { font-size:var(--fs-12); font-weight:600; color:var(--text-tertiary); background:var(--bg); padding:2px 6px; border-radius:11px; border:1px solid var(--glass-border-dark); }
.info-btn {
width:15px; height:15px; flex-shrink:0; border-radius:50%; border:1px solid var(--glass-border-dark);
background:transparent; color:var(--text-tertiary); font-size:var(--fs-12); font-weight:600; font-style:normal;
font-family:inherit; line-height:1; cursor:pointer; padding:0;
display:inline-flex; align-items:center; justify-content:center; transition:var(--transition);
vertical-align:middle; margin-left:5px; text-transform:none; letter-spacing:0; position:relative; top:-1px;
}
.info-btn:hover, .info-btn:active { background:var(--bg); color:var(--text-secondary); border-color:var(--text-tertiary); }
.info-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tx-item { display:flex; align-items:center; gap:10px; padding:var(--sp-2) 0; border-bottom:1px solid var(--glass-border-dark); min-height:44px; cursor:pointer; transition:background var(--transition); border-radius:var(--radius-sm); }
.tx-item:last-child { border-bottom:none; }
.tx-history-row:active { background:var(--accent-soft); }
.tx-icon {
width:32px; height:32px; border-radius:11px; background:var(--bg); color:var(--text-secondary); display:flex; align-items:center; justify-content:center;
font-size:var(--fs-12); font-weight:600; flex-shrink:0; border:1px solid var(--glass-border-dark);
}
.tx-icon.type-badge { background:var(--tbg); color:var(--tfg); border-color:transparent; }
[data-theme="dark"] .tx-icon.type-badge { background:var(--tbg-d); color:var(--tfg-d); }
.tx-content { flex:1; min-width:0; }
/* Flex, not a single truncating block: the item name shrinks and ellipses
on its own, but the icon cluster never shrinks or gets clipped by that
truncation — a long name can no longer silently hide a danger/refund/
lifecycle icon that comes after it. */
.tx-title { display:flex; align-items:center; font-weight:500; letter-spacing:-0.01em; min-width:0; }
.tx-title-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex-shrink:1; }
.tx-title-icons { display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap; }
.tx-meta { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; margin-top:2px; }
.tx-amount { font-size:var(--fs-14); font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0; letter-spacing:-0.01em; }
.tx-amount.income { color:var(--success); }
.tx-amount.expense { color:var(--ink); }
/* Shared, non-interactive status-icon formatting for every row indicator
(lifecycle, refund/exchange initiated or completed, danger, split,
mirror, transfer-in) — one wrapper, one size, one stroke, one base
color, so none of them can drift, shrink, or look like a different
component from the others. Only the inner SVG path (and, for danger,
the color modifier) differs between meanings. */
.expense-status-icon {
width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
margin-left:7px; vertical-align:middle; color:var(--accent); flex-shrink:0;
transition:filter 150ms ease;
}
/* Adaptive sizing — mobile 18px / tablet 19px / desktop 20px. stroke-width
stays a constant "2" in the SVG's own 24-unit coordinate space, so it
scales proportionally with the box for free; it never needs its own
per-breakpoint value. */
@media (min-width:768px) { .expense-status-icon { width:19px; height:19px; } }
@media (min-width:1024px) { .expense-status-icon { width:20px; height:20px; } }
.expense-status-icon svg { display:block; width:100%; height:100%; stroke-width:2; }
/* Non-interactive, but a subtle color lift on desktop hover signals "this
icon means something" without any size/shift animation. */
@media (hover:hover) {
.expense-status-icon:hover { filter:brightness(1.25); }
}
/* Danger is an alert, not an info marker — the one case where the whole
glyph (not just an inner accent) recolors, so it still stands out. */
.expense-status-icon--danger { color:var(--danger); }
/* Status-based coloring only — shape, size, stroke, spacing all stay
identical to the base .expense-status-icon; only `color` changes. */
.expense-status-icon--refund-initiated { color:var(--danger); }
.expense-status-icon--refund-completed { color:var(--success); }
.expense-status-icon--exchange-initiated { color:var(--teal-blue); }
.expense-status-icon--exchange-completed { color:var(--violet); }
/* Delivery: warning while it is still coming, success once it lands —
the same two-state colour logic the refund pair uses. */
.expense-status-icon--delivery-pending { color:var(--warning); }
.expense-status-icon--delivered { color:var(--success); }
/* One marker for three independent statuses: the leading one's glyph and
colour, with a count for the rest (round-four board 4). */
.expense-status-icon--multi { position:relative; overflow:visible; }
.expense-status-icon--multi .status-count {
position:absolute; right:-7px; bottom:-6px; min-width:15px; height:15px; padding:0 3px;
display:flex; align-items:center; justify-content:center; box-sizing:border-box;
border-radius:6px; background:var(--surface); border:1px solid currentColor;
font-size:var(--fs-12); font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
}
/* The three headings inside the one Status panel. */
.add-section-title.status-part { margin-top:14px; padding-top:var(--sp-3); border-top:1px solid var(--glass-border-dark); }
/* Group headers. History groups by date, Lifecycle by category; they are
the same object — a pill, a leader line, and a figure — so they share
one set of rules rather than drifting apart. */
.tx-date-header, .lc-cat-header { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:0; margin:14px 0 6px; }
.tx-date-header:first-child, .lc-cat-header:first-child { margin-top:2px; }
.tx-date-header .tx-date-label, .lc-cat-header .lc-cat-label {
display:inline-block; padding:var(--sp-1) 10px; font-size:var(--fs-12); font-weight:600;
color:var(--accent-inverse, #fff); background:var(--accent);
border-radius:var(--radius-pill, 999px); text-transform:uppercase; letter-spacing:0.6px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; min-width:0; flex-shrink:1;
}
/* Dotted leader line filling the gap between the date pill and the total;
shrinks on narrow screens but never collapses below min-width. */
.tx-date-connector, .lc-cat-connector {
flex:1 1 12px; min-width:12px; align-self:center; height:0;
border-bottom:1px dotted var(--border); opacity:0.75;
}
/* Daily total: right-aligned on the same row as the date pill, non-interactive. */
/* "N due" carries the full text colour rather than --warning: see
renderTrack. The blob beside it is what says urgent. */
.lc-cat-count.lc-cat-due { color:var(--text); display:inline-flex; align-items:center; }
.tx-date-total, .lc-cat-count {
font-size:var(--fs-16); font-weight:600; color:var(--text-secondary);
font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden;
text-overflow:ellipsis; flex-shrink:0;
}
/* History rows: right-side column holds the ⋯ menu button (top, aligned
with the title-line icons) and the amount (below) — a fixed structure
that never shifts regardless of how many status icons the title shows. */
/* The tap tint has to be rounded to the row's own corner or the flash
reads as a hard rectangle sitting under soft content. */
.tx-history-row { align-items:flex-start; position:relative; border-radius:var(--radius-md); }
/* Clipped only while the body is displaced: a resting clip would cut the
⋮ button's hit-expander, which reaches past the row's edge on purpose. */
.tx-history-row.tx-swiping, .tx-history-row.tx-swipe-open { overflow:hidden; }
/* The swipe moves the row's BODY; the tray waits under it at the right
edge and is only in the layout while swiping or parked open. */
.tx-swipe-body { display:flex; align-items:flex-start; gap:10px; flex:1; min-width:0; }
/* Above the tray only while the tray shows: a standing z-index would make
the body a stacking context and sink the ⋮ hit-expander (z:-1) under
the amount text at rest. */
.tx-history-row.tx-swiping .tx-swipe-body, .tx-history-row.tx-swipe-open .tx-swipe-body { position:relative; z-index:1; }
.tx-swipe-tray { display:none; position:absolute; top:0; bottom:0; right:0; width:192px; }
.tx-history-row.tx-swiping .tx-swipe-tray, .tx-history-row.tx-swipe-open .tx-swipe-tray { display:flex; }
.tx-history-row.tx-swiping .tx-swipe-body, .tx-history-row.tx-swipe-open .tx-swipe-body { background:var(--surface); }
.tx-swipe-act {
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
border:0; padding:0; font:inherit; font-size:var(--fs-14); font-weight:600; cursor:pointer; color:var(--text);
background:var(--border);
}
.tx-swipe-act svg { width:16px; height:16px; }
.tx-swipe-act--edit { background:var(--accent); color:var(--accent-inverse); }
.tx-swipe-act--delete { background:var(--danger); color:#fff; }
.tx-history-row.tx-swipe-open .tx-swipe-body { transition:transform 220ms cubic-bezier(0.22,0.25,0,1); }
/* Day headers stay pinned while their rows scroll. The card's
overflow:hidden would defeat position:sticky, so the list opts out. */
#historyList.card { overflow:visible; }
/* The 6px below the pill stays a margin (unpainted): as padding the
header's box, one layer up, swallowed taps meant for the ⋮ button
of the first row under it. */
#historyList .tx-date-header { position:sticky; top:0; z-index:2; background:var(--surface); margin:0 0 6px; padding:14px 0 0; }
#historyList .tx-date-header:first-child { padding-top:2px; }
.tx-history-row .tx-side { display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-1); flex-shrink:0; margin-left:auto; }
.tx-history-row .tx-amount { text-align:right; padding-bottom:1px; }
.tx-history-row.tx-selected { background:var(--accent-soft, rgba(0,0,0,0.05)); border-radius:var(--radius-md, 10px); }
.tx-history-row.tx-danger .tx-title, .tx-history-row.tx-danger .tx-meta, .tx-history-row.tx-danger .tx-amount { color:var(--danger-ink); font-weight:600; }
/* Impulse-purchase toggle, shown next to the amount field on the add/edit form */
.danger-toggle-btn {
display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1); border:1px solid var(--glass-border-dark);
background:var(--surface); color:var(--text-tertiary); border-radius:50%; width:36px; height:36px;
padding:0; font-size:var(--fs-14); font-weight:600; cursor:pointer; font-family:inherit; line-height:1;
}
.danger-toggle-btn.on { background:var(--danger-soft); border-color:var(--danger); color:var(--danger-ink); }
.danger-toggle-btn:focus-visible { outline:2px solid var(--danger); outline-offset:2px; }
/* Per-expense ⋯ action-menu trigger — every item-level action (duplicate,
transfer, export, delete) lives behind this one button now. Deep indigo
at rest, violet on hover/active/focus, matching the rest of Color
Schema 1's action-icon treatment. */
/* 18px visual, 44px hit — the most-tapped small control in the app,
sitting beside a swipe gesture. The expander deliberately steals the
13px strip of row around the glyph: a near-miss on the ⋮ used to open
the EDITOR (row tap), which reads as "the app did the wrong thing". */
.tx-menu-btn {
display:inline-flex; align-items:center; justify-content:center;
width:18px; height:18px; flex-shrink:0; position:relative;
border:none; background:transparent; color:var(--accent);
line-height:1; cursor:pointer; border-radius:50%;
padding:0; font-size:var(--fs-14); transition:var(--transition);
}
.tx-menu-btn::after { content:''; position:absolute; left:-13px; right:-13px; top:50%; transform:translateY(-50%); height:44px; }
.tx-menu-btn svg { width:100%; height:100%; display:block; }
.tx-menu-btn:hover, .tx-menu-btn:active { background:var(--violet-soft); color:var(--violet); }
.tx-menu-btn:focus-visible { outline:2px solid var(--violet); outline-offset:1px; }
/* Per-expense action menu rows (Duplicate/Transfer/Export/Delete) */
.tx-action-item {
display:flex; align-items:center; gap:var(--sp-3); width:100%;
padding:13px 10px; font-size:var(--fs-16); font-weight:500; color:var(--text);
background:none; border:none; text-align:left; cursor:pointer;
border-radius:var(--radius-sm); font-family:inherit; transition:var(--transition);
}
.tx-action-item:hover, .tx-action-item:active { background:var(--bg); }
.tx-action-item--danger { color:var(--danger-ink); }
.tx-action-icon { width:18px; height:18px; flex-shrink:0; color:var(--accent); }
.tx-action-item--danger .tx-action-icon { color:var(--danger); }
.tx-action-icon svg { width:100%; height:100%; display:block; }
/* Selection checkbox shown in multi-select mode */
.tx-select-box {
width:28px; height:28px; border-radius:11px; flex-shrink:0;
border:2px solid var(--accent); background:transparent; color:var(--accent-inverse, #fff);
display:flex; align-items:center; justify-content:center; font-size:var(--fs-16); font-weight:600;
}
.tx-history-row.tx-selected .tx-select-box { background:var(--accent); }
/* Floating bulk-action bar */
.history-selection-bar {
position:fixed; left:50%; transform:translateX(-50%);
/* Below #confirmModal (1200), so a confirm always sits on top of it (board 20). */
bottom:calc(76px + env(safe-area-inset-bottom)); z-index:1190;
display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px);
padding:var(--sp-2) 10px var(--sp-2) 14px; border-radius:var(--radius-pill, 999px);
background:var(--surface-solid); border:1px solid var(--glass-border-dark);
box-shadow:0 8px 28px rgba(0,0,0,0.18);
animation:hsbIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
/* Keyframes must restate the centering translateX — `transform` in a
keyframe replaces the base value entirely rather than adding to it. */
@keyframes hsbIn {
from { opacity:0; transform:translateX(-50%) translateY(10px) scale(0.97); }
to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
.history-selection-bar .hsb-count { font-size:var(--fs-14); font-weight:600; color:var(--text); white-space:nowrap; }
.history-selection-bar .hsb-actions { display:flex; align-items:center; gap:6px; }
.history-selection-bar .hsb-btn {
border:none; background:var(--bg); color:var(--text); font-size:var(--fs-14); font-weight:600;
padding:6px 10px; border-radius:var(--radius-pill, 999px); cursor:pointer; white-space:nowrap;
}
.history-selection-bar .hsb-btn:active { opacity:0.7; }
.history-selection-bar .hsb-danger { background:var(--danger-soft); color:var(--danger-ink); box-shadow:inset 0 0 0 1px var(--danger); }
.history-selection-bar .hsb-close { background:transparent; color:var(--text-tertiary); font-size:var(--fs-16); padding:6px var(--sp-2); }
.del-btn { width:26px; height:26px; border-radius:50%; border:none; background:transparent; color:var(--text-tertiary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); }
.del-btn:active { background:var(--danger-soft); color:var(--danger); }
.del-btn:focus-visible { outline:2px solid var(--danger); outline-offset:2px; }
.empty { text-align:center; padding:48px var(--sp-4); color:var(--text-tertiary); animation:enter 0.5s var(--ease-out) backwards; }
.empty p { font-size:var(--fs-16); font-weight:500; }
.empty-icon {
color:var(--text-tertiary); opacity:0.6; margin-bottom:var(--sp-3); display:inline-flex;
animation:emptyFloat 3.5s ease-in-out infinite;
}
.empty-icon svg { display:block; }
@keyframes emptyFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .empty-icon { animation:none; } }
.field { margin-bottom:var(--sp-3); }
.field label { display:block; font-size:var(--fs-12); font-weight:600; color:var(--text-secondary); letter-spacing:0; margin-bottom:6px; }
/* 16px is a hard floor on anything focusable for text entry: iOS Safari
zooms the viewport on focus below that, which yanks the layout around
and instantly reads as "not a native app". Applies to the .inp divs
(picker triggers) too, so a trigger and the input beside it stay the
same size. */
.field input, .field textarea, .field select, .inp {
width:100%; background:var(--bg); border:1px solid var(--glass-border-dark); border-radius:var(--radius-md); padding:10px var(--sp-3);
color:var(--text); font-family:inherit; font-size:var(--fs-input); outline:none; transition:var(--transition); font-weight:500; box-shadow:var(--inset);
}
.field input:focus, .field textarea:focus, .field select:focus, .inp:focus { border-color:var(--text-secondary); box-shadow:none; }
.field textarea { min-height:60px; resize:vertical; line-height:1.5; }
.field-row { display:flex; gap:var(--sp-2); }
.field-row .field { flex:1; margin-bottom:0; }
@media (max-width:480px) { .field-row { flex-direction:column; gap:var(--sp-3); } }
.btn {
padding:var(--sp-2) 14px; border-radius:var(--radius-pill); border:1px solid var(--glass-border-dark); background:var(--surface); color:var(--text);
font-weight:600; font-size:var(--fs-14); cursor:pointer; font-family:inherit; transition:var(--transition); letter-spacing:-0.01em;
box-shadow:var(--elev-1);
}
/* One UI press feedback: a gentle scale plus a slight brightness dip,
easing back out. Not a spring — the release should not bounce. */
.btn:active { background:var(--bg); transform:scale(0.97); filter:brightness(0.94); }
@media (hover:hover) {
.btn:hover { transform:translateY(-1px); box-shadow:var(--elev-2); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--elev-2); }
}
.btn-primary { background:var(--accent); color:var(--accent-inverse); border-color:var(--accent); box-shadow:var(--elev-1); }
.btn-primary:active { opacity:0.88; }
.btn-danger { border-color:var(--danger); color:var(--danger-ink); }
.btn-danger:active { background:var(--danger-soft); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.slot {
border:1.5px dashed var(--glass-border-dark); background:transparent; display:flex; align-items:center; justify-content:center;
min-height:44px; cursor:pointer; color:var(--text-tertiary); gap:6px; font-weight:500; font-size:var(--fs-14);
border-radius:var(--radius-lg); transition:var(--transition);
}
.slot:active { border-color:var(--text-secondary); color:var(--text); background:var(--surface); }
.slot:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Modal */
.modal { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity 200ms; }
.modal.open { opacity:1; pointer-events:auto; }
.modal-backdrop {
position:absolute; inset:0; background:rgba(0,0,0,0.15);
backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
transition:background 200ms, backdrop-filter 240ms ease, -webkit-backdrop-filter 240ms ease;
}
.modal.open .modal-backdrop { backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
[data-theme="dark"] .modal-backdrop { background:rgba(0,0,0,0.35); }
.modal-panel {
position:relative; margin-top:auto; background:var(--surface);
border:1px solid var(--glass-border); border-radius:var(--radius-2xl) var(--radius-2xl) 0 0; max-height:92vh; overflow:hidden;
display:flex; flex-direction:column; transform:translateY(100%); box-shadow:var(--shadow-glass);
/* Asymmetric window motion: the closed state's transition governs the
CLOSE (quick ease-in exit); .modal.open overrides it for the OPEN.
The open used to overshoot past its resting point (0.22,1.3,0.36,1)
and rebound — bottom sheets are the surface One UI is most recognised
by, and a sheet that bounces is the single loudest tell that this is
not One UI. It now decelerates into place and stops. */
transition:transform 220ms cubic-bezier(0.4,0,1,1);
}
.modal.open .modal-panel { transition:transform 380ms cubic-bezier(0.22,0.25,0,1); }
/* Color-coded modal headers */
.modal-panel.modal-budget .modal-header { border-top:3px solid var(--accent); }
.modal-panel.modal-event .modal-header { border-top:3px solid var(--success); }
.modal-panel.modal-goal .modal-header { border-top:3px solid var(--warning); }
.modal-panel.modal-account .modal-header { border-top:3px solid var(--text-tertiary); }
.modal-panel.modal-type .modal-header { border-top:3px solid var(--accent); }
.modal-panel.modal-profile .modal-header { border-top:3px solid var(--text-tertiary); }
.modal-panel.modal-backup .modal-header { border-top:3px solid var(--text-tertiary); }
.modal-panel.modal-confirm .modal-header { border-top:3px solid var(--danger); }
.modal-panel.modal-copy .modal-header { border-top:3px solid var(--accent); }
.modal.open .modal-panel { transform:translateY(0); }
@media (min-width:768px) {
/* Centered dialog: rises and scales gently into place. Same de-bouncing
as the sheet — it arrives and settles rather than overshooting. */
.modal-panel {
margin:auto auto var(--sp-6); border-radius:var(--radius-xl); max-height:85vh; width:100%; max-width:520px;
transform:translateY(24px) scale(0.94);
transition:transform 200ms cubic-bezier(0.4,0,1,1);
}
.modal.open .modal-panel { transform:translateY(0) scale(1); transition:transform 360ms cubic-bezier(0.22,0.25,0,1); }
}
/* Bottom-sheet drag handle. Real, not decorative — setupSheetDrag() in
app.js drags the panel from this strip and dismisses it past a quarter
of its height. A handle that cannot be dragged is a false affordance,
which is worse than no handle.
Gated at max-width rather than switched off in the min-width:768px
block above, because that block sits EARLIER in the file and media
queries add no specificity — the base rule would simply win and the
handle would keep showing on a centred desktop dialog, which is
exactly what happened on the first attempt. Scoping it positively
makes source order irrelevant. */
.modal-header { position:relative; padding:var(--sp-4) 20px 0; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; touch-action:none; }
@media (max-width:767px) {
.modal-panel::before {
content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%);
width:40px; height:4px; border-radius:2px; background:var(--border);
z-index:3; pointer-events:none;
}
/* Room for the handle above the title. Must come AFTER the base
.modal-header rule directly above, for the same source-order reason. */
.modal-header { padding-top:var(--sp-6); }
}
.modal-header h3 { font-size:var(--fs-16); font-weight:600; letter-spacing:-0.02em; }
.modal-close {
width:28px; height:28px; border-radius:50%; border:none; background:var(--bg); color:var(--text-secondary);
display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition);
}
.modal-close:hover { background:var(--accent-soft); color:var(--text); }
.modal-close:active { background:var(--accent-soft); transform:scale(0.95); }
.modal-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.modal-overflow {
position:absolute; top:calc(100% + 4px); right:0; z-index:10;
background:var(--surface-solid); border:1px solid var(--glass-border-dark); border-radius:var(--radius-md);
box-shadow:var(--shadow-glass); min-width:180px; display:none; flex-direction:column; padding:var(--sp-1);
transform-origin:top right;
animation:menuPop 0.28s cubic-bezier(0.22,0.25,0,1);
}
.modal-overflow.active { display:flex; }
.modal-overflow-item {
display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 10px; border-radius:var(--radius-sm);
background:transparent; border:none; color:var(--text-secondary); font-size:var(--fs-14); font-weight:500;
cursor:pointer; font-family:inherit; transition:var(--transition); text-align:left; white-space:nowrap;
}
.modal-overflow-item:hover, .modal-overflow-item:active { background:var(--bg); color:var(--text); }
.modal-overflow-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.modal-body { padding:var(--sp-4) 20px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }
.modal-footer {
padding:10px 20px calc(10px + env(safe-area-inset-bottom)); display:flex; justify-content:flex-end; gap:var(--sp-2);
border-top:1px solid var(--glass-border-dark); flex-shrink:0;
}
.segmented {
display:flex; background:var(--bg); border-radius:var(--radius-md); padding:3px; gap:3px; margin-bottom:var(--sp-3); box-shadow:var(--inset);
}
.segmented-btn, .type-btn {
flex:1; padding:6px; border:none; background:transparent; border-radius:var(--radius-sm); font-size:var(--fs-14); font-weight:600;
color:var(--text-secondary); cursor:pointer; transition:var(--transition); font-family:inherit; letter-spacing:-0.01em;
text-align:center; line-height:1.2;
}
.segmented-btn.on, .type-btn.on { background:var(--surface); color:var(--text); box-shadow:var(--elev-1); }
.segmented-btn:focus-visible, .type-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Lifecycle tab stat cells — double as the status filter (replacing the
removed pill bar) and carry small reorder controls. */
.track-stat-cell {
position:relative; padding:var(--sp-1) 2px 2px; border-radius:var(--radius-sm); cursor:pointer;
border:1px solid transparent; transition:var(--transition);
}
@media (hover:hover) { .track-stat-cell:hover { background:var(--bg); } }
.track-stat-cell:active { transform:scale(0.97); }
.track-stat-cell.active { background:var(--accent-soft); border-color:var(--accent); }
.track-stat-cell:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.track-stat-move {
display:flex; justify-content:center; gap:2px; margin-bottom:2px; opacity:0.5; transition:var(--transition);
}
@media (hover:hover) { .track-stat-cell:hover .track-stat-move { opacity:1; } }
.track-move-btn {
width:16px; height:14px; border:none; background:transparent; color:var(--text-tertiary); cursor:pointer;
font-size:var(--fs-12); line-height:1; border-radius:3px; font-family:inherit; padding:0;
}
@media (hover:hover) { .track-move-btn:hover:not(:disabled) { background:var(--surface); color:var(--text); } }
.track-move-btn:disabled { opacity:0.25; cursor:default; }
.track-move-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.filter-bar { display:flex; align-items:center; gap:5px; margin-bottom:var(--sp-3); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent); -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent); }
.filter-bar .hfilter-dd { min-height:40px; }
.filter-bar::-webkit-scrollbar { display:none; }
.item-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.item-row .inp { flex:1; }
.autocomplete-list {
position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface-solid); border:1px solid var(--glass-border-dark);
border-radius:var(--radius-md); box-shadow:var(--shadow-glass); max-height:180px; overflow-y:auto; z-index:50; display:none;
}
.autocomplete-list.active { display:block; transform-origin:top left; animation:menuPop 0.24s cubic-bezier(0.22,0.25,0,1); }
.autocomplete-item { padding:var(--sp-2) var(--sp-3); cursor:pointer; font-size:var(--fs-14); font-weight:500; border-bottom:1px solid var(--glass-border-dark); transition:background 150ms; }
.autocomplete-item:hover, .autocomplete-item.active { background:var(--bg); }
.autocomplete-item:last-child { border-bottom:none; }
.input-wrapper { position:relative; }
.input-prefix { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-tertiary); font-weight:600; font-size:var(--fs-16); }
.input-prefix + input { padding-left:28px; }
.toast-container { position:fixed; top:12px; right:12px; z-index:2000; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast {
position:relative; padding:10px 14px 10px var(--sp-4); border-radius:var(--radius-lg); background:var(--surface);
border:1px solid var(--glass-border); box-shadow:var(--shadow-glass); font-size:var(--fs-14); font-weight:600; animation:toastIn 320ms var(--ease-spring) forwards; pointer-events:auto; overflow:hidden;
}
.toast::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--success); }
.toast.ok { color:var(--text); }
.toast.ok::before { background:var(--success); }
.toast.err { color:var(--danger); }
.toast.err::before { background:var(--danger); }
@keyframes toastIn { from { transform:translateX(16px) scale(0.96); opacity:0; } to { transform:translateX(0) scale(1); opacity:1; } }
/* The One UI screen title. This class is the per-surface title and nothing
else — exactly five uses, all in static markup — so it can carry the
whole signature without leaking into card headings.
The size jump from 15px is the point, not a side effect: One UI's look
depends on a deliberate CONTRAST between a dominant screen title and a
calm, smaller body scale. At 15px it was merely the largest thing on the
screen; at 30px it anchors it. Not capped with nowrap/ellipsis on
purpose — at max OS font scale it should wrap to two lines rather than
truncate a screen's own name. */
.home-title {
font-size:var(--fs-28); font-weight:600; letter-spacing:-0.022em;
margin:2px 0 18px; line-height:1.22; color:var(--text);
}
/* Galaxy-class and up gets the top of the 30-34 range; compact phones stay
at 30 so a long title like "Product Lifecycle" still fits one line. */
@media (min-width:400px) { .home-title { font-size:var(--fs-28); } }
/* Group headings. Deliberately NOT taken to the brief's 20-22px "Section"
size: this is a dense financial app where these repeat six-plus times per
screen, and at 20px they would compete with the screen title instead of
sitting under it. Going from a 9px uppercase micro-eyebrow to a 14px
sentence-case heading is the change that matters — One UI does not
use letterspaced all-caps eyebrows. */
.section-title {
font-size:var(--fs-16); font-weight:600; color:var(--text-secondary); text-transform:none;
letter-spacing:-0.01em; margin-bottom:var(--sp-3);
display:flex; align-items:center; gap:var(--sp-2);
}
.section-title::before { content:''; width:3px; height:14px; border-radius:2px; background:var(--accent); opacity:0.85; flex-shrink:0; }
.type-label { display:block; font-size:var(--fs-12); font-weight:600; color:var(--text-secondary); letter-spacing:0; margin-bottom:var(--sp-2); }
/* The frequency row: four pills that scroll rather than wrap, so "how
often" stays one line and one question (round-four board 5). */
.freq-row {
display:flex; gap:var(--sp-1); background:var(--bg); border-radius:var(--radius-md); padding:var(--sp-1);
box-shadow:var(--shadow-neu-inset); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.freq-row::-webkit-scrollbar { display:none; }
.freq-row .type-btn { flex:0 0 auto; padding-left:var(--sp-3); padding-right:var(--sp-3); white-space:nowrap; }
.freq-stop { margin-top:var(--sp-2); margin-bottom:0; }
.freq-stop .picker-trigger { padding:10px var(--sp-3); font-size:var(--fs-14); }
.split-body { margin-bottom:var(--sp-2); }
.type-toggle {
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-1); background:var(--bg); border-radius:var(--radius-md); padding:var(--sp-1); box-shadow:var(--shadow-neu-inset);
}
@media (min-width:560px) { .type-toggle { grid-template-columns:repeat(6,1fr); } .type-btn { font-size:var(--fs-14); } }
.picker-trigger { cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.picker-trigger::after { content:''; width:7px; height:7px; border-right:1.5px solid var(--text-tertiary); border-bottom:1.5px solid var(--text-tertiary); transform:rotate(45deg); margin-left:6px; transition:var(--transition); }
.picker-trigger:active::after { border-color:var(--text-secondary); }
.picker-list { display:flex; flex-direction:column; gap:2px; }
.picker-item {
padding:var(--sp-3) 14px; border-radius:var(--radius-md); font-size:var(--fs-16); font-weight:500; color:var(--text);
cursor:pointer; transition:background 150ms; text-align:center; border:1px solid transparent;
}
.picker-item.on { background:var(--bg); font-weight:600; border-color:var(--glass-border-dark); }
.picker-item:active { background:var(--surface-solid); }
.picker-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.picker-done { margin-top:10px; width:100%; }
.date-cols { display:flex; gap:6px; height:260px; }
.date-col { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; border-right:1px solid var(--glass-border-dark); padding-right:3px; }
.date-col:last-child { border-right:none; padding-right:0; }
.date-col-label { text-align:center; font-size:var(--fs-12); font-weight:600; color:var(--text-secondary); text-transform:none; letter-spacing:0; padding:6px 0; position:sticky; top:0; background:var(--surface); z-index:5; }
.backup-row { display:flex; align-items:center; gap:var(--sp-2); padding:10px 0; border-bottom:1px solid var(--glass-border-dark); }
.backup-row:last-child { border-bottom:none; }
.backup-info { flex:1; min-width:0; }
.backup-name { font-size:var(--fs-14); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; }
.backup-meta { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; margin-top:2px; }
.backup-actions { display:flex; gap:5px; flex-shrink:0; }
.backup-actions button { padding:5px var(--sp-2); border-radius:var(--radius-sm); border:1px solid var(--glass-border-dark); background:transparent; font-size:var(--fs-14); font-weight:600; cursor:pointer; font-family:inherit; transition:var(--transition); }
.backup-actions button:active { transform:scale(0.96); }
.backup-actions button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.backup-actions .restore-btn { color:var(--success-ink); border-color:var(--success); }
.backup-actions .restore-btn:active { background:var(--success-soft); }
.backup-actions .del-btn2 { color:var(--danger-ink); border-color:var(--danger); }
.backup-actions .del-btn2:active { background:var(--danger-soft); }
.copy-filter-row { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
/* Real s — must clear the 16px zoom floor even though they're compact. */
.copy-filter-row .inp { flex:1; min-width:100px; font-size:var(--fs-input); padding:var(--sp-2) 10px; }
.copy-tx-row { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--glass-border-dark); cursor:pointer; }
.copy-tx-row:last-child { border-bottom:none; }
.copy-tx-row .cb { width:16px; height:16px; min-width:16px; border-radius:4px; border:1.5px solid var(--glass-border-dark); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); background:transparent; }
.copy-tx-row .cb.on { background:var(--accent); border-color:var(--accent); color:var(--accent-inverse); }
.copy-tx-info { flex:1; min-width:0; }
.copy-tx-title { font-size:var(--fs-14); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; }
.copy-tx-meta { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; }
.copy-tx-amt { font-size:var(--fs-14); font-weight:600; flex-shrink:0; letter-spacing:-0.01em; }
/* History search chip (D6): collapsed to a 36px circle beside the filter
chips; expands on tap and stays expanded while a query is present, so
an active search is never invisible. */
/* History title row with the month summary (design prototypes). */
/* ── Accounts ── */
.acc-row { display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid var(--glass-border-dark); }
.acc-row:last-child { border-bottom:none; }
.acc-name { flex:1; min-width:0; display:flex; flex-direction:column; font-size:var(--fs-14); font-weight:600; }
.acc-sub { font-size:var(--fs-14); font-weight:500; color:var(--text-tertiary); }
.acc-bal { font-size:var(--fs-14); font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0; }
/* Owed is not held. The colour is the fastest way to stop a card reading
like money in the bank. */
.acc-bal.acc-owed, .acc-bal.acc-neg { color:var(--danger-ink); }
.acc-divider {
font-size:var(--fs-12); font-weight:600; letter-spacing:0; text-transform:none;
color:var(--text-tertiary); margin:10px 0 2px;
}
.acc-total { border-top:1px solid var(--glass-border); border-bottom:none; margin-top:var(--sp-1); padding-top:9px; }
.acc-total .acc-name { font-weight:600; }
.acc-unassigned {
display:block; width:100%; margin-top:var(--sp-2); padding:var(--sp-2) 10px; min-height:44px;
border:1px dashed var(--glass-border-dark); border-radius:var(--radius-md);
background:none; color:var(--text-secondary); font-family:inherit; font-size:var(--fs-14);
font-weight:600; text-align:left; cursor:pointer;
}
@media (hover:hover) { .acc-unassigned:hover { color:var(--text); background:var(--bg); } }
.acc-empty { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; padding:6px 0; line-height:1.5; }
/* Where a bank account closes the month (round six, board 6). */
.acc-proj { margin:-2px 0 6px; font-size:var(--fs-14); }
.acc-proj-sum {
display:flex; flex-wrap:wrap; align-items:center; gap:2px var(--sp-2); min-height:44px; padding:6px 0;
list-style:none; cursor:pointer; color:var(--text-secondary); font-weight:500;
}
.acc-proj-sum::-webkit-details-marker { display:none; }
.acc-proj-sum::after { content:'›'; margin-left:auto; color:var(--text-tertiary); transition:transform 200ms var(--ease-out); }
.acc-proj[open] .acc-proj-sum::after { transform:rotate(90deg); }
.acc-proj-sum:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }
.acc-proj-head b { color:var(--text); font-variant-numeric:tabular-nums; }
.acc-proj-close { color:var(--text-tertiary); }
.acc-proj-body { padding:2px 0 6px 10px; border-left:2px solid var(--glass-border-dark); }
.acc-proj-title {
font-size:var(--fs-14); font-weight:600; letter-spacing:0; text-transform:none;
color:var(--text-tertiary); margin-bottom:2px;
}
.acc-proj-row { display:flex; align-items:baseline; gap:var(--sp-2); padding:2px 0; }
.acc-proj-name { flex:1; min-width:0; color:var(--text-secondary); }
.acc-proj-tag { margin-left:6px; font-size:var(--fs-12); font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-tertiary); }
.acc-proj-amt { font-weight:600; font-variant-numeric:tabular-nums; }
.acc-proj-amt.neg { color:var(--text); }
.acc-proj-amt.pos { color:var(--success-ink); }
.acc-proj-note { margin:var(--sp-1) 0 0; font-size:var(--fs-14); color:var(--text-tertiary); line-height:1.5; }
/* ── Accounts · the manager ── */
.acc-item { border-bottom:1px solid var(--glass-border-dark); }
.acc-item:last-of-type { border-bottom:none; }
/* An archived account is still readable — its history did not go
anywhere — it simply stops being offered. */
.acc-item--archived { opacity:0.55; }
.acc-item-main {
display:flex; align-items:baseline; gap:10px; width:100%; min-height:48px; padding:10px var(--sp-1);
border:none; background:none; font-family:inherit; color:var(--text); text-align:left; cursor:pointer;
border-radius:var(--radius-sm);
}
@media (hover:hover) { .acc-item-main:hover, .acc-card-row:hover { background:var(--bg); } }
.acc-item-name { flex:1; min-width:0; display:flex; flex-direction:column; font-size:var(--fs-14); font-weight:600; }
/* The name and its tag are a ROW inside the column. As bare children of
a flex column the tag became its own item and stretched the full width
of the sheet. */
.acc-item-title { display:flex; align-items:center; gap:6px; min-width:0; }
.acc-tag {
display:inline-block; font-size:var(--fs-12); font-weight:600; letter-spacing:0;
text-transform:none; color:var(--text-tertiary); border:1px solid var(--glass-border-dark);
padding:1px 5px; border-radius:var(--radius-sm);
}
/* A card is indented under the account it draws on, because that
relationship is the whole point of it being a card. */
.acc-card-row {
display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px var(--sp-1) 6px 18px;
border:none; background:none; font-family:inherit; color:var(--text-secondary);
text-align:left; cursor:pointer; border-radius:var(--radius-sm); font-size:var(--fs-14);
}
.acc-card-name { flex:1; min-width:0; font-weight:500; }
.acc-card-go { font-size:var(--fs-14); font-weight:600; color:var(--accent); }
.acc-add-row { display:flex; gap:var(--sp-2); margin-top:14px; }
.acc-add-row .btn { flex:1; justify-content:center; min-height:44px; }
.acc-offer {
display:flex; flex-direction:column; gap:2px; width:100%; margin-bottom:var(--sp-3); padding:var(--sp-3);
border:1px dashed var(--accent); border-radius:var(--radius-md); background:var(--accent-soft);
font-family:inherit; text-align:left; cursor:pointer; min-height:44px;
}
.acc-offer-title { font-size:var(--fs-14); font-weight:600; color:var(--accent); }
.acc-offer-sub { font-size:var(--fs-14); font-weight:500; color:var(--text-secondary); }
.acc-kinds { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-1); }
.acc-hint { font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; line-height:1.5; margin:-2px 0 var(--sp-3); }
.acc-archive { width:100%; justify-content:center; min-height:44px; margin-top:6px; }
/* ── The month hand-off (board 6) ── */
.review-carry {
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px;
padding:6px 0; border-bottom:1px solid var(--border);
}
.review-carry:last-of-type { border-bottom:0; }
.review-carry-name { font-size:var(--fs-14); font-weight:600; }
.review-carry-amt { font-size:var(--fs-14); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.review-carry-drop { color:var(--text-tertiary); font-weight:500; }
/* The reason is the point. A change with no stated reason is a plan the
app wrote for you, which is one you never read. */
.review-carry-why { grid-column:1 / -1; font-size:var(--fs-14); color:var(--text-tertiary); font-weight:500; }
.review-carry-btn { width:100%; justify-content:center; margin-top:10px; min-height:44px; }
/* ── Events carved out of the month's plan (board 4) ── */
.plan-carve { font-size:var(--fs-14); font-weight:600; color:var(--text-secondary); margin:6px 0 0; }
/* A UPI id sits in the card list because it is the same kind of thing —
a name that draws on an account — so it says which it is. */
.acc-tag--upi { background:var(--accent-soft); color:var(--accent); }
/* ── Payment methods: ways to pay above, accounts & cards below ── */
.pm-section + .pm-section { margin-top:22px; padding-top:14px; border-top:1px solid var(--glass-border); }
.pm-section-title {
margin:0 0 var(--sp-1); font-size:var(--fs-12); font-weight:600; letter-spacing:0;
text-transform:none; color:var(--text-tertiary);
}
.pm-item { display:flex; align-items:center; gap:var(--sp-1); border-bottom:1px solid var(--glass-border-dark); }
.pm-item[hidden] { display:none; }
.pm-item:last-of-type { border-bottom:none; }
.pm-item-main { flex:1; min-width:0; }
/* Hidden or archived: still listed, still readable, visibly off. */
.pm-item--off .pm-item-main { opacity:0.55; }
/* A built-in is fixed on purpose. The lock says so, where greyed-out
controls would only look broken. */
.pm-tag-built { display:inline-flex; align-items:center; gap:3px; }
.pm-lock { flex-shrink:0; }
.pm-move { display:flex; flex-shrink:0; }
.pm-move-btn {
display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
border:none; background:none; color:var(--text-secondary); border-radius:var(--radius-sm); cursor:pointer;
}
.pm-move-btn:disabled { color:var(--text-tertiary); opacity:0.35; cursor:default; }
.pm-move-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (hover:hover) { .pm-move-btn:not(:disabled):hover { background:var(--bg); color:var(--text); } }
.pm-kinds { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-1); }
.pm-kinds .type-btn { gap:5px; }
.pm-tick { flex-shrink:0; }
.pm-kinds .type-btn:disabled { cursor:default; }
.pm-kinds .type-btn:disabled:not(.on) { opacity:0.5; }
.pm-actions { display:flex; gap:var(--sp-2); margin-top:6px; }
.pm-actions .btn { flex:1; justify-content:center; min-height:44px; }
.pm-actions + .acc-hint, .pm-default + .acc-hint { margin-top:var(--sp-2); }
/* The default for new entries, said where the ways to pay are kept. */
.pm-default {
display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3); padding:10px var(--sp-3);
border:1px solid var(--glass-border-dark); border-radius:var(--radius-md);
font-size:var(--fs-14); color:var(--text-secondary); line-height:1.45;
}
.pm-default b { color:var(--text); }
.pm-default.is-default { border-color:var(--accent); background:var(--accent-soft); }
.pm-default-btn { justify-content:center; min-height:44px; }
.pm-tag-default { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
/* A caption for a group of buttons, which a