/* ============================================================
   Brainzie Money — app theme.
   Maps the generic Team.Core.Blazor.Components variables (--tcc-*)
   onto the Brainzie brand tokens defined in brainzie.css.
   App-specific layout (welcome screen, app shell) lives here too.
   ============================================================ */

:root {
  --tcc-font: var(--font-body);
  --tcc-font-display: var(--font-display);
  --tcc-radius: var(--radius);
  --tcc-radius-s: var(--radius-s);
  --tcc-shadow: var(--shadow);
  --tcc-shadow-s: var(--shadow-s);

  --tcc-btn-primary-bg: var(--brand);
  --tcc-btn-primary-fg: var(--white);
  --tcc-btn-primary-bg-hover: var(--brand-deep);
  --tcc-btn-ghost-fg: var(--ink);
  --tcc-btn-ghost-border: var(--line);
  --tcc-btn-ghost-fg-hover: var(--brand-deep);
  --tcc-btn-danger-bg: var(--accent-coral);
  --tcc-btn-danger-fg: var(--white);

  --tcc-card-bg: var(--white);
  --tcc-card-border: var(--line);

  --tcc-banner-info-bg: #EEE7FB;
  --tcc-banner-info-border: var(--secondary);
  --tcc-banner-info-fg: #3a2270;
  --tcc-banner-success-bg: #eafaf3;
  --tcc-banner-success-border: #18a06b;
  --tcc-banner-success-fg: #0c5c3c;
  --tcc-banner-warning-bg: #FFF1E0;
  --tcc-banner-warning-border: var(--accent-orange);
  --tcc-banner-warning-fg: #8a4b00;
  --tcc-banner-urgent-bg: var(--brand-tint);
  --tcc-banner-urgent-border: var(--brand);
  --tcc-banner-urgent-fg: var(--brand-deep);

  /* DataGrid — maps to the brand neutrals so it flips correctly in dark mode (which overrides --ink/--line/--white). */
  --tcc-grid-fg: var(--ink);
  --tcc-grid-muted: var(--muted);
  --tcc-grid-line: var(--line);
  --tcc-grid-surface: var(--white);
  --tcc-grid-head-bg: color-mix(in srgb, var(--ink) 4%, var(--white));
  --tcc-grid-stripe: color-mix(in srgb, var(--ink) 3%, var(--white));
  --tcc-grid-hover: color-mix(in srgb, var(--brand) 8%, var(--white));
  --tcc-grid-selected: var(--brand-tint);
  --tcc-grid-accent: var(--brand);
  --tcc-grid-totals-bg: color-mix(in srgb, var(--ink) 5%, var(--white));
  --tcc-grid-group-bg: color-mix(in srgb, var(--brand) 6%, var(--white));
  --tcc-grid-group-divider: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* ============================================================
   Dark theme.
   We override the Brainzie *neutral* tokens (text / surface / line)
   only — the magenta brand hue is intentionally preserved. brainzie.css
   is never edited; these overrides live in the app layer.

   Resolution order:
     1. No explicit choice  -> follow the OS via prefers-color-scheme.
     2. Explicit data-theme  -> always wins (set by js/theme.js).
   The dark token block is declared twice (system + explicit) because
   CSS can't share a value set across two selectors; keep them in sync.
   ============================================================ */
:root {
  color-scheme: light;
}

/* Shared dark token values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink: #F4F1FA;
    --ink-soft: #C9C2DE;
    --muted: #9088a8;
    --line: #2C2542;
    --paper: #120E1E;
    --paper-2: #1A1430;
    --white: #1E1834;          /* card / raised surface */
    --brand-tint: rgba(216, 27, 114, .20);

    --tcc-btn-ghost-fg: var(--ink);
    --tcc-banner-info-bg: rgba(109, 40, 217, .22);
    --tcc-banner-info-fg: #d8ccff;
    --tcc-banner-success-bg: rgba(24, 160, 107, .20);
    --tcc-banner-success-fg: #8ee9c4;
    --tcc-banner-warning-bg: rgba(251, 139, 36, .20);
    --tcc-banner-warning-fg: #ffcf99;
    --tcc-banner-urgent-bg: rgba(216, 27, 114, .22);
    --tcc-banner-urgent-fg: #ff9ec8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #F4F1FA;
  --ink-soft: #C9C2DE;
  --muted: #9088a8;
  --line: #2C2542;
  --paper: #120E1E;
  --paper-2: #1A1430;
  --white: #1E1834;
  --brand-tint: rgba(216, 27, 114, .20);

  --tcc-btn-ghost-fg: var(--ink);
  --tcc-banner-info-bg: rgba(109, 40, 217, .22);
  --tcc-banner-info-fg: #d8ccff;
  --tcc-banner-success-bg: rgba(24, 160, 107, .20);
  --tcc-banner-success-fg: #8ee9c4;
  --tcc-banner-warning-bg: rgba(251, 139, 36, .20);
  --tcc-banner-warning-fg: #ffcf99;
  --tcc-banner-urgent-bg: rgba(216, 27, 114, .22);
  --tcc-banner-urgent-fg: #ff9ec8;
}

/* Make page surface follow the (possibly overridden) paper token. */
body { background: var(--paper); color: var(--ink); }

/* ----------------------------- Blazor error UI ----------------------------- */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 14px 20px;
  background: var(--brand-tint);
  border-top: 3px solid var(--brand);
  color: var(--brand-deep);
  font-family: var(--font-body);
  box-shadow: var(--shadow-s);
}
#blazor-error-ui .reload { color: var(--brand-deep); font-weight: 600; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ----------------------------- App shell ----------------------------- */
.app-root { min-height: 100vh; }

/* ----------------------------- Demo-mode banner ----------------------------- */
/* Permanent, prominent strip shown app-wide while in the no-account demo. Uses the warning tokens so it reads
   as "be aware" in both light and dark themes; sticks to the top so it stays visible as the user scrolls. */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--tcc-banner-warning-bg);
  color: var(--tcc-banner-warning-fg);
  border-bottom: 2px solid var(--tcc-banner-warning-border);
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.4;
}
.demo-banner__icon { font-size: 1.1rem; flex: 0 0 auto; }
.demo-banner__text strong { font-family: var(--font-display); }

/* Storage-degraded banner: shown when the browser's IndexedDB is unavailable so data isn't cached on this device
   (it still syncs to the cloud). Mirrors the demo banner, but dismissible since it's informational, not permanent. */
.storage-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--tcc-banner-warning-bg);
  color: var(--tcc-banner-warning-fg);
  border-bottom: 2px solid var(--tcc-banner-warning-border);
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.4;
}
.storage-banner__icon { font-size: 1.1rem; flex: 0 0 auto; }
.storage-banner__text { flex: 1 1 auto; }
.storage-banner__text strong { font-family: var(--font-display); }
.storage-banner__dismiss {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: .8;
}
.storage-banner__dismiss:hover { opacity: 1; }

/* ----------------------------- Theme toggle ----------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { color: var(--brand-deep); border-color: var(--brand); }
.theme-toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ----------------------------- App pages (post-login) ----------------------------- */
.app-page { max-width: 980px; margin-inline: auto; padding: 32px 24px 72px; }
.app-page--narrow { max-width: 720px; }
/* Dense, data-heavy pages use (almost) all the viewport width so wide grids have room before ellipsising. */
.app-page--wide { max-width: min(1600px, 96vw); }
.app-page__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; position: sticky; top: 0; z-index: 30; background: var(--paper); padding: 12px 0; border-bottom: 1px solid var(--line); }
.app-page__bar img { width: 38px; height: 38px; }
.app-page__bar .name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em; color: var(--ink); }
.app-page__account { font-family: var(--font-display); font-size: .85rem; color: var(--muted); }

/* Clickable wordmark in the top bar — returns to the dashboard. Keeps the logo+name look, adds an affordance. */
.app-page__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; border-radius: 8px; }
.app-page__brand:hover .name { color: var(--brand-deep); }
.app-page__brand:hover img { transform: scale(1.06); transition: transform .12s ease; }

/* ----------------------------- Left navigation sidebar (burger menu) ----------------------------- */
:root { --nav-w: 226px; --nav-w-collapsed: 62px; }

/* Reserve space for the fixed sidebar only when one is present (i.e. signed in). :has keeps pre-sign-in pages full-width. */
body:has(.app-sidebar) .app-root { padding-left: var(--nav-w-collapsed); transition: padding-left .16s ease; }
body.nav-expanded:has(.app-sidebar) .app-root { padding-left: var(--nav-w); }

.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: var(--nav-w-collapsed);
  display: flex; flex-direction: column;
  background: var(--white); border-right: 1px solid var(--line);
  overflow: hidden; transition: width .16s ease;
}
body.nav-expanded .app-sidebar { width: var(--nav-w); }
.sidebar__scroll { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 16px; overflow-y: auto; overflow-x: hidden; }

.sidebar__burger {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 14px 16px; cursor: pointer; color: var(--ink-soft);
  font-family: var(--font-display); font-size: .95rem;
}
.sidebar__burger:hover { color: var(--brand-deep); }

.sidebar__item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-radius: 8px;
  padding: 9px 12px; cursor: pointer; text-align: left; text-decoration: none;
  color: var(--ink-soft); font-family: var(--font-display); font-size: .9rem; white-space: nowrap;
}
.sidebar__item:hover { background: var(--paper-2); color: var(--ink); }
.sidebar__item.active { background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.sidebar__item--primary { color: var(--ink); font-weight: 600; }
.sidebar__ico { flex: 0 0 26px; font-size: 1.15rem; line-height: 1; text-align: center; }
.sidebar__signout { color: var(--accent-orange); margin-top: 4px; }

/* The group headings and labels only show when expanded; collapsed is icons-only (tooltips via title attr). */
.sidebar__group { font-family: var(--font-display); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 12px 12px 2px; }
.sidebar__label { overflow: hidden; }
body:not(.nav-expanded) .app-sidebar .sidebar__label,
body:not(.nav-expanded) .app-sidebar .sidebar__group { display: none; }
body:not(.nav-expanded) .app-sidebar .sidebar__item,
body:not(.nav-expanded) .app-sidebar .sidebar__burger { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }

/* On small screens keep it collapsed-width by default; expanding overlays the content rather than squeezing it. */
@media (max-width: 720px) {
  body.nav-expanded:has(.app-sidebar) .app-root { padding-left: var(--nav-w-collapsed); }
  body.nav-expanded .app-sidebar { box-shadow: var(--shadow); }
}
/* Rendered as a <button> (resolves the folder URL on click), so strip the native button chrome — it must read as a quiet link. */
.app-page__account--link { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: .85rem; color: var(--muted); text-decoration: none; cursor: pointer; }
.app-page__account--link:hover { color: var(--brand-deep); text-decoration: underline; }
.app-page__account--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.sync-indicator { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .8rem; color: var(--muted); }
.sync-indicator__icon { font-size: .95rem; }
.sync-indicator--syncing { color: var(--secondary); border-radius: 999px; padding: 2px 10px; background: linear-gradient(to right, color-mix(in srgb, var(--secondary) 22%, transparent) var(--sync-pct, 0%), transparent var(--sync-pct, 0%)); transition: background .3s ease; }
.sync-indicator--syncing .sync-indicator__icon { animation: sync-spin 1s linear infinite; display: inline-block; }
.sync-indicator--offline, .sync-indicator--error { color: var(--accent-orange); }
.sync-indicator--idle { color: #18a06b; }
.sync-indicator--missing { background: var(--accent-orange); color: #fff; border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600; }
.sync-indicator--missing:hover { filter: brightness(1.05); }
.sync-indicator--missing:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sync-indicator--unverified { background: none; border: 1px solid var(--accent-orange); color: var(--accent-orange); border-radius: 999px; padding: 3px 11px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600; }
.sync-indicator--unverified:hover { background: color-mix(in srgb, var(--accent-orange) 12%, transparent); }
.sync-indicator--unverified:disabled { cursor: default; opacity: .7; }
.sync-indicator--unverified:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sync-indicator--link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.sync-indicator--link:hover .sync-indicator__label { text-decoration: underline; }
.sync-indicator--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@keyframes sync-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 700px) { .sync-indicator__label { display: none; } }
.app-page__section { margin-top: 28px; }
.app-page__stepper { margin: 24px 0 28px; }

/* Page intros sit above wide tables — let them use the available width instead of wrapping early on a roomy screen. */
.app-page > .lead { max-width: min(110ch, 100%); }

/* ----------------------------- Section (collapsible, used on every page) ----------------------------- */
/* A uniform collapsible block: an h2-sized header (so every section header matches) with a chevron, over a body that
   hides when collapsed. Built on <details>/<summary>; no JS. */
.app-section { margin-top: 28px; }
.app-section__summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  list-style: none; cursor: pointer; user-select: none;
}
.app-section__summary::-webkit-details-marker { display: none; }
.app-section__summary:hover .app-section__title { color: var(--brand-deep); }
.app-section__summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.app-section__chevron {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 8px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  color: var(--brand); transition: transform .15s ease;
}
.app-section[open] > .app-section__summary .app-section__chevron { transform: rotate(90deg); }
.app-section__title { margin: 0; }
.app-section__aside { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--muted); }
.app-section__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; cursor: default; }
.app-section__body { padding-top: 14px; }

.account-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.account-group h3 { margin-bottom: 12px; }
.account-list { list-style: none; display: grid; gap: 12px; }
.account-list li { display: flex; flex-direction: column; gap: 2px; }
.account-list__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.account-list__meta { font-size: .85rem; color: var(--muted); }
.account-row { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 8px !important; }
.account-row--merged { opacity: .6; }
/* Closed accounts: clearly de-emphasised wherever shown. */
.account-group--closed, .account-row--closed { opacity: .65; }
.account-group--closed h3 { color: var(--muted); }
.closed-accounts__heading { color: var(--muted); }
.warn-glyph { cursor: help; }
.setup-region { display: grid; gap: 12px; margin-top: 8px; }
.region-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.region-option input { margin-top: 3px; }
.income-payslip { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
/* Account names are neutral ink, not the deep-magenta brand colour — that read as a "something's wrong" red.
   The brand colour + underline only appear on hover, which keeps the link affordance without the alarm. */
.account-list__link { color: var(--ink); text-decoration: none; }
.account-list__link:hover { color: var(--brand-deep); text-decoration: underline; }
.account-details { width: 100%; border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }
.account-details .history-table { font-size: .9rem; }

/* Dashboard accounts panel — tabbed, one row per account (details to the side, not stacked under a link). */
.tcc-card.account-panel { padding: 0; overflow: hidden; }
.account-panel__note { margin: 14px 18px 4px; font-size: .85rem; }
.acct-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); padding: 6px 10px 0; }
.acct-tabs__tab {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--muted);
  background: none; border: none; border-bottom: 3px solid transparent; padding: 10px 14px;
}
.acct-tabs__tab:hover { color: var(--ink); }
.acct-tabs__tab--active { color: var(--brand-deep); border-bottom-color: var(--brand); }
.acct-tabs__count { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--paper-2); border-radius: 999px; padding: 1px 7px; }
.acct-tabs__tab--active .acct-tabs__count { color: var(--brand-deep); background: var(--brand-tint); }
/* Closed tab: a clear "closed" cue in coral, always the last tab. */
.acct-tabs__tab--closed { color: var(--accent-coral); }
.acct-tabs__tab--closed.acct-tabs__tab--active { color: var(--accent-coral); border-bottom-color: var(--accent-coral); }
.acct-tabs__tab--closed.acct-tabs__tab--active .acct-tabs__count { color: var(--accent-coral); background: color-mix(in srgb, var(--accent-coral) 18%, transparent); }

.account-list--rows { gap: 0; padding: 4px; }
.account-list--rows .account-row { padding: 11px 14px; border-bottom: 1px solid var(--line); gap: 10px !important; }
.account-list--rows .account-row:last-child { border-bottom: none; }
.account-list--rows.account-list--closed .account-row { opacity: .72; }
button.account-list__link { background: none; border: none; cursor: pointer; font: inherit; padding: 0; }

/* The dashboard accounts list doubles as the wealth-chart legend: a swatch in the chart's colour, hover-highlight
   tied to the chart, open accounts first then a closed section. Higher specificity to beat .account-list li's column layout. */
/* Dense, multi-column legend/account list — the dashboard shows as much as possible (Manage accounts stays sparse). */
.account-legend { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 20px; padding: 4px; }
.account-legend li.account-legend__row { flex-direction: row; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--line); border-radius: 6px; font-size: .88rem; transition: background .1s ease; }
/* Bright, unmistakable highlight when the matching chart bar is hovered (the dull tint wasn't eye-catching enough). */
.account-legend__row--active { background: var(--brand-tint); box-shadow: inset 4px 0 0 var(--brand); border-radius: 6px; }
.account-legend__row--active .account-list__name { color: var(--brand-deep); font-weight: 700; }

/* Per-item show/hide toggle in the chart legend (accounts + goals). */
.account-legend__toggle { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.account-legend__toggle--spacer { background: none; cursor: default; }
.account-legend__goals { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
/* Goal swatch: a dashed-bordered chip echoing the dashed target line, coloured by achievement. */
.account-legend__swatch--goal { background: transparent; border: 2px dashed currentColor; }
.account-legend__swatch--goal.is-ok { color: #18a06b; }
.account-legend__swatch--goal.is-fail { color: #e5484d; }
.account-legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; }
.account-legend__swatch--none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; }
.account-legend .account-list__meta { font-size: .76rem; white-space: nowrap; }
.account-legend__closed { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; grid-column: 1 / -1; }
.account-legend__filter { margin: 4px 0 12px; max-width: 420px; }
.wealth-legend-hint { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .82rem; color: var(--muted); }

/* Instant chart tooltip drawn by js/chart.js — a fixed-position panel that follows the cursor; pre-wrap keeps the
   multi-line text + alignment the builder produced. pointer-events:none so it never steals the hover. */
.bz-chart-tip { position: fixed; z-index: 1000; pointer-events: none; max-width: 340px; white-space: pre-wrap; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 11px; font-size: .8rem; line-height: 1.4; font-family: var(--font-display); }

/* "Load more" affordance (activity log paging). */
.load-more { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Wealth-over-time chart (dashboard). SVG scales to the card width; colours encode sign (greens up, reds down). */
.wealth-chart__svg { width: 100%; height: auto; display: block; }
.wealth-chart__grid { stroke: var(--line); stroke-width: 1; }
.wealth-chart__zero { stroke: var(--ink-soft); stroke-width: 1.5; }
.wealth-chart__axis { fill: var(--muted); font-family: var(--font-display); font-size: 13px; }
/* Net-worth line coloured by sign: green where positive, red where negative. */
.wealth-chart__net { stroke-width: 2.5; fill: none; }
.wealth-chart__net--pos { stroke: #18a06b; }
.wealth-chart__net--neg { stroke: #e5484d; }
.wealth-chart__net-dot--pos { fill: #18a06b; }
.wealth-chart__net-dot--neg { fill: #e5484d; }
/* Period separators (e.g. tax / natural year boundaries). */
.wealth-chart__period { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
/* Secondary right-axis overlay line (e.g. a cumulative running total) — a strong blue, distinct from the magenta net bars and orange tax bars. */
.wealth-chart__sec { stroke: #2563eb; stroke-width: 2.5; fill: none; }
.wealth-chart__sec-dot { fill: #2563eb; }
.wealth-chart__swatch--sec { background: #2563eb; border-radius: 999px; height: 4px; width: 18px; }
/* Interactive bars: hover/click highlights an account and dims the rest, tying a bar to its legend entry. */
.wealth-chart__bar { cursor: pointer; transition: opacity .12s ease; }
.wealth-chart__bar--active { stroke: var(--ink); stroke-width: 1.5; }
.wealth-chart__bar--dim { opacity: .2; }
/* Goal target lines: a light halo under a bold dashed coloured line keeps them legible over a busy stack. */
.wealth-chart__goal-halo { stroke: var(--paper); stroke-width: 5; stroke-linecap: round; opacity: .65; fill: none; }
.wealth-chart__goal { stroke-width: 2.5; stroke-dasharray: 8 5; stroke-linecap: round; fill: none; }
.wealth-chart__goal--ok { stroke: #16a34a; }
.wealth-chart__goal--fail { stroke: #dc2626; }
.wealth-chart__goal-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: help; }
.wealth-chart__goal-label { fill: var(--ink); font-family: var(--font-display); font-size: 10px; font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
/* Zoom toolbar above the chart + the drag-to-select band. */
.wealth-chart__toolbar { display: flex; align-items: center; gap: 12px; min-height: 1.6rem; margin-bottom: 4px; }
.wealth-chart__zoom-hint, .wealth-chart__zoom-label { font-size: .76rem; color: var(--muted); }
.wealth-chart__reset { font-size: .76rem; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; cursor: pointer; }
.wealth-chart__reset:hover { background: var(--paper); }
.bz-chart-zoomsel { position: fixed; z-index: 60; background: color-mix(in srgb, var(--ink) 14%, transparent); border-left: 1px solid var(--ink-soft); border-right: 1px solid var(--ink-soft); pointer-events: none; }
/* Small segmented toggle (e.g. calendar-year vs tax-year on the income chart). */
.seg-toggle { display: inline-flex; gap: 4px; }

.wealth-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.wealth-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); cursor: pointer; transition: opacity .12s ease; border-radius: 6px; padding: 2px 6px; }
.wealth-chart__legend-item--active { font-weight: 700; color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.wealth-chart__legend-item--dim { opacity: .4; }
.wealth-chart__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.wealth-chart__swatch--net { background: linear-gradient(90deg, #18a06b, #e5484d); border-radius: 999px; height: 4px; width: 18px; }
.wealth-chart__legend-tag { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

/* A compact stat shown inline in a section header (e.g. an account's running total on its details page). */
.stat.stat--inline { background: none; border: none; box-shadow: none; padding: 0; text-align: right; }
.stat--inline .stat__value { font-size: 1.2rem; }

/* Account directory: a type page (Investments/Pensions) listing its accounts, each linking to its details page. */
.account-dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.account-dir__item {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.account-dir__item:hover { border-color: var(--brand); box-shadow: var(--shadow-s); }
.account-dir__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.account-dir__meta { font-size: .82rem; color: var(--muted); }

/* Dashboard quick navigation to the main areas. */
.quick-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.quick-nav__item {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.quick-nav__item:hover { border-color: var(--brand); color: var(--brand-deep); box-shadow: var(--shadow-s); }
.quick-nav__ico { font-size: 1.2rem; }

/* Checkbox field: don't stretch the box to full width like text inputs. */
.field--check input { width: auto; }

.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-head__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-page__link { font-family: var(--font-display); font-size: .9rem; color: var(--ink-soft); }

/* Overflow nav: a native <details> disclosure, themed to match the ghost buttons. */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { border-color: var(--ink-soft); }
.nav-menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  display: grid; gap: 2px; min-width: 200px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.nav-menu__group { font-family: var(--font-display); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 8px 10px 2px; }
.nav-menu__panel button {
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: .92rem; color: var(--ink);
  padding: 8px 10px; border-radius: 8px;
}
.nav-menu__panel button:hover { background: var(--line); }
.nav-menu__panel .nav-menu__signout { color: var(--accent-orange); }

/* Spinners + progress (reuses the sync-spin keyframes). */
.spinner { display: inline-block; width: 18px; height: 18px; flex: none; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: sync-spin .8s linear infinite; }
.spinner--lg { width: 30px; height: 30px; border-width: 3px; }
.working { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--ink-soft); font-size: .95rem; }
.loading-panel { display: flex; align-items: center; gap: 16px; padding: 24px 4px; }
.loading-panel--center { justify-content: center; text-align: left; padding: 28px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.loading-panel__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0; }
.loading-panel__status { color: var(--muted); margin: 3px 0 0; font-size: .92rem; }

/* Out-of-band upgrade note — present but visibly secondary, not a central message. */
.upgrade-note { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 4px 0 16px; }
.upgrade-note a { color: var(--brand-deep); font-weight: 600; }
.upgrade-note__icon { color: var(--secondary); }

/* Synapse billing cadences — each at an introductory price anchored against the struck-through regular price. */
.plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 8px; }
.plan-option {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 20px;
}
.plan-option--best { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-s); }
.plan-option__flag {
  position: absolute; top: -11px; right: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--secondary), var(--brand)); padding: 4px 10px; border-radius: 999px;
}
.plan-option__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.plan-option__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.plan-option__intro { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; }
.plan-option__was { color: var(--muted); text-decoration: line-through; font-size: .95rem; }
.plan-option__save {
  align-self: flex-start; font-size: .78rem; font-weight: 600; color: var(--brand-deep);
  background: var(--brand-tint); border-radius: 999px; padding: 3px 10px;
}
.plan-option .btn { margin-top: 6px; justify-content: center; }
@media (max-width: 560px) { .plan-options { grid-template-columns: 1fr; } }

/* ----------------------------- Synapse: top-bar CTA + member badge -----------------------------
   "Synapse" is the paid tier. The brand hue is magenta (--brand) deepening into violet (--secondary) —
   a neural gradient that reads as premium. The CTA invites the upgrade; the member badge confirms it,
   with a gently shimmering crest. Both sit in the top bar and route to /upgrade. */
.synapse-cta, .synapse-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: -.01em;
  color: #fff; padding: 7px 15px; border: 0; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.synapse-cta:focus-visible, .synapse-badge:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Upgrade CTA — a bold, attention-drawing gradient. */
.synapse-cta {
  background: linear-gradient(100deg, var(--secondary), var(--brand));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 34%, transparent);
}
.synapse-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 16px color-mix(in srgb, var(--brand) 46%, transparent); }
.synapse-cta__spark { font-size: .95em; line-height: 1; }

/* Member badge — same family with a slow shimmer and a twinkling crest, signalling "you're in". */
.synapse-badge {
  background: linear-gradient(100deg, var(--secondary), var(--brand) 60%, var(--accent-orange));
  background-size: 200% 100%;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--secondary) 30%, transparent);
  animation: synapse-shimmer 7s ease-in-out infinite;
}
.synapse-badge:hover { transform: translateY(-1px); filter: brightness(1.05); }
.synapse-badge__spark { font-size: .95em; line-height: 1; animation: synapse-twinkle 2.6s ease-in-out infinite; }

@keyframes synapse-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes synapse-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .synapse-badge, .synapse-badge__spark { animation: none; } }

/* Synapse membership hero on the /upgrade page. */
.synapse-member {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--secondary) 14%, var(--white)), color-mix(in srgb, var(--brand) 14%, var(--white)));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: var(--radius-s); padding: 18px 20px; margin-bottom: 18px;
}
.synapse-member__crest {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--secondary), var(--brand));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand) 35%, transparent);
}
.synapse-member__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: 0; }
.synapse-member__title strong { color: var(--brand-deep); }
.synapse-member__sub { font-size: .9rem; color: var(--ink-soft); margin: 2px 0 0; }
.synapse-member__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.synapse-member__note { font-size: .84rem; color: var(--muted); }

.history-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.history-table th { text-align: left; font-family: var(--font-display); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.history-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.history-amount { font-family: var(--font-display); font-weight: 600; color: var(--ink); white-space: nowrap; }
.history-nowrap { white-space: nowrap; }
/* Dense grids: never wrap a cell onto a second line — keep rows scannable and use the full width. */
.history-table td, .history-table th { white-space: nowrap; }
/* Long free-text cells (Source, Description, Notes, Vendor, names): show what fits, ellipsis the rest, full text on hover via title. */
.cell-ellipsis { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.cell-ellipsis--wide { max-width: 40ch; }
.history-delta { font-family: var(--font-display); font-weight: 600; }
.history-delta.up { color: #18a06b; }
.history-delta.down { color: var(--accent-coral); }
.history-rate { color: var(--muted); font-weight: 500; font-size: .82rem; cursor: help; }
/* Snapshots row actions: keep the "N missing" chip clear of the Details/Edit links with comfortable spacing. */
.history-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: nowrap; }
.history-actions .app-page__link { white-space: nowrap; }
.history-muted { color: var(--muted); }
.app-page__link:hover { color: var(--brand-deep); }

.networth { display: flex; flex-direction: column; gap: 4px; }
/* Header row: net-worth figures on the left, the Total-tax tile pushed to the right to save vertical space. */
.networth__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.networth__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.networth__tax { flex: 0 0 auto; align-self: flex-start; }
.networth__label { font-family: var(--font-display); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.networth__totals { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.networth__line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.networth__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.6rem); color: var(--ink); letter-spacing: -.02em; }
/* Convention: positive net worth reads green, negative reads red. */
.networth__value.up { color: #18a06b; }
.networth__value.down { color: var(--accent-coral); }
.networth__delta { font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.networth__delta.up { color: #18a06b; }
.networth__delta.down { color: var(--accent-coral); }
/* No change vs the previous value: a neutral dash in the plain text colour — neither up (green) nor down (red). */
.networth__delta.flat, .history-delta.flat, .history-amount.flat, .stat__value.flat, .stat__sub.flat { color: var(--muted); }

/* Definition-list used in detail pop-ups (e.g. an income entry's full breakdown). */
.detail-list { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.detail-list__row { display: flex; justify-content: space-between; gap: 16px; }
.detail-list__row dt { color: var(--muted); margin: 0; }
.detail-list__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.detail-list__row--sub dt, .detail-list__row--sub dd { font-size: .85rem; color: var(--muted); }
.networth__note { font-size: .84rem; color: var(--muted); }
.networth__empty p { margin-top: 6px; }
.networth__alt { font-family: var(--font-display); font-size: .9rem; color: var(--ink-soft); }
.networth__toggle { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--muted); cursor: pointer; margin-top: 2px; }
.networth__toggle input { accent-color: var(--brand); }
.networth__lifetime { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.stat--sm { background: none; border: none; box-shadow: none; padding: 0; }
.stat--sm .stat__label { font-size: .68rem; }
.stat--sm .stat__value { font-size: 1rem; margin-top: 2px; }
.stat--sm .stat__sub { font-size: .75rem; margin-top: 2px; }

.capture-group { margin-bottom: 18px; }
.capture-group h3 { margin-bottom: 14px; }
.capture-rows { display: grid; gap: 14px; }
.capture-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.capture-row__label { display: flex; flex-direction: column; flex: 1 1 180px; }
.capture-row__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.capture-row__meta { font-size: .82rem; color: var(--muted); }
.capture-row__amount { display: flex; align-items: center; gap: 8px; }
.capture-row__amount .field__input { width: 140px; text-align: right; }
.capture-row__ccy { font-family: var(--font-display); font-size: .85rem; color: var(--muted); width: 38px; }
.capture-error { color: var(--accent-coral); font-size: .9rem; margin-right: 12px; }
.capture-saved { color: var(--muted); font-size: .85rem; margin-right: 12px; }

.version-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.version-card__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.version-card__meta { font-size: .82rem; color: var(--muted); }

/* ----------------------------- Income form ----------------------------- */
.income-form { margin-bottom: 8px; }
.income-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 16px; }
.bigtkt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Big-ticket item name rendered as the link into its details page. */
.bigtkt-name-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--brand-deep); cursor: pointer; text-align: left; }
.bigtkt-name-link:hover { text-decoration: underline; }
/* Collapsible secondary breakdown (trip spend by tag). */
.bigtkt-tag-breakdown > summary { cursor: pointer; list-style: revert; }
.bigtkt-tag-breakdown > summary h2 { margin: 0; }
/* Per-trip tag statistics table on the details page. */
.bigtkt-tag-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.bigtkt-tag-table th, .bigtkt-tag-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.bigtkt-tag-table th.num, .bigtkt-tag-table td.num { text-align: right; }

/* ----------------------------- Budgets ----------------------------- */
/* Spend-vs-cap progress bar: a thin track that fills green within budget, coral once over. */
.budget-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.budget-bar--lg { height: 10px; margin: 10px 0 4px; }
.budget-bar__fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width .2s ease; }
.budget-bar__fill--over { background: var(--coral, #e2585b); }
.account-group--locked { opacity: .6; }
.budget-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.field__input--inline { width: auto; max-width: 9rem; display: inline-block; }

/* ----------------------------- Stat tiles (track-page headline aggregates) ----------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 4px 0 4px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; box-shadow: var(--shadow-s); }
.stat__label { font-family: var(--font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--ink); letter-spacing: -.02em; margin-top: 4px; }
.stat__value.up { color: #18a06b; }
.stat__value.down { color: var(--accent-coral); }
.stat__sub { font-size: .82rem; color: var(--muted); margin-top: 4px; }
/* Per-line breakdown (taxes / deductions) listed inside a stat card. */
.stat__breakdown { display: flex; flex-wrap: wrap; column-gap: 4px; }
.stat__sub.up { color: #18a06b; }
.stat__sub.down { color: var(--accent-coral); }

/* A secondary, lighter heading for the "the entries themselves" sections that now sit below the stats. */
.section-secondary > h2 { color: var(--ink-soft); }

/* Inline edit row + per-row actions in the recorded-entries tables. */
.entry-actions { display: flex; gap: 6px; white-space: nowrap; }
.entry-edit-row .field__input { margin: 2px 0; padding: 6px 8px; font-size: .9rem; }
.entry-edit-row .income-tax__row { margin: 4px 0; }

/* ----------------------------- Generic two-column form grid ----------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; margin-bottom: 16px; }
/* Bare <label>text <input></label> rows render as a proper stacked field (label over a full-width control). */
.form-grid > label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); }
.form-grid > label > input,
.form-grid > label > select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; font-weight: 400;
  padding: 10px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink);
}
.form-grid > label > input:focus-visible,
.form-grid > label > select:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* Segmented choice — a friendlier, tappable alternative to a dropdown for a small set of options. */
.segmented { display: flex; flex-direction: column; gap: 6px; }
.segmented__label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); }
.segmented__options { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented__option {
  flex: 1 1 160px; display: block; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 10px 13px; background: var(--paper);
}
.segmented__option:hover { border-color: var(--brand); }
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.segmented__name { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.segmented__hint { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ----------------------------- Setup wizard ----------------------------- */
.setup-card { margin-top: 8px; }
.setup-card__nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.setup-optional { font-family: var(--font-display); font-weight: 500; font-size: .8rem; color: var(--muted); }
.setup-import-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.field { display: block; margin: 16px 0; }
.field__label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
}
.field__input--short { width: 90px; }
.field__input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.repeat-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }

/* ----------------------------- Import ----------------------------- */
.import-prompt, .import-paste { margin-bottom: 16px; }
.import-prompt__text, .import-paste__text {
  width: 100%;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .85rem;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.import-paste__file { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.import-paste__filename { font-size: .85rem; color: var(--muted); }
.account-cell { display: inline-flex; align-items: center; gap: 8px; }

/* Document-attachments panel (reusable across item screens). */
.doc-attach { margin-top: 14px; }
.doc-attach__panel { display: grid; gap: 14px; }
.doc-attach__option { display: grid; gap: 6px; }
.doc-attach__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc-attach__row .field__input { flex: 1 1 12rem; }

/* Import preview: the "new accounts / categories" lists. A real bulk import can introduce dozens of each, so they
   read as a wrapping multi-column list rather than one long comma-separated run. */
.import-newlist__title { margin: 14px 0 6px; font-size: .95rem; }
.import-newlist { margin: 0 0 8px; padding-left: 18px; columns: 2; column-gap: 28px; }
@media (max-width: 640px) { .import-newlist { columns: 1; } }
.import-newlist li { break-inside: avoid; margin-bottom: 2px; }
.import-csv-help { white-space: pre-wrap; font-size: .8rem; margin-top: 8px; }
.import-row { margin-bottom: 14px; }
.import-row__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-row__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.import-row__meta { font-size: .82rem; color: var(--muted); }
.import-row__warn { color: var(--accent-coral); font-size: .85rem; margin: 8px 0 0; }
.import-row__new { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; margin-top: 4px; }
.import-row__check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9rem; color: var(--ink); }
.import-cat { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.import-cat__raw { font-family: var(--font-display); font-weight: 600; color: var(--ink); min-width: 140px; }
.import-cat .field__input { flex: 1 1 240px; }
.import-done__stats { margin: 10px 0 0; padding-left: 20px; }
.import-done__stats li { margin: 4px 0; }

/* ----------------------------- Ledger ----------------------------- */
.ledger-filter { margin: 0; min-width: 200px; }
.ledger-actions { display: flex; gap: 6px; white-space: nowrap; }
.ledger-edit-row .field__input { margin: 2px 0; padding: 6px 8px; font-size: .9rem; }
.history-amount.up { color: #18a06b; }

/* ----------------------------- Owner-only Usage screen ----------------------------- */
.usage-cards { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 26px; }
.usage-card { flex: 1 1 180px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.usage-card__n { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--brand-deep); line-height: 1; }
.usage-card__l { color: var(--muted); font-size: .86rem; margin-top: 8px; }
.usage-h2 { font-size: 1.1rem; margin: 8px 0 12px; }
.usage-table { width: 100%; border-collapse: collapse; }
.usage-table th, .usage-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.usage-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.history-amount.down { color: var(--accent-coral); }

/* ----------------------------- Income taxes ----------------------------- */
.income-tax { margin-top: 8px; }
.income-tax__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.income-tax__row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.income-tax__row .field__input { flex: 1 1 auto; }
.field__input--num { flex: 0 0 130px; text-align: right; }
.income-tax__pct { flex: 0 0 60px; text-align: right; color: var(--muted); font-family: var(--font-display); }

/* ----------------------------- Review ----------------------------- */
.review-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.review-item__body { display: flex; flex-direction: column; gap: 2px; }
.review-item__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.review-item__detail { font-size: .86rem; color: var(--muted); }
.repeat-row .field__input { flex: 1; }
.account-draft { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.account-draft .field__input { flex: 1 1 120px; }
.review { list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.review strong { font-family: var(--font-display); color: var(--ink); }
.spacer { flex: 1; }

/* ----------------------------- Welcome ----------------------------- */
.welcome { max-width: 980px; margin-inline: auto; padding: 48px 24px 72px; }

.welcome__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; }
.welcome__bar img { width: 42px; height: 42px; }
.welcome__bar .name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em; color: var(--ink); }
.welcome__bar .spacer { flex: 1; }

.welcome__hero { text-align: center; margin-bottom: 44px; }
.welcome__hero h1 { margin-bottom: 16px; }
.welcome__hero .lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 60ch; margin-inline: auto; }

.welcome__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
.welcome__feature .ico { font-size: 1.8rem; margin-bottom: 10px; display: block; }
.welcome__feature h3 { font-size: 1.12rem; margin-bottom: 6px; }
.welcome__feature p { font-size: .96rem; margin: 0; }

.welcome__promise { max-width: 640px; margin: 0 auto; text-align: left; }
.welcome__promise h2 { margin-bottom: 10px; }
.welcome__promise p { margin: 0 0 10px; color: var(--ink-soft); }
.welcome__promise p:last-child { margin-bottom: 0; }
.welcome__footnote { text-align: center; color: var(--muted); font-size: .84rem; margin: 28px auto 0; max-width: 560px; }

.loading-bar { height: 6px; border-radius: 999px; background: var(--line); margin-top: 10px; overflow: hidden; }
.loading-bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .2s ease; }

.welcome__signin { display: grid; gap: 14px; max-width: 380px; margin: 32px auto 0; }
.welcome__signin .tcc-btn { width: 100%; }
.welcome__signin-note { text-align: center; color: var(--muted); font-size: .86rem; margin-top: 4px; }

/* "Use your own Azure / S3 storage" — collapsed by default; each flavour reveals a small credential form. */
.welcome__advanced { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.welcome__advanced > summary { cursor: pointer; text-align: center; color: var(--muted); font-size: .86rem; }
.welcome__connect { display: grid; gap: 12px; margin-top: 12px; }
.welcome__connect-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.welcome__form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.welcome__form label { display: grid; gap: 4px; font-size: .82rem; color: var(--muted); text-align: left; }
.welcome__form input {
  font: inherit; color: inherit; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--white);
}
.welcome__form input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.welcome__privacy { margin: 36px auto 0; max-width: 640px; }

@media (max-width: 760px) {
  .welcome__cards { grid-template-columns: 1fr; }
}

/* ----------------------------- Recovery (error boundary) ----------------------------- */
.recovery { display: grid; place-items: center; min-height: 100vh; padding: 32px 24px; }
.recovery__card {
  max-width: 520px; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-s); padding: 36px 32px;
}
.recovery__logo { width: 52px; height: 52px; margin-bottom: 8px; }
.recovery__title { margin-bottom: 10px; }
.recovery__lead { color: var(--ink-soft); margin: 0 0 22px; }
.recovery__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.recovery__hint { font-size: .84rem; color: var(--muted); margin: 20px 0 0; }