/* EverGrow's app layer, on top of design-system/organic/styles.css.
   Everything here takes its color, type, spacing, radius and shadow from the
   Organic tokens. Page-specific styles live in css/pages/<page>.css and are
   scoped under .page-<id>. */

:root {
  /* Chart roles, mapped onto Organic ramps. Income/expense pair checked with the
     dataviz validator: CVD ΔE 10.7, normal-vision ΔE 19.8 on the card surface. */
  --chart-income: var(--color-accent-2-700);
  --chart-expense: var(--color-accent);
  --chart-current: var(--color-accent);
  --chart-previous: var(--color-neutral-700);
  --chart-net: var(--color-text);
  --chart-networth: var(--color-accent-2-700);
  --chart-grid: color-mix(in srgb, var(--color-text) 10%, transparent);
  --chart-axis: color-mix(in srgb, var(--color-text) 58%, transparent);

  /* Text colors for money meaning. */
  --positive: var(--color-accent-2-700);
  --negative: var(--color-accent-700);
  --muted: color-mix(in srgb, var(--color-text) 68%, transparent); /* >= 4.5:1 on the sand card surface */

  /* Surfaces inside cards (rows on hover, nested panels). */
  --hover: color-mix(in srgb, var(--color-text) 6%, transparent);
  --press: color-mix(in srgb, var(--color-text) 11%, transparent);
  --inset: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface));

  --sidebar-w: 232px;
  --sidebar-w-collapsed: 76px;
}

body { min-height: 100vh; }
/* `hidden` always wins, even over component classes that set display (.btn, .tag …) */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.icon, svg.lucide { flex: none; display: inline-block; vertical-align: middle; }

/* ── shell ────────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
}
.sb-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.sb-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-right: var(--space-3); border-radius: 999px;
  color: var(--color-text); text-decoration: none;
}
.sb-mark {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
}
.sb-brand:hover .sb-mark { background: var(--color-accent-600); }
.sb-brand:active .sb-mark { background: var(--color-accent-700); }
/* The wordmark: Caprasimo, the system's only display voice. */
.sb-wordmark {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: 1; letter-spacing: -0.01em; color: var(--color-text);
}
.sb-tools { display: flex; gap: 2px; margin-left: calc(-1 * var(--space-1)); }
.sb-tool { position: relative; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.sb-tool:hover { background: var(--hover); color: var(--color-text); }
.sb-tool:active { background: var(--press); }
.sb-dot {
  position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-bg);
}

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px 14px; border-radius: 999px;
  color: var(--color-text); text-decoration: none; font-size: 15px;
}
.sb-link .sb-icon { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.sb-link:hover { background: var(--hover); }
.sb-link:active { background: var(--press); }
.sb-link[aria-current='page'] { background: var(--color-surface); font-weight: 600; }
.sb-link[aria-current='page'] .sb-icon { color: var(--color-accent); }
.sb-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg); font-size: 11px; font-weight: 700;
}
.sb-badge[hidden], .sb-dot[hidden] { display: none; }

.sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.sb-sync {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 12px; color: var(--muted); text-align: left;
}
.sb-sync:hover { background: var(--hover); color: var(--color-text); }
.sb-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-2-600); box-shadow: 0 0 0 3px var(--color-accent-2-200); flex: none; margin-inline: 4px; }
.sb-sync:active { background: var(--press); }
.sb-sync-icon { margin-left: auto; opacity: 0; }
.sb-sync:hover .sb-sync-icon { opacity: 1; }
.sb-sync.is-syncing .sb-sync-icon { opacity: 1; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* sync states (§14.2): sage when healthy, terracotta when a bank needs attention, sand when idle */
.sb-sync.is-attention { color: var(--color-accent-700); font-weight: 600; }
.sb-sync.is-attention .sb-sync-dot { background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-200); }
.sb-sync.is-none .sb-sync-dot,
.sb-sync.is-stale .sb-sync-dot,
.sb-sync.is-off .sb-sync-dot { background: var(--color-neutral-500); box-shadow: 0 0 0 3px var(--color-neutral-200); }
.sb-sync.is-syncing .sb-sync-dot { background: var(--color-accent-2-500); }
/* demo pill */
.sb-sync.is-demo .sb-sync-dot { display: none; }
.sb-sync.is-demo .sb-sync-label,
.demo-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: calc(var(--space-1) / 2) var(--space-2); border-radius: 999px;
  background: var(--color-accent-2-100); color: var(--color-accent-2-800);
  font-size: 12px; font-weight: 600;
}
.sb-sync.is-demo:hover .sb-sync-label { background: var(--color-accent-2-200); }
.sb-link-quiet { font-size: 14px; }
.sb-user {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px 14px 6px 8px; border: 0; border-radius: 999px; background: none; cursor: pointer; text-align: left;
}
.sb-user:hover { background: var(--hover); }
.sb-user:active { background: var(--press); }
.sb-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-accent-2-200); color: var(--color-accent-2-800); font-size: 12px; font-weight: 700;
}
.sb-user-name { font-size: 14px; font-weight: 600; flex: 1; }

/* collapsed rail. Every control in it is at most 38px wide (the brand mark), so with the rail's
   padding they still fit when a short window gives the rail a classic ~15px vertical scrollbar:
   76 − 2 × 8.8 − 15 ≈ 43px. (The avatar button used to be 50px wide, which, with the scrollbar,
   put a horizontal scrollbar on the rail.) The demo state keeps its dot, so the sync control is
   never an empty pill. */
.app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
.app.is-collapsed .sidebar { padding-inline: var(--space-2); align-items: center; }
.app.is-collapsed .sb-top { align-items: center; }
.app.is-collapsed .sb-brand { padding-right: 0; }
.app.is-collapsed .sb-tools { flex-direction: column; margin-left: 0; }
.app.is-collapsed .sb-label, .app.is-collapsed .sb-badge,
.app.is-collapsed .sb-sync.is-demo .sb-sync-label { display: none; }
.app.is-collapsed .sb-link, .app.is-collapsed .sb-sync { padding: 10px; justify-content: center; }
.app.is-collapsed .sb-user { padding: var(--space-1); justify-content: center; }
.app.is-collapsed .sb-link { position: relative; }
.app.is-collapsed .sb-sync-icon { display: none; }
.app.is-collapsed .sb-sync.is-demo .sb-sync-dot { display: block; background: var(--color-accent-2-500); box-shadow: 0 0 0 3px var(--color-accent-2-200); }

.main { min-width: 0; padding: 0 var(--space-8) var(--space-8) var(--space-6); }

/* bare pages (welcome, log in, sign up, forgot password, connect): one column, no sidebar */
.app.is-bare, .app.is-bare.is-collapsed { grid-template-columns: minmax(0, 1fr); }
.app.is-bare .sidebar { display: none; }
.app.is-bare .main { padding: 0; min-height: 100vh; }

/* ── page header ──────────────────────────────────────────────────────── */
.page-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-6) 0 var(--space-4);
  background: var(--color-bg);
}
.ph-left { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; min-width: 0; }
.page-title { font-size: 28px; margin: 0; }
.ph-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vdiv { width: 1px; height: 24px; background: var(--color-divider); margin-inline: var(--space-1); }
.page-error { padding: var(--space-8) 0; }

/* boot problem (app.js): the data didn't load for a signed-in person. Full width, flush left. */
.boot-error {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  max-width: 560px; padding: calc(var(--space-8) * 2) var(--space-6) var(--space-8);
}
.boot-error-icon {
  width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent-100); color: var(--color-accent-700);
}
.boot-error .page-title { font-size: 34px; }
.boot-error-text { margin: 0 0 var(--space-2); font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 46ch; }

/* ── controls ─────────────────────────────────────────────────────────── */
.btn-sm { padding: 7px 15px; font-size: 13px; }
.btn-sm.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-icon.btn-secondary { border-color: var(--color-divider); }
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-secondary).btn-icon:hover { background: var(--hover); }

.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 13px; color: var(--color-text);
  padding: 7px 34px 7px 15px; min-height: 34px;
  background: transparent; border: 1px solid var(--color-divider); border-radius: 999px; cursor: pointer;
}
.select:hover { background: var(--hover); }
.select:active { background: var(--press); }
.select-chev { position: absolute; right: 12px; pointer-events: none; color: var(--muted); }
.select option, .select optgroup { background: var(--color-bg); color: var(--color-text); }

.seg-sm .seg-opt { padding: 6px 13px; font-size: 13px; }
.seg-opt:not(:has(input:checked)):active { background: var(--press); }

.tabs { display: flex; gap: var(--space-1); }
.tab {
  border: 0; background: none; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; font-size: 14px; color: var(--muted);
}
.tab:hover { background: var(--hover); color: var(--color-text); }
.tab:active { background: var(--press); }
.tab[aria-selected='true'] { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }

/* ── cards & layout ───────────────────────────────────────────────────── */
.widget { padding: var(--space-4) var(--space-6) var(--space-6); gap: var(--space-3); min-width: 0; }
.widget-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 34px; }
.widget-heading { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.widget-title { font-size: 19px; margin: 0; }
.widget-sub { font-size: 13px; color: var(--muted); }
.widget-right { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.widget-body { min-width: 0; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.aside-sticky { position: sticky; top: 96px; }

/* ── data atoms ───────────────────────────────────────────────────────── */
.avatar {
  width: var(--avatar-size, 28px); height: var(--avatar-size, 28px); flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: calc(var(--avatar-size, 28px) * 0.42); font-weight: 700; line-height: 1;
}
.avatar-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.avatar-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.avatar-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }

.cat { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cat-emoji { font-size: 15px; line-height: 1; }
.cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct { white-space: nowrap; }
.amt { font-weight: 600; white-space: nowrap; }
.amt-pos { color: var(--positive); }
.amt-neg { color: var(--negative); }

/* compact transaction row */
.tx-row {
  width: 100%; display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  padding: 9px var(--space-2); margin: 0 calc(-1 * var(--space-2)); width: calc(100% + 2 * var(--space-2));
  border: 0; border-radius: var(--radius-md); background: none; cursor: pointer; text-align: left; font-size: 14px;
}
.tx-row:hover { background: var(--hover); }
.tx-row:active { background: var(--press); }
.tx-main { display: flex; flex-direction: column; min-width: 0; }
.tx-merchant { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-meta { font-size: 12px; color: var(--muted); }
.tx-cat { min-width: 0; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.tx-amt { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: end; }
.tx-chev { color: var(--muted); }

/* progress / meter: the track is a light step of the fill's own ramp */
.progress { position: relative; height: 8px; border-radius: 999px; }
.progress-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; min-width: 0; }
.progress-ok { background: var(--color-accent-2-200); }
.progress-ok .progress-fill { background: var(--color-accent-2-600); }
.progress-over { background: var(--color-accent-200); }
.progress-over .progress-fill { background: var(--color-accent); }
.progress-neutral { background: var(--color-neutral-200); }
.progress-neutral .progress-fill { background: var(--color-neutral-600); }
.progress-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--color-text); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); padding: var(--space-8) var(--space-4); }
.empty-icon { color: var(--color-neutral-600); margin-bottom: var(--space-2); }
.empty-title { font-weight: 600; margin: 0; }
.empty-body { margin: 0; font-size: 13px; color: var(--muted); max-width: 40ch; }

/* ── charts ───────────────────────────────────────────────────────────── */
.chart { display: block; overflow: visible; font-family: var(--font-body); }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { fill: var(--chart-axis); font-size: 11px; }
.chart-axis.is-selected { fill: var(--color-text); font-weight: 700; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-line-projected { stroke-dasharray: 4 5; }
.chart-dot { stroke: var(--color-surface); stroke-width: 2; }
.chart-endlabel { fill: var(--color-text); font-size: 12px; font-weight: 700; }
.chart-crosshair { stroke: color-mix(in srgb, var(--color-text) 35%, transparent); stroke-width: 1; }
.chart-divider { stroke: var(--color-divider); stroke-width: 1; }
.chart-hit { fill: transparent; cursor: crosshair; outline: none; }
.chart-hit:focus-visible { stroke: var(--color-accent); stroke-width: 2; }
.bar-hit { cursor: pointer; }
.bar-sel { fill: transparent; }
.bar-slot.is-hover .bar-sel { fill: color-mix(in srgb, var(--color-text) 4%, transparent); }
.bar-slot.is-selected .bar-sel { fill: color-mix(in srgb, var(--color-text) 8%, transparent); }
.sparkline { display: block; }

.chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); font-size: 12px; color: var(--muted); margin-top: var(--space-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-key-line { width: 14px; height: 3px; border-radius: 2px; }
.legend-key-box { width: 10px; height: 10px; border-radius: 3px; }

.chart-tip {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; min-width: 150px; max-width: 280px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  box-shadow: var(--shadow-md); font-size: 12px;
}
.chart-tip[hidden] { display: none; }
.tip-title { font-size: 11px; opacity: 0.75; margin-bottom: 5px; }
.tip-row { display: flex; align-items: center; gap: 8px; line-height: 1.7; }
.tip-key { flex: none; }
.tip-key-line { width: 12px; height: 3px; border-radius: 2px; }
.tip-key-box { width: 10px; height: 10px; border-radius: 3px; }
.tip-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.tip-label { opacity: 0.75; }

/* ── overlays ─────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--color-neutral-900) 40%, transparent); animation: fade-in 0.15s ease-out; }
.drawer {
  position: fixed; z-index: 51; top: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  width: min(480px, calc(100vw - 2 * var(--space-3)));
  display: flex; flex-direction: column;
  background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  outline: none; animation: slide-in 0.2s ease-out;
}
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-4); }
.drawer-title { font-size: 22px; margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 var(--space-6) var(--space-6); }
.drawer-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

.dialog-backdrop { z-index: 50; animation: fade-in 0.15s ease-out; }
/* A dialog taller than the window keeps its title and buttons in place and scrolls only its body,
   inside the dialog's padding (never along the rounded edge). The scrollbar takes its colors from
   the ramps; scrollbar-color is inherited, so lists that scroll inside a dialog match. */
.dialog {
  outline: none; max-height: calc(100vh - 2 * var(--space-6)); overflow-y: auto;
  scrollbar-color: var(--color-neutral-500) transparent;
}
.dialog-head, .dialog-actions { flex: none; }
.dialog-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  /* room inside the scroll box for focus rings (2px + 2px offset), without moving the content */
  padding: var(--space-1); margin: calc(-1 * var(--space-1));
}
.dialog-wide { width: min(640px, 100%); }
/* The system dims dialog copy to 85%; dialogs that hold controls stay at full strength. */
.dialog-body:has(input, select, textarea, button, a) { opacity: 1; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.menu-catcher { position: fixed; inset: 0; z-index: 60; }
.menu, .popover {
  position: fixed; z-index: 61; max-height: 70vh; overflow-y: auto;
  background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  outline: none; animation: fade-in 0.12s ease-out;
}
.menu { padding: var(--space-2); }
.popover { padding: var(--space-4); }
.menu-heading { padding: 6px 12px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.menu-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: 8px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 14px; text-align: left; white-space: nowrap;
}
.menu-item:hover { background: var(--color-accent-100); }
.menu-item:active { background: var(--color-accent-200); }
.menu-check { margin-left: auto; color: var(--color-accent); }
.menu-divider { height: 1px; margin: var(--space-1) var(--space-2); background: var(--color-divider); }

.toast {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 120;
  padding: 10px 18px; border-radius: 999px; font-size: 14px;
  background: var(--color-neutral-900); color: var(--color-neutral-100); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
}
.toast.is-in { opacity: 1; transform: none; }
.toast.has-action { display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-2); }
.toast-action {
  border: 0; cursor: pointer; padding: var(--space-1) var(--space-3); border-radius: 999px;
  background: transparent; color: var(--color-accent-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.toast-action:hover { background: color-mix(in srgb, var(--color-neutral-100) 12%, transparent); }
.toast-action:active { background: color-mix(in srgb, var(--color-neutral-100) 20%, transparent); }
.toast-action:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }

/* destructive button (confirm dialogs) */
.btn-danger { background: var(--color-accent-700); color: var(--color-bg); }
.btn-danger:hover { background: var(--color-accent-800); }
.btn-danger:active { background: var(--color-accent-900); }
.confirm-body p:last-child { margin-bottom: 0; }

/* ── switch: a native checkbox drawn as a toggle (role="switch") ──────── */
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: var(--color-neutral-300); transition: background 0.15s;
}
.switch::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-neutral-100); box-shadow: var(--shadow-sm);
  transition: transform 0.15s, width 0.15s;
}
.switch:checked { background: var(--color-accent); }
.switch:checked::before { transform: translateX(16px); }
.switch:hover { background: var(--color-neutral-400); }
.switch:checked:hover { background: var(--color-accent-600); }
.switch:active::before { width: 19px; }
.switch:checked:active { background: var(--color-accent-700); }
.switch:checked:active::before { transform: translateX(13px); }
.switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* a muted line under a field (auth-layout.js fieldHTML's `hint`) */
.field-hint { margin: var(--space-1) 0 0 var(--space-4); font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ── bank connections: reconnect banner, keys banner, connect card, "Not in your numbers" ── */
.eg-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-accent-100); color: var(--color-accent-900);
}
.eg-banner-icon { flex: none; display: inline-flex; padding-top: var(--space-1); color: var(--color-accent-700); }
.eg-banner-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.eg-banner-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: 14px; }
.eg-banner-text strong { font-weight: 700; }
.eg-banner-more { font-size: 13px; color: var(--color-accent-800); }
.eg-banner-row .btn { flex: none; }

.eg-connect-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-6); margin-bottom: var(--space-4);
}
.eg-connect-icon {
  width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent-2-100); color: var(--color-accent-2-700);
}
.eg-connect-text { flex: 1; min-width: 220px; }
.eg-connect-title { font-size: 21px; margin: 0 0 var(--space-1); }
.eg-connect-body { margin: 0; font-size: 14px; color: var(--muted); max-width: 52ch; }

.eg-testconn { padding: var(--space-4) var(--space-6) var(--space-6); }
.eg-testconn-title { font-size: 17px; margin: 0; }
.eg-testconn-note { margin: var(--space-1) 0 var(--space-3); font-size: 13px; color: var(--muted); }
.eg-testconn-row {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); margin-inline: calc(-1 * var(--space-3)); border-radius: var(--radius-md);
}
.eg-testconn-row:hover { background: var(--hover); }
.eg-testconn-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.eg-testconn-sub { font-size: 12px; color: var(--muted); }

/* transaction drawer (tx-drawer.js) */
.txd-title { display: flex; align-items: center; gap: var(--space-3); }
.txd-link { font-size: 13px; }
.txd-amount { font-size: 34px; font-weight: 700; line-height: 1.1; margin-bottom: var(--space-1); }
.txd-meta { color: var(--muted); font-size: 14px; margin-bottom: var(--space-6); }
.txd-fields { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); }
.txd-field { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: 14px; }
.txd-field-stack { align-items: start; }
.txd-field dt { color: var(--muted); font-size: 13px; }
.txd-field dd { margin: 0; min-width: 0; }
.txd-field .select-wrap, .txd-field .select { width: 100%; }
.txd-field textarea.input { min-height: 72px; border-radius: var(--radius-md); background: var(--color-bg); }
.txd-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* search + notifications (app.js) */
.search-results { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-3); max-height: 360px; overflow-y: auto; }
.search-hit { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: 8px 10px; border-radius: 999px; color: inherit; text-decoration: none; font-size: 14px; }
.search-hit:hover { background: var(--color-accent-100); }
.search-hit .text-muted { font-size: 12px; }
.search-none { padding: var(--space-3); margin: 0; }
.notif-head { margin-bottom: var(--space-2); }
.notif {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3);
  padding: var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius-md);
  font-size: 13px; color: inherit; text-decoration: none;
}
.notif:hover { background: var(--color-accent-100); }
.notif:active { background: var(--color-accent-200); }
.notif-icon { color: var(--color-accent-700); margin-top: 2px; }
.notif-text { display: flex; flex-direction: column; min-width: 0; }
.notif-title { font-weight: 600; }
.notif-body { color: var(--muted); }
.notif-when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.notif-empty { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) 0; font-size: 14px; color: var(--muted); }
.notif-empty .icon, .notif-empty svg { color: var(--color-accent-2-700); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .with-aside { grid-template-columns: minmax(0, 1fr); }
  .aside-sticky { position: static; }
}
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 0 var(--space-4) var(--space-6); }
}
@media (max-width: 720px) {
  .app, .app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  .sidebar { padding-inline: var(--space-2); align-items: center; }
  .sb-top, .sb-tools { flex-direction: column; align-items: center; }
  .sb-tools { margin-left: 0; }
  .sb-brand { padding-right: 0; }
  /* .sidebar-scoped so they beat `svg.icon { display: inline-block }` (the chevron and refresh icons) */
  .sidebar .sb-label, .sidebar .sb-badge, .sidebar .sb-sync-icon, .sidebar .sb-sync.is-demo .sb-sync-label { display: none; }
  .eg-banner-row { align-items: flex-start; }
  .sb-link, .sb-sync { padding: 10px; justify-content: center; }
  .sb-user { padding: var(--space-1); justify-content: center; }
  .sidebar .sb-sync.is-demo .sb-sync-dot { display: block; background: var(--color-accent-2-500); box-shadow: 0 0 0 3px var(--color-accent-2-200); }
  .tx-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tx-row .tx-cat, .tx-row .tx-chev { display: none; }
}