/* ── Ember design system ─────────────────────────────────────────────────── Refined Wealthview successor. Geist sans + Fira Code mono, dense terminal aesthetic. Three palettes (ink default, ember, mono), three densities (compact default, roomy, print), three chromes (frameless default, standard, terminal). Toggled per-user via [data-palette]/[data-density]/[data-chrome] on . Existing template class names (.card, .data-table, .kpi-*, .pill, .form-*, .txn-*, .plan-*) get compatibility aliases at the bottom so the secondary pages render coherently without per-template rewrites. ─────────────────────────────────────────────────────────────────────── */ /* ── Tokens — defaults are the user's chosen ink palette ─────────────── */ :root { --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'Fira Code', ui-monospace, 'JetBrains Mono', Menlo, monospace; } /* Fira Code's programming ligatures (calt) are off everywhere — Ember reads composed, not clever. `font-variant-ligatures: no-contextual` kills the programming ligatures without disabling standard ligatures (fi, fl) in the sans family. See docs/EMBER-DESIGN.md → Type. */ * { font-variant-ligatures: no-contextual; } :root { --row-h: 30px; --radius: 6px; --radius-lg: 10px; /* Ink palette (default) */ --bg: #F7F8FA; --bg-2: #EEF1F5; --surface: #FFFFFF; --surface-2: #F8F9FB; --line: #E2E6EC; --line-2: #EDF0F4; --ink-1: #0B1220; --ink-2: #3E4A5E; --ink-3: #6E7A8E; --ink-4: #A6AEBC; /* Keycaps (.kbd-hint) — the printed shortcut badges on buttons, menu rows and the selection pill. They used to be --ink-4 at 0.7 opacity over a hairline --line-2 border, which reads fine on white and lands around 1.7:1 on the dark surface: enough to see that something is printed there, not enough to read WHICH key, which is the entire job. A hint you have to lean in for is a hint that doesn't work. So the chip gets a filled body and ink that clears AA in both themes — --kbd-ink rides --ink-2 (~9:1 light, ~9.6:1 dark). Only the fill and edge need per-theme values, since a dark chip lifts off its surface with white at low alpha and a light one sinks in with ink at low alpha. */ --kbd-ink: var(--ink-2); --kbd-bg: rgba(11, 18, 32, 0.05); --kbd-line: rgba(11, 18, 32, 0.16); --accent: #1E40AF; --accent-soft: #DEE5F4; --accent-ink: #1E3A8A; /* Signal — the "hot core" accent. Two-color system: --accent (sapphire) is the chrome where you ARE; --signal (plasma) is the heat of what just CHANGED. Used for focus halos, live pulse dots, NEW badges, chart leading-edge cursor. Same blue family as --accent — chrome pulls from the rim, signal from the core. Never use signal for selected/chosen state (that's chrome). See docs/EMBER-DESIGN.md. */ --signal: #0EA5E9; --signal-soft: #E0F2FE; --signal-ink: #0369A1; --signal-glow: rgba(14, 165, 233, 0.70); /* Focus rings — focused inputs RADIATE signal rather than just outline. Border-color stays chrome; the halo is signal. Polish layer redefines these identically so the base sheet stands on its own. */ --ring-focus: 0 0 0 2px var(--signal-soft), 0 0 14px -2px var(--signal-glow); --ring-focus-strong: 0 0 0 1px var(--signal), 0 0 0 3px var(--signal-soft), 0 0 18px -3px var(--signal-glow); --ring-danger: 0 0 0 2px var(--neg-soft); /* Emerald-600 retune (was emerald-700 #047857). The previous value desaturated at the small mono sizes where positive amounts most commonly appear (12.5px ledger numbers, 10.5px stat-strip percentages). Same hue family, one luminance step brighter. */ --pos: #059669; --pos-soft: #D1FAE5; --neg: #BE123C; --neg-soft: #F4DBE2; --warn: #B45309; --warn-soft: #F6EAC9; --sidebar-w: 232px; --sidebar-w-collapsed: 64px; /* Spacing scale (4px base). Several SPA inline styles pad with var(--s-N); leaving these undefined made the declarations resolve to nothing, so loading/empty/error cards rendered unpadded. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; } /* Aliases for older Wealthview variable names referenced in inline styles. */ :root { --text-primary: var(--ink-1); --text-secondary: var(--ink-3); --text-muted: var(--ink-4); --border: var(--line); --border-soft: var(--line-2); --card-bg: var(--surface); --content-bg: var(--bg); --row-hover: var(--bg-2); --accent-light: var(--accent-soft); --green: var(--pos); --green-light: var(--pos-soft); --red: var(--neg); --red-light: var(--neg-soft); --gold: var(--warn); /* --ink-line appears in a handful of SPA inline borders; without this alias the border-color resolved to nothing and the border vanished. */ --ink-line: var(--line); } /* Dark mode override — applied to . Palette stays ink; chrome stays frameless; this just shifts the surface/ink/accent variables to a cool dark scheme. ``data-theme="auto"`` is resolved client-side by base.html (reads prefers-color-scheme). */ [data-theme="dark"] { --bg: #0A0F1A; --bg-2: #111827; --surface: #0F1622; --surface-2: #131C2B; --line: rgba(255,255,255,0.07); --line-2: rgba(255,255,255,0.04); --ink-1: #E8ECF3; --ink-2: #B5BECC; --ink-3: #7C8699; --ink-4: #4A5365; /* --kbd-ink inherits var(--ink-2) from :root and re-resolves here. */ --kbd-bg: rgba(255, 255, 255, 0.09); --kbd-line: rgba(255, 255, 255, 0.20); --accent: #60A5FA; --accent-soft: rgba(96,165,250,0.16); --accent-ink: #93C5FD; --signal: #38BDF8; --signal-soft: rgba(56, 189, 248, 0.18); --signal-ink: #7DD3FC; --signal-glow: rgba(56, 189, 248, 0.90); --pos: #4ADE80; --pos-soft: rgba(74,222,128,0.16); --neg: #F87171; --neg-soft: rgba(248,113,113,0.14); --warn: #FBBF24; --warn-soft: rgba(251,191,36,0.14); } /* ── Density variants ──────────────────────────────────────────────── */ [data-density="roomy"] { --row-h: 38px; font-size: 14.5px; } [data-density="roomy"] .body { padding: 32px 40px 48px; } [data-density="roomy"] .stat { padding: 22px 26px; } [data-density="roomy"] .stat-val { font-size: 24px; } [data-density="roomy"] .stat-val.lg { font-size: 34px; } [data-density="roomy"] .stat-label { font-size: 11px; letter-spacing: 0.10em; } [data-density="roomy"] .stat-meta { font-size: 12px; } [data-density="roomy"] .panel-head { padding: 16px 20px; } [data-density="roomy"] .panel-title { font-size: 13px; } [data-density="roomy"] .panel-sub { font-size: 12px; } [data-density="roomy"] .tbl { font-size: 13.5px; } [data-density="roomy"] .tbl thead th { padding: 14px 16px; font-size: 11px; } [data-density="roomy"] .tbl tbody td { padding: 12px 16px; font-size: 13.5px; } [data-density="roomy"] .h1 { font-size: 30px; } [data-density="roomy"] .h1-sub { font-size: 13.5px; } [data-density="roomy"] .btn, [data-density="roomy"] .input, [data-density="roomy"] .select { height: 32px; font-size: 13px; } [data-density="roomy"] .top { height: 52px; font-size: 12.5px; } [data-density="roomy"] .crumb { font-size: 12.5px; } [data-density="roomy"] .side { font-size: 15.5px; } [data-density="roomy"] .side-link { font-size: 15.5px; padding: 9px 10px; } [data-density="roomy"] .side-link .badge { font-size: 12.5px; } [data-density="roomy"] .side-section { font-size: 11.5px; padding: 18px 16px 8px; } [data-density="roomy"] .side-wordmark { font-size: 18px; } [data-density="roomy"] .side-foot { padding: 14px 12px; } html.sidebar-collapsed[data-density="roomy"] .side-foot { padding: 14px 8px; } [data-density="roomy"] .side-foot-name { font-size: 14px; } [data-density="roomy"] .side-foot-sub { font-size: 12.5px; } [data-density="roomy"] .side-avatar { width: 30px; height: 30px; font-size: 12px; } [data-density="roomy"] .side-foot-btn { width: 30px; height: 30px; } [data-density="roomy"] .side-mark { width: 26px; height: 26px; } [data-density="roomy"] .acc-name { font-size: 14px; } [data-density="roomy"] .acc-sub { font-size: 12px; } [data-density="roomy"] .acc-bal { font-size: 14px; } [data-density="roomy"] .top-meta { font-size: 12.5px; gap: 16px; } [data-density="roomy"] .top-btn { height: 30px; font-size: 12.5px; } [data-density="roomy"] .chip { font-size: 11px; padding: 3px 8px; } /* Chrome is locked to "frameless" by design — no toggle. The "frameless" look (light sidebar, panel-less, type-led) was previously gated behind [data-chrome="frameless"]; those overrides now live on the bare elements below (.side, .panel, .top, etc.) so there's no extra selector cost. */ /* ── Reset + base ───────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font-sans); font-size: 13px; font-feature-settings: 'cv11', 'ss01', 'ss03'; line-height: 1.45; color: var(--ink-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ── App shell ──────────────────────────────────────────────────────── */ /* Effective sidebar width: the remembered drag width (--sidebar-w, up to 420px) is additionally capped to a third of the viewport, so a width saved on a big monitor doesn't squeeze the content column when the window is later split-screen. Both the grid and the resize handle key off this derived value; the raw --sidebar-w stays untouched, so the full remembered width comes back the moment the window widens. */ :root { --sidebar-w-eff: min(var(--sidebar-w), 33vw); } .app { display: grid; grid-template-columns: var(--sidebar-w-eff) 1fr; height: 100vh; background: var(--bg); position: relative; /* positioning context for .side-resize */ } /* ── Sidebar (frameless: transparent over page bg, light text) ──────── */ .side { background: transparent; color: var(--ink-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; font-size: 12.5px; overflow-y: auto; transition: width 0.18s ease; } /* ── Sidebar resize handle ────────────────────────────────────────────── Draggable separator pinned to the sidebar's right edge. A wide hit target centered on the .side hairline; the visible cue is a 2px accent line shown on hover / keyboard focus / active drag. Parented to .app (not .side, which is overflow-y:auto) so it spans full height and ignores nav scroll. Follows the width via left: var(--sidebar-w). */ .side-resize { position: absolute; top: 0; bottom: 0; left: var(--sidebar-w-eff); width: 9px; transform: translateX(-5px); /* center the hit area on the 1px hairline */ z-index: 5; cursor: col-resize; background: transparent; touch-action: none; /* pointer events drive the drag on touch devices */ } .side-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; /* straddles the .side right hairline */ background: transparent; transition: background var(--t-fast) var(--ease); } .side-resize:hover::after, .side-resize:focus-visible::after, html.sidebar-resizing .side-resize::after { background: var(--accent); } /* The accent line is the focus indicator — it replaces the default ring. */ .side-resize:focus-visible { outline: none; } /* The collapsed icon rail has a fixed width — no handle there. */ html.sidebar-collapsed .side-resize { display: none; } /* Active-drag globals: a consistent col-resize cursor and no text selection while the pointer ranges off the thin handle, plus freeze the .side width ease so the edge tracks the pointer 1:1 instead of chasing through the 0.18s transition. */ html.sidebar-resizing { cursor: col-resize; user-select: none; } html.sidebar-resizing .side { transition: none; } .side-brand { display: flex; align-items: center; gap: 8px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); min-width: 0; } .side-mark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #EAF6FF 0%, #7DD3FC 18%, #38BDF8 36%, #2563EB 62%, #1E1B4B 100%); position: relative; flex-shrink: 0; box-shadow: 0 0 14px rgba(56,189,248,0.45), inset 0 0 6px rgba(255,255,255,0.25); } .side-mark::before { content: ''; position: absolute; inset: 3px; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.70), transparent 55%); border-radius: 50%; } .side-wordmark { font-weight: 600; font-size: 16px; color: var(--ink-1); letter-spacing: -0.02em; } .side-wordmark sup { font-weight: 400; color: var(--ink-3); font-size: 10px; margin-left: 4px; vertical-align: super; } .side-beta { margin-left: auto; flex-shrink: 0; font-size: 9.5px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-ink); background: var(--signal-soft); border: 1px solid var(--signal); padding: 3px 6px; border-radius: 999px; } .side-section { font-size: 10.5px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); padding: 14px 16px 6px; } .side-nav { display: flex; flex-direction: column; padding: 0 8px; gap: 1px; } .side-link { display: flex; align-items: center; gap: 9px; white-space: nowrap; padding: 6px 8px; border-radius: 5px; color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 1.2; background: none; border: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; transition: background 0.12s, color 0.12s; } .side-link:hover { background: var(--bg-2); color: var(--ink-1); text-decoration: none; } .side-link.active { background: var(--accent-soft); color: var(--accent-ink); } /* Dark mode: push resting nav-link text to pure white for stronger contrast against the dark sidebar surface. Scoped to the sidebar so the rest of the app's secondary ink (--ink-2) is untouched. The active rule is re-stated here (equal specificity, later source order) so the accent color still wins for the selected link. */ [data-theme="dark"] .side-link { color: #FFFFFF; } [data-theme="dark"] .side-link.active { color: var(--accent-ink); } .side-link.active .ico { color: var(--accent); } .side-link .ico { color: var(--ink-3); flex-shrink: 0; } .side-link .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .side-link .badge { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-left: 6px; } /* Dark mode: link count badges go white too, matching the account numbers. */ [data-theme="dark"] .side-link .badge { color: #FFFFFF; } .side-link .chev { margin-left: auto; opacity: 0.5; transition: transform 0.18s; flex-shrink: 0; } .side-link .chev.open { transform: rotate(180deg); } .nav-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; } .nav-sub-item { position: relative; display: flex; align-items: center; padding: 5px 10px 5px 33px; border-radius: 5px; border: none; background: none; cursor: pointer; width: 100%; text-decoration: none; font-family: inherit; transition: background 0.12s; } .nav-sub-item:hover { background: var(--bg-2); text-decoration: none; } .nav-sub-item.active { background: var(--accent-soft); } .nav-sub-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-3); font-weight: 400; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-sub-item.active .nav-sub-name { color: var(--accent-ink); font-weight: 500; } /* Dark mode: account names go pure white, matching the top-level .side-link text, for stronger contrast against the dark sidebar. Active rows keep the accent color (re-stated for equal-specificity/later-source-order win). */ [data-theme="dark"] .nav-sub-name { color: #FFFFFF; } [data-theme="dark"] .nav-sub-item.active .nav-sub-name { color: var(--accent-ink); } /* Deleted accounts folder — archival, display-only rows. Dimmed and non-interactive (no navigation, no drag); the user restores an account from the /accounts page to bring it back. The italic + reduced opacity read as "put away" without a badge or status dot. */ .nav-sub-item-deleted { cursor: default; opacity: 0.55; } .nav-sub-item-deleted:hover { background: none; } .nav-sub-item-deleted .nav-sub-name { font-style: italic; } /* Closed accounts folder — LIVE rows: still navigable, still carrying a real balance badge and status dots, just lightly dimmed so they read as "put away" against the daily list. Full opacity on hover/active keeps them feeling interactive. Contrast with .nav-sub-item-deleted above, which is inert. */ .nav-sub-item-closed { opacity: 0.7; } .nav-sub-item-closed:hover, .nav-sub-item-closed.active { opacity: 1; } .nav-sub-dot { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; } .nav-sub-dot[hidden] { display: none; } .nav-sub-dot.unapproved { background: var(--warn); } .nav-sub-dot.unreconciled { background: var(--signal); } .nav-sub-amt { flex-shrink: 0; margin-left: 6px; /* Sans (not mono) at a slightly larger size: Fira Code at 11px read cramped/hard to scan in the narrow sidebar. Geist is far more legible small; tabular-nums keeps the digits column-aligned down the list. */ font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; } .nav-sub-amt.neg { color: var(--neg); } .nav-sub-item.active .nav-sub-amt { color: var(--accent-ink); opacity: 0.75; } .nav-sub-item.active .nav-sub-amt.neg { color: var(--neg); opacity: 1; } /* Dark mode: net-balance numbers go pure white for contrast, matching the account names. Negative balances stay red — that's a signal, not chrome — but use a brighter, more saturated red (#FF6B6B) than the global --neg (#F87171), which read too muddy against the dark sidebar. Active rows keep their accent color. */ [data-theme="dark"] .nav-sub-amt { color: #FFFFFF; } [data-theme="dark"] .nav-sub-amt.neg { color: #FF6B6B; } [data-theme="dark"] .nav-sub-item.active .nav-sub-amt { color: var(--accent-ink); } [data-theme="dark"] .nav-sub-item.active .nav-sub-amt.neg { color: #FF6B6B; } /* Non-100 ownership-percent chip. Renders only when the account contributes a partial share to net worth (ownership_percent != 100). See docs/database/account.md "Ownership percent (net-worth share)". */ .nav-sub-share { flex-shrink: 0; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--bg-2); color: var(--ink-3); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 16px; } .nav-sub-item.active .nav-sub-share { color: var(--accent-ink); opacity: 0.85; } /* Section headers (Operating / Tracking) inside the Transactions sub-menu. Heavier than .nav-sub-item, lighter than .side-section, so the hierarchy reads as: Accounts (.side-section) Operating (.nav-sub-section-label — this) Chase Checking (.nav-sub-item) See docs/database/account.md "Sidebar grouping". Rendered as a