/* ══════════════════════════════════════ Penny — styles.css Per-app icon-colour design model: signature TEAL (Personal) + INDIGO (Joint). Shell tokens (surfaces, text, steel, status, type scale, fonts) come from /shared/porter-tokens.css, linked in before this file. This :root keeps only Penny's signature accents + the local aliases that map the shared tokens onto the variable names Penny's CSS already uses. ══════════════════════════════════════ */ :root { /* ── Signature accents (glance-first redesign, Epic 5) ── The shared Joint tracker recedes to a neutral slate; each profile (person) owns a hue. Kept under the --accent / --accent-blue names so the existing scope CSS resolves unchanged: --accent = Personal (Nick ultramarine), --accent-blue = Joint slate. Scope-driven elements override these per scope via inline --scope-color from persisted data (see app.js). Replaces the teal/indigo pair. */ --accent: #4f63e6; /* Personal — Nick ultramarine */ --accent-dim: #3a4bb8; --accent-lt: rgba(79,99,230,0.12); --accent-blue: #6f7f95; /* Joint — slate */ --accent-blue-dim: #4f5a6b; --accent-blue-lt: rgba(111,127,149,0.12); --gold: #e0b15e; /* savings sweep accent */ /* Status — alias onto the shared status tokens (status is the same job everywhere). Penny's CSS references --green/--yellow/--red. */ --green: var(--success); --yellow: var(--warn); --red: var(--danger); /* Scope default colour (overridden per scope inline from persisted data). */ --scope-color: var(--accent); /* Type aliases — Penny's CSS uses --head/--body; point them at the shared Fraunces (display) / IBM Plex Sans (body) families. */ --head: var(--font-display); --body: var(--font-body); /* Shape aliases onto the shared radius scale + a stronger local border. */ --r: var(--radius); --rsm: var(--radius-sm); --border-s: #3a3f4a; --sh: 0 1px 6px rgba(0,0,0,0.4); --shmd: var(--shadow-modal); /* Header height — matches the shared header standard (64px, same as Castor/ Porter), grown by the iOS notch inset so the sticky header and the drawer/main offsets stay aligned under a translucent status bar. The whole header bar is shared chrome; only name/icon/dot differ. */ --hdr: calc(64px + env(safe-area-inset-top)); } /* Font-load visibility gate: hold the page hidden until webfonts are ready so it never paints in a fallback face then visibly swaps. Revealed by the inline script in on document.fonts.ready (with a safety timeout). */ html.fonts-loading body { visibility: hidden; } /* "Steel, not plastic": reserve the scrollbar gutter so a tall page never narrows the viewport and reflows when the scrollbar appears. */ html { scrollbar-gutter: stable; -webkit-font-smoothing: antialiased; } /* ── RESET ── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* Remove the grey tap-flash on iOS for interactive elements (mobile-first). */ a, button, select, .ibtn, .ibtn-act, .nav-btn { -webkit-tap-highlight-color: transparent; } html { overflow-x: hidden; } body { font-family: var(--body); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; font-weight: 300; overflow-x: hidden; } /* ── HEADER ── */ header { background: var(--surface); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 100; flex-shrink: 0; } /* Header inner centres on the shared --app-width spine so Penny's brand lands at the same screen-x as every app (shared header standard, DESIGN.md). The bar background stays full-bleed; the app-shell (sidebar + main) below keeps its own full-width layout. */ .header-inner { max-width: var(--app-width); margin: 0 auto; /* Bare 64px — the notch inset is added once by the parent header's padding-top, NOT here (--hdr already bakes the inset in and is used by the shell/drawer offsets, so reusing it here would double-count the inset and make Penny's bar one inset taller than every other app on notched phones). */ height: 64px; padding: 0 calc(var(--app-pad) + env(safe-area-inset-right)) 0 calc(var(--app-pad) + env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; } /* Right cluster: desktop nav tabs; on phone, the menu button. */ .header-actions { display: flex; align-items: center; gap: 8px; } .logo { display: flex; align-items: center; gap: 10px; min-width: 0; /* Sets the em basis for the wordmark + the icon (icon is 1.7em of this). */ font-size: var(--fs-lg); } /* Wordmark: shared header standard — mini-caps serif, --fs-lg, tracked, with a signature-hue dot beside the neutral title. */ .wordmark { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); letter-spacing: 3px; text-transform: uppercase; color: var(--text); display: inline-block; } .wordmark .dot { color: var(--accent); margin-left: -1px; } /* Penny's teal */ /* The recoloured icon replaces the old ◈ gem; it's where Penny's colour lives in the chrome. Sized in em relative to the wordmark (shared header standard). */ .logo-icon { width: 1.7em; height: 1.7em; display: block; flex-shrink: 0; } .back-link { /* Shared header standard (DESIGN.md): mono, --fs-2xs, 0.5px tracking — was serif .6rem/.2em, the cross-app header drift fixed 2026-06-10. */ font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color .2s; flex-shrink: 0; } /* Chrome hover is steel — neutral; the icon carries Penny's colour. */ .back-link:hover { color: var(--steel); } .header-divider { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; } /* Share flag: external screenshots hide the back-to-Porter link + divider via a data-share attr on (shared header standard). */ body[data-share] .back-link, body[data-share] .header-divider { display: none; } .version-badge { font-family: var(--body); font-size: .65rem; font-weight: 300; color: var(--text-dim); letter-spacing: .04em; } .nav { display: flex; gap: 3px; } /* Mobile-only tab strip — hidden on desktop, shown below the header on phone. */ .nav-strip { display: none; } .nav-btn { font-family: var(--head); font-size: .72rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 6px 14px; border-radius: var(--rsm); cursor: pointer; transition: all .15s; } .nav-btn:hover { color: var(--text); background: rgba(255,255,255,.06); } .nav-btn.active { background: rgba(86,194,201,.15); color: var(--accent); border-color: var(--accent-dim); } .nav-btn.scope-tab.active { background: rgba(var(--scope-r,155),var(--scope-g,111),var(--scope-b,255),.15); color: var(--scope-color, var(--accent)); border-color: var(--scope-color, var(--accent)); } .nav-btn#nav-budget.active { background: rgba(125,140,240,.15); color: var(--accent-blue); border-color: var(--accent-blue-dim); } /* Tab pulse animation */ @keyframes navpulse { 0% { box-shadow: 0 0 0 0 rgba(86,194,201,.7); } 70% { box-shadow: 0 0 0 10px rgba(86,194,201,0); } 100% { box-shadow: 0 0 0 0 rgba(86,194,201,0); } } .nav-btn.pulse { animation: navpulse 1s ease-out 2; } /* ── SHELL ── */ .shell { display: flex; flex: 1; overflow: hidden; height: calc(100vh - var(--hdr)); } /* ── SIDEBAR ── */ .sidebar { width: 228px; min-width: 228px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; } .sb-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .sb-label { font-family: var(--head); font-size: .62rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); flex: 1; } .sb-btn { font-family: var(--head); font-size: .68rem; font-weight: 300; letter-spacing: .05em; border: none; padding: 5px 9px; border-radius: var(--rsm); cursor: pointer; transition: all .15s; white-space: nowrap; } .sb-icn { font-family: var(--head); font-size: .95rem; font-weight: 300; line-height: 1; border: none; padding: 6px 9px; border-radius: var(--rsm); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; } .sb-new { background: var(--accent-dim); color: var(--text); } .sb-new:hover { background: var(--accent); } .sb-edit { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .sb-edit:hover { background: var(--border); color: var(--text); } .sb-edit.active { background: var(--accent-lt); color: var(--accent); border-color: var(--accent-dim); } .sb-list { flex: 1; overflow-y: auto; min-height: 0; } /* Year sections */ .year-sec { border-bottom: 1px solid var(--border); } .year-sec:last-child { border-bottom: none; } .year-hd { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-2); border: none; cursor: pointer; font-family: var(--head); font-size: .68rem; font-weight: 300; letter-spacing: .1em; color: var(--text-muted); transition: background .1s; } .year-hd:hover { background: var(--border); } .year-arrow { font-size: .6rem; color: var(--text-dim); transition: transform .2s; display: inline-block; } .year-arrow.open { transform: rotate(90deg); } .year-label { flex: 1; text-align: left; } .year-count { font-size: .62rem; font-weight: 300; color: var(--text-dim); background: var(--surface); padding: 1px 7px; border-radius: 10px; } .year-body { display: none; } .year-body.open { display: block; } /* Month items */ .month-item { display: flex; align-items: stretch; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; position: relative; } .month-item:hover { background: var(--surface-2); } .month-item.active { background: rgba(86,194,201,.08); } .month-item.archived-item { opacity: .5; } .mi-body { flex: 1; padding: 10px 8px 10px 13px; min-width: 0; } .mi-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .mi-name { font-family: var(--head); font-size: .78rem; font-weight: 300; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .mi-spent { font-size: .72rem; color: var(--text-muted); } .mi-row2 { display: flex; align-items: center; justify-content: flex-end; margin-top: 3px; } .mi-pct { font-family: var(--head); font-size: .72rem; font-weight: 300; } .mi-strip { width: 4px; flex-shrink: 0; border-radius: 0 var(--rsm) var(--rsm) 0; } /* Edit mode overlay */ .month-item.edit-mode { cursor: pointer; } .mi-edit-overlay { display: none; position: absolute; inset: 0; background: rgba(86,194,201,.1); align-items: center; justify-content: center; font-family: var(--head); font-size: .72rem; font-weight: 300; letter-spacing: .08em; color: var(--accent); border-left: 2px solid var(--accent); z-index: 1; pointer-events: none; } .month-item.edit-mode:hover .mi-edit-overlay { display: flex; } /* Archive */ .sb-archive { flex-shrink: 0; border-top: 1px solid var(--border); } .arch-toggle { width: 100%; display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--surface-2); border: none; cursor: pointer; font-family: var(--head); font-size: .6rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); transition: background .1s; } .arch-toggle:hover { background: var(--border); } .arch-toggle.arch-empty { cursor: default; opacity: .4; } .arch-toggle.arch-empty:hover { background: var(--surface-2); } .arch-arrow { font-size: .65rem; transition: transform .2s; margin-left: auto; } .arch-arrow.open { transform: rotate(90deg); } .arch-body { display: none; max-height: 260px; overflow-y: auto; } .arch-body.open { display: block; } /* ── MAIN ── */ .main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } /* Hidden until boot resolves which view to show — prevents the welcome screen flashing before hydrate() decides month vs. welcome (#63). */ #welcome { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; } /* Loading overlay — covers the main area until boot completes. */ #penny-loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--bg); } #penny-loading.hidden { display: none; } .pl-spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: pl-spin .7s linear infinite; } @keyframes pl-spin { to { transform: rotate(360deg); } } .pl-text { font-family: var(--head); font-size: .8rem; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; } .pl-error { display: none; flex-direction: column; align-items: center; gap: 14px; } #penny-loading.failed .pl-spinner, #penny-loading.failed .pl-text { display: none; } #penny-loading.failed .pl-error { display: flex; } .pl-error-msg { color: var(--text-muted); font-weight: 300; } .wt { font-family: var(--head); font-size: 1.8rem; font-weight: 300; letter-spacing: .08em; margin-bottom: 10px; color: var(--text); } .ws { color: var(--text-muted); max-width: 380px; margin: 0 auto 28px; line-height: 1.7; font-weight: 300; } #month-view { display: none; flex: 1; flex-direction: column; padding: 22px; gap: 16px; } /* Month top */ .month-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .month-title { font-family: var(--head); font-size: 1.4rem; font-weight: 300; letter-spacing: .06em; flex: 1; font-variant: small-caps; font-variant-caps: small-caps; color: var(--text); display: flex; align-items: center; gap: 10px; } .month-actions { display: flex; gap: 6px; align-items: center; } .locked-banner { background: rgba(86,194,201,.08); border: 1px solid var(--accent-dim); border-radius: var(--rsm); padding: 9px 14px; font-size: .82rem; color: var(--accent); display: flex; align-items: center; gap: 8px; } /* Month title scope indicator */ .tab-indicator { font-family: var(--head); font-size: .6rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; background: var(--scope-bg, rgba(86,194,201,.12)); color: var(--scope-fg, var(--accent)); } /* Two columns */ .cols { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; } /* ── PANEL ── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; } .panel-hd { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .ptitle { font-family: var(--head); font-size: .65rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); } /* ── SUMMARY CARDS ── */ .scards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .scard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh); padding: 13px 15px; transition: background .3s, border-color .3s; } .scard-full { grid-column: span 2; } .sl { font-family: var(--head); font-size: .58rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .sv { font-family: var(--head); font-size: 1.3rem; font-weight: 300; line-height: 1.1; } .ss { font-size: .7rem; color: var(--text-muted); margin-top: 3px; } .jp-breakdown { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; } .jp-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; } .jp-acct { color: var(--text-muted); } .jp-amt { color: var(--text); font-family: var(--head); font-weight: 300; } .hbar-track { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; margin-top: 6px; } .hbar-fill { height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.4,0,.2,1); } .hbar-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-top: 4px; } .hbar-spent-center { text-align: center; font-size: .72rem; font-weight: 300; margin-top: 4px; } /* ── ACCORDION ── */ .acc-sec { border-bottom: 1px solid var(--border); } .acc-sec:last-child { border-bottom: none; } .acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: none; border: none; cursor: pointer; font-family: var(--head); font-size: .63rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); transition: background .1s; } .acc-btn:hover { background: var(--surface-2); } .acc-arrow { font-size: .7rem; transition: transform .2s; color: var(--text-dim); } .acc-arrow.open { transform: rotate(90deg); } .acc-body { display: none; } .acc-body.open { display: block; } /* ── CATEGORY ROWS ── */ .cat-row { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-top: 1px solid var(--border); font-size: .84rem; } .cat-name { flex: 1; color: var(--text); font-weight: 300; } .cat-pct { font-family: var(--head); font-size: .7rem; font-weight: 300; min-width: 38px; text-align: right; } .cat-spent { font-size: .82rem; font-weight: 300; min-width: 64px; text-align: right; } .cat-bud { font-size: .7rem; color: var(--text-muted); min-width: 58px; text-align: right; } /* ── TRANSACTIONS ── */ .txn-bar { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-2); } .fsel { padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--rsm); font-family: var(--body); font-size: .78rem; font-weight: 300; background: var(--surface); color: var(--text); cursor: pointer; } .fsel:focus { outline: 2px solid var(--accent-dim); } .txn-ct { font-size: .72rem; color: var(--text-muted); flex: 1; } .tbl-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 500px; } thead th { padding: 8px 12px; text-align: left; font-family: var(--head); font-size: .6rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; background: var(--surface); } thead th:hover { color: var(--text-muted); } thead th.sorted { color: var(--accent); } .sa { opacity: .35; margin-left: 3px; } .sorted .sa { opacity: 1; } tbody tr { transition: background .08s; } tbody tr:hover { background: var(--surface-2); } tbody tr.offbud { opacity: .45; } tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: .855rem; font-weight: 300; vertical-align: middle; color: var(--text); } tbody tr:last-child td { border-bottom: none; } .td-date { color: var(--text-muted); white-space: nowrap; font-size: .78rem; } .td-pending { color: var(--text-dim); font-size: .72rem; font-style: italic; } .td-amt { font-size: .82rem; font-weight: 300; text-align: right; white-space: nowrap; } .td-acct { font-size: .78rem; color: var(--text-muted); white-space: nowrap; } .tag, .acct-chip { display: inline-block; padding: 2px 8px; border-radius: 20px; border: 1px solid transparent; font-size: .72rem; font-family: var(--head); font-weight: 400; letter-spacing: .04em; white-space: nowrap; } .s-pill { display: inline-block; padding: 1px 6px; border-radius: 20px; font-size: .63rem; font-family: var(--head); font-weight: 300; background: rgba(200,144,78,.12); color: var(--yellow); margin-left: 5px; } .row-acts { display: flex; gap: 3px; opacity: 0; transition: opacity .1s; justify-content: center; } tbody tr:hover .row-acts { opacity: 1; } .ibtn { background: none; border: none; padding: 3px 6px; cursor: pointer; border-radius: 4px; font-size: .82rem; color: var(--text-dim); transition: all .1s; line-height: 1; } .ibtn:hover { background: var(--border); color: var(--text); } .ibtn.del:hover { background: rgba(204,68,68,.15); color: var(--red); } .td-act { width: 60px; text-align: center; } /* ── EMPTY STATE ── */ .empty { padding: 40px 20px; text-align: center; color: var(--text-dim); } .empty-icon { font-size: 2rem; margin-bottom: 10px; } .empty-title { font-family: var(--head); font-size: 1rem; font-weight: 300; color: var(--text-muted); margin-bottom: 4px; letter-spacing: .04em; } .empty-sub { font-size: .82rem; } /* ── BUTTONS ── */ .btn { padding: 7px 14px; border-radius: var(--rsm); font-family: var(--head); font-size: .72rem; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--border-s); background: var(--surface-2); color: var(--text-muted); transition: all .15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .btn:hover { background: var(--border); color: var(--text); } .btn-p { background: var(--accent-dim); color: var(--text); border-color: var(--accent-dim); } .btn-p:hover { background: var(--accent); border-color: var(--accent); } .btn:disabled, .btn-p:disabled { opacity: .35; cursor: not-allowed; background: var(--surface-2); color: var(--text-dim); border-color: var(--border); } .btn-sm { padding: 5px 10px; font-size: .7rem; } .ibtn-act { padding: 7px 11px; font-size: 1rem; border-radius: var(--rsm); border: 1px solid var(--border-s); background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: all .15s; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; } .ibtn-act:hover { background: var(--border); color: var(--text); } .ibtn-act-p { background: var(--accent-dim); color: var(--text); border-color: var(--accent-dim); } .ibtn-act-p:hover { background: var(--accent); border-color: var(--accent); } .btn-danger { background: rgba(204,68,68,.12); color: var(--red); border-color: var(--red); } .btn-danger:hover { background: var(--red); color: #fff; } /* ── MODAL ── */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .18s; } .overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--r); box-shadow: var(--shmd); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; transform: translateY(10px); transition: transform .18s; } .overlay.open .modal { transform: translateY(0); } .modal-hd { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-family: var(--head); font-size: 1rem; font-weight: 300; letter-spacing: .06em; color: var(--text); } .modal-x { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-dim); padding: 2px 6px; border-radius: 4px; line-height: 1; } .modal-x:hover { background: var(--surface-2); color: var(--text); } .modal-body { padding: 18px 22px; } .modal-ft { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } /* ── FORM ── */ .fg { margin-bottom: 14px; } .fg label { display: block; font-family: var(--head); font-size: .68rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; } .fg input, .fg select { width: 100%; padding: 8px 11px; border: 1px solid var(--border-s); border-radius: var(--rsm); font-family: var(--body); font-size: .9rem; font-weight: 300; background: var(--surface-2); color: var(--text); transition: border-color .15s, box-shadow .15s; outline: none; } .fg input:focus, .fg select:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(86,194,201,.1); } .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cb-row { display: flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; padding: 6px 0; color: var(--text-muted); } .cb-row input { width: auto; } .note { font-size: .75rem; color: var(--text-dim); margin-top: 4px; font-style: italic; } .field-err { color: var(--red) !important; font-style: normal !important; font-weight: 300; font-size: .74rem; margin-top: 4px; } input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: .6; } select option { color: var(--text); background: var(--surface-2); } /* ── AUTOCOMPLETE ── */ .acw { position: relative; } .acdd { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--rsm); box-shadow: var(--shmd); z-index: 400; max-height: 210px; overflow-y: auto; display: none; } .acit { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .08s; } .acit:last-child { border-bottom: none; } .acit:hover, .acit.hi { background: var(--surface-2); } .acn { font-weight: 300; font-size: .875rem; color: var(--text); } .acm { font-size: .72rem; color: var(--text-muted); margin-top: 1px; } /* ── TXN MODAL EXTRAS ── */ .txn-scope-row { display: flex; gap: 0; border: 1px solid var(--border-s); border-radius: var(--rsm); overflow: hidden; background: var(--surface-2); width: fit-content; margin-bottom: 8px; } .txn-scope-row button { flex: 1; padding: 7px 16px; background: none; border: none; border-right: 1px solid var(--border-s); cursor: pointer; font-family: var(--head); font-size: .72rem; font-weight: 300; letter-spacing: .06em; color: var(--text-muted); transition: all .15s; white-space: nowrap; } .txn-scope-row button:last-child { border-right: none; } .txn-scope-row button:hover { background: var(--border); color: var(--text); } .txn-scope-row button.sel { background: rgba(var(--scope-r,155),var(--scope-g,111),var(--scope-b,255),.15); color: var(--scope-color, var(--accent)); } .txn-preview { display: none; font-size: .78rem; font-weight: 300; color: var(--text-muted); padding: 6px 10px; background: var(--surface-2); border-left: 3px solid var(--accent-dim); border-radius: 0 var(--rsm) var(--rsm) 0; margin-top: 4px; } .txn-preview.show { display: block; } .txn-preview.err { background: rgba(204,68,68,.08); border-left-color: var(--red); color: var(--red); } /* ── BUDGET VIEW ── */ #budget-view { display: none; padding: 24px; overflow-y: auto; background: var(--bg); } #budget-view.show { display: block; } .stitle { font-family: var(--head); font-size: 1.4rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; color: var(--text); } .ssub { color: var(--text-muted); font-size: .85rem; margin-bottom: 22px; font-weight: 300; } /* Budget plan 3-col layout */ .bud-plan-row1 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: stretch; } .bud-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; } .bud-card-section { padding: 16px 18px; display: flex; flex-direction: column; } .bud-card-section-spaced { padding-top: 18px; } .bud-card-divider { height: 1px; background: var(--border); margin: 0 18px; } .bud-section-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .bud-section-note { margin-top: 10px; font-size: .72rem; color: var(--text-dim); font-style: italic; } .bud-reset-btn { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px 6px; border-radius: 3px; display: flex; align-items: center; transition: opacity .15s, color .15s, background .15s; } .bud-reset-btn:hover { background: var(--surface-2); color: var(--accent); } .bud-reset-btn.hidden { visibility: hidden; pointer-events: none; } /* Income list */ #inc-list { display: flex; flex-direction: column; } .inc-row { display: grid; grid-template-columns: 90px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: .875rem; } .inc-row.inc-row-empty { display: block; text-align: center; color: var(--text-dim); } .inc-row:last-child { border-bottom: none; } .inc-owner { font-family: var(--head); font-size: .6rem; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; text-align: center; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inc-name { font-weight: 300; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .inc-amt { font-variant-numeric: tabular-nums; color: var(--text-muted); } .bud-section-ft { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .bud-ft-row { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 8px; color: var(--text-muted); } .bud-ft-row span:last-child { font-weight: 300; font-variant-numeric: tabular-nums; color: var(--text); } .bud-split-row { display: flex; gap: 8px; } .bud-split-pill { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: var(--rsm); font-size: .78rem; } .bud-split-pill span:last-child { font-variant-numeric: tabular-nums; font-weight: 300; } .bud-split-lbl { font-family: var(--head); font-size: .63rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; } /* Contribution slider */ .bud-slider-wrap { padding: 6px 0 4px; } .bud-slider-labels { display: flex; justify-content: space-between; margin-bottom: 10px; } .bud-slider-end { display: flex; flex-direction: column; align-items: flex-start; } .bud-slider-end span { font-family: var(--head); font-size: .63rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .bud-slider-end strong { font-family: var(--body); font-size: 1.1rem; font-weight: 300; font-variant-numeric: tabular-nums; } .bud-slider-track { position: relative; height: 24px; display: flex; align-items: center; } .bud-slider-fill { position: absolute; left: 0; top: 9px; height: 6px; width: 50%; background: linear-gradient(to right, var(--accent), var(--accent-blue)); border-radius: 3px; pointer-events: none; } .bud-slider-marker { position: absolute; top: 3px; width: 2px; height: 18px; background: var(--text-muted); border-radius: 1px; transform: translateX(-1px); pointer-events: auto; cursor: help; z-index: 1; } .bud-slider-marker::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--text-muted); } .bud-slider-track input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; cursor: pointer; z-index: 2; } .bud-slider-track input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; } .bud-slider-track input[type=range]::-moz-range-track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; } .bud-slider-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 2px solid var(--surface); margin-top: -7px; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .bud-slider-track input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 2px solid var(--surface); cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .bud-slider-track input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; } .bud-slider-hint { font-size: .7rem; color: var(--text-dim); margin-top: 8px; text-align: center; font-style: italic; } .bud-slider-hint.overridden { color: var(--accent); font-style: normal; } /* Unified labeled inputs */ .bud-input-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .bud-input-row:last-child { margin-bottom: 0; } .bud-input-lbl { font-family: var(--head); font-size: .68rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); min-width: 80px; } .bud-input-prefix { font-family: var(--body); font-size: .85rem; color: var(--text-dim); font-weight: 300; margin-right: -6px; } .bud-input-row input[type=number] { flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid var(--border-s); border-radius: var(--rsm); font-family: var(--body); font-size: .9rem; font-weight: 300; background: var(--surface-2); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; font-variant-numeric: tabular-nums; text-align: right; } .bud-input-row input[type=number]:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(86,194,201,.1); } /* Plan summary */ .bud-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; background: var(--surface-2); border-radius: var(--rsm); margin-bottom: 12px; } .bud-sum-total-lbl { font-family: var(--head); font-size: .68rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .bud-sum-total-val { font-family: var(--body); font-size: 1.1rem; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--text); } .bud-sum-block { padding: 10px 12px; border-radius: var(--rsm); margin-bottom: 8px; background: var(--surface-2); border-left: 3px solid var(--border); } .bud-sum-block:last-child { margin-bottom: 0; } .bud-sum-block-hd { font-family: var(--head); font-size: .68rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; } .bud-sum-row { display: flex; justify-content: space-between; font-size: .85rem; padding: 2px 0; font-weight: 300; } .bud-sum-row span:first-child { color: var(--text-muted); } .bud-sum-row span:last-child { font-variant-numeric: tabular-nums; } .bud-sum-leftover { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border); } .bud-sum-leftover.pos span:last-child { color: var(--green); } .bud-sum-leftover.neg span:last-child { color: var(--red); } /* Settings grid */ .sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .sg-full { grid-column: 1 / -1; } .sg-savings { display: flex; align-items: center; gap: 14px; padding: 14px 18px; } .sg-savings label { font-family: var(--head); font-size: .68rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; margin: 0; } .sg-savings input { flex: 1; max-width: 220px; padding: 8px 11px; border: 1px solid var(--border-s); border-radius: var(--rsm); font-family: var(--body); font-size: .9rem; font-weight: 300; background: var(--surface-2); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; } .sg-savings input:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(86,194,201,.1); } .si { display: grid; grid-template-columns: auto 1fr 90px 80px auto auto; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: .875rem; } .si:last-child { border-bottom: none; } .si-empty { display: block !important; text-align: center; color: var(--text-dim); } .si-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .si-n { font-weight: 300; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .si-d { font-size: .78rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; } .si-locked { font-size: .68rem; color: var(--text-dim); opacity: .6; padding: 2px 5px; } .si-badge-cell { justify-self: end; display: flex; } .s-add-btn { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 1rem; line-height: 1; padding: 2px 4px; border-radius: 3px; transition: all .15s; } .s-add-btn:hover { background: var(--surface-2); color: var(--accent); } /* Swatch picker */ .swatch-row { display: flex; flex-wrap: wrap; gap: 6px; } .swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s, border-color .1s; } .swatch:hover { transform: scale(1.08); } .swatch.sel { border-color: var(--text); transform: scale(1.08); } /* Scope selector */ .scope-row { display: flex; gap: 0; border: 1px solid var(--border-s); border-radius: var(--rsm); overflow: hidden; background: var(--surface-2); width: fit-content; } .scope-opt { flex: 1; padding: 7px 14px; background: none; border: none; border-right: 1px solid var(--border-s); cursor: pointer; font-family: var(--head); font-size: .7rem; font-weight: 300; letter-spacing: .04em; color: var(--text-muted); transition: all .15s; white-space: nowrap; } .scope-opt:last-child { border-right: none; } .scope-opt:hover { background: var(--border); color: var(--text); } .scope-opt.sel { background: var(--accent-dim); color: var(--text); } /* Scope badge */ .scope-badge { font-family: var(--head); font-size: .6rem; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; } .sb-all { background: var(--surface-2); color: var(--text-dim); } .sb-scoped { background: var(--scope-bg, var(--surface-2)); color: var(--scope-fg, var(--text-muted)); } /* App Settings */ .app-settings-card { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; } .app-settings-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; } .app-settings-section { padding: 14px 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; min-width: 0; } .app-settings-section:last-child { border-right: none; } .app-settings-section-hd { font-family: var(--head); font-size: .65rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); } .app-settings-section-sub { font-size: .72rem; color: var(--text-dim); font-style: italic; margin-top: auto; } .app-settings-section-body { display: flex; flex-direction: column; gap: 8px; flex: 1; } .app-settings-section-body .data-mgmt-body { padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } /* Tracker Names */ .tracker-name-row { display: grid; grid-template-columns: auto 1fr 60px; align-items: center; gap: 8px; padding: 6px 0; } .tracker-name-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .tracker-name-row input { min-width: 0; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--rsm); font-family: var(--body); font-size: .85rem; font-weight: 300; background: var(--surface-2); color: var(--text); outline: none; transition: border-color .15s; } .tracker-name-row input:focus { border-color: var(--accent-dim); } .tracker-name-type { font-family: var(--head); font-size: .6rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); text-align: right; } /* Members */ .member-row { display: grid; grid-template-columns: auto 1fr 60px; align-items: center; gap: 8px; padding: 6px 0; } .member-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .member-row input { min-width: 0; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--rsm); font-family: var(--body); font-size: .85rem; font-weight: 300; background: var(--surface-2); color: var(--text); outline: none; transition: border-color .15s; } .member-row input:focus { border-color: var(--accent-dim); } /* Data management */ .data-mgmt-body { padding: 14px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .dm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-s); border-radius: var(--rsm); cursor: pointer; font-family: var(--head); font-size: .72rem; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; transition: all .15s; } .dm-btn:hover { background: var(--accent-lt); border-color: var(--accent-dim); color: var(--accent); } .dm-btn svg { flex-shrink: 0; } .dm-btn:disabled { opacity: .35; cursor: not-allowed; } .dm-btn:disabled:hover { background: var(--surface-2); border-color: var(--border-s); color: var(--text-muted); } /* Account payment rows */ .acct-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: .84rem; } /* Two-line account row: scannable essentials on line 1, split + pay-off on line 2. Cash accounts keep the plain single-line .acct-row above. */ .acct-row--2line { flex-direction: column; align-items: stretch; gap: 3px; } .acct-line1 { display: flex; align-items: center; gap: 8px; } .acct-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 18px; /* clear the line-1 dot, so detail sits under the name */ min-height: 22px; } .acct-payoff { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .acct-detail .acct-payoff { margin-left: auto; } /* push pay-off to the right on line 2 */ .acct-payoff-add { font-size: .7rem; padding: 2px 7px; color: var(--text-muted); border: 1px dashed var(--border-s); border-radius: var(--rsm); letter-spacing: .04em; } .acct-payoff-add:hover { color: var(--text); border-color: var(--text-dim); background: var(--surface-2); } .acct-name { flex: 1; color: var(--text); font-weight: 300; } .acct-balance { font-size: .82rem; font-weight: 300; min-width: 68px; text-align: right; color: var(--text); } .paid-toggle { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-s); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .7rem; transition: all .15s; flex-shrink: 0; background: var(--surface-2); color: transparent; } .paid-toggle.paid { background: var(--green); border-color: var(--green); color: #fff; } .paid-amt-input { width: 70px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--rsm); font-family: var(--body); font-size: .78rem; font-weight: 300; background: var(--surface-2); color: var(--text); outline: none; text-align: right; } .paid-amt-input:focus { border-color: var(--accent-dim); } .paid-diff { font-size: .7rem; font-weight: 300; } .acct-bal-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 68px; } .acct-bal-pending { font-size: .68rem; color: var(--text-dim); font-weight: 300; } .acct-bal-split { font-size: .72rem; color: var(--text-dim); font-weight: 300; white-space: nowrap; } .acct-bal-split .abs-joint { color: var(--accent-blue); } .acct-bal-split .abs-personal { color: var(--accent); } /* Personal scope summary cards */ .nx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh); padding: 13px 15px; grid-column: span 2; } .nx-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .nx-head-l { font-family: var(--head); font-size: .58rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } .nx-total { font-family: var(--head); font-size: 1.3rem; font-weight: 300; color: var(--text); line-height: 1; } .nx-sub { font-family: var(--head); font-size: .58rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } .nx-bars { display: flex; flex-direction: column; gap: 7px; } .nx-row { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 9px; } .nx-dot { width: 9px; height: 9px; border-radius: 50%; } .nx-bar-wrap { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .nx-bar-fill { height: 100%; border-radius: 4px; transition: width .4s cubic-bezier(.4,0,.2,1); } .nx-bar-label { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: .75rem; font-weight: 300; color: var(--text); white-space: nowrap; pointer-events: none; } .nx-amt { font-family: var(--head); font-size: .78rem; font-weight: 300; color: var(--text-muted); min-width: 58px; text-align: right; } .nx-pct { font-size: .7rem; color: var(--text-dim); min-width: 34px; text-align: right; } .nx-empty { text-align: center; padding: 18px 0; color: var(--text-dim); font-size: .8rem; } /* Tooltip */ #tooltip { position: fixed; background: var(--surface-2); border: 1px solid var(--border-s); color: var(--text-muted); font-family: var(--body); font-size: .7rem; font-weight: 300; padding: 4px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 600; top: 0; left: 0; transform: translate(-50%, -100%); } #tooltip.show { opacity: 1; } [data-tip], [data-tip-below] { position: relative; } /* Snackbar */ /* Toast — top-center (cross-app standing rule), explicit light text on a dark surface so it stays readable regardless of token resolution. */ #snackbar { position: fixed; top: 20px; bottom: auto; left: 50%; transform: translateX(-50%) translateY(-12px); background: #1b1e26; border: 1px solid #2b2f3a; color: #e9eaef; padding: 10px 18px; border-radius: var(--rsm); font-family: var(--body); font-size: .85rem; font-weight: 400; box-shadow: 0 8px 28px rgba(0,0,0,.45); z-index: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; display: flex; align-items: center; gap: 8px; } #snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); } #snackbar.success { color: #e9eaef; } #snackbar.success .snack-icon { color: var(--success); } #snackbar:not(.success) .snack-icon { color: var(--accent-blue); } .snack-icon { font-size: 1rem; } /* Sub-header inside accordions */ .sub-header { font-size: .7rem; font-weight: 300; color: var(--text-dim); padding: 8px 16px 2px; letter-spacing: .04em; font-family: var(--head); } /* Save inline helper */ .s-save-inline { margin-left: auto; } /* ── MOBILE RESPONSIVE ── */ @media (max-width: 768px) { /* Bound the body to the dynamic viewport so only .main scrolls internally (the header and tab strip stay put). 100dvh tracks the shrinking mobile browser chrome. */ body { height: 100dvh; overflow: hidden; } /* Layout is pure flex on phone: header + tab strip + shell stack vertically and the shell fills whatever height remains. No 100vh-minus-X math, so the drawer and main always reach the bottom regardless of safe-area insets (#4). */ .shell { position: relative; overflow: visible; height: auto; flex: 1; min-height: 0; flex-direction: column; } /* The months drawer overlays from the left, anchored top-to-bottom of the viewport below the header. Anchoring both top and bottom (no fixed height) guarantees it extends the whole way down. */ .sidebar { position: fixed; top: var(--hdr); left: 0; bottom: 0; z-index: 90; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); width: 80vw; max-width: 300px; box-shadow: var(--shmd); padding-bottom: env(safe-area-inset-bottom); } .sidebar.open { transform: translateX(0); } .drawer-overlay { display: none; position: fixed; inset: var(--hdr) 0 0 0; background: rgba(0,0,0,.5); z-index: 89; } .drawer-overlay.open { display: block; } .hamburger { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text-muted); cursor: pointer; font-size: 1rem; flex-shrink: 0; } .hamburger:hover { background: var(--surface-2); color: var(--text); } /* Fill remaining height via flex (no calc), scroll internally. min-width:0 lets children shrink to the viewport instead of overflowing right (#5). */ .main { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; } /* Pad the bottom of the scroll area past the iOS home indicator. */ #month-view { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); gap: 12px; min-width: 0; } /* Two columns stacked; allow the grid and its children to shrink (#5). */ .cols { grid-template-columns: 1fr; min-width: 0; } .cols > * { min-width: 0; } .panel { min-width: 0; } /* Table rows become cards on mobile */ .tbl-wrap { overflow-x: visible; } table, thead, tbody, tr, th, td { display: block; } thead { display: none; } tbody tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "desc amt" "cat acct" "date acts"; gap: 4px 12px; } tbody tr:hover { background: var(--surface-2); } tbody td { border: none; padding: 0; font-size: .85rem; } /* Assign grid areas */ tbody td:nth-child(1) { grid-area: date; align-self: end; } tbody td:nth-child(2) { grid-area: desc; font-weight: 300; } tbody td:nth-child(3) { grid-area: cat; } tbody td:nth-child(4) { grid-area: acct; justify-self: end; } tbody td:nth-child(5) { grid-area: amt; justify-self: end; font-size: .95rem; } tbody td:nth-child(6) { grid-area: acts; justify-self: end; } .row-acts { opacity: 1; } /* Budget 3-col → single col */ .bud-plan-row1 { grid-template-columns: 1fr; } .sgrid { grid-template-columns: 1fr; } .app-settings-grid { grid-template-columns: 1fr; } .app-settings-section { border-right: none; border-bottom: 1px solid var(--border); } .app-settings-section:last-child { border-bottom: none; } /* Modals full-width bottom sheets; pad past the iOS home indicator. */ .modal { max-width: 100%; margin: 0; border-radius: var(--r) var(--r) 0 0; align-self: flex-end; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } .overlay { align-items: flex-end; padding: 0; } /* Header (shared mobile standard): back + brand on the LEFT, menu button on the RIGHT — same silhouette as every app. The back-to-Porter link stays on the row (it used to hide here and live in the drawer). */ .header-inner { padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); gap: 8px; } .logo { gap: 8px; min-width: 0; } /* Scope/Budget tabs live in the header on desktop; on phone hide that copy and show the full-width strip below the header instead (no h-scroll). The hamburger (in .header-actions) is the single right-side control. */ header .nav { display: none; } .nav-strip { display: flex; gap: 4px; padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); background: var(--surface); border-bottom: 1px solid var(--border); z-index: 80; } .nav-strip .nav-btn { flex: 1; text-align: center; min-height: 38px; display: flex; align-items: center; justify-content: center; } .nav-btn { font-size: .68rem; padding: 8px 10px; letter-spacing: .06em; } /* Touch targets — meet the ~44px iOS minimum on phone viewports without enlarging the desktop UI. Applies only inside this breakpoint. */ .ibtn { min-width: 40px; min-height: 40px; padding: 8px; font-size: 1rem; } .ibtn-act { min-width: 42px; min-height: 42px; } .fsel { min-height: 40px; padding: 8px 12px; } .hamburger { width: 40px; height: 40px; } .row-acts { gap: 6px; } /* Scope cards stacked */ .scards { grid-template-columns: 1fr; } .scard-full { grid-column: span 1; } .nx-card { grid-column: span 1; } /* ── Read-first mobile (#7) ── Phone keeps viewing everything plus add/edit/delete transactions and lock/unlock month. Structural writes (new/archive month, edit-months, export/import) are hidden, and the Budget view is read-only. */ .write-only { display: none !important; } /* Budget view visible but not editable: neutralize its inputs/controls. */ #budget-view input, #budget-view select, #budget-view button, #budget-view .bud-slider-track { pointer-events: none; } #budget-view .s-add-btn, #budget-view .bud-reset-btn, #budget-view .inc-row .ibtn { display: none; } /* A quiet banner explaining the phone is read-first for Budget. */ #budget-view::before { content: "Budget is read-only on mobile — edit on desktop."; display: block; margin: 0 0 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text-muted); font-size: .78rem; letter-spacing: .02em; } /* ── Sizing (#6) — larger, more legible text/figures on phone ── */ body { font-size: 15px; } .td-amt { font-size: .9rem; } .tag, .acct-chip { font-size: .76rem; } .acct-name, .acct-balance, .nx-amt { font-size: .86rem; } .cat-name, .cat-spent { font-size: .86rem; } .ptitle { font-size: .82rem; } .sl { font-size: .72rem; } .sv { font-size: 1.2rem; } .mi-name, .mi-spent { font-size: .9rem; } } @media (max-width: 400px) { .nav-btn { font-size: .6rem; padding: 4px 8px; letter-spacing: .04em; } } /* ── FOOTER ── Shared footer content (version + byline, mono, top rule — DESIGN.md), but Penny is an app-shell, so the footer lives at the bottom of the SIDEBAR rail (the .sidebar is a flex column; margin-top:auto pins it under the months list / archive). On mobile the sidebar is the drawer, so it rides to the drawer bottom. App-shell footer variant — see DESIGN.md Footer + Penny CLAUDE.md. */ .app-footer { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .4px; color: var(--text-dim); opacity: .7; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); } .app-footer .sep { opacity: .5; margin: 0 7px; } /* ══════════════════════════════════════════════════════ GLANCE-FIRST REDESIGN (Epic 5) The month view, rebuilt to the design prototype. Values map 1:1 to temp/design_handoff_penny/Penny Redesign.dc.html. Surfaces use literal hexes from that spec (card #13151b, border #2b2f3a, inset #10131a, hairline #20242e, track #242833, text #e9eaef/#cfd3dd/#9aa0b0/#888ea0/#6b7180/#535867) rather than shared tokens, to stay pixel-faithful to the handoff. ══════════════════════════════════════════════════════ */ /* ── App shell: full-height rail + main, no page scroll ── */ .rd-shell { display:flex; height:100dvh; overflow:hidden; position:relative; background:#0b0d10; color:#e9eaef; font-family:var(--body); } /* ── Left rail ── */ .rd-rail { background:#13151b; border-right:1px solid #2b2f3a; display:flex; flex-direction:column; min-height:0; min-width:0; flex:0 0 224px; width:224px; overflow:hidden; transition:flex-basis .16s, width .16s; } .rd-shell.rail-collapsed .rd-rail { flex-basis:64px; width:64px; } .rd-rail-full { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; padding:16px 14px 14px; } .rd-shell.rail-collapsed .rd-rail-full { display:none; } .rd-rail-mini { display:none; flex-direction:column; align-items:center; padding:16px 0 14px; gap:15px; flex:1; min-height:0; width:100%; } .rd-shell.rail-collapsed .rd-rail-mini { display:flex; } .rd-rail-head { display:flex; align-items:center; gap:9px; padding:4px 6px 14px; } .rd-rail-brand { font-family:var(--head); font-size:1.22rem; font-weight:600; letter-spacing:0.2px; } .rd-rail-brand .dot { color:var(--accent); } .rd-icnbtn { margin-left:auto; background:none; border:none; color:#535867; cursor:pointer; padding:3px; display:flex; border-radius:6px; } .rd-icnbtn:hover { color:#cfd3dd; background:#1b1e26; } .rd-profile { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid #2b2f3a; border-radius:8px; background:#1b1e26; cursor:pointer; } .rd-avatar { width:28px; height:28px; border-radius:999px; background:#242833; border:1px solid #353b49; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:600; color:#cfd3dd; flex:none; } .rd-profile-name { font-size:0.82rem; font-weight:500; } .rd-profile-sub { font-size:0.64rem; color:#535867; } .rd-rail-label { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.8px; text-transform:uppercase; color:#535867; padding:18px 8px 8px; } .rd-rail-label.row { display:flex; justify-content:space-between; align-items:center; padding:20px 8px 8px; } .rd-track { padding:10px 11px; border-radius:8px; cursor:pointer; margin-bottom:4px; border:1px solid transparent; } .rd-track.active { background:var(--_tk-bg); border:1px solid var(--_tk-bw); } .rd-track-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; } .rd-track-dot { width:8px; height:8px; border-radius:999px; flex:none; } .rd-track-name { font-size:0.84rem; flex:1; color:#b6bcc9; } .rd-track.active .rd-track-name { color:#e9eaef; } .rd-track-metric { font-family:var(--font-mono); font-size:0.62rem; color:#888ea0; white-space:nowrap; flex:none; } .rd-track-bar { height:3px; border-radius:999px; background:#242833; overflow:hidden; } .rd-track-bar > div { height:100%; border-radius:999px; } .rd-viewas { display:flex; align-items:center; gap:8px; padding:9px 10px; margin-top:4px; border-radius:8px; cursor:pointer; } .rd-viewas:hover { background:#1b1e26; } .rd-viewas-name { font-size:0.78rem; color:#888ea0; flex:1; } .rd-months { overflow-y:auto; min-height:0; flex:1; } .rd-month { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:7px; margin-bottom:2px; cursor:pointer; } .rd-month.active { background:#1b1e26; } .rd-month-tick { width:2px; height:15px; border-radius:2px; background:transparent; flex:none; } .rd-month.active .rd-month-tick { background:var(--accent); } .rd-month-name { font-size:0.82rem; flex:1; color:#888ea0; } .rd-month.active .rd-month-name { color:#e9eaef; } .rd-month-tag { font-family:var(--font-mono); font-size:0.62rem; color:#535867; } .rd-rail-back { display:flex; align-items:center; gap:8px; font-size:0.76rem; color:#9aa0b0; text-decoration:none; padding:9px 8px; margin-top:8px; border-top:1px solid #20242e; } .rd-rail-back:hover { color:#e9eaef; } .rd-rail-foot { font-size:0.62rem; color:#535867; padding:3px 8px 0; } /* mini rail bits */ .rd-mini-avatar { width:30px; height:30px; border-radius:999px; background:#242833; border:1px solid #353b49; display:flex; align-items:center; justify-content:center; font-size:0.82rem; font-weight:600; color:#cfd3dd; } .rd-mini-div { width:26px; height:1px; background:#20242e; } .rd-mini-track { display:flex; flex-direction:column; align-items:center; gap:7px; padding:9px 0; width:46px; border-radius:9px; cursor:pointer; border:1px solid transparent; } .rd-mini-track.active { background:var(--_tk-bg); border:1px solid var(--_tk-bw); } .rd-mini-track-dot { width:10px; height:10px; border-radius:999px; } .rd-mini-gauge { position:relative; width:6px; height:34px; border-radius:999px; background:#242833; overflow:hidden; } .rd-mini-gauge > div { position:absolute; bottom:0; left:0; width:100%; } .rd-mini-back { margin-top:auto; color:#6b7180; display:flex; padding:4px; } .rd-mini-back:hover { color:#9aa6bd; } /* ── Main region + content spine ── */ .rd-region { display:flex; flex:1; min-width:0; min-height:0; } .rd-main { overflow-y:auto; min-height:0; padding:24px 30px 40px; flex:1; min-width:0; position:relative; } .rd-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; } .rd-h1 { font-family:var(--head); font-weight:600; font-size:1.95rem; margin:0; letter-spacing:0.2px; } .rd-top-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .rd-tracker-pill { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.6px; text-transform:uppercase; padding:4px 9px; border-radius:999px; color:var(--accent); background:var(--accent-lt); border:1px solid var(--accent-dim); } .rd-funded-pill { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.5px; text-transform:uppercase; padding:4px 10px; border-radius:999px; color:#5cb88a; background:rgba(92,184,138,0.1); border:1px solid rgba(92,184,138,0.3); } .rd-funded-pill:hover { background:rgba(92,184,138,0.18); } .rd-daycontext { font-size:0.82rem; color:#888ea0; margin-top:5px; } .rd-txnbtn { display:inline-flex; font-family:inherit; font-size:0.8rem; color:#cfd3dd; background:#1b1e26; border:1px solid #2b2f3a; border-radius:8px; padding:9px 15px; cursor:pointer; align-items:center; gap:9px; white-space:nowrap; } .rd-txnbtn:hover { background:#242833; } .rd-txnbtn-ct { font-family:var(--font-mono); font-size:0.66rem; color:#888ea0; } /* ── Cards (shared) ── */ .rd-card { background:#13151b; border:1px solid #2b2f3a; border-radius:12px; padding:20px 22px; min-width:0; } .rd-card-hd { display:flex; justify-content:space-between; align-items:baseline; } .rd-card-h2 { font-family:var(--head); font-weight:600; font-size:1.18rem; margin:0; } .rd-card-hint { font-size:0.72rem; color:#535867; } /* ── Verdict hero ── */ .rd-hero { background:#13151b; border:1px solid #2b2f3a; border-radius:12px; padding:26px 28px; margin-bottom:18px; } .rd-hero-row { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; } .rd-hero-left { flex:1; min-width:200px; } .rd-eyebrow { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.9px; text-transform:uppercase; color:#888ea0; margin-bottom:10px; display:flex; align-items:center; gap:8px; } .rd-eyebrow-dot { width:7px; height:7px; border-radius:999px; flex:none; } .rd-verdict { font-family:var(--head); font-weight:600; font-size:2.05rem; line-height:1.1; letter-spacing:0.2px; } .rd-proj-row { display:flex; align-items:center; gap:10px; margin-top:14px; } .rd-proj-ind { display:flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:7px; flex:none; } .rd-proj-abs { font-family:var(--font-mono); font-size:1.2rem; } .rd-proj-note { font-size:0.74rem; color:#888ea0; } .rd-hero-figs { display:flex; gap:16px 22px; flex-wrap:wrap; justify-content:flex-end; min-width:0; } .rd-fig { text-align:right; } .rd-fig-lbl { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.7px; text-transform:uppercase; color:#535867; margin-bottom:6px; } .rd-fig-val { font-family:var(--font-mono); font-size:1.5rem; } /* ── Pace bar ── */ .rd-pace { margin-top:24px; } .rd-pace-track { position:relative; height:12px; border-radius:999px; background:#242833; overflow:visible; } .rd-pace-fill { position:absolute; top:0; left:0; height:100%; border-radius:999px; } .rd-pace-today { position:absolute; top:-6px; bottom:-6px; width:2px; background:#e9eaef; border-radius:2px; } .rd-pace-lbl { position:absolute; top:-23px; transform:translateX(-50%); font-family:var(--font-mono); font-size:0.58rem; color:#cfd3dd; white-space:nowrap; } .rd-nobudget-note { margin-top:22px; display:flex; align-items:center; gap:10px; font-size:0.8rem; color:#9aa0b0; background:#10131a; border:1px solid #20242e; border-radius:9px; padding:12px 15px; } .rd-nobudget-note a { color:#cfd3dd; cursor:pointer; text-decoration:underline; text-underline-offset:2px; } /* ── Two-column body ── */ .rd-body { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:18px; align-items:start; } .rd-rstack { display:flex; flex-direction:column; gap:18px; min-width:0; } /* ── Category list ── */ .rd-cat { padding:12px 0; border-bottom:1px solid #20242e; } .rd-cat-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px; } .rd-cat-name-wrap { display:flex; align-items:center; gap:9px; min-width:0; } .rd-cat-name { font-size:0.9rem; color:#e9eaef; } .rd-cat-chip { flex:none; font-family:var(--font-mono); font-size:0.54rem; letter-spacing:0.5px; text-transform:uppercase; padding:2px 7px; border-radius:999px; } .rd-cat-amts-wrap { display:flex; align-items:baseline; gap:7px; flex:none; white-space:nowrap; } .rd-cat-amts { font-family:var(--font-mono); font-size:0.8rem; color:#9aa0b0; } .rd-cat-sub { font-family:var(--font-mono); font-size:0.66rem; color:#6b7180; } .rd-cat-bar { position:relative; height:6px; border-radius:999px; background:#242833; } .rd-cat-fill { position:absolute; left:0; top:0; height:100%; border-radius:999px; } .rd-cat-avg { position:absolute; top:-2px; bottom:-2px; width:2px; background:#cfd3dd; border-radius:2px; transform:translateX(-1px); } /* ── Funding card ── */ .rd-fund-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; } .rd-fund-name { display:flex; align-items:center; gap:9px; font-size:0.86rem; color:#e9eaef; } .rd-fund-dot { width:8px; height:8px; border-radius:999px; } .rd-fund-status { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.4px; text-transform:uppercase; color:#5cb88a; } .rd-fund-amt { font-family:var(--font-mono); font-size:0.84rem; color:#cfd3dd; } .rd-cushion { margin-top:6px; padding-top:13px; border-top:1px solid #20242e; } .rd-cushion-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .rd-cushion-lbl { display:flex; align-items:center; gap:8px; font-size:0.84rem; color:#b6bcc9; } .rd-cushion-dot { width:8px; height:8px; border-radius:999px; background:#5cb88a; } .rd-cushion-info { display:flex; cursor:help; color:#535867; } .rd-cushion-amt { font-family:var(--font-mono); font-size:0.78rem; color:#cfd3dd; } .rd-cushion-bar { height:6px; border-radius:999px; background:#242833; overflow:hidden; } .rd-cushion-bar > div { height:100%; border-radius:999px; background:#5cb88a; } .rd-cushion-note { font-size:0.7rem; color:#888ea0; margin-top:7px; } /* ── Trend ── */ .rd-trend-legend { display:flex; align-items:center; gap:16px; margin-top:9px; } .rd-trend-leg { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.62rem; } .rd-trend-swatch { display:inline-block; width:16px; height:0; } .rd-trend-chart { display:flex; align-items:flex-end; gap:10px; height:100px; position:relative; } .rd-trend-refline { position:absolute; left:0; right:0; pointer-events:none; } .rd-trend-bar-wrap { flex:1; display:flex; align-items:flex-end; height:100%; cursor:default; } .rd-trend-bar { width:100%; border-radius:4px 4px 0 0; transition:filter .12s; } .rd-trend-bar-wrap:hover .rd-trend-bar { filter:brightness(1.25); } .rd-trend-labels { display:flex; gap:10px; margin-top:9px; } .rd-trend-lbl { flex:1; text-align:center; } .rd-trend-lbl-m { font-family:var(--font-mono); font-size:0.62rem; color:#6b7180; } .rd-trend-lbl-v { font-family:var(--font-mono); font-size:0.6rem; margin-top:2px; } /* ── Accounts ── */ .rd-acct-sublbl { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.8px; text-transform:uppercase; color:#535867; margin-bottom:8px; } .rd-acct-sublbl.cards { margin:14px 0 8px; display:flex; justify-content:space-between; } .rd-acct-sublbl.cards .topay { color:#cfd3dd; } .rd-acct-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; } .rd-acct-card { padding:10px 0; border-top:1px solid #20242e; } .rd-acct-name { display:flex; align-items:center; gap:9px; font-size:0.86rem; color:#e9eaef; } .rd-acct-bal { font-family:var(--font-mono); font-size:0.86rem; color:#e9eaef; } .rd-acct-exc { display:flex; align-items:center; gap:7px; margin-top:9px; font-size:0.7rem; color:#e6b04c; background:rgba(230,176,76,0.1); border:1px solid rgba(230,176,76,0.25); border-radius:6px; padding:6px 9px; } /* ── Transactions drawer (Epic 5 phase 3) ── Constant 396px width so pinning vs floating never shifts the panel itself. Pinned: in-flow column inside .rd-region (pushes the main content). Floating: fixed slide-in from the right with a scrim. */ .rd-txn { display:flex; flex-direction:column; min-height:0; width:396px; background:#13151b; border-left:1px solid #2b2f3a; } .rd-txn.pinned { position:relative; flex:0 0 396px; height:100%; } .rd-txn.floating { position:fixed; top:0; right:0; bottom:0; max-width:90vw; box-shadow:-12px 0 40px rgba(0,0,0,0.5); z-index:501; transform:translateX(100%); transition:transform .25s ease; } .rd-txn.floating.open { transform:translateX(0); } .rd-txn-scrim { position:fixed; inset:0; background:rgba(5,6,8,0.55); z-index:500; display:none; } .rd-txn-scrim.open { display:block; } .rd-txn-hd { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #2b2f3a; flex:none; } .rd-txn-title { font-family:var(--head); font-weight:600; font-size:1.15rem; } .rd-txn-sub { font-size:0.74rem; color:#888ea0; margin-top:2px; } .rd-txn-hd-btns { display:flex; align-items:center; gap:4px; } .rd-txn-icnbtn { background:none; border:none; color:#888ea0; cursor:pointer; padding:6px; display:flex; border-radius:6px; } .rd-txn-icnbtn:hover { color:#cfd3dd; background:#1b1e26; } .rd-txn-icnbtn.active { color:var(--accent); } .rd-txn-close { background:none; border:none; color:#888ea0; font-size:1.3rem; cursor:pointer; line-height:1; padding:2px 6px; } .rd-txn-close:hover { color:#cfd3dd; } /* quick add */ .rd-qa { border-bottom:1px solid #20242e; background:#10131a; flex:none; } .rd-qa-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; cursor:pointer; } .rd-qa-hd:hover { background:#13161e; } .rd-qa-lbl { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.8px; text-transform:uppercase; color:#9aa0b0; } .rd-qa-chev { transition:transform .18s; } .rd-qa-body { padding:0 20px 16px; } .rd-qa-hint { display:flex; align-items:center; gap:6px; font-size:0.64rem; color:#6b7180; margin-bottom:12px; } .rd-qa-row { display:flex; gap:8px; margin-bottom:8px; } .rd-qa-field { flex:1; display:flex; align-items:center; gap:6px; background:#1b1e26; border:1px solid #2b2f3a; border-radius:8px; padding:0 12px; min-width:0; } .rd-qa-field:focus-within { border-color:var(--accent); } .rd-qa-field .pfx { color:#535867; font-family:var(--font-mono); font-size:1rem; } .rd-qa-field input { width:100%; min-width:0; font-family:var(--font-mono); font-size:1.05rem; color:#e9eaef; background:none; border:none; padding:11px 2px; outline:none; } .rd-qa-field .hint { font-family:var(--font-mono); font-size:0.64rem; flex:none; white-space:nowrap; } .rd-qa-desc { width:100%; font-family:inherit; font-size:0.86rem; color:#e9eaef; background:#1b1e26; border:1px solid #2b2f3a; border-radius:8px; padding:11px 12px; margin-bottom:8px; outline:none; } .rd-qa-desc:focus { border-color:var(--accent); } .rd-qa-selrow { display:flex; gap:8px; margin-bottom:11px; } .rd-qa-sel { flex:1; min-width:0; font-family:inherit; font-size:0.8rem; color:#cfd3dd; background:#1b1e26; border:1px solid #2b2f3a; border-radius:8px; padding:10px 9px; outline:none; } .rd-qa-sel:focus { border-color:var(--accent); } .rd-qa-add { width:100%; font-family:inherit; font-size:0.86rem; font-weight:500; color:#0b0d10; background:var(--accent); border:none; border-radius:8px; padding:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; } .rd-qa-add:hover { filter:brightness(1.08); } /* filters */ .rd-txn-filters { display:flex; gap:8px; padding:12px 20px; border-bottom:1px solid #20242e; flex:none; } .rd-txn-filter { font-family:inherit; font-size:0.72rem; color:#888ea0; background:#1b1e26; border:1px solid #2b2f3a; border-radius:7px; padding:6px 11px; cursor:pointer; outline:none; } .rd-txn-filter.active { color:var(--accent); border-color:var(--accent-dim); } /* list */ .rd-txn-list { overflow-y:auto; min-height:0; flex:1; padding:4px 20px 20px; } .rd-txn-empty { color:#888ea0; font-size:0.82rem; padding:24px 0; text-align:center; } .rd-tx { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid #20242e; align-items:flex-start; } .rd-tx-date { font-family:var(--font-mono); font-size:0.68rem; color:#6b7180; width:42px; flex:none; padding-top:2px; } .rd-tx-mid { flex:1; min-width:0; } .rd-tx-desc { font-size:0.86rem; color:#e9eaef; } .rd-tx-meta { display:flex; gap:8px; margin-top:5px; align-items:center; } .rd-tx-cat { font-size:0.66rem; color:#9aa0b0; background:#1b1e26; border:1px solid #2b2f3a; border-radius:999px; padding:2px 8px; display:inline-flex; align-items:center; gap:6px; } .rd-tx-cat .dot { width:7px; height:7px; border-radius:999px; flex:none; } .rd-tx-acct { font-size:0.7rem; color:#535867; } .rd-tx-amt { font-family:var(--font-mono); font-size:0.82rem; color:#e9eaef; flex:none; padding-top:1px; } .rd-tx-edit { background:none; border:none; color:#535867; cursor:pointer; padding:2px 4px; font-size:0.8rem; display:none; } .rd-tx:hover .rd-tx-edit { display:inline; } .rd-tx-edit:hover { color:#cfd3dd; } /* duplicate flag box */ .rd-tx-flag { margin-top:7px; font-size:0.68rem; border-radius:6px; padding:6px 9px; } .rd-tx-flag-row { display:flex; align-items:center; gap:6px; } .rd-tx-flag-row .txt { flex:1; } .rd-tx-flag-undo { cursor:pointer; color:#888ea0; text-decoration:underline; text-underline-offset:2px; } .rd-tx-flag-actions { display:flex; gap:7px; margin-top:8px; } .rd-tx-dup-confirm { font-family:inherit; font-size:0.68rem; color:#e9eaef; background:rgba(224,101,79,0.16); border:1px solid rgba(224,101,79,0.4); border-radius:6px; padding:5px 11px; cursor:pointer; } .rd-tx-dup-confirm:hover { filter:brightness(1.12); } .rd-tx-dup-dismiss { font-family:inherit; font-size:0.68rem; color:#9aa0b0; background:transparent; border:1px solid #2b2f3a; border-radius:6px; padding:5px 11px; cursor:pointer; } .rd-tx-dup-dismiss:hover { color:#cfd3dd; border-color:#3a4250; } .rd-tx-dismissed { display:flex; align-items:center; gap:6px; margin-top:7px; font-size:0.66rem; color:#6b7180; } /* account pill — mirrors the category pill so a row reads "what · where" at a glance */ .rd-tx-acct-pill { font-size:0.66rem; color:#9aa0b0; background:#1b1e26; border:1px solid #2b2f3a; border-radius:999px; padding:2px 8px; display:inline-flex; align-items:center; gap:6px; } .rd-tx-acct-pill .dot { width:7px; height:7px; border-radius:999px; flex:none; } /* filter clear */ .rd-txn-filter-clear { font-family:inherit; font-size:0.72rem; color:#9aa0b0; background:none; border:1px solid #2b2f3a; border-radius:7px; padding:6px 11px; cursor:pointer; margin-left:auto; } .rd-txn-filter-clear:hover { color:#cfd3dd; border-color:#3a4250; } /* inline form errors — red border on the field + helper text under it */ .rd-qa-field.err, .rd-qa-desc.err, .rd-qa-sel.err { border-color:var(--danger); } .rd-qa-err { font-size:0.68rem; color:var(--danger); margin:-4px 0 9px; } .rd-qa-field.err:focus-within, .rd-qa-desc.err:focus { border-color:var(--danger); }