/* app.css — design tokens + shell layout (Phase 5 scaffold, UI-SPEC §1). * * Tokens come from the operator's screenshots (D-009: screenshots outrank * taste). Sonnet sessions: refine components toward the screenshots; do NOT * change token names. Dark theme via [data-theme="dark"] (§8 Display Options). */ /* iOS text-autosizing lock: without this, standalone Safari inflates the * register/spending row text (payee + amount inherit ~1rem with no explicit * size) well past the intended compact density. Pin it to 100% everywhere. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ---------- icon system (icons.js): one stroke family, currentColor ---------- * Every SVG icon inherits the colour of its button/text, so dark/light parity * is automatic (CARDINAL rule 14). Default 1.15em box; call sites scale up. */ .ico { width: 1.15em; height: 1.15em; aspect-ratio: 1; display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; } /* Standard visually-hidden utility: present in the accessibility tree, zero * visual footprint. Same technique as the existing bespoke `.sync-copy` / * `.sidebar.collapsed .sidebar-footer .sync-copy` pattern, generalised so any * accessible-only label keeps no layout footprint. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { --canvas: #f2efe6; /* warm cream app background (mobile/tablet) */ --canvas-desktop: #ffffff; /* Win11 content canvas is plain white (§11) */ --card: #ffffff; --ink: #1c1c28; --ink-muted: #6f6f80; --hairline: rgba(0, 0, 0, 0.08); /* Edge for the floating frosted-glass chrome (tab bar, settings gear, privacy * eye, scroll-to-top disc). These pills float OVER content and need a slightly * stronger rim than an inline divider to read as glass — but they must all use * the SAME rim (operator 2026-07-13 congruence pass). One token = one edge, * both themes; no more per-selector hardcoded rgba (rule 14). Light = the * plain hairline; dark = a touch heavier so the rim survives the blur. */ --chrome-edge: var(--hairline); --chrome-control-fill: color-mix(in srgb, var(--card) 30%, transparent); --chrome-control-shadow: 0 2px 10px rgba(0, 0, 0, .18); /* BLURPLE (operator 2026-07-15: a bit more blue). The app draws every "blue" * surface from this one token: buttons, links, add-flow pickers, payee/category * text, geo arrows, charts and Plan accents. Dark mode inherits this too. */ --accent: #4f6ff2; /* bluer blurple; was #6366f1 */ --accent-ink: #ffffff; --selected-date-ink: #101018; /* Control contract (D-131): every action surface consumes this semantic * family, even when a route/theme has its own broader accent vocabulary. */ --control-accent: var(--accent); --control-accent-ink: var(--accent-ink); --control-secondary-bg: var(--btn-secondary-bg); --control-secondary-bg-hover: var(--btn-secondary-bg-hover); --control-secondary-ink: var(--btn-secondary-ink); --control-neutral-bg: var(--chip); --control-neutral-ink: var(--ink-muted); --control-danger: #c62828; --control-danger-ink: #ffffff; --control-selected-bg: var(--control-accent); --control-selected-ink: var(--control-accent-ink); --control-switch-off-bg: var(--control-neutral-bg); --control-switch-off-ink: var(--control-neutral-ink); --control-switch-on-bg: var(--control-accent); --control-switch-on-ink: var(--control-accent-ink); --clearing-switch-on-bg: var(--pos); /* Shared standalone-dismiss face. The transaction-sheet screenshot is the * canonical theme: a round card-coloured disc with ordinary ink, never a * one-off transparent or outlined X on another surface. */ --close-control-bg: var(--card); --close-control-ink: var(--ink); --close-control-shadow: 0 1px 4px rgba(0, 0, 0, .12); /* Compact category/reminder lozenges use a deliberately lighter accent edge. * Both derive from theme tokens so dark/current stay paired. */ --status-lozenge-outline: color-mix(in srgb, var(--accent) 60%, var(--accent-ink)); /* The chip's TEXT is the same blurple as its outline (operator 01/09/2026), * but text is held to a contrast floor an edge is not: the outline mix * (accent 60% + white) measures 2.26:1 on the light register's white ground * at 13.12px, below the 4.5:1 AA body threshold, while reading 7.2:1 in dark. * This token is therefore the SAME hue read as ink — the light theme darkens * the accent by the smallest amount that clears AA (the bare accent measured * 4.30:1, just under), while dark uses the light-blurple mix itself, which * reads 7.2:1 against the near-black ground. Each theme lands on the LIGHTEST * blurple that still passes, which is what "light blurple text" has to mean * on two opposite grounds. */ --status-lozenge-ink: color-mix(in srgb, var(--accent) 88%, var(--ink)); /* Touch popup terminals are literal source chrome: a larger white-on-black * confirmation disc paired with an equally sized white back disc. Fixed * semantic inks keep that contrast identical in Current and dark themes. */ --touch-popup-terminal-size: var(--ctl-h-lg); --touch-popup-confirm-bg: var(--selected-date-ink); --touch-popup-confirm-ink: var(--accent-ink); --touch-popup-back-bg: var(--accent-ink); --touch-popup-back-ink: var(--selected-date-ink); --scheduled-fill: color-mix(in srgb, var(--accent) 8%, var(--card)); --scheduled-fill-strong: color-mix(in srgb, var(--accent) 14%, var(--card)); /* Enabled-SECONDARY-button semantic state (D-102 part D, 19/08/2026): a pale * accent-derived fill, distinct from a disabled control and weaker than a * selected/open one. Dedicated token, not --chip — --chip also feeds * non-button surfaces (informational chips, pills) that must NOT go blue. * Derives from --accent/--card so Current and dark mode cannot drift. * all inherit it with no per-theme redeclaration. */ --btn-secondary-bg: color-mix(in srgb, var(--accent) 12%, var(--card)); --btn-secondary-bg-hover: color-mix(in srgb, var(--accent) 20%, var(--card)); --btn-secondary-ink: color-mix(in srgb, var(--accent) 78%, var(--ink)); --gold-metal: #c8952b; /* metallic gold companion to the blue mark */ --pos: #6b8e23; /* money green family */ --pos-pill: #dcedc8; --neg: #c62828; --neg-pill: #fdd8d4; /* Plan tab, sampled from the YNAB screenshot (IPP/IPL): the Ready-to-Assign * banner and the positive Available pills share one bright lime; group-header * bands are a hair warmer than the cream canvas; category rows are pure white; * the swipe "Snooze Target" action is periwinkle. */ --rta-fill: #bae677; /* bright lime — RTA banner + positive avail pill */ --rta-ink: #33471c; /* dark olive-green text on lime */ --plan-group-bg: #f4f2eb; /* warm group-header band */ --plan-row-bg: #ffffff; /* category rows are white on the cream canvas */ --snooze: #7276f6; /* periwinkle "Snooze Target" swipe action */ --gold: #b8860b; /* "best value" highlight (unit pricer) */ --gold-soft: #9a6b00; /* mixed-unit warning text */ --amber: #e07b00; /* foreign-currency code + uncleared-filter tint */ --amber-ink: #ffffff; /* text on a solid amber box */ /* iOS Auto-Assign sheet, sampled from the screenshot: deep-olive button, a * very pale-green popover face, light-grey mode pills. */ --aa-green: #4c6a1e; --aa-green-soft: #eef4e0; --aa-pill: #d7d7d9; --chip: #ececf1; --sidebar: #1d2035; /* desktop dark navy */ --sidebar-ink: #e8e9f2; --sidebar-muted: #9a9db8; --tab-inactive: #3a3a44; /* bottom-tab label, unselected (Part 6) */ --adjust-teal: #00a3a3; /* reconcile-adjustment one-off, kept unique (Part 6) */ /* Semantic paint tokens. Component rules consume these names; theme values * live here once so Current and dark mode cannot drift independently. */ --pos-ink: #ffffff; --neg-ink: #ffffff; --aa-ink: #ffffff; --chart-ink: #ffffff; --chart-halo: rgba(0, 0, 0, .28); --boarding-field-art: radial-gradient(120% 120% at 50% 38%, #1b2559 0%, #141c46 46%, #0c1230 100%); --boarding-brand-ink: #e8c766; --boarding-badge-ink: #b9c3e6; --sidebar-hover: rgba(255, 255, 255, .08); --sidebar-active: rgba(255, 255, 255, .16); --surface-hover: rgba(0, 0, 0, .05); --surface-hover-soft: rgba(0, 0, 0, .04); --sheet-scrim: rgba(20, 20, 30, .45); --sheet-scrim-clear: rgba(20, 20, 30, 0); --sheet-scrim-soft: rgba(20, 20, 30, .28); --modal-scrim: rgba(0, 0, 0, .42); --zebra-row: rgba(0, 0, 0, .035); --subline-row: rgba(0, 0, 0, .02); --rec-warning-fill: color-mix(in srgb, var(--neg) 22%, transparent); --options-face: #23233a; --options-ink: #f2f2f7; --options-rule: rgba(255, 255, 255, .16); --options-selected: rgba(255, 255, 255, .18); --options-hover: rgba(255, 255, 255, .12); --options-hover-strong: rgba(255, 255, 255, .28); --options-focus: #9db4ff; --cover-close-fill: rgba(0, 0, 0, .28); --cover-pill-fill: rgba(0, 0, 0, .34); --edge-back-shadow: -12px 0 24px rgba(0, 0, 0, .18); --preview-light: #ffffff; --preview-dark: #15151d; --ca-light: rgb(255 255 255 / var(--ca-strength)); --flag-red: #c62828; --flag-orange: #e07b00; --flag-yellow: #e0c000; --flag-green: #6b8e23; --flag-blue: #2b6cd4; --flag-purple: #7c5cd6; --swipe-edit: #f59e0b; --chart-1: #2a78d6; --chart-2: #008300; --chart-3: #e87ba4; --chart-4: #eda100; --chart-5: #1baf7a; --chart-6: #eb6834; --chart-7: #4a3aa7; --chart-8: #e34948; --chart-other: #b8b8c4; --radius: 24px; --radius-s: 12px; /* Shared fixed-chrome geometry. Approval's touch dock anchors to the same * tab-bar metrics instead of carrying a second magic offset. */ --tab-bar-height: 63px; --tab-bar-bottom: max(env(safe-area-inset-bottom, 0px), clamp(14px, 5.22vw, 21px)); --approval-dock-gap: 0px; --approval-dock-fill: var(--card); /* control heights — one scale, no per-screen drift (Part 3) */ --ctl-h-sm: 34px; /* desktop-compact: register toolbar, dense filters */ --ctl-h-md: 44px; /* touch normal — iOS 44px min; never go below on touch */ --ctl-h-lg: 54px; /* primary: Save/Next dock, keypad DONE */ --ctl-pad-x-sm: .7rem; --ctl-pad-x-md: 1rem; --ctl-pad-x-lg: 1.2rem; /* type scale — collapse the 44-value sprawl to one ladder (Part 4) */ --fs-micro: .72rem; /* captions, chip sub-labels, axis labels */ --fs-label: .82rem; /* secondary labels, muted row meta */ --fs-body: .9rem; /* default body / list-row primary text */ --fs-value: 1rem; /* amounts, row values, primary numbers */ --fs-h3: 1.1rem; /* card titles, section headers */ --fs-h2: 1.3rem; /* screen sub-headers */ --fs-h1: 1.6rem; /* screen titles */ --fs-display: 2.4rem; /* the big amount readout in the Add sheet */ /* Track graph labels render at the SAME size as a Track subcategory row * (`.plan-row` is --fs-body). The chart is an SVG whose every user unit is * multiplied by cardWidth/480, so a fixed font-size rendered 10.26px in a * 518px panel and 22px in a 1358px one; the chart now draws 1:1 and reads * this token, so the two agree at EVERY width instead of at one fitted * monitor size (operator 31/08/2026, reported repeatedly). */ --fs-track-chart-label: var(--fs-body); /* Approval review hero wash sampled from the literal selectapprove frame. * The light values are scoped through the component below; dark mode * re-derives the same roles from its canvas/ink tokens. */ --approval-hero-deep: #d0cdc6; --approval-hero-light: #e5dfd1; --approval-hero-mid: #dbd9ca; --approval-hero-low: #cccabd; --approval-ref-canvas: #f0ede6; --approval-ref-card: #fefefe; --approval-ref-chip: #eeece7; --approval-ref-accent: #4b43f5; /* Per-NODE value labels plotted inside a chart (operator 2026-07-14: the node * numbers on Big Picture and Most Frequent Categories read too small). They sit * above body text because they are the chart's actual data, competing with the * plotted marks around them — not prose. Their own rung, so nudging them can * never drag ordinary body text with it. * Bumped 1.02 → 1.18rem (operator 2026-07-14: "all such numbers need to be * bigger too"). This is the ONE rung every chart's node numbers sit on, so the * bump lands on Big Picture, Most Frequent and the trailing report together. */ --fs-graph-node: 1.18rem; /* Chart x-axis tick labels (.bar-xlabel), every chart. * * MEASURED, NOT ASSUMED (operator 2026-07-17: "on ios the xaxis fontsize is way * too small, make much bigger, of all graphs in HOME"). This value is in VIEWBOX * UNITS, not screen pixels: every chart draws into a 640-wide viewBox that * renders ~252px on a phone, a scale of 0.394. The old flat 10px therefore * painted at 10 × 0.394 ≈ 3.9 SCREEN PIXELS — which is the whole bug, and why * "it's 10px" looked fine in the stylesheet while being illegible on the device. * The same trap is recorded against the value labels above (and cost a previous * release a round of "the numbers are too small" reports). * * So: pick the SCREEN size wanted, then divide by the chart's measured scale. * phone (320px): viewBox 640 → 252px, scale 0.394 → the touch block sets 33 * units ≈ 13 screen px. * desktop (1440): viewBox 640 → 652px, scale 1.019 → this 10 lands at ~10.2 * screen px, which is already correct and dense, and is why * only iOS ever looked broken. Both figures measured in-browser * on the real Home charts, not derived on paper. */ --fs-graph-axis: 10px; /* radius tokens — end the 12/18/24 drift (Part 4, finding 4) */ --radius-card-desktop: 12px; --radius-card-touch: 24px; --radius-sheet-inner: 18px; /* motion — one vocabulary; all non-essential motion is reduced-motion aware */ --dur-fast: .12s; /* taps, press feedback, small colour swaps */ --dur-base: .2s; /* default transitions */ --dur-slow: .32s; /* sheet / modal entrances */ /* Add-sheet swipe-away exit. MEASURED from the operator's own reference * recording (ynabdismiss.MP4, 60fps, 29/07/2026) rather than chosen by feel: * tracking the keypad panel's top edge frame by frame gives a release-to-gone * fall of ~180ms, and the normalised travel fits cubic-bezier(.05,0,.55,.95) * to an RMSE of 0.004 across every sampled frame. * * The old value was .72s on --ease-standard, cubic-bezier(.4,0,.2,1) — a * DECELERATING curve, i.e. the exact inverse of the reference. That is the * operator's report ("hits a wall then resumes ... nonlinearly"): the sheet * leapt off the finger, then crawled through a long slow tail four times * longer than the real thing. The p1y=0 start below gives the required * near-zero initial velocity, and the curve accelerates from there. */ --dur-sheet-dismiss: .18s; --ease-sheet-dismiss: cubic-bezier(.05, 0, .55, .95); --dur-bubble-out: .6s; /* envelope-bubble retract (operator 2026-07-15: 0.6s, scale rebound — NOT a fade) */ --dur-bubble-in: .5s; /* envelope-bubble expand, with rebound overshoot at the top */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* enter/exit */ /* Canonical iOS slideout rebound. Applicable drawers, expanding cards and * conditional workflow rows use this token so refactors cannot silently * fall back to a flat generic easing curve. */ --ease-ios-rebound: cubic-bezier(.22, 1.28, .36, 1); --ease-spring: var(--ease-ios-rebound); } [data-theme="dark"] { --canvas: #15151d; --canvas-desktop: #15151d; --card: #1f1f2b; --ink: #ececf4; --ink-muted: #9a9aac; --hairline: rgba(255, 255, 255, 0.09); /* On the near-black ground the pale outline mix IS the legible reading * (measured 7.2:1), so chip ink and chip outline are literally one value * here — the operator's "same colour as the outline of the lozenge" is * exact in dark, and the light theme uses the full accent to clear AA. */ --status-lozenge-ink: var(--status-lozenge-outline); --approval-hero-deep: color-mix(in srgb, var(--canvas) 84%, var(--ink) 16%); --approval-hero-light: color-mix(in srgb, var(--canvas) 92%, var(--ink) 8%); --approval-hero-mid: color-mix(in srgb, var(--canvas) 86%, var(--ink) 14%); --approval-hero-low: color-mix(in srgb, var(--canvas) 78%, var(--ink) 22%); --approval-ref-canvas: var(--canvas); --approval-ref-card: var(--card); --approval-ref-chip: var(--chip); --approval-ref-accent: var(--accent); --chrome-edge: rgba(255, 255, 255, 0.14); --chip: #2b2b3a; --scheduled-fill: color-mix(in srgb, var(--accent) 14%, var(--card)); --scheduled-fill-strong: color-mix(in srgb, var(--accent) 22%, var(--card)); --pos-pill: #2c3a1e; --neg-pill: #45201c; /* Money red, lifted for dark (28/07/2026). The light-theme #c62828 scored * only 2.9:1 against the dark card and 2.53:1 inside its own --neg-pill — * every negative figure on a dark card was the app's dimmest text, in the * one colour that must never be missed. #ff6b6b clears 4.5:1 on both. Same * treatment --gold and --amber already carry for the same reason. */ --neg: #ff6b6b; --control-danger: #ff6b6b; --control-danger-ink: var(--canvas); --rta-fill: #4c6f23; /* muted deep lime for dark cards */ --rta-ink: #dcf0ac; /* light lime text on the dark fill */ --plan-group-bg: rgba(255, 255, 255, 0.045); --plan-row-bg: var(--card); --snooze: #7c80f0; --gold: #e6b34d; /* lighter goldenrod so "best value" reads on dark cards */ --gold-soft: #d9a441; --amber: #e59436; /* brighter amber so it reads on dark cards */ --amber-ink: #1a1206; /* Auto-Assign sheet on dark: keep the identifiable green, but a dark popover * face + darker pills so it belongs on a dark canvas (dark/light parity). */ --aa-green: #6b8e23; --aa-green-soft: #242c15; --aa-pill: #3a3a48; --sidebar: #12131f; --tab-inactive: #c7c9d6; --pos-ink: var(--canvas); --neg-ink: var(--canvas); --aa-ink: var(--canvas); --surface-hover: rgba(255, 255, 255, .05); --surface-hover-soft: rgba(255, 255, 255, .04); --zebra-row: rgba(255, 255, 255, .05); --subline-row: rgba(255, 255, 255, .03); --options-face: #2c2c44; --chart-1: #3987e5; --chart-2: #008300; --chart-3: #d55181; --chart-4: #c98500; --chart-5: #199e70; --chart-6: #d95926; --chart-7: #9085e9; --chart-8: #e66767; } * { box-sizing: border-box; } /* Native-app feel: protect interactive chrome from selection/callout while * leaving ordinary explanations, memos and readable values selectable. The * no-zoom deviation remains in the viewport contract; touch-action here only * prevents accidental double activation on controls. */ * { -webkit-tap-highlight-color: transparent; } button, a, summary, [role="button"], [role="tab"], .tab-bar, .sidebar, .fab-txn, .drag-handle, .swipe-row, .reorder-handle, .gesture-owner { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; } input, textarea, select, [contenteditable="true"], [contenteditable=""] { -webkit-user-select: text; user-select: text; } .text-selectable { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } /* Money/number fields opt OUT of selection entirely (operator 2026-07-11: * "disable the double-tap cut/copy/paste everywhere"): they are digit-stream * fields with the caret pinned to the end, so iOS/Android word-select — the * trigger for the cut/copy/paste bar — has nothing to offer and much to break. */ input[inputmode="numeric"], input[inputmode="decimal"] { -webkit-user-select: none; user-select: none; } /* Replaced elements (charts) must never force their intrinsic width onto a * flex/grid parent — that made whole tiles wider than the phone viewport and * clipped the right-hand figure (e.g. "$61.26 spent"). */ svg, img, canvas { max-width: 100%; } /* The hidden attribute must beat every author display rule (#onboarding grid, * #app flex, …) — without this, "element.hidden = true" silently does nothing. */ [hidden] { display: none !important; } /* iOS must never rubber-band horizontally / settle off-centre: html's * overflow-x:hidden propagates to the VIEWPORT (CSS root propagation), so the * page can't pan sideways; any wide child (nav strip, table) scrolls inside * its own box. overscroll-behavior-x stops the horizontal chain. * * THE DOCUMENT MUST BE THE SCROLLER (punch 21, tap-to-top root cause). The old * `html, body { height:100%; overflow-x:hidden }` made BODY a fixed-height * inner scroll container (overflow-x:hidden computes overflow-y to auto), so * every vertical scroll happened INSIDE the body element and the webview's * document scroller had 0 scrollable px. iOS's native status-bar * tap-to-scroll-to-top only ever scrolls the DOCUMENT scroller — so it was a * guaranteed no-op (v1.1.5's black-translucent change fixed the overlay, not * this). body now grows with content (min-height, no overflow clamp) so the * document itself scrolls, which also restores same-route scroll preservation * (shell.js reads window.scrollY). Verified in Chromium: pre-change the * document scroller reported 0 scrollable px, post-change it carries the full * page scroll. */ html, body { margin: 0; max-width: 100%; overscroll-behavior-x: none; } /* background on itself (item 5, 2026-07-15): the inline head script in * index.html sets data-theme before this stylesheet even loads, but until it * does there is nothing painted on the root element — body's background alone * left an unpainted white/black frame for that gap. Token-only, both themes * covered because [data-theme="dark"] redefines --canvas on this same html * element (the attribute selector below). */ html { height: 100%; overflow-x: hidden; background: var(--canvas); } body { min-height: 100%; } /* THE LAUNCH BAND (operator 03/08/2026, "ipad bottom animation.MP4" / * "iphone bottom animation.MP4": "the animation doesn't encompass the whole * screen when it should, due to this bottom bar thats blocking"). Measured off * the 60fps captures, not guessed: as iOS zooms the app card open from the * home-screen icon, the register rows are CLIPPED, a pale band sits below the * tab bar, and the bar itself floats mid-card instead of on the bottom edge. * * Root cause is `height: 100%` above, not the tab bar. A percentage height * resolves against the containing block, and during the launch zoom that block * is the CARD, which starts icon-sized and grows. So the document painted itself * short and the shortfall exposed the manifest's `background_color` (#eef1ff — * the pale band; app/manifest.json:6). The bar was never "blocking" anything: it * is `position: fixed` to that same short viewport, which is exactly why it * appeared to float mid-card. No z-index or sheet stacking is involved. * * `lvh` is the viewport at its LARGEST — the settled frame — so the root paints * the full screen from the zoom's first frame and there is no gap to expose. It * is the same trap, and the same fix, that `#boarding` already carries at its * `100lvh` line. Kept as a `min-height` FLOOR so a taller-than-viewport document * still scrolls, and scoped to `standalone` because in a browser TAB `lvh` * includes the space behind Safari's collapsible toolbar, where an unconditional * floor would reserve a strip of dead scroll under every page. * * TAP-TO-TOP IS UNAFFECTED (punch 21, documented above). That invariant needs * BODY to grow with content and carry no overflow clamp, so the DOCUMENT stays * the scroller. Both hold here: `height: auto` merely stops the root being * pinned to a percentage of the animating card, `min-height` is a floor rather * than a clamp, and no `overflow` is touched. The document scroller keeps the * full page scroll. */ @media all and (display-mode: standalone) { html { height: auto; min-height: 100%; min-height: 100lvh; } body { min-height: 100lvh; } } /* THE JUDDER (operator 30/07/2026: "judders occur over regular use... fields * like account or category slightly shift location"). Root cause, measured, not * guessed: `overflow-x: hidden` above makes the root's `overflow-y` compute to * AUTO (it can never stay `visible` once one axis is clipped), so the document * scrollbar appears and disappears as the page height crosses the viewport — * which happens constantly in normal use: a drawer opens, the approval banner * shows, select mode swaps the toolbar, a filter shortens the list. * * Each toggle changes the viewport width by one scrollbar (15px on the * operator's Win11 Firefox), and the register's `fr` tracks redistribute that * width. The tracks do NOT move together, which is why it reads as a judder * rather than a shift: measured frame-by-frame off "flag and cleared * judder.mp4", ACCOUNT and DATE held still (fixed `rem` tracks) while PAYEE * moved 18px, CATEGORY 8px, MEMO 1px and the amounts −5px. Reproduced live on * the dev register at the exact scrollbar crossing: CATEGORY −6px, MEMO −11px, * OUTFLOW −15px. * * Reserving the track permanently makes the width constant, so nothing reflows. * `scrollbar-gutter: stable` is the modern spelling and was MEASURED INERT here * — on html, on body, and on both — precisely because this root propagates its * overflow to the viewport, and the gutter property does not apply to the * element that has been propagated away from. `overflow-y: scroll` is what * actually holds. Verified: page-height changes now move nothing, and * `document.scrollingElement` is still with the full page scroll, so the * iOS tap-to-top document-scroller invariant documented above is untouched. * * DESKTOP ONLY. Touch surfaces use overlay scrollbars that take no width, so * there is no judder to fix there, and forcing a permanent track would paint a * dead gutter down the side of a phone. */ @media (hover: hover) and (pointer: fine) { html { overflow-y: scroll; } } /* ── Boarding screen (operator 2026-07-17) ────────────────────────────────── * Covers the unavoidable module-load + IndexedDB-open gap with the app's own * flat blue tree instead of an empty themed canvas. Lives high in this file because * it is paint-time chrome, like the html/canvas rules above it. * * Themed by tokens ONLY (--canvas / --text-dim), so the inline theme mirror in * index.html has already resolved light/dark before this paints — the boarding * screen can never flash the wrong palette (CARDINAL-adjacent: global rule 14, * dark/light parity is mandatory). * * The flat blue is a LOCAL constant, not a theme token: this is the brand * mark, deliberately identical on both themes. Only the field behind it changes. */ #boarding { position: fixed; --boarding-edge-extension: env(safe-area-inset-bottom, 0px); inset: 0 0 calc(-1 * var(--boarding-edge-extension)); /* iOS Safari/PWA: `inset:0` alone resolves against the SMALL viewport, so the * dynamic browser-chrome area at the bottom (which shrinks to reveal more page * as the tree animates) exposed the manifest's beige background_color under * the boarding overlay, clipping the bottom motif rows behind it. Fixed * inset sizing plus a LARGE-viewport minimum closes that gap without the * `100dvh` shrink that exposed the strip on touch webviews. */ width: auto; height: auto; min-height: 100vh; min-height: calc(100lvh + var(--boarding-edge-extension)); z-index: 9999; display: grid; place-items: center; /* Centre the tree+wordmark within the SAFE area, not the raw viewport, so a * notch / Dynamic Island / home-indicator on the operator's iPhone fleet * (CARDINAL 17, incl. the future-proof clause) can never crop the stage. The * padding shrinks only the grid-centred stage; the motif is position:absolute * at inset:-24%, so it still paints edge-to-edge under the insets. box-sizing * keeps the padding inside the fixed inset:0 box. Zero on non-notched screens * (env() resolves to 0), so this is inert everywhere else. */ box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* Deep, calm night field — a dark navy pooling darker toward the edges so the * flat blue tree reads clearly against it. The water-caustic effect was removed * (operator 2026-07-20: "looks terrible"); this is a flat, quiet backdrop that * carries on both themes and never competes with the wordmark. */ background: var(--boarding-field-art); /* iOS installed webviews can expose a home-indicator reserve beyond this * fixed layout box. The motif already overscans by 24%; clipping it here was * the exact reason that reserve showed only the root's flat colour. Let the * animated field paint through the browser-owned edge. */ overflow: visible; /* Opacity-only fade-out. The tree keeps growing THROUGH the fade — a growth * that froze at handoff read as the app stalling at the last moment. */ transition: opacity .42s cubic-bezier(.4, 0, .2, 1); pointer-events: none; /* never eats a tap, even mid-fade */ } /* The stage (tree + wordmark) rides above the backdrop. */ .boarding-stage { position: relative; z-index: 1; } #boarding.boarding-out { opacity: 0; } /* Self-dismiss backstop: if a boot dies before main.js can call boardingDone(), * the family must never be trapped behind a tree with no way forward. Pure CSS, * so it holds even if no JS runs at all. 6s is far past any real boot (the gap * this covers is ~0.3-1s) — long enough to never fire on a healthy slow open. */ #boarding { animation: boarding-failsafe 0s linear 6s forwards; } @keyframes boarding-failsafe { to { opacity: 0; visibility: hidden; } } .boarding-stage { display: grid; justify-items: center; gap: 18px; /* The whole stage lifts a little as it settles, so the growth reads as the * tree rising out of the page rather than inflating in place. */ animation: boarding-rise 1.6s cubic-bezier(.22, .61, .36, 1) both; } @keyframes boarding-rise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .boarding-tree { width: min(148px, 34vw); /* Explicit square, NOT height:auto. The art's own bbox is 526 units wide * against a 512 viewBox (it overhangs ~20 units left), and with * overflow:visible an auto height resolved the box to 121x110 — a visibly * squashed tree. Pinning aspect-ratio to the viewBox keeps it square at every * width; measured, not assumed. */ aspect-ratio: 1 / 1; height: auto; overflow: visible; /* the sway swings leaves past the viewBox edge */ /* GROWTH: bigger and taller at once. scaleY runs slightly ahead of scaleX so * the tree gains height faster than width — "growing taller" per the brief, * not a uniform zoom. transform-origin at the base pins the roots to the * ground: a centre origin would sink the trunk as it grew. * `both` holds the final frame — the tree must not snap back mid-fade. */ transform-origin: 50% 100%; animation: boarding-grow 2.8s cubic-bezier(.16, .84, .44, 1) both; } @keyframes boarding-grow { from { transform: scale(.82, .74); } to { transform: scale(1, 1); } } /* WIND: canopy leaves and trunk are animated separately and at different * strengths, because a real tree does not move as one rigid piece — this * split is the entire reason the markup has two s (canopy vs trunk). * * Within the canopy, EACH of the 17 leaf clusters (.leaf-1 .. .leaf-17) sways * on its OWN independent animation — different duration, delay and rotation * amplitude per leaf — rather than the whole rotating * as one rigid block. A single shared transform on the group reads as the * whole silhouette tilting like a stiff cutout; real leaves each catch the * gust a beat apart and swing by different amounts. Every leaf still pivots * at its own centre (transform-box: fill-box + transform-origin: center) so * each rotates about its own stem/base point (bottom of its bbox), not its * centre and not the SVG's (0,0) corner — a centre pivot spins the whole leaf * blade around its own middle, which reads as tumbling in place rather than * flapping from where it's attached to the branch. Durations/delays are * spread pseudo-randomly (not a clean arithmetic sequence) so the 17 leaves * never fall into a visible shared beat. */ .tree-canopy .leaf { transform-box: fill-box; transform-origin: 50% 100%; animation-name: leaf-sway; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes leaf-sway { 0%, 100% { transform: rotate(var(--leaf-a, -3deg)) translateX(var(--leaf-tx, -1px)) scale(1); } 50% { transform: rotate(var(--leaf-b, 3deg)) translateX(calc(var(--leaf-tx, -1px) * -1)) scale(var(--leaf-s, 1)); } } /* v1.41.1+ (operator 2026-07-20, third pass — "significantly more animated * like in a gale"): the leaf shapes carry no transform attribute of their own * (checked against the v1.24.0 fill-box/pre-squash-pivot trap before pushing * amplitude further — see project memory — so raising these numbers is safe * and stays on-canvas), so rotation/translate/scale go up another ~2x on top * of the prior pass, with shorter, more turbulent durations so the canopy * reads as caught in a real gust rather than a gentle breeze. */ .leaf-1 { --leaf-a: -17deg; --leaf-b: 15deg; --leaf-tx: -7px; --leaf-s: 1.14; animation-duration: 1.0s; animation-delay: -.10s; } .leaf-2 { --leaf-a: -13deg; --leaf-b: 19deg; --leaf-tx: 5.6px; --leaf-s: 1.18; animation-duration: 1.3s; animation-delay: -1.9s; } .leaf-3 { --leaf-a: -20deg; --leaf-b: 12deg; --leaf-tx: -4px; --leaf-s: 1.12; animation-duration: 1.1s; animation-delay: -.7s; } .leaf-4 { --leaf-a: -15deg; --leaf-b: 17deg; --leaf-tx: 7.6px; --leaf-s: 1.16; animation-duration: 1.4s; animation-delay: -2.6s; } .leaf-5 { --leaf-a: -11deg; --leaf-b: 21deg; --leaf-tx: -6px; --leaf-s: 1.20; animation-duration: 1.2s; animation-delay: -1.3s; } .leaf-6 { --leaf-a: -19deg; --leaf-b: 14deg; --leaf-tx: 4.6px; --leaf-s: 1.14; animation-duration: 1.0s; animation-delay: -2.2s; } .leaf-7 { --leaf-a: -14deg; --leaf-b: 18deg; --leaf-tx: -8px; --leaf-s: 1.18; animation-duration: 1.5s; animation-delay: -.4s; } .leaf-8 { --leaf-a: -17deg; --leaf-b: 11deg; --leaf-tx: 6.6px; --leaf-s: 1.12; animation-duration: 1.1s; animation-delay: -1.6s; } .leaf-9 { --leaf-a: -12deg; --leaf-b: 20deg; --leaf-tx: -5px; --leaf-s: 1.18; animation-duration: 1.4s; animation-delay: -2.9s; } .leaf-10 { --leaf-a: -21deg; --leaf-b: 16deg; --leaf-tx: 3.6px; --leaf-s: 1.14; animation-duration: 1.1s; animation-delay: -.9s; } .leaf-11 { --leaf-a: -13deg; --leaf-b: 13deg; --leaf-tx: -6.6px; --leaf-s: 1.16; animation-duration: 1.3s; animation-delay: -2.0s; } .leaf-12 { --leaf-a: -18deg; --leaf-b: 19deg; --leaf-tx: 8px; --leaf-s: 1.20; animation-duration: 1.6s; animation-delay: -1.1s; } .leaf-13 { --leaf-a: -10deg; --leaf-b: 15deg; --leaf-tx: -4.6px; --leaf-s: 1.12; animation-duration: 1.1s; animation-delay: -2.4s; } .leaf-14 { --leaf-a: -16deg; --leaf-b: 22deg; --leaf-tx: 5px; --leaf-s: 1.18; animation-duration: 1.4s; animation-delay: -.2s; } .leaf-15 { --leaf-a: -14deg; --leaf-b: 12deg; --leaf-tx: -7.6px; --leaf-s: 1.16; animation-duration: 1.2s; animation-delay: -1.7s; } .leaf-16 { --leaf-a: -20deg; --leaf-b: 17deg; --leaf-tx: 4px; --leaf-s: 1.14; animation-duration: 0.9s; animation-delay: -.6s; } .leaf-17 { --leaf-a: -12deg; --leaf-b: 18deg; --leaf-tx: -5.6px; --leaf-s: 1.18; animation-duration: 1.4s; animation-delay: -2.7s; } .tree-trunk { transform-origin: 50% 100%; animation: trunk-sway 4.1s ease-in-out infinite; } @keyframes trunk-sway { 0%, 100% { transform: rotate(-.35deg); } 50% { transform: rotate(.35deg); } } .boarding-word { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .18em; /* Boarding backdrop is a FIXED dark navy gradient regardless of theme (not * themed light/dark), so the wordmark needs its own fixed light colour, not * a UI text token — --text-dim was never defined anywhere, so it always * fell back to inherited (dark) text colour: unreadable on navy. */ color: var(--boarding-brand-ink); text-transform: uppercase; animation: boarding-word-in 1.1s ease-out .5s both; } .boarding-word-new { font-size: .78em; font-weight: 400; letter-spacing: .12em; color: var(--boarding-badge-ink); /* cool pale periwinkle vs the gold "ynab" — reads as a badge prefix */ margin-right: .35em; } @keyframes boarding-word-in { from { opacity: 0; } to { opacity: .85; } } /* Reduced motion: the boarding screen still EXISTS (it covers a real gap and * removing it would restore the blank canvas), but nothing sways, grows or * rises — it simply appears, already at full size, and still fades out. The * fade is a cross-fade of two static states, which is not vestibular motion. */ @media (prefers-reduced-motion: reduce) { .boarding-stage, .boarding-tree, .tree-canopy .leaf, .tree-trunk, .boarding-word { animation: none; } .boarding-word { opacity: .85; } } /* Boarding refresh: a quiet, animated brand scene instead of a fast floating canopy. */ :root { --boarding-field: #eef1ff; --boarding-field-deep: #dce4ff; --boarding-line: rgba(79,111,242,.27); --boarding-word-ink: #26336f; --boarding-new-ink: #6473ab; } html[data-theme="dark"] { --boarding-field: #111733; --boarding-field-deep: #242e67; --boarding-line: rgba(194,207,255,.24); --boarding-word-ink: #f3e7b7; --boarding-new-ink: #b9c3e6; } /* Installed touch webviews can expose a strip outside their fixed-layout * viewport (home-indicator / dynamic-chrome reserve). Paint the document root * with the same boarding field while the loader exists, so that browser-owned * edge can never reveal the manifest's old beige canvas. */ html:has(#boarding), body:has(#boarding) { background: var(--boarding-field); } #boarding { background:radial-gradient(95% 74% at 50% 42%,var(--boarding-field-deep),var(--boarding-field)); transition:opacity .42s cubic-bezier(.32,1.20,.50,1); } /* DEADZONE (operator 25/07/2026, iPad PWA): a flat, motif-free bar along the * bottom edge. Mechanism — `#boarding` is `position:fixed; inset:0`, which on an * installed iOS PWA lays out against the SMALL viewport, while the surface the * OS actually paints is the LARGE one. The difference (home-indicator reserve) * fell outside the overlay entirely, so the rule above painted it flat * `--boarding-field` with no motif. That flat fill is exactly the reported bar: * v1.61.0 fixed its COLOUR and v1.63.0 fixed the overlay's own clipping, but * neither put ANIMATION into a strip the overlay never covered. * Headless cannot reproduce this at all — Chromium resolves svh == lvh == dvh, * so the strip has zero height there and every past probe read green. The fix * therefore must not depend on measuring it: the motif gets its OWN fixed layer * sized to the LARGE viewport (`100lvh`), which by definition includes the * reserve, so the animation paints across it on any device geometry. On screens * where the two viewports are equal this is a no-op. */ /* OVERSCAN ANCHORING (operator 26/07/2026 — the bar was still there on iPhone AND on iPad in * BOTH orientations). Percentages here resolved against the SMALL viewport while iOS paints the * LARGE one, and `top:-24%` anchored the layer to that small box, so the field's bottom edge * landed short of the surface. What showed through underneath was `#boarding`'s own radial * gradient at its darkest stop (#0c1230) with no icons on it — a flat, dead, darker band exactly * where the screenshots show one. Three previous sessions hunted this as a viewport-unit or * home-indicator problem and every probe read green, because Chromium resolves svh == lvh == dvh * and the band has zero height there. * The fix removes the ambiguity instead of measuring it: anchor to the LARGE viewport in both * axes (`lvh`/`lvw`, which by definition include any browser-chrome or home-indicator reserve) * and overscan by a fixed 24% on every side. No percentage here resolves against a box whose * height depends on which viewport the OS decided to report. */ .boarding-motif { --icon-h:clamp(15px,3.1vw,60px); position:fixed; left:-24%; width:148%; top:-24%; height:148%; /* Large-viewport anchoring; the pair overrides the percentages above wherever supported. */ top:calc(-24 * 1lvh); height:calc(148 * 1lvh + var(--boarding-edge-extension)); left:calc(-24 * 1lvw); width:calc(148 * 1lvw); overflow:hidden; transform:rotate(-16deg) scale(1.06); color:var(--boarding-line); pointer-events:none; } .motif-row { position:absolute; left:-8%; width:116%; display:flex; align-items:center; justify-content:space-between; gap:clamp(2px,.6vw,8px); } /* Depth cue: size cycles small/medium/large every 3 rows (sawtooth, not * triangle — row 4 drops straight back to smallest after row 3's max), and * speed rides with size so the biggest (nearest) rows sweep fastest and the * smallest (farthest) rows barely creep — a cheap parallax read. Rows sit * on an exact 5% grid (21 rows), but `top` alone positions each row's TOP * EDGE — since row height tracks icon size (align-items:center, auto * height), a small row and a large row on the same grid would have * unevenly spaced (and, worst case, overlapping) CONTENT centres. The * `- (icon-h * row-scale / 2)` term re-anchors every row to its content * centre instead, so consecutive rows are equally spaced regardless of * tier. UNIFORM FILL (operator 2026-07-21, Opus pass — "no blank spaces, * uniform across the screen"): icons use `justify-content:space-between`, * NOT flex-start, so every row spans edge-to-edge with icons evenly * distributed — a flex-start row only filled its leading portion, leaving a * blank trailing band that the drift animation swept into view. Because icon * WIDTH scales with the tier but a fixed count would leave small-tier rows * sparse and overflow large-tier rows, each tier carries a DIFFERENT count * inversely proportional to its scale (small=58, medium=32, large=21 — set * in index.html), giving every tier the same on-screen pitch. Icon size * scales with vw across the whole device fleet (width clamp .._84px, height * clamp .._60px) so density holds from a 402px phone to a 4K monitor; the * height cap is deliberately below the 5% row pitch so wide/landscape screens * never overlap rows vertically. Verified: <2% blank on every phone/tablet, * <=7px row overlap on desktop, zero blank stripe under drift (Playwright + * getBoundingClientRect cell-coverage sweep across the CARDINAL-17 fleet, both * drift extremes). The 32" 4K desktop reads airier (same icons, more canvas) — * filling it pixel-dense would need ~3x the DOM and is not the complaint. * Rows sit on an exact 5% grid (21 rows, operator 2026-07-21 density pass): * more, tighter rows shrink every row-to-row gap so none reads as a seam even * in the radial gradient's darkest band near the screen edges. */ .motif-row-a { top:calc(0% - (var(--icon-h) * .55 / 2)); --row-scale:.55; animation:motif-drift-a 34s linear infinite; } .motif-row-b { top:calc(5% - (var(--icon-h) * 1 / 2)); --row-scale:1; animation:motif-drift-b 21s linear infinite; } .motif-row-c { top:calc(10% - (var(--icon-h) * 1.7 / 2)); --row-scale:1.7; animation:motif-drift-c 13s linear infinite; } .motif-row-d { top:calc(15% - (var(--icon-h) * .55 / 2)); --row-scale:.55; animation:motif-drift-d 35s linear infinite; } .motif-row-e { top:calc(20% - (var(--icon-h) * 1 / 2)); --row-scale:1; animation:motif-drift-a 22s linear infinite; } .motif-row-f { top:calc(25% - (var(--icon-h) * 1.7 / 2)); --row-scale:1.7; animation:motif-drift-b 13s linear infinite; } .motif-row-g { top:calc(30% - (var(--icon-h) * .55 / 2)); --row-scale:.55; animation:motif-drift-c 36s linear infinite; } .motif-row-h { top:calc(35% - (var(--icon-h) * 1 / 2)); --row-scale:1; animation:motif-drift-d 23s linear infinite; } .motif-row-i { top:calc(40% - (var(--icon-h) * 1.7 / 2)); --row-scale:1.7; animation:motif-drift-a 14s linear infinite; } .motif-row-j { top:calc(45% - (var(--icon-h) * .55 / 2)); --row-scale:.55; animation:motif-drift-b 37s linear infinite; } .motif-row-k { top:calc(50% - (var(--icon-h) * 1 / 2)); --row-scale:1; animation:motif-drift-c 23s linear infinite; } .motif-row-l { top:calc(55% - (var(--icon-h) * 1.7 / 2)); --row-scale:1.7; animation:motif-drift-d 9s linear infinite; } .motif-row-m { top:calc(60% - (var(--icon-h) * .55 / 2)); --row-scale:.55; animation:motif-drift-a 38s linear infinite; } .motif-row-n { top:calc(65% - (var(--icon-h) * 1 / 2)); --row-scale:1; animation:motif-drift-b 24s linear infinite; } .motif-row-o { top:calc(70% - (var(--icon-h) * 1.7 / 2)); --row-scale:1.7; animation:motif-drift-c 10s linear infinite; } .motif-row-p { top:calc(75% - (var(--icon-h) * .55 / 2)); --row-scale:.55; animation:motif-drift-d 40s linear infinite; } .motif-row-q { top:calc(80% - (var(--icon-h) * 1 / 2)); --row-scale:1; animation:motif-drift-a 25s linear infinite; } .motif-row-r { top:calc(85% - (var(--icon-h) * 1.7 / 2)); --row-scale:1.7; animation:motif-drift-b 10s linear infinite; } .motif-row-s { top:calc(90% - (var(--icon-h) * .55 / 2)); --row-scale:.55; animation:motif-drift-c 41s linear infinite; } .motif-row-t { top:calc(95% - (var(--icon-h) * 1 / 2)); --row-scale:1; animation:motif-drift-d 19s linear infinite; } .motif-row-u { top:calc(100% - (var(--icon-h) * 1.7 / 2)); --row-scale:1.7; animation:motif-drift-a 11s linear infinite; } .motif-icon { position:relative; display:block; width:calc(clamp(16px,4.2vw,84px) * var(--row-scale,1)); height:calc(clamp(15px,3.1vw,60px) * var(--row-scale,1)); flex:0 0 auto; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .motif-home { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11.5 12 4l9 7.5%27/%3E%3Cpath d=%27M5 10v9.5a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10%27/%3E%3Cpath d=%27M15 4.5V7l2 1.3V4.5z%27/%3E%3C/g%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11.5 12 4l9 7.5%27/%3E%3Cpath d=%27M5 10v9.5a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10%27/%3E%3Cpath d=%27M15 4.5V7l2 1.3V4.5z%27/%3E%3C/g%3E%3C/svg%3E"); } .motif-coin { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%276.4%27/%3E%3Cpath d=%27M12 7.5v9M14.5 9.3c-.4-.9-1.4-1.3-2.5-1.3-1.4 0-2.5.7-2.5 1.9 0 2.6 5 1.2 5 3.8 0 1.2-1.2 1.9-2.6 1.9-1.1 0-2.1-.4-2.5-1.3%27/%3E%3C/g%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%276.4%27/%3E%3Cpath d=%27M12 7.5v9M14.5 9.3c-.4-.9-1.4-1.3-2.5-1.3-1.4 0-2.5.7-2.5 1.9 0 2.6 5 1.2 5 3.8 0 1.2-1.2 1.9-2.6 1.9-1.1 0-2.1-.4-2.5-1.3%27/%3E%3C/g%3E%3C/svg%3E"); } .motif-calendar { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%275%27 width=%2717%27 height=%2715%27 rx=%272%27/%3E%3Cpath d=%27M3.5 9.5h17%27/%3E%3Cpath d=%27M8 3v4M16 3v4%27/%3E%3C/g%3E%3Cg fill=%27%23000%27 stroke=%27none%27%3E%3Ccircle cx=%277.7%27 cy=%2713.2%27 r=%27.9%27/%3E%3Ccircle cx=%2712%27 cy=%2713.2%27 r=%27.9%27/%3E%3Ccircle cx=%2716.3%27 cy=%2713.2%27 r=%27.9%27/%3E%3Ccircle cx=%277.7%27 cy=%2716.6%27 r=%27.9%27/%3E%3Ccircle cx=%2712%27 cy=%2716.6%27 r=%27.9%27/%3E%3C/g%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%275%27 width=%2717%27 height=%2715%27 rx=%272%27/%3E%3Cpath d=%27M3.5 9.5h17%27/%3E%3Cpath d=%27M8 3v4M16 3v4%27/%3E%3C/g%3E%3Cg fill=%27%23000%27 stroke=%27none%27%3E%3Ccircle cx=%277.7%27 cy=%2713.2%27 r=%27.9%27/%3E%3Ccircle cx=%2712%27 cy=%2713.2%27 r=%27.9%27/%3E%3Ccircle cx=%2716.3%27 cy=%2713.2%27 r=%27.9%27/%3E%3Ccircle cx=%277.7%27 cy=%2716.6%27 r=%27.9%27/%3E%3Ccircle cx=%2712%27 cy=%2716.6%27 r=%27.9%27/%3E%3C/g%3E%3C/svg%3E"); } .motif-leaf { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 19c-1-7 2-13.5 14-14.5 1 10-4 15-14 14.5z%27/%3E%3Cpath d=%27M6 18 17 5.3%27/%3E%3Cpath d=%27M9 14.5c1.4-.6 2.6-1.4 3.6-2.4M7 16.8c2-.5 3.8-1.4 5.2-2.6%27/%3E%3C/g%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 19c-1-7 2-13.5 14-14.5 1 10-4 15-14 14.5z%27/%3E%3Cpath d=%27M6 18 17 5.3%27/%3E%3Cpath d=%27M9 14.5c1.4-.6 2.6-1.4 3.6-2.4M7 16.8c2-.5 3.8-1.4 5.2-2.6%27/%3E%3C/g%3E%3C/svg%3E"); } .motif-bag { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 8h12l1 12.5a1 1 0 0 1-1 1.5H6a1 1 0 0 1-1-1.5L6 8z%27/%3E%3Cpath d=%27M8.5 8V6a3.5 3.5 0 0 1 7 0v2%27/%3E%3Cpath d=%27M6.6 12h10.8%27/%3E%3C/g%3E%3Ccircle cx=%279.3%27 cy=%2714.5%27 r=%27.5%27 fill=%27%23000%27 stroke=%27none%27/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 8h12l1 12.5a1 1 0 0 1-1 1.5H6a1 1 0 0 1-1-1.5L6 8z%27/%3E%3Cpath d=%27M8.5 8V6a3.5 3.5 0 0 1 7 0v2%27/%3E%3Cpath d=%27M6.6 12h10.8%27/%3E%3C/g%3E%3Ccircle cx=%279.3%27 cy=%2714.5%27 r=%27.5%27 fill=%27%23000%27 stroke=%27none%27/%3E%3C/svg%3E"); } .motif-chart { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20V4M4 20h16%27/%3E%3Crect x=%276.5%27 y=%2714%27 width=%272.6%27 height=%276%27/%3E%3Crect x=%2711%27 y=%2710%27 width=%272.6%27 height=%2710%27/%3E%3Crect x=%2715.5%27 y=%276.5%27 width=%272.6%27 height=%2713.5%27/%3E%3Cpath d=%27M6.5 9.5 11 6l4.5 3 4-4.5%27/%3E%3C/g%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20V4M4 20h16%27/%3E%3Crect x=%276.5%27 y=%2714%27 width=%272.6%27 height=%276%27/%3E%3Crect x=%2711%27 y=%2710%27 width=%272.6%27 height=%2710%27/%3E%3Crect x=%2715.5%27 y=%276.5%27 width=%272.6%27 height=%2713.5%27/%3E%3Cpath d=%27M6.5 9.5 11 6l4.5 3 4-4.5%27/%3E%3C/g%3E%3C/svg%3E"); } /* Touch devices (iPhone/iPad/Android PWA, operator 23/07/2026): relative to * the previous touch rendering, smallest motifs are 30% larger, medium motifs * interpolate at 22.5%, and largest motifs are 15% larger. Rows move from a * 4% to 3.5% field pitch and all 21 centres sit inside the visible 15%..85% * band, so more rows are on-screen and closer together. Trailing items are * hidden per tier because the larger marks would otherwise overlap * horizontally; 45/26/18 still fills each row evenly. Mouse surfaces (Win11) * are untouched. */ @media (pointer: coarse) { /* BLEED (operator 26/07/2026, iPad landscape "tremendous bleed of the motif rows"). The row * PITCH is 3.5% of the layer's height, but `--icon-h` was driven by `vw`. Those two units * track different things, so the ratio between an icon and the space it has to sit in was * never fixed: on a phone (small vw) icons stayed inside their pitch, while on an iPad — and * worst of all in landscape, where vw is largest and lvh smallest — a tier-3 icon grew to * 105px against a pitch of ~27px and the big rows piled 2-3 deep into blobs. * Height is now expressed in the SAME unit as the pitch (lvh), so an icon keeps a constant * proportion of its row's slot on every screen and orientation. 2.6lvh x the 1.955 tier-3 * scale = ~5.1lvh, just inside the 5.18lvh pitch, so the largest rows touch without stacking. * Width keeps its own clamp (the marks are wider than they are tall) but is bound to the same * base so the aspect ratio no longer drifts with the viewport. */ .boarding-motif { --icon-h: clamp(14px, 2.6lvh, 46px); } .motif-icon { width: calc(var(--icon-h) * 1.4 * var(--row-scale, 1)); height: calc(var(--icon-h) * var(--row-scale, 1)); } .motif-row { gap: 1px; } .motif-row-a,.motif-row-d,.motif-row-g,.motif-row-j,.motif-row-m,.motif-row-p,.motif-row-s { --row-scale: .715; } .motif-row-b,.motif-row-e,.motif-row-h,.motif-row-k,.motif-row-n,.motif-row-q,.motif-row-t { --row-scale: 1.225; } .motif-row-c,.motif-row-f,.motif-row-i,.motif-row-l,.motif-row-o,.motif-row-r,.motif-row-u { --row-scale: 1.955; } .motif-row-a .motif-icon:nth-child(n+46),.motif-row-d .motif-icon:nth-child(n+46),.motif-row-g .motif-icon:nth-child(n+46),.motif-row-j .motif-icon:nth-child(n+46),.motif-row-m .motif-icon:nth-child(n+46),.motif-row-p .motif-icon:nth-child(n+46),.motif-row-s .motif-icon:nth-child(n+46) { display:none; } .motif-row-b .motif-icon:nth-child(n+27),.motif-row-e .motif-icon:nth-child(n+27),.motif-row-h .motif-icon:nth-child(n+27),.motif-row-k .motif-icon:nth-child(n+27),.motif-row-n .motif-icon:nth-child(n+27),.motif-row-q .motif-icon:nth-child(n+27),.motif-row-t .motif-icon:nth-child(n+27) { display:none; } .motif-row-c .motif-icon:nth-child(n+19),.motif-row-f .motif-icon:nth-child(n+19),.motif-row-i .motif-icon:nth-child(n+19),.motif-row-l .motif-icon:nth-child(n+19),.motif-row-o .motif-icon:nth-child(n+19),.motif-row-r .motif-icon:nth-child(n+19),.motif-row-u .motif-icon:nth-child(n+19) { display:none; } .motif-row-a { top: calc(15% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-b { top: calc(18.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-c { top: calc(22% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-d { top: calc(25.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-e { top: calc(29% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-f { top: calc(32.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-g { top: calc(36% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-h { top: calc(39.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-i { top: calc(43% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-j { top: calc(46.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-k { top: calc(50% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-l { top: calc(53.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-m { top: calc(57% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-n { top: calc(60.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-o { top: calc(64% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-p { top: calc(67.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-q { top: calc(71% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-r { top: calc(74.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-s { top: calc(78% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-t { top: calc(81.5% - (var(--icon-h) * var(--row-scale) / 2)); } .motif-row-u { top: calc(85% - (var(--icon-h) * var(--row-scale) / 2)); } } @keyframes motif-drift-a { 0%,100%{transform:translateX(-4%);}50%{transform:translateX(5%);} }@keyframes motif-drift-b { 0%,100%{transform:translateX(5%);}50%{transform:translateX(-5%);} }@keyframes motif-drift-c { 0%,100%{transform:translateX(-2%);}50%{transform:translateX(7%);} }@keyframes motif-drift-d { 0%,100%{transform:translateX(6%);}50%{transform:translateX(-3%);} } .boarding-stage { gap:clamp(13px,2.4vh,24px); animation:boarding-rise .9s cubic-bezier(.32,1.20,.50,1) both; } .boarding-tree { width:clamp(150px,min(43vw,39vh),252px); animation:boarding-grow 2.4s cubic-bezier(.32,1.20,.50,1) both; filter:drop-shadow(0 13px 19px rgba(29,32,53,.19)); } @keyframes boarding-grow { from{transform:scale(.88,.82);} to{transform:scale(1);} } .tree-canopy { transform-box:fill-box; transform-origin:50% 76.4%; animation:canopy-wind 8.8s ease-in-out infinite; } @keyframes canopy-wind { 0%,100%{transform:rotate(-.5deg) translateX(-1px);} 23%{transform:rotate(1.1deg) translateX(2px);} 47%{transform:rotate(.25deg) translateX(1px);} 68%{transform:rotate(-1.3deg) translateX(-2px);} 83%{transform:rotate(.35deg) translateX(0);} } .tree-canopy .leaf { animation-name:leaf-gust; animation-timing-function:ease-in-out; } @keyframes leaf-gust { 0%,100%{transform:rotate(var(--gust-a,-1.4deg)) translateX(0);} 18%{transform:rotate(var(--gust-b,1.8deg)) translateX(var(--gust-x,2px));} 41%{transform:rotate(var(--gust-c,-.6deg)) translateX(0);} 63%{transform:rotate(var(--gust-d,2.3deg)) translateX(calc(var(--gust-x,2px) * -.7));} 82%{transform:rotate(var(--gust-e,.4deg)) translateX(0);} } .leaf-1,.leaf-7,.leaf-13 { --gust-a:-2.6deg;--gust-b:2.8deg;--gust-c:-.8deg;--gust-d:3.5deg;--gust-e:.4deg;--gust-x:3px;animation-duration:5.9s; }.leaf-2,.leaf-8,.leaf-14 { --gust-a:1.8deg;--gust-b:-2.4deg;--gust-c:.4deg;--gust-d:-3deg;--gust-e:.2deg;--gust-x:2px;animation-duration:7.1s; }.leaf-3,.leaf-9,.leaf-15 { --gust-a:-1.2deg;--gust-b:2.1deg;--gust-c:-.3deg;--gust-d:2.8deg;--gust-e:.5deg;--gust-x:4px;animation-duration:6.4s; }.leaf-4,.leaf-10,.leaf-16 { --gust-a:2.1deg;--gust-b:-1.6deg;--gust-c:.3deg;--gust-d:-2.6deg;--gust-e:-.4deg;--gust-x:2px;animation-duration:7.8s; }.leaf-5,.leaf-11,.leaf-17 { --gust-a:-2deg;--gust-b:1.4deg;--gust-c:-.2deg;--gust-d:2.2deg;--gust-e:.3deg;--gust-x:3px;animation-duration:6.9s; }.leaf-6,.leaf-12 { --gust-a:1.2deg;--gust-b:-2.2deg;--gust-c:.6deg;--gust-d:-2.7deg;--gust-e:0deg;--gust-x:3px;animation-duration:5.5s; } .tree-trunk { animation:trunk-sway 8.8s ease-in-out infinite; }@keyframes trunk-sway { 0%,100%{transform:rotate(-.12deg);} 50%{transform:rotate(.16deg);} } .boarding-word { display:flex; flex-direction:column; align-items:flex-start; margin:0; font-size:clamp(2.52rem,8.4vw,5.04rem); font-weight:800; letter-spacing:.12em; color:var(--boarding-word-ink); line-height:.86; text-shadow:0 2px 0 rgba(255,255,255,.12); animation:boarding-word-in .9s cubic-bezier(.32,1.20,.50,1) .18s both; }.boarding-word-new { margin:0 0 .18em .16em; font-size:.36em; font-weight:500; letter-spacing:.15em; color:var(--boarding-new-ink); }.boarding-word-name { display:block; }.boarding-word-in { from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);} } @media (min-width:760px) and (orientation:landscape) { .boarding-stage { grid-template-columns:auto auto; column-gap:clamp(24px,5vw,74px); align-items:center; }.boarding-tree { width:clamp(170px,min(30vw,58vh),310px); }.boarding-word { font-size:clamp(2.88rem,6vw,5.76rem); } } @media (prefers-reduced-motion:reduce) { .boarding-motif,.motif-row,.tree-canopy,.tree-canopy .leaf,.tree-trunk { animation:none; } } body { /* iOS system font first (operator 2026-07-10: "explore a font that's iOS * system that doesn't look so bold and blocky"). -apple-system / SF Pro Text * is the native iOS UI face; grayscale antialiasing renders SF noticeably * lighter and cleaner than the default subpixel weight, which is what read as * "bold and blocky". A hair of negative tracking matches Apple's own UI. */ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; background: var(--canvas); color: var(--ink); line-height: 1.45; } body[data-surface="desktop"] { background: var(--canvas-desktop); } a { color: var(--accent); text-decoration: none; } .hidden { display: none !important; } .muted { color: var(--ink-muted); } .center { text-align: center; } .pos { color: var(--pos); } .neg { color: var(--neg); } .error { color: var(--neg); } code { background: var(--chip); padding: .1rem .3rem; border-radius: 6px; } /* ---------- app frame ---------- */ #app { min-height: 100dvh; display: flex; flex-direction: column; max-width: 100%; overflow-x: hidden; } /* LAUNCH-ZOOM FLOOR, STANDALONE ONLY. `100dvh` is the DYNAMIC viewport, which * during the iOS launch zoom reports the still-growing card — the same trap the * root documents. `lvh` (the viewport at its largest) covers the settled screen * from the first frame. Deliberately NOT unconditional: in a browser TAB `lvh` * includes the space behind Safari's collapsible toolbar, so a blanket floor * would reserve a strip of dead scroll under every page. `display-mode: * standalone` is exactly the case with no collapsible chrome AND the only one * that launches via the home-screen zoom. */ @media all and (display-mode: standalone) { #app { min-height: 100lvh; } } body[data-surface="desktop"] #app { overflow-x: visible; } .content { flex: 1; padding: 16px; max-width: 720px; margin: 0 auto; width: 100%; min-width: 0; padding-bottom: 104px; } /* Touch Accounts motion is a bottom sheet on every touch profile. The shell * keeps the prior page as an inert snapshot while the current Accounts panel * rises from the bottom; leaving Accounts drives that panel back down. */ .route-motion-viewport { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; } .route-motion-viewport > .route-motion-panel { width: 100%; } .route-motion-panel.outgoing { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .route-motion-panel.incoming { position: relative; z-index: 1; } .accounts-sheet-viewport { position: fixed; inset: 0; z-index: 15; display: flex; align-items: flex-end; /* Keep the previous route readable in the clamped band above the card; the * card itself supplies the opaque surface below it. A heavy full-viewport * scrim hid the approval banner that defines the stop point. */ background: color-mix(in srgb, var(--canvas) 24%, transparent); overscroll-behavior: contain; } .accounts-sheet-viewport .route-motion-panel.incoming { width: 100%; max-height: calc(100dvh - max(56px, env(safe-area-inset-top) + 12px)); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius) var(--radius) 0 0; background: var(--card); box-shadow: 0 -8px 30px color-mix(in srgb, var(--ink) 15%, transparent); transform: translateY(100%); transition: transform var(--dur-slow) var(--ease-standard); } /* The title and approval strip belong to the previous route's shared top rail; * when that strip is present, the incoming Accounts card must stop exactly * beneath it instead of painting over the banner. With no banner, leave only * the compact title-row band above the card. `:has()` is evaluated after the * deferred approval mount, so both entry and list→detail replacements settle * to the same clamp without a route-specific pixel constant in JavaScript. */ .accounts-sheet-viewport:has(.route-motion-panel.incoming .approve-topbar) .route-motion-panel.incoming { max-height: calc(100dvh - max(118px, env(safe-area-inset-top) + 74px)); } .accounts-sheet-viewport:not(:has(.route-motion-panel.incoming .approve-topbar)) .route-motion-panel.incoming { max-height: calc(100dvh - max(104px, env(safe-area-inset-top) + 60px)); } .accounts-sheet-viewport .route-motion-panel.outgoing { transition: opacity var(--dur-slow) var(--ease-standard); } .accounts-sheet-viewport.accounts-sheet-dismiss .route-motion-panel.outgoing { transform: translateY(0); border-radius: var(--radius) var(--radius) 0 0; background: var(--card); overflow-y: auto; } .accounts-sheet-viewport.accounts-sheet-dismiss .route-motion-panel.incoming { transform: translateY(0); max-height: none !important; overflow-y: auto; border-radius: 0; align-self: stretch; height: 100%; background: var(--canvas); box-shadow: none; } .accounts-sheet-viewport.running.accounts-sheet-enter .route-motion-panel.incoming { transform: translateY(0); } .accounts-sheet-viewport.accounts-sheet-static .route-motion-panel.incoming { transition: none; } .accounts-sheet-viewport.running.accounts-sheet-enter .route-motion-panel.outgoing { opacity: .45; } .accounts-sheet-viewport.running.accounts-sheet-dismiss .route-motion-panel.outgoing { transform: translateY(100%); } .accounts-sheet-viewport.running.accounts-sheet-dismiss .route-motion-panel.incoming { opacity: 1; } .accounts-sheet-viewport.accounts-sheet-enter .route-motion-panel.incoming, .accounts-sheet-viewport.accounts-sheet-dismiss .route-motion-panel.outgoing { will-change: transform; } .accounts-sheet-content { position: relative; padding-top: 8px; } .accounts-sheet-grip { margin: 0 auto 4px; width: 40px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink-muted) 40%, transparent); } .accounts-sheet-content.swipe-dragging { transition: none !important; } .accounts-sheet-content.swipe-dismissing { transition: transform var(--dur-slow) var(--ease-standard) !important; } @media (prefers-reduced-motion: reduce) { .route-motion-viewport .route-motion-panel { transition: none !important; } } /* Phone: the top nav bar was removed (§2) but its reserved space wasn't * reclaimed — content now starts right under the status bar (safe-area top * inset only), and the bottom pad = tab bar height + home-indicator inset so * the last row clears the floating bar exactly, no dead gap. */ /* TITLE TO THE TOP (operator 2026-07-14: "look at SPENDING tab and see how far * from the top the title is… the title on all tabs must be as close to the top as * reasonably possible, never truncated, always in the same location"). The top pad * is now just enough to clear the status bar and let the fixed chrome cluster * (version/eye) sit level with the title's cap-height — 4px of breathing room * instead of 12. Because EVERY view's title is the same `.screen-title` with the * same margin, they all land on the identical baseline across tabs. */ body[data-surface="phone"] .content { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: calc(140px + env(safe-area-inset-bottom)); } /* The tablet shares the fixed bottom tab bar and FAB, while its base content * rule otherwise inherits the desktop-sized 104px pad. Keep the safe-area * reservation explicit on both touch surfaces and teach the document scroller * the same clearance so scrollIntoView/end and a finger drag cannot place the * final useful control under fixed chrome. */ body[data-surface="tablet"] .content { padding-bottom: calc(140px + env(safe-area-inset-bottom)); } @media (max-width: 1199px) { html { scroll-padding-bottom: calc(140px + env(safe-area-inset-bottom)); } } /* When the approval banner is showing it ALREADY clears the notch (its own * safe-area top padding). The content below must NOT add the inset a second time * — that doubled strip was the "incredible vertical wasted space" the operator * saw above the banner (operator 2026-07-16). Drop the content's top inset to a * plain gap whenever the banner is present, on phone and tablet. */ /* (The banner used to sit ABOVE .content and carry its own safe-area padding, so * the content dropped its inset to avoid a doubled strip. Since 26/07/2026 the * banner renders INSIDE .content, below the screen title, so the content keeps * its normal compact top pad in every state — which is also what keeps the title * at one height across tabs whether or not anything is awaiting approval.) */ body[data-surface="desktop"] #app { flex-direction: row; } body[data-surface="desktop"] .content { max-width: none; margin: 0; padding: 20px 28px; padding-bottom: 20px; } /* The Pricer is a focused desktop utility, not a full-width ledger. Keep its * cards readable on wide monitors while retaining the normal 28px rails at * laptop widths. */ @media (min-width: 1600px) { body[data-surface="desktop"] .content:has(.pricer-products) { max-width: 1240px; margin-inline: auto; } } /* Zero top margin: the title starts at the very top of the content box, so its * position is set purely by .content's padding — identical on every tab (operator * 2026-07-14). The bottom margin is the ONLY gap under it. */ .screen-title { font-size: 2rem; font-weight: 600; margin: 0 0 .6rem; letter-spacing: -0.02em; } /* Reserve room for the fixed version/eye chrome cluster (top-right) so a * long title never runs under it on phone/tablet (operator 2026-07-08i). Reserve * is 152px — the FULL cluster width incl. the version tag (operator 2026-07-13); * the old 104px only cleared the eye, so "Spending Report" / "Migrate from * YNAB" ran under the version tag. Row titles reset this to 0 (the row carries * its own 152px reserve, just below). */ body[data-surface="phone"] .screen-title, body[data-surface="tablet"] .screen-title { padding-right: 152px; } body[data-route="budget"][data-surface="phone"] .screen-title, body[data-route="budget"][data-surface="tablet"] .screen-title { padding-right: 244px; } /* The fixed chrome cluster (version + eye) is a 40px-tall row whose top is * 8px below the safe-area inset — its optical centre sits 28px down. With the * content box now starting 4px below that inset, a min-height of 48px on the title * makes the title's own centre land on the cluster's, so the two read as ONE top * row on every tab rather than the title floating below the buttons. */ body[data-surface="phone"] .screen-title, body[data-surface="tablet"] .screen-title { min-height: 48px; display: flex; align-items: center; /* Operator 2026-07-18: vertical compactness — the title already occupies the chrome row, so * the space it hands to the content below shrinks; every screen starts ~6px sooner. */ margin-bottom: .25rem; } /* When the title shares a row with an action pill (e.g. Accounts' Add Account), * the cluster-clearing pad belongs on the ROW, not the title — otherwise the * pill is pushed under the fixed version/eye/gear cluster and runs half * offscreen (operator 2026-07-08j). Move the reserve to the row and let the * title sit flush inside it. */ body[data-surface="phone"] .screen-title-row .screen-title, body[data-surface="tablet"] .screen-title-row .screen-title, body[data-surface="phone"] .sched-titlerow .screen-title, body[data-surface="tablet"] .sched-titlerow .screen-title { padding-right: 0; } /* Reserve must clear the WHOLE fixed cluster: eye (right 58 +40w) + version tag * (right 104, ~48px wide for a "vX.Y.Z" string) → its left edge lands ~152px * from the right. The old reserve only cleared the eye, so the version tag * overlapped the Spending "Select" button * (operator 2026-07-13). 152px matches the intent the code comments already * claimed and leaves the title/tools stopping just left of the version tag. */ body[data-surface="phone"] .screen-title-row, body[data-surface="tablet"] .screen-title-row, body[data-surface="phone"] .sched-titlerow, body[data-surface="tablet"] .sched-titlerow { padding-right: 152px; } body[data-surface="desktop"] .screen-title { font-size: var(--fs-h2); } /* Short landscape: the 2rem title + its 48px row + margin spend ~58px of a * 393px screen on one word. Ease it down a step and let it sit on the chrome * cluster's own 40px line — still the same weight, family and tokens, still the * biggest thing on the page, just not a third of the viewport (operator * 2026-07-17). Portrait is untouched. */ @media (orientation: landscape) and (max-height: 500px) { body[data-surface="phone"] .screen-title { font-size: 1.5rem; min-height: 40px; margin-bottom: .3rem; } body[data-surface="phone"] .screen-title-row, body[data-surface="phone"] .sched-titlerow { min-height: 40px; } } /* ---------- cards, rows, buttons (§1) ---------- */ .card { background: var(--card); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } body[data-surface="desktop"] .card { border-radius: var(--radius-s); border: 1px solid var(--hairline); box-shadow: none; } .card h2 { font-size: var(--fs-value); margin: 0 0 .6rem; } .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 600; background: var(--control-accent); color: var(--control-accent-ink); padding: .55rem 1.2rem; border-radius: 999px; min-height: var(--ctl-h-md); } /* Enabled secondary action (D-102 part D, 19/08/2026): pale accent-derived * fill, not the old flat --chip grey — a genuinely CLICKABLE secondary button * (File Import, Undo, Expand splits, View…) must read as part of the same * blurple control family as the primary action beside it, one step down in * emphasis. Disabled and selected/open states override this below so neither * can be confused with plain "enabled". */ .btn.secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-ink); } @media (hover: hover) { .btn.secondary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--control-secondary-bg-hover); } } /* A disabled secondary control must stay unmistakably muted — never the pale * accent fill above, which would read as clickable. */ .btn.secondary:disabled, .btn.secondary[aria-disabled="true"] { background: var(--chip); color: var(--ink-muted); opacity: .55; cursor: default; } /* Selected/open/toggled secondary controls (e.g. a pressed filter, an expanded * "View" menu button) stay STRONGER than a merely-enabled secondary button — * the existing `.on`/[aria-pressed="true"]/[aria-expanded="true"] convention * used across the app's toggle buttons. */ .btn.secondary.on, .btn.secondary[aria-pressed="true"], .btn.secondary[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 30%, var(--card)); color: var(--btn-secondary-ink); } /* General press feedback for tappable controls that don't already define * their own :active (Part 7) — the FAB's .93 and .reg-icon-btn's .88 stay * as their own bespoke bounce; this is the default for everything else. * * 2026-07-25 (operator: "live button feedback"). These rules read as press * feedback but every one of them resolved to `transform: none` — i.e. NO * visible change on press at all, which is exactly the "tapped it, nothing * happened" report. Each control must restyle ITSELF on press (cardinal * button-feedback rule): a real scale-down plus a slight darken, fast enough * to paint within a tap. `transition` on the base rule carries it back out. */ .btn, .type-pill { transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast) var(--ease-standard); } .btn:active, .type-pill:active, .key:active { transform: scale(.96); filter: brightness(.92); } /* Disabled controls must NOT appear to respond — a press that visibly reacts * but does nothing is worse than no feedback. */ .btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .btn:active, .type-pill:active, .key:active { transform: none; filter: brightness(.9); } } .btn.danger { background: var(--control-danger); color: var(--control-danger-ink); } /* Buttons that lead with an inline icon: centre the glyph with the label. */ .btn:has(.ico), .fab-txn:has(.ico), .add-account-pill:has(.ico) { display: inline-flex; align-items: center; gap: 6px; } .btn .ico, .fab-txn .ico, .add-account-pill .ico { width: 1.05em; height: 1.05em; } .plan-pill-plus { display: inline-flex; align-items: center; justify-content: center; } .plan-pill-plus .ico { width: 1em; height: 1em; } .btn-x, .link-btn { background: none; border: 1px solid var(--hairline); color: var(--ink-muted); border-radius: 8px; cursor: pointer; font: inherit; font-size: var(--fs-body); padding: .15rem .5rem; } .link-btn { border: 0; } /* Touch: .btn-x measured ~30px wide (glyph + thin padding only, v1.29.0 * tapthru §1). Width floor to match the blanket 44px height floor below. */ body[data-surface="phone"] .btn-x, body[data-surface="tablet"] .btn-x { min-width: var(--ctl-h-md); display: inline-flex; align-items: center; justify-content: center; } .list-row, .setting-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: .6rem 0; border-top: 1px solid var(--hairline); color: inherit; } .list-row:first-of-type, .setting-row:first-of-type { border-top: 0; } /* Plan Settings row label with its leading pencil (operator 2026-07-12 punch 16: * the pencil relocated here from the Plan header). The glyph sits to the left of * the label text, muted, aligned to the first line. */ .ps-label { display: flex; align-items: flex-start; gap: 8px; } .ps-pencil { flex: 0 0 auto; color: var(--ink-muted); display: inline-flex; position: relative; top: 1px; } .ps-pencil .ico { width: 1.15rem; height: 1.15rem; } /* Location grant row (operator 2026-07-12 punch 16): the amber warning triangle * sits to the left of the "Allow location access" button while access is not yet * granted. Amber is a fixed advisory colour that reads in both themes. */ .loc-grant-row { justify-content: flex-start; gap: 10px; } .loc-warn { flex: 0 0 auto; display: inline-flex; color: var(--amber); } .loc-warn .ico { width: 1.25rem; height: 1.25rem; } /* iOS-style toggle (operator: "switch all selectors to iOS style slider instead of checkbox"). Every TRAILING checkbox in a Settings row becomes a sliding pill switch — blurple when on, matching the app's control theme. Scoped to DIRECT children of .setting-row so leading list checkboxes (e.g. payee-picker bulk rows, where the box sits before its label) keep their native box. */ .setting-row > input[type="checkbox"], input.ios-switch, .target-switch { appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; box-sizing: border-box; --switch-track-width: 52px; --switch-track-height: 32px; --switch-knob-size: 28px; --switch-track-border: 0px; --switch-knob-border: 0px; --switch-inset: calc((var(--switch-track-height) - var(--switch-knob-size)) / 2 - var(--switch-track-border)); --switch-travel: calc(var(--switch-track-width) - var(--switch-track-border) - var(--switch-track-border) - var(--switch-knob-size) - var(--switch-inset) - var(--switch-inset)); width: var(--switch-track-width); height: var(--switch-track-height); margin: 0; padding: 0; border: var(--switch-track-border) solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--ink-muted) 45%, transparent); transition: background var(--dur-base) var(--ease-ios-rebound); cursor: pointer; } /* Keep the input-owned selector explicit for motion contracts and tooling; * geometry remains shared above with target switches. */ input.ios-switch { transition: background var(--dur-base) var(--ease-ios-rebound); } .setting-row > input[type="checkbox"]::after, input.ios-switch::after, .target-switch::after { content: ""; position: absolute; top: var(--switch-inset); left: var(--switch-inset); width: var(--switch-knob-size); height: var(--switch-knob-size); box-sizing: border-box; border: var(--switch-knob-border) solid transparent; border-radius: 50%; background: var(--card); box-shadow: none; transition: transform var(--dur-base) var(--ease-ios-rebound); } input.ios-switch::after { transition: transform var(--dur-base) var(--ease-ios-rebound); } .setting-row > input[type="checkbox"]:checked, input.ios-switch:checked { background: var(--accent); } .setting-row > input[type="checkbox"]:checked::after, input.ios-switch:checked::after, .target-switch.on::after { transform: translateX(var(--switch-travel)); } /* WIN11 DESKTOP ONLY, 80% scale (operator 05/08/2026: "the slider button is far * too big to be ontheme, win11-wide. make it 20% smaller"). Touch keeps the base * 52x32 above — an iOS switch must stay a 44px-class target, so this override is * surface-scoped and never reaches phone or tablet. * * Arithmetic (every figure = base x 0.8): * track 52 x 0.8 = 41.6px wide, 32 x 0.8 = 25.6px tall * knob 28 x 0.8 = 22.4px (square: 22.4 x 22.4, so 50% stays a circle) * inset base gap is (32 - 28) / 2 = 2px -> (25.6 - 22.4) / 2 = 1.6px * travel = track - knob - inset(left) - inset(right) * = 41.6 - 22.4 - 1.6 - 1.6 = 16px * check: knob right edge when checked = 1.6 + 16 + 22.4 = 40px, * leaving 41.6 - 40 = 1.6px — the SAME inset as the left. Flush. */ body[data-surface="desktop"] .setting-row > input[type="checkbox"], body[data-surface="desktop"] .target-switch, body[data-surface="desktop"] input.ios-switch { --switch-track-width: 41.6px; --switch-track-height: 25.6px; --switch-knob-size: 22.4px; width: 41.6px; height: 25.6px; } body[data-surface="desktop"] .setting-row > input[type="checkbox"]::after, body[data-surface="desktop"] .target-switch::after, body[data-surface="desktop"] input.ios-switch::after { top: var(--switch-inset); left: var(--switch-inset); width: 22.4px; height: 22.4px; } body[data-surface="desktop"] .setting-row > input[type="checkbox"]:checked::after, body[data-surface="desktop"] .target-switch.on::after, body[data-surface="desktop"] input.ios-switch:checked::after { transform: translateX(var(--switch-travel)); } .setting-row > input[type="checkbox"]:disabled, input.ios-switch:disabled { opacity: .45; cursor: default; } .setting-row > input[type="checkbox"]:focus-visible, input.ios-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .settings-subsection { margin-top: .75rem; padding: .7rem .8rem; border: 1px solid var(--hairline); border-radius: var(--radius-s); } .settings-subsection > h3 { margin: 0 0 .25rem; } .envelope-dependent[data-dependent-disabled="true"] { background: var(--chip); color: var(--ink-muted); } .envelope-dependent[data-dependent-disabled="true"] .muted { color: var(--ink-muted); } .rta-reset-row[data-dependent-disabled="true"] { margin-block: .35rem; padding: .7rem .8rem; border-top-color: transparent; border-radius: var(--radius-s); } .group-head { display: flex; justify-content: space-between; align-items: baseline; } .stat-row { display: flex; justify-content: space-between; font-size: var(--fs-h3); } /* ---------- Home dashboard (§7 OFF-variant) ---------- */ .dash-headline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .dash-headline-label { font-size: var(--fs-value); color: var(--ink-muted); } /* The Smoothed-monthly-burden figure. Was --fs-display (2.4rem) — that rung is * for the Add sheet's full-width amount readout, and it overpowered this card * (operator 2026-07-14: "far too large, make smaller"). */ .dash-headline-amt { font-size: var(--fs-h2); font-weight: 700; } .dash-sub { margin: .5rem 0 0; font-size: var(--fs-body); } .dash-sched-main { display: flex; flex-direction: column; min-width: 0; } .dash-sched-name { font-weight: 600; } .dash-sched-meta { font-size: var(--fs-body); } .dash-sched-amt, .dash-bill-amt { white-space: nowrap; } .dash-per { font-weight: 400; font-size: var(--fs-body); } .dash-bill { gap: 10px; } .dash-bill-date { flex: 0 0 auto; font-size: var(--fs-body); min-width: 6.5rem; } .dash-bill-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inp { font: inherit; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--hairline); background: var(--card); color: var(--ink); min-width: 0; } .inp:focus { outline: none; border-color: var(--accent); } /* One ring, not two (part F, 19/08/2026): on a fine pointer the generic * `body :is(...):focus-visible` rule below already paints an external accent * outline; the border-color shift above then adds a second, concentric * accent stroke on the same box. Neutralise the border on the fine-pointer * focus-visible state so the external ring is the only line. Coarse pointers * (touch) never reach `:focus-visible` here — CARDINAL rule 20 gates the ring * itself behind `pointer: fine` — and keep the plain `:focus` border as * their sole affordance. */ @media (pointer: fine) { .inp:focus-visible { border-color: var(--hairline); } } select.inp { appearance: none; -webkit-appearance: none; padding-right: 2.35rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } body :is(button, [role="button"], a, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* FREE-TEXT/SEARCH FIELDS KEEP NO RING ON TOUCH (operator 03/08/2026: "an * uncalled for outline of the memo field… this is against design theme"; * widened app-wide 21/08/2026 — the same cascade defeat persisted on every * OTHER free-text/search field outside a txn-sheet, e.g. the Spending search * pill, Plan/Payees/Accounts rename and search fields: a blue inner rectangle * could still paint even where the compound control's OWN * `:focus-visible{outline:none}` rule existed, because that rule was scoped * `@media (pointer: fine)` — coarse pointers never reached it). * iOS/Safari marks a TAPPED text input `:focus-visible`, so the ring below — * written for Tab travel — fires on every touch of a text field and draws a * 2px accent rectangle round it. A field's own `:focus { outline: none }` * LOSES THE CASCADE: `:focus` and `:focus-visible` both match, and * `body :is(…):focus-visible` (0,2,1) out-specifies a plain class-level * `:focus` (0,1,0) or `:focus-visible` (0,1,1) rule. So this is a cascade * defeat, not a missing rule. `input[type=search]`/`input[type=text]` (no * explicit type defaults to text) and `textarea` cover every ordinary * free-text/search control app-wide without touching specialist inputs * (money/date/number/checkbox/radio/select/file, which use other types). * Scoped to coarse pointers so Win11 Tab travel, the reason the ring exists * at all, is untouched — CARDINAL rule 20: touch gets the caret and the OS * keyboard, never a desktop keyboard-focus rail. */ @media (pointer: coarse) { body :is(input:not([type]), input[type="text"], input[type="search"], textarea):focus-visible { outline: none; } } body :is(.txn-row, .reg-txn, .plan-add-cat, .plan-activity-link, .plan-cat, .sched-row, .sched-txn-row, .sched-occ-toggle):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ---------- banners ---------- */ .banner { padding: .6rem 1rem; font-weight: 600; } /* Black-translucent status bar (punch 20): an in-flow banner is the topmost * element on phone/tablet, so pad it below the clock/Dynamic Island. Desktop * overrides .banner to fixed with no inset (no status bar there). */ body[data-surface="phone"] .banner, body[data-surface="tablet"] .banner { padding-top: calc(.6rem + env(safe-area-inset-top)); } .banner-integrity { background: var(--neg); color: var(--neg-ink); } .banner-offline { background: var(--ink-muted); color: var(--accent-ink); } /* Uncaught code errors are recoverable guidance, not raw red developer text. * Integrity/hash failures keep the red banner above; this card uses theme * tokens in both modes and stays inside every safe-area/visual viewport. */ .unexpected-error-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--ink) 42%, transparent); } .unexpected-error-card { width: min(460px, 100%); max-height: min(680px, calc(100dvh - 32px)); overflow: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 18px; border: 1px solid var(--hairline); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 12px 38px color-mix(in srgb, var(--ink) 28%, transparent); } .unexpected-error-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--neg-pill); color: var(--neg); font-size: var(--fs-h3); font-weight: 800; } .unexpected-error-copy { min-width: 0; } .unexpected-error-copy h2 { margin: 2px 0 8px; font-size: var(--fs-h2); } .unexpected-error-copy p { margin: 0 0 8px; line-height: 1.45; } .unexpected-error-details { margin-top: 10px; } .unexpected-error-details summary { cursor: pointer; color: var(--ink-muted); font-weight: 600; } .unexpected-error-details code { display: block; margin-top: 8px; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); } .unexpected-error-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--hairline); } @media (max-width: 420px) { .unexpected-error-card { grid-template-columns: 1fr; padding: 16px; } .unexpected-error-mark { width: 32px; height: 32px; } .unexpected-error-actions { flex-direction: column-reverse; } .unexpected-error-actions .btn { width: 100%; min-height: 46px; } } /* Reconnecting status (item 1): a small, quiet route-topbar mark that * self-clears when sync lands. The text remains available to assistive tech. */ .sync-strip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 2.75rem; width: 2.75rem; min-height: var(--ctl-h-md); padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: var(--fs-label); font-weight: 600; vertical-align: middle; } /* Touch sync is a passive status marker, not an interactive control. Keep the * 44px row height for alignment, but reserve only the dot plus its breathing * room so a late-arriving sync state cannot squeeze a route title into * arbitrary character fragments. Desktop overrides this footprint below. */ body:is([data-surface="phone"], [data-surface="tablet"]) .sync-strip { flex: 0 0 16px; width: 16px; min-width: 16px; min-height: var(--ctl-h-md); } /* Desktop alert banners stay overlays; the quiet sync mark stays in the route * header's normal flow so it never occludes useful content. */ body[data-surface="desktop"] .banner { position: fixed; top: 0; left: 0; right: 0; z-index: 40; } body[data-surface="desktop"] .sync-strip { position: static; flex: 0 0 auto; white-space: nowrap; } .sync-topbar { margin-inline: .35rem; } .sync-icon { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent); transform-origin: center; animation: sync-pulse 2.8s ease-in-out infinite; } /* Explicit pull-to-refresh (item 2): the strip can appear before syncState has * actually reached 'syncing' (a manual pull's request-accepted phase). Muted, * static grey — never the passive-sync blurple pulse — until sync is genuinely * active, at which point .sync-strip-muted is removed and the normal pulse * takes over on the same element (no separate indicator to invent). */ .sync-strip-muted .sync-icon { background: var(--ink-muted); animation: none; } /* Touch sync dot 10% larger (8.8px) than the 8px base — touch only, desktop * sidebar marker unchanged (D-102 batch, item 2). */ body:is([data-surface="phone"], [data-surface="tablet"]) .sync-icon { width: 8.8px; height: 8.8px; flex-basis: 8.8px; } .sync-copy { /* Keep the status name in the accessibility tree while removing its visual * width; role=status still announces the real state. */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Desktop owns the sync status in the sidebar footer. Expanded sidebars show * the canonical copy; the collapsed rail keeps the icon only so it never * overflows the 64px utility column. Touch keeps the compact topbar copy * hidden through the base rule above. */ body[data-surface="desktop"] .sidebar-footer .sync-strip { width: 100%; min-width: 0; flex: 0 1 auto; justify-content: flex-start; gap: .5rem; padding: .35rem .6rem; color: var(--sidebar-ink); text-align: left; } body[data-surface="desktop"] .sidebar-footer .sync-copy { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; overflow-wrap: anywhere; border: 0; line-height: 1.25; } body[data-surface="desktop"] .sidebar.collapsed .sidebar-footer .sync-strip { justify-content: center; padding-inline: .5rem; } body[data-surface="desktop"] .sidebar.collapsed .sidebar-footer .sync-copy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @keyframes sync-pulse { 0%, 100% { opacity: 0; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } } /* Desktop Google Drive status is a quiet dot whose pulse is deliberately * measurable: the visible radius travels ±15% around its resting size. Touch * keeps the compact top-bar pulse above. */ body[data-surface="desktop"] .sync-icon { animation: sync-pulse-desktop 1.8s cubic-bezier(.34, 1.56, .64, 1) infinite; opacity: 1; } @keyframes sync-pulse-desktop { 0%, 100% { opacity: .72; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .sync-icon { animation: none; opacity: 1; transform: none; } } /* In-list approval banner (register.js). Deliberately NOT `.banner`: that class * is the app-level alert strip — desktop fixes it to the viewport top, where it * covered .approve-topbar and .plan-switcher (v1.29.0 tapthru). font-weight 600 * kept here because dropping `.banner` dropped its weight. */ .banner-approve { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-s); margin-bottom: 12px; padding: .6rem 1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* No desktop rules here any more (D-097). The in-card banner is TOUCH-ONLY now: * desktop renders the shell's single `.approve-topbar` instead, so the fixed * 54px height and the `visibility:hidden` placeholder that reserved that slot * are both gone. Between them they held 54px of the register's vertical budget * even when there was nothing to approve. */ .banner-approve .ba-text { min-width: 0; margin-right: auto; } .banner-approve .ba-approve { flex: 0 0 auto; border: 0; background: var(--card); color: var(--accent); font: inherit; font-weight: 700; font-size: var(--fs-body); padding: .4rem .9rem; border-radius: 999px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring); } .banner-approve .ba-approve:active { transform: scale(.95); filter: brightness(.93); } .banner-approve .ba-approve:disabled { opacity: .5; } /* Approve All is the primary action and sits immediately after View. Keep its * solid blurple face on every surface so the two adjacent actions cannot be * mistaken for duplicate ghost links. */ .banner-approve .ba-approve { background: var(--accent); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent-ink) 28%, transparent); } /* "View" (§11.2): drops the Is: Unapproved or Needs Category filter into search. Ghost variant so the solid "Approve all" stays the primary action. */ .banner-approve .ba-view { flex: 0 0 auto; border: 1.5px solid color-mix(in srgb, var(--accent-ink) 80%, transparent); background: transparent; color: var(--accent-ink); font: inherit; font-weight: 700; font-size: var(--fs-body); padding: .35rem .9rem; border-radius: 999px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring); } .banner-approve .ba-view:active { transform: scale(.95); filter: brightness(.93); } /* Hidden-by-search note + View All pill under the grid rows (§11.2). */ /* Hidden-by-search note. The reference video CENTRES this under the last row * with the note on its own line and the button beneath it, so it reads as the * end of the filtered list rather than another row. */ .reg-hidden-note { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 1rem; font-size: var(--fs-body); text-align: center; } /* "View All" is the OTHER way back to the unfiltered register, so it carries the * same enlargement as the toolbar Clear (operator 04/08/2026: a larger clear * button on every search filter). Was .3rem/.9rem — a pill smaller than the text * beside it. */ .reg-hidden-note .reg-viewall { flex: 0 0 auto; padding: .5rem 1.6rem; font-size: var(--fs-body); font-weight: 700; } /* "Strong work!" celebration panel (§11.2), shown in the grid when is:unapproved has nothing left to approve. */ .reg-strongwork { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 2rem 1.5rem; margin: 8px; } .reg-strongwork .sw-art { color: var(--accent); } .reg-strongwork .sw-balloon { width: 56px; height: 56px; } .reg-strongwork .sw-title { margin: 0; font-size: var(--fs-h2); } .reg-strongwork .sw-lead { margin: 0; color: var(--ink-muted); } .reg-strongwork .sw-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } /* ---------- desktop sidebar (§11.1) ---------- */ .sidebar { width: 260px; flex-shrink: 0; min-height: 100dvh; background: var(--sidebar); color: var(--sidebar-ink); padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; align-self: flex-start; max-height: 100dvh; overflow-y: auto; } .plan-switcher { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-align: left; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; width: 100%; } @media (hover: hover) { .plan-switcher:hover { background: var(--sidebar-hover); } } .plan-switcher.on { background: var(--sidebar-active); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .nav-items { display: flex; flex-direction: column; gap: 2px; } .nav-item { color: var(--sidebar-ink); padding: .45rem .6rem; border-radius: 8px; font-weight: 600; } @media (hover: hover) { .nav-item:hover { background: var(--sidebar-hover); } } .nav-item.active { background: var(--sidebar-active); } .acct-group-head { display: flex; justify-content: space-between; font-size: var(--fs-label); letter-spacing: .08em; color: var(--sidebar-muted); padding: .7rem .6rem .2rem; } .acct-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--sidebar-ink); padding: .3rem .6rem; border-radius: 8px; font-size: var(--fs-body); } @media (hover: hover) { .acct-row:hover { background: var(--sidebar-hover); } } .acct-row.active { background: var(--sidebar-active); } /* Name may wrap to two lines (e.g. "Mount Sinai Reconstruction"); min-width:0 * lets it wrap without starving the balance pill of its space. */ .acct-name { min-width: 0; } /* The negative balance is a red PILL. It must hug its own single line of text — * never stretch to the full height of a two-line account name (that ballooned * the red box and floated the figure), never shrink so the minus sign wraps a * row above the number, on any platform. */ .acct-bal.neg { background: var(--neg); color: var(--neg-ink); border-radius: 999px; padding: 0 .5rem; white-space: nowrap; align-self: center; flex-shrink: 0; height: fit-content; } .add-account { color: var(--sidebar-muted); padding: .5rem .6rem; font-size: var(--fs-body); background: none; border: none; text-align: left; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 6px; } @media (hover: hover) { .add-account:hover { color: var(--sidebar-ink); } } .add-account .ico { width: 1em; height: 1em; } /* Plan-switcher caret + inline near-you pin inherit text colour/size. */ .plan-caret .ico { width: .8em; height: .8em; } /* Signed-in account email under the plan name (§11.1): small grey, single * line, ellipsised so a long address never widens the rail. */ .sidebar-email { color: var(--sidebar-muted); font-size: var(--fs-label); padding: 0 .6rem; margin-top: -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nav item icon + label: expanded shows the label only (the sidebar's classic * text look); collapsed shows the icon only. */ .nav-item { display: flex; align-items: center; gap: 8px; } .nav-item .nav-ico { display: none; line-height: 0; } .nav-item .nav-ico .ico { width: 20px; height: 20px; } /* Collapsed icon rail (§11.1 footer toggle): narrow, icons only; plan * switcher, email and account rows hidden. Clicking an icon navigates as * usual; the footer icon expands. */ .sidebar.collapsed { width: 64px; padding: 14px 8px; } .sidebar.collapsed .plan-switcher, .sidebar.collapsed .sidebar-email, .sidebar.collapsed .nav-item .nav-label, .sidebar.collapsed .sidebar-collapse .nav-label { display: none; } .sidebar.collapsed .nav-item { justify-content: center; padding: .55rem; } .sidebar.collapsed .nav-item .nav-ico { display: block; } .sidebar.collapsed .sidebar-collapse { justify-content: center; } /* Footer collapse toggle: pinned to the sidebar foot, muted until hover. The * bottom margin keeps it clear of the fixed version + eye + gear cluster that * floats at the desktop bottom-left (40px pills at bottom:14px). */ .sidebar-collapse { margin-top: 0; margin-bottom: 0; background: none; border: 0; cursor: pointer; color: var(--sidebar-muted); font: inherit; font-size: var(--fs-body); display: flex; align-items: center; gap: 8px; padding: .5rem .6rem; border-radius: 8px; text-align: left; } @media (hover: hover) { .sidebar-collapse:hover { color: var(--sidebar-ink); background: var(--sidebar-hover); } } .sidebar-collapse .nav-ico { line-height: 0; } .sidebar-collapse .nav-ico .ico { width: 18px; height: 18px; } /* Sync status and collapse are one footer unit. Keeping margin-top:auto on the * button itself left a large blank flex gap between the in-flow strip and the * control, making a quiet status look like a floating banner. */ .sidebar-footer { margin-top: auto; margin-bottom: 56px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* ---------- Accounts screen (§5) ---------- */ .screen-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } :root { --accounts-value-column: 7.2rem; --accounts-options-column: 44px; } .accounts-route-root .group-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--accounts-value-column) var(--accounts-options-column); align-items: center; column-gap: 8px; } .accounts-route-root .group-head > strong { grid-column: 2; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .acct-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; transition: background var(--dur-fast) var(--ease-standard); } /* The press fill is a shape, not just a colour: an un-rounded rectangle inside * a 24px-rounded card read as off-theme against every other fill in the app * (operator 31/08/2026). --radius-s matches the iPad-landscape active row * below, so one account highlight has one shape on every touch surface. */ body[data-surface="phone"] .acct-list-row.account-row-pressing, body[data-surface="tablet"] .acct-list-row.account-row-pressing { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-radius: var(--radius-s); } /* align-items: center so a name that wraps to 2 rows (e.g. "Mount Sinai * Reconstruction") keeps its balance VERTICALLY CENTRED against the taller name * block, not pinned to the first line's baseline (operator 2026-07-12; applied * uniformly to the split-view row below too). */ .acct-list-link { display: grid; grid-template-columns: minmax(0, 1fr) var(--accounts-value-column); flex: 1; min-width: 0; gap: 8px; align-items: center; } /* Let a long account name wrap while the balance stays on ONE line so the minus * sign never breaks onto its own row above the digits (operator 2026-07-10: * "−" and "$27,496.20" must share a row). Name shrinks/wraps; amount holds. */ .acct-list-link > span:first-child { min-width: 0; } .acct-list-link > span:last-child { min-width: 0; text-align: right; white-space: nowrap; } .acct-split-select > span:first-child { min-width: 0; } .acct-split-select > span:last-child { min-width: 0; text-align: right; white-space: nowrap; } /* Add Account relocated to a right-aligned button at the bottom of the list * (operator 2026-07-10). The bottom margin lifts it clear of the fixed * +Transaction FAB (also bottom-right) so the two never overlap when the list * is scrolled to the end. */ .acct-add-bottom { display: flex; justify-content: flex-end; margin: 12px 0 56px; } body[data-surface="tablet"] .acct-split-list .acct-add-bottom { margin: 12px 0 12px; } .acct-row-ellipsis { background: none; border: none; cursor: pointer; font-size: var(--fs-h3); color: var(--muted); padding: .2rem .5rem; } /* Touch: ⋯ measured 31px wide (v1.29.0 tapthru §1); background-free, so the * widening is invisible — pure hit-box growth at the row's right edge. */ body[data-surface="phone"] .acct-row-ellipsis, body[data-surface="tablet"] .acct-row-ellipsis { min-width: var(--ctl-h-md); display: inline-flex; align-items: center; justify-content: center; } @media (hover: hover) { .acct-row-ellipsis:hover { color: var(--ink); } } .acct-split-select { display: grid; grid-template-columns: minmax(0, 1fr) var(--accounts-value-column); flex: 1; min-width: 0; gap: 8px; align-items: center; background: none; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; } /* ---------- iPad-landscape Accounts split view (§5) ---------- * Scoped by the tablet surface + orientation, NOT a width band: real iPads in * landscape are 1080–1366 logical px, so the old `(min-width:768px) and * (max-width:1023px)` cap excluded every modern iPad — the split DOM rendered * as two unstyled stacked blocks on device. The shell only builds .acct-split * on the tablet surface, so body[data-surface="tablet"] is the correct gate. */ @media (orientation: landscape) { body[data-surface="tablet"] #app:has(.acct-split) { height: 100dvh; } /* column, not row (mission 20/08/2026 item 6): the standalone fixed-chrome * header row (shell.js #routeHeaderHost, built when Accounts' split layout * owns no direct-child .screen-title) stacks ABOVE the split pane rather * than sitting beside it as a flex sibling — .acct-split still fills the * remaining height and stays a row internally. */ body[data-surface="tablet"] .content:has(.acct-split) { max-width: none; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Match .content's own normal padding exactly (16px sides, 12px + safe-area * top — the same box Home's .route-header-row sits inside) so the fixed * chrome lands at the IDENTICAL position as every other tablet route, * pixel for pixel, not an approximated standalone offset. */ body[data-surface="tablet"] .content:has(.acct-split) > .route-header-row-standalone { flex: 0 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px 0; } body[data-surface="tablet"] .acct-split { display: flex; flex: 1; min-height: 0; align-items: stretch; } body[data-surface="tablet"] .acct-split-list { width: 320px; flex: 0 0 320px; overflow-y: auto; border-right: 1px solid var(--hairline); padding: 0 .5rem 1rem; } body[data-surface="tablet"] .acct-split-detail { flex: 1; min-width: 0; overflow-y: auto; padding: 0 1rem 1rem; } body[data-surface="tablet"] .acct-list-row.active { background: var(--surface-hover); border-radius: var(--radius-s); } } /* Touch Accounts chrome: the Spending entry is a small all-caps lozenge and * account detail titles use the same left-aligned, grey-outline/no-fill face. * Both controls remain token-derived in light and dark themes. */ body:is([data-surface="phone"], [data-surface="tablet"]) .spending-title-row .reg-accounts-trigger { width: auto; min-width: 34px; padding-inline: 9px; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--ink-muted); } body:is([data-surface="phone"], [data-surface="tablet"]) .spending-title-row .accounts-back { width: 34px; min-width: 34px; padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink-muted); } body:is([data-surface="phone"], [data-surface="tablet"]) .reg-accounts-all { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .08em; line-height: 1; } body:is([data-surface="phone"], [data-surface="tablet"]) .account-title-lozenge { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 0; max-width: 100%; width: fit-content; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-s); background: transparent; color: var(--ink-muted); text-align: left; font-size: var(--fs-value); line-height: 1.2; } /* ---------- phone tab bar / tablet pill nav (§2) ---------- */ /* Phone bottom tab bar, docked flush to the bottom edge (2026-07-08, reverted * from floating pill to save vertical space). 7 items fill the bar via flex * grow; overflow-x: auto is a safety net only, so items scroll instead of * clipping if they ever don't fit. Safe-area inset is bottom padding, not * an offset, so content clears the iOS home indicator. */ /* Rounded floating tab bar (operator 2026-07-08i): a card-coloured pill inset * from the screen edges, horizontally scrollable if the six tabs don't fit. * Each tab is an icon above a small label (YNAB-style). A single sliding glass * lozenge sits behind the active tab (.tab-lozenge) rather than a per-item chip. */ .tab-bar { /* Sits LOWER (operator 2026-07-11, mimic the original): flush against the * home indicator — the 6px float gap is gone; the safe-area inset alone * keeps it clear of the indicator. */ /* Sit LOWER (operator 2026-07-12: "needs to be lower… still wasted space * below"). The full safe-area inset (~34px on a notched iPhone) floated the bar * well clear of the home indicator; pull it down by part of that inset so it * hugs the bottom while still clearing the indicator. Floored at 2px so a device * with no inset doesn't touch the very edge. */ --tab-bar-bottom: max(env(safe-area-inset-bottom, 0px), clamp(14px, 5.22vw, 21px)); position: fixed; left: clamp(16px, 5.22vw, 24px); right: clamp(16px, 5.22vw, 24px); bottom: var(--tab-bar-bottom); height: var(--tab-bar-height); box-sizing: border-box; display: flex; justify-content: space-between; gap: 1px; /* Glass toolbar (operator 2026-07-09), transparency ratcheted by operator: * 72→36→12→6%, then 3× MORE transparent again (2026-07-11) — 6%→2%. The * blur + hairline alone carry the frosted look now. */ background: color-mix(in srgb, var(--card) 2%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--chrome-edge); border-radius: 24px; /* Taller bar (operator 2026-07-08j): ~15% more vertical room so the icons and * labels can grow and read easier. */ padding: 4px 6px; z-index: 20; overflow-x: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, .12); scrollbar-width: none; } /* Fixed chrome is positioned against the visual viewport while iOS resizes it * for the keyboard. Move only the keyboard-open tab bar back to the layout * viewport bottom; at rest the shared reduction is zero and geometry is unchanged. */ html[data-vv-keyboard="true"] body:is([data-surface="phone"], [data-surface="tablet"]) .tab-bar { bottom: calc(var(--tab-bar-bottom) - var(--vv-keyboard-reduction, 0px)); } .tab-bar::-webkit-scrollbar { display: none; } .tab-item { position: relative; z-index: 1; /* Five tabs share the bar's width (operator 2026-07-11): the sixth (Pricer) * rests out of view and scrolls in on a swipe — the scrolling toolbar the * operator asked for. min-width: max-content (punch 21, operator: "every * tab's title on every platform is never truncated"): a tab whose label * needs more than its 20% share (e.g. "Scheduled" on a narrow phone) widens * to fit instead of ellipsising — the bar already scrolls, so extra width * costs nothing. */ /* The five-tab reference allocates 68/66/72/72/68px inside the 346px * content strip at 402px. The shell supplies these weights so the centres * remain proportional on other supported viewports while matching the * measured 62/129/198/270/340px centres at the primary viewport. */ flex: var(--tab-weight, 1) 1 0; min-width: max-content; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink-muted); font-size: var(--fs-micro); font-weight: 600; padding: 3px 2px; border-radius: 26px; white-space: nowrap; transition: color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); } .tab-item .tab-ico { line-height: 0; } /* Bolder, blacker toolbar (operator 2026-07-09): thicker icon stroke + near-black * ink on inactive tabs so the glass bar's icons stand out; active stays accent. */ /* Lighter, less blocky icons + labels (operator 2026-07-10): back off the * heavy 2.15 stroke and near-black 700 weight to a softer iOS-style weight. */ /* Larger toolbar icons on touch (operator 2026-07-12): the bar (phone/tablet * only — it never renders on desktop) has vertical slack, so the glyph can grow * from 1.6em → 2.05em without touching the bar height, label, or any tab width. */ /* Bigger glyphs (operator 2026-07-12: "make icons larger IF POSSIBLE… small * relative to the height avail"). The bar has vertical slack, so grow the icon * from 2.05em → 2.4em without touching bar height or tab width. */ .tab-item .tab-ico .ico { width: 24px; height: 24px; stroke-width: 1.75; } .tab-item:not(.active) { color: var(--tab-inactive); font-weight: 500; } /* Labels never truncate (punch 21): .tab-item's min-width: max-content above * guarantees room, so the old overflow/ellipsis clamp is gone. */ .tab-item .tab-label { max-width: none; } .tab-item:active { transform: scale(.92); } /* A hair larger where there's width to spare; still fits "Scheduled" at 375px. */ @media (min-width: 390px) { .tab-item { font-size: var(--fs-label); } } .tab-item.active { color: var(--accent); } /* Sliding glass lozenge behind the active tab. Animates left/width; the eased * transform gives a soft warp as it travels. No colour cycling. * CONVEX water-droplet glass (operator 2026-07-11): a top-edge specular * highlight, a soft dark ground shadow at the bottom edge and a faint radial * sheen make the pill read as a raised droplet, not a flat chip. All overlays * are white/black at low alpha over the token base, so both themes read. */ .tab-lozenge { position: absolute; top: 4px; bottom: 4px; left: 0; width: 20%; /* FROSTED, not opaque (operator 2026-07-12): the fill is a translucent tint over * a backdrop blur so the bar/content shows through like real frosted glass, * instead of the solid --chip chip that read as fully opaque in dark mode. The * specular gradient sits on top for the raised-droplet sheen. */ background: color-mix(in srgb, var(--accent) 18%, transparent); background-image: none; -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); /* Rounder than the old 16px squircle (operator 2026-07-14: "a bit more circle * than square, within reason"). 22px reads noticeably more pill-like at this * ~30px tile height without going fully circular. */ border-radius: 22px; z-index: 0; opacity: 0; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--card) 50%, transparent); transition: left var(--dur-slow) var(--ease-spring), width .32s cubic-bezier(.34, 1.35, .5, 1), opacity .2s ease; pointer-events: none; } /* Accounts' reference lozenge is content-hugging and slightly shorter than * the Spending/Plan tiles (about 87×50 at 402×874). */ .tab-lozenge.accounts-target { top: 5.5px; bottom: 5.5px; } /* Left-most tab selected → FLAT frosted glass, not the convex droplet (operator * 2026-07-14). Drop the specular radial highlight and the raised inset shadows; * keep only the translucent tint + blur and a hairline edge, so it reads as a * plain pane of frosted glass sitting flush on the bar. */ .tab-lozenge.at-start { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 34%, transparent); } [data-theme="dark"] .tab-lozenge.at-start { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 24%, transparent); } [data-theme="dark"] .tab-lozenge { /* Dark: a lighter translucent tint over the blur so the tile reads as frosted * glass, not a solid block (operator 2026-07-12 — the opaque chip was the bug). */ background: color-mix(in srgb, var(--accent) 22%, transparent); background-image: none; border-color: color-mix(in srgb, var(--accent) 36%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--card) 22%, transparent); } /* (Tablet top pill nav removed 2026-07-07c: tablet now shares the phone bottom * tab bar in every orientation — operator wanted one consistent bottom location * that never jumps to the top. See .tab-bar rules and shell.js #tabBar.) */ /* ---------- register: phone/tablet list (§3) ---------- */ .txn-list { padding-top: 6px; } /* Uncleared-only filter view: a soft amber tint fills the whole list so it reads * as a distinct, temporary slice of the register (operator 2026-07-12). Tokened * off --warn so it tracks dark/light; the "Show all transactions ›" banner * reverts it. */ .txn-list-uncleared { background: color-mix(in srgb, var(--amber) 12%, var(--card)); border-radius: 14px; padding-left: 10px; padding-right: 10px; } /* The ROWS themselves must be tinted too, not just the section behind them * (operator 2026-07-12): each row paints an opaque --card fill on both its swipe * wrapper and the row cell, so previously only the gaps/borders showed the amber * and every row stayed white. Tint both fills to the SAME amber so the whole row * is filled. Same color-mix as the section, so row and surround read as one tint. */ .txn-list-uncleared .swipe-wrap, .txn-list-uncleared .swipe-wrap .txn-row { background: color-mix(in srgb, var(--amber) 12%, var(--card)); } .date-head { font-weight: 600; font-size: var(--fs-body); padding: .7rem 0 .2rem; color: var(--ink-muted); } /* Faint on-theme blurple wash on every Spending date-header row, touch only * (D-102 batch, item 4). Ordinary transaction date groups, groups inside the * Scheduled band, and Current-touch search result date labels (same grouping * concept, different markup) all share this tint. Scoped to /spending only — * desktop Spending and per-account register date headers (route "account") * keep their existing look. */ body[data-route="spending"]:is([data-surface="phone"], [data-surface="tablet"]) :is(.date-head, .reg-search-preview-date) { background: var(--scheduled-fill); border-radius: var(--radius-s, 8px); padding-inline: .5rem; } .txn-row { padding: .5rem 0 .5rem .6rem; border-top: 1px solid var(--hairline); cursor: pointer; position: relative; border-radius: 8px; } .txn-row:first-of-type { border-top: 0; } /* Hover tints are MOUSE-ONLY app-wide (operator 2026-07-11): iOS keeps :hover * latched on the last-touched row after a scroll-release, leaving a stuck grey * box (the "Acres Animal" report). Every row-hover below hides behind * (hover: hover); keyboard focus keeps its ring everywhere. */ .txn-row:focus-visible { background: color-mix(in srgb, var(--accent) 5%, transparent); outline: none; } @media (hover: hover) { .txn-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); outline: none; } } .txn-row.flagged::before { content: ''; position: absolute; left: -2px; top: .4rem; bottom: .4rem; width: 6px; border-radius: 3px; background: var(--flag, transparent); /* thicker flag (item 11) */ } /* Fresh-start "match YNAB" correcting transaction: a reserved TEAL used nowhere else in the app (#00a3a3) — a teal fill + left stripe so the one adjustment entry is unmistakable in the register on both surfaces. */ .txn-row.txn-reconcile, .reg-row.txn-reconcile { background: color-mix(in srgb, var(--adjust-teal) 12%, transparent); box-shadow: inset 3px 0 0 var(--adjust-teal); } /* The row's text block. In ordinary mode it is a plain wrapper and changes * nothing; in SELECT mode it is the flex sibling the check circle centres * against, which is what keeps the payee line and the sub-line on ONE left * rail (register.js — the 38px rail break the operator reported). */ .txn-body { min-width: 0; flex: 1 1 auto; } /* SELECT mode makes the row itself the flex container so the leading circle is * measured against the FULL row height, not the first text line. */ .txn-row.selecting, /* A reconciled row needs the same row-level flex rail even outside SELECT mode: * the lock is a status control, not part of the baseline-aligned payee line. */ .txn-row.reconciled { display: flex; align-items: center; gap: 10px; } .txn-status-rail { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .txn-main { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; min-width: 0; } .txn-payee { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Recurring marker (operator 2026-07-15, punch B6): a small repeat glyph beside * the payee on any row posted from a schedule (import_ref starts "sched:"). * Muted so it reads as metadata, not a call to action; sized off the em so it * never grows the row or clips against the payee text either side of it. */ /* aspect-ratio + min-width/min-height keep the disc CIRCULAR (operator * 2026-07-17: "the RECURRING icon should be a circle not ovoid"). `flex: 0 0 * auto` fixes only the MAIN axis; the cross axis was free to stretch against * the row's line box, so the round glyph painted as an egg. */ /* 2026-07-17 (tapthru): `vertical-align: middle` aligns to the text BASELINE plus half an * x-height, which is NOT the line box's centre — the glyph painted 1.13px BELOW its row's * centre in every register/spending list, on every device and both themes. Measured, not * eyeballed. `.txn-payee` is an ellipsised nowrap span, so the row itself cannot become a * flex container without losing truncation; instead the glyph centres itself the way this * codebase's other inline glyph (.xfer-chev) already does — inline-flex + centre — which * measures dY = 0.00 and needs no magic offset to maintain. */ /* Glyph + frequency word as ONE compact inline badge, so a scheduled row reads * exactly like a normal one save for this small label (operator 2026-07-20, * Win11). It stays inline in the nowrap payee cell for constrained rows; the * roomy list rail promotes it after the category chip before first paint. The * word is muted-accent and a notch smaller than the payee so it registers as * metadata, not a second payee. */ .reg-recur { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; cursor: pointer; vertical-align: calc((1cap - 1em) / 2); } /* Touch: the badge is a real control (role="button" — it opens the schedule) but * it is a SPAN, so app.css's blanket 44px floor (which targets button/.btn/…) * never reached it and it measured 16px tall on every iPad and phone profile * (v1.74.0 sweep, 24 records). * * The touch target used to be grown with vertical padding plus a cancelling * negative margin. That keeps the badge's INLINE contribution at 16px, but the * border box still measures the full 44px, and a border box taller than its row * is what the operator sees crossing the hairline (01/09/2026; measured row * 36.61px vs badge 51.16px, over by 6.75px above and 7.79px below). The target * is therefore grown by a positioned ::after instead — an absolutely positioned * child is out of flow, so it can exceed the badge without enlarging any box * the row has to contain. Paint and inline metrics are unchanged. */ body[data-surface="phone"] .reg-recur, body[data-surface="tablet"] .reg-recur { position: relative; padding-block: 0; margin-block: 0; background: transparent; } body[data-surface="phone"] .reg-recur::after, body[data-surface="tablet"] .reg-recur::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--ctl-h-md); transform: translateY(-50%); } /* Inline transfer editor: the payee cell holds "From → To (select)" so a * transfer edits in its own grid row like every other transaction, no giant * sheet (operator 2026-07-20, Win11). */ .ir-xfer-ends { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .ir-xfer-ends .ir-xfer-from { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ir-xfer-ends .xfer-chev { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--accent); } .ir-xfer-ends .ir-xfer-to { min-width: 0; flex: 1 1 auto; } .txn-amount { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; } .txn-amount.pos { color: var(--pos); } .cleared-badge { display: inline-block; background: var(--pos); color: var(--pos-ink); border-radius: 50%; font-size: var(--fs-micro); width: 1rem; height: 1rem; text-align: center; line-height: 1rem; } /* WRAPS rather than clipping (operator 2026-07-14). The category chip and the * account/memo meta share this line, and on a phone a pair like * "Inflow: Ready to Assign" + "DBS Checking July salary" simply does not fit — * the old meta was ellipsising the memo. A second line costs * nothing; a clipped account name is the bug. Same rule as the Scheduled rows. */ .txn-sub { display: flex; justify-content: flex-start; align-items: center; gap: 10px; font-size: var(--fs-body); margin-top: .15rem; min-width: 0; flex-wrap: wrap; row-gap: 2px; } .txn-memo { margin-top: .1rem; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--chip); color: var(--ink); border-radius: 999px; padding: .05rem .55rem; font-size: var(--fs-label); } /* Category chip leads the sub line and keeps its width; account and memo then * own a full-width, left-aligned rail beneath it. */ .txn-sub .chip { flex: 0 1 auto; } /* No ellipsis: the metadata rail wraps rather than being cut off mid-word. * It no longer CLAIMS a whole row of its own: `flex: 1 0 100%` forced a line * break before the account lozenge, so "Transfer" and "Savings Nala" always * stacked even when both fitted easily side by side (operator 31/08/2026, * measured: chip top 506.88, lozenge top 531.5 on a 402px screen). Growing * from a zero basis lets the pair share the chip's row and still wrap onto a * second line by itself when a long memo genuinely needs one. */ .txn-sub-meta { display: inline-flex; align-items: flex-start; justify-content: flex-start; /* A zero basis, not `auto` (operator 01/09/2026: "the 'transfer' glyph can be * same row as the account"). With `flex-basis: auto` the rail asked for its * whole max-content — lozenge 114.5px PLUS memo 172.6px — and `.txn-sub` is * wrap, so the browser moved the entire rail to line 2 rather than shrinking * it, taking the account lozenge down with the memo. Measured on iPhone 13 * Pro Max: chip 214.5 + rail 287.1 + 10px gap = 511.6 inside a 346px sub. * From zero the rail takes only the room left beside the chip and wraps * INTERNALLY, so the lozenge keeps the chip's row and only the memo — which * genuinely needs its own line — drops beneath. */ flex: 1 1 0; min-width: 0; gap: .35rem; text-align: left; margin-left: 0; flex-wrap: wrap; } .txn-account-lozenge { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--hairline); background: transparent; color: var(--ink-muted); border-radius: 999px; padding: .05rem .55rem; white-space: normal; overflow-wrap: anywhere; } .txn-memo-inline { min-width: 0; white-space: normal; overflow-wrap: anywhere; } .txn-sub:only-child, .txn-sub > .chip:only-child { justify-content: flex-start; } /* Global floating "+ Transaction" pill (§2/§3; operator 2026-07-08i). YNAB-style: * right-aligned above the tab bar and semi-transparent (frosted) so the list * shows through, on every tab. iOS press bounce via .fab-txn:active. */ .fab-txn { /* Bottom aligned to the scroll-to-top disc (operator 2026-07-12 punch 16) so * the FAB and the disc sit on ONE line; the max-width guard below keeps the * expanded pill from ever touching the centred disc. */ position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; /* Width cap that only bites when the disc is actually on screen (operator * 2026-07-13: the pill had become far too small — it is a critical, high- * frequency button and must be comfortably tappable). * * MECHANISM: the centred scroll-to-top disc only appears once scrolled * (> 240px), and by then the FAB has all but collapsed to a bare + (its label * hides as --fab-shrink → 1). So a HARD 50%−40px cap on the EXPANDED pill was * guarding a collision that only happens while collapsed — and that cap is * exactly what forced the earlier fluid font/padding shrink that shrank the * resting pill. Fix: interpolate the cap on --fab-shrink. At rest (shrink 0, * disc hidden) the pill is capped only by a roomy content width, so the full * word shows at full size on every phone. As it collapses (shrink → 1, disc * appearing) the cap tightens to the disc-safe 50%−40px — which keeps the * +4px gap during the scroll-UP transient where the disc is still shown while * the pill re-expands. Never truncates (label max-width, not this, ellipses), * never overlaps the disc. */ --fab-cap-safe: calc(50% - 48px); /* disc-safe cap with a clear 12px gap */ --fab-cap-open: min(100%, 20rem); /* roomy cap at rest — full word, full size */ max-width: calc(var(--fab-cap-safe) + (var(--fab-cap-open) - var(--fab-cap-safe)) * (1 - var(--fab-shrink))); /* Glassy purple (operator 2026-07-08j): keep the purple identity but make the * fill ~80% transparent so the list shows through, with a frosted blur and a * bright inner-edge highlight so the rim reads as glass. The text keeps a full * accent colour + a subtle white halo so it stays legible over the see-through * fill in both themes (rule 14). */ /* Transparency ratchet (operator): 5%→1.7%→0.85%, then 3× MORE transparent * again (2026-07-11) — 0.85%→0.3%; the frosted blur + bright rim carry it. */ background: color-mix(in srgb, var(--accent) 0.3%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); cursor: pointer; /* Comfortable fixed size (operator 2026-07-13: was far too small). The shrink- * aware max-width cap above now lets the full-size pill show its full word on * every phone, so the fluid downscale is gone — the compact pill keeps the * full label without unnecessary width. Horizontal padding lives in the shrink block below (it has to * interpolate with --fab-shrink); only the vertical padding lives here. */ font: inherit; font-weight: 700; padding-top: .7rem; padding-bottom: .7rem; font-size: var(--fs-value); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .12); text-shadow: 0 1px 2px rgba(255, 255, 255, .35); z-index: 15; transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-standard); } [data-theme="dark"] .fab-txn { color: var(--accent-ink); /* Tripled transparency in step with light (operator 2026-07-11): 1.35%→0.45%. */ background: color-mix(in srgb, var(--accent) 0.45%, transparent); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); box-shadow: 0 4px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18); } .fab-txn .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; } .fab-txn:active { transform: scale(.93); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 24%, transparent); } /* Scroll-aware shrink (operator 2026-07-11, original-app-exact): scrolling down * collapses the pill to a bare + with a bounce; any scroll up bounces the label * back out. The label's max-width/opacity animate on the same springy curve the * FAB already uses for its press bounce. * * Circle-not-lozenge (operator 2026-07-12): the collapsed state must be a TRUE * circle around the +, not a wide capsule. Previously only padding-RIGHT shrank * (1.15rem→.7rem) while padding-left stayed 1.15rem, so the fully-shrunk pill was * a lozenge. Now BOTH horizontal paddings interpolate to the SAME value as the * vertical padding (.7rem), and at full shrink the box is pinned to an equal * width/height so the + sits dead-centre in a round button. */ .fab-txn { --fab-shrink: 0; /* Base horizontal padding keeps the label readable without the old oversized * face. The shrink term interpolates it toward .7rem (= vertical padding, a square) as the pill * collapses to a bare + on scroll. --fab-pad is the live base so the label * max-width (below) can key off the same value. */ --fab-pad: 1.15rem; padding-left: calc(var(--fab-pad) - (var(--fab-pad) - .7rem) * var(--fab-shrink)); padding-right: calc(var(--fab-pad) - (var(--fab-pad) - .7rem) * var(--fab-shrink)); /* True circle when collapsed (operator 2026-07-14): the comment above claimed * the collapsed box was "pinned to equal width/height", but nothing pinned it, * so it read as a 47×52 EGG — the icon line box makes it taller than the * padding+icon width. Give the button a fixed square height and grow min-width * to match, both faded in on --fab-shrink: at rest (shrink 0) width & height * are auto/content (the roomy pill is untouched); at full shrink both axes * meet at --fab-round, which border-radius:999px renders as a perfect circle. * box-sizing:border-box (global) counts the 1px border on both axes. */ --fab-round: 48px; /* collapsed circle diameter */ min-height: calc(var(--fab-round) * var(--fab-shrink)); min-width: calc(var(--fab-round) * var(--fab-shrink)); } /* Collapse the icon↔label gap in step with the label so no stray space is left * on the right when the label is gone. Uses the :has(.ico) selector so it wins * against the generic `.fab-txn:has(.ico){gap:6px}` rule above (same specificity, * later in source) — a plain `.fab-txn{gap}` was silently overridden, leaving a * 6px stub that stopped the collapsed pill being a clean circle. */ .fab-txn:has(.ico) { gap: calc(0.4rem * (1 - var(--fab-shrink))); } .fab-txn .fab-label { max-width: calc(8em * (1 - var(--fab-shrink))); opacity: calc(1 - var(--fab-shrink)); /* NO ellipsis (operator 2026-07-14, sole exception): as the pill collapses on * scroll, "Transaction" is clipped by the shrinking max-width and faded out — * a mid-clip "…" looked broken, so the word simply crops with no ellipsis. */ overflow: hidden; white-space: nowrap; text-overflow: clip; } /* Pricer keeps the same global FAB mounted and functional, but pins it to the * existing compact circular + state so it does not cover the comparison flow. */ .fab-txn.fab-txn-compact { --fab-shrink: 1; } /* ---------- Spending list: search + SELECT (operator 2026-07-08i) ---------- */ /* Two-band header (operator 2026-07-14): the earlier single-row layout crammed * the title, search, Select AND the fixed version/eye/gear cluster onto ONE line, * so the 2rem title truncated to "Spen…" on a phone. Now the title uses the plain * .screen-title on its own row (standard 152px reserve clears the cluster, and * "Spending" fits with room to spare), and these tools live on their OWN row * below — right-aligned, sitting under the fixed cluster where they have full * width. The title position is now identical to every other tab. */ .reg-headtools { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 10px; } .reg-titletools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .reg-icon-btn { width: 38px; height: 38px; border: 0; background: var(--chip); color: var(--ink); border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-standard); } body[data-surface="phone"] .reg-icon-btn, body[data-surface="tablet"] .reg-icon-btn { width: var(--ctl-h-md); height: var(--ctl-h-md); min-width: var(--ctl-h-md); min-height: var(--ctl-h-md); } body:is([data-surface="phone"], [data-surface="tablet"]) .reg-accounts-trigger { flex: 0 0 var(--ctl-h-md); padding: 0; } body:is([data-surface="phone"], [data-surface="tablet"]) .reg-accounts-trigger > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .reg-icon-btn .ico { width: 1.35em; height: 1.35em; } .reg-icon-btn:active { transform: scale(.88); } .reg-icon-btn.on { background: var(--accent); color: var(--accent-ink); } .reg-select-btn { border: 0; background: var(--chip); color: var(--accent); font: inherit; font-weight: 700; font-size: var(--fs-body); padding: .5rem 1rem; border-radius: 12px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-standard); } .reg-select-btn:active { transform: scale(.94); filter: brightness(.93); } .reg-select-btn.on { background: var(--accent); color: var(--accent-ink); } .reg-search { margin: 8px 0; animation: views-sheet-in .25s cubic-bezier(.34, 1.4, .5, 1); } /* Search bar: rounded pill (magnifier + field + clear-×) beside a round dismiss-× (iOS YNAB, IMG_4703). */ .reg-search-bar { display: flex; align-items: center; gap: 10px; } .reg-search-pill { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hairline)); border-radius: 999px; padding: .55rem .85rem; box-shadow: none; } .reg-search-pill:focus-within { border-color: var(--accent); outline: none; box-shadow: none; } .reg-search-mag { flex: 0 0 auto; display: inline-flex; color: var(--ink-muted); } .reg-search-mag .ico { width: 1.25em; height: 1.25em; } .reg-search-input { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-value); padding: .15rem 0; } .reg-search-input:focus { outline: none; } .reg-search-input::-webkit-search-cancel-button { display: none; } /* use our own × */ .reg-search-clear { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); position: relative; /* anchors the touch overlay below */ } /* The visible disc stays 26px — it is a small clear affordance beside the * field, and growing the box would push the toolbar around. The TAP area is * widened instead by a transparent overlay sized independently of layout, so * the finger gets the full floor without the disc changing size (the * grid-track lesson in the geometry doctrine: widen the target, not the box). * Sweep 27/07/2026 measured it 26px wide on every phone and tablet profile in * both themes, because the blanket touch floor only lifts min-height. */ body[data-surface="phone"] .reg-search-clear::after, body[data-surface="tablet"] .reg-search-clear::after { content: ''; position: absolute; left: 50%; top: 50%; width: var(--ctl-h-md); height: var(--ctl-h-md); transform: translate(-50%, -50%); } .reg-search-clear .ico { width: .85em; height: .85em; stroke-width: 2.6; } .reg-search-clear.hidden { display: none; } .reg-search-dismiss { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--hairline); color: var(--ink); transition: transform var(--dur-fast) var(--ease-spring); } .reg-search-dismiss:active { transform: scale(.9); } .reg-search-dismiss .ico { width: 1.15em; height: 1.15em; } .reg-search-sugg-h { font-weight: 700; font-size: var(--fs-value); margin: 1.1rem 0 .2rem; } .reg-search-scopes { display: flex; flex-direction: column; } .reg-scope-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--hairline); background: none; color: var(--ink-muted); font: inherit; font-size: var(--fs-value); padding: .85rem .3rem; cursor: pointer; } .reg-scope-row:first-child { border-top: 0; } .reg-scope-row .scope-ico { color: var(--ink); display: inline-flex; flex: 0 0 auto; } .reg-scope-row .scope-ico .ico { width: 1.5em; height: 1.5em; } .reg-scope-row .scope-term { color: var(--ink); font-weight: 600; } .reg-scope-row.on { color: var(--accent); font-weight: 600; } .reg-scope-row.on .scope-ico, .reg-scope-row.on .scope-term { color: var(--accent); } /* SELECT-mode bar. Rebuilt 2026-07-14 (operator: "the DOWN arrow beside ACTIONS * gets shifted below it and other truncations occur in the text left of that, * very poor graphic design"). * * Root cause: three items competed for one flex line, and the count was a single * long unbreakable string ("−$60.00 / 1 selected"). Under pressure the text wrapped * and the button's own label broke apart, dropping the caret onto a second line. * * Fix at the mechanism: the count is a two-line STACK (amount over "N selected"), * min-width:0 so it — and only it — absorbs any shortfall; both buttons are * flex-none and nowrap, so a button can NEVER break internally. */ .reg-selbar-mobile { display: flex; align-items: center; gap: 10px; background: var(--chip); border-radius: 14px; padding: .5rem .7rem; margin: 8px 0; } .rsm-count { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } .rsm-sum { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsm-sum.neg { color: var(--neg); } .rsm-sum.pos { color: var(--pos); } .rsm-n { font-size: var(--fs-label); color: var(--ink-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsm-actions, .rsm-done { flex: 0 0 auto; white-space: nowrap; } .rsm-actions { display: inline-flex; align-items: center; gap: 5px; padding: .4rem .9rem; font-size: var(--fs-body); /* POPS in with a rebound the first time a row is selected (operator * 30/07/2026). The pill is absent from the DOM while the selection is empty * — see register.js — so this entrance runs exactly once per fresh selection * and never as a re-entrance on every count change. */ animation: rsm-actions-pop .34s cubic-bezier(.34, 1.56, .64, 1) both; transform-origin: center; } @keyframes rsm-actions-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Empty-state copy standing where the pill will appear, so the bar reads as * "nothing chosen yet" rather than as a bar missing a button. */ .rsm-hint { flex: 0 0 auto; white-space: nowrap; font-size: var(--fs-label); color: var(--ink-muted); font-weight: 600; padding: .4rem .2rem; } @media (prefers-reduced-motion: reduce) { .rsm-actions { animation: none; } } /* The caret is part of the button's own flex line and never wraps away from the * label — the exact failure the operator photographed. */ .rsm-caret { flex: 0 0 auto; font-size: .78em; line-height: 1; opacity: .9; } /* SELECT-mode row: leading check circle; suppress swipe reveal. */ .swipe-wrap.selecting .swipe-actions { display: none; } /* The circle is the row's LEADING control, centred on the whole row by * `.txn-row.selecting`. Its own margin is gone — the row's flex `gap` owns the * spacing now, and keeping both stacked a 22px circle 8px further from the text * than the sub-line's own left edge. */ .sel-circle { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--accent-ink); transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); } /* 44px live zone on the 22px disc without moving the disc itself (the same * mechanism as the desktop `.c-sel::before` hit overlay — a real element's * ::before, never a replaced input's). */ .sel-circle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .sel-circle.on { background: var(--accent); border-color: var(--accent); transform: scale(1.05); } .sel-circle .ico { width: 15px; height: 15px; } .txn-row.row-selected { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* ---------- register: desktop dense grid (§11.2), single row per txn ---------- */ .bal-equation { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .bal-equation small { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--ink-muted); letter-spacing: .04em; } .bal-cleared, .bal-uncleared { color: var(--pos); } /* Future-dated rows are their own term — not money in limbo (see register.js). */ .bal-scheduled { color: var(--ink-muted); } .bal-working { color: var(--accent); } .bal-op { color: var(--ink-muted); font-weight: 400; } .reg-toolbar { display: flex; gap: 8px; margin-bottom: 10px; } .reg-toolbar .btn { padding: .4rem 1rem; font-size: var(--fs-body); min-height: var(--ctl-h-sm); } .reg-toolbar .btn.on { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); color: var(--accent); } body[data-surface="phone"] .reg-toolbar .btn, body[data-surface="tablet"] .reg-toolbar .btn { min-height: var(--ctl-h-md); } .reg-undo-group { display: inline-flex; gap: 6px; } .reg-undo-group .btn[disabled] { opacity: .45; cursor: default; } .reg-view-menu { position: fixed; z-index: 90; width: 270px; padding: 10px; border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); } .reg-view-title { font-weight: 700; padding: 2px 4px 8px; } .reg-view-block { padding: 8px 4px; border-block: 1px solid var(--hairline); } .reg-view-label { display: block; margin-bottom: 6px; font-size: var(--fs-label); color: var(--ink-muted); } .reg-view-segments { display: grid; grid-template-columns: repeat(3, 1fr); } .reg-view-segments button { min-height: 26px; border: 1px solid var(--hairline); background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-label); cursor: pointer; } .reg-view-segments button + button { border-left: 0; } .reg-view-segments button:first-child { border-radius: 6px 0 0 6px; } .reg-view-segments button:last-child { border-radius: 0 6px 6px 0; } .reg-view-segments button.on { background: transparent; border-color: transparent; color: var(--accent-ink); } .reg-view-check { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 4px; font-size: var(--fs-body); cursor: pointer; } .reg-view-check input { accent-color: var(--accent); } .reg-grid { padding: 0; overflow: visible; } /* Keep the document as the vertical and horizontal scroll owner. A mixed-axis * overflow container makes a sticky register header stick to an unscrolling * grid box instead of the viewport; desktop grids may still widen the page and * use the document's horizontal scrollbar when a narrow width needs it. */ html:has(body[data-surface="desktop"] .reg-grid) { overflow-x: auto; } .reg-row { display: grid; align-items: center; gap: 8px; /* Flag column 4px → 7px: thicker colour stripe for visibility (item 11). * The five resizable tracks read through --reg-c-* so a drag on the header's * grip can retune them (operator 2026-07-29: drag-to-resize column width). * Each falls back to the width it has always had, so a device that has never * dragged anything renders byte-identically to before. */ grid-template-columns: 1.2rem 1.35rem 1.2rem var(--reg-c-acct, 8rem) var(--reg-c-date, 6.8rem) var(--reg-c-payee, 1.25fr) var(--reg-c-cat, minmax(var(--reg-min-cat, 0px), 1.5fr)) var(--reg-c-subcat, minmax(var(--reg-min-subcat, 0px), 1.5fr)) var(--reg-c-memo, 1fr) 7.4rem 7.4rem 1.4rem; padding: 0 10px; min-height: 28px; border-top: 1px solid var(--hairline); font-size: var(--fs-body); white-space: nowrap; } /* Outflow/Inflow amounts never wrap their sign onto a second line, whatever the * figure length (broader columns above give the room). */ .reg-row .c-out, .reg-row .c-in { white-space: nowrap; } /* Truncation sweep (operator 2026-07-14): the ROW is `white-space: nowrap`, but * only four cells carried `overflow: hidden` — so a long value in any OTHER cell * ran out of its track and painted over the next column. * * Clip the TEXT cells only. The numeric/date/marker cells are deliberately left * alone: the register grid is a horizontally SCROLLABLE table (.reg-grid has * overflow-x:auto and fixed rem tracks), and clipping those would trade an honest * "scroll to see the rest" for a silently truncated figure — strictly worse than * the bleed. Money must never be cut off mid-digit. */ .reg-row .c-acct, .reg-row .c-payee, .reg-row .c-cat, .reg-row .c-subcat, .reg-row .c-memo { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Let the single-row register broaden to the full width on tablet LANDSCAPE * (the default content column is capped at 720px; the grid wants the room) * (item 11). `.reg-grid` is desktop-grid-only (`wideGrid = surface === * 'desktop'` in register.js) — it never renders on tablet, so this selector * never matched on tablet at all, leaving Spending's `.content` capped at * 720px and CENTRED while Home's own uncap (`.reflect-cardstack`, below) is * ALSO landscape-only — so the two routes must share the SAME orientation * gate to stay consistent (mission 20/08/2026 item 6's stable-chrome proof * measured a mismatch on BOTH orientations before this was orientation- * matched: landscape had Spending capped while Home was uncapped; portrait * then had Spending uncapped while Home stayed capped, an equally wrong * mismatch introduced by an earlier unconditional version of this rule). * `.txn-list` is the container renderList() actually builds on touch * (register.js), so this now matches for real, on the correct orientation. */ @media (min-width: 768px) and (orientation: landscape) { body[data-surface="tablet"] .content:has(.reg-grid), body[data-surface="tablet"] .content:has(.txn-list) { max-width: none; } /* Pricer (mission 20/08/2026 item 6, third surfaced pre-existing bug): the * default content column is capped-and-centred at 720px, which is fine for * its own calculator cards but left the fixed version/eye/gear cluster * narrower and left-shifted relative to Home once chrome moved into normal * document flow inside `.content` — measured on iPad landscape. Uncapping * matches Home's own landscape-only treatment; Pricer's own card widths * are unaffected (they carry their own sizing, not `.content`'s max-width). */ body[data-surface="tablet"] .content:has(.pricer-products) { max-width: none; } } /* SELECTION BOX HIT AREA (operator 29/07/2026: "the tap zone when clicking the * square box to select transaction needs to be bigger"). * * The measured target was the checkbox itself — roughly 13x13px inside a 1.2rem * track on a density-sized row. That is a precision mouse target and an impossible touch * one. * * It is grown WITHOUT touching the grid: the track stays 1.2rem, so none of the * three `.reg-row` grid templates move (they must stay in lockstep or every * column shifts — the v1.85.1 flag-column lesson). Instead the checkbox gets an * ::before overlay that spills symmetrically past the cell on both axes and * catches the pointer for it. `position: relative` on the cell would clip the * overlay to the track, so the ANCHOR is the row and the overlay is positioned * off the input's own box. * * Full row height + ~34px wide is as large as it can be before it starts * stealing clicks from the flag column beside it; the flag glyph is its own * control (it opens the flag picker), so the two must not overlap. */ .reg-row .c-sel { display: flex; align-items: center; justify-content: center; position: relative; /* containing block for the hit overlay below */ /* The cell itself must not clip the overlay that deliberately spills past it. */ overflow: visible; } .reg-row .c-sel input { margin: 0; cursor: pointer; } /* The header owns a real label/checkbox target. Its surrounding desktop hit * zone remains visual-only so elementFromPoint at the checkbox centre resolves * the checkbox itself rather than the forwarding wrapper. Row checkboxes keep * the enlarged forwarding overlay below. */ .reg-head .c-sel::before { pointer-events: none; } .reg-head .c-sel input { width: 18px; height: 18px; } /* The overlay is generated on the CELL, not on the checkbox. * * MEASURED: `input[type=checkbox]::before` generates nothing — a checkbox is a * REPLACED element, and replaced elements have no generated content in any * engine in the operator's fleet. The first cut of this fix put ::before on the * input and the enlarged zone silently did not exist: elementFromPoint one * pixel off the 13px box already missed. The cell is a plain , so its * ::before is real. */ /* `:not(.reg-addrow)` is load-bearing (04/08/2026). The ADD/EDIT row has no * select checkbox at all — its `.c-sel` cell holds the COLLAPSE chevron * (`.ir-plus`) — and this overlay, generated on the cell, painted straight over * that 13px button. Measured on win11-desktop: `elementFromPoint` at the * chevron's own centre returned `SPAN.c-sel`, so the click never reached the * button and the add row would not fold up. The zone belongs to the checkbox; * it has no business in a row that has none. The chevron gets its own, * equally generous zone below. */ .reg-row:not(.reg-addrow) .c-sel::before { content: ''; position: absolute; /* Symmetric bleed. `top/bottom` reach past the row's padding so the whole * row height is live; the left bleed is deliberately larger than the right so * the zone grows into the row's own gutter, never into the flag column. */ top: -8px; bottom: -8px; left: -11px; right: -7px; border-radius: 4px; cursor: pointer; } /* The zone is deliberately INVISIBLE (operator 30/07/2026: "the select button — * there is absolutely no need to provide a fill for the hover-over tapzone. it * can be invisible"). It used to paint an accent tint on hover so its size was * discoverable; in a dense register that tint fires on every row the pointer * crosses, which reads as flicker rather than affordance. The hit area is * unchanged — only the paint is gone, so the target stays as large as it was * and the checkbox itself remains the visible control. */ /* Touch surfaces get the full 44px both ways — there is no cursor to aim with, * and the phone/tablet list has row heights that can carry it. */ body[data-surface="phone"] .reg-row:not(.reg-addrow) .c-sel::before, body[data-surface="tablet"] .reg-row:not(.reg-addrow) .c-sel::before { top: 50%; bottom: auto; left: 50%; right: auto; width: 44px; height: 44px; transform: translate(-50%, -50%); } .reg-txn.selected { background: color-mix(in srgb, var(--accent) 12%, var(--card)); } @media (hover: hover) { .reg-txn.selected:hover { background: color-mix(in srgb, var(--accent) 16%, var(--card)); } } .reg-selbar { display: flex; gap: 8px; align-items: center; margin-left: auto; } .reg-selcount { padding: .35rem .8rem; font-size: var(--fs-body); } .reg-head { border-top: 0; font-size: var(--fs-micro); text-transform: none; letter-spacing: .06em; color: var(--ink); font-weight: 700; min-height: 24px; position: sticky; top: 0; background: var(--card); z-index: 1; } body[data-surface="desktop"] .reg-grid .reg-head { position: sticky; top: 0; z-index: 4; background: var(--card); isolation: isolate; } .reg-txn { cursor: pointer; } .reg-txn:focus-visible { background: color-mix(in srgb, var(--accent) 6%, var(--card)); outline: none; } @media (hover: hover) { .reg-txn:hover { background: color-mix(in srgb, var(--accent) 6%, var(--card)); outline: none; } } .reg-txn.unapproved { background: color-mix(in srgb, var(--accent) 4%, var(--card)); font-style: italic; } /* FLAG COLUMN (operator 29/07/2026: "each flag by each transaction is also not * adhering to the requested pennant symbol", and the glyph was "far, far too * small"). * * It used to be a 7px COLOUR STRIPE — a bar of --flag with no glyph at all, so * an unflagged row showed nothing and a flagged one showed a stripe, never the * flag symbol the reference register shows on every row. The track is now * 1.35rem and carries a real outlined swallow-tail flag: faint when the row is * unflagged, filled with the row's own colour when it is. */ .reg-row .c-flag { display: flex; align-items: center; justify-content: center; align-self: center; overflow: visible; } /* The flag cell's picker trigger (v1.86.0 made the glyph clickable). It was * shipped with NO rules of its own, so it painted with the USER-AGENT button * style: a grey `buttonface` fill, a 2px outset border and ~1-6px of padding. * That is exactly the operator's report (29/07/2026) — "a grey fill square over * it", and the pennant "so small", because the UA padding+border ate the track * and squeezed the glyph inside it. The button is a hit target only; the glyph * is the entire visual, so strip the chrome and let it fill the cell. */ .reg-row .c-flag .reg-flag-btn { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: visible; cursor: pointer; } .reg-row .c-flag .reg-flag-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; } .reg-row-flag { width: 1.05rem; height: 1.05rem; flex: none; overflow: visible; color: var(--ink-muted); opacity: .3; } /* Flagged: the glyph IS the colour — filled, so it reads at a glance down a * long register the way the old stripe did, but as a flag. */ .reg-row .c-flag .reg-row-flag.on { color: var(--flag, var(--ink-muted)); fill: var(--flag, none); opacity: 1; } .reg-info, .reg-info-head { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: var(--accent); padding: 0; } .reg-info :is(.ico, .reg-info-ico), .reg-info-head :is(.ico, .reg-info-ico) { width: 100%; height: 100%; } .reg-info { margin-inline-end: .2rem; cursor: pointer; } .reg-info:hover, .reg-info:focus-visible { background: var(--accent); color: var(--accent-ink); } .reg-info-head { margin-inline-end: .2rem; pointer-events: none; } .reg-row .c-info { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: visible; } .reg-row .c-info .reg-info { margin: 0; } /* Desktop approval review owns a filled information control. Ordinary * register rows keep the outlined circled “i” above; this scope includes the * scheduled-rule disclosure row as well. */ body[data-surface="desktop"] .reg-info.approval-info, body[data-surface="desktop"] .reg-info.sched-approval-info { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } body[data-surface="desktop"] .reg-info.approval-info:hover, body[data-surface="desktop"] .reg-info.sched-approval-info:hover { background: color-mix(in srgb, var(--accent) 84%, var(--card)); border-color: color-mix(in srgb, var(--accent) 84%, var(--card)); color: var(--accent-ink); } body[data-surface="desktop"] .reg-info.approval-info:focus-visible, body[data-surface="desktop"] .reg-info.sched-approval-info:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, var(--card)); outline-offset: 2px; } @media (hover: hover) { .reg-row:hover .reg-row-flag { opacity: .55; } .reg-row:hover .reg-row-flag.on { opacity: 1; } } .reg-row .c-acct, .reg-row .c-payee, .reg-row .c-cat, .reg-row .c-memo { overflow: hidden; text-overflow: ellipsis; } /* THE TEXT RAIL (operator 04/08/2026). Left-aligned text cells were painting at * inkLeft 0 — flush against their grid track — so "Main" in the Account column * looked jammed into the column boundary, and clicking the field shifted the * same text 6px right because the inline editor's input has its own padding. * One token now feeds both, and the header cells take it too or the column * labels would no longer sit over their own values. * * LEFT-ALIGNED CELLS ONLY. `.c-out`/`.c-in` are right-aligned money: their ink * sits at the RIGHT edge, so they take the rail on that side instead. Money is * never clipped or nudged mid-digit (the rule directly above this one). */ .reg-row :is(.c-acct, .c-date, .c-payee, .c-cat, .c-memo) { padding-inline-start: var(--reg-cell-rail, 6px); } .reg-row :is(.c-out, .c-in) { padding-inline-end: var(--reg-cell-rail, 6px); } /* THE EDIT ROW KEEPS THE CELL'S RAIL and its CONTROLS add nothing on top. The * ink must land in the same place whether a field is being read or edited, so * exactly ONE box in the stack may carry the inset — and making it the CELL * means the same rule serves both states. * * Getting this the other way round is what produced the shift: with the cell AND * the input both padded, the Account text jumped 12px on edit; cancelling only * the select left 6px. The control audit's "Main account shifted Npx in edit" * assertion measures the editor's text against the cell, and it is the SUM that * has to match, not each box in isolation. */ /* (The editor controls' own inset is set where they are sized, below — search * `.reg-editrow .inp`. Nothing to override here.) */ /* The payee cell carries inline glyphs (recurring loop, transfer chevrons) beside * the name. As a plain block cell they sat on the TEXT BASELINE — `vertical-align: * middle` aligns to the baseline plus half an x-height, which is not the row's * centre, so both glyphs painted low (operator 2026-07-17: "glyphs are not lining * up ... not vertically in the vertical center of the row"). A flex line centres * them against the row box itself. min-width:0 keeps the name ellipsising, and the * name span owns the truncation now that the cell is a flex container. */ /* Scoped to .reg-txn: the header, the inline editor's and the split * placeholder all share .c-payee and must keep their block layout. */ .reg-txn .c-payee { display: flex; align-items: center; min-width: 0; overflow: hidden; } .reg-txn .c-payee > .reg-payee-name, .reg-txn .c-payee > .xfer-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* All transaction text is dark ink — no light-grey category/memo (operator: * "no light grey transaction text, all dark grey"). */ .reg-row .c-cat { color: var(--ink); } .reg-row .c-memo { color: var(--ink); } .reg-row .c-out, .reg-row .c-in { text-align: right; font-variant-numeric: tabular-nums; } /* Posted and split transaction amounts share one typographic face. Their * semantic colours remain separate (neutral outflow, positive inflow), while * size and weight stay identical even when only one side carries a value. */ .reg-txn :is(.c-out, .c-in) { font-size: var(--fs-body); font-weight: 700; } .reg-txn .c-in { min-width: 0; overflow: visible; text-overflow: clip; font-weight: 700; color: var(--pos); } /* Tappable clear toggle (item 11): uncleared shows a faint ring so it reads as * an actionable control; cleared is a solid green dot. */ .reg-row .c-clr { text-align: center; font-size: var(--fs-micro); cursor: pointer; justify-self: center; width: 1rem; height: 1rem; line-height: 1rem; border-radius: 50%; color: transparent; box-shadow: 0 0 0 1px var(--hairline) inset; position: relative; } .reg-row .c-clr .clear-sync-ring { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); opacity: 0; pointer-events: none; } .reg-row .c-clr[aria-busy="true"] .clear-sync-ring { opacity: 1; animation: clear-sync-spin .7s linear infinite; } .reg-row .c-clr[data-sync-queued="true"] .clear-sync-ring { opacity: 1; border-style: dashed; border-color: var(--accent); } .reg-row .c-clr.clear-repeat-pulse .clear-sync-ring { animation: clear-sync-spin .36s linear infinite, clear-sync-ack .36s ease-out; } @keyframes clear-sync-spin { to { transform: rotate(360deg); } } @keyframes clear-sync-ack { 50% { scale: 1.35; } } @media (prefers-reduced-motion: reduce) { .reg-row .c-clr[aria-busy="true"] .clear-sync-ring, .reg-row .c-clr.clear-repeat-pulse .clear-sync-ring { animation: none; } } /* The "C" column header is a FILTER TOGGLE, not a label (operator 2026-07-14: * clicking it on macOS did nothing — it was a bare with cursor:default, * which actively told the user it was dead). It now reads and behaves as a * control: pointer cursor, hover tint, and a solid accent fill when the * uncleared-only filter is on. Theme tokens only, so dark and light both hold. */ .reg-row.reg-head .c-clr { cursor: pointer; box-shadow: none; color: var(--ink-muted); width: auto; height: auto; border-radius: 999px; background: none; border: 0; font: inherit; font-size: var(--fs-micro); padding: .1rem .4rem; letter-spacing: .04em; /* The grid's own painted surface sits above its children, so a real button in * a grid track receives no clicks without its own stacking context. (A * never revealed this — there was nothing to click.) */ position: relative; z-index: 1; } @media (hover: hover) { .reg-row.reg-head .c-clr:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } } .reg-row.reg-head .c-clr.on { color: var(--accent-ink); background: var(--accent); box-shadow: none; } @media (hover: hover) { .reg-row .c-clr:hover { box-shadow: 0 0 0 1px var(--pos) inset; } } .reg-row .c-clr.on { color: var(--pos-ink); background: var(--pos); box-shadow: none; } /* Sortable column headers (operator 2026-07-20): Date / Payee / Category / * Outflow are real buttons that cycle the sort. They must read IDENTICALLY to * the inert header labels beside them (same Title Case micro type, same colour, * same box) — a header that looks like a button would clutter the row. The only * added affordance is a pointer cursor, a hover tint, and a ▲/▼ caret on the * active column. z-index:1 for the same grid-paint-eats-clicks reason as .c-clr. */ .reg-row.reg-head .reg-sorthead { background: none; border: 0; font: inherit; color: inherit; text-transform: none !important; letter-spacing: inherit; cursor: pointer; padding: 0; text-align: inherit; display: inline-flex; align-items: center; gap: .15em; position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; } .reg-row.reg-head .reg-sortcell { display: flex; align-items: center; min-width: 0; overflow: visible; } .reg-row.reg-head .reg-sortcell > .reg-sorthead { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reg-row.reg-head .c-out .reg-sorthead { width: 100%; justify-content: flex-end; } .reg-row.reg-head .reg-sorthead.c-out { justify-content: flex-end; } @media (hover: hover) { .reg-row.reg-head .reg-sorthead:hover { color: var(--accent); } } .reg-row.reg-head .reg-sorthead.sorted { color: var(--accent); } .reg-sort-caret { font-size: .8em; line-height: 1; } /* COLUMN-HEADER GLYPHS (operator 29/07/2026: "mimic this format including * table's column headers (incl. icons and glyphs)"). Each header word gets a * small leading marker. Deliberately quiet: the header row is uppercase micro * type, so a full-contrast icon beside it would out-shout the label it marks. * Sized in em so it tracks the header's own font-size through the density * settings and the column-resize widths, and `flex:none` so a narrowed column * squeezes the TEXT (which can ellipsis) rather than deforming the glyph. */ .reg-row.reg-head .reg-head-ico { width: 1.28em; height: 1.28em; flex: none; opacity: .62; margin-right: .35em; overflow: visible; } .reg-row.reg-head :is(.c-acct, .c-memo, .reg-sortcell) { display: flex; align-items: center; justify-content: flex-start; min-width: 0; } .reg-row.reg-head .reg-sortcell > .reg-sorthead { justify-content: flex-start; } .reg-row.reg-head :is(.c-acct, .c-date, .c-payee, .c-cat, .c-subcat, .c-memo) { text-align: left; } /* The active/hovered sort column brightens its glyph with its text. */ .reg-row.reg-head .reg-sorthead.sorted .reg-head-ico { opacity: .9; } @media (hover: hover) { .reg-row.reg-head .reg-sorthead:hover .reg-head-ico { opacity: .9; } } /* The flag header is a filter trigger, not another sortable column. Keep the * glyph centred in its canonical rail and expose the active count without * changing the grid track. */ .reg-row.reg-head .reg-flaghead { appearance: none; border: 0; background: none; color: inherit; overflow: visible; justify-content: center; padding: 0; cursor: pointer; position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; } .reg-row.reg-head .reg-flaghead.active { color: var(--accent); } .reg-row.reg-head .reg-flaghead:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; } .reg-flag-filter-count { position: absolute; top: 1px; right: 1px; display: inline-flex; align-items: center; justify-content: center; min-width: 1em; height: 1em; padding: 0 .18em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .68em; line-height: 1; letter-spacing: 0; } .reg-flag-filter-menu { z-index: 1005; min-width: 15rem; max-width: min(18rem, calc(100vw - 16px)); padding: .55rem; box-sizing: border-box; } .reg-flag-filter-menu .ctx-menu-title { margin: 0 0 .35rem; padding: .2rem .35rem; color: var(--ink); font-size: var(--fs-label); font-weight: 700; } .reg-flag-filter-list { display: grid; gap: 2px; } .reg-flag-filter-option { display: flex; align-items: center; gap: .55rem; min-height: var(--ctl-h-sm); padding: .2rem .35rem; border-radius: var(--radius-s); color: var(--ink); cursor: pointer; } .reg-flag-filter-option:hover, .reg-flag-filter-option:focus-within { background: color-mix(in srgb, var(--accent) 10%, var(--card)); } .reg-flag-filter-option input { margin: 0; accent-color: var(--accent); } .reg-flag-filter-swatch { width: .72rem; height: .72rem; flex: none; border-radius: 50%; background: var(--item-color); box-shadow: 0 0 0 1px var(--hairline) inset; } .reg-flag-filter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reg-flag-filter-foot { display: flex; justify-content: space-between; gap: .4rem; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--hairline); } .reg-flag-filter-foot .btn { min-height: var(--ctl-h-sm); padding: .2rem .55rem; } /* Sized to match the row glyphs beneath it, not to the header's micro type — * an icon scaled off an 11px uppercase label is the "far, far too small" * the operator reported (29/07/2026). */ .reg-row.reg-head .reg-flag-ico { width: 1.05rem; height: 1.05rem; flex: none; overflow: visible; } /* SPLIT-TRANSACTION MARKER (operator 29/07/2026), painted after the word * "Split" in the Category cell on EVERY surface. Not a control — the ▸ toggle * before the word owns expanding the parts — so it carries no pointer cursor * and no hover state. Accent-tinted so it reads as a status marker in the same * visual family as the recurring badge. */ .reg-split-ico { display: inline-flex; align-items: center; vertical-align: -.14em; margin-left: .35em; color: var(--accent); flex: none; } .reg-split-ico .ico { width: .95em; height: .95em; overflow: visible; } /* Inside the touch list's category CHIP the glyph sits on a tinted pill, so it * inherits the chip's ink rather than shouting accent against it. */ .txn-cat-inline .reg-split-ico { color: inherit; opacity: .75; margin-left: .3em; } /* Snooze/defer glyph (operator 20/08/2026): a POSTED transaction's status rail * or a scheduled occurrence's cadence badge line, immediately after the * recurring badge — same non-interactive status-marker language as * .reg-split-ico (no pointer cursor, no hover state; it is a MARKER, not a * control). Tokenised colour only — dark/light parity automatic. */ .reg-snooze-ico { display: inline-flex; align-items: center; align-self: center; vertical-align: middle; line-height: 0; margin-left: .35em; color: var(--accent) !important; flex: none; } .reg-snooze-ico .ico { display: block; width: .68em; height: .68em; overflow: visible; vertical-align: 0; } .reg-reminder-date { display: inline-flex; align-items: center; align-self: center; margin-left: .32em; padding: .04rem .38rem; border: 1px solid var(--status-lozenge-outline); border-radius: 999px; background: transparent; color: var(--status-lozenge-outline); font-size: var(--fs-micro); font-weight: 400; line-height: 1.15; white-space: nowrap; } body[data-surface="desktop"] .reg-reminder-date { padding: .046rem .437rem; font-size: calc(var(--fs-micro) * 1.15); } /* Confirm Later uses the established card/button/picker families. The state is * deliberately compact enough for the desktop drawer while its actions wrap * into full-width touch targets on phone/tablet. */ .confirm-later-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem .8rem; padding: .75rem; border: 1px solid var(--hairline); border-radius: var(--radius-s); background: var(--card); color: var(--ink); } .confirm-later-card.active { border-color: var(--accent); } .confirm-later-glyph { display: inline-flex; color: var(--accent); } .confirm-later-glyph .ico { width: 1.2rem; height: 1.2rem; } .confirm-later-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; text-align: left; } .confirm-later-actions { display: flex; align-items: stretch; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; } .confirm-later-actions .btn { min-height: var(--ctl-h-md); } .confirm-later-picker { width: min(24rem, calc(100vw - 2rem)); } .confirm-later-picker .pick-row { text-transform: none !important; } .confirm-later-current { margin: .7rem .85rem .2rem; color: var(--ink-muted); text-align: left; } .cal-cell:disabled { background: transparent; border: 0; box-shadow: none; color: var(--ink-muted); opacity: .45; cursor: default; } body[data-surface="phone"] .confirm-later-card, body[data-surface="tablet"] .confirm-later-card { grid-template-columns: auto minmax(0, 1fr); } body[data-surface="phone"] .confirm-later-actions, body[data-surface="tablet"] .confirm-later-actions { grid-column: 1 / -1; justify-content: stretch; } body[data-surface="phone"] .confirm-later-actions .btn, body[data-surface="tablet"] .confirm-later-actions .btn { flex: 1 1 9rem; min-height: var(--ctl-h-md); } /* Real schedule setting status: a compact word-glyph beside cadence/snooze. * It is status text, not a button label; all-caps AUTO is the operator's * requested glyph and the accent token preserves day/night parity. */ .sched-autoapprove-ico { display: inline-flex; align-items: center; vertical-align: -.14em; margin-left: .42em; padding: .12rem .5rem; border-radius: 999px; color: var(--accent); flex: none; font-size: calc(var(--fs-label) * .9); line-height: 1; font-weight: 400; letter-spacing: .045em; } /* Ambiguous-duplicate resolver marker (occurrence-identity/lifecycle mission * sub-mission 4/6, task 3): desktop keeps a compact status glyph for its * context-menu route; touch upgrades it to the direct action below. Reuses * --neg (the same token .sched-problem's warning triangle already uses) — * tokenised colour only, dark/light parity automatic. */ .sched-conflict-ico { display: inline-flex; align-items: center; vertical-align: -.14em; margin-left: .35em; color: var(--neg); flex: none; } .sched-conflict-ico .ico { width: .95em; height: .95em; overflow: visible; } /* Touch duplicate resolver: the warning is a real action, not a decorative * glyph that requires an unavailable right-click/long-press gesture. Keep the * paint compact while the transparent hit surface honours the 44px floor. */ .sched-conflict-action { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--ctl-h-md); width: var(--ctl-h-md); min-height: var(--ctl-h-md); padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--neg); cursor: pointer; } .sched-conflict-action .ico { width: .95em; height: .95em; overflow: visible; } @media (hover: hover) { .sched-conflict-action:hover { background: color-mix(in srgb, var(--neg) 10%, transparent); } } .sched-conflict-action:focus-visible { outline: none; background: color-mix(in srgb, var(--neg) 12%, transparent); } /* Reconcile lock (v5, item 4): grey padlock beside the flag; the whole row reads * as locked (muted) until the user unlocks it. */ .rec-lock { border: 0; background: none; cursor: pointer; padding: 0; font-size: var(--fs-label); line-height: 1; filter: grayscale(1); opacity: .6; } @media (hover: hover) { .rec-lock:hover { opacity: 1; } } .reg-row.reconciled { opacity: .82; } .reg-row.reconciled .c-flag { display: flex; align-items: center; justify-content: center; } /* The lock's paint stays compact, but its row-level status rail remains a full * touch target on phone/tablet. This keeps the dense row while preserving the * same 44px finger zone as the selection circle. */ body[data-surface="phone"] .txn-status-rail, body[data-surface="tablet"] .txn-status-rail, body[data-surface="phone"] .txn-status-rail .rec-lock, body[data-surface="tablet"] .txn-status-rail .rec-lock { width: var(--ctl-h-md); height: var(--ctl-h-md); min-width: var(--ctl-h-md); min-height: var(--ctl-h-md); display: inline-flex; align-items: center; justify-content: center; } .txn-row.reconciled { opacity: .85; } /* Inline add row (desktop/wide grid, operator 2026-07-09): type directly into * every cell — no sheet, no keypad. Compact inputs sized to their columns. */ .reg-addrow { background: color-mix(in srgb, var(--accent) 5%, var(--card)); min-height: var(--reg-row-h, 32px); height: var(--reg-row-h, 32px); box-sizing: border-box; padding-block: 0; } /* The chevron is a real COLLAPSE button now (operator 2026-07-16: clicking it * must fold the editor back up) — strip the native button chrome so it stays * the same blurple glyph in both themes. */ .reg-addrow .ir-plus { color: var(--accent); background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; min-height: 0; position: relative; /* containing block for its own hit overlay below */ } /* The chevron's OWN hit zone (04/08/2026). It is a 13px glyph on a 34px row — * the same precision-target problem the row-select checkbox had — so it keeps a * zone of the same generosity the checkbox's used to give it, now generated on * the BUTTON. A