/* MaxCounts theme: the dark world of maxcounts.com (void background, deck cards, blue and gold). */
:root {
  color-scheme: dark;
  --page: #060A13;          /* void */
  --surface: #0B1220;       /* deck */
  --surface-2: #101A2E;     /* deck-2 */
  --surface-3: #15223A;
  --ink: #E8EEFA;
  --ink-2: #B9C6DE;
  --muted: #8193B1;
  --axis-ink: #6F81A1;
  --grid: #16223A;
  --baseline: #2A3B5C;
  --border: #1C2A44;        /* line */
  --series-1: #4C8DF6;      /* blue */
  --series-2: #FBBC05;      /* gold */
  --pl-rev: #4C8DF6;        /* P&L revenue bars: blue, as on the website's dashboard preview */
  --pl-exp: #FBBC05;        /* P&L expense bars: gold, as on the website's dashboard preview */
  --pl-line: #8193B1;       /* P&L dashed profit line: muted; its dots are green (profit) or red (loss), as on the website */
  --card-bg: #0A111F;       /* what a dashboard glass card looks like over the page (rgba(16,26,46,.45) on --page) */  --accent: #4C8DF6;
  --accent-ink: #ffffff;
  --gold: #FBBC05;
  --gold-ink: #1A1300;
  --pos: #3DD68C;
  --neg: #E8EEFA;
  --good: #3DD68C;
  --warning: #FBBC05;
  --critical: #FF6B6B;
  --wash: rgba(76, 141, 246, 0.12);
  --glow: radial-gradient(120% 100% at 0% 0%, rgba(76, 141, 246, .14), transparent 60%);
  --radius: 12px;
  --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-family: var(--f-body);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); letter-spacing: -.02em; }
h1 { font-size: 26px; margin: 0; font-weight: 600; }
h2 { font-size: 15px; margin: 0 0 14px; font-weight: 600; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pos { color: var(--pos); }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
::selection { background: rgba(76, 141, 246, .35); }
/* Checkboxes are drawn by us (not the browser) so none of the text-input styling leaks onto them. */
input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; box-sizing: border-box; width: 16px; height: 16px; margin: 0; padding: 0; border: 1.5px solid var(--baseline);
  border-radius: 5px; background: transparent; display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; transition: background .12s, border-color .12s; }
input[type=checkbox]:hover { border-color: var(--muted); }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]::before { content: ""; width: 9px; height: 9px; background: #fff; transform: scale(0); clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 22%, 84% 6%, 38% 66%); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox]:indeterminate::before { transform: scale(1); height: 2px; clip-path: none; border-radius: 1px; }
input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=checkbox]:focus:not(:focus-visible) { outline: none; }
/* No scrollbars anywhere: scrollcue.js puts a bobbing chevron on each edge with more to scroll to. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
.sc-cue { position: absolute; width: 40px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: rgba(232, 238, 250, .7); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s ease, color .2s; }
.sc-cue.show { opacity: 1; pointer-events: auto; }
.sc-cue:hover { color: var(--ink); }
.sc-cue svg { animation: cue-bob 1.6s ease-in-out infinite; }
.sc-cue-up svg { rotate: 180deg; }
.sc-cue-left svg { rotate: 90deg; }
.sc-cue-right svg { rotate: -90deg; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .sc-cue svg { animation: none; } }
/* Content fades out under the chevrons. --cue-h = a sticky table header's height: it stays solid, and the top fade starts below it. */
[data-sc-fade] {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--cue-h, 0px), transparent var(--cue-h, 0px), #000 calc(var(--cue-h, 0px) + var(--cue-t, 0px)), #000 calc(100% - var(--cue-b, 0px)), transparent), linear-gradient(to right, transparent, #000 var(--cue-l, 0px), #000 calc(100% - var(--cue-r, 0px)), transparent);
  mask-image: linear-gradient(to bottom, #000 var(--cue-h, 0px), transparent var(--cue-h, 0px), #000 calc(var(--cue-h, 0px) + var(--cue-t, 0px)), #000 calc(100% - var(--cue-b, 0px)), transparent), linear-gradient(to right, transparent, #000 var(--cue-l, 0px), #000 calc(100% - var(--cue-r, 0px)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Inside a scrolling dialog: stuck to its bottom edge, taking no room. */
.sc-cue.sc-in { position: sticky; bottom: 6px; margin: -32px auto 0; z-index: 5; }
/* The page's own cues: bottom center of the window, and just under the top bar. */
.sc-cue.sc-page { position: fixed; left: 50%; translate: -50% 0; bottom: 10px; z-index: 60; }
.sc-cue.sc-page.sc-cue-up { bottom: auto; top: calc(var(--top-h) + 6px); }

/* Every page sits on the dashboard's backdrop: a fixed glow (blue top-left, faint gold bottom-right) that never
   moves or changes between pages. Only #view's content swaps (it eases in; see route() in app.js). */
/* The glow is its own fixed layer (not background-attachment: fixed, which repaints the whole page on every scroll
   frame). The scrollbar's space is always reserved, so centered pages don't shift sideways when one page scrolls and
   the next doesn't. */
body { background: transparent; }
/* Same backdrop as the dashboard preview on maxcounts.com/bookkeeping (.app-in): a blue glow from the top-left corner,
   a faint gold glow in the bottom-right, on #070C17. A fixed layer, so it stays put while pages scroll. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 50% at 10% 0%, rgba(76, 141, 246, .14), transparent 60%),
    radial-gradient(50% 40% at 100% 100%, rgba(251, 188, 5, .06), transparent 60%), #070C17; }
/* The main menu (mockup A, "blends with the page"): a bar in the page's own near-black with a faint line under it.
   The MaxCounts logo, the pages as text tabs packed on the left (current page in a soft rounded box), then a calm
   Personal / Business / Both switch (the selected choice in navy, not gold) and the Customize / Settings icons.
   It spans the whole window, inside the page gutter. */
/* Header = mockup A "floating glass capsule" + E "icon tabs" (2026-11-01): logo + MaxCounts on the left, the pages
   in one frosted capsule in the middle (each with an icon in its page color; the current page is a solid pill in
   that color with a soft glow), then a P / B / Both capsule and a capsule with the Customize / Settings icons. No
   line under the bar. Narrower windows: the other tabs drop their names (icon only, name on hover). */
/* 2026-11-01 later: the logo sits at the start of the capsule; the date + greeting take the left side on every page
   (pages have no titles of their own any more); the bar has no color of its own: it's the app's backdrop until the
   page scrolls under it, then it frosts (.topbar.scrolled, set in app.js) so content doesn't show through. */
:root { --top-h: 76px; }
.topbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--top-h); background: transparent; transition: background-color .2s; }
.topbar.scrolled { background: rgba(7, 12, 23, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.topbar-in { height: 100%; margin: 0 var(--page-pad); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; }
/* Left: the favicon on its own (no border), then the pages as plain text tabs. */
.topbar .brand { justify-self: start; display: block; line-height: 0; border-radius: 9px; }
.topbar .brand img { display: block; width: 40px; height: 40px; }
.topbar .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* No page titles: the label + title block at the top of each page is hidden, and a page head left with nothing in it
   goes too, so the page starts right under the bar. Controls that shared the title's row stay, on the right. */
/* :is(#view, .view-ghost): the still copy shown during a page swap (app.js swapTo) gets the same page styles, at the
   same (id) weight, so it matches the page pixel for pixel. */
:is(#view, .view-ghost) div:has(> .eyebrow + h1), :is(#view, .view-ghost) .tx-head { display: none; }
:is(#view, .view-ghost) .head.no-title { display: none; } /* marked by markTitleHeads() in app.js when the title was all it held */
:is(#view, .view-ghost) .head { justify-content: flex-end; margin-bottom: 18px; }
main:is(#view, .view-ghost) { padding-top: 4px; }
/* Centered pages (user): the page column sits in the middle of the window and each block in it is centered, with
   breathing room under the menu bar. Transactions, Rules and Accounts keep the left-aligned full-width layout. */
main:is(#view, .view-ghost):is([data-page="dashboard"], [data-page="reconcile"], [data-page="reports"], [data-page="budget"], [data-page="forecast"]) {
  margin-inline: auto; padding-top: 36px; }
main:is(#view, .view-ghost):is([data-page="dashboard"], [data-page="reconcile"], [data-page="reports"], [data-page="budget"], [data-page="forecast"]) > * { margin-inline: auto; }
main:is(#view, .view-ghost)[data-page="reconcile"] :is(.rec-start, .rec-warn) { margin-inline: auto; width: 100%; } /* nested one level down */
/* Text tabs (header option E). The current page = a 13% tint of its color, a thin outline in it and its color as text
   (option A's selected look). Every other tab is muted text. */
.top-tabs { justify-self: start; display: flex; align-items: center; gap: 4px; min-width: 0; }
.top-tabs a { flex: none; display: inline-flex; align-items: center; padding: 9px 13px; border-radius: 9px; color: var(--muted);
  font: 600 13px/1.2 var(--f-body); text-decoration: none; white-space: nowrap; transition: color .15s, background .15s, box-shadow .15s; }
.top-tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .04); text-decoration: none; }
.top-tabs a.active { color: var(--tab, var(--ink)); background: color-mix(in srgb, var(--tab, #fff) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab, #fff) 28%, transparent); }
.top-tabs a:focus-visible, .top-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 1500px) { .top-tabs { gap: 0; } .top-tabs a { padding: 9px 9px; } }
/* Search or jump to… (search.js): pages, accounts and transactions; Ctrl K focuses it. */
.top-search { position: relative; display: flex; align-items: center; gap: 8px; width: 260px; height: 38px; padding: 0 8px 0 12px; box-sizing: border-box;
  border-radius: 10px; background: rgba(16, 26, 46, .55); border: 1px solid rgba(255, 255, 255, .08); color: var(--faint, #5A6A88); transition: border-color .15s, width .2s; }
.top-search:focus-within { border-color: rgba(76, 141, 246, .45); width: 320px; }
.top-search > svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.topbar .top-search input { all: unset; flex: 1; min-width: 0; height: 100%; color: var(--ink); font: 500 12.5px var(--f-body); }
.top-search input::placeholder { color: var(--muted); opacity: .8; }
.top-search kbd { flex: none; font: 500 10.5px var(--f-mono); color: var(--muted); border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px; padding: 1px 5px; }
.top-search:focus-within kbd { display: none; }
.ts-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 420px; max-height: min(460px, calc(100vh - var(--top-h) - 24px)); overflow-y: auto; z-index: 80;
  padding: 6px; box-sizing: border-box; border-radius: 12px; background: #0E1729; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8); }
.ts-group { padding: 10px 10px 4px; font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ts-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.ts-item.on, .ts-item:hover { background: rgba(255, 255, 255, .06); color: var(--ink); text-decoration: none; }
.ts-item.ts-all { margin-top: 4px; color: #8FB6FA; }
.ts-item.ts-all:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0 0 8px 8px; }
.ts-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-meta { flex: none; font: 500 12px var(--f-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.ts-meta .ts-in { color: var(--good); }
.ts-num, .ts-date { font: 500 11.5px var(--f-mono); color: var(--muted); margin-right: 8px; }
.top-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.scope-sw, .top-pod { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(16, 26, 46, .55); border: 1px solid rgba(255, 255, 255, .08); }
.scope-sw button { font: 700 12px/1 var(--f-body); height: 28px; min-width: 30px; padding: 0 10px; color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
.scope-sw button[data-scope="personal"] { color: #8FB6FA; }
.scope-sw button[data-scope="business"] { color: var(--gold); }
.scope-sw button:hover { background: rgba(255, 255, 255, .06); }
.scope-sw button.on { background: rgba(255, 255, 255, .1); color: var(--ink); }
.scope-sw button[data-scope="personal"].on { background: rgba(76, 141, 246, .2); color: #8FB6FA; }
.scope-sw button[data-scope="business"].on { background: rgba(251, 188, 5, .16); color: var(--gold); }
.scope-sw button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.top-icon { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.top-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.top-icon:hover { background: rgba(255, 255, 255, .07); color: var(--ink); text-decoration: none; }
.top-icon.active { background: rgba(255, 255, 255, .07); color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .top-tabs a, .scope-sw button { transition: none; } }
/* Each tab's page color (the same colors as the page labels, "Page label colors"): its icon, and the current page's pill. */
.top-tabs [data-nav="dashboard"] { --tab: #8DB8FF; }
.top-tabs [data-nav="transactions"] { --tab: #5B9BFF; }
.top-tabs [data-nav="reconcile"] { --tab: #3DD68C; }
.top-tabs [data-nav="budget"] { --tab: #FACC15; }
.top-tabs [data-nav="rules"] { --tab: #FB923C; }
.top-tabs [data-nav="coa"] { --tab: #A78BFA; }
.top-tabs [data-nav="reports"] { --tab: #F472B6; }
.top-tabs [data-nav="forecast"] { --tab: #F87171; }
.sync-line { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--axis-ink); }
[data-sync="ok"] .sync-dot { background: var(--good); }
[data-sync="busy"] .sync-dot, [data-sync="stale"] .sync-dot { background: var(--warning); }
[data-sync="err"] .sync-dot { background: var(--critical); }

/* Everything else sits under the top bar. */
.shell { min-height: var(--vh); padding-top: var(--top-h); box-sizing: border-box; overflow-x: clip; }
/* Every page shares one column, exactly as wide as the dashboard's card grid (Accounts 340 + three 360 cards + three
   14px gaps), set against the LEFT, a fixed gutter from the sidebar (never centered). */
:root { --page-w: 1462px; --page-pad: 24px; }
/* App-wide scale (1 = 100%; the user tried .9 and went back to 100%). Under CSS zoom a "100vh" would come out scaled,
   so full-window sizes use --vh / --vw instead (they divide the zoom back out). JS that places things by mouse
   position divides by zoom() (util.js). */
:root { --zoom: 1; --vh: calc(100vh / var(--zoom)); --vw: calc(100vw / var(--zoom)); }
html { zoom: var(--zoom); }
.app-greet { flex: none; min-width: 0; }
.app-greet h1 { margin: 2px 0 0; font-size: 26px; white-space: nowrap; }

main { padding: 16px 0 64px; width: min(var(--page-w), 100% - 2 * var(--page-pad)); margin: 0 0 0 var(--page-pad); box-sizing: border-box; outline: none; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
/* Every page title sits on the same line as the sidebar logo: a title without a small label above it gets the label's
   space instead (kept from the old side rail so titles keep their spacing). */
.head > div > h1:first-child, .tx-title > h1:first-child { margin-top: 18px; }
.head h1 + .muted, .head h1 + div { margin-top: 6px; }

/* Personal / Business / All switch */
.seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.seg button { font: inherit; font-size: 13px; font-weight: 600; border: none; background: none; color: var(--muted); padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--baseline); }
.seg button:focus-visible { outline: 2px solid var(--gold); }

.grid { display: grid; gap: 20px; }
.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.tile { background: var(--glow), var(--surface); }
.tile .label { color: var(--muted); font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tile .value { font-family: var(--f-display); font-size: 28px; font-weight: 600; margin-top: 8px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.btn { font: inherit; font-weight: 700; font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .2s, background .15s; }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 26px -8px rgba(251, 188, 5, .6); }
.btn.blue { background: var(--accent); color: #fff; border-color: transparent; }
a.btn { display: inline-block; text-decoration: none; }
.btn.small { padding: 7px 14px; font-size: 12.5px; }
.btn.link { border: none; background: none; color: var(--accent); padding: 2px 4px; font-weight: 600; }
.btn.link:hover { transform: none; text-decoration: underline; }
.btn.danger { color: var(--critical); }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn.primary:disabled { background: transparent; color: var(--muted); border-color: var(--border); opacity: 1; }

input, select, textarea { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.75); }
/* Custom chevron so the arrow sits a comfortable distance from the edge. */
select:not([multiple], .cell) { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238193B1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px; background-position: right 12px center; cursor: pointer; }
select option, select optgroup { background: var(--surface-2); color: var(--ink); }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input[type=search] { min-width: 220px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--f-mono); font-weight: 500; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td select { padding: 4px 6px; max-width: 170px; }
.desc { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); margin-left: 6px; }
.table-wrap { overflow-x: auto; }

.bar-row { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 10px; padding: 5px 0; }
.bar-track { height: 10px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; }

.progress { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.status { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.status i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Budget lines on the dashboard Budgets card (budgetLine in util.js), as on the website's dashboard preview: the name
   and "$spent of $budget" in muted figures, then a 5px rounded bar filled to the share spent (budgetFill colors). */
.bline { min-width: 0; }
.bl-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bl-name { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-amt { color: var(--muted); white-space: nowrap; }
.bl-track { position: relative; margin-top: 9px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bl-track i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
/* Income on the Budgets card: pinned above the spending budgets, set apart by a hairline. */
.bud-income { flex: none; padding-bottom: 18px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
/* Budget rows get more air: 24px between rows (was 14), so the list reads calmly; it still scrolls when long. */
.even-stack.bl-stack { row-gap: 24px; padding-top: 8px; }
/* Every budget's name uses the Income row's weight (user); over-budget and above-plan amounts are colored. */
.bl-stack .bl-name, .bud-income .bl-name { font-weight: 600; }
.bl-amt .bl-over { color: var(--critical); }
.bl-amt .bl-good { color: var(--pos); }

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--axis-ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tip { position: fixed; pointer-events: none; z-index: 20; background: var(--surface-2); color: var(--ink); border: 1px solid var(--baseline); box-shadow: 0 12px 30px rgba(0,0,0,.5); border-radius: 10px; padding: 9px 12px; font-size: 12px; min-width: 130px; }
.tip b { display: block; margin-bottom: 2px; }
.tip .row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
/* Keyed tooltip rows: swatch, label, value (P&L hover). */
.tip-key { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; margin-top: 6px; min-width: 180px; font-variant-numeric: tabular-nums; }
.tip-key i { width: 10px; height: 10px; border-radius: 3px; }
.tip-key span { color: var(--ink-2); }
.tip .tip-key b { display: inline; margin: 0; text-align: right; }
.tip-sep { border: 0; border-top: 1px solid var(--baseline); margin: 8px 0 0; }

/* Card legend under a chart: an accent bar in the series color, a muted label and a value. */
.legend3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; flex: none; }
.legend3 > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; max-width: 100%; justify-self: center; }
.legend3 i { grid-row: span 2; width: 3px; align-self: stretch; border-radius: 3px; background: var(--c); }
.legend3 i.dashed { border-radius: 0; background: repeating-linear-gradient(to bottom, var(--c) 0 5px, transparent 5px 9px); } /* matches the chart's 5 4 dashes */
.legend3 span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend3 b { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend3 b small { font-size: 11px; font-weight: 600; color: var(--muted); }
.legend3 > .pl-net.up b { color: var(--pos); }
.legend3 > .pl-net.down b { color: var(--critical); }

/* Debt card, Plan view (option A): the monthly payment big and centered, the debt-free date as a gold dashed link
   under it, one APR tile per card at the bottom (the APR is typed right in the tile) and one quiet interest line. */
.debt-plan { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 13px; }
.dp-hero { text-align: center; padding-top: 4px; }
.dp-lab { font-size: 12px; color: var(--muted); }
.dp-big { font: 600 30px/1.15 var(--f-display); letter-spacing: -.02em; color: var(--ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.dp-big small { font: 600 14px var(--f-body); letter-spacing: 0; color: var(--muted); margin-left: 2px; }
.dp-when { font-size: 12px; color: var(--ink-2); }
.dp-pick { position: relative; display: inline-block; }
.dp-date-btn { font: inherit; color: var(--gold); background: none; border: 0; border-bottom: 1px dashed rgba(251, 188, 5, .5); padding: 0; cursor: pointer; }
.dp-date-btn:hover { border-bottom-style: solid; }
.dp-date-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* The real date input sits under the link so the picker opens there; it only shows if the browser can't open a picker. */
.dp-pick input { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; padding: 0; border: 0; }
.dp-pick input.shown { position: static; opacity: 1; pointer-events: auto; width: 150px; height: auto; padding: 3px 8px; border: 1px solid var(--border); }
.dp-aprs { margin-top: auto; display: grid; grid-template-columns: repeat(min(var(--n), 4), minmax(0, 1fr)); gap: 8px; }
.dp-apr { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, .02); cursor: text; transition: border-color .15s, background .15s; }
.dp-apr:hover { border-color: #2A3B5C; background: rgba(255, 255, 255, .04); }
.dp-apr:focus-within { border-color: var(--accent); }
.dp-apr-name { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-apr-val { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
/* The number and a hidden copy of it share one grid cell, so the input is exactly as wide as its text. */
.dp-apr-num { display: inline-grid; min-width: 0; }
.dp-apr-num > * { grid-area: 1 / 1; font: 600 15px var(--f-display); font-variant-numeric: tabular-nums; }
.dp-mirror { visibility: hidden; white-space: pre; padding-right: 1px; }
.dp-apr-val input { color: var(--ink); background: none; border: 0; border-radius: 0; padding: 0; margin: 0; width: 0; min-width: 100%; outline: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.dp-apr-val input::-webkit-inner-spin-button, .dp-apr-val input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dp-apr-val small { font-size: 11px; font-weight: 600; color: var(--muted); }
.dp-foot { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--muted); }
.dp-foot b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-2); }
.empty h2 { color: var(--ink); font-size: 18px; }
.connect-box { max-width: 560px; margin: 40px auto; }
.connect-box ol { padding-left: 20px; color: var(--ink-2); }
.connect-box textarea { width: 100%; min-height: 90px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.stack { display: grid; gap: 10px; }
.row-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 30; }
.toast-item { background: var(--surface-3); color: var(--ink); border: 1px solid var(--baseline); padding: 12px 18px; border-radius: 14px; font-size: 13px; font-weight: 600; box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; gap: 12px; align-items: center; max-width: 90vw; }
.toast-item.err { background: var(--critical); color: #fff; }
.toast-item button { font: inherit; font-weight: 600; background: none; border: 1px solid currentColor; color: inherit; border-radius: 6px; padding: 3px 8px; cursor: pointer; }

/* ---- dashboard ----
   All Accounts is pinned on the left (400 wide): it stays put while the page scrolls. Beside it, the cards the user
   picked (Customize) fill a 3-column grid, left to right and top to bottom, filling gaps. Every card is one fixed
   unit (360 x 310, sized against Quicken Simplifi's cards) or two: .w2 spans two columns, .h2 two rows. Add as many
   as you like; the page scrolls.
   Default:  Accounts | Net Worth     | Net Worth        | Financial Score
             Accounts | Profit & Loss | Credit Card Debt | Budgets
             Accounts | Savings Goals | Tax Projection   | Budgets */
main:has(> .dash) { padding-bottom: 32px; } /* the card area is exactly the page column's width */
/* Nothing on the dashboard is brighter than the card titles: the near-white ink (and --neg, the same color) step down
   to --ink-2 across the greeting, every card, and the chart tooltip / range menu / ratio popover while it's open. */
@media screen {
  main:has(> .dash), body:has(main > .dash) :is(#tip, #rangeMenu, #ratioPop) { --ink: #B9C6DE; --neg: #B9C6DE; }
  main:has(> .dash) .sc-cue { color: rgba(185, 198, 222, .7); }
}/* Top of the dashboard: the date + greeting on the left, Customize on the right. It scrolls away with the page. */
.dash-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 18px; }
.dash-bar .app-greet h1 { font-size: 22px; }
.dash-bar .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 12.5px; }
/* Dashboard layout (app.js): Accounts is pinned in its own column on the left (.dash-fixed; height only). Every other
   card is in the grid to its right, whose columns stretch to fill the window. Each grid card spans data-w columns ×
   data-h rows (applyDashSpans). Handles on hover: grip at the top middle = move, bottom-right corner = resize. */
main:has(> .dash) { width: calc(100% - 2 * var(--page-pad)); }
.dash { --unit-w: 360px; --unit-min: 330px; --unit-h: 310px; --dash-gap: 14px; }
.dash-body { display: flex; align-items: flex-start; gap: var(--dash-gap); }
.dash-fixed { position: relative; flex: 0 0 var(--unit-w); }
.dash-fixed > .card { height: calc(var(--rows, 3) * var(--unit-h) + (var(--rows, 3) - 1) * var(--dash-gap)); }
.dash-grid { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--unit-min), 1fr)); grid-auto-rows: var(--unit-h); grid-auto-flow: row dense; gap: var(--dash-gap); }
@media (max-width: 760px) { .dash-body { flex-direction: column; align-items: stretch; } .dash-fixed { flex-basis: auto; } }
.dash-empty { grid-column: 1 / -1; }
.dash [data-card] { position: relative; user-select: none; }
/* Lifted: pinned to the window and moved by transform only (set every frame in app.js), so page scrolling can't make it
   trail the pointer. Solid (the glass would show the cards underneath) with a deep shadow. */
body.dash-busy .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; } /* a blur over moving content costs frames */
.dash-grid > .card.dragging { position: fixed; z-index: 60; margin: 0; pointer-events: none; will-change: transform;
  background: var(--card-bg) !important;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(141, 184, 255, .22); }
.dash-grid > .card.dragging.settling { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5), 0 0 0 1px rgba(141, 184, 255, .1); }
/* The slot: where the card will land (or, while resizing, the size it will settle to). A soft blue pool. */
.dash-ph { position: relative; border-radius: var(--radius); pointer-events: none;
  background: radial-gradient(120% 90% at 30% 15%, rgba(76, 141, 246, .16), rgba(76, 141, 246, .05) 60%, rgba(76, 141, 246, .02));
  box-shadow: inset 0 0 0 1.5px rgba(141, 184, 255, .32), inset 0 0 40px rgba(76, 141, 246, .12);
  animation: ph-in .25s ease-out; }
.dash-ph.leaving { opacity: 0; transition: opacity .25s ease; }
.dash-ph.rz-ghost { position: absolute; z-index: 2; transition: width .22s cubic-bezier(.22, 1, .36, 1), height .22s cubic-bezier(.22, 1, .36, 1), opacity .25s; }
@keyframes ph-in { from { opacity: 0; } }
/* Resizing: the card's edge follows the pointer, above the outline. */
.dash [data-card].resizing { z-index: 3; align-self: start; justify-self: start; will-change: width, height; background: var(--card-bg) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(141, 184, 255, .3); }
@media (prefers-reduced-motion: reduce) { .dash-ph { animation: none; } }
/* Pointers: the system hand over the grip and while carrying a card, the system arrows while resizing. */
:root {
  --cur-move: grab;
  --cur-grab: grabbing;
  --cur-w: ew-resize;
  --cur-h: ns-resize;
  --cur-wh: nwse-resize;
}
.dash [data-card][data-zone="move"], .dash [data-card][data-zone="move"] * { cursor: var(--cur-move); }
.dash [data-card][data-zone="w"], .dash [data-card][data-zone="w"] * { cursor: var(--cur-w); }
.dash [data-card][data-zone="h"], .dash [data-card][data-zone="h"] * { cursor: var(--cur-h); }
.dash [data-card][data-zone="wh"], .dash [data-card][data-zone="wh"] * { cursor: var(--cur-wh); }
body[data-dash-zone="grabbing"], body[data-dash-zone="grabbing"] * { cursor: var(--cur-grab) !important; }
body[data-dash-zone="w"], body[data-dash-zone="w"] * { cursor: var(--cur-w) !important; }
body[data-dash-zone="h"], body[data-dash-zone="h"] * { cursor: var(--cur-h) !important; }
body[data-dash-zone="wh"], body[data-dash-zone="wh"] * { cursor: var(--cur-wh) !important; }
/* Handles, shown on hover (drawn as ::after so cards that redraw their content keep them): a dot grip at the top middle
   (move) and, in the bottom-right corner, two rounded arcs that follow the card's corner (resize). The one under the
   pointer lights up blue. Accounts is pinned, so it only has the corner. */
.dash [data-card]::after { content: ''; position: absolute; inset: 5px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .15s;
  --grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10' fill='%23E8EEFA' fill-opacity='.42'%3E%3Ccircle cx='5' cy='2.5' r='1.6'/%3E%3Ccircle cx='13' cy='2.5' r='1.6'/%3E%3Ccircle cx='21' cy='2.5' r='1.6'/%3E%3Ccircle cx='5' cy='7.5' r='1.6'/%3E%3Ccircle cx='13' cy='7.5' r='1.6'/%3E%3Ccircle cx='21' cy='7.5' r='1.6'/%3E%3C/svg%3E");
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23E8EEFA' stroke-opacity='.42' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M18 6v5a7 7 0 0 1-7 7H6'/%3E%3Cpath d='M13 8v3a2 2 0 0 1-2 2H8'/%3E%3C/svg%3E");
  background: var(--grip) center top / 26px 10px no-repeat, var(--corner) right bottom / 20px 20px no-repeat; }
.dash-fixed > [data-card]::after { background: var(--corner) right bottom / 20px 20px no-repeat; }
.dash [data-card]:hover::after, .dash [data-card].resizing::after { opacity: 1; }
.dash [data-card][data-zone="move"]::after { --grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10' fill='%238DB8FF'%3E%3Ccircle cx='5' cy='2.5' r='1.6'/%3E%3Ccircle cx='13' cy='2.5' r='1.6'/%3E%3Ccircle cx='21' cy='2.5' r='1.6'/%3E%3Ccircle cx='5' cy='7.5' r='1.6'/%3E%3Ccircle cx='13' cy='7.5' r='1.6'/%3E%3Ccircle cx='21' cy='7.5' r='1.6'/%3E%3C/svg%3E"); }
.dash [data-card]:is([data-zone="wh"], [data-zone="h"])::after, .dash [data-card].resizing::after { --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238DB8FF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M18 6v5a7 7 0 0 1-7 7H6'/%3E%3Cpath d='M13 8v3a2 2 0 0 1-2 2H8'/%3E%3C/svg%3E"); }
.dash [data-card].dragging::after { opacity: 0; }
/* Customize dialog: one row per card with a show checkbox, its size, and move up / down. */
.mc-dialog:has(.cz) { width: min(640px, calc(var(--vw) - 32px)); }
.cz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.cz-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.cz-row.off { opacity: .6; }
.cz-pick { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.cz-pick span { display: flex; flex-direction: column; min-width: 0; }
.cz-pick b { font-size: 13.5px; }
.cz-pick small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-size { font-size: 11.5px; color: var(--muted); }
.cz-move { display: flex; gap: 4px; }
.cz-move .icon-btn:disabled { opacity: .3; }
/* Dashboard type scale (option B, "one step smaller, more air") — one system for every card:
   title 15 (Sora 600, ink; matches the Accounts card) · subtitle 11.5 muted · hero 20 (Sora) · legend value 12.5/600 over an 11px label
   · row text 12.5/500, amounts 600 · meta 11.5 muted · axis 10. Weights stop at 600 (only main account groups and
   titles reach it); labels are sentence case; green/red are kept for status only. */
.dash .card { display: flex; flex-direction: column; overflow: hidden; padding: 20px 22px; }
.dash .card-head { margin-bottom: 22px; align-items: flex-start; min-height: 28px; } /* more room under the 15px titles (user) */
.dash .card-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--title-ink); line-height: 1.4; } /* 15px = the Accounts card's title (user) */
.dash { --title-ink: #D5DEEE; }
.card-empty { flex: 1; display: grid; place-items: center; font-size: 12px; color: var(--axis-ink); } /* card titles: brighter than the card content (#B9C6DE), softer than pure ink (#E8EEFA) */
.dash .card-head > div h2 { margin: 0; white-space: nowrap; }
/* The range menu sits on the title's line: same height as the 15px title (line-height 1.4), text centered in it. */
.dash .card-head .range-btn { height: calc(15px * 1.4); }
.dash .card-head .tiny { font-size: 12px; margin-top: 2px; white-space: nowrap; }
.dash .tiny { font-size: 12px; }
.dash-bar .eyebrow { font-size: 11.5px; }
.dash .card-head select { font-size: 12px; font-weight: 500; height: 28px; padding: 0 28px 0 10px; border-radius: 999px; background-position: right 10px center; }
/* Range picker on dashboard cards: muted text + chevron, no box. Its menu (#rangeMenu) lives on <body>. */
.range-btn { font: 500 12px var(--f-body); color: var(--muted); background: none; border: 0; padding: 0; height: 28px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; flex: none; }
.range-btn:hover, .range-btn[aria-expanded="true"] { color: var(--ink); }
.range-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.range-btn .chev { width: 10px; height: 10px; transition: transform .15s; }
.range-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.range-menu { position: fixed; z-index: 60; min-width: 156px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.range-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; font: 500 12.5px var(--f-body); color: var(--ink-2); background: none; border: 0; height: 30px; padding: 0 10px; border-radius: 7px; cursor: pointer; text-align: left; }
.range-menu button:hover, .range-menu button:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.range-menu button[aria-checked="true"] { color: var(--ink); }
.range-menu button svg { width: 12px; height: 12px; color: var(--gold); visibility: hidden; }
.range-menu button[aria-checked="true"] svg { visibility: visible; }
.range-menu hr { border: 0; height: 1px; background: var(--border); margin: 4px 6px; }
@media (prefers-reduced-motion: reduce) { .range-btn .chev { transition: none; } }
.dash .icon-btn { width: 28px; height: 28px; }
/* Title and hero number read as one unit; the chart gets the breathing room instead. */
.dash .card-head.tight { margin-bottom: 6px; }
.dash .card-head.tight + .hero-row + .chart { margin-top: 24px; }
/* Charts fill what's left of the card, so these margins set their height: room under the title and above the legend. */
.dash .chart { margin-top: 18px; margin-bottom: 6px; flex: 1; min-height: 0; overflow: hidden; }
#plCard .chart, #debtCard .chart, #cashCard .chart { margin-top: 4px; } /* taller charts; the gap above the legend stays */
/* P&L (option D): Net income's key is the dashed trend line; its amount is green for a profit, red for a loss. */
.dash .chart text { font-size: 10.5px; } /* smallest dashboard text, nudged up from 10px (user) */
.dash .card-scroll { flex: 1; min-height: 0; overflow: auto; margin-right: -8px; padding-right: 8px; }
.dash .trend { gap: 7px; }
.dash .trend i { width: 22px; height: 22px; border-radius: 7px; }
.dash .trend b { font-size: 12px; font-weight: 500; }
.dash .trend span { font-size: 12px; }
.dash .legend3 { margin-top: 16px; }
/* P&L, Credit Card Debt and Cash Forecast: the legend spans the chart's full width: first item flush left, last flush right. */
.dash :is(#plCard, #debtCard, #cashCard) .legend3:not(.stack) { display: flex; justify-content: space-between; gap: 12px; }
.dash :is(#plCard, #debtCard, #cashCard) .legend3:not(.stack) > div { justify-self: auto; }
/* The grid lines stop R px short of the card edge (plChart R = 6, cashChart R = 8, debtChart R = 10 in util.js); end the legend there too. */
.dash #plCard .legend3:not(.stack) { padding-right: 6px; }
.dash #cashCard .legend3:not(.stack) { padding-right: 8px; }
.dash #debtCard .legend3:not(.stack) { padding-right: 10px; }
.dash .legend3 b { font-size: 12.5px; font-weight: 600; }
.dash .legend3 span { font-size: 11.5px; }.dash .hero-row { margin-top: 0; }
.dash .hero { font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.dash .chip { font-size: 12px; padding: 3px 10px; line-height: 1.4; }
.hero-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: -4px; }
.hero-row .hero-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
/* Secondary figures (P&L totals, debt pace, tax paid/left): muted label over a 15px value. */
.stat-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.stat-val { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Change indicator: a tinted rounded tile with a trend arrow, then the amount. */
.trend { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.trend i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.trend b { font-size: 13px; font-weight: 600; }
.trend span { font-size: 12px; color: var(--muted); }
.trend.up i { background: rgba(61, 214, 140, .14); color: var(--pos); }
.trend.up b { color: var(--pos); }
.trend.down i { background: rgba(255, 107, 107, .14); color: var(--critical); }
.trend.down b { color: var(--critical); }

/* Financial Score card, two views picked by the header switch. Score: only the score (a big centered dial and its tier).
   Ratios: a scrolling list of every ratio. */
/* Tiers: Bad red, Normal orange, Good light green, Excellent green (as in the Personal Financial Ratios table). */
#healthCard { --h-bad: #F0506E; --h-mid: #F59E3C; --h-good: #A3D96B; --h-exc: var(--good); overflow: visible; position: relative; z-index: 2; }
/* The front shows only the score: a big dial centered in the card, its tier under it. */
.health-score { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.health-dial { width: 236px; flex: none; display: block; overflow: visible; }
.health-dial-val { font-family: var(--f-display); font-size: 42px; font-weight: 600; letter-spacing: -.03em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.health-status { flex: none; text-align: center; font-size: 13px; color: var(--muted); }
.health-status b { font-weight: 600; }
.health-label { display: flex; align-items: center; gap: 4px; min-width: 0; }
.health-name { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-info { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--axis-ink); cursor: help; }
.health-info:hover, .health-info:focus-visible { background: var(--surface-3); color: var(--ink); outline: none; }
/* The ⓘ popover beside the card: name, definition, formula as a fraction, your numbers = result, one-line tips. */
.ratio-pop { --h-bad: #F0506E; --h-mid: #F59E3C; --h-good: #A3D96B; --h-exc: var(--good);
  position: fixed; z-index: 80; width: 320px; box-sizing: border-box; padding: 18px 20px; border-radius: 16px; pointer-events: none;
  background: var(--surface-2); border: 1px solid #22324F; box-shadow: 0 24px 56px rgba(0, 0, 0, .55); }
.rp-name { display: block; font: 600 15px var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.rp-def { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.rp-cap { margin: 16px 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--axis-ink); }
.rp-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.rp-frac hr { width: 100%; margin: 0; border: 0; border-top: 1.5px solid #3A4E73; }
.rp-formula { display: flex; justify-content: center; padding: 12px; border-radius: 12px; background: #0B1324; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rp-nums { display: flex; align-items: center; justify-content: center; gap: 14px; }
.rp-nums .rp-frac { font: 600 14px var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.rp-eq { font: 500 20px var(--f-display); color: var(--axis-ink); }
.rp-out { display: flex; flex-direction: column; }
.rp-res { font: 600 24px var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-out small { font-size: 11px; color: var(--muted); }
.rp-missing { margin: 0; font-size: 12px; color: var(--muted); }
.rp-tips { margin-top: 16px; border-top: 1px solid #1F2E4A; }
.rp-tips .rp-cap { margin-top: 14px; }
/* Tips are always ONE line (the copy is written short; the ellipsis is only a guard). */
.rp-tip { position: relative; padding-left: 16px; font-size: 12px; line-height: 1.75; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tip::before { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* Ratios view: every ratio in one scrolling list, grouped. */
.hs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
/* One line per ratio at a comfortable size; the list scrolls inside the card, which keeps its size. On a narrow card every
   bar shrinks together, so they stay lined up. */
.health-back { flex: 1; min-height: 0; overflow-y: auto; margin: 6px -10px 0 0; padding: 4px 10px 0 0; container-type: inline-size; }
.hb-label { padding: 14px 0 6px; font-size: 12px; color: var(--muted); }
.hb-label:first-child { padding-top: 0; }
.hb-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(30px, calc(100cqw - 262px), 76px) 50px; gap: 10px; align-items: center; height: 32px; padding: 0 2px 0 10px; }
@container (max-width: 320px) { .hb-row { padding: 0; gap: 8px; } }
.hb-row .health-val { justify-content: flex-end; }
.hb-row .health-val b { font-size: 13px; }
.health-val { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.health-val b { font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.health-val b small { font-family: var(--f-body); font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }
/* Soft (38%) red → yellow → green gradient, with a full-strength white marker at the value. */
.health-bar { position: relative; height: 8px; }
.health-bar::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--grad); opacity: .38; }
.health-bar.no-data::before { opacity: .12; }
.health-bar i { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px rgba(6, 10, 19, .75); }
.health-bar.mini { height: 6px; }
/* Dashboard Budget rows: the category name on the bar's top-left, then the faded ratio-style track. A dashed line
   marks the budget, with the budget amount below it; the spend is a status-colored pill holding the spent amount,
   on its spot (on top of the dashed line when they meet). The pill is shifted left by its own position share
   (left: p%; translateX(-p%)), so it covers its spot yet never leaves the bar's ends. Rows sit close together. */
.even-stack:has(> .bud-stack) { row-gap: 10px; }
/* Name line: category at the left, "$64 left" (bold amount, muted word; soft red "$31 over") at the right — mockup B. */
.bud-stack .bud-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; line-height: 15px; }
.bud-stack .bud-head .bud-name { margin-bottom: 0; min-width: 0; }
.bud-left { flex: none; white-space: nowrap; font-size: inherit; color: var(--muted); font-variant-numeric: tabular-nums; }
.bud-left b { font-size: inherit; font-weight: 500; color: var(--ink); margin-right: 1px; } /* same size as the category name */
.bud-left.over b { color: #FF8A8A; }
.even-stack .budget-row.bud-stack { padding: 0 0 16px; }
.bud-stack .bud-name { display: block; margin-bottom: 9px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.health-bar.mini i { top: -3px; width: 3px; height: 12px; margin-left: -1.5px; }
/* A Bad ratio's marker is red and pulses (steady glow when motion is reduced). */
.health-bar i.bad { background: var(--critical); animation: health-pulse 1.8s ease-out infinite; }
@keyframes health-pulse { from { box-shadow: 0 0 0 2px rgba(6, 10, 19, .75), 0 0 0 2px rgba(255, 107, 107, .55); } to { box-shadow: 0 0 0 2px rgba(6, 10, 19, .75), 0 0 0 9px rgba(255, 107, 107, 0); } }
@media (prefers-reduced-motion: reduce) { .health-bar i.bad { animation: none; box-shadow: 0 0 0 2px rgba(6, 10, 19, .75), 0 0 0 4px rgba(255, 107, 107, .3); } }

/* Tax Projection card: sale-style price, then one plain bar per jurisdiction. Hovering a bar
   reveals its quarter ticks and a quarterly-plan popover (below the first bar, above the rest,
   so it stays inside the card). */
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tax Projection front: one bar for the tax without planning; CPA planning's cut is the green slice lifted off the
   top (scissors at the dashed cut line), the rest is the tax due. --slice/--gap/--body are set inline in px. */
.tx-cut { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); column-gap: 22px; align-content: center; }
.tx-cut > div { position: relative; height: calc(var(--slice) + var(--gap) + var(--body)); }
.tx-col i { position: absolute; left: 0; right: 0; display: block; }
.tx-slice { top: 0; height: var(--slice); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #4BE39A, #2FB877); box-shadow: 0 10px 24px rgba(61, 214, 140, .22); }
.tx-body { bottom: 0; height: var(--body); border-radius: 4px 4px 10px 10px; background: linear-gradient(180deg, #5B98F8, #3B76DC); }
.tx-col i.tx-body:only-child { border-radius: 10px; }
.tx-col i.tx-line { top: calc(var(--slice) + var(--gap) / 2); left: -12px; right: -12px; border-top: 1.5px dashed #3A4B6C; }
.tx-sc { position: absolute; left: -32px; top: calc(var(--slice) + var(--gap) / 2 - 8px); color: var(--muted); }
.tx-lab { position: absolute; left: 0; display: grid; gap: 2px; transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.tx-lab span { font-size: 12px; color: var(--muted); }
.tx-lab b { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); line-height: 1.2; }
.tx-lab b.pos { color: var(--pos); }
.tx-lab em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tx-cut-l .tx-lab { left: auto; right: 0; justify-items: end; text-align: right; top: max(calc(var(--slice) / 2), 30px); }
.tx-cut-l .tx-lab em { color: #6EE3A8; font-weight: 600; }
.tx-cut-l .tx-none { top: 50%; }
.tx-cut-r .tx-lab { top: calc(var(--slice) + var(--gap) + var(--body) / 2); }
.tl-row.sub { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 8px; }
.tl-row.sub > span:first-child { color: var(--ink); font-weight: 600; }
.tl-row.tl-note { padding-top: 0; font-size: 12px; }
.tl-row.tl-note > span { color: var(--muted) !important; font-weight: 500 !important; }
.tl-row .due { color: var(--gold); }
.tl-row.tl-note > span.late { color: #FF8A8A !important; }
.tax-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 4px; }
.tax-price { display: grid; gap: 2px; margin-top: -6px; }
.tax-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tax-now .trend { gap: 7px; white-space: nowrap; }
.tax-now .trend i { width: 24px; height: 24px; }
.tax-now .trend b { font-size: 12.5px; }
.tax-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tax-panel[hidden] { display: none; }
.tax-js { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 4px; }
.tax-tabs { align-self: center; display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); margin-top: 10px; flex: none; }
.tax-tabs button { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 4px 12px; border-radius: 7px; cursor: pointer; }
.tax-tabs button:hover { color: var(--ink-2); }
.tax-tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--ink); }
.tax-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Strategies tab: tax without planning, less each strategy, = projected tax (double rule). */
.tax-ledger { flex: 1; display: flex; flex-direction: column; justify-content: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.tax-ledger.empty { align-items: flex-start; gap: 10px; }
.tl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 6px 0; align-items: baseline; }
.tl-row > span:first-child { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-row > span:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; text-align: right; }
.tl-row.ind > span:first-child { padding-left: 14px; }
.tl-row .save { color: var(--good) !important; }
.tl-row.total { border-top: 1px solid var(--baseline); margin-top: 4px; padding-top: 9px; }
.tl-row.total > span:first-child { color: var(--ink); font-weight: 600; }
.tl-row.total > span:last-child { font-family: var(--f-display); font-size: 15px; font-weight: 700; border-bottom: 3px double var(--ink-2); padding-bottom: 2px; }
.tax-j { position: relative; display: grid; gap: 8px; border-radius: 6px; }
.tax-j:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tax-j-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.tax-j-top > span:first-child { font-weight: 600; color: var(--ink); }
.tax-j-top .num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tax-j-top .num b { font-size: 13px; font-weight: 700; color: var(--ink); }
.tax-j-bar { position: relative; }
.tax-j .progress { height: 6px; border-radius: 99px; }
.tax-j .progress > span { border-radius: 99px; }
.tax-ticks { position: absolute; inset: -4px 0; pointer-events: none; }
.tax-ticks i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.tax-ticks i:last-child { margin-left: -2px; }
.tax-pop { position: absolute; left: -10px; right: -10px; top: calc(100% + 8px); z-index: 6; display: grid; gap: 5px; padding: 9px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--baseline); box-shadow: 0 14px 34px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.tax-j + .tax-j .tax-pop { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.tax-pop-h { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.tax-pop-h b { color: var(--ink); font-weight: 600; }
.tax-pop-q { display: grid; grid-template-columns: 24px 1fr auto 64px; gap: 8px; font-size: 12px; align-items: center; }
.tax-pop-q > span:first-child { color: var(--muted); font-weight: 600; }
.tax-pop-q .st { text-align: right; font-weight: 600; color: var(--muted); }
.tax-pop-q .st.paid { color: var(--good); } .tax-pop-q .st.missed { color: var(--critical); } .tax-pop-q .st.next { color: var(--gold); }
.tax-pop-h em { font-style: normal; font-size: 11px; }
.tax-j:hover .tax-pop, .tax-j:focus-visible .tax-pop { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .tax-pop { transition: none; } }
.tax-vouchers { width: 100%; border-collapse: collapse; }
.tax-vouchers th { font-size: 11px; font-weight: 500; color: var(--muted); text-align: left; padding: 2px 6px; }
.tax-vouchers td { padding: 3px 4px; }
.tax-vouchers input { width: 100%; }
.tax-strats { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.tax-strat { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tax-strat.total { border-bottom: 0; }
.tax-strat .num { text-align: right; font-variant-numeric: tabular-nums; }
.tax-strat .pos { color: var(--pos); }
.strat-pill { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.strat-pill.done { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.tax-log { display: grid; gap: 4px; max-height: 150px; overflow: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.tax-log-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); }

/* Performance Ratio: paycheck bar, a centered legend, and hover focus */
.pr-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 34px; }
.pr-stage { position: relative; }
.pr-bar { display: flex; gap: 3px; height: 64px; }
.pr-seg { min-width: 0; border-radius: 3px; display: grid; place-items: center; overflow: hidden; transition: opacity .15s;
  font-family: var(--f-display); font-size: 13px; font-weight: 700; color: #08101F; font-variant-numeric: tabular-nums; }
.pr-seg:first-child { border-radius: 10px 3px 3px 10px; }
.pr-seg:last-child { border-radius: 3px 10px 10px 3px; }
.pr-seg:only-child { border-radius: 10px; }
.pr-empty { flex: 1; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 12px; color: var(--muted); }
.pr-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pr-lg { justify-self: center; display: grid; grid-template-columns: 3px auto; column-gap: 9px; row-gap: 1px; text-align: left;
  margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: default; transition: opacity .15s, background .15s; }
.pr-lg i { grid-row: span 3; border-radius: 3px; }
.pr-lg span { font-size: 12px; color: var(--muted); }
.pr-lg b { font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-lg em { font-style: normal; font-size: 11.5px; font-weight: 600; min-height: 1em; }
.pr-lg.on { background: rgba(255, 255, 255, .05); }
.pr-lg:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.pr-focus .pr-seg:not(.on) { opacity: .22; }
.pr-focus .pr-lg:not(.on) { opacity: .45; }
.pr-tip { position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap;
  background: #0E1729; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.pr-tip.start { transform: none; }
.pr-tip.end { transform: translateX(-100%); }
.pr-tip b { font-family: var(--f-display); font-size: 13px; font-weight: 600; }
.pr-tip div { color: var(--muted); }
.ratio-zone { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 10px; margin: 0; }
.ratio-zone legend { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.ratio-zone .field em { font-style: normal; color: var(--muted); }
.zone-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; }
.ratio-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Dashboard Budgets: rows spread evenly through the card's free space
   (one row sits in the middle). Auto margins above each row and after the last give equal gaps,
   and unlike space-evenly they shrink to the 14px minimum gap instead of hiding rows if a short card has to scroll. */
#budCard { position: relative; }
/* Vertical scroll only, scrollbar hidden: no sideways scroll. */
.even-stack { flex: 1; min-height: 0; overflow: hidden auto; scrollbar-width: none; display: flex; flex-direction: column; row-gap: 14px; margin-right: -8px; padding: 4px 8px 4px 0; }
.even-stack::-webkit-scrollbar { display: none; }
.even-stack > *, .even-stack::after { margin-top: auto; }
.even-stack::after { content: ""; }
.even-stack .budget-row { padding: 0; }
.even-more { position: absolute; right: 24px; bottom: 16px; }
/* Budgets card: front rows flag overspending; the back has a sparkline per category. */
.bud-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.budget-row.over .num.tiny b { color: #FF8A8A; }
/* Footer row for "+N more" (bottom-right). */
.card-foot { flex: none; display: flex; justify-content: flex-end; padding-top: 6px; }
.bud-key { flex: none; display: flex; justify-content: flex-end; gap: 14px; font-size: 11.5px; color: var(--muted); }
.bud-key span { display: inline-flex; align-items: center; gap: 6px; }
.bud-key i { width: 14px; }
.bk-spent { height: 2px; border-radius: 1px; background: var(--series-1); }
.bk-budget { border-top: 2px dashed var(--muted); }
/* One line per category: name, sparkline, this month's amount. */
.bud-trend { display: grid; grid-template-columns: minmax(0, 1fr) 120px 56px; gap: 16px; align-items: center; }
.bud-trend-name { min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bud-trend-now { text-align: right; font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bud-trend.over .bud-trend-now { color: #FF8A8A; }
.bud-spark { display: block; overflow: visible; }
.bud-spark-budget { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.bud-spark-line { fill: none; stroke: var(--series-1); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.bud-spark-dot { stroke: #0E1729; stroke-width: 1.5; }

.dlg .field em { font-style: normal; text-transform: none; letter-spacing: 0; }

.budget-row { padding: 10px 0; font-size: 13px; }
.budget-row > .row-flex > span:first-child { font-weight: 600; }
.budget-row .num.tiny { font-size: 12px; color: var(--muted); }
.budget-row .num.tiny b { font-size: 13px; font-weight: 600; color: var(--ink); margin-right: 1px; }
.budget-row.over .num.tiny b { color: var(--critical); }
.budget-row .progress { height: 6px; border-radius: 99px; margin-top: 8px !important; }
.budget-row .progress > span { border-radius: 99px; }
/* Dashboard rows (option B): 12.5 medium names, 600 amounts, 11.5 meta, thinner bars. */
/* Budget names and amounts match the 11.5px "of $X" text; the bold steps down to 500. */
.dash .budget-row { font-size: 12px; }
.dash .budget-row > .row-flex > span:first-child { font-weight: 400; color: var(--ink); }
.dash .budget-row .num.tiny { font-size: 12px; }
.dash .budget-row .num.tiny b { font-size: 12px; font-weight: 500; }
.dash .budget-row .progress { height: 5px; margin-top: 9px !important; }
.dash .bud-trend-name, .dash .bud-trend-now { font-size: 12.5px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

.debt-top .tiny { margin-top: 2px; }

/* Accounts tree: All Accounts > Banking > Cash & Checking > account */
.acct-tree { font-size: 13px; }
/* A faint divider between groups (Banking / Investments / Assets). */
.acct-tree > .acct-node + .acct-node { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--acct-rule); }
/* One divider color for the card's group dividers, the title's and the footer's (Personal/Business hairlines are fainter). */
#acctCard { --acct-rule: rgba(185, 198, 222, .11); }
/* Negative balances and totals are red, the same soft red as the website's dashboard preview. */
#acctCard .acct-tree .num.neg { color: #F5A3A3; }
/* Negative group and type totals keep their row's emphasis: a brighter red, as bold as the white totals look. */
#acctCard .acct-tree .acct-line.lvl1 .num.neg { color: #FF8A8A; font-weight: 700; }
#acctCard .acct-tree .acct-line.lvl2 .num.neg { color: #FF8A8A; font-weight: 600; }
/* Title row: "Accounts" and the total of every group, larger than other card titles, with a divider under it. */
.dash .card-head.acct-head { align-items: center; min-height: 0; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--acct-rule); }
.dash .card-head.acct-head h2, .acct-head .num { font-size: 15px; font-weight: 600; color: var(--ink); }
.dash .card-head.acct-head h2 { color: var(--title-ink); }
.acct-head .num { font-variant-numeric: tabular-nums lining-nums; }
/* One 14px step per level: carets at 0 / 14px, names at 18 / 32 / 46px (caret 14px + 4px gap before each name). */
.acct-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 7px 0; color: inherit; text-decoration: none; line-height: 1.45; }
/* Every amount in the tree shares one font and right edge so the columns line up digit for digit. */
.acct-tree .num { font-family: var(--f-body); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums lining-nums; text-align: right; min-width: 80px; }
/* One size (13px) for every row. Main groups are bold, types are semibold and bright, accounts are regular and muted. */
.acct-line.lvl1 { font-weight: 700; color: var(--ink); }
.acct-line.lvl1 .num { color: var(--ink); font-weight: 700; }
.acct-line.lvl2 { padding-left: 14px; font-weight: 600; color: var(--ink-2); }
.acct-line.lvl2 .num { color: var(--ink); font-weight: 600; font-size: 12px; } /* only the main groups' amounts are 13px */
/* Accounts start at 46px, one 14px step past the type names and the Personal/Business labels
   (54px padding less the -8px margin that makes room for the hover). */
.acct-line.lvl3 { margin: 0 -8px; padding: 7px 8px 7px 40px; /* the P/B chip starts at 32px, in line with its type name */ grid-template-columns: minmax(0, 1fr) auto; color: var(--muted); border-radius: 8px; font-weight: 500; }
.acct-line.lvl3 .num { color: var(--muted); font-weight: 500; font-size: 12px; }
/* Dashboard tree (option B): 12.5px, weights 600 / 500 / 400, a little more space per row. */
.dash .acct-tree, .dash .acct-tree .num { font-size: 12.5px; }
.dash .acct-line { padding-top: 7px; padding-bottom: 7px; }
.dash .acct-line.lvl1, .dash .acct-line.lvl1 .num { font-weight: 700; font-size: 12.5px; color: var(--title-ink); } /* main groups: same size as the rows, bolder, title-bright */
.dash .acct-line.lvl2, .dash .acct-line.lvl2 .num { font-weight: 500; }
.dash .acct-line.lvl2 .num, .dash .acct-line.lvl3 .num { font-size: 12px; }
.dash .acct-line.lvl3, .dash .acct-line.lvl3 .num { font-weight: 400; }.dash .acct-tag { font-size: 10.5px; font-weight: 500; }
.acct-line.lvl3:hover { background: var(--wash); color: var(--ink); text-decoration: none; }
.acct-line.lvl3:focus-visible { outline-offset: -2px; border-radius: 8px; }
/* Room on the left so the hover highlight's rounded corners aren't clipped by the scroll box. */
.dash .acct-tree { margin-left: -8px; padding-left: 8px; }
.acct-name { padding-right: 10px; }
.acct-name { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.acct-nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* a long name shortens; the digits chip always shows */
/* Account tag after its purpose: bank + last 4 digits ("Chase 9598"). */
.acct-tag { display: inline-flex; align-items: baseline; gap: 5px; flex: none; margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--ink-2); font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; vertical-align: 1px; }
.acct-tag b { font-family: var(--f-mono); font-weight: 500; color: var(--muted); }
/* P / B badge before each account's name: a small tinted square, blue for personal, gold for business. */
.acct-own { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: 0; color: #8DB6FA; background: rgba(76, 141, 246, .1); }
.acct-own.biz { color: var(--gold); background: rgba(251, 188, 5, .1); }
.acct-lbl { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.acct-caret { all: unset; cursor: pointer; width: 14px; height: 14px; display: inline-grid; place-items: center; color: var(--muted); transition: transform .15s; } /* same grey as the account rows */
.acct-caret svg { display: block; }
.acct-caret:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.acct-node.closed > .acct-line .acct-caret { transform: rotate(-90deg); }
.acct-node.closed > .acct-kids { display: none; }
.acct-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--acct-rule); }
.acct-foot .acct-status { margin-top: 0; }
.acct-foot .acct-review { font-size: 12px; }
.acct-foot .acct-review::before { content: none; }
.hero { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink); font-variant-numeric: tabular-nums; }
.chip.up { color: var(--pos); background: rgba(61, 214, 140, .12); }
.chip.down { color: var(--critical); background: rgba(255, 107, 107, .12); }
.chart text.yr { fill: var(--muted); font-size: 10.5px; }
/* P&L months with no revenue and no expenses: dimmed month name. */
.chart text.pl-dim { fill: #4A5B7A; }

/* ---- transactions register ---- */
.reg { padding: 16px 0 6px; }
.reg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 20px 8px; }
.reg-title { display: flex; align-items: baseline; gap: 12px; }
.reg-title h1 { margin: 0; font-size: 20px; }
.reg-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.icon-btn { font: inherit; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--surface-2); }
.btn.tool, .new-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; }
.btn.tool .count:not(:empty) { background: var(--accent); color: var(--accent-ink); border-radius: 99px; font-size: 11px; padding: 0 6px; }
.search-wrap { display: flex; align-items: center; gap: 4px; }
.search-wrap input { width: 0; padding: 0; border-width: 0; transition: width .15s; }
.search-wrap.open input { width: 260px; padding: 6px 10px; border-width: 1px; }
.pop-wrap { position: relative; }
.pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 15; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px; min-width: 220px; display: grid; gap: 8px; }
.pop.right { right: 0; }
.pop-list { display: grid; }
.pop-list button, .pop.menu a, .pop.menu button { font: inherit; text-align: left; background: none; border: none; color: var(--ink); padding: 7px 8px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.pop-list button:hover, .pop.menu a:hover, .pop.menu button:hover { background: var(--surface-2); }
.pop-list button.on { color: var(--accent); font-weight: 600; }
.pop.menu { gap: 0; padding: 6px; }
.pop-sep { border-top: 1px solid var(--border); }
.col-opt { font-size: 13px; padding: 3px 0; cursor: pointer; }
.quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 20px 12px; }
.chip-btn { font: inherit; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip-btn:hover { background: var(--surface-2); }
.chip-btn.on { background: var(--wash); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.add-tx { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; background: var(--wash); border-top: 1px solid var(--border); }
.bulk select { padding: 5px 8px; font-size: 13px; }
.reg-scroll { overflow: auto; max-height: calc(var(--vh) - 210px); border-top: 1px solid var(--border); }
.reg-table { min-width: 1100px; }
/* Resizable columns: a grab strip on each header's right edge. Once sized, widths are exact (fixed layout). */
.reg-table.sized { table-layout: fixed; min-width: 100%; }
.reg-table.sized td { overflow: hidden; text-overflow: ellipsis; }
.reg-table.sized .ell, .reg-table.sized .c-desc .ell { max-width: none; }
.reg-table.sized .payee-cell .cell, .reg-table.sized .cat-cell .cell { min-width: 0; }
.reg-table.sized .pill { max-width: 100%; }
.reg-table th { position: sticky; top: 0; z-index: 2; background: var(--surface); white-space: nowrap; color: var(--ink); font-weight: 650; font-size: 13px; }
.reg-table td { padding: 5px 8px; font-size: 13px; white-space: nowrap; }
.reg-table th { padding: 9px 8px; }
.reg-table th:first-child, .reg-table td:first-child { padding-left: 20px; }
.reg-table th svg { vertical-align: middle; }
.reg-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.th-sort { font: inherit; font-weight: 650; background: none; border: none; color: inherit; cursor: pointer; padding: 0; }
.c-sel { width: 40px; } .c-date { width: 92px; font-variant-numeric: tabular-nums; } .c-account { width: 170px; } .c-check { width: 74px; } .c-reviewed { width: 38px; text-align: center; }
.c-desc { width: 230px; } .c-payee { width: 180px; } .c-entity { width: 160px; } .c-cat { width: 200px; } .c-tags { width: 120px; } .c-attach { width: 40px; text-align: center; }
.c-amt { width: 110px; font-weight: 600; } .c-gear { width: 44px; text-align: center; }
.c-desc .ell { max-width: clamp(200px, 22vw, 480px); color: var(--ink-2); } /* wider windows show more of it */
.cat-cell { display: flex; align-items: center; gap: 6px; }
.cat-cell .cell { flex: 0 1 auto; width: auto; min-width: 0; field-sizing: content; } /* hug the name so the Rule pill sits beside it */
.rule-pill { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 99px; background: rgba(61, 214, 140, .14); color: var(--good); }
span.rev { cursor: default; }
span.rev:hover { background: none; color: var(--baseline); }
span.rev.on:hover { color: var(--good); }
.reg-table.one-acct .c-account { display: none; }
.reg-table.hide-desc .c-desc, .reg-table.hide-account .c-account, .reg-table.hide-check .c-check, .reg-table.hide-reviewed .c-reviewed, .reg-table.hide-entity .c-entity,
.reg-table.hide-tags .c-tags, .reg-table.hide-notes .c-notes, .reg-table.hide-attach .c-attach { display: none; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-account .ell { max-width: 170px; }
tr.grp td { background: var(--surface-2); padding: 0; }
.grp-btn { font: inherit; display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--ink); padding: 8px 14px; cursor: pointer; text-align: left; }
.grp-btn svg { transition: transform .15s; }
.grp-btn.closed svg { transform: rotate(-90deg); }
tr.tx:hover td { background: var(--wash); }
tr.tx.sel td { background: var(--wash); }
.cell { width: 100%; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; font-size: 13px; text-overflow: ellipsis; }
.cell:hover { border-color: var(--border); }
.cell:focus { background: var(--surface); }
select.cell { appearance: none; cursor: pointer; max-width: none; }
select.cell:hover, select.cell:focus { appearance: auto; }
.payee-cell { display: flex; align-items: center; }
.payee-cell .cell { font-weight: 550; min-width: 150px; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); max-width: 150px; cursor: pointer; }
.pill.set { background: var(--wash); color: var(--accent); border-color: transparent; }
.rev, .clip { display: inline-grid; place-items: center; position: relative; width: 28px; height: 28px; padding: 0; background: none; border: none; border-radius: 6px; color: var(--baseline); cursor: pointer; }
.rev:hover, .clip:hover { color: var(--ink-2); background: var(--surface-2); }
.rev.on { color: var(--good); }
.clip.has { color: var(--accent); }
.clip span { position: absolute; top: -2px; right: -4px; min-width: 15px; height: 15px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 15px; }
.empty-row { text-align: center; padding: 40px !important; color: var(--muted); white-space: normal !important; }
.reg-more { text-align: center; padding: 12px; }

/* ---- receipts dialog ---- */
.rc-dialog { width: min(980px, calc(var(--vw) - 32px)); max-height: calc(var(--vh) - 48px); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.rc-dialog::backdrop { background: rgba(0,0,0,.45); }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.rc-head h2 { margin: 0 0 2px; }
.rc-body { padding: 16px 20px 20px; display: grid; gap: 18px; }
.rc-body h3 { font-size: 14px; margin: 0 0 10px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rc-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: grid; gap: 4px; align-content: start; background: var(--surface); }
.rc-item.attached { border-color: var(--accent); }
.rc-item.is-used { opacity: .75; }
.rc-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: none; border-radius: 6px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.rc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rc-pdf { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.rc-name { font-size: 12px; font-weight: 600; }
.rc-meta { font-size: 11px; color: var(--muted); display: flex; gap: 2px; align-items: center; min-width: 0; }
.rc-why { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-why span { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: var(--wash); color: var(--accent); }
.rc-drop { border: 2px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; color: var(--ink-2); }
.rc-drop.over, .rc-drop:focus { border-color: var(--accent); background: var(--wash); outline: none; }
.rc-setup { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; background: var(--surface-2); }
.rc-setup p { margin: 0 0 6px; }
.rc-setup ol { margin: 0; padding-left: 18px; color: var(--ink-2); }
.rc-viewer { padding: 16px 20px 20px; }
.rc-viewer img { display: block; max-width: 100%; max-height: calc(var(--vh) - 220px); margin: 0 auto; border-radius: 8px; }
.rc-viewer iframe { width: 100%; height: calc(var(--vh) - 220px); border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* ---- reconcile ---- */
.field { display: grid; gap: 4px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field-static { padding: 7px 0; font-variant-numeric: tabular-nums; }
.rec-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 14px; align-items: end; }
/* Page label colors: the small label above each page's title (.eyebrow: BANKING, BOOKS, …) has its own color per page
   (main[data-page] is set by route() in app.js); the titles themselves stay ink. */
main[data-page] .eyebrow { color: var(--page-title, var(--muted)); }
main[data-page="transactions"] { --page-title: #5B9BFF; }
main[data-page="reconcile"] { --page-title: #3DD68C; }
main[data-page="rules"] { --page-title: #FB923C; } /* = its menu tab (was gold, too close to Budget's) */
main[data-page="coa"] { --page-title: #A78BFA; }
main[data-page="register"] { --page-title: #C084FC; }
main[data-page="accounts"] { --page-title: #E879F9; }
main[data-page="reports"] { --page-title: #F472B6; }
main[data-page="budget"] { --page-title: #FACC15; }
main[data-page="spending"] { --page-title: #FB7185; }
main[data-page="forecast"] { --page-title: #F87171; } /* = its menu tab */
main[data-page="mileage"] { --page-title: #38BDF8; }
main[data-page="meals"] { --page-title: #F87171; }
main[data-page="settings"] { --page-title: #22D3EE; }
.rec-start { max-width: 760px; }
/* Reconcile: "Categorize transactions before you reconcile" (shown once a statement date is picked and For review
   still has this account's transactions on or before it). */
.rec-warn { display: flex; gap: 14px; align-items: flex-start; max-width: 760px; box-sizing: border-box; margin-bottom: 16px; padding: 16px 20px;
  border-radius: 12px; background: rgba(255, 128, 48, .08); border: 1px solid rgba(255, 128, 48, .35); }
.rec-warn[hidden] { display: none; }
.rec-warn-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #E8692A; color: #fff; font: 800 13px var(--f-body); }
.rec-warn b { display: block; font-size: 13.5px; color: var(--ink); }
.rec-warn div > div { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.rec-warn a { color: var(--gold); font-weight: 600; text-decoration: none; padding: 2px 4px; border-radius: 5px; }
.rec-warn a:hover { background: rgba(255, 255, 255, .08); }
.rec-start input[type=date]:invalid { color: var(--muted); } /* empty (required) date shows mm/dd/yyyy as a faint placeholder */
.rec-start .rec-sub { margin: 26px 0 12px; font: 600 15px var(--f-display); color: var(--ink); }
.rec-start .rec-sub .req { color: var(--gold); margin-left: 2px; }
.rec-start .field-static { font-size: 15px; padding: 9px 0; }
.rec-start input.num { text-align: right; }
.rec-note { margin: 14px 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--wash); }
.rec-band { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rec-band .label { color: var(--ink-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.rec-band .big { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rec-band .op { font-size: 22px; color: var(--muted); }
.rec-eq { display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); min-width: 210px; padding-left: 20px; border-left: 1px solid var(--border); }
.rec-eq > div { display: flex; justify-content: space-between; gap: 16px; }
.rec-diff { margin-left: auto; text-align: right; }
.rec-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { font: inherit; font-weight: 600; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2); padding: 8px 12px; margin-bottom: -1px; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); }
.rec-table th.ck, .rec-table td.ck { width: 44px; text-align: center; }
.rec-row { cursor: pointer; }
.rec-row:hover td { background: var(--surface-2); }
.rec-row.is-cleared td { background: var(--wash); }
.rec-row.is-later td:not(.ck) { opacity: .7; }
.rec-table input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

main { container-type: inline-size; }
@media (max-width: 700px) {
  .search-wrap.open input { width: 160px; }
}
@media (max-width: 900px) {
  .reg-scroll { max-height: none; }
  .rec-fields { grid-template-columns: 1fr; }
  .rec-eq { border-left: none; padding-left: 0; }
  .rec-diff { margin-left: 0; text-align: left; }
  main, main:has(> .dash) { padding: 20px 0 48px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 80px; }
}

/* =================== v5: MaxCounts look =================== */
.greet-name { color: var(--gold); }
/* All Accounts status line: sync dot · "Synced today, 12:04 AM" · "N to review" link. */
.acct-status { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.acct-status > i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--axis-ink); }
.acct-status[data-sync="ok"] > i { background: var(--good); }
.acct-status[data-sync="busy"] > i, .acct-status[data-sync="stale"] > i { background: var(--warning); }
.acct-status[data-sync="err"] > i { background: var(--critical); }
/* Right of the title: the Live pill (pulsing dot), amber Syncing/Stale, red Offline. */
.live-pill { --c: var(--axis-ink); display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 9px 3px 8px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.live-pill[data-sync="ok"] { --c: var(--good); }
.live-pill[data-sync="busy"], .live-pill[data-sync="stale"] { --c: var(--warning); }
.live-pill[data-sync="err"] { --c: var(--critical); }
/* "+ Account" beside the pill (addAccountDialog in features.js). */
.acct-head-r { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.acct-add { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
  font: 600 12px var(--f-body); color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.acct-add:hover { background: rgba(255, 255, 255, .08); border-color: rgba(251, 188, 5, .5); color: var(--ink); }
.mc-dialog [data-hows] { margin-top: -4px; }
.live-pill > i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.live-pill[data-sync="ok"] > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); animation: live-ping 1.8s ease-out infinite; }
@keyframes live-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-pill > i::after { animation: none; } }
.acct-review { color: var(--gold); font-weight: 600; text-decoration: none; }
.acct-review::before { content: "·"; color: var(--axis-ink); font-weight: 400; margin-right: 7px; }
.acct-review:hover { text-decoration: underline; }
/* Glass cards over the fixed page glow. They have no backdrop blur: the only thing behind them is the smooth glow, which
   a blur wouldn't visibly change, and a dozen live blurs made scrolling and page fades stutter. */
.dash .card { background: rgba(16, 26, 46, .45);
  border-width: .5px; border-color: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); } /* a light hairline */
.hero { font-family: var(--f-display); font-weight: 600; letter-spacing: -.025em; }
.chip { background: var(--surface-2); }
.progress, .bar-track { background: var(--surface-3); }
.badge, .tag-soft { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); margin-left: 8px; vertical-align: 1px; white-space: nowrap; }
.tag-soft.business { color: var(--gold); background: rgba(251, 188, 5, .1); }
.tag-soft.personal { color: var(--accent); background: var(--wash); }
.icon-btn { border-radius: 999px; background: var(--surface-2); border-color: var(--border); color: var(--ink-2); }
.icon-btn:hover { border-color: var(--accent); color: var(--ink); background: var(--surface-2); }
.dash .icon-btn { flex: none; }
.icon-btn.ghost { background: none; border-color: transparent; color: var(--muted); width: 30px; height: 30px; }
.icon-btn.ghost:hover { color: var(--ink); background: var(--surface-2); }
.back { display: inline-block; margin-bottom: 10px; color: var(--muted); font-weight: 600; }
.back:hover { color: var(--ink); }
.field > span { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.empty-row { padding: 56px 20px !important; }
.card-head h2, .card > h2 { font-size: 15px; }
.seg-n { font-weight: 700; color: var(--gold); margin-left: 2px; }

/* ---- Transactions: title line + one card per account (mockup K5) ---- */
.tx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tx-head h1 { margin: 0; }
.tx-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0; }
/* Card: name top-left (gold dot = business), to-post count top-right, Bank | Books centered underneath. */
/* Fixed-size cards in one row. If they don't fit, the row scrolls sideways (no scrollbar; round arrows show there's more). */
.acct-strip { position: relative; margin: 13px -3px 21px; }
.acct-cards { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 3px; scrollbar-width: none; overscroll-behavior-x: contain; }
/* Page changes and Personal / Business / Both (swapTo in app.js): the new page is built hidden (still laid out) under
   a still copy of the old one, then they trade in one frame. No fades. */
#view.swap-hold { visibility: hidden; }
.view-ghost { pointer-events: none; z-index: 1; }
.acct-cards::-webkit-scrollbar { display: none; }
.acct-card { position: relative; display: flex; flex-direction: column; gap: 0; flex: 0 0 280px; width: 280px; padding: 18px 18px 17px; border-radius: 12px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: rgba(16, 26, 46, .45); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .15s, background .15s, opacity .15s; }
.acct-card:hover { border-color: rgba(255, 255, 255, .15); }
/* The cards not picked fade back a little so the selected account stands out; hovering one brings it most of the way back. */
.acct-cards:has(.acct-card.on) .acct-card:not(.on) { opacity: .55; }
.acct-cards:has(.acct-card.on) .acct-card:not(.on):hover, .acct-cards:has(.acct-card.on) .acct-card:not(.on):focus-visible { opacity: .85; }
.acct-card.on { border-color: rgba(251, 188, 5, .55); background: rgba(251, 188, 5, .06); }
.acct-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Name + to-post count on top, the bank balance large, then the posted balance and last sync along the bottom.
   One text color throughout; only the gold count stands out. */
.ac-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ac-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.ac-name .acct-own { margin-right: 0; } /* same P / B chip as the dashboard Accounts card */
.ac-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ac-count { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-bank { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; white-space: nowrap; color: var(--ink-2); }
.ac-bank small { font: 500 15px var(--f-display); }
.ac-bank b { font: 500 18px var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ac-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-sync { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
/* The selected card's text goes white so it reads as the active one (the others are faded). */
.acct-card.on :is(.ac-name, .ac-bank, .ac-foot) { color: #FFFFFF; }

/* ---- Transactions register ---- */
.reg { padding: 18px 0 6px; background: var(--surface); }
.reg-head { padding: 0 24px 12px; }
.reg-title { align-items: center; gap: 16px; }
.quick { padding: 0 24px 14px; }
.chip-btn { border-radius: 999px; background: var(--surface-2); padding: 5px 14px; font-weight: 600; color: var(--ink-2); }
.chip-btn:hover { background: var(--surface-3); }
.chip-btn.on { background: var(--wash); border-color: var(--accent); color: var(--ink); }
.reg-table th { background: var(--surface); color: var(--muted); font-weight: 500; font-size: 11px; }
.th-sort { font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-family: var(--f-mono); }
.reg-table td { padding: 7px 8px; }
.reg-table th:first-child, .reg-table td:first-child { padding-left: 24px; }
tr.grp td { background: var(--page); }
.grp-btn { padding: 10px 18px; font-family: var(--f-display); font-size: 13px; }
tr.tx:hover td { background: rgba(76, 141, 246, .06); }
.cell:hover { border-color: var(--border); }
.cell:focus { background: var(--surface-2); }
.pill { border-radius: 99px; background: var(--surface-2); }
.add-tx, .bulk { background: var(--surface-2); }
.c-post { width: 96px; text-align: center; }
/* Icon titles (paperclip, reconciled check): dead center over their column; the paperclip a bit larger. */
.reg-table th.c-attach, .reg-table th.c-reviewed, .reg-table td.c-attach, .reg-table td.c-reviewed { text-align: center; padding-left: 0; padding-right: 0; }
.reg-table th.c-attach, .reg-table th.c-reviewed { vertical-align: middle; }
.reg-table th.c-attach .th-btn, .reg-table th.c-reviewed .th-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; margin: -3px 0; padding: 3px 0; gap: 0; }
.reg-table th.c-attach svg, .reg-table th.c-reviewed svg { display: block; }
.reg-table th.c-attach .th-ind, .reg-table th.c-reviewed .th-ind { position: absolute; left: calc(100% + 2px); top: 50%; transform: translateY(-50%); } /* the sort arrow doesn't push the icon off center */
.reg-table th.c-attach svg { width: 19px; height: 19px; }
/* Reconciled checkmarks: a little larger (21px rows, 20px header) and dead-centered in their cells. The mark is a
   block-level grid box (no inline baseline gap), centered with auto margins; the cell centers it vertically. */
.reg-table th.c-reviewed svg { width: 20px; height: 20px; }
.reg-table td.c-reviewed { vertical-align: middle; line-height: 0; }
.reg-table td.c-reviewed .rev { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; }
.reg-table td.c-reviewed .rev svg { width: 21px; height: 21px; display: block; }
.c-post .btn { padding: 5px 16px; }
.post-state { font: inherit; font-size: 12px; font-weight: 700; background: none; border: 1px solid transparent; border-radius: 99px; color: var(--good); padding: 4px 10px; cursor: pointer; }
.post-state:hover:not(:disabled) { border-color: var(--border); color: var(--muted); }
.post-state:hover:not(:disabled)::after { content: " · undo"; }
.post-state:disabled { cursor: default; }
.reg-table select.cell option { background: var(--surface-2); }
/* Option E: the register sits on the page (no card), fills the width, hairline rows. */
.card.reg { background: none; border: none; border-radius: 0; padding: 0; }
.reg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.reg-search { flex: 0 1 300px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--axis-ink); }
.reg-search:focus-within { border-color: var(--accent); }
.reg-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 0; color: var(--ink); font: inherit; font-size: 13px; }
.reg-bar .seg button { padding: 6px 14px; }
.reg-sum { margin-left: auto; }
/* One row: the For review / Posted / All switch on the left, search, dates and Filter on the right. */
.reg-tools { margin-left: auto; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.reg-tools .reg-search { flex: 0 1 320px; width: 320px; min-width: 180px; }
.reg-tools .pop-wrap { flex: none; }
.pop .quick { padding: 0 0 4px; }
/* Transactions toolbar popovers (dates, filters): one inner edge for everything, full-width controls, even spacing. */
#datePop, #filterPop { padding: 14px; gap: 0; box-sizing: border-box; max-height: calc(var(--vh) - 300px); overflow-y: auto; }
#datePop { width: 280px; }
#filterPop { width: 340px; }
:is(#datePop, #filterPop) :is(input, select) { width: 100%; min-width: 0; box-sizing: border-box; }
#datePop .pop-list { margin: 0 -6px; }
#datePop .pop-list button { padding: 8px 6px; }
#datePop .pop-sep { margin: 10px 0 14px; }
.pop-title { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pop-range { display: grid; gap: 12px; }
.pop-apply { width: 100%; justify-content: center; margin-top: 16px; }
#filterPop .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
#filterPop .quick .chip-btn { width: 100%; padding: 6px 8px; text-align: center; white-space: nowrap; }
#filterPop .field { gap: 6px; }
#filterPop .field + .field { margin-top: 12px; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pop-foot .btn.link { padding-left: 0; }
/* A fixed box: the same width with or without a scrollbar, and the same height however many rows a tab has. */
.reg-scroll { border-top: none; height: max(320px, calc(var(--vh) - 510px)); /* fills the window below the top bar, above the pager */ max-height: none; scrollbar-width: none; }
.reg-scroll::-webkit-scrollbar { display: none; }
.reg-pane { position: relative; display: flex; flex-direction: column; min-height: 0; }
/* Transactions page: no page-width cap; it spans the whole window (less the side gutters) at any width. */
main:has(> .card.reg) { width: calc(100% - 2 * var(--page-pad)); }
/* Transactions page: the page itself doesn't scroll. Heading, account tabs, balances and toolbar stay put; the list
   takes whatever height is left (down to the pager) and is the only thing that scrolls. Small or narrow windows
   fall back to a normal scrolling page. */
@media (min-width: 901px) and (min-height: 620px) {
  html:has(main > .card.reg) { overflow: hidden; } /* not the rules table inside Settings */
  .shell:has(main > .card.reg) { height: var(--vh); display: flex; flex-direction: column; }
  main:has(> .card.reg) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding-bottom: 12px; }
  main:has(> .card.reg) > * { flex: none; }
  main:has(> .card.reg) > .card.reg { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .card.reg > * { flex: none; }
  .card.reg > .reg-box { flex: 1 1 0; min-height: 0; }
  .reg-box > .reg-pane { flex: 1 1 0; }
  .reg-pane > .reg-scroll { flex: 1 1 0; height: auto; min-height: 120px; }
}
.reg-table, .reg-table.sized { width: 100%; min-width: 0; } /* columns shrink to a 48px floor (register.js / fitOne in util.js); past that it scrolls */
/* The bulk bar floats over the bottom of the page, so selecting rows never shifts the table. */
.card.reg .bulk { position: fixed; z-index: 20; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(var(--vw) - 48px);
  flex-wrap: nowrap; width: max-content; white-space: nowrap; padding: 8px 10px 8px 18px; border: 1px solid var(--baseline); border-radius: 14px; background: var(--surface-3); box-shadow: 0 16px 48px rgba(0, 0, 0, .5); }
.reg-table th { background: var(--page); border-bottom: 1px solid var(--grid); font-family: var(--f-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--axis-ink); }
.reg-table .th-sort { font-family: var(--f-body); letter-spacing: 0; text-transform: none; }
/* Column headers open a sort + filter menu. ↑/↓ marks the sorted column; a gold dot marks a filtered one. */
.th-btn { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 6px; margin: -3px -6px; border: 0; border-radius: 6px; background: none;
  font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.th-btn:hover, .th-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.th-btn.on { color: var(--ink); }
.th-label { overflow: hidden; text-overflow: ellipsis; display: inline-flex; }
.th-ind { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--gold); }
.th-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.c-amt .th-btn { flex-direction: row-reverse; }
/* Pages under the register. */
.pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--grid); font-size: 12.5px; color: var(--muted); }
.pg-size { display: inline-flex; align-items: center; gap: 8px; }
.pg-size select { padding: 4px 30px 4px 10px; font-size: 12.5px; }
.pg-range { font-variant-numeric: tabular-nums; }
.pg-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pg-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 13px var(--f-body); cursor: pointer; font-variant-numeric: tabular-nums; }
.pg-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.pg-btn.on { background: rgba(251, 188, 5, .14); color: var(--gold); }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-gap { color: var(--axis-ink); padding: 0 2px; }
.reg-table td { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.reg-table th:first-child, .reg-table td:first-child { padding-left: 16px; }
tr.grp td { border-bottom: none; }
.reg-table .cell.cat.none { color: var(--axis-ink); }
.c-post .btn.post { background: none; border: 1px solid rgba(251, 188, 5, .4); color: var(--gold); border-radius: 8px; padding: 4px 12px; font-size: 12px; }
.c-post .btn.post:hover:not(:disabled) { background: rgba(251, 188, 5, .1); }
.c-post .btn.post:disabled { border-color: var(--border); color: var(--axis-ink); opacity: .7; }

/* ---- Calm register (option A): plain text at rest, controls appear on hover or focus ---- */
.reg-table td { padding-top: 9px; padding-bottom: 9px; border-bottom-color: rgba(255, 255, 255, .04); }tr.tx:hover td { background: rgba(255, 255, 255, .025); }
tr.tx.sel td { background: rgba(76, 141, 246, .07); }
.reg-table .c-date { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.reg-table .c-account .ell { color: var(--muted); font-size: 13px; }
/* Payee: your name for it, or a cleaned-up bank name shown as if typed. The bank's own text has its own column. */
.reg-table .payee-cell .cell.payee { font-size: 14px; font-weight: 600; color: var(--ink); padding-left: 0; padding-right: 0; border-color: transparent; background: none; }
/* "Select payee" / "Select category" placeholders: a dim neutral gray (white at low strength), not the blue of the
   row dividers (user). */
:root { --placeholder-ink: rgba(232, 238, 250, .3); }
.reg-table .cell.payee::placeholder { color: var(--placeholder-ink); opacity: 1; font-weight: 500; }
/* Payee, Category and Business/Personal boxes fill their own cell exactly (never spill into the next column). */
.reg-table .payee-cell .cell.payee { padding: 4px 8px; margin: 0; width: 100%; box-sizing: border-box; border-radius: 8px; }
.reg-table .payee-cell:hover .cell.payee { border-color: var(--baseline); } /* just an outline when the cell itself is hovered */
.reg-table .cell.payee:focus { background: var(--surface-2); border-color: var(--baseline); }
.reg-table .c-desc .ell { font-size: 13px; color: var(--muted); }
/* Category: the name and a tiny "auto" when a rule set it. The menu's box shows on hover. */
.cat-cell { gap: 0; }
.reg-table .rule-pill + .cell.cat { padding-left: 6px; } /* the Rule chip sits close to its category name */
.reg-table .cell.cat { font-size: 13.5px; color: var(--ink); padding: 4px 8px; margin-left: 0; flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; border-radius: 8px; }
.reg-table .cell.cat.none { color: var(--placeholder-ink); }
.reg-table select.cell.cat option { color: var(--ink); } /* the open menu stays readable */
.reg-table .cell.cat:not(:hover):not(:focus) { border-color: transparent; background: none; }
/* Green "Rule" chip before the category name when a rule picked it. */
.rule-pill { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; padding: 0 7px; line-height: 18px; border-radius: 5px; background: rgba(61, 214, 140, .14); border: 0; color: var(--good); }
/* Business/Personal: nothing but a faint dash until set; a chip once set (gold for a business). The select shows on hover. */
.reg-table select.pill.ent { border: 1px solid transparent; background-color: transparent; background-image: none; padding: 4px 8px; border-radius: 8px; font-size: 12px; color: var(--baseline); width: 100%; max-width: 100%; box-sizing: border-box; }
.reg-table select.pill.ent.set { background-color: var(--surface-3); color: var(--ink-2); }
.reg-table select.pill.ent.biz { background-color: rgba(251, 188, 5, .12); color: var(--gold); }
.reg-table td:hover > select.pill.ent, .reg-table select.pill.ent:focus { border-color: var(--baseline); }
.reg-table select.pill.ent:hover { appearance: none; } /* only the outline, no native dropdown look */
/* Receipt and reconciled marks stay faint until they mean something: a "+" until a receipt is attached, then a
   green paperclip (the same green as a reconciled check). */
.reg-table .rev:not(.on), .reg-table .clip:not(.has) { color: var(--baseline); opacity: .55; }
.reg-table .clip:not(.has):hover { opacity: 1; color: var(--ink-2); }
.reg-table .clip.has { color: var(--good); }
.reg-table .clip.has span { background: var(--good); color: #06281A; }
.c-post .btn.post { border-radius: 999px; padding: 5px 14px; border-color: rgba(251, 188, 5, .35); }
/* Pending matches the Post pill: same height, width, padding and type. */
.c-post .btn.post, .c-post .tag-soft { min-width: 80px; box-sizing: border-box; text-align: center; vertical-align: middle; }
.c-post .tag-soft { display: inline-block; margin: 0; padding: 5px 14px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Action column (QBO style): "Post" as a text link, a caret beside it opening Split / Edit rule or Create a rule / Delete
   (.coa-menu, shared with the chart of accounts). Posted shows green text (click to undo); Pending is muted. */
.act { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.act-link { font: 600 12.5px var(--f-body); padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--gold); cursor: pointer; }
.act-link:hover:not(:disabled), .act-link:focus-visible { text-decoration: none; background: rgba(255, 255, 255, .08); outline: none; } /* shaded like the caret, never underlined */
.act-link:disabled { color: var(--axis-ink); cursor: default; opacity: .75; }
.act-link.done { color: var(--good); }
/* "Posted" is a plain status now: no hover change and no "· undo" (Undo posting lives in the arrow menu). */
.act-link.done, .act-link.done:hover { text-decoration: none; color: var(--good); background: none; cursor: default; }
.act-text { padding: 4px 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.act-caret { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.act-caret:hover, .act-caret.open { background: rgba(255, 255, 255, .08); color: var(--ink); }
.act-caret.open svg { transform: rotate(180deg); }
.coa-menu button.danger { color: #FF8A8A; }
.reg-table .split-open { width: 100%; text-align: left; font: 500 13.5px var(--f-body); color: var(--ink); background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; cursor: pointer; }
.reg-table .split-open:hover { border-color: var(--baseline); }
.sp-table input, .sp-table select { width: 100%; box-sizing: border-box; }
.sp-table .sp-amt { text-align: right; }
/* Typed-DELETE confirmation (confirmDelete in util.js). */
.btn.danger-solid { background: #E5484D; border-color: #E5484D; color: #fff; font-weight: 700; }
.btn.danger-solid:disabled { background: rgba(229, 72, 77, .25); border-color: transparent; color: rgba(255, 255, 255, .55); cursor: not-allowed; }

/* ---- Glass card register (option A, 2026-10-22): the table and its pager sit in one frosted card like the
   dashboard cards; quiet sentence-case headers, hairline dividers, a rounded highlight on the hovered row. ---- */
.reg-box { display: flex; flex-direction: column; min-height: 0; padding: 0; border-radius: var(--radius); overflow: hidden;
  background: rgba(16, 26, 46, .45); border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.reg-table { border-collapse: separate; border-spacing: 0; }
/* The sticky header needs a near-solid fill so rows don't show through it as they scroll under. */
/* Header band: a solid blue-slate strip across the card (solid so rows don't show through as they scroll under). */
.reg-table th { background: #18243D; border-bottom: .5px solid rgba(255, 255, 255, .06); font-size: 13px; font-weight: 600; color: #B9C6DE; padding-top: 12px; padding-bottom: 11px; }
.reg-table td { border-bottom: .5px solid rgba(255, 255, 255, .032); }
.reg-table tbody tr:last-child td { border-bottom: 0; }
/* Column lines: the faintest hairline between columns, a touch stronger in the header band. */
.reg-table th + th { border-left: .5px solid rgba(255, 255, 255, .06); }
.reg-table td + td { border-left: .5px solid rgba(255, 255, 255, .032); }
/* Sortable headers: the whole cell is the click target and lights up on hover. */
.reg-table th:has(.th-btn) { cursor: pointer; }
.reg-table th:has(.th-btn):hover { background: #1F2D4B; }
.reg-table th:has(.th-btn):hover .th-btn { color: var(--ink); }
.reg-table .th-btn:hover { background: none; }
/* Rows: square, hairline dividers, every other row slightly lighter; a faint wash on hover. */
tr.tx:nth-child(even) td { background: rgba(255, 255, 255, .02); }
tr.tx:hover td { background: rgba(255, 255, 255, .045); }
tr.tx.sel td { background: rgba(76, 141, 246, .08); }
tr.tx td { border-radius: 0; }
/* Receipts, Reconciled and Action stick to the card's right edge when the table scrolls sideways (offsets set by
   applyWidths). Their cells are solid, the glass card's color over the page, with the row tints layered on top. */
.reg-table .c-attach { position: sticky; right: var(--r-attach, 0); }
.reg-table .c-reviewed { position: sticky; right: var(--r-reviewed, 0); }
.reg-table .c-post { position: sticky; right: var(--r-post, 0); }
.reg-table th.c-attach, .reg-table th.c-reviewed, .reg-table th.c-post { z-index: 3; }
.reg-table td.c-attach, .reg-table td.c-reviewed, .reg-table td.c-post { z-index: 1; background: #0B111F; }
.reg-table tr.tx:nth-child(even) :is(td.c-attach, td.c-reviewed, td.c-post) { background: linear-gradient(rgba(255, 255, 255, .02), rgba(255, 255, 255, .02)) #0B111F; }
.reg-table tr.tx:hover :is(td.c-attach, td.c-reviewed, td.c-post) { background: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045)) #0B111F; }
.reg-table tr.tx.sel :is(td.c-attach, td.c-reviewed, td.c-post) { background: linear-gradient(rgba(76, 141, 246, .08), rgba(76, 141, 246, .08)) #0B111F; }/* Chart of accounts (coaView in books.js), QBO-style in the register's design: full window width with fixed No. / type /
   amount / action columns and the Name column taking the rest. The type cell ends with a chip for the statement the
   account lands on (BAL green, P&L blue); Action is "View register" plus a caret menu (.coa-menu). */
.coa2 .reg-table { width: 100%; table-layout: fixed; }
.coa2 .reg-table tbody td { height: 50px; } /* Rules and Accounts rows match the bank transactions rows */
.coa2 .reg-table th, .coa2 .reg-table td { padding-left: 16px; padding-right: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coa2 .reg-table th:first-child, .coa2 .reg-table td:first-child { padding-left: 20px; }
.coa2 .c-no { width: 76px; color: var(--muted); font-variant-numeric: tabular-nums; }
.coa2 .c-type { width: 300px; color: var(--muted); }
.coa2 .c-bal, .coa2 .c-bank { width: 150px; text-align: right; font-variant-numeric: tabular-nums; }
.coa2 .c-bank { color: var(--ink-2); }
/* Monthly budget column: an amount box on income and expense accounts, quiet until hovered or focused. */
.coa2 .c-bud { width: 150px; text-align: right; }
.coa2 input.coa-bud { width: 120px; box-sizing: border-box; margin: -5px -9px -5px 0; padding: 4px 8px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 6px; }
.coa2 input.coa-bud:hover { border-color: var(--border); }
.coa2 input.coa-bud:focus { outline: none; border-color: var(--gold); background: var(--surface-2); }
.coa2 input.coa-bud::placeholder { color: var(--muted); }
.coa2 th.c-bal .th-btn, .coa2 th.c-bank .th-btn { flex-direction: row-reverse; }
.coa2 .c-act { width: 170px; }
.coa2 td.c-act { padding-top: 0; padding-bottom: 0; }
.coa-type { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coa-type > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.coa-chip { flex: none; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.coa-chip.bal { color: #3DD68C; background: rgba(61, 214, 140, .12); }
.coa-chip.pl { color: #8DB6FA; background: rgba(76, 141, 246, .14); }
.coa-act { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.coa-act a { color: var(--gold); font-size: 12.5px; font-weight: 600; text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.coa-act a:hover, .coa-act a:focus-visible { text-decoration: none; background: rgba(255, 255, 255, .08); outline: none; } /* shaded like the caret */
/* Rules (rules.js), same table design as the chart of accounts: fixed narrow columns, Conditions and Settings share
   the rest and cut off with "…" (the full text is in the hover title). Drag the ⠿ handle to reorder. */
.rule-table { width: 100%; table-layout: fixed; }
.rule-table th, .rule-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; padding-right: 12px; }
.coa2 .rule-table .c-grip { width: 36px; padding: 0 0 0 10px; color: var(--muted); text-overflow: clip; }
.coa2 .rule-table .c-sel { width: 44px; padding-left: 8px; padding-right: 8px; text-overflow: clip; text-align: center; }
.rule-table .c-pri { width: 92px; font-variant-numeric: tabular-nums; }
.rule-table .c-rname { width: 220px; }
.rule-table .c-applied { width: 150px; color: var(--ink-2); }
.rule-table .c-cond, .rule-table .c-set { color: var(--ink-2); }
.rule-table .c-auto { width: 100px; }
.rule-table .c-status { width: 90px; }
.rule-table .c-act { width: 104px; padding-top: 0; padding-bottom: 0; }
.rule-table td.c-act .act { justify-content: flex-start; }
.rule-table tr.is-hidden td:not(.c-act):not(.c-sel) { opacity: .5; }
.rname { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.rinfo { display: inline-grid; color: var(--muted); cursor: help; }
.grip { display: inline-grid; place-items: center; width: 22px; height: 26px; border-radius: 5px; cursor: grab; color: var(--axis-ink); }
.grip:hover { background: rgba(255, 255, 255, .06); color: var(--ink-2); }
.rule-table tr.dragging td { opacity: .4; }
.rule-table tr.drop-before td { box-shadow: inset 0 2px 0 var(--gold); }
.rule-table tr.drop-after td { box-shadow: inset 0 -2px 0 var(--gold); }
.rule-bulk { display: flex; align-items: center; gap: 8px; }
.btn.danger-outline { color: #FF8A8A; border-color: rgba(255, 107, 107, .4); }
.coa-caret { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.coa-caret:hover, .coa-caret.open { background: rgba(255, 255, 255, .08); color: var(--ink); }
.coa-caret.open svg { transform: rotate(180deg); }
.coa-menu { position: fixed; z-index: 80; min-width: 190px; padding: 6px; display: grid; gap: 2px; background: #0E1729; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.coa-menu button { all: unset; box-sizing: border-box; padding: 8px 12px; border-radius: 7px; font: 500 13px var(--f-body); color: var(--ink-2); cursor: pointer; }
.coa-menu button:hover, .coa-menu button:focus-visible { background: rgba(255, 255, 255, .06); color: var(--ink); }
.coa2 tr.is-sub td.c-name { padding-left: 40px; }
.coa2 tr.is-sub td.c-name .coa-acct::before { content: "↳"; margin-right: 8px; color: var(--muted); }
.coa-acct { display: inline-flex; align-items: center; min-width: 0; }
.coa-acct a { color: var(--ink); text-decoration: none; }
.coa-acct a:hover { color: #fff; }
.coa-acct .acct-own + .acct-own { margin-left: -4px; }
.coa-acct .tag-soft { margin-left: 8px; }
.coa2 tr.is-hidden td { opacity: .5; }
.reg-box .pager { border-top: 1px solid var(--border); margin: 0; padding: 10px 20px; }

/* ---- Chart of accounts & registers ---- */
.coa, .reg-card { padding: 8px 0 4px; }
.coa-tools { display: flex; gap: 10px; align-items: center; padding: 14px 24px; }
.coa-tools input[type=search] { width: 260px; }
.coa-table td, .ledger td { padding: 13px 14px; }
.coa-table th, .ledger th { padding: 10px 14px; }
.coa-table th:first-child, .coa-table td:first-child, .ledger th:first-child, .ledger td:first-child { padding-left: 24px; }
.coa-table th:last-child, .coa-table td:last-child, .ledger th:last-child, .ledger td:last-child { padding-right: 20px; }
.coa-grp td { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-top: 22px !important; padding-bottom: 8px !important; background: transparent; }
.coa-table tbody tr:not(.coa-grp):hover td, .ledger tbody tr:hover td { background: rgba(76, 141, 246, .05); }
.coa-name { color: var(--ink); font-weight: 600; }
.coa-table .num a { margin-right: 4px; }
.coa-table tr.is-hidden td { opacity: .5; }
.num-left { font-variant-numeric: tabular-nums; }
.reg-bal { text-align: right; }
.reg-bal .hero { font-size: 32px; margin-top: 4px; }
.ledger td { font-variant-numeric: tabular-nums; }
.ledger-open td { background: var(--page); }
.ledger .ledger-grp td { font-family: var(--f-display); font-size: 13px; font-weight: 600; background: var(--surface-2); padding-top: 9px; padding-bottom: 9px; }
.ledger .ledger-grp .muted { font-family: var(--f-body); font-size: 12px; font-weight: 400; }
.ledger-pending td { color: var(--muted); }
.ledger-pending .tag-soft { margin-left: 0; }
.rc-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 800; background: rgba(61, 214, 140, .14); color: var(--good); }
.rc-mark.c { background: var(--wash); color: var(--accent); }
.acct-no { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* ---- dialogs ---- */
.mc-dialog { width: min(480px, calc(var(--vw) - 32px)); padding: 0; border: 1px solid var(--baseline); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
.mc-dialog:has(.wide) { width: min(820px, calc(var(--vw) - 32px)); }
.mc-dialog::backdrop { background: rgba(3, 6, 12, .7); backdrop-filter: blur(4px); }
.dlg { display: grid; gap: 18px; padding: 26px 28px 24px; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; }
.dlg-head h2 { margin: 0; font-size: 20px; }
.dlg-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* Opening balance change: the Now / New rows on the confirm step. */
.open-tbl { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.open-tbl td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.open-tbl td:first-child { width: 56px; }
.dlg-row > .field { flex: 1; min-width: 140px; }
.dlg .field input, .dlg .field select { width: 100%; }
.dlg-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; }
.check-line { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
.dlg textarea { width: 100%; resize: vertical; }
/* Mileage and meals pages (public/deductions.js) */
.ded-note { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px 20px; }
.ded-vehicles { display: grid; gap: 8px; align-content: start; }
.ded-veh { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; font-size: 13px; }
.ded-veh b { color: var(--ink); font-weight: 600; }
.ded-table td { vertical-align: top; font-size: 13px; }
.ded-table .nowrap, .ded-cand .nowrap { white-space: nowrap; }
.ded-wrap { max-width: 260px; }
.ded-acts { white-space: nowrap; text-align: right; }
.ded-acts .icon-btn { width: 28px; height: 28px; }
.ded-empty { display: grid; justify-items: center; gap: 4px; padding: 36px 16px; text-align: center; }
.ded-empty p { margin: 0 0 10px; }
.ded-cands { display: grid; }
.ded-cand { display: grid; grid-template-columns: 110px minmax(0, 1.4fr) minmax(0, 1fr) 90px auto; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ded-paid { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.neg-text { color: var(--critical); }
/* CSV import dialog */
.imp-drop { display: grid; gap: 4px; place-items: center; text-align: center; padding: 22px; border: 1.5px dashed var(--baseline); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.imp-drop:hover, .imp-drop.over { border-color: var(--accent); background: var(--wash); }
.imp-drop b { font-size: 14px; }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 14px; }
.imp-map .field select { width: 100%; }
#impPreview:not([hidden]) { display: grid; gap: 8px; }
.imp-sum { font-size: 13px; color: var(--ink-2); }
.imp-check { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; padding: 9px 12px; border-radius: 10px; }
.imp-check.ok { color: #6EE3A8; background: rgba(61, 214, 140, .08); }
.imp-check.bad { color: var(--ink-2); background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .3); }
.imp-check.bad b { color: #FF8A8A; }
.imp-table { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 4px; }
.imp-table table { table-layout: fixed; }
.imp-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; padding: 8px 12px; }
.imp-table th:nth-child(1) { width: 100px; } .imp-table th:nth-child(3) { width: 110px; } .imp-table th:nth-child(4) { width: 200px; }
.imp-table td { padding: 7px 12px; font-size: 13px; }
.imp-table tr:not(.imp-new) td { color: var(--muted); }
.imp-table .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.imp-new .imp-pill, .imp-history .imp-pill { color: var(--good); background: rgba(61, 214, 140, .1); }
.imp-table tr.imp-history td { color: var(--ink); }
.imp-hist { line-height: 1.45; }
.imp-anyway { display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; white-space: nowrap; cursor: pointer; }
.imp-recent { display: grid; gap: 6px; border-top: 1px solid var(--border); padding-top: 14px; }
.imp-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; font-size: 13px; }
.imp-recent-row .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp .dlg-foot #impNote { max-width: 380px; }.je-table td { padding: 6px 6px; border: none; }
.je-table th { padding: 6px; }
.je-table select, .je-table input { width: 100%; }
.je-table .je-dr, .je-table .je-cr { width: 120px; text-align: right; }
.je-table tfoot td { padding-top: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-dialog { border-color: var(--baseline); border-radius: 20px; }

/* ---- Reports ---- */
/* Reports: the page is as wide as the sheet, so the controls end flush with its right edge. Each dropdown has a small
   title above it; the print button lines up with the boxes. */
.rp-page { max-width: 920px; }
.rp-page .head { margin-bottom: 20px; }
.rp-controls { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 16px; } /* own row under the title */
.rp-ctl { display: flex; flex-direction: column; gap: 5px; }
.rp-ctl > span { font-size: 11px; font-weight: 500; color: var(--muted); padding-left: 2px; }
.rp-controls .icon-btn { margin-bottom: 2px; }
.paper { max-width: 920px; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px 0 26px; }
.paper-head { text-align: center; padding: 0 32px 26px; border-bottom: 1px solid var(--border); }
.paper-co { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.paper-title { color: var(--ink-2); margin-top: 6px; }
.paper-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.paper-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 22px 32px 0; }
.paper-note { color: var(--muted); font-size: 12px; text-align: center; padding-top: 18px !important; border: none !important; }
.rpt { width: 100%; }
.rpt th { padding: 12px 32px 10px 14px; }
.rpt th:first-child { padding-left: 32px; }
.rpt td { padding: 10px 32px 10px 14px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.rpt td:first-child { padding-left: 32px; }
.rpt td.num { width: 150px; }
.rpt .rp-h td { background: var(--surface-2); padding-top: 9px; padding-bottom: 9px; }
.rp-tog { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.rp-tog svg { color: var(--muted); transition: transform .15s; }
.rp-tog:focus-visible { outline: 2px solid var(--gold); border-radius: 4px; }
.rp-sec.closed .rp-r { display: none; }
.rp-sec.closed .rp-tog svg { transform: rotate(-90deg); }
.rp-r td:first-child { padding-left: 56px; }
.rp-r a { color: var(--ink-2); }
.rp-r a:hover { color: var(--ink); }
.rp-sec.lvl1 .rp-h td { background: transparent; padding-left: 44px; }
.rp-sec.lvl1 .rp-r td:first-child { padding-left: 70px; }
.rp-sec.lvl1 .rp-t td:first-child { padding-left: 44px; }
.rp-t td { font-weight: 700; }
.rp-t td:first-child { padding-left: 32px; }
.rp-k td { font-weight: 800; background: var(--surface-2); border-top: 1px solid var(--baseline); }
.rp-final td { font-family: var(--f-display); font-size: 15px; background: var(--surface-3); }
.rp-band td { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-top: 26px; border-bottom: none; }
.rpt td.over { color: var(--critical); }
/* Budget vs. Actual: the Budget amounts are inputs that read as plain report numbers until hovered or focused. */
.rpt input.bva-in { width: 110px; box-sizing: border-box; margin: -5px -9px -5px 0; padding: 4px 8px; text-align: right; font: inherit; font-variant-numeric: tabular-nums;
  color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; }
.rpt input.bva-in:hover { border-color: var(--border); }
.rpt input.bva-in:focus { outline: none; border-color: var(--gold); background: var(--surface-2); }
.rpt input.bva-in::placeholder { color: var(--muted); }
.rpt .bva-add-row td { padding-top: 6px; padding-bottom: 6px; }
.rpt select.bva-add { padding: 4px 30px 4px 10px; font-size: 12.5px; color: var(--muted); background-color: transparent; border-color: transparent; }
.rpt select.bva-add:hover, .rpt select.bva-add:focus { color: var(--ink); border-color: var(--border); }
.rpt td.under { color: var(--good); }
.rp-warn { color: var(--critical); text-align: center; font-weight: 700; }

@media print {
  :root { --page: #fff; --surface: #fff; --surface-2: #f4f6fa; --surface-3: #eaeef5; --ink: #0b1220; --ink-2: #26324a; --muted: #5b6b86; --border: #dfe4ee; --baseline: #c8d0de; --accent: #1f5fd1; }
  .topbar, .no-print, #toast { display: none !important; }
  html { zoom: 1; }
  body::before { display: none; }
  .shell { display: block; padding-top: 0; }
  main { padding: 0; max-width: none; }
  .paper { border: none; max-width: none; padding-top: 0; }
  .rp-tog svg { display: none; }
}

@media (max-width: 900px) {
  .paper { border-radius: 14px; }
  .rpt td, .rpt th { padding-right: 14px; }
  .rpt td:first-child, .rpt th:first-child { padding-left: 16px; }
  .rp-r td:first-child { padding-left: 30px; }
  .rpt td.num { width: auto; }
}

/* ---- 2026-10-31: B / P column, category picker, matched transfers, recurring marks ---- */
/* B / P sits right before Category (same width as Receipts and Reconciled). Recurring sits before Receipts and is
   pinned right with Receipts / Reconciled / Action. */
.reg-table :is(th, td).c-bp { text-align: center; padding-left: 0; padding-right: 0; vertical-align: middle; }
.reg-table th.c-bp .th-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; margin: -3px 0; padding: 3px 0; gap: 0; }
.reg-table th.c-bp .th-ind { position: absolute; left: calc(100% - 10px); top: 50%; transform: translateY(-50%); }
.rec-chip { display: inline-block; padding: 2px 8px; border-radius: 99px; font: 600 11px/16px var(--f-body); color: #C4B5FD; background: rgba(139, 124, 246, .14); cursor: default; }
.rec-chip.yr { color: #7DD3C0; background: rgba(45, 212, 191, .12); }
/* Posted is a status (undo it from the arrow menu), not a button. */
span.act-link.done { cursor: default; }
span.act-link.done:hover { background: none; color: var(--good); }
span.act-link.done:hover::after { content: none; }
/* Matched: category text plus a small link mark. */
.mc-link { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; border-radius: 6px; color: #8FB6FA; background: rgba(76, 141, 246, .12); cursor: default; }
/* Match preview: this transaction and the one it would pair with, side by side, then Match. */
.mp-pop { position: fixed; z-index: 90; width: 520px; padding: 16px; background: #0E1729; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.mp-pair { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: stretch; gap: 8px; }
.mp-side { min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .02); display: grid; gap: 4px; }
.mp-lbl { font-size: 11.5px; color: var(--muted); }
.mp-acct { font: 600 14px var(--f-display); color: var(--ink); }
.mp-desc { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 12px; color: var(--muted); }
.mp-foot b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mp-foot b.pos { color: var(--good); }
.mp-arrow { display: grid; place-items: center; color: #8FB6FA; }
.mp-book { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.mp-book b { color: var(--ink); font-weight: 600; }
.mp-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.bp-tog { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font: 700 11px/1 var(--f-body); color: #8FB6FA; background: rgba(76, 141, 246, .12); transition: border-color .15s; }
.bp-tog.biz { color: var(--gold); background: rgba(251, 188, 5, .1); }
.bp-tog:hover:not(:disabled) { border-color: currentColor; }
.bp-tog:disabled { cursor: default; opacity: .75; }
.bp-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A table squeezed to fit its box (fitOne in util.js): every column shows, long text cuts off with … */
table.fit > * > tr > :is(th, td) { overflow: hidden; text-overflow: ellipsis; }

/* Category: a quiet button (outline on hover) that opens the picker; locked text once posted. */
.reg-table .cell.cat-btn { flex: 0 1 auto; min-width: 0; width: auto; max-width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
  font: 500 13.5px var(--f-body); color: var(--ink); padding: 4px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-table .cell.cat-btn.none { color: var(--placeholder-ink); }
.reg-table .cell.cat-btn:hover { border-color: var(--baseline); background: none; }
.reg-table .cell.cat-btn.open { border-color: rgba(251, 188, 5, .55); background: var(--surface-2); }
.reg-table .rule-pill + .cell.cat-btn { padding-left: 6px; }
.cat-locked { flex: 0 1 auto; min-width: 0; padding: 4px 8px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }

.cat-pop { position: fixed; z-index: 90; padding: 6px; background: #0E1729; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.cat-q { width: 100%; box-sizing: border-box; padding: 8px 10px; font: 500 13px var(--f-body); color: var(--ink); background: rgba(255, 255, 255, .04); border: 1px solid transparent; border-radius: 8px; }
.cat-q:focus { outline: none; border-color: var(--baseline); }
.cat-list { max-height: 300px; overflow-y: auto; margin-top: 6px; }
.cat-grp { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cat-grp:first-child { padding-top: 4px; }
.cat-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 10px; border-radius: 7px;
  font: 500 13px var(--f-body); color: var(--ink-2); cursor: pointer; }
.cat-opt.act { background: rgba(255, 255, 255, .06); color: var(--ink); }
.cat-opt.on { color: var(--ink); font-weight: 600; }
.cat-opt.on::after { content: ""; width: 10px; height: 6px; margin-left: 10px; border: solid var(--gold); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -2px); }
.cat-none { padding: 12px 10px; font-size: 13px; color: var(--muted); }

/* B / P badge in front of the category (register), and the two-column Personal | Business picker */
.cat-cell > .bp-badge { margin-right: 4px; }
.bp-badge { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; font: 700 10.5px/1 var(--f-body);
  color: #8FB6FA; background: rgba(76, 141, 246, .14); }
.bp-badge.biz { color: var(--gold); background: rgba(251, 188, 5, .12); }
.cat-pop.sides { padding: 8px; }
.cat-pop.sides .cat-list { max-height: 380px; margin-top: 8px; }
.cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-pop.stack .cat-cols { grid-template-columns: 1fr; }
.cat-col { min-width: 0; padding: 0 2px 6px; border-radius: 10px; }
.cat-col.personal { background: linear-gradient(180deg, rgba(76, 141, 246, .07), transparent 140px); }
.cat-col.business { background: linear-gradient(180deg, rgba(251, 188, 5, .06), transparent 140px); }
.cat-side { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; font: 600 12.5px var(--f-display); color: var(--ink);
  background: #0E1729; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cat-col.personal .cat-side { box-shadow: inset 0 2px 0 rgba(76, 141, 246, .55); border-radius: 10px 10px 0 0; }
.cat-col.business .cat-side { box-shadow: inset 0 2px 0 rgba(251, 188, 5, .55); border-radius: 10px 10px 0 0; }
.cat-pop.sides .cat-opt { justify-content: flex-start; gap: 10px; }
.cat-no { flex: none; min-width: 34px; font: 500 11px var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-col.personal .cat-opt.on::after { border-color: #8FB6FA; }
.cat-col.personal .cat-opt.act { background: rgba(76, 141, 246, .1); }
.cat-col.business .cat-opt.act { background: rgba(251, 188, 5, .08); }

/* Matched transfer: the account it's booked to, then the other side's account. One-click "Match" when one is found. */
.match-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.match-chip .mc-cat { overflow: hidden; text-overflow: ellipsis; }
.mc-acct { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; color: var(--muted); }
.unmatch { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--axis-ink); font-size: 11px; cursor: pointer; opacity: 0; }
tr.tx:hover .unmatch, .unmatch:focus-visible { opacity: 1; }
.unmatch:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.match-sug { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border: 1px solid rgba(76, 141, 246, .35); border-radius: 99px;
  background: none; color: #8FB6FA; font: 600 11.5px/18px var(--f-body); cursor: pointer; }
.match-sug:hover { background: rgba(76, 141, 246, .12); }
.mt-list { display: grid; gap: 4px; margin-top: 4px; max-height: 320px; overflow-y: auto; }
.mt-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 120px 1fr auto 96px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.mt-row:hover, .mt-row:focus-visible { border-color: var(--baseline); background: rgba(255, 255, 255, .03); color: var(--ink); }
.mt-acct { font-weight: 600; color: var(--ink); }
.mt-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.mt-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Recurring: "R" with M (monthly) or A (annual) beside the payee. */
.badge.rec-badge { display: inline-flex; align-items: baseline; gap: 1px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; color: #C4B5FD; background: rgba(139, 124, 246, .14); cursor: default; }
.rec-badge i { font-style: normal; font-size: 9px; font-weight: 600; opacity: .8; }

/* ---- Budget page: Budget vs. Actual | Forecast tabs, the transactions panel, the forecast ---- */
.bud-page .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bud-tabs { flex: none; }
.rp-controls .bud-tabs.in-row { margin-right: auto; align-self: flex-end; } /* left end of the filters row */
/* Budget vs. Actual: the report (filters on top of it) is centered in the window on its own (user). The transactions
   panel floats to its right, fixed in the window 24px past the report's edge, so nothing moves when it opens. When the
   window is too narrow for that, it docks to the window's right edge over the report, with a shadow. */
.bud-page { max-width: 920px; }
.bud-page .bud-layout { display: block; }
.bud-main { min-width: 0; }
.bud-main .rp-controls { justify-content: flex-end; }
.bud-side { position: fixed; z-index: 30; top: calc(var(--top-h) + 36px); left: calc(50% + 460px + 24px); width: 380px;
  height: min(680px, calc(100vh - var(--top-h) - 56px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px 0 16px; box-sizing: border-box; visibility: hidden; }
@media (max-width: 1799px) { .bud-side { left: auto; right: var(--page-pad); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .75); } }
.bud-side.on { visibility: visible; }
.bud-side .bs-list { flex: 1; min-height: 0; }
.bs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 22px; }
.bs-name { font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.bs-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.bs-total { font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: -.01em; padding: 14px 22px 16px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.bs-list { overflow-y: auto; padding: 6px 10px; }
.bs-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 10px; }
.bs-row:hover { background: rgba(255, 255, 255, .03); }
.bs-main { min-width: 0; }
.bs-payee { font-size: 13px; font-weight: 500; color: var(--ink); }
.bs-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bs-amt { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.bs-amt.neg { color: var(--good); }
.bs-empty { font-size: 13px; color: var(--muted); padding: 16px 12px; text-align: center; }
.bs-link { align-self: flex-start; margin: 10px 22px 0; font-size: 12.5px; color: var(--muted); }
.bs-link:hover { color: var(--ink); }
.bs-load { height: 120px; }
.rpt .bva-amt { all: unset; cursor: pointer; border-radius: 4px; font-variant-numeric: tabular-nums; }
.rpt .bva-amt:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.rpt .bva-amt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rpt .rp-r.picked td { background: rgba(251, 188, 5, .06); }
.rpt .rp-r.picked a, .rpt .rp-r.picked .bva-amt { color: var(--ink); }

.fc-page { max-width: 1240px; }
.fc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.fc-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; display: grid; gap: 6px; }
.fc-stat span { font-size: 12px; color: var(--muted); }
.fc-stat b { font-family: var(--f-display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-stat b.pos { color: var(--good); } .fc-stat b.neg { color: var(--critical); }
.fc-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; height: 130px; padding: 16px 20px 12px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.fc-col { display: flex; flex-direction: column; min-width: 0; }
.fc-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fc-bars i { width: 30%; max-width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; }
.fc-bars i.in { background: var(--pl-rev, #4C8DF6); } .fc-bars i.out { background: var(--gold); }
.fc-mon { text-align: center; font-size: 11px; color: var(--muted); margin-top: 6px; }
.fc-paper { padding: 8px 0; max-width: none; }
.fc-scroll { overflow-x: auto; }
.fc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fc-table th { padding: 12px 12px 10px; font: 600 11.5px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--border); }
.fc-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .04); white-space: nowrap; color: var(--ink-2); }
.fc-table td:first-child, .fc-table th:first-child { padding-left: 24px; position: sticky; left: 0; background: var(--surface); }
.fc-table td:last-child, .fc-table th:last-child { padding-right: 24px; }
.fc-table .num { text-align: right; }
.fc-table .fc-tot { color: var(--ink); font-weight: 600; }
.fc-h td { padding-top: 16px; font-weight: 700; color: var(--ink); border-bottom: none; }
.fc-t td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--border); }
.fc-net td { font-family: var(--f-display); font-size: 13.5px; background: var(--surface-2); }
.fc-net td:first-child { background: var(--surface-2); }
.fc-table td.neg { color: var(--critical); }
.fc-name .acct-no { margin-right: 8px; }
@media (max-width: 800px) { .fc-stats { grid-template-columns: 1fr; } }

/* ---- Budget page transactions panel: option A (budget bar + clean list), overrides the first version above ---- */
.bud-side { padding: 0; overflow: hidden; }
.bud-side .bs-top { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.bud-side .bs-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0; }
.bs-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bs-no { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bud-side .bs-name { font: 600 15px var(--f-display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 13px; cursor: pointer; }
.bs-x:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.bs-amts { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bud-side .bs-total { font: 600 28px var(--f-display); letter-spacing: -.02em; padding: 0; border: 0; font-variant-numeric: tabular-nums; }
.bs-of { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bs-bar { height: 6px; border-radius: 99px; background: #18233A; overflow: hidden; }
.bs-bar i { display: block; height: 100%; border-radius: 99px; transition: width .25s; }
.bs-meta-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.bs-left { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.bs-left.good { color: var(--good); }
.bs-left.bad { color: var(--critical); }
.bud-side .bs-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; }
.bud-side .bs-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; }
.bud-side .bs-row:hover { background: rgba(255, 255, 255, .03); }
.bs-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bud-side .bs-payee { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-acct { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.bud-side .bs-amt { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.bud-side .bs-amt.neg { color: var(--good); }
.bs-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.bs-foot b { color: var(--ink); margin-left: 6px; font-variant-numeric: tabular-nums; }
.bs-foot a { color: var(--muted); }
.bs-foot a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .bs-bar i { transition: none; } }


/* ---- Reports center (#/reports, public/reports.js) ---- */
.rc-page { max-width: 980px; display: flex; flex-direction: column; gap: 26px; }
.rc-find { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--muted); cursor: text; }
.rc-find:focus-within { border-color: var(--baseline); }
.rc-find input { flex: 1; min-width: 0; height: 100%; background: none; border: none; outline: none; color: var(--ink); font: inherit; font-size: 14px; padding: 0; }
.rc-find input::placeholder { color: var(--muted); }
.rc-favs-wrap:empty { display: none; }
.rc-label { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rc-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rc-fav { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.rc-fav:hover { border-color: var(--baseline); background: var(--surface-2); }
.rc-fav-txt { flex: 1; min-width: 0; }
.rc-fav-name { font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.rc-fav-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.rc-list { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 4px 0; overflow: hidden; }
.rc-row { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1fr) 130px 70px; gap: 14px; align-items: center; padding: 10px 18px 10px 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.rc-row:first-child, .rc-hd + .rc-row { border-top: 0; }
.rc-row:not(.rc-hd):hover { background: rgba(255, 255, 255, .03); }
.rc-row:not(.rc-hd):hover .rc-go { color: var(--page-title, var(--ink)); }
.rc-hd { cursor: default; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-block: 12px 10px; border-bottom: 1px solid var(--border); }
.rc-name { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; min-width: 0; }
.rc-name:focus-visible, .rc-fav-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.rc-grp { color: var(--muted); }
.rc-when { font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rc-go { text-align: right; font-weight: 600; font-size: 12px; color: var(--muted); transition: color .15s; }
.rc-star { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--border); cursor: pointer; transition: color .15s, background .15s; }
.rc-star svg { fill-opacity: 0; }
.rc-star:hover { color: var(--muted); background: rgba(255, 255, 255, .04); }
.rc-star.on, .rc-star.on:hover { color: var(--gold); }
.rc-star.on svg { fill-opacity: 1; }
.rc-star:focus-visible { outline: 2px solid var(--gold); }
.rc-none { padding: 22px 18px; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) { .rc-row { grid-template-columns: 28px minmax(0, 1fr) 90px; } .rc-row > :nth-child(3), .rc-row > :nth-child(5) { display: none; } }
/* On every report: back to the center + a switch to any other report, at the left end of the report's controls row. */
.rc-bar { display: flex; align-items: center; gap: 12px; margin-right: auto; align-self: flex-end; }
.head:has(> .rc-bar) { align-items: flex-end; }
.rc-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 10px 6px 4px; border-radius: 8px; transition: color .15s, background .15s; }
.rc-back svg { transform: rotate(90deg); }
.rc-back:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.rc-switch { min-width: 200px; }

/* ---- Settings (settingsView in app.js): section list on the left, grouped rows on the right ---- */
.st-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; max-width: 1040px; margin: 20px auto 0; align-items: start; }
.st-nav { position: sticky; top: calc(var(--top-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.st-nav-it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.st-nav-it svg { color: var(--muted); flex: none; transition: color .15s; }
.st-nav-it:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
.st-nav-it.on { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.st-nav-it.on svg { color: var(--accent); }
.st-nav-it:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.st-main { min-width: 0; }
.st-sec { display: flex; flex-direction: column; gap: 26px; animation: st-in .22s ease; }
@keyframes st-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .st-sec { animation: none; } }
.st-h { margin: 0; font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.st-label { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 4px; }
.st-group { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 12px 18px; }
.st-row + .st-row, .st-group > * + * { border-top: 1px solid var(--border); }
.st-txt { min-width: 0; }
.st-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.st-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.st-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.st-ctl:empty { display: none; }
.st-inline { display: flex; align-items: center; gap: 8px; }
.st-inline input:not([type="date"]) { width: 200px; }
.st-add { gap: 10px; justify-content: flex-start; background: rgba(255, 255, 255, .015); }
.st-add input { flex: 1; min-width: 0; }
.st-mono { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
a.st-mono { color: var(--accent); text-decoration: none; }
a.st-mono:hover { text-decoration: underline; }
.st-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 4px 11px 4px 9px; border-radius: 999px; color: var(--ink-2); background: rgba(255, 255, 255, .05); white-space: nowrap; }
.st-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.st-pill.ok { color: var(--good); background: rgba(61, 214, 140, .1); } .st-pill.ok i { background: var(--good); box-shadow: 0 0 0 3px rgba(61, 214, 140, .18); }
.st-pill.warn { color: var(--warning); background: rgba(251, 188, 5, .1); } .st-pill.warn i { background: var(--warning); }
.st-pill.bad { color: #FF8A8A; background: rgba(255, 107, 107, .1); } .st-pill.bad i { background: var(--critical); }
.st-tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.st-tag.b { color: var(--gold); background: rgba(251, 188, 5, .1); }
.st-tag.p { color: #8DB8FF; background: rgba(76, 141, 246, .12); }
.st-del { color: var(--muted); }
.st-del:hover { color: var(--critical); }
/* iOS-style switch */
.st-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; cursor: pointer; }
.st-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.st-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); transition: background .2s; }
.st-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.st-switch input:checked + span { background: var(--good); box-shadow: none; }
.st-switch input:checked + span::after { transform: translateX(18px); }
.st-switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.st-table { overflow-x: auto; }
.st-table table { width: 100%; font-size: 13px; }
.st-table th { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 12px 18px 10px; border-bottom: 1px solid var(--border); }
.st-table td { padding: 10px 18px; border-top: 1px solid var(--border); }
.st-table tr:first-child td { border-top: 0; }
.st-table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .st-page { grid-template-columns: 1fr; gap: 20px; }
  .st-nav { position: static; flex-direction: row; overflow-x: auto; }
  .st-nav-it { width: auto; white-space: nowrap; }
  .st-row { flex-wrap: wrap; }
}
/* Rules: a sub-item of Books in the section list; the page widens for the rules table. */
.st-nav-it.sub { padding-left: 42px; font-size: 13px; font-weight: 500; }
.st-nav-it.sub svg { width: 16px; height: 16px; }
.st-page.wide { max-width: var(--page-w); }
.st-sec #stRules .card.reg { margin: 0; }
/* Cash Forecast, Spending Pace and Recent Transactions cards */
.dash .hero-row.left { justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash .legend3.spread { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.dash .legend3.spread > div { justify-self: auto; }
.card-chip { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-chip.good { color: var(--pos); background: rgba(61, 214, 140, .12); }
.card-chip.bad { color: var(--critical); background: rgba(255, 107, 107, .12); }
/* Recent Transactions: ruled ledger. The labels sit outside the scroller, so they stay put and the glass card shows through. */
.rt-cols, .rt-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 96px; }
.rt-cols { flex: none; height: 28px; font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--axis-ink); border-bottom: 3px double rgba(255, 255, 255, .13); }
.rt-cols > *, .rt-row > * { display: flex; align-items: center; min-width: 0; padding: 0 10px; }
.rt-cols > :first-child, .rt-row > :first-child { padding-left: 0; }
.rt-cols > :last-child, .rt-row > :last-child { padding-right: 0; justify-content: flex-end; }
.rt-cols > :nth-child(n + 2), .rt-row > :nth-child(n + 2) { border-left: 1px solid rgba(255, 255, 255, .13); }
.rt-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; }
.rt-row { height: 36px; scroll-snap-align: start; color: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, .06); transition: background .12s; }
.rt-row:last-child { border-bottom: 0; }
.rt-row:hover { color: var(--ink); text-decoration: none; background: rgba(141, 184, 255, .07); }
.rt-date { font: 400 12.5px var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; } /* 12.5px throughout = the Budgets card's rows */
.rt-who { display: block; font-size: 12.5px; font-weight: 500; line-height: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-amt { font: 500 12.5px var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-amt i { visibility: hidden; font-style: normal; } /* a positive amount's unseen ")", so the decimals line up */
.rt-amt.in { color: var(--pos); }
.rt-amt.out { color: #F5A3A3; } /* the Accounts card's soft red */
.st-inline input.st-amt, .st-add input.st-amt { flex: none; width: 130px; }

/* Forecast page (public/forecast.js): the forecast chart, a strip of months that stays under the menu, and twelve calendars. */
.fp-page { max-width: 1240px; margin-inline: auto; display: grid; gap: 14px; }
.fp-chart { height: 240px; }
.fp-strip { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0; }
.fp-strip button { font: inherit; font-size: 12.5px; font-weight: 600; flex: none; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.fp-strip button:hover { color: var(--ink); }
.fp-strip button.on { color: var(--tab-forecast, #F87171); background: rgba(248, 113, 113, .13); border-color: rgba(248, 113, 113, .28); }
.fp-month { padding: 20px 22px; }
.fp-month[hidden] { display: none; }
.fp-mnav { display: flex; align-items: center; gap: 10px; }
.fp-mnav h2 { min-width: 170px; text-align: center; }
.fp-mnav .icon-btn:disabled { opacity: .35; cursor: default; border-color: var(--border); }
.fp-mhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; margin-bottom: 14px; }
.fp-mhead h2 { margin: 0; }
.fp-mstats { display: flex; flex-wrap: wrap; gap: 22px; }
.fp-mstat { display: grid; justify-items: end; gap: 1px; }
.fp-mstat i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.fp-mstat b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-mstat b.in { color: var(--pos); }
.fp-dow, .fp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fp-dow { margin-bottom: 6px; font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fp-day { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 96px; box-sizing: border-box; padding: 6px 7px; border: 1px solid var(--grid); border-radius: 9px; background: var(--card-bg); cursor: pointer; }
.fp-day:hover { border-color: var(--baseline); }
.fp-day.today { border-color: #F87171; }
.fp-day.blank { border-color: transparent; background: none; cursor: default; }
.fp-day.past { background: none; border-color: transparent; cursor: default; opacity: .45; }
.fp-num { font: 500 12px var(--f-mono); color: var(--muted); background: none; border: 0; padding: 0; text-align: left; cursor: inherit; }
.fp-chip { font: inherit; font-size: 11.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; width: 100%; box-sizing: border-box; text-align: left; padding: 2px 6px; border: 0; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.fp-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fp-chip b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-chip.income { color: #8DB8FF; background: rgba(76, 141, 246, .16); }
.fp-chip.expense { color: var(--gold); background: rgba(251, 188, 5, .12); }
.fp-chip.debt { color: #F5A3A3; background: rgba(255, 107, 107, .14); }
.fp-chip:hover { filter: brightness(1.2); }
.fp-bal { margin-top: auto; padding-top: 2px; text-align: right; font: 500 11px var(--f-mono); color: var(--axis-ink); }
.fp-bal.low { color: var(--gold); }
.fp-bal.neg { color: #F5A3A3; }
@media (max-width: 720px) { .fp-day { min-height: 72px; padding: 4px; } .fp-chip { font-size: 10.5px; padding: 1px 3px; } .fp-bal { display: none; } }

/* Sign-in pages (public/login.html) */
.auth-page { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 16px; padding: 24px 16px; }
.auth-foot { display: flex; gap: 18px; font-size: 12.5px; }
.auth-foot a { color: var(--muted); }
.auth-box { width: min(400px, 100%); padding: 32px 30px; display: grid; gap: 16px; margin: 0; }
.auth-box h1 { margin: 0; font-family: var(--f-display); font-size: 22px; }
.auth-logo { border-radius: 10px; }
.auth-box form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.auth-field input { width: 100%; height: 42px; }
.auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.auth-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.auth-err { margin: 0; font-size: 13px; color: #FF8A8A; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-links:empty { display: none; }
.auth-qr { background: #fff; border-radius: 12px; width: 200px; margin: 0 auto; }
.auth-qr svg { display: block; width: 100%; height: auto; }
.auth-secret { margin: 0; text-align: center; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); word-break: break-all; }
.auth-codes { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7; user-select: all; }

/* Terms and Privacy pages */
.legal-page { padding: 40px 16px 72px; }
.legal { max-width: 720px; margin: 0 auto; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.legal h1 { margin: 18px 0 4px; font-family: var(--f-display); font-size: 30px; color: var(--ink); }
.legal h2 { margin: 30px 0 6px; font-family: var(--f-display); font-size: 17px; color: var(--ink); }
.legal b { color: var(--ink); }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal-date { margin: 0 0 22px; color: var(--muted); font-size: 13px; }