/* ============================================================
   Brainzie Snugstar — 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));

  /* Controlled error experience (ErrorView / AppErrorBoundary). Mapped to the brand neutrals, so the dark theme's
     --ink/--white overrides flip it automatically; the header keeps white text on the deep brand in both. */
  --tcc-error-header-bg: var(--brand-deep);
  --tcc-error-header-fg: #ffffff;
  --tcc-error-body-bg: var(--white);
  --tcc-error-body-fg: var(--ink);
}

/* ============================================================
   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 team.core's teamcore-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: color-mix(in srgb, var(--brand) 24%, transparent);

    --tcc-btn-ghost-fg: var(--ink);
    /* The body team.core gives a ghost button defaults to a near-white #f9fafb, so overriding only the foreground
       paints light ink on a white pill in dark mode — the button reads as disabled. Override both or neither. */
    --tcc-btn-ghost-bg: rgba(255, 255, 255, .04);
    --tcc-btn-ghost-bg-hover: rgba(255, 255, 255, .10);
    --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);
  /* Keep in sync with the system-preference block above: a foreground-only override is light ink on a white pill. */
  --tcc-btn-ghost-bg: rgba(255, 255, 255, .04);
  --tcc-btn-ghost-bg-hover: rgba(255, 255, 255, .10);
  --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; }
/* The slim bar at the top of every signed-in page: the account menu at its right edge, where every app keeps it. */
.app-topbar { display: flex; justify-content: flex-end; align-items: center; padding: 8px 16px 0; }

/* Always-visible (but unobtrusive) legal links, shown on every page below the content. */
.app-legal { margin: 26px auto 14px; text-align: center; font-size: .82rem; color: var(--ink-soft); }
.app-legal a { color: var(--ink-soft); text-decoration: none; }
.app-legal a:hover { color: var(--brand); text-decoration: underline; }
.app-legal__sep { margin: 0 8px; opacity: .6; }

/* ----------------------------- 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: var(--tcc-shell-banners-height, 0px); 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; }

/* 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; }

@keyframes sync-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.app-page__section { margin-top: 28px; }
.app-page__stepper { margin: 24px 0 28px; }

.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; }
/* 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; }
.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: 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; }
.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); }
.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; }

/* ----------------------------- 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; }
.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); }

/* ----------------------------- 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; }
.spacer { flex: 1; }

/* ----------------------------- Buttons (starter shell) ----------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: 12px 22px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn--ghost { background: transparent; color: var(--ink-soft); }
.btn--ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); }

/* ----------------------------- Welcome ----------------------------- */
.welcome { max-width: 980px; margin-inline: auto; padding: 48px 24px 72px; display: grid; place-items: center; min-height: 100vh; }
.welcome__card { width: min(440px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); padding: 36px 32px; }
.welcome__card h1 { margin-bottom: 12px; }
.welcome__lead { color: var(--ink-soft); margin-bottom: 24px; }
.welcome__error { color: var(--accent-coral); margin-bottom: 14px; font-size: .9rem; }
.welcome__actions { display: grid; gap: 12px; }
.welcome__actions .btn { width: 100%; }
.welcome__note { color: var(--muted); font-size: .82rem; margin-top: 18px; text-align: center; }
.welcome__legal { margin-top: 14px; font-size: .84rem; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.welcome__legal a { color: var(--brand); font-weight: 600; }
.welcome__legal span { color: var(--muted); }
.welcome--legacy { 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; }
}

/* The old .recovery* error-boundary card was replaced by team.core's AppErrorBoundary + ErrorView, themed via the
   --tcc-error-* tokens declared at the top of this file. */