/* Plot Money — feature styles (budget tools, targets, move log). Uses tokens from plot.css */

/* ── authentication & account ── */
/* top-anchored (not vertically centered) so content growth never re-centers/jumps */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 9vh 18px 48px;
  background: radial-gradient(900px 520px at 50% -12%, rgba(10,132,255,.09), transparent 62%), var(--canvas); }
.auth-shell { width: 408px; max-width: 100%; }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
.auth-logo .logo-text { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.auth-logo .logo-text .dot { color: var(--blue); }
.auth-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--sh-md); padding: 32px 30px; }
.auth-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--seg-trough); border-radius: var(--seg-radius); padding: 3px; }
.auth-seg-btn { display: block; text-align: center; text-decoration: none; border: none; background: transparent; padding: 9px; border-radius: 9px; font-family: var(--font-body); font-weight: 590; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.auth-seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }

/* single form; only the Name row collapses/expands so the button glides once */
.auth-entry-form { margin-top: 20px; }
.auth-entry-form .field { margin-bottom: 15px; }
.auth-entry-form .auth-submit { width: 100%; margin-top: 4px; }
.name-field {
  overflow: hidden;
  transition: height .34s var(--ease), opacity .24s var(--ease), margin-bottom .34s var(--ease);
}
.name-field.collapsed { opacity: 0; margin-bottom: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .name-field { transition: none; } }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: 24px; letter-spacing: -0.03em; }
.auth-head p { color: var(--ink-3); font-size: 14.5px; margin-top: 6px; }
.auth-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; margin: 0 auto 10px; }
.auth-icon svg { width: 25px; height: 25px; }
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-submit { justify-content: center; width: 100%; padding: 11px; font-size: 15px; margin-top: 4px; }
.auth-error { background: var(--red-soft); color: var(--red); border-radius: 11px; padding: 11px 14px; font-size: 13.5px; font-weight: 510; }
.auth-foot { text-align: center; margin-top: 20px; color: var(--ink-3); font-size: 14px; }
.auth-foot a, .auth-link-sm { color: var(--blue); font-weight: 590; }
.auth-link-sm { font-size: 12.5px; }
.field-hint { font-size: 12px; color: var(--ink-3); }
.auth-dev { margin-top: 18px; padding: 11px 13px; border-radius: 11px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); text-align: center; }
.auth-dev strong { color: var(--ink); }
.auth-code { text-align: center; font-family: var(--font-body); font-size: 22px; letter-spacing: .28em; }
.twofa-qr { display: grid; place-items: center; padding: 16px; background: #fff; border-radius: var(--radius); margin: 4px auto 14px; width: max-content; box-shadow: 0 0 0 1px var(--hair); }
.twofa-qr svg { width: 196px; height: 196px; }
.twofa-steps { margin: 0 0 16px 18px; color: var(--ink-2); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.twofa-secret { font-family: var(--font-body); background: var(--surface-2); padding: 4px 8px; border-radius: 7px; font-size: 13px; }
.backup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.backup-code { font-family: var(--font-body); background: var(--surface-2); border-radius: 9px; padding: 11px; text-align: center; font-size: 15px; letter-spacing: .05em; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv-k { color: var(--ink-3); }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--hair); }
.session-row:last-child { border-bottom: none; }
.session-agent { font-size: 13.5px; font-weight: 510; }
.session-sub { font-size: 12px; margin-top: 2px; }
.login-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.login-dot.ok { background: var(--green); }
.login-dot.bad { background: var(--red); }

/* plan & billing */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 11px; }
.plan-card.active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.plan-card.plus { background: linear-gradient(180deg, var(--blue-soft), transparent 70%); }
.plan-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.plan-price { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.plan-price span { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); margin: 0; }
.plan-feats li { padding-left: 18px; position: relative; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan-card .btn { margin-top: auto; justify-content: center; }
.sidebar-account { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; transition: background .15s; }
.sidebar-account:hover { background: var(--overlay-hover); }
.acct-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; background: linear-gradient(160deg, #42A1FF, #0A84FF); }
.acct-meta { flex: 1; min-width: 0; line-height: 1.25; }
.acct-email { display: block; font-size: 12.5px; font-weight: 590; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.acct-link { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ── toasts ── */
/* Bottom-right so toasts never cover the top-right action buttons (Add/Export/View).
   They slide up from the bottom; newest sits nearest the corner. */
.toast-container { position: fixed; bottom: 16px; right: 16px; z-index: 9998; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 11px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border: .5px solid var(--border); border-radius: 14px; box-shadow: var(--sh-md); padding: 12px 13px 12px 14px; min-width: 250px; max-width: 380px; transform: translateY(140%); opacity: 0; transition: transform .4s var(--ease), opacity .32s ease; }
.toast.in { transform: none; opacity: 1; }
.toast.out { transform: translateY(140%); opacity: 0; }
/* On phones the quick-add FAB sits bottom-right — move toasts to bottom-left so
   they don't cover it. */
@media (max-width: 860px), (pointer: coarse) {
  .toast-container { right: auto; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
}
.toast-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.toast-icon svg { width: 15px; height: 15px; }
.toast-success .toast-icon { background: var(--green-soft); color: var(--green); animation: toastpop .4s var(--ease); }
.toast-error .toast-icon { background: var(--red-soft); color: var(--red); }
.toast-info .toast-icon { background: var(--blue-soft); color: var(--blue); }
@keyframes toastpop { 0% { transform: scale(.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ── Admin connections ── */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.conn-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--sh-sm); }
.conn-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.conn-card-title { font-weight: 640; font-size: 15px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.conn-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); background: var(--surface-2); padding: 2px 8px; border-radius: 6px; }
.conn-card-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; }
.conn-test { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; min-width: 0; }
.conn-test-msg { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.conn-test-at { color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; flex: none; }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.conn-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.conn-dot.bad { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.conn-dot.idle { background: var(--ink-4); }
.conn-actions, .conn-edit-actions { display: flex; gap: 9px; align-items: center; }
.conn-status-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }

/* ── Admin email manager ── */
.email-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.email-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--ink); box-shadow: var(--sh-sm); transition: transform .12s, box-shadow .12s, border-color .12s; }
.email-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-2); }
.email-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.email-card-title { font-weight: 640; font-size: 14.5px; letter-spacing: -.01em; }
.email-card-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; flex: 1; }
.email-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.email-card-edit { color: var(--blue); font-weight: 600; }

.email-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .email-editor { grid-template-columns: 1fr; } }
.email-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; min-height: 280px; white-space: pre; tab-size: 2; }
.email-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.email-vars-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-4); width: 100%; margin-bottom: 2px; }
.email-var { font-family: ui-monospace, monospace; font-size: 12px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s; }
.email-var:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
.email-actions { display: flex; align-items: center; gap: 10px; }
.email-preview-card { position: sticky; top: 76px; }
.email-prev-subject { padding: 0 0 12px; border-bottom: 1px solid var(--hair); margin-bottom: 12px; }
.email-prev-subject > div { font-weight: 600; font-size: 14.5px; margin-top: 2px; }
.email-prev-error { background: var(--red-soft); color: var(--red); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; font-family: ui-monospace, monospace; margin-bottom: 12px; white-space: pre-wrap; }
.email-frame { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }

/* ── All-transactions page ── */
.txns-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.txns-search { max-width: 320px; }
.txns-count { margin-left: auto; font-size: 13px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.txn-row { cursor: pointer; transition: background .1s; }
.txn-row:hover { background: var(--surface-hover); }
.txn-acct { font-weight: 560; font-size: 13.5px; }
.clear-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--ink-4); background: var(--surface-2); }
.clear-dot.cleared, .clear-dot.reconciled { background: var(--green-soft); color: var(--green); }
.clear-dot svg { width: 12px; height: 12px; }

/* ── Footer version + What's new ── */
.app-footer-version { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-4); background: var(--surface-2); border: none; padding: 3px 9px; border-radius: 7px; cursor: pointer; font-variant-numeric: tabular-nums; transition: background .12s, color .12s; }
.app-footer-version:hover { background: var(--blue-soft); color: var(--blue); }
.whatsnew-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-height: 60vh; overflow-y: auto; }

/* ── Snappy: in-flight feedback + tactile press ── (progress bar lives in plot.css) */
/* In-flight requests: dim + lock the triggering control so activity is visible
   and double-submits are impossible (the progress bar carries the global signal). */
.btn.htmx-request, .row-act.htmx-request, .clear-toggle.htmx-request,
.ctrl-switch.htmx-request, button.htmx-request[type="submit"],
.assign-input.htmx-request, .avail-pill.htmx-request {
  opacity: .6; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Universal tactile press — a crisp, instant acknowledgement on click. */
  .nav-item:active, .sidebar-account:active, .account-row:active,
  .txn-row:active, .conn-card:active, .email-card:active, .stat:active,
  .app-footer-version:active, .admin-tab:active, .view-opt:active {
    transform: scale(.985);
  }
  .nav-item, .account-row, .txn-row { transition: background .12s var(--ease), transform .08s var(--ease); }

  /* (No global swap-out fade — it blanked small in-place swaps like the category
     cell for a frame. The new content already eases in via .htmx-added.) */

  /* Dropdown parity: the budget switcher snapped open while sibling menus
     animated — give it the same gentle entrance. */
  .bs-menu { animation: nfRise .14s var(--ease-out, ease); }
}

/* Inline form validation — branded to match the focus ring (replaces the
   off-brand native bubble look where we flag fields). */
.input[aria-invalid="true"], .input.invalid, .select[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft), 0 0 0 1px var(--red);
  caret-color: var(--red);
}
@media (prefers-reduced-motion: no-preference) {
  .input.shake { animation: fieldShake .4s var(--ease); }
  @keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
  }
}

/* ── Update notifier (new build shipped mid-session) ── */
.update-pop {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: 200; width: min(380px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-lg, 0 24px 60px -16px rgba(0,0,0,.4)); padding: 16px 18px;
  opacity: 0; transition: opacity .26s var(--ease, ease), transform .26s var(--ease, ease);
}
.update-pop.in { opacity: 1; transform: translate(-50%, 0); }
.update-pop-x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; border: none; background: transparent; color: var(--ink-4); border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; }
.update-pop-x:hover { background: var(--surface-hover); color: var(--ink); }
.update-pop-x svg { width: 15px; height: 15px; }
.update-pop-row { display: flex; gap: 12px; align-items: flex-start; padding-right: 22px; }
.update-pop-spark { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.update-pop-spark svg { width: 18px; height: 18px; }
.update-pop-title { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.update-pop-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.update-pop-notes { margin: 12px 0 0; padding: 11px 13px; background: var(--surface-2); border-radius: 11px; font-size: 13px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; max-height: 220px; overflow-y: auto; }
.update-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* On phones the bottom tab bar owns the bottom edge — lift the notifier above it. */
@media (max-width: 600px) { .update-pop { bottom: calc(64px + env(safe-area-inset-bottom) + 10px); } }
.toast-msg { flex: 1; font-size: 14px; font-weight: 510; color: var(--ink); line-height: 1.35; }
.toast-x { border: none; background: transparent; color: var(--ink-3); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; flex: none; }
.toast-x:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s; transform: none; } .toast.out { transform: none; } .toast-success .toast-icon { animation: none; } }

/* ── footer ── */
.app-footer { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hair); }
.app-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.app-footer-brand { font-size: 12.5px; color: var(--ink-3); }
.app-footer-brand strong { color: var(--ink-2); font-weight: 600; }
.app-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.app-footer-links a { font-size: 12.5px; color: var(--ink-3); transition: color .12s; }
.app-footer-links a:hover { color: var(--blue); }
.auth-footer-links { display: flex; gap: 18px; justify-content: center; margin-top: 22px; }
.auth-footer-links a { font-size: 12.5px; color: var(--ink-3); }
.auth-footer-links a:hover { color: var(--blue); }

/* ── info / legal pages ── */
.info-body { min-height: 100vh; background: var(--canvas); }
.info-top { display: flex; align-items: center; justify-content: space-between; max-width: 768px; margin: 0 auto; padding: 22px 24px; }
.info-main { max-width: 768px; margin: 0 auto; padding: 4px 24px 60px; }
.info-article { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); padding: 40px 42px; }
.info-article h1 { font-size: 30px; margin-bottom: 16px; letter-spacing: -0.03em; }
.info-article h2 { font-size: 18px; margin: 28px 0 10px; }
.info-article p, .info-article li { color: var(--ink-2); font-size: 15px; line-height: 1.62; }
.info-article ul { margin: 4px 0 0 20px; display: flex; flex-direction: column; gap: 7px; }
.info-article a { color: var(--blue); font-weight: 590; }
.info-article code { font-family: var(--font-body); background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.info-lead { font-size: 17px !important; color: var(--ink) !important; margin-bottom: 8px; }
.faq { border-top: 1px solid var(--hair); }
.faq summary { cursor: pointer; padding: 13px 0; font-weight: 590; font-size: 15px; color: var(--ink); list-style: none; display: flex; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; margin-right: 12px; color: var(--ink-3); font-size: 18px; width: 14px; }
.faq[open] summary::before { content: "−"; }
.faq p { padding: 0 0 14px 26px; margin: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 8px; }
.contact-grid a { color: var(--blue); font-weight: 590; }
textarea.input { resize: vertical; min-height: 92px; font-family: var(--font-body); }

/* ── benchmarks ── */
.consent-box { display: flex; gap: 14px; background: var(--surface-2); border-radius: var(--radius); padding: 18px 20px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.consent-icon { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.consent-icon svg { width: 21px; height: 21px; }
.consent-list { margin: 12px 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.consent-list li { font-size: 13.5px; }
.opt-in-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; padding: 12px 14px; background: var(--blue-soft); border-radius: 12px; }
.opt-in-row input { margin-top: 2px; flex: none; }
.bench-dims { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.dim-toggle { display: inline-flex; align-items: center; font-size: 13px; font-weight: 590; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 980px; padding: 7px 14px; cursor: pointer; transition: all .14s; }
.dim-toggle.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.dim-toggle.disabled { opacity: .4; cursor: not-allowed; }
.dim-toggle:not(.disabled):hover { border-color: var(--border-2); background: var(--surface-hover); color: var(--ink); }
.dim-toggle:not(.disabled):active { transform: scale(.97); }
.dim-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-soft), 0 0 0 1px var(--blue); }
.dim-toggle input { display: none; }
.bench-list { display: flex; flex-direction: column; gap: 15px; }
.bench-row { display: grid; grid-template-columns: 130px 1fr 220px; align-items: center; gap: 16px; }
.bench-name { font-weight: 590; font-size: 14px; }
.bench-track { position: relative; height: 12px; border-radius: 980px; background: var(--paper-2); }
.bench-you { height: 100%; border-radius: 980px; transition: width .5s var(--ease); }
.bench-you.under { background: var(--green); }
.bench-you.over { background: var(--amber); }
.bench-avg { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--ink); border-radius: 2px; }
.bench-vals { text-align: right; font-size: 13px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bench-avg-key { display: inline-block; width: 2px; height: 12px; background: var(--ink); border-radius: 2px; vertical-align: middle; }

@media (max-width: 720px) {
  .bench-row { grid-template-columns: 1fr; gap: 6px; }
  .contact-grid { grid-template-columns: 1fr; }
  .app-footer-inner { flex-direction: column; align-items: flex-start; }
  .info-article { padding: 28px 24px; }
}

/* ── quick-budget toolbar ── */
.budget-tools {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 14px;
}
.qb-group {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 5px 7px 5px 12px; box-shadow: var(--sh-sm);
}
.qb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-3); margin-right: 6px; }
.qb-btn {
  font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ink-2);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 11px; cursor: pointer; transition: all .13s; white-space: nowrap;
}
.qb-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border); transform: translateY(-1px); }
.qb-btn:active { transform: translateY(0); }
.qb-danger:hover { background: var(--red-soft); color: var(--red); border-color: transparent; }
.move-money-btn { margin-left: auto; font-weight: 650; box-shadow: 0 1px 2px rgba(10,132,255,.32), 0 8px 18px rgba(10,132,255,.24); }
.move-money-btn svg { width: 17px; height: 17px; }
.move-money-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(10,132,255,.32), 0 12px 24px rgba(10,132,255,.3); }

/* ── budget grid: targets ── */
.catcell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.catcell-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* The category name takes the slack and ellipsizes on one line (full name on
   hover) instead of wrapping — a wrapped name used to shove the Fund/target chips
   right and leave them floating mid-row. Now the chips keep a consistent place. */
.catcell-top .cat-link { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* rich-select "Create '<typed>'" row — shown when search matches nothing and the
   select opts in via data-allow-create. Matches the .rs-opt option rows. */
.rs-create { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-top: 4px;
  border-top: 1px solid var(--hair); border-radius: 9px; cursor: pointer;
  color: var(--blue-text); font-size: 14px; font-weight: 560; }
.rs-create:hover, .rs-create.hl { background: var(--blue-soft); }
.rs-create-ico { width: 16px; text-align: center; font-size: 17px; font-weight: 500; line-height: 1; }
.rs-create-q { color: var(--ink); font-weight: 600; }
/* The add-row status toggle stays interactive in the reconciled state (posted rows
   lock it; here it must keep cycling). */
#add-status-toggle.reconciled { cursor: pointer; }

/* Branded tooltip (see tooltip.js) — replaces native title on hover/focus/touch. */

/* Password field reveal toggle (auth + account). */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }
.pw-reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; border: none;
  background: none; color: var(--ink-3); cursor: pointer; border-radius: 8px;
  -webkit-tap-highlight-color: transparent; transition: color .14s; }
.pw-reveal:hover { color: var(--ink); }
.pw-reveal svg { width: 18px; height: 18px; }
.goal-fund {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--amber);
  background: var(--amber-soft); border: none; border-radius: 20px; padding: 3px 9px;
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.goal-fund:hover { background: var(--amber); color: #fff; transform: translateY(-1px); }
.goal-met { color: var(--green); font-size: 13px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .goal-chip, .goal-fund, .split-toggle { transition: transform .12s var(--ease), background .12s, color .12s, border-color .12s; }
  .goal-chip:active, .goal-fund:active, .split-toggle:active { transform: scale(.95); }
}
.goal-chip { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border: none; border-radius: 20px; padding: 3px 9px; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; }
.goal-chip:hover { background: var(--blue-soft); color: var(--blue); }
.goal-chip.met { color: var(--green); background: var(--green-soft); }
.goal-add {
  font-size: 11px; font-weight: 600; color: var(--ink-4); background: transparent;
  border: 1px dashed var(--border-2); border-radius: 20px; padding: 2px 9px; cursor: pointer;
  opacity: 0; transition: all .14s; white-space: nowrap;
}
.cat-row:hover .goal-add, .cat-row:focus-within .goal-add { opacity: 1; }
.goal-add:hover { color: var(--blue); border-color: var(--blue); border-style: solid; }
.goal-bar { width: 100px; height: 5px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.goal-bar span { display: block; height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.goal-bar.underfunded span { background: linear-gradient(90deg, var(--amber), #f0a83a); }
.goal-bar.funded span { background: linear-gradient(90deg, var(--green), #3fcf95); }

/* drag-to-reorder */
.budget-grid .group-row td.col-name,
.budget-grid .cat-row td.col-name { display: flex; align-items: center; gap: 6px; padding-left: 12px; }
.drag-handle { flex: none; width: 16px; height: 22px; display: inline-grid; place-items: center; color: var(--ink-4); cursor: grab; opacity: 0; transition: opacity .14s; }
.drag-handle svg { width: 13px; height: 13px; }
.group-row:hover .drag-handle, .cat-row:hover .drag-handle { opacity: .55; }
.drag-handle:hover { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
.cat-row.dragging, .group-row.dragging { opacity: .35; }
.cat-row.dragging td, .group-row.dragging td { background: var(--blue-soft); }

/* category / group management: hover action buttons */
.group-name { font-weight: 600; vertical-align: middle; }
.row-acts { display: inline-flex; align-items: center; gap: 1px; margin-left: 7px; vertical-align: middle; opacity: 0; transition: opacity .14s; }
.group-row:hover .row-acts, .cat-row:hover .row-acts,
.group-row:focus-within .row-acts, .cat-row:focus-within .row-acts { opacity: 1; }
.row-act { width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; border: none; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; }
.row-act:hover { background: var(--overlay-hover); color: var(--ink); }
.row-act.danger:hover { background: var(--red-soft); color: var(--red); }
.row-act svg { width: 14px; height: 14px; }

/* uncategorized callout + inline categorize picker */
.row-uncat td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.row-uncat:hover td { background: var(--amber-soft); }
.pill-uncat { cursor: default; }
.cat-select {
  font-family: var(--font-body); font-size: 13px; color: var(--ink-2);
  border: 1px solid transparent; background-color: transparent; border-radius: 8px;
  padding: 5px 24px 5px 9px; max-width: 200px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 13px;
  transition: border-color .12s, background-color .12s, color .12s;
}
.cat-select:hover { border-color: var(--border-2); background-color: var(--surface); color: var(--ink); }
.cat-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); color: var(--ink); }
.cat-select.is-uncat { color: var(--amber); background-color: var(--amber-soft); font-weight: 590; border-radius: 980px; padding-left: 12px; }

/* Lightweight category pill — visually identical to the rich-select button, but
   it's just a button until clicked (the real picker is fetched on demand). This
   keeps the register from rendering a full <select> of every category per row. */
.cat-pill {
  display: inline-flex; align-items: center; gap: 5px; width: 168px; min-width: 0;
  padding: 4px 11px; border-radius: 999px; min-height: 0;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-size: 12.5px; font-weight: 560; color: var(--ink-2); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cat-edit-host { display: inline-block; min-width: 168px; }
/* Hide the raw <select> until richselect wraps it (adds .rs-native + an .rs-btn),
   so it can't flash as a native control for a frame on the first click. */
.cat-edit-host > select { opacity: 0; }
.cat-pill .cat-pill-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.cat-pill .cat-pill-chev { width: 12px; height: 12px; opacity: .45; flex: none; }
/* Split-into-categories icon, next to the category pill (reveals on row hover). */
/* Keep the category pill + split icon on one line so the icon sits inline beside
   the pill instead of wrapping below it (auto table layout would otherwise break
   at the whitespace between them and offset the row vertically). */
/* Keep the category pill and its actions in one bounded flex row. The pill is
   the only flexible child, so it ellipsizes before Split or Tag can paint over
   Outflow at compact desktop widths. padding-right:0 keeps the actions tidy at
   the cell edge; the memo cell supplies the following gap on wide layouts. */
#txn-table td.cat-cell { white-space: nowrap; padding-right: 0; overflow: hidden; }
#txn-table .cat-cell-inner { display: flex; align-items: center; width: 100%; min-width: 0; }
#txn-table .cat-cell-inner > .cat-pill { flex: 1 1 auto; vertical-align: middle; }
#txn-table .cat-cell-inner > .cat-fixed { min-width: 0; overflow: hidden; }
#txn-table .cat-cell-inner > .cat-split-btn,
#txn-table .cat-cell-inner > .cat-tag-btn { flex: none; }
#txn-table td.memo, #txn-table th.memo-col { padding-left: 8px; }
.cat-split-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 8px;
  border: none; background: transparent; color: var(--ink-4); border-radius: 7px; cursor: pointer;
  vertical-align: middle; opacity: 0; transition: opacity .14s, background .14s, color .14s; }
.cat-split-btn svg { width: 14px; height: 14px; }
tr:hover .cat-split-btn, .cat-split-btn:focus-visible { opacity: 1; }
.cat-split-btn:hover { background: var(--blue-soft); color: var(--blue); }
@media (pointer: coarse) { .cat-split-btn { opacity: 1; } }
.cat-pill:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.cat-pill.is-uncat { border-style: dashed; border-color: color-mix(in srgb, var(--amber) 45%, var(--border-2)); color: var(--amber-text); background: transparent; }
.cat-pill.is-uncat:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); color: var(--amber-text); }

/* custom confirmation dialog (replaces native confirm) */
.confirm-dialog { width: 400px; max-width: 92vw; text-align: center; }
.confirm-dialog .card-pad { padding: 28px 26px 24px; }
.confirm-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: grid; place-items: center; margin: 0 auto 14px; }
.confirm-icon svg { width: 26px; height: 26px; }
/* non-destructive confirms (e.g. unlock) get a calmer blue treatment */
.confirm-icon.is-safe { background: color-mix(in srgb, var(--blue) 13%, transparent); color: var(--blue); }
.confirm-dialog h3 { font-size: 18px; margin-bottom: 6px; }
.confirm-dialog #confirm-message { font-size: 14px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; margin-top: 22px; }
.confirm-actions .btn { flex: 1; justify-content: center; padding: 11px; }
/* Canonical danger button — soft red tint (the calmer, Apple-style treatment that
   already shipped: a second, global definition in the admin block used to override
   the old solid one app-wide; consolidated here, defined once). */
.btn-danger { background: var(--red-soft); color: var(--red-text); border: 1px solid color-mix(in srgb, var(--red) 22%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 16%, transparent); }

/* breadcrumb path */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); margin-top: 2px; min-width: 0; }
.crumbs a { color: var(--ink-3); transition: color .12s; }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { color: var(--ink-4); }
.crumbs .current { color: var(--ink-2); font-weight: 590; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* available pill as an interactive button */
button.avail-pill.as-move { border: none; cursor: pointer; font-family: var(--font-body); transition: all .14s; }
button.avail-pill.as-move:hover { transform: translateY(-1px); filter: brightness(.97); box-shadow: var(--sh-sm); }
button.avail-pill.avail-zero:hover { filter: none; background: var(--border); }

/* ── money move log ── */
.move-log-card { position: sticky; top: calc(var(--topbar-h) + 24px); }
.move-log-list { display: flex; flex-direction: column; max-height: 540px; overflow-y: auto; }
.move-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--hair); animation: moveIn .45s cubic-bezier(.2,.7,.2,1) backwards;
}
.move-item:last-child { border-bottom: none; }
.move-dot { margin-top: 5px; }
.move-body { flex: 1; min-width: 0; }
.move-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.move-meta { display: flex; align-items: center; gap: 14px; margin-top: 5px; }
.move-when { font-size: 11.5px; color: var(--ink-3); }
.move-undo { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--blue); }
.move-undo svg { width: 13px; height: 13px; }
.move-undo:hover { text-decoration: underline; }

/* Recent-activity account chip + funding/target tag icons */
.ra-acct { display: inline-block; margin-left: 8px; font-size: 11px; color: var(--ink-3); background: var(--surface-2); padding: 1px 7px; border-radius: 6px; vertical-align: middle; }
.goal-fund svg, .goal-chip svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
@keyframes moveIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.move-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--blue); }
.move-cover .move-dot { background: var(--amber); }
.move-fund .move-dot { background: var(--green); }
.move-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.move-node { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.move-node.move-rta { color: var(--ink-3); }
.move-arrow { width: 14px; height: 14px; flex: none; color: var(--ink-4); }
.move-amt { font-size: 12.5px; font-weight: 500; color: var(--ink-2); flex: none; }
.move-empty { padding: 28px 20px; font-size: 13px; line-height: 1.5; text-align: center; }

/* ── dialogs ── */
dialog.modal { width: 440px; max-width: 92vw; }
/* On phones a tall modal scrolls (max-height: 90vh) — pin the title bar so the
   close affordance stays reachable while the body scrolls beneath it. */
@media (max-width: 720px) {
  dialog.modal .card-head {
    position: sticky; top: 0; z-index: 2;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }
}

/* mortgage */
.mortgage-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.mortgage-card:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.payoff-stat { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; }
.amort-year { border-top: 1px solid var(--hair); }
.amort-year > summary { display: flex; align-items: center; gap: 12px; padding: 14px 22px; cursor: pointer; list-style: none; font-size: 14px; transition: background .12s; }
.amort-year > summary::-webkit-details-marker { display: none; }
.amort-year > summary:hover { background: var(--surface-hover); }
.amort-chev { display: inline-grid; place-items: center; color: var(--ink-3); transition: transform .2s var(--ease); }
.amort-chev svg { width: 15px; height: 15px; }
.amort-year[open] > summary .amort-chev { transform: rotate(90deg); }
.amort-year-label { font-weight: 600; font-family: var(--font-display); min-width: 52px; }
.amort-year-stats { color: var(--ink-2); font-size: 12.5px; margin-left: auto; }
.amort-table { margin: 0 12px 10px; }
.amort-table th, .amort-table td { padding: 8px 12px; font-size: 13px; }

/* category drill-in: target card */
.target-set { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.target-meta { flex: 1; min-width: 180px; }

@media (max-width: 980px) {
  .move-log-card { position: static; }
}
@media (max-width: 860px) {
  .grid[style*="320px"] { grid-template-columns: 1fr !important; }
}


/* ===== reconcile ===== */
/* ── Account reconciliation ─────────────────────────────────────────────── */
.recon-modal { border: none; padding: 0; max-width: 440px; width: 92%; }
.recon-current {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--paper-2); border: 1px solid var(--hair);
}
.recon-current-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.recon-current-amount { font-size: 18px; font-weight: 600; color: var(--ink); }
.recon-last {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 12.5px; color: var(--ink-3);
  margin-top: 2px;
}
.recon-last svg { width: 13px; height: 13px; color: var(--green); }

/* ===== motionperf ===== */
/* ============================================================
   Motion & Performance Polish — additive layer over plot.css.
   plot.css already owns: #plot-progress, .content view-transition,
   .cat-row.flash, account-row glide. This file complements those
   without redefining any of them. All motion is reduced-motion safe.
   ============================================================ */

/* ── persistent shared elements: independent view-transition names ──
   plot.css freezes ::view-transition(root) so the chrome stays put while
   .content glides. Naming the title + month-pick lets them MORPH smoothly
   in place (position/size tween) across boosted navigations instead of
   being part of the frozen root snapshot — slicker, still rock-steady. */
@media (prefers-reduced-motion: no-preference) {
  .topbar .page-title { view-transition-name: plot-title; }
  .topbar-sub         { view-transition-name: plot-subtitle; }
  .month-pick         { view-transition-name: plot-monthpick; }
  .sidebar-logo       { view-transition-name: plot-logo; }
  ::view-transition-group(plot-title),
  ::view-transition-group(plot-subtitle),
  ::view-transition-group(plot-monthpick),
  ::view-transition-group(plot-logo) { animation-duration: .42s; }
  /* a gentle cross-fade as the title text swaps page-to-page */
  ::view-transition-old(plot-title) { animation: pe-fade-out .2s ease both; }
  ::view-transition-new(plot-title) { animation: pe-fade-in .34s cubic-bezier(.16,.84,.34,1) both; }
}
@keyframes pe-fade-out { to { opacity: 0; } }
@keyframes pe-fade-in  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── skeleton shimmer utility ──
   Usage: <div class="skeleton" style="height:18px;width:60%"></div>
   or .skeleton-text / .skeleton-line for quick rows. */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--paper-2); border-radius: var(--radius-sm);
  color: transparent !important;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: pe-shimmer 1.35s cubic-bezier(.4,0,.2,1) infinite;
}
.skeleton-text { display: inline-block; height: 1em; min-width: 4ch; vertical-align: middle; }
.skeleton-line { height: 13px; margin: 8px 0; border-radius: 6px; }
.skeleton-line:last-child { width: 70%; }
@keyframes pe-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; opacity: .35; transform: none; }
}
html[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.10) 50%, transparent 100%); }

/* ── refined micro-interactions ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* table rows: a hair of lift + a warm rail on hover (complements plot.css
     account-row pattern, generalised to any .table tbody row). */
  .table tbody tr { transition: background .14s cubic-bezier(.2,.7,.2,1); }
  .table tbody tr td:first-child {
    box-shadow: inset 2px 0 0 transparent;
    transition: box-shadow .16s cubic-bezier(.2,.7,.2,1);
  }
  .table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--coral); }

  /* pills: tactile spring on hover, satisfying press */
  .pill { transition: transform .16s cubic-bezier(.2,.7,.2,1), filter .16s ease; }
  .pill:hover { transform: translateY(-1px); filter: saturate(1.08); }
  .pill:active { transform: translateY(0) scale(.97); }

  /* buttons: plot.css owns hover/active translate; add a crisper easing curve
     and a quick highlight wipe on press for premium feedback. */
  .btn { transition:
    background .14s, color .14s, border-color .14s,
    transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.7,.2,1); }
  .btn:active { transform: translateY(1px) scale(.985); }
}

/* Shared disabled state for every .btn variant — a disabled action must read as
   inert (no saturated fill lift, no pointer) instead of looking clickable. */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* data cards: subtle float when a .card wraps a chart or a bar list (e.g. the
     Top Payees card on Reports, which has a .bar-list rather than a .chart-box). */
  .card:has(.chart-box),
  .card:has(.bar-list) {
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s cubic-bezier(.2,.7,.2,1);
  }
  .card:has(.chart-box):hover,
  .card:has(.bar-list):hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md), var(--inset-hi);
  }
}

/* ── focus-visible rings: cohesive, keyboard-only, never on mouse ──
   Uses the existing blue token; respects each control's radius. */
.btn:focus-visible,
.pill:focus-visible,
.nav-item:focus-visible,
.month-arrow:focus-visible,
.month-today:focus-visible,
.clear-toggle:focus-visible,
.row-act:focus-visible,
.cat-pill:focus-visible,
.ctx-item:focus-visible,
.txn-acct-link:focus-visible,
.icon-btn:focus-visible,
a.drill:focus-visible,
.seg-btn:focus-visible,
.admin-tab:focus-visible,
.view-opt:focus-visible,
.bs-item button:focus-visible,
.account-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft), 0 0 0 1px var(--blue);
  /* no border-radius override — the ring follows each element's own shape, so pills
     and circular toggles keep their radius instead of squaring off when focused */
}
.icon-btn:focus-visible { border-radius: 9px; }
.input:focus-visible, .select:focus-visible,
.assign-input:focus-visible {
  outline: none; /* these already paint a focus ring in plot.css */
}
/* sidebar items sit on dark chrome — tint the ring lighter for contrast */
.nav-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ── smooth appearance for newly inserted htmx rows ──
   htmx adds .htmx-added to freshly swapped nodes (it's removed on the next
   frame). We ride that to ease new table/budget/account rows in. */
@media (prefers-reduced-motion: no-preference) {
  tr.htmx-added,
  .account-row.htmx-added,
  .insight.htmx-added,
  .card.htmx-added {
    animation: pe-row-in .42s cubic-bezier(.16,.84,.34,1) both;
  }
}
@keyframes pe-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* settling fade on swap targets so partial updates don't snap */
@media (prefers-reduced-motion: no-preference) {
  .htmx-settling { transition: opacity .2s ease; }
}

/* ===== scheduled ===== */
/* ============================================================
   Scheduled / Recurring transactions
   ============================================================ */
.sched-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }

/* timeline list of upcoming items */
.sched-timeline { position: relative; padding: 4px 6px 6px; }
.sched-timeline::before {
  content: ""; position: absolute; left: 27px; top: 18px; bottom: 18px;
  width: 2px; background: linear-gradient(var(--border), var(--hair) 60%, transparent);
}
.sched-item {
  position: relative; display: grid;
  grid-template-columns: 44px 1fr auto; align-items: center; gap: 6px 16px;
  padding: 14px 12px 14px 0; border-radius: var(--radius-sm);
  transition: background .14s;
}
.sched-item:hover { background: var(--surface-hover); }
.sched-node {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #3f78ff, var(--blue));
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.25);
}
.sched-node svg { width: 19px; height: 19px; }
.sched-node.is-inflow { background: linear-gradient(145deg, #2fb98a, var(--green)); }
.sched-node.is-overdue { background: linear-gradient(145deg, #ff7048, var(--coral)); }
.sched-node.is-soon { background: linear-gradient(145deg, #e6a01f, var(--amber)); }
.sched-node.is-paused { background: linear-gradient(145deg, #b8b0a4, var(--ink-4)); }

.sched-main { min-width: 0; }
.sched-payee { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sched-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.sched-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

.sched-right { display: flex; align-items: center; gap: 14px; }
.sched-amount { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; white-space: nowrap; }
.sched-actions { display: flex; align-items: center; gap: 4px; }
.sched-actions form { display: inline-flex; margin: 0; }

.sched-when {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1.05; min-width: 54px;
}
.sched-when .day { font-family: var(--font-display); font-size: 21px; font-weight: 560; color: var(--ink); }
.sched-when .mon { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
.sched-when.is-overdue .day, .sched-when.is-overdue .mon { color: var(--coral-2); }

.sched-section + .sched-section { margin-top: 22px; }
.sched-paused .sched-item { opacity: .72; }
.sched-paused .sched-payee { color: var(--ink-2); }

.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--ink-3); cursor: pointer; transition: all .13s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); box-shadow: var(--sh-sm); }
.icon-btn.danger:hover { color: var(--red); background: var(--red-soft); }
.icon-btn svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .icon-btn { transition: transform .12s var(--ease), background .13s, color .13s, box-shadow .13s; }
  .icon-btn:active { transform: scale(.9); }
}

.freq-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.freq-chips input { position: absolute; opacity: 0; pointer-events: none; }
.freq-chips label {
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-2);
  background: var(--surface); transition: all .13s;
}
.freq-chips label:hover { border-color: var(--ink-4); }
.freq-chips input:checked + label {
  background: var(--blue); color: #fff; border-color: var(--blue);
}

.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--seg-trough); border-radius: var(--seg-radius); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; padding: 7px 16px; border-radius: 8px; transition: all .13s; }
.seg input:checked + label { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.seg input.io-out:checked + label { color: var(--coral-2); }
.seg input.io-in:checked + label { color: var(--green); }
/* Keyboard focus on the visually-hidden input must surface on its label, which
   is the only thing a sighted keyboard user can see. */
.seg input:focus-visible + label,
.freq-chips input:focus-visible + label {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft), 0 0 0 1px var(--blue);
}
@media (prefers-reduced-motion: no-preference) {
  .seg label, .freq-chips label { transition: all .13s var(--ease); }
  .seg label:active, .freq-chips label:active { transform: scale(.95); }
}

/* ===== transfers ===== */
/* ── transfers ── */
.pill-transfer { background: var(--purple-soft, var(--paper-2)); color: var(--purple, var(--ink-2)); }

/* ===== darkmode ===== */
/* ============================================================
   Plot — Dark Mode  ·  "Midnight"
   True neutral dark surfaces · cool-grey text · legible accents.
   A complete token override; component shells inherit automatically.
   ============================================================ */

html[data-theme="dark"] {
  /* ── ink (neutral cool-grey, light on dark) ── */
  --ink:      #ECECEF;
  --ink-2:    #B2B2BA;
  --ink-3:    #83838C;
  --ink-4:    #5A5A63;

  /* ── surfaces (true neutral dark, layered) ── */
  --canvas:       #0C0C0E;   /* page background */
  --paper:        #0C0C0E;
  --paper-2:      #19191C;
  --surface:      #161619;   /* cards */
  --surface-2:    #1F1F23;
  --surface-hover:#26262B;

  /* ── chrome (sidebar is the darkest layer) ── */
  --sidebar:   #0A0A0C;
  --sidebar-2: #121215;
  --cream:     #ECECEF;
  --cream-2:   #9A9AA2;
  --cream-3:   #66666E;

  /* ── accents (lifted for contrast on dark) ── */
  --coral:      #FF7048;  --coral-2: #FF8A64;  --coral-soft: rgba(255,112,72,.16);
  --green:      #34C28C;  --green-soft: rgba(52,194,140,.16);
  --blue:       #5B8BFF;  --blue-soft: rgba(91,139,255,.16);
  --amber:      #ECAA2E;  --amber-soft: rgba(236,170,46,.18);
  --red:        #FF6452;  --red-soft: rgba(255,100,82,.16);
  --purple:     #9B80FF;  --purple-soft: rgba(155,128,255,.16);

  /* ── neutral hairlines on dark ── */
  --border:   rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.17);
  --hair:     rgba(255,255,255,.06);
  --overlay-hover: rgba(255,255,255,.06);   /* hover wash flips light on dark */

  /* ── softer, deeper shadows + subtle top highlight ── */
  --sh-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30);
  --sh:    0 2px 6px rgba(0,0,0,.42), 0 12px 30px rgba(0,0,0,.46);
  --sh-md: 0 6px 14px rgba(0,0,0,.48), 0 22px 48px rgba(0,0,0,.52);
  --sh-lg: 0 30px 70px rgba(0,0,0,.62);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.045);

  color-scheme: dark;
}

/* subtle, cool atmospheric glow + grain on a neutral dark canvas */
html[data-theme="dark"] body::before {
  background:
    radial-gradient(900px 540px at 80% -10%, rgba(91,139,255,.06), transparent 62%),
    radial-gradient(820px 600px at 4% 104%, rgba(91,139,255,.05), transparent 60%);
}
html[data-theme="dark"] body::after {
  opacity: .04; mix-blend-mode: screen;
}

/* topbar glass over the neutral dark page */
html[data-theme="dark"] .topbar {
  background: rgba(12,12,14,.72);
  border-bottom-color: var(--border);
}

/* sidebar is the darkest layer with a whisper-faint cool glow */
html[data-theme="dark"] .sidebar {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(91,139,255,.06), transparent 60%),
    linear-gradient(180deg, var(--sidebar-2), var(--sidebar) 45%);
  border-right-color: rgba(0,0,0,.5);
}

/* primary button inverts to a neutral near-white on dark */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, #f1f1f3, #d8d8dc);
  color: #161619; border-color: #000;
}
html[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(180deg, #f7f7f9, #e2e2e6);
}

/* assign + text inputs: lift the focused fill off pure white */
html[data-theme="dark"] .assign-input:focus {
  background: var(--surface-2);
}

/* progress/track surfaces that used --paper-2 read fine, but bump contrast */
html[data-theme="dark"] .cat-progress,
html[data-theme="dark"] .bar-track {
  background: rgba(255,255,255,.09);
}

/* Ready-to-Assign gradients retuned for depth on dark */
html[data-theme="dark"] .rta.is-ready { background: radial-gradient(120% 160% at 0% 0%, #2a2a30, #131316); }
html[data-theme="dark"] .rta.is-zero  { background: radial-gradient(120% 160% at 0% 0%, #1f9468, #0e4d34); }
html[data-theme="dark"] .rta.is-over  { background: radial-gradient(120% 160% at 0% 0%, #c93f30, #7c1c14); }

/* dialog surface + dimmer, deeper backdrop */
html[data-theme="dark"] dialog { background: var(--surface); }
html[data-theme="dark"] dialog::backdrop { background: rgba(0,0,0,.62); }

/* account icon glyphs stay white — fine. clear-toggle empty state needs lift */
html[data-theme="dark"] .clear-toggle { background: var(--surface-2); }

/* ============================================================
   Theme toggle button (sidebar-foot) — sun/moon morph
   ============================================================ */
.theme-toggle {
  position: relative; width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--hair); background: transparent;
  color: var(--ink-2); transition: background .16s, color .16s, transform .16s, box-shadow .16s;
}
.theme-toggle:hover { background: var(--overlay-hover); color: var(--ink); transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle svg { width: 18px; height: 18px; }
/* two stacked glyphs cross-fade/rotate on theme change */
.theme-toggle .icon-sun, .theme-toggle .icon-moon {
  grid-area: 1 / 1; transition: opacity .28s ease, transform .42s cubic-bezier(.2,.7,.2,1);
}
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(-60deg) scale(.6); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); color: var(--cream-2); }
html[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0) scale(1); color: #FFC56B; }
html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(60deg) scale(.6); }
.theme-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .icon-sun, .theme-toggle .icon-moon { transition: opacity .001ms; }
}


/* ===== reportsplus ===== */
/* advanced reports — net worth & income */
.aom-unit { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }

/* ===== palette ===== */
/* ============================================================
   Command Palette (⌘K)  ·  feature: palette
   ============================================================ */
html.cmdk-lock { overflow: hidden; }

.cmdk {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(64px, 14vh, 168px) 20px 20px;
}
.cmdk[hidden] { display: none; }

.cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 15, 11, .44);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  opacity: 0; transition: opacity .2s ease;
}
.cmdk.open .cmdk-backdrop { opacity: 1; }

.cmdk-panel {
  position: relative; width: 100%; max-width: 588px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg), var(--inset-hi);
  overflow: hidden;
  transform: translateY(-10px) scale(.97); opacity: 0;
  transition: transform .22s cubic-bezier(.16,.84,.34,1), opacity .18s ease;
}
.cmdk.open .cmdk-panel { transform: none; opacity: 1; }

/* search header */
.cmdk-search {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--hair);
  background: var(--surface);
}
.cmdk-search-ic { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.cmdk-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 16.5px; font-weight: 500;
  color: var(--ink); letter-spacing: -.1px;
}
.cmdk-input::placeholder { color: var(--ink-4); font-weight: 500; }
.cmdk-esc {
  font-family: var(--font-body); font-size: 10.5px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 7px; padding: 2px 7px; flex: none;
}

/* result list */
.cmdk-list { max-height: min(46vh, 392px); overflow-y: auto; padding: 8px; scroll-padding: 8px; }
.cmdk-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-4); padding: 12px 12px 6px;
}
.cmdk-row {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  position: relative; transition: background .1s;
}
.cmdk-row.active { background: var(--surface-hover); }
.cmdk-row.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--coral);
  box-shadow: 0 0 10px rgba(255,90,44,.55);
}
.cmdk-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-2); transition: color .12s, background .12s;
}
.cmdk-ic svg { width: 18px; height: 18px; }
.cmdk-row.active .cmdk-ic { background: var(--coral-soft); color: var(--coral-2); border-color: transparent; }
.cmdk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdk-label { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cmdk-label mark { background: transparent; color: var(--coral-2); font-weight: 700; padding: 0; }
.cmdk-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-keys { display: flex; gap: 4px; flex: none; }
.cmdk-keys kbd {
  font-family: var(--font-body); font-size: 10px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 6px; min-width: 18px; text-align: center;
}
.cmdk-enter {
  flex: none; opacity: 0; transform: translateX(-4px);
  transition: opacity .12s, transform .12s;
}
.cmdk-row.active .cmdk-enter { opacity: 1; transform: none; }
.cmdk-enter kbd {
  font-family: var(--font-body); font-size: 11px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border-2);
  border-bottom-width: 2px; border-radius: 7px; padding: 1px 7px;
}
.cmdk-row.active .cmdk-keys { display: none; }

.cmdk-empty { padding: 34px 16px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* footer */
.cmdk-foot {
  display: flex; align-items: center; gap: 18px;
  padding: 11px 18px; border-top: 1px solid var(--hair);
  background: var(--surface-2); font-size: 12px; color: var(--ink-3);
}
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-foot kbd {
  font-family: var(--font-body); font-size: 10.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; min-width: 16px; text-align: center;
}

/* ⌘K hint chip (topbar) */
.cmdk-hint {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-3);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer; box-shadow: var(--sh-sm); transition: all .14s;
}
.cmdk-hint:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-1px); box-shadow: var(--sh); }
.cmdk-hint:active { transform: translateY(1px); box-shadow: var(--sh-sm); }
.cmdk-hint svg { width: 15px; height: 15px; opacity: .8; }
.cmdk-hint kbd {
  font-family: var(--font-body); font-size: 11px; letter-spacing: .5px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px;
}
@media (max-width: 720px) { .cmdk-hint .cmdk-hint-label { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cmdk-backdrop, .cmdk-panel { transition: none; }
  .cmdk-panel { transform: none; }
}

/* ── Loan detail: hero band ─────────────────────────────────────────────── */
.loan-hero {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg, 18px); padding: 18px 20px;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.04));
  position: relative; overflow: hidden;
}
.loan-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--blue);
}
.loan-hero.accent-orange::before { background: var(--orange); }
.loan-hero .account-icon { width: 46px; height: 46px; border-radius: 13px; flex: none; }
.loan-hero .account-icon svg { width: 24px; height: 24px; color: #fff; }
/* Crypto detail uses .crypto-glyph for the same hero icon tile (had no CSS). */
.loan-hero .crypto-glyph { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; flex: none; background: var(--orange, #FF9F0A); color: #fff; }
.loan-hero .crypto-glyph svg { width: 24px; height: 24px; }
.loan-hero-meta { min-width: 0; }
.loan-hero-name { font-size: 18px; font-weight: 680; letter-spacing: -.01em; }
.loan-hero-sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.loan-hero-figure { margin-left: auto; text-align: right; }

/* ── Inline alert bar (e.g. underwater warning) ─────────────────────────── */
.alert-bar {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: 13px; font-size: 13.5px; line-height: 1.45;
  border: 1px solid var(--hair);
}
.alert-bar svg { flex: none; margin-top: 1px; }
.alert-bar.warn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 30%, transparent); color: #9a5a00; }
html[data-theme="dark"] .alert-bar.warn { color: var(--amber); }

/* ── Payoff slider ──────────────────────────────────────────────────────── */
.payoff-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  border-radius: 6px; background: var(--surface-2); outline: none; cursor: pointer;
  margin: 6px 0 2px;
}
.payoff-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 1px 4px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.02);
  transition: transform .12s var(--ease, ease), box-shadow .12s ease;
}
.payoff-slider::-webkit-slider-thumb:active { transform: scale(1.12); box-shadow: 0 2px 9px rgba(0,0,0,.3); }
.payoff-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: #fff;
  border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
html[data-theme="dark"] .payoff-slider::-webkit-slider-thumb,
html[data-theme="dark"] .rt-field input[type=range]::-webkit-slider-thumb,
html[data-theme="dark"] .rt-field input[type=range]::-moz-range-thumb,
html[data-theme="dark"] .payoff-slider::-moz-range-thumb {
  background: #f1f1f3; border-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 4px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4);
}

/* ── New row pop-in (after instant add) ─────────────────────────────────── */
@keyframes rowPop {
  0%   { opacity: 0; transform: translateY(-7px) scale(.985); }
  55%  { background: rgba(10,132,255,.10); }
  100% { opacity: 1; transform: none; background: transparent; }
}
.account-row.row-pop { animation: rowPop .62s var(--ease, cubic-bezier(.32,.72,0,1)) both; }

/* ── 404 / not-found page ───────────────────────────────────────────────── */
.notfound {
  max-width: 540px; margin: 7vh auto 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  animation: nfRise .55s var(--ease, cubic-bezier(.32,.72,0,1)) both;
}
@keyframes nfRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.notfound-art { width: 240px; max-width: 70%; margin-bottom: 6px; }
.notfound-art svg { width: 100%; height: auto; display: block; }
.notfound-art .nf-line { stroke-dasharray: 240; stroke-dashoffset: 240; animation: nfDraw 1.1s var(--ease, ease) .15s forwards; }
.notfound-art .nf-fill { opacity: 0; animation: nfFadeIn .7s ease .8s forwards; }
.notfound-art .nf-dot  { opacity: 0; animation: nfFadeIn .4s ease .9s forwards; }
@keyframes nfDraw   { to { stroke-dashoffset: 0; } }
@keyframes nfFadeIn { to { opacity: 1; } }
.notfound-code {
  font-size: 15px; font-weight: 700; letter-spacing: .14em;
  color: var(--blue); margin-top: 4px;
}
.notfound-title {
  font-size: 27px; font-weight: 700; letter-spacing: -.02em;
  margin: 8px 0 0; line-height: 1.15;
}
.notfound-sub { color: var(--ink-3); font-size: 15px; line-height: 1.5; margin: 12px 0 0; max-width: 420px; }
.notfound-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }

/* ── Budget switcher (sidebar) ──────────────────────────────────────────── */
.budget-switch { margin-bottom: 10px; }
.budget-switch > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface); }
.budget-switch > summary::-webkit-details-marker { display: none; }
.budget-switch > summary:hover { background: var(--surface-2); }
.bs-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bs-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.bs-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-switch > summary svg { width: 15px; height: 15px; color: var(--ink-3); transition: transform .2s var(--ease, ease); flex: none; }
.budget-switch[open] > summary svg { transform: rotate(180deg); }
.bs-menu { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface); }
.bs-item { margin: 0; }
.bs-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); text-align: left; }
.bs-item button:hover { background: var(--surface-2); }
.bs-item.active button { background: var(--blue-soft, rgba(10,132,255,.10)); font-weight: 600; }
.bs-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); flex: none; }
.bs-manage { display: block; text-align: center; padding: 7px; margin-top: 3px; font-size: 12.5px; color: var(--blue); text-decoration: none; border-top: 1px solid var(--hair); }
.pill-active { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #1c7a37; background: rgba(48,209,88,.14); padding: 2px 7px; border-radius: 6px; vertical-align: middle; }

/* ── Activity feed (audit trail) ────────────────────────────────────────── */
.audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.audit-row:last-child { border-bottom: 0; }
.audit-dot { flex: none; }
.audit-dot.audit-create { background: var(--green, #30D158); }
.audit-dot.audit-update { background: var(--blue, #0A84FF); }
.audit-dot.audit-delete { background: var(--red, #FF453A); }
.audit-meta { min-width: 0; }
.audit-line { font-size: 14px; line-height: 1.45; }
.audit-when { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ── Notification bell + center ─────────────────────────────────────────── */
.notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--ink-2); text-decoration: none; }
.notif-bell:hover { background: var(--surface-2); }
.notif-bell svg { width: 20px; height: 20px; }
.notif-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red, #FF453A); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.notif-badge[hidden] { display: none !important; }
.notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
.notif-row:last-child { border-bottom: 0; }
.notif-row.unread { background: var(--blue-soft, rgba(10,132,255,.05)); }
.notif-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); }
.notif-ico svg { width: 17px; height: 17px; }
.notif-ico.notif-invite { color: var(--orange); }
.notif-ico.notif-accepted { color: var(--green, #30D158); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 14px; font-weight: 600; }
.notif-text { font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.notif-when { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* ── Notification bell popover ──────────────────────────────────────────── */
.notif-pop { position: relative; }
.notif-pop > summary { list-style: none; cursor: pointer; }
.notif-pop > summary::-webkit-details-marker { display: none; }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: 60;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.16); overflow: hidden;
  animation: nfRise .16s var(--ease, ease) both;
}
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.link-btn { background: none; border: 0; color: var(--blue); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.notif-panel-list { max-height: 360px; overflow: auto; }
.notif-pop-item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
.notif-pop-item:last-child { border-bottom: 0; }
.notif-pop-item:hover { background: var(--surface-2); }
.notif-pop-item.unread { background: var(--blue-soft, rgba(10,132,255,.05)); }
.notif-pop-title { font-size: 13.5px; font-weight: 600; }
.notif-pop-body { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.notif-pop-when { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.notif-pop-empty { padding: 24px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }
.notif-panel-foot { display: block; text-align: center; padding: 10px; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; border-top: 1px solid var(--hair); }
.notif-panel-foot:hover { background: var(--surface-2); }

/* ── Budget page: wider Money-Moves popup + group % chip ────────────────── */
.modal.modal-wide { max-width: 560px; width: calc(100vw - 48px); }
.group-pct {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600;
  color: var(--ink-3); background: var(--surface-2); padding: 1px 7px; border-radius: 6px;
  vertical-align: middle; font-variant-numeric: tabular-nums;
}
.budget-stats { margin-bottom: 4px; }

/* ── Account balance + share-of-net-worth ──────────────────────────────── */
.bal-cell { text-align: right; min-width: 0; }
.nw-share { font-size: 11px; color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* ── Loan row: worth / owed / equity figures ───────────────────────────── */
.loan-figs { display: flex; gap: 22px; align-items: center; margin-left: auto; }
.loan-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.loan-fig .lf-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.loan-fig .num { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .loan-figs { gap: 14px; } .loan-fig .lf-k { display: none; } }

/* ── Trends page ────────────────────────────────────────────────────────── */
/* Scoped with :has so this link-style segmented control (.seg-btn children) stops
   colliding with the radio-style .seg container defined earlier — each keeps its
   own look instead of whichever loaded last winning for both. */
.seg:has(.seg-btn) { display: inline-flex; background: var(--seg-trough); border-radius: var(--seg-radius); padding: 3px; gap: 2px; }
.seg-btn { padding: 5px 12px; border-radius: var(--seg-pill-radius); font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: color .14s, background .14s; }
.seg-btn:not(.active):hover { color: var(--ink); background: var(--surface-hover); }
.seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.mover-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.mover-row:last-child { border-bottom: 0; }
.mover-meta { min-width: 0; flex: 1; }
.mover-name { font-size: 14px; font-weight: 600; }
.mover-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.mover-chip { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.mover-chip.up { color: #b3261e; background: var(--red-soft); }
.mover-chip.down { color: #1c7a37; background: var(--green-soft); }
.suggest-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
.suggest-row:last-child { border-bottom: 0; }
.suggest-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.suggest-ico svg { width: 17px; height: 17px; }
.suggest-ico.lower { color: #1c7a37; background: var(--green-soft); }
.suggest-ico.raise { color: #b3261e; background: var(--amber-soft); }
.suggest-meta { flex: 1; min-width: 0; }
.suggest-title { font-size: 14px; }
.suggest-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ── Fund-underfunded preview ───────────────────────────────────────────── */
.fund-list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; }
.fund-row { display: flex; align-items: center; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--hair); }
.fund-row:last-child { border-bottom: 0; }
.fund-meta { flex: 1; min-width: 0; }
.fund-name { font-size: 13.5px; font-weight: 600; }
.fund-sep { color: var(--ink-3); font-weight: 400; margin: 0 2px; }
.fund-bar { height: 5px; border-radius: 3px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.fund-bar > span { display: block; height: 100%; background: var(--green, #30D158); border-radius: 3px; }
.fund-amt { font-weight: 650; font-size: 14px; color: #1c7a37; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fund-total { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-weight: 700; font-size: 15px; }
.fund-total .num { font-variant-numeric: tabular-nums; }

/* ── Shared-budget split toggle + settle-up ─────────────────────────────── */
.split-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 7px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink-3);
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; vertical-align: middle;
}
.split-toggle svg { width: 12px; height: 12px; }
.split-toggle:hover { background: var(--surface-2); }
.split-toggle.on { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 30%, transparent); color: #0a4db3; }
.acct-avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.settle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
.settle-row:last-child { border-bottom: 0; }
.settle-flow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settle-names { font-size: 14px; }
.settle-amt { font-weight: 650; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   Tactile feedback & smooth interactions — everything you touch responds.
   All gated on prefers-reduced-motion so it stays accessible.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .btn, .qb-btn, .goal-chip, .goal-add, .goal-fund, .avail-pill, .split-toggle,
  .seg-btn, .row-act, .nav-item, .account-row, .bs-item button, .notif-bell,
  .menu-toggle, .month-arrow, .clear-toggle, .sidebar-account, .mover-row,
  .suggest-row, .settle-row, .audit-row, .notif-pop-item {
    transition: transform .13s var(--ease, cubic-bezier(.32,.72,0,1)),
                background-color .16s ease, box-shadow .2s ease,
                color .16s ease, border-color .16s ease;
    will-change: transform;
  }

  /* Press — a crisp, satisfying scale-down on tap/click (Apple-style). */
  .btn:active, .qb-btn:active, .goal-chip:active, .goal-add:active, .goal-fund:active,
  .avail-pill:active, .split-toggle:active, .seg-btn:active, .row-act:active,
  .notif-bell:active, .menu-toggle:active, .month-arrow:active, .clear-toggle:active,
  .bs-item button:active, .sidebar-account:active, .nav-item:active {
    transform: scale(.94);
  }
  .account-row:active, .mover-row:active, .settle-row:active { transform: scale(.992); }

  /* Hover lift on primary actions and stat/insight cards. */
  .btn-primary:hover, .btn-blue:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(10,132,255,.28); }
  .btn-danger:hover { box-shadow: 0 5px 16px rgba(255,69,58,.26); }
  .stat, .insight, .loan-hero { transition: transform .22s var(--ease, ease), box-shadow .22s ease; }
  .stat:hover, .insight:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
  .account-row:hover { background: var(--surface-2); }

  /* Inputs: a soft focus ring that grows in. */
  .input, .select, .assign-input, .payoff-slider { transition: box-shadow .16s ease, border-color .16s ease; }
  .input:focus, .select:focus, .assign-input:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.16); }

  /* Confirmation pulse: JS adds .acted to whatever you just triggered. */
  .acted { animation: actedPulse .42s var(--ease, ease); }
  @keyframes actedPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* A value that just updated gets a quick highlight sweep. */
  .value-bump { animation: valueBump .5s ease; }
  @keyframes valueBump {
    0% { color: var(--green, #30D158); transform: translateY(-1px); }
    100% { color: inherit; transform: none; }
  }
}

/* Toast: a touch of overshoot makes arrivals feel alive (motion-safe). */
@media (prefers-reduced-motion: no-preference) {
  .toast { transition: transform .34s cubic-bezier(.2,1.3,.4,1), opacity .28s ease; }
  #budget-stats.pulse { animation: statsPulse .5s var(--ease, ease); }
  @keyframes statsPulse { 0% { transform: scale(1); } 42% { transform: scale(1.012); } 100% { transform: scale(1); } }
}

/* ════════════════════════════════════════════════════════════════════════
   Marketing landing page
   ════════════════════════════════════════════════════════════════════════ */
body.landing { display: block; background: var(--bg, #F5F5F7); }
.lp-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 22px 24px; }
.lp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lp-logo .logo-mark { width: 30px; height: 30px; }
.lp-logo .logo-text { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.lp-logo .dot { color: var(--blue); }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-lg { padding: 13px 26px; font-size: 15.5px; border-radius: 13px; }

.lp-hero { position: relative; max-width: 880px; margin: 0 auto; padding: 60px 24px 40px; text-align: center; overflow: hidden; }
.lp-hero > * { position: relative; z-index: 1; }
.lp-eyebrow { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--blue); margin-bottom: 18px; }
.lp-title { font-size: clamp(40px, 7vw, 68px); font-weight: 760; letter-spacing: -.03em; line-height: 1.02; margin: 0; color: var(--ink); }
.lp-grad { background: linear-gradient(120deg, #42A1FF, #0A84FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-sub { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 560px; margin: 20px auto 0; }
.lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.lp-trust { font-size: 12.5px; color: var(--ink-3); margin-top: 20px; }

.lp-preview { margin: 48px auto 0; max-width: 560px; }
.lp-preview-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; box-shadow: var(--sh-lg); padding: 22px 24px; text-align: left; animation: nfRise .7s var(--ease, ease) both; }
.lp-pv-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.lp-pv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.lp-pv-big { font-size: 30px; font-weight: 720; color: var(--blue); }
.lp-pv-bars { display: flex; flex-direction: column; gap: 11px; }
.lp-pv-bar { position: relative; }
.lp-pv-bar b { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; color: #fff; mix-blend-mode: difference; }
.lp-pv-bar span { display: block; height: 30px; border-radius: 8px; background: var(--blue); min-width: 64px; transition: width 1s var(--ease, ease); }

/* ── Interactive hero demo (scoped layout: name · track · stepper) ───────────── */
.lp-demo .lp-pv-chrome-title { margin-left: 8px; align-self: center; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ink-3); letter-spacing: -.01em; }
.lp-demo .lp-pv-bar { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; position: static; }
.lp-demo .lp-pv-bar > b { position: static; transform: none; left: auto; top: auto; color: var(--ink); mix-blend-mode: normal; font-size: 13px; font-weight: 600; }
.lp-demo .lp-pv-track { display: block; height: 10px; min-width: 0; border-radius: 999px; background: var(--fill); overflow: hidden; }
.lp-demo .lp-pv-fill { display: block; height: 100%; width: var(--w, 0%); min-width: 0; background: var(--blue); border-radius: 999px; transition: width .5s var(--ease-out, ease); }
.lp-demo .lp-step { display: inline-flex; align-items: center; gap: 7px; }
.lp-demo .lp-step-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); font-size: 16px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s, transform .1s; }
.lp-demo:not(.is-live) .lp-step-btn { visibility: hidden; }
.lp-demo .lp-step-btn:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
.lp-demo .lp-step-btn:active { transform: scale(.88); }
.lp-demo .lp-pv-amt { display: inline-block; min-width: 56px; text-align: right; font-size: 13px; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lp-demo .lp-pv-big.is-zero, .lp-demo #lp-rta.is-zero { color: var(--green-text); }
.lp-demo #lp-rta.is-over { color: var(--red-text); }
.lp-demo .lp-demo-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.lp-demo .lp-demo-reset { background: none; border: none; color: var(--ink-3); font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 2px; }
.lp-demo .lp-demo-reset:hover { color: var(--blue); }
.lp-demo .lp-demo-funded { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 14px; border-radius: 12px; background: var(--green-soft); color: var(--green-text); font-weight: 600; font-size: 13px; }
.lp-demo .lp-float-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.lp-features { max-width: 1080px; margin: 40px auto 0; padding: 40px 24px; }
.lp-section-title { text-align: center; font-size: 30px; font-weight: 720; letter-spacing: -.02em; margin: 0 0 32px; color: var(--ink); }
/* Landing — pricing */
.lp-section-sub { text-align: center; font-size: 16px; color: var(--ink-2); margin: -22px 0 30px; }

/* ── Landing — gamified bento showcase ── */
.lp-bento-sec { max-width: 1080px; margin: 40px auto; padding: 16px 24px; }
.lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-bento-card { position: relative; background: var(--surface); border: 1px solid var(--hair); border-radius: 22px;
  padding: 24px; box-shadow: 0 8px 26px rgba(10,30,60,.05); overflow: hidden;
  transition: transform .26s var(--ease, ease), box-shadow .26s ease; }
.lp-bento-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(10,30,60,.1); }
.lp-bento-card h3 { font-size: 18px; font-weight: 680; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.lp-bento-card p { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.5; }
.lp-b-span2 { grid-column: span 2; }
.lp-b-tag { display: inline-block; font-size: 12.5px; font-weight: 650; border-radius: 999px; padding: 4px 11px; margin-bottom: 10px; }

/* every-dollar-a-job ring */
.lp-b-job { display: flex; align-items: center; gap: 26px; }
.lp-b-ring { position: relative; width: 128px; height: 128px; flex: none; }
.lp-b-ring svg { width: 128px; height: 128px; transform: rotate(-90deg); }
.lp-ring-track { fill: none; stroke: var(--paper-2); stroke-width: 10; }
.lp-ring-fill { fill: none; stroke: #30D158; stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327; animation: lpRing 1.4s var(--ease, ease) forwards .2s; }
@keyframes lpRing { to { stroke-dashoffset: 0; } }
.lp-b-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp-b-ring-c b { font-size: 30px; font-weight: 760; letter-spacing: -.03em; color: var(--ink); }
.lp-b-ring-c span { font-size: 12px; color: var(--ink-3); }
.lp-b-txt { min-width: 0; }

/* month ahead */
.lp-b-trophy { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #C77700; background: rgba(199,119,0,.14); margin-bottom: 12px; }
.lp-b-trophy svg { width: 24px; height: 24px; }
.lp-b-bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 12px 0 0; }
.lp-b-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: #30D158; animation: lpBar 1.2s var(--ease, ease) forwards .3s; }
@keyframes lpBar { to { width: var(--w); } }

/* net worth spark */
.lp-b-spark { width: 100%; height: 76px; margin-top: 6px; display: block; }

/* donut */
.lp-b-donut { display: flex; align-items: center; gap: 20px; }
.lp-b-ring2 { width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; }
.lp-b-ring2::after { content: ""; position: absolute; inset: 14px; background: var(--surface); border-radius: 50%; }
.lp-b-ring2 span { position: relative; z-index: 1; }
.lp-b-ring2 b { font-size: 17px; font-weight: 720; color: var(--ink); }
.lp-b-legend { display: grid; gap: 8px; }
.lp-b-legend span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.lp-b-legend i { width: 10px; height: 10px; border-radius: 3px; }

@media (max-width: 860px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-b-span2 { grid-column: span 1; }
}

/* ── Landing — why Plot ── */
.lp-why { max-width: 1080px; margin: 48px auto; padding: 16px 24px; }
.lp-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lp-why-card { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 28px;
  border: 1px solid var(--hair); background: var(--surface);
  transition: transform .24s var(--ease, ease), box-shadow .24s ease; }
.lp-why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(10,30,60,.12); }
.lp-why-ic { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 54px; height: 54px;
  border-radius: 16px; color: #fff; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(10,30,60,.18); }
.lp-why-ic svg { width: 27px; height: 27px; }
.lp-why-card h3 { position: relative; z-index: 1; font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 9px; color: var(--ink); }
.lp-why-card p { position: relative; z-index: 1; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 42ch; }
/* large faint ghost glyph for depth */
.lp-why-glyph { position: absolute; right: -18px; top: -16px; opacity: .07; pointer-events: none; }
.lp-why-glyph svg { width: 150px; height: 150px; }
/* per-card accent: tinted wash + gradient icon tile + tinted ghost glyph */
.why-blue   { background: linear-gradient(160deg, rgba(10,132,255,.07), rgba(10,132,255,0) 60%); }
.why-blue   .lp-why-ic { background: linear-gradient(160deg,#42A1FF,#0A84FF); }
.why-blue   .lp-why-glyph { color: #0A84FF; }
.why-green  { background: linear-gradient(160deg, rgba(48,168,80,.08), rgba(48,168,80,0) 60%); }
.why-green  .lp-why-ic { background: linear-gradient(160deg,#34D158,#248A3D); }
.why-green  .lp-why-glyph { color: #248A3D; }
.why-purple { background: linear-gradient(160deg, rgba(120,86,255,.08), rgba(120,86,255,0) 60%); }
.why-purple .lp-why-ic { background: linear-gradient(160deg,#9D7BFF,#6C4BF0); }
.why-purple .lp-why-glyph { color: #6C4BF0; }
.why-orange { background: linear-gradient(160deg, rgba(255,140,40,.09), rgba(255,140,40,0) 60%); }
.why-orange .lp-why-ic { background: linear-gradient(160deg,#FFB340,#F56300); }
.why-orange .lp-why-glyph { color: #F56300; }
@media (max-width: 760px) { .lp-why-grid { grid-template-columns: 1fr; } }

/* ── Landing — principles (get ahead) ── */
.lp-prin { max-width: 1080px; margin: 48px auto; padding: 16px 24px; }
.lp-prin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-prin-card { position: relative; background: var(--surface); border: 1px solid var(--hair); border-radius: 20px;
  padding: 24px 22px; transition: transform .24s var(--ease, ease), box-shadow .24s ease; }
.lp-prin-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(10,30,60,.1); }
.lp-prin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lp-prin-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-weight: 740;
  font-size: 15px; color: #fff; background: linear-gradient(160deg, #42A1FF, #0A84FF); box-shadow: 0 6px 14px rgba(10,132,255,.3); }
.lp-prin-ic { color: var(--ink-4); }
.lp-prin-ic svg { width: 26px; height: 26px; }
.lp-prin-card h3 { font-size: 17px; font-weight: 680; letter-spacing: -.01em; margin: 0 0 7px; color: var(--ink); }
.lp-prin-card p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .lp-prin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-prin-grid { grid-template-columns: 1fr; } }
.lp-cta-fine { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.lp-nav-pricing { }
.lp-pricing { position: relative; max-width: 480px; margin: 30px auto; padding: 16px 24px 8px; text-align: center; }
/* soft brand halo behind the card for a premium feel */
.lp-pricing::before { content: ""; position: absolute; left: 50%; top: 120px; width: 420px; height: 420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(10,132,255,.16), rgba(10,132,255,0) 70%); pointer-events: none; z-index: 0; }
.lp-price-card { position: relative; z-index: 1; background: var(--surface);
  border: 1px solid var(--hair); border-radius: 26px;
  padding: 40px 32px 32px; box-shadow: 0 30px 70px rgba(10,30,60,.14), 0 2px 6px rgba(10,30,60,.05); text-align: left; overflow: hidden; }
.lp-price-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, #42A1FF, #0A84FF); }
.lp-price-ribbon { display: inline-block; font-size: 12.5px; font-weight: 650; color: var(--blue);
  background: var(--blue-soft); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.lp-price-name { font-size: 15px; font-weight: 600; color: var(--ink-3); letter-spacing: .01em; }
.lp-price-amt { font-size: 56px; font-weight: 780; letter-spacing: -.035em; color: var(--ink); line-height: 1; margin-top: 6px; }
.lp-price-amt span { font-size: 18px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.lp-billtoggle { display: inline-flex; gap: 3px; padding: 4px; background: var(--surface-2); border-radius: 999px; margin: 14px 0 6px; }
.lp-bt { appearance: none; border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-3); padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; transition: background .16s, color .16s, box-shadow .16s; }
.lp-bt.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.lp-bt-save { font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 2px 7px; }
.lp-price-bill { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.lp-amt-per { font-size: 18px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.lp-price-feats { list-style: none; margin: 24px 0 26px; padding: 20px 0 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 13px; }
.lp-price-feats li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink); line-height: 1.4; font-weight: 500; }
.lp-price-feats li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23248A3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.lp-price-cta { width: 100%; justify-content: center; padding: 15px; font-size: 16px; font-weight: 650;
  background: linear-gradient(160deg, #2C97FF, #0A84FF); box-shadow: 0 10px 26px rgba(10,132,255,.36);
  transition: transform .18s var(--ease, ease), box-shadow .18s ease; }
.lp-price-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(10,132,255,.44); }
.lp-price-fine { text-align: center; font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-feature { background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 26px 24px; transition: transform .22s var(--ease, ease), box-shadow .22s ease; }
.lp-feature:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.lp-feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: var(--blue-soft, rgba(10,132,255,.1)); color: var(--blue); margin-bottom: 16px; }
.lp-feat-icon svg { width: 23px; height: 23px; }
.lp-i-split { background: var(--blue-soft); color: var(--blue); }

/* Product window — full-bleed CSS mock of the real budget grid (honest: shows an
   overspent envelope). Scoped tw-* classes; sidebar collapses on phones. */
.lp-window-sec { max-width: 1140px; margin: 76px auto; padding: 0 24px; text-align: center; }
.tw-window { margin-top: 30px; text-align: left; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hair); box-shadow: var(--sh-lg); background: var(--surface); }
.tw-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--hair); background: var(--surface-2); }
.tw-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-2); }
.tw-title { margin-left: 12px; font-size: 12.5px; font-style: normal; color: var(--ink-3); font-weight: 560; }
.tw-body { display: grid; grid-template-columns: 204px 1fr; min-height: 360px; }
.tw-side { display: flex; flex-direction: column; gap: 3px; padding: 16px 12px; border-right: 1px solid var(--hair); background: var(--surface-2); }
.tw-nav { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 560; color: var(--ink-2); }
.tw-nav svg { width: 18px; height: 18px; flex: none; }
.tw-nav.active { background: var(--blue-soft); color: var(--blue); }
.tw-main { padding: 18px 22px; min-width: 0; }
.tw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tw-month { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.tw-rta { font-size: 12.5px; font-weight: 600; color: var(--green-text); background: var(--green-soft); padding: 6px 12px; border-radius: 999px; }
.tw-grid { display: flex; flex-direction: column; }
.tw-colhead, .tw-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; gap: 10px; }
.tw-colhead { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); font-weight: 600; padding: 0 0 10px; border-bottom: 1px solid var(--hair); }
.tw-colhead span:not(:first-child) { text-align: right; }
.tw-group { font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 16px 0 6px; }
.tw-row { position: relative; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.tw-cat { font-weight: 560; color: var(--ink); }
.tw-num { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.tw-act { color: var(--ink-3); }
.tw-avail { font-weight: 680; padding: 4px 10px; border-radius: 999px; justify-self: end; font-variant-numeric: tabular-nums; }
.tw-avail.ok { color: var(--green-text); background: var(--green-soft); }
.tw-avail.bad { color: var(--red-text); background: var(--red-soft); }
.tw-rowbar { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: var(--fill); overflow: hidden; margin-top: 9px; }
.tw-rowbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--blue); }
.tw-over .tw-rowbar i { background: var(--red); }
.in .tw-rowbar i { width: var(--w, 0%); transition: width .7s var(--ease-out, ease); transition-delay: var(--d, 0ms); }
@media (max-width: 720px) {
  .tw-side { display: none; }
  .tw-body { grid-template-columns: 1fr; }
  .tw-colhead, .tw-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .tw-act, .tw-colhead span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .in .tw-rowbar i { transition: none; } }

/* Sankey chart heights as classes (not inline) so mobile can shrink them — an
   inline height would out-specify the mobile override and crush the canvas width. */
.chart-box.sankey { height: 460px; }
.chart-box.sankey.sankey-tall { height: 540px; }

/* FAQ — native <details>, hairline-divided rows, chevron rotates on open. */
.lp-faq { max-width: 760px; margin: 64px auto; padding: 0 24px; }
.lp-faq-list { margin-top: 26px; border-top: 1px solid var(--hair); }
.lp-faq-item { border-bottom: 1px solid var(--hair); }
.lp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 20px 4px; font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; transition: transform .22s var(--ease-out, ease); }
.lp-faq-item[open] summary svg { transform: rotate(180deg); }
.lp-faq-item p { margin: 0 4px; padding: 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .lp-faq-item summary svg { transition: none; } }
.lp-i-trends { background: rgba(48,209,88,.14); color: #1c7a37; }
.lp-i-loan { background: rgba(255,159,10,.14); color: #b3261e; }
.lp-i-lock { background: rgba(120,120,128,.14); color: var(--ink-2); }
.lp-feature h3 { font-size: 17px; font-weight: 650; margin: 0 0 7px; color: var(--ink); }
.lp-feature p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }

.lp-final { text-align: center; max-width: 720px; margin: 30px auto; padding: 56px 24px; }
.lp-final h2 { font-size: 30px; font-weight: 720; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); }
.lp-final p { font-size: 16px; color: var(--ink-2); margin: 0 0 24px; }
.lp-footer { max-width: 1080px; margin: 0 auto; padding: 26px 24px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--hair); }
.lp-foot-links { display: flex; gap: 18px; }
.lp-foot-links a { color: var(--ink-3); text-decoration: none; }
.lp-foot-links a:hover { color: var(--ink-2); }
@media (max-width: 760px) { .lp-grid { grid-template-columns: 1fr; } }
/* ============================================================
   Loan detail — FINAL: "analyst" financial ledger, with
   editorial story-strip + computed milestone dividers and
   calm's cumulative-paydown micro-rail + extra-payment chip.
   Additive over plot.css / plot-features.css. New namespaced
   classes only (.ledger-* / .story-* / .lm-* / .paid-* /
   .month-extra) — they sidestep the legacy .amort-year /
   .amort-table rules (plot-features.css ~293-303) entirely,
   so no old amortization CSS can leak into this markup.
   Reduced-motion + dark-mode safe via shared tokens.
   ============================================================ */

/* ── editorial lede: three-beat story strip ─────────────────────────────── */
.story-strip {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0 22px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm), var(--inset-hi);
  padding: 19px 24px;
}
.story-beat { min-width: 0; }
.story-step {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4);
}
.story-strip.accent-blue .story-step { color: var(--blue); }
.story-strip.accent-orange .story-step { color: var(--orange); }
.story-line {
  font-family: var(--font-display);
  font-size: 15px; line-height: 1.5; letter-spacing: -.012em;
  color: var(--ink-2); margin-top: 7px; font-weight: 450;
}
.story-line strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.story-rule { width: 1px; background: var(--hair); align-self: stretch; }

@media (max-width: 980px) {
  .story-strip { grid-template-columns: 1fr; gap: 15px; }
  .story-rule { width: auto; height: 1px; }
}

/* ── ledger card framing ── */
.ledger-card { padding-bottom: 6px; }

/* ── Email-digest preferences (/account/notifications) ── */
.digest-opt { display: flex; align-items: center; gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--hair); cursor: pointer; }
.digest-opt:last-of-type { border-bottom: none; }
.digest-opt-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.digest-opt-ic svg { width: 19px; height: 19px; }
.digest-opt-text { flex: 1 1 auto; min-width: 0; }
.digest-opt-k { display: block; font-size: 15px; font-weight: 580; color: var(--ink); }
.digest-opt-v { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.digest-opt input[type="checkbox"] { width: 20px; height: 20px; flex: none; cursor: pointer; }

/* ── donut legend (Reports → Expenses: Spending by category / group) ── */
.donut-legend { list-style: none; margin: 16px 0 2px; padding: 0; display: grid; gap: 1px; }
.donut-legend__row {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) 46px 84px; align-items: center;
  gap: 11px; padding: 7px 9px; border-radius: 9px; transition: background .12s;
}
.donut-legend__row:hover { background: var(--surface-2); }
a.donut-legend__row { text-decoration: none; color: inherit; cursor: pointer; }
.donut-legend__dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.donut-legend__name { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend__pct { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.donut-legend__val { font-size: 13px; color: var(--ink-2); font-weight: 560; font-variant-numeric: tabular-nums; text-align: right; }

/* ── headline totals: paid-to-date vs remaining ── */
.ledger-totals {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.ledger-total {
  display: flex; flex-direction: column; gap: 4px;
  padding: 15px 20px;
  border-left: 1px solid var(--hair);
}
.ledger-total:first-child { border-left: none; }
.ledger-total-k {
  font-size: 11px; font-weight: 650; letter-spacing: .3px;
  text-transform: uppercase; color: var(--ink-3);
}
.ledger-total .num {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ── shared column grid: header + every year summary line up exactly ── */
.ledger-head,
.ledger-year > summary {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) 1fr 1fr 1fr minmax(150px, 1.3fr) 96px;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

.ledger-head {
  height: 38px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-3);
}
.ledger-head .lh-num,
.ledger-head .lh-pct { text-align: right; }
.ledger-head .lh-mix { text-align: left; }

/* ── one row per year ── */
.ledger-year { border-bottom: 1px solid var(--hair); }
.ledger-year:last-of-type { border-bottom: none; }
.ledger-year > summary {
  min-height: 50px;
  cursor: pointer; list-style: none;
  font-size: 14px;
  transition: background .13s var(--ease, ease);
  position: relative;
}
.ledger-year > summary::-webkit-details-marker { display: none; }
.ledger-year > summary:hover { background: var(--surface-hover); }

.ly-year { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ly-chev {
  display: inline-grid; place-items: center; color: var(--ink-4);
  transition: transform .2s var(--ease, ease);
}
.ly-chev svg { width: 14px; height: 14px; }
.ledger-year[open] > summary .ly-chev { transform: rotate(90deg); color: var(--ink-2); }
.ly-yearnum {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -.01em;
}

.ly-num {
  text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px;
}

/* principal : interest inline ratio bar (the split, one fact) */
.ly-mix { display: flex; align-items: center; }
.mix-track {
  display: flex; width: 100%; height: 7px; border-radius: 4px;
  overflow: hidden; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.mix-p { background: var(--blue); height: 100%; transition: width .5s var(--ease, ease); }
.mix-i { background: #FF9F0A; height: 100%; transition: width .5s var(--ease, ease); }

/* % paid off cell: a calm blue→green cumulative-paydown micro-rail (one fact)
   plus its readout, so it encodes a different thing than the split bar */
.ly-pct {
  display: flex; align-items: center; gap: 9px; justify-content: flex-end;
}
.paid-rail {
  position: relative; flex: 1; min-width: 28px; height: 6px;
  border-radius: 980px; background: var(--paper-2); overflow: hidden;
}
.paid-rail-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 980px;
  background: linear-gradient(90deg, var(--blue), var(--green-vivid));
  transition: width .55s var(--ease, ease);
}
.paid-pct {
  font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); min-width: 34px; text-align: right;
}

/* timeline rhythm: past = dimmed, current = tinted rail + tag, future = full ink */
.ledger-year.is-past > summary { color: var(--ink-3); }
.ledger-year.is-past > summary .ly-yearnum { color: var(--ink-2); }
.ledger-year.is-past .mix-track { opacity: .72; }

.ledger-year.is-now > summary {
  background: var(--blue-soft);
  box-shadow: inset 3px 0 0 var(--blue);
}
.ledger-year.is-now > summary:hover { background: var(--blue-soft); filter: saturate(1.05); }
.ledger-year.is-now .ly-yearnum { color: var(--blue); font-weight: 680; }
.ly-here {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--blue); background: var(--surface);
  border: 1px solid var(--blue); border-radius: 980px;
  padding: 2px 8px; line-height: 1.4; white-space: nowrap;
}

/* ── milestone dividers: hairline rule + small icon + one sentence ──
   (subtle inline rows between year rows — no heavy gradient nodes) */
.ledger-milestone {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(90deg, var(--blue-soft), transparent 60%);
}
.lm-ico {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; color: var(--blue);
}
.lm-ico svg { width: 16px; height: 16px; }
.lm-text { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.lm-text strong { color: var(--ink); font-weight: 650; }

/* ── expanded month detail ── */
.ly-detail {
  background: var(--surface-2);
  border-top: 1px solid var(--hair);
  padding: 4px 12px 14px;
}
.month-table { margin: 0; width: 100%; }
.month-table th {
  font-size: 11px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 14px;
}
.month-table td { padding: 8px 14px; font-size: 13px; }
.month-table tfoot td {
  border-top: 1px solid var(--border);
  font-weight: 650; font-size: 12.5px;
}
.month-table tbody tr td:first-child { box-shadow: none; }
.month-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--blue); }

/* calm's extra-payment chip — surfaces the payoff-calculator scenario in-table */
.month-extra {
  font-size: 11px; font-weight: 600; color: var(--blue);
  background: var(--blue-soft); border-radius: 980px;
  padding: 1px 6px; margin-left: 4px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* subtle open animation for the detail drawer */
@media (prefers-reduced-motion: no-preference) {
  .ledger-year[open] > .ly-detail { animation: ledger-open .26s var(--ease, cubic-bezier(.32,.72,0,1)) both; }
}
@keyframes ledger-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── ledger legend ── */
.ledger-legend {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px; color: var(--ink-3);
}

/* ── responsive: collapse the ratio bar + pct on narrow widths ── */
@media (max-width: 860px) {
  .ledger-totals { grid-template-columns: 1fr 1fr; }
  .ledger-total:nth-child(2) { border-left: none; }
  .ledger-total:nth-child(3),
  .ledger-total:nth-child(4) { border-top: 1px solid var(--hair); }
  .ledger-total:nth-child(3) { border-left: none; }
  .ledger-head,
  .ledger-year > summary {
    grid-template-columns: minmax(96px, 1fr) 1fr 1fr 1fr;
    gap: 12px;
  }
  .ledger-head .lh-mix, .ledger-head .lh-pct,
  .ly-mix, .ly-pct { display: none; }
}
@media (max-width: 560px) {
  .ledger-head,
  .ledger-year > summary {
    grid-template-columns: minmax(80px, 1fr) 1fr 1fr;
  }
  .ledger-head .lh-num:nth-of-type(3),
  .ly-num:nth-of-type(2) { display: none; } /* hide interest col, keep principal + balance */
}

/* ── "Loan at a glance" stat rows ───────────────────────────────────────── */
.glance-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair);
  font-size: 14.5px;
}
.glance-row:last-child { border-bottom: 0; }
.glance-row .num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── register view options (sort / running balance / hide reconciled) ─────── */
.reg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.reg-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: auto; }
.view-menu { position: relative; }
.view-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--sh-md); padding: 8px; animation: popIn .14s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.view-group { padding: 6px 4px; }
.view-group + .view-group { border-top: 1px solid var(--hair); margin-top: 4px; }
.view-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); padding: 2px 8px 6px; }
.view-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: background .12s var(--ease); }
.view-opt:hover { background: var(--surface-hover); }
.view-opt input { accent-color: var(--blue); }

/* running-balance column is hidden until toggled on */
.run-bal { display: none; }
.table.show-running .run-bal { display: table-cell; }
.table .run-bal { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.table .run-bal.neg { color: var(--red); }

/* reconciled lock on the clear toggle — subtle, locked look */
.clear-toggle.reconciled { background: var(--green-soft); border-color: var(--green); color: var(--green); cursor: default; }
.clear-toggle.reconciled svg { width: 12px; height: 12px; }
.clear-toggle.reconciled:hover { transform: none; border-color: var(--green); }
.clear-toggle.reconciled:active { transform: none; }
html[data-theme="dark"] .clear-toggle.reconciled { background: var(--green-soft); }

/* ── retirement planner ───────────────────────────────────────────────────── */
.account-icon.acc-retirement { background: linear-gradient(160deg, #34C759, #0E9F6E); }
.rt-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
@media (max-width: 640px) { .rt-sliders { grid-template-columns: 1fr; } }
.rt-field label { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.rt-field output { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.01em; }
.rt-field input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: var(--surface-2); outline: none; cursor: pointer;
}
.rt-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-2); box-shadow: var(--sh-sm); cursor: grab;
  transition: transform .12s var(--ease), box-shadow .15s;
}
.rt-field input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.rt-field input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); box-shadow: 0 0 0 6px var(--blue-soft); }
.rt-field input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--border-2);
  box-shadow: var(--sh-sm); cursor: grab;
}
.rt-field input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-2); }

/* retirement: today's-dollars grounding card */
.rt-today {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px;
  padding: 16px 18px; border-radius: 16px; line-height: 1.45; font-size: 14.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.rt-today-badge {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green);
}
.rt-today-badge svg { width: 22px; height: 22px; }
.rt-today-text { min-width: 0; }
.rt-today strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-today-sub { color: var(--ink-3); }
@media (max-width: 560px) { .rt-today-sub { display: none; } }

.account-icon.acc-crypto { background: linear-gradient(160deg, #F7931A, #B8690A); }

.account-icon.acc-asset { background: linear-gradient(160deg, #5E8B7E, #2F5D50); }
.account-icon.acc-realestate { background: linear-gradient(160deg, #14B8A6, #0E7C70); }

/* clickable activity number in the budget grid */
.activity-link {
  background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; border-bottom: 1px dashed transparent; transition: border-color .14s var(--ease), color .14s;
}
.activity-link:hover { color: var(--ink); border-bottom-color: var(--border-2); }

/* loan detail hero: value − owed = equity, so both sides are obvious */
.loan-hero-equity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.lhe-item { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.lhe-item .lhe-k { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.lhe-item .num { font-size: 19px; font-weight: 680; color: var(--ink); font-variant-numeric: tabular-nums; }
.lhe-item .num.neg { color: var(--red); }
.lhe-item .num.pos { color: var(--green); }
.lhe-item.lhe-net .num { font-size: 24px; }
.lhe-op { font-size: 18px; color: var(--ink-4); font-weight: 400; align-self: flex-end; padding-bottom: 2px; }

/* ── net-worth composition (reports) ──────────────────────────────────────── */
.nw-split-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.nw-split-head .nw-split-k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2px; }
.nw-split-head .num { font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; }
.nw-split-k.pos { color: var(--green); }
.nw-split-k.neg { color: var(--red); }
.nw-split-bar { height: 12px; border-radius: 999px; background: var(--red); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.nw-split-bar .nw-split-assets { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .5s var(--ease); }
.nw-split-net { text-align: center; margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
.nw-split-net strong { color: var(--ink); font-weight: 700; margin-left: 4px; }
.nw-sub-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; }
.nw-acct-list { display: flex; flex-direction: column; gap: 14px; }
.nw-acct-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.nw-acct-name { font-size: 14px; font-weight: 560; color: var(--ink); }
.nw-acct-bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nw-acct-bar span { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ease); }
.nw-acct-pct { font-size: 12px; color: var(--ink-4); margin-top: 5px; }


/* ════════════════════════════════════════════════════════════════════════
   Accounts page — net-worth banner + dense group grid
   ════════════════════════════════════════════════════════════════════════ */
.nw-banner {
  display: flex; gap: 28px; align-items: stretch; flex-wrap: wrap;
  padding: 24px 28px; border-radius: 20px; margin-bottom: 22px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.nw-banner-main { flex: 1 1 340px; min-width: 0; }
.nw-banner-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
.nw-banner-value { font-size: 40px; font-weight: 720; letter-spacing: -.025em; line-height: 1.05; margin: 4px 0 16px; }
.nw-banner-bar { display: flex; gap: 4px; height: 11px; }
.nw-bar-seg { display: block; height: 100%; border-radius: 999px; min-width: 6px; transition: flex-grow .6s var(--ease); }
.nw-bar-seg.pos { background: var(--green); }
.nw-bar-seg.neg { background: var(--red); }
.nw-banner-legend { display: flex; gap: 20px; margin-top: 10px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nw-banner-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.nw-banner-legend .dot.pos { background: var(--green); } .nw-banner-legend .dot.neg { background: var(--red); }
.nw-banner-side { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 280px; max-width: 360px; align-self: center; }
.nw-bd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.nw-bd-row:last-child { border-bottom: 0; }
.nw-bd-k { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.nw-bd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.nw-bd-v { font-size: 14.5px; font-weight: 640; font-variant-numeric: tabular-nums; }
.nw-chip { display: flex; flex-direction: column; gap: 3px; padding: 11px 16px; border-radius: 13px; background: var(--surface-2); min-width: 120px; }

.acct-cols { column-count: 2; column-gap: 18px; }
@media (max-width: 860px) { .acct-cols { column-count: 1; } }
.acct-cols .acct-card { display: inline-block; width: 100%; margin: 0 0 18px; break-inside: avoid; }
.acct-loans-wrap { margin-top: 0; }
.acct-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sh-sm); overflow: hidden; }
.acct-card-wide { grid-column: 1 / -1; }
.acct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--hair); }
.acct-card-head h2 { font-size: 16px; font-weight: 680; letter-spacing: -.01em; margin: 0; }
.acct-card-sub { font-size: 12px; color: var(--ink-4); }
.acct-card-total { font-size: 17px; font-weight: 680; font-variant-numeric: tabular-nums; }
.acct-rows { display: flex; flex-direction: column; }
.acct-line { display: flex; align-items: center; gap: 13px; padding: 14px 20px; border-bottom: 1px solid var(--hair); transition: background .14s var(--ease); }
.acct-line:last-child { border-bottom: 0; }
.acct-line:hover { background: var(--surface-hover); }
.acct-line .account-icon { width: 34px; height: 34px; border-radius: 9px; }
.acct-line-meta { flex: 1; min-width: 0; }
.acct-line-name { font-size: 14.5px; font-weight: 560; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-line-sub { font-size: 12px; color: var(--ink-4); margin-top: 1px; }
.acct-line-bal { text-align: right; flex: none; }
.acct-line-bal .num { display: block; font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; }
.acct-line-pct { font-size: 11px; color: var(--ink-4); }
.account-reorder-toggle svg { width: 16px; height: 16px; }
.account-reorder-toggle[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.acct-sort-row { position: relative; display: flex; align-items: stretch; min-width: 0; border-bottom: 1px solid var(--hair); transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.acct-sort-row:last-child { border-bottom: 0; }
.acct-sort-row > .acct-line { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.acct-reorder-handle, .acct-order-controls { display: none; }
.accounts-reordering .acct-sort-row > .acct-line { pointer-events: none; padding-inline: 12px; }
.accounts-reordering .acct-reorder-handle { display: grid; place-items: center; flex: 0 0 38px; border: 0; border-right: 1px solid var(--hair); background: transparent; color: var(--ink-4); cursor: grab; touch-action: none; }
.accounts-reordering .acct-reorder-handle:active { cursor: grabbing; }
.acct-reorder-handle svg { width: 18px; height: 18px; }
.accounts-reordering .acct-order-controls { display: flex; align-items: center; flex: none; padding-right: 8px; }
.acct-order-controls button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); cursor: pointer; }
.acct-order-controls button:hover, .acct-order-controls button:focus-visible { background: var(--blue-soft); color: var(--blue); }
.acct-order-controls button:disabled { opacity: .25; cursor: default; }
.acct-order-controls svg { width: 16px; height: 16px; }
.acct-sort-row.dragging { opacity: .42; }
.acct-sort-row.drag-over { background: var(--blue-soft); box-shadow: inset 0 2px 0 var(--blue); }
@media (max-width: 640px) {
  .accounts-reordering .acct-reorder-handle { flex-basis: 36px; }
  .accounts-reordering .acct-sort-row > .acct-line { padding-inline: 9px; }
  .accounts-reordering .acct-order-controls { padding-right: 4px; }
  .acct-order-controls button { width: 40px; height: 44px; }
}
.acct-empty { padding: 22px 20px; color: var(--ink-4); font-size: 13.5px; text-align: center; }
.acct-line-loan .loan-figs { display: flex; gap: 22px; }
@media (max-width: 560px) { .acct-line-loan .loan-figs { gap: 14px; } .nw-banner-value { font-size: 32px; } }


/* ════════════════════════════════════════════════════════════════════════
   Amount Sheet — type or slide a money value with smart snap points
   ════════════════════════════════════════════════════════════════════════ */
/* Right-justified so the "$" adornment hugs the figure (ledger look). The input
   sizes to its content where supported (Chromium); elsewhere it falls back to a
   fixed width — still tidy, just a little extra room. */
.assign-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.assign-wrap .assign-input { flex: 0 1 auto; width: 88px; field-sizing: content; min-width: 3ch; max-width: 128px; padding-left: 6px; padding-right: 8px; }
.assign-tune {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-3); cursor: pointer; display: grid; place-items: center;
  opacity: 1; transition: opacity .14s var(--ease), background .14s, color .14s, transform .1s;
}
/* In the dense budget grid, reveal on hover; everywhere else (modals) keep it visible. */
.cat-row .assign-tune { opacity: 0; }
.cat-row:hover .assign-tune, .cat-row .assign-tune:focus-visible { opacity: 1; }
.assign-tune:hover { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.assign-tune:active { transform: scale(.92); }
.assign-tune svg { width: 15px; height: 15px; }

.amount-sheet { max-width: 416px; width: calc(100vw - 36px); border-radius: 26px; padding: 0; overflow: hidden; }
.amount-sheet::backdrop { background: rgba(20,16,12,.42); backdrop-filter: blur(3px); }
.amount-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 0; }
.amount-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 3px 0 0; }
.amount-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.amount-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .14s, color .14s, transform .1s; }
.amount-close:hover { background: var(--surface-hover); color: var(--ink); }
.amount-close:active { transform: scale(.9); }
.amount-close svg { width: 15px; height: 15px; }
.amount-body { padding: 8px 24px 24px; }

.amount-display { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 22px 0 6px; }
.amount-cur { font-size: 28px; font-weight: 600; color: var(--ink-3); letter-spacing: -.02em; }
.amount-big {
  border: none; background: none; text-align: left; color: var(--ink); width: auto; max-width: 78%;
  font-family: var(--font-display); font-size: 50px; font-weight: 740; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; outline: none; padding: 0; field-sizing: content; min-width: 1.5ch;
}
.amount-context { text-align: center; font-size: 13px; font-weight: 560; color: var(--ink-3); min-height: 19px; margin-bottom: 18px; transition: color .15s; }
.amount-context.over { color: var(--green); }
.amount-context.under { color: var(--amber); }
.amount-context.on { color: var(--blue); }

.amount-track { position: relative; padding: 16px 0 22px; }
.amount-track input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px;
  background: var(--surface-2); outline: none; cursor: pointer; position: relative; z-index: 2;
}
.amount-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 6px rgba(10,132,255,.28), 0 4px 14px rgba(0,0,0,.14);
  cursor: grab; transition: transform .1s var(--ease), box-shadow .15s; margin-top: 0;
}
.amount-track input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.06); }
.amount-track input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); box-shadow: 0 0 0 8px var(--blue-soft), 0 2px 6px rgba(10,132,255,.3); }
.amount-track input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 6px rgba(10,132,255,.28); cursor: grab; }
.amount-ticks { position: absolute; left: 0; right: 0; top: 16px; height: 10px; pointer-events: none; z-index: 1; }
.amount-tick { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); opacity: .3; transform: translate(-50%, -50%); }

.amount-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.amount-chip {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 11px 14px; border-radius: 15px; border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; transition: border-color .14s var(--ease), background .14s, transform .08s; min-width: 96px; text-align: left;
}
.amount-chip:hover { border-color: var(--border-2); background: var(--surface-hover); }
.amount-chip:active { transform: scale(.97); }
.amount-chip.on { border-color: var(--blue); background: var(--blue-soft); }
.amount-chip-k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.amount-chip.on .amount-chip-k { color: var(--blue); }
.amount-chip-v { font-size: 15.5px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.01em; }
.amount-chip-tick { position: absolute; top: 9px; right: 10px; width: 17px; height: 17px; border-radius: 50%; background: var(--blue); color: #fff; display: none; place-items: center; }
.amount-chip.on .amount-chip-tick { display: grid; }
.amount-chip-tick svg { width: 11px; height: 11px; }

.amount-confirm {
  width: 100%; margin-top: 22px; border: none; border-radius: 16px; cursor: pointer;
  background: var(--blue); color: #fff; font-family: var(--font-body); font-weight: 640; font-size: 16px;
  letter-spacing: -.01em; padding: 15px; box-shadow: 0 4px 14px rgba(10,132,255,.32); transition: background .15s, transform .08s, box-shadow .15s;
}
.amount-confirm:hover { background: var(--blue-press, #0066d6); }
.amount-confirm:active { transform: scale(.985); box-shadow: 0 2px 8px rgba(10,132,255,.3); }
html[data-theme="dark"] .amount-big, html[data-theme="dark"] .amount-chip-v { color: var(--ink); }


/* ── subscriptions ────────────────────────────────────────────────────────── */
.sub-toggle { width: 42px; height: 25px; border-radius: 999px; border: none; background: var(--surface-2); cursor: pointer; padding: 0; position: relative; transition: background .18s var(--ease); }
.sub-toggle.on { background: var(--green); }
.sub-toggle-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform .18s var(--ease); }
.sub-toggle.on .sub-toggle-knob { transform: translateX(17px); }
.row-muted { opacity: .55; }

/* built-in (system) category lock badge in the budget grid */
.sys-lock { display: inline-flex; align-items: center; color: var(--ink-4); margin-left: 2px; }
.sys-lock svg { width: 13px; height: 13px; }


/* settings → nested page link rows */
.settings-link { display: flex; align-items: center; gap: 14px; padding: 18px 20px; text-decoration: none; transition: background .14s var(--ease); }
.settings-link:hover { background: var(--surface-hover); }
.settings-link-main { flex: 1; min-width: 0; }
.settings-link-main h3 { margin: 0 0 2px; font-size: 16px; }
.settings-link-main p { margin: 0; }
.settings-link-chev { width: 18px; height: 18px; color: var(--ink-4); flex: none; }

/* sidebar admin entry */
.sidebar-admin { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 9px 12px; border-radius: 11px; text-decoration: none; font-size: 13.5px; font-weight: 560; color: var(--ink-2); background: transparent; border: 1px solid var(--hair); transition: background .14s, color .14s; }
.sidebar-admin:hover { background: var(--overlay-hover); color: var(--ink); }
.sidebar-admin.active { background: var(--coral-soft); color: var(--coral-2); }
.sidebar-admin svg { width: 17px; height: 17px; flex: none; }

/* admin portal */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }


/* subscriptions: upcoming renewals strip */
.upcoming-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 6px; }
.upcoming-item { flex: 0 0 auto; min-width: 150px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.upcoming-item.soon { border-color: var(--amber); background: var(--amber-soft); }
.upcoming-when { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-4); }
.upcoming-item.soon .upcoming-when { color: var(--amber); }
.upcoming-name { font-size: 15px; font-weight: 620; margin: 3px 0 2px; }
.upcoming-meta { font-size: 12.5px; color: var(--ink-3); }
.upcoming-meta .num { font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════════
   Subscriptions — hero, brand avatars, spend breakdown, polished cards
   ════════════════════════════════════════════════════════════════════════ */
.subs-hero {
  display: flex; gap: 30px; flex-wrap: wrap; padding: 26px 30px; border-radius: 22px;
  background:
    radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 55%),
    radial-gradient(130% 150% at 0% 100%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.subs-hero-main { flex: 1 1 380px; min-width: 0; }
.subs-hero-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.subs-hero-figure { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.subs-hero-figure .num { font-family: var(--font-display); font-size: 44px; font-weight: 740; letter-spacing: -.03em; }
.subs-hero-per { font-size: 17px; font-weight: 600; color: var(--ink-3); }
.subs-hero-meta { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.subs-hero-meta strong { color: var(--ink); font-weight: 640; }
.subs-bar { display: flex; gap: 3px; height: 14px; margin: 18px 0 12px; }
.subs-bar-seg { display: block; height: 100%; border-radius: 5px; min-width: 5px; transition: opacity .14s; }
.subs-bar-seg:hover { opacity: .82; }
.subs-bar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.subs-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.subs-leg-dot { width: 9px; height: 9px; border-radius: 50%; }
.subs-hero-side { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 150px; }
.subs-mini { display: flex; flex-direction: column; gap: 1px; padding: 11px 16px; border-radius: 13px; background: var(--surface-2); }
.subs-mini-k { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.subs-mini .num { font-size: 17px; font-weight: 680; font-variant-numeric: tabular-nums; }
.subs-mini .num small { font-size: 11.5px; font-weight: 500; color: var(--ink-4); }

.subs-avatar { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.01em; box-shadow: var(--sh-sm); }

.subs-upcoming { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
.subs-up-card { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-width: 230px; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.subs-up-card.soon { border-color: var(--amber); background: var(--amber-soft); }
.subs-up-body { flex: 1; min-width: 0; }
.subs-up-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subs-up-when { font-size: 12px; color: var(--ink-3); }
.subs-up-card.soon .subs-up-when { color: var(--amber); font-weight: 600; }
.subs-up-amt { font-size: 14.5px; font-weight: 640; }

.subs-list { display: flex; flex-direction: column; gap: 10px; }
.subs-row {
  display: flex; align-items: center; gap: 15px; padding: 14px 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm);
  transition: transform .1s var(--ease), box-shadow .15s, border-color .15s;
}
.subs-row:hover { box-shadow: var(--sh); border-color: var(--border-2); transform: translateY(-1px); }
.subs-row.is-muted { opacity: .55; }
.subs-main { flex: 1; min-width: 0; }
.subs-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; flex-wrap: wrap; }
.subs-meta { font-size: 12.5px; color: var(--ink-4); margin-top: 2px; }
.subs-budget-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.subs-cost { text-align: right; flex: none; min-width: 96px; }
.subs-cost-m { font-size: 15.5px; font-weight: 660; }
.subs-per { font-size: 11.5px; font-weight: 500; color: var(--ink-4); }
.subs-cost-a { font-size: 12px; margin-top: 1px; }
.subs-acts { display: flex; gap: 2px; flex: none; }
.pill-soft { background: var(--blue-soft); color: var(--blue); border: none; }


/* ════════════════════════════════════════════════════════════════════════
   Admin portal — its own shell, top nav, KPIs, feeds
   ════════════════════════════════════════════════════════════════════════ */
.admin-shell { min-height: 100vh; background: var(--paper); }
.admin-bar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 60px; background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.admin-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; flex: none; }
.admin-logo b { font-weight: 800; }
/* The tab strip takes the middle space and scrolls horizontally if the tabs
   don't all fit, so the logo + right-side actions are never pushed off-screen. */
.admin-tabs { display: flex; gap: 4px; align-items: center; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.admin-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 560; color: var(--ink-3); transition: background .14s, color .14s; white-space: nowrap; }
.admin-tab:hover { background: var(--surface-hover); color: var(--ink); }
.admin-tab.active { background: var(--ink); color: var(--paper); }

/* Grouped dropdown menus (native <details> — no JS, no browser dialogs) */
.admin-menu { position: relative; }
.admin-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.admin-menu > summary::-webkit-details-marker { display: none; }
.admin-menu.active > summary { background: var(--ink); color: var(--paper); }
.admin-menu-chev { width: 12px; height: 12px; transition: transform .16s ease; opacity: .8; }
.admin-menu[open] > summary .admin-menu-chev { transform: rotate(180deg); }
.admin-menu[open] > summary { background: var(--surface-hover); color: var(--ink); }
.admin-menu-pop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 70; min-width: 184px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--sh-lg, 0 18px 44px -14px rgba(0,0,0,.28)); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  animation: admin-menu-in .14s ease;
}
@keyframes admin-menu-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.admin-menu-link { padding: 8px 11px; border-radius: 9px; text-decoration: none; font-size: 13.5px; font-weight: 540; color: var(--ink-2); white-space: nowrap; transition: background .12s, color .12s; }
.admin-menu-link:hover { background: var(--surface-hover); color: var(--ink); }
.admin-menu-link.active { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); font-weight: 620; }
.admin-bar-right { flex: none; display: flex; align-items: center; gap: 12px; }
.admin-whoami { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.admin-version { font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; padding: 3px 8px; background: var(--fill); border-radius: 7px; flex: none; }
.admin-whoami { font-size: 13px; color: var(--ink-4); }
.admin-wrap { max-width: 1160px; margin: 0 auto; padding: 28px 26px 60px; }
.admin-h1 { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin: 0 0 20px; display: flex; align-items: center; gap: 11px; }
.admin-count { font-size: 14px; font-weight: 600; color: var(--ink-4); background: var(--surface-2); padding: 2px 11px; border-radius: 999px; }
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-head-row .admin-h1 { margin: 0; }
.admin-head-stats { display: flex; gap: 20px; font-size: 14px; color: var(--ink-2); }
.admin-head-stats .num { font-weight: 700; }
.admin-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); padding: 5px 12px; border-radius: 999px; }
.admin-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: admin-pulse 2.4s ease-out infinite; }
@keyframes admin-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Revenue spotlight */
.admin-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: stretch;
  background: linear-gradient(135deg, #FF8A64 0%, #FF6D3F 58%, #F0592B 100%); color: #fff;
  border-radius: 20px; padding: 26px 28px; margin-bottom: 20px; box-shadow: 0 14px 38px -16px rgba(240, 89, 43, .55); overflow: hidden; }
.admin-hero-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.admin-hero-k { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.admin-hero-v { font-size: 46px; font-weight: 760; letter-spacing: -.03em; line-height: 1.04; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.admin-hero-s { font-size: 13.5px; color: rgba(255,255,255,.88); }
.admin-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-chip { font-size: 12.5px; color: rgba(255,255,255,.95); background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(2px); }
.hero-chip b { font-weight: 720; }
.admin-hero-chart { display: flex; flex-direction: column; min-width: 0; }
.admin-hero-chart-k { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 6px; }
@media (max-width: 760px) { .admin-hero { grid-template-columns: 1fr; gap: 18px; } .admin-hero-v { font-size: 40px; } }

.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
/* Billing tab — subscription-status breakdown list */
.bill-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bill-status-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px; border-radius: 9px; transition: background .12s; }
.bill-status-list li:hover { background: var(--surface-2); }
.bill-status-n { font-variant-numeric: tabular-nums; font-weight: 640; font-size: 15px; color: var(--ink); }
/* Performance tab — compact time-series chart grid (3-up, reflows) */
.perf-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.perf-chart-card { display: flex; flex-direction: column; }
.perf-chart-card .card-head { padding: 13px 15px 0; border-bottom: 0; }
.perf-chart-card .card-head h3 { font-size: 13px; font-weight: 640; letter-spacing: -.01em; }
.perf-chart-card .card-head .text-sm { font-size: 10.5px; }
.perf-chart-card .card-pad { padding: 8px 14px 14px; }
.perf-chart-box { height: 132px; position: relative; }
@media (max-width: 1180px) { .perf-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .perf-charts { grid-template-columns: 1fr; gap: 14px; } }
.admin-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sh-sm); border-left: 3px solid var(--ink-4); }
.admin-kpi.accent-blue { border-left-color: var(--blue); }
.admin-kpi.accent-green { border-left-color: var(--green); }
.admin-kpi.accent-purple { border-left-color: var(--purple); }
.admin-kpi.accent-orange { border-left-color: var(--coral); }
.admin-kpi.accent-red { border-left-color: var(--red); }
.admin-kpi-k { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-4); }
.admin-kpi-v { font-size: 30px; font-weight: 720; letter-spacing: -.025em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.admin-kpi-s { font-size: 12.5px; color: var(--ink-3); }

.admin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .admin-grid2 { grid-template-columns: 1fr; } }

.admin-bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 10px; }
.admin-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 7px; }
.admin-bar-fill { width: 100%; max-width: 46px; background: linear-gradient(180deg, var(--blue), var(--blue-press, #0066d6)); border-radius: 8px 8px 0 0; min-height: 4px; position: relative; display: flex; justify-content: center; }
.admin-bar-fill span { position: absolute; top: -19px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.admin-bar-x { font-size: 12px; color: var(--ink-4); }

.admin-feed { display: flex; flex-direction: column; }
.admin-feed-row { display: flex; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--hair); }
.admin-feed-row:last-child { border-bottom: 0; }
.admin-feed-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--ink-4); }
.admin-feed-dot.act-create { background: var(--green); }
.admin-feed-dot.act-update { background: var(--blue); }
.admin-feed-dot.act-delete { background: var(--red); }
.admin-feed-text { font-size: 13.5px; color: var(--ink); }
.admin-feed-meta { font-size: 12px; color: var(--ink-4); margin-top: 1px; }
.admin-user-cell { display: flex; flex-direction: column; text-decoration: none; }
.admin-user-cell .account-name { color: var(--ink); }
.admin-user-cell:hover .account-name { color: var(--blue); }
/* (.pill-amber lives in plot.css with AA-contrast color; the duplicate that
   overrode it has been removed) */


/* subscriptions: simulated-distribution pie centerpiece */
.subs-pie-note { margin: -2px 0 20px; max-width: 660px; line-height: 1.55; }
.subs-pie-note em { font-style: italic; color: var(--ink-2); }
.subs-pie { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
@media (min-width: 720px) { .subs-pie { align-items: center; flex-wrap: nowrap; } .subs-pie-chart { align-self: center; } }
.subs-pie-chart { position: relative; width: 230px; height: 230px; flex: none; }
.subs-pie-chart canvas { width: 100% !important; height: 100% !important; }
.subs-pie-center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 18px; }
.subs-pie-total { font-family: var(--font-display); font-size: 24px; font-weight: 740; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
.subs-pie-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-top: 4px; }
.subs-pie-legend { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.subs-pie-leg { display: flex; align-items: center; gap: 12px; }
.subs-pie-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.subs-pie-leg-main { flex: 1; min-width: 0; }
.subs-pie-leg-name { font-size: 13.5px; font-weight: 560; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subs-pie-leg-bar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 5px; }
.subs-pie-leg-bar span { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ease); }
.subs-pie-leg-amt { text-align: right; flex: none; min-width: 78px; }
.subs-pie-leg-amt .num { display: block; font-size: 13.5px; font-weight: 660; font-variant-numeric: tabular-nums; }
.subs-pie-leg-pct { font-size: 11px; color: var(--ink-4); }

.row-act.is-on { color: var(--green); background: var(--green-soft); }


/* ════════════════════════════════════════════════════════════════════════
   Rich Select — searchable popover replacing native grouped <select>
   ════════════════════════════════════════════════════════════════════════ */
.rs { position: relative; }
.rs-native { display: none !important; }
.rs-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: var(--control-h);
  padding: 9px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
  text-align: left; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.rs-btn:hover { border-color: var(--ink-4); }
.rs-btn.rs-active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.rs-btn:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.rs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-label.rs-empty { color: var(--ink-4); }
.rs-chev { width: 16px; height: 16px; color: var(--ink-4); flex: none; }
.rs-active .rs-chev { color: var(--blue); }

.rs-pop {
  position: fixed; z-index: 1000; display: flex; flex-direction: column; overflow: hidden; max-height: min(56vh, 400px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-lg);
  animation: rsIn .12s var(--ease);
}
@keyframes rsIn { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: none; } }
.rs-search-wrap { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--hair); flex: none; }
.rs-search-wrap svg { width: 16px; height: 16px; color: var(--ink-4); flex: none; }
.rs-search { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 14.5px; color: var(--ink); }
.rs-search::placeholder { color: var(--ink-4); }
.rs-search-wrap:focus-within { border-bottom-color: var(--blue); }
.rs-search-wrap:focus-within svg { color: var(--blue); }
.rs-search { caret-color: var(--blue); }
.rs-list { overflow-y: auto; overflow-x: hidden; padding: 6px; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.rs-group { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); padding: 9px 10px 4px; }
.rs-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--ink-2);
}
.rs-opt.hl { background: var(--surface-hover); color: var(--ink); }
.rs-opt.on { color: var(--blue); font-weight: 560; }
.rs-opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Right-aligned secondary value (e.g. the amount available in a cover source). */
.rs-opt-meta { flex: none; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.rs-opt.on .rs-opt-meta { color: var(--blue); }
.rs-check { width: 16px; height: 16px; color: var(--blue); flex: none; opacity: 0; }
.rs-opt.on .rs-check { opacity: 1; }


/* footer zero-knowledge encryption link + explainer */
.app-footer-enc { background: none; border: none; padding: 0; font: inherit; color: var(--blue); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 560; }
.app-footer-enc:hover { text-decoration: underline; }
.app-footer-enc svg { width: 14px; height: 14px; }

.enc-modal { max-width: 560px; width: calc(100vw - 36px); border-radius: 24px; padding: 0; overflow: hidden; }
.enc-modal::backdrop { background: rgba(16,12,8,.5); backdrop-filter: blur(4px); }
.enc-head { position: relative; text-align: center; padding: 34px 32px 26px; background: radial-gradient(120% 130% at 50% -10%, var(--blue-soft), transparent 65%); }
.enc-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.enc-close svg { width: 15px; height: 15px; }
.enc-badge { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(160deg, #42A1FF, #0A84FF); color: #fff; box-shadow: 0 8px 24px rgba(10,132,255,.4); margin-bottom: 14px; }
.enc-badge svg { width: 30px; height: 30px; }
.enc-head h3 { font-size: 23px; font-weight: 720; letter-spacing: -.02em; margin: 0 0 8px; }
.enc-head p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0 auto; max-width: 440px; }
.enc-head strong { color: var(--ink); }
.enc-flow { display: flex; align-items: stretch; justify-content: center; gap: 4px; padding: 26px 24px 6px; }
.enc-node { flex: 1; text-align: center; padding: 0 6px; max-width: 160px; }
.enc-node-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; margin-bottom: 10px; color: #fff; }
.enc-ic-key { background: linear-gradient(160deg, #FFB23E, #FF8A00); }
.enc-ic-lock { background: linear-gradient(160deg, #34C759, #1F9B6B); }
.enc-ic-server { background: linear-gradient(160deg, #8E8E93, #5A5A5F); }
.enc-node-ic svg { width: 25px; height: 25px; }
.enc-node-t { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.enc-node-s { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; margin-top: 4px; }
.enc-arrow { display: flex; align-items: center; color: var(--ink-4); padding-bottom: 30px; flex: none; }
.enc-arrow svg { width: 20px; height: 20px; }
.enc-points { padding: 14px 32px 4px; display: flex; flex-direction: column; gap: 11px; }
.enc-point { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.enc-point svg { width: 17px; height: 17px; color: var(--green); flex: none; margin-top: 1px; }
.enc-done { width: calc(100% - 64px); margin: 18px 32px 28px; justify-content: center; }
@media (max-width: 540px) { .enc-flow { flex-direction: column; align-items: center; gap: 8px; } .enc-arrow { transform: rotate(90deg); padding-bottom: 0; } .enc-node { max-width: none; } }


/* ════════════════════════════════════════════════════════════════════════
   Dashboard hero — net worth, sparkline, momentum, inline metrics
   ════════════════════════════════════════════════════════════════════════ */
.dash-hero {
  position: relative; overflow: hidden; border-radius: 24px; margin-bottom: 22px;
  background: linear-gradient(135deg, #0A84FF 0%, #2563EB 45%, #5E5CE6 100%);
  color: #fff; box-shadow: 0 18px 50px -16px rgba(10,90,220,.55);
  isolation: isolate;
}
html[data-theme="dark"] .dash-hero { background: linear-gradient(135deg, #0A66CC 0%, #1E40AF 45%, #4B49C7 100%); }
.dash-hero-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(420px 300px at 88% -20%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(380px 320px at 8% 120%, rgba(0,0,0,.18), transparent 60%);
}
.dash-hero-content { position: relative; z-index: 1; padding: 26px 30px 24px; }
.dash-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dash-hero-greet { font-size: 15px; font-weight: 600; opacity: .92; letter-spacing: -.01em; }
.dash-hero-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .68; margin-top: 3px; }
.dash-hero-change { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); font-size: 13.5px; font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-hero-change svg { width: 15px; height: 15px; }
.dash-hero-change.down { background: rgba(0,0,0,.16); }
.dash-hero-value { font-family: var(--font-display); font-size: 52px; font-weight: 740; letter-spacing: -.035em; line-height: 1.02; margin: 10px 0 0; text-shadow: 0 2px 14px rgba(0,0,0,.14); }
.dash-hero-spark { height: 78px; margin: 8px -4px 18px; position: relative; }
.dash-hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dhm { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; border-radius: 15px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.14); text-decoration: none; color: #fff;
  transition: background .15s var(--ease), transform .1s; }
.dhm:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.dhm:active { transform: translateY(0) scale(.99); }
.dhm-k { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; opacity: .78; }
.dhm-v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dhm-v.neg { color: #FFD2CC; } .dhm-v.pos { color: #C8FFE0; }
/* Net-flow widget: Income/Expense stacked → arrow → Net flow (the math made visible) */
.dash-hero-metrics--flow { grid-template-columns: 1fr 2fr; }
.dash-flow { flex-direction: row; align-items: center; gap: 14px; }
.flow-stack { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.flow-mini { display: flex; flex-direction: column; gap: 1px; }
.flow-k { font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; opacity: .72; }
.flow-v { font-size: 15px; font-weight: 660; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.flow-v.pos { color: #C8FFE0; } .flow-v.neg { color: #FFD2CC; }
.flow-arrow { display: grid; place-items: center; flex: none; opacity: .5; }
.flow-arrow svg { width: 24px; height: 24px; }
.flow-net { display: flex; flex-direction: column; gap: 3px; margin-left: auto; text-align: right; }
.flow-net .dhm-v { font-size: 25px; }
@media (max-width: 720px) {
  .dash-hero-value { font-size: 40px; }
  .dash-hero-metrics, .dash-hero-metrics--flow { grid-template-columns: 1fr; }
}


/* budget undo history */
.undo-list { display: flex; flex-direction: column; }
.undo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--hair); }
.undo-row:last-child { border-bottom: 0; }
.undo-row.is-undone { opacity: .5; }
.undo-row-label { font-size: 14px; font-weight: 560; color: var(--ink); }
.undo-row-meta { font-size: 12px; color: var(--ink-4); margin-top: 2px; }


/* sidebar feedback button + feedback modal */
.sidebar-feedback { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--hair); cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 560; color: var(--ink-2); background: transparent; transition: background .14s, color .14s; }
.sidebar-feedback:hover { background: var(--overlay-hover); color: var(--ink); }
.sidebar-feedback svg { width: 17px; height: 17px; flex: none; }

.fb-modal { max-width: 460px; width: calc(100vw - 36px); border-radius: 24px; padding: 0; overflow: hidden; }
.fb-head { position: relative; text-align: center; padding: 30px 30px 22px; background: radial-gradient(120% 130% at 50% -10%, var(--blue-soft), transparent 62%); }
.fb-badge { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(160deg, #42A1FF, #0A84FF); color: #fff; box-shadow: 0 8px 22px rgba(10,132,255,.38); margin-bottom: 12px; }
.fb-badge svg { width: 26px; height: 26px; }
.fb-head h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.fb-head p { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.fb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fb-type { position: relative; cursor: pointer; }
.fb-type input { position: absolute; opacity: 0; pointer-events: none; }
.fb-type > .fb-type-ic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 13px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-3); transition: all .14s var(--ease); margin-bottom: 5px; }
.fb-type-ic svg { width: 22px; height: 22px; }
.fb-type-lbl { display: block; text-align: center; font-size: 11px; font-weight: 560; color: var(--ink-3); }
.fb-type:hover .fb-type-ic { border-color: var(--border-2); }
.fb-type input:checked ~ .fb-type-ic { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); transform: translateY(-1px); }
.fb-type input:checked ~ .fb-type-lbl { color: var(--blue); font-weight: 640; }


/* reconciled (locked) transaction row indicator */
.row-locked { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--ink-4); opacity: .6; }
.row-locked svg { width: 15px; height: 15px; }
tr.row-reconciled .cat-cell, tr.row-reconciled .payee, tr.row-reconciled .memo { color: var(--ink-3); }

/* admin feedback view */
.admin-seg { display: inline-flex; gap: 2px; background: var(--seg-trough); border: 1px solid var(--border); border-radius: var(--seg-radius); padding: 3px; }
.admin-seg-btn { padding: 6px 13px; border-radius: var(--seg-pill-radius); font-size: 13px; font-weight: 560; color: var(--ink-3); text-decoration: none; transition: background .12s, color .12s; }
.admin-seg-btn:hover { color: var(--ink); }
.admin-seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.admin-fb-tick { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.admin-fb-list { display: flex; flex-direction: column; }
.admin-fb-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.admin-fb-row:last-child { border-bottom: none; }
.admin-fb-row.is-reviewed { opacity: .58; }
.admin-fb-badge { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 680; letter-spacing: .02em; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.admin-fb-body { flex: 1 1 auto; min-width: 0; }
.admin-fb-msg { font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.admin-fb-meta { margin-top: 5px; font-size: 12px; color: var(--ink-4); }
.admin-fb-meta .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.admin-fb-act { flex: none; }

/* locked (app-managed) budget group + category */
.drag-handle-spacer { display: inline-block; width: 16px; }
.group-row.group-locked .group-name { opacity: .92; }
.group-row.group-locked .sys-lock { margin-left: 6px; }
.cat-row.cat-locked .drag-handle-spacer { opacity: 0; }

/* pinned compact Ready-to-Assign (budget page) */
.rta-pin { position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0; z-index: 45;
  display: flex; justify-content: center; pointer-events: none;
  opacity: 0; transform: translateY(-10px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.rta-pin.show { opacity: 1; transform: translateY(0); }
.rta-pin-inner { pointer-events: auto; margin-top: 12px; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--border); box-shadow: 0 8px 26px rgba(0,0,0,.12); backdrop-filter: blur(8px); }
.rta-pin-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); flex: none; }
.rta-pin-label { font-size: 12.5px; font-weight: 560; color: var(--ink-3); letter-spacing: -.01em; }
.rta-pin-amt { font-size: 15px; font-weight: 680; color: var(--ink); letter-spacing: -.02em; }
.rta-pin.is-ready .rta-pin-dot { background: #1F9B6B; }
.rta-pin.is-ready .rta-pin-amt { color: #1F9B6B; }
.rta-pin.is-zero  .rta-pin-dot { background: var(--ink-4); }
.rta-pin.is-over  .rta-pin-dot { background: #DC3A2A; }
.rta-pin.is-over  .rta-pin-amt { color: #DC3A2A; }
@media (max-width: 860px) { .rta-pin { left: 0; } }

/* keep the pinned RTA out of the boot entrance animation (it was flashing in
   at the top of the page during load) */
#rta-pin { animation: none !important; }
#rta-sentinel { height: 1px; margin: 0; padding: 0; pointer-events: none; }

/* ── Lifetime member celebration (billing page) ── */
.lifetime-hero { position: relative; overflow: hidden; text-align: center; padding: 40px 30px 34px;
  border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 52%, #AF52DE 100%);
  box-shadow: 0 18px 50px rgba(94,92,230,.34); }
.lifetime-crest { width: 60px; height: 60px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 18px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #FFD60A; }
.lifetime-crest svg { width: 34px; height: 34px; fill: #FFD60A; stroke: #FFD60A; }
.lifetime-badge-pill { display: inline-block; padding: 4px 13px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: rgba(255,255,255,.18); margin-bottom: 14px; }
.lifetime-title { color: #fff; font-size: 27px; font-weight: 740; letter-spacing: -.025em; margin: 0 0 8px; }
.lifetime-sub { font-size: 15px; line-height: 1.55; max-width: 440px; margin: 0 auto 24px; color: rgba(255,255,255,.92); }
.lifetime-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.lifetime-perk { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px;
  background: rgba(255,255,255,.13); }
.lp-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: rgba(255,255,255,.2); font-size: 16px; font-weight: 700; }
.lp-k { font-size: 13px; font-weight: 640; }
.lp-v { font-size: 11.5px; color: rgba(255,255,255,.82); margin-top: 1px; }
.lifetime-sparkles span { position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; opacity: 0; animation: lt-twinkle 3.2s ease-in-out infinite; }
.lifetime-sparkles span:nth-child(1){ top:18%; left:12%; animation-delay:0s; }
.lifetime-sparkles span:nth-child(2){ top:30%; left:86%; animation-delay:.5s; }
.lifetime-sparkles span:nth-child(3){ top:62%; left:8%;  animation-delay:1s; }
.lifetime-sparkles span:nth-child(4){ top:74%; left:92%; animation-delay:1.6s; width:4px; height:4px; }
.lifetime-sparkles span:nth-child(5){ top:14%; left:60%; animation-delay:2.1s; width:5px; height:5px; }
.lifetime-sparkles span:nth-child(6){ top:48%; left:44%; animation-delay:2.6s; width:3px; height:3px; }
@keyframes lt-twinkle { 0%,100%{ opacity:0; transform:scale(.5);} 50%{ opacity:.9; transform:scale(1.2);} }
@media (max-width: 600px){ .lifetime-perks{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .lifetime-sparkles span{ animation:none; } }
/* single Pro plan card centered */
.plan-solo { display: flex; justify-content: center; }
.plan-solo .plan-card { max-width: 340px; width: 100%; }

/* admin invite form */
.invite-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.admin-table th { text-align: left; font-size: 12px; color: var(--ink-4); font-weight: 600; padding: 10px 14px; }
.admin-table td { padding: 11px 14px; vertical-align: middle; }

/* ════════════ Settings — rail + panels ════════════ */
.settings-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; max-width: 1000px; margin: 0 auto; align-items: start; }
@media (max-width: 760px) { .settings-shell { grid-template-columns: 1fr; gap: 16px; } }

.settings-rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 13px; }
@media (max-width: 760px) { .settings-rail { position: static; } }
.settings-rail-id { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.settings-rail-idmain { min-width: 0; }
.settings-rail-name { font-size: 15px; font-weight: 660; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-rail-email { font-size: 12px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-rail .settings-avatar { width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
.settings-rail .settings-plan-chip { justify-content: center; }
.settings-plan-since { opacity: .68; font-weight: 500; margin-left: 5px; font-size: 11.5px; }
.settings-rail-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.settings-rail-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 11px; border: none; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 560; cursor: pointer; text-decoration: none; transition: background .13s var(--ease), color .13s, transform .08s; }
.settings-rail-item svg { width: 18px; height: 18px; flex: none; color: var(--ink-4); transition: color .13s; }
.settings-rail-item:hover { background: var(--surface-hover); color: var(--ink); }
.settings-rail-item:hover svg { color: var(--ink-2); }
.settings-rail-item:active { transform: scale(.97); }
.settings-rail-item.active { background: var(--blue); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--blue) 34%, transparent); }
.settings-rail-item.active svg { color: #fff; }
.settings-rail-item.danger { color: var(--red); }
.settings-rail-item.danger svg { color: var(--red); }
.settings-rail-item.danger:hover { background: var(--red-soft); }
.settings-rail-item.danger.active { background: var(--coral); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--coral) 34%, transparent); }
.settings-rail-item.danger.active svg { color: #fff; }
.settings-rail-sep { height: 1px; background: var(--hair); margin: 7px 10px; }

.settings-content { min-width: 0; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
@media (prefers-reduced-motion: no-preference) { .settings-panel.active { animation: settingsIn .24s var(--ease-out, ease); } }
@keyframes settingsIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.settings-panel-head { margin: 0 0 18px; }
.settings-panel-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.settings-panel-head p { font-size: 13.5px; color: var(--ink-3); margin: 5px 0 0; }
.settings-inline-link { color: var(--blue); font-weight: 560; }
.settings-panel .settings-signout { margin-top: 16px; }

.pending-banner { display: flex; align-items: center; gap: 11px; padding: 11px 14px; margin-bottom: 16px; border-radius: 12px; background: var(--amber-soft); color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.pending-banner svg { width: 18px; height: 18px; flex: none; color: var(--amber); }
.pending-banner > div { flex: 1; min-width: 0; }
.pending-banner strong { color: var(--ink); }

/* ── Settings page (legacy hero/tiles, kept for any other use) ── */
.settings-page { max-width: 880px; margin: 0 auto; }
.settings-hero { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 20px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border); margin-bottom: 18px; }
.settings-avatar { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(150deg, #0A84FF, #5E5CE6); color: #fff; font-size: 25px; font-weight: 680; letter-spacing: -.02em; }
.settings-hero-main { flex: 1 1 auto; min-width: 0; }
.settings-hero-name { font-size: 19px; font-weight: 680; letter-spacing: -.02em; }
.settings-hero-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.settings-hero-side { text-align: right; flex: none; }
.settings-plan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 640; text-decoration: none; color: var(--ink); background: var(--bg);
  border: 1px solid var(--border-2); transition: border-color .14s, transform .14s; }
.settings-plan-chip:hover { transform: translateY(-1px); border-color: var(--blue); }
.settings-plan-chip.is-lifetime { color: #fff; border: none; background: linear-gradient(135deg, #5E5CE6, #AF52DE); }
.settings-plan-chip svg { width: 14px; height: 14px; }
.settings-hero-since { font-size: 11.5px; color: var(--ink-4); margin-top: 6px; }

.settings-quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.settings-tile { display: block; padding: 15px 16px; border-radius: 15px; background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; transition: transform .14s var(--ease), border-color .14s, box-shadow .14s; }
.settings-tile:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.settings-tile-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; margin-bottom: 10px;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.settings-tile-ic svg { width: 19px; height: 19px; }
.settings-tile-k { display: block; font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.settings-tile-v { display: block; font-size: 12px; color: var(--ink-4); margin-top: 2px; }

.settings-section { margin-bottom: 28px; }
.settings-section-head { margin: 0 0 12px 2px; }
.settings-section-head h2 { font-size: 16px; font-weight: 680; letter-spacing: -.02em; margin: 0; }
.settings-section-head p { font-size: 12.5px; color: var(--ink-4); margin: 3px 0 0; }
.settings-grid { columns: 2; column-gap: 14px; }
.settings-grid > .card { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 14px; width: 100%; }
/* even pair: two equal-height cards side by side (account email/display) */
.settings-grid--even { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.settings-grid--even > .card { margin: 0; display: flex; flex-direction: column; }
.settings-grid--even > .card > .card-pad { flex: 1; }
.settings-signout { margin-top: 8px; }
@media (max-width: 720px) {
  .settings-quicklinks { grid-template-columns: 1fr; }
  .settings-grid { columns: 1; }
  .settings-grid--even { grid-template-columns: 1fr; }
  .settings-hero { flex-wrap: wrap; }
}

/* zero-knowledge encryption card (settings) */
.zk-row { display: flex; align-items: flex-start; gap: 16px; }
.zk-copy { flex: 1 1 auto; min-width: 0; }
.zk-warn { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 11px;
  background: color-mix(in srgb, #DC3A2A 8%, transparent); border: 1px solid color-mix(in srgb, #DC3A2A 22%, transparent);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.zk-warn svg { width: 17px; height: 17px; min-width: 17px; flex: none; color: #DC3A2A; margin-top: 1px; }
.zk-status { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-4); }
.zk-switch { position: relative; flex: none; width: 50px; height: 30px; opacity: .55; cursor: not-allowed; }
.zk-switch input { position: absolute; opacity: 0; margin: 0; }
.zk-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--border-2); transition: background .2s; }
.zk-slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }

/* ── Site banner (admin-controlled) ── */
.banner {
  width: 100%; min-height: 38px; display: grid; place-items: center;
  padding: 8px 18px; text-align: center; font-size: 13.5px; font-weight: 560; letter-spacing: -.01em;
  position: relative; z-index: 60;
}
/* The site banner is the first element in <body>, so it spans the full viewport
   width (across the sidebar too). Push the fixed sidebar below it. */
body:has(> .banner) .sidebar { top: 38px; }
.banner-info { background: color-mix(in srgb, #0A84FF 14%, var(--bg)); color: #0A6CD6; }
.banner-success { background: color-mix(in srgb, #34C759 16%, var(--bg)); color: #1F8F45; }
.banner-warn { background: color-mix(in srgb, #FF9500 18%, var(--bg)); color: #B26A00; }

/* ── Admin controls ── */
.ctrl-card.is-armed { border-color: color-mix(in srgb, #DC3A2A 40%, transparent); }
.ctrl-actions { display: flex; gap: 10px; align-items: center; }
.ctrl-features { padding: 4px 0 8px; }
.ctrl-feature { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--border); }
.ctrl-feature:last-child { border-bottom: none; }
.ctrl-feature-main { flex: 1 1 auto; min-width: 0; }
.ctrl-feature-k { font-size: 14px; font-weight: 620; }
.ctrl-feature-v { font-size: 12.5px; color: var(--ink-4); margin-top: 1px; }
.ctrl-switch { position: relative; flex: none; width: 46px; height: 27px; border: none; border-radius: 999px;
  background: var(--border-2); cursor: pointer; transition: background .18s var(--ease); padding: 0; }
.ctrl-switch.on { background: #34C759; }
.ctrl-switch-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s var(--ease); }
.ctrl-switch.on .ctrl-switch-knob { transform: translateX(19px); }

/* ── Optional scheduled panel on the account register ── */
.sched-panel { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.sched-panel > summary { display: flex; align-items: center; gap: 11px; padding: 13px 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
.sched-panel > summary::-webkit-details-marker { display: none; }
.sched-panel-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #5E5CE6; background: color-mix(in srgb, #5E5CE6 13%, transparent); flex: none; }
.sched-panel-ic svg { width: 17px; height: 17px; }
.sched-panel-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 680; color: var(--ink-3); }
.sched-panel-chev { width: 18px; height: 18px; margin-left: auto; color: var(--ink-4); transition: transform .18s var(--ease); }
.sched-panel[open] .sched-panel-chev { transform: rotate(180deg); }
.sched-panel-body { border-top: 1px solid var(--border); }
.sched-panel-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.sched-panel-when { flex: none; width: 96px; }
.sched-panel-date { display: block; font-size: 13px; font-weight: 600; }
.sched-panel-freq { display: block; font-size: 11px; color: var(--ink-4); }
.sched-panel-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sched-panel-payee { font-size: 13.5px; font-weight: 540; }
.sched-panel-cat { font-size: 11.5px; color: var(--ink-4); }
.sched-panel-amt { flex: none; font-size: 14px; font-weight: 620; }
.sched-panel-amt.pos { color: #1F9B6B; }
.sched-panel-foot { display: block; padding: 11px 16px; font-size: 12.5px; font-weight: 560; color: var(--blue); text-decoration: none; }
.sched-panel-foot:hover { background: var(--surface-2); }

/* feedback screenshot attach */
.fb-shot { display: flex; flex-direction: column; gap: 10px; }
.fb-shot-btn { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 9px 14px;
  border-radius: 11px; border: 1px dashed var(--border-2); background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 560; cursor: pointer; transition: border-color .14s, color .14s; }
.fb-shot-btn:hover { border-color: var(--blue); color: var(--blue); }
.fb-shot-btn:disabled { opacity: .6; cursor: default; }
.fb-shot-btn svg { width: 17px; height: 17px; }
.fb-shot-preview-wrap { position: relative; align-self: flex-start; max-width: 100%; }
.fb-shot-preview-wrap img { max-width: 100%; max-height: 180px; border-radius: 10px; border: 1px solid var(--border); display: block; }
.fb-shot-clear { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.fb-shot-clear svg { width: 14px; height: 14px; }
/* admin view */
.admin-fb-shot { max-width: 280px; max-height: 160px; margin-top: 10px; border-radius: 9px; border: 1px solid var(--border); display: block; }
.admin-fb-shotlink { color: var(--blue); font-weight: 560; }


/* ════════════════════════════════════════════════════════════════════════
   Satisfying micro-interactions
   A small, reusable layer of tactile feedback for the moments that matter:
   assigning money, clearing a transaction, funding a goal, hitting $0-to-assign.
   All motion is gated behind prefers-reduced-motion: no-preference.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Tactile press on the small interactive controls (buttons already do this). */
  .avail-pill:active, .assign-tune:active, .sub-toggle:active,
  .ctrl-switch:active, .clear-toggle:active, .fb-type:active,
  .settings-tile:active { transform: scale(.94); }
  .avail-pill, .assign-tune, .sub-toggle, .ctrl-switch, .clear-toggle,
  .settings-tile { transition: transform .12s var(--ease), background .14s, color .14s, border-color .14s; }

  /* Assign → the edited row's available pill springs with a soft glow ring. */
  .cat-row.flash .avail-pill { animation: fundSpring .62s var(--ease); position: relative; }
  .cat-row.flash .avail-pill::after {
    content: ""; position: absolute; inset: -3px; border-radius: inherit;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
    opacity: 0; animation: glowRing .7s ease-out; pointer-events: none;
  }
  @keyframes fundSpring { 0%{transform:scale(1)} 30%{transform:scale(1.14)} 55%{transform:scale(.97)} 100%{transform:scale(1)} }
  @keyframes glowRing { 0%{opacity:.7; transform:scale(.9)} 100%{opacity:0; transform:scale(1.25)} }

  /* Clearing a transaction stamps the check in with a spring. */
  .clear-toggle.just-cleared { animation: stampIn .42s var(--ease); }
  @keyframes stampIn { 0%{transform:scale(0) rotate(-18deg)} 55%{transform:scale(1.25) rotate(6deg)} 100%{transform:scale(1) rotate(0)} }

  /* Fully-funded celebration: when Ready-to-Assign hits exactly $0, the banner
     gives a green glow sweep + a check pops in. Triggered from budget.html. */
  .rta.celebrate { animation: rtapulse .7s var(--ease); }
  .rta.celebrate::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    background-size: 220% 100%; animation: rtaSweep .9s ease-out;
  }
  @keyframes rtaSweep { 0%{background-position:160% 0; opacity:0} 20%{opacity:1} 100%{background-position:-60% 0; opacity:0} }
  .rta-celebrate-check {
    position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
    display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18);
    pointer-events: none; animation: celebPop 1s var(--ease) forwards; z-index: 2;
  }
  .rta-celebrate-check svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 3;
    stroke-dasharray: 30; stroke-dashoffset: 30; animation: celebDraw .5s .12s ease-out forwards; }
  @keyframes celebPop { 0%{transform:scale(.4); opacity:0} 22%{transform:scale(1); opacity:1} 78%{transform:scale(1); opacity:1} 100%{transform:scale(1.1); opacity:0} }
  @keyframes celebDraw { to { stroke-dashoffset: 0; } }
  .rta { position: relative; overflow: hidden; }
}

/* category cells render as compact pill tags; click opens the rich dropdown */
.rs-pill { display: inline-block; width: 168px; }       /* fixed — never resizes per selection */
.rs-pill .rs-btn {
  display: inline-flex; align-items: center; gap: 5px; width: 100%; min-width: 0;
  padding: 4px 11px; border-radius: 999px; min-height: 0;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-size: 12.5px; font-weight: 560; color: var(--ink-2); box-shadow: none;
}
.rs-pill .rs-btn .rs-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.rs-pill .rs-btn .rs-chev { width: 13px; height: 13px; opacity: .45; flex: none; }
.rs-pill .rs-btn:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.rs-pill .rs-btn.rs-active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
/* uncategorized = a dashed amber nudge to set one */
.rs-pill .rs-btn:has(.rs-label.rs-empty) { border-style: dashed; border-color: color-mix(in srgb, #D98A00 45%, var(--border-2)); color: #B26A00; background: transparent; }
.rs-pill .rs-btn:has(.rs-label.rs-empty):hover { border-color: #D98A00; background: color-mix(in srgb, #D98A00 8%, transparent); color: #B26A00; }

/* ════════════════════════════════════════════════════════════════════════
   Sleeker account register — denser rows, lighter chrome, refined numerics.
   Scoped to #txn-table so other tables keep their roomy default.
   ════════════════════════════════════════════════════════════════════════ */
#txn-table { font-size: 13.5px; }
#txn-table thead th { padding: 9px 14px 8px; font-size: 10.5px; letter-spacing: .055em; border-bottom: 1px solid var(--hair); }
/* Pin column labels so they stay visible while a long register scrolls.
   top:0 — the header sticks to the top of its own .table-scroll container
   (overflow makes it the scroll context), NOT the window/topbar. */
#txn-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); background-clip: padding-box; }
/* keep a crisp hairline under the pinned header (border-bottom can detach when sticky) */
#txn-table thead th::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--hair); }
#txn-table tbody td { padding: 7px 14px; border-bottom: 1px solid color-mix(in srgb, var(--hair) 60%, transparent); }
#txn-table tbody tr { transition: background .1s var(--ease); }
#txn-table tbody tr:hover { background: var(--surface-hover); }
#txn-table .payee { font-weight: 540; font-size: 13.5px; letter-spacing: -.005em; }
#txn-table .num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#txn-table .memo { font-size: 12px; }
#txn-table td.num.muted { color: var(--ink-4); font-size: 12.5px; }
/* tighter clear toggle */
#txn-table .clear-toggle { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
#txn-table .clear-toggle.reconciled svg, #txn-table .row-locked svg { width: 11px; height: 11px; }
/* row actions only surface on row hover — keeps the register clean & calm */
#txn-table td:last-child { width: 1%; white-space: nowrap; }
#txn-table .row-act, #txn-table .row-locked { width: 22px; height: 22px; opacity: 0; transition: opacity .12s var(--ease), background .12s, color .12s; }
#txn-table tbody tr:hover .row-act, #txn-table tbody tr:hover .row-locked { opacity: 1; }
#txn-table .row-act svg { width: 13px; height: 13px; }
/* amount columns: outflow neutral-dark, inflow green, both quiet until they matter */
#txn-table td.text-right.num { color: var(--ink); font-weight: 560; }
#txn-table td.text-right.num.pos { color: #1F9B6B; }
/* Memo is optional notes — hide it on narrower windows so Payee/Category/amounts
   keep their room (and the row never overflows its card → no clipped trash).
   Threshold is 1320 (not 1200): between ~1200 and ~1320 memo's 16% share starved
   Payee down to <100px; dropping memo there lets Payee stay comfortably wide.
   Genuinely wide screens (1366+ laptops, desktops) still show it. */
@media (max-width: 1320px) { #txn-table .memo { display: none; } #txn-table thead th.memo-col { display: none; } }

/* right-click transaction context menu */
.ctx-menu { position: fixed; z-index: 1200; min-width: 196px; padding: 6px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-lg);
  animation: popIn .12s var(--ease); }
.ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: none;
  background: transparent; border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 540; color: var(--ink); text-align: left; transition: background .1s; }
.ctx-item:hover { background: var(--surface-hover); }
.ctx-item svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger svg { color: var(--red); }
.ctx-item.danger:hover { background: var(--red-soft); }
.ctx-sep { height: 1px; margin: 5px 8px; background: var(--hair); }

/* overspent warning on the budget stats */
.overspent-alert { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 13px 16px;
  border-radius: 14px; background: color-mix(in srgb, #DC3A2A 8%, var(--bg));
  border: 1px solid color-mix(in srgb, #DC3A2A 26%, transparent); }
.overspent-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: color-mix(in srgb, #DC3A2A 15%, transparent); color: #DC3A2A; }
.overspent-ic svg { width: 19px; height: 19px; }
.overspent-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.overspent-body strong { font-size: 14px; font-weight: 640; color: var(--ink); letter-spacing: -.01em; }
.overspent-names { font-size: 12.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overspent-cover { flex: none; background: #DC3A2A; color: #fff; border: none; }
.overspent-cover:hover { background: #C32E20; }

/* inline-editable register cells — look like text, become inputs on focus */
.inline-edit {
  width: 100%; border: 1px solid transparent; background: transparent; border-radius: 7px;
  padding: 4px 6px; margin: -4px -6px; font: inherit; color: inherit; font-size: 13.5px;
  transition: background .12s, border-color .12s; min-width: 0;
}
.inline-edit::placeholder { color: var(--ink-4); }
#txn-table tbody tr:hover .inline-edit:not(:focus) { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.inline-edit:focus { outline: none; background: var(--bg); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); position: relative; z-index: 2; }
.inline-edit.inline-amt { text-align: right; font-variant-numeric: tabular-nums; }
.inline-edit.inline-date { color: var(--ink-3); font-size: 12.5px; }
.inline-edit.inline-memo { color: var(--ink-3); font-size: 12.5px; }
/* the inline payee combo keeps the plain look (its popover is the rich list) */
td.payee .inline-edit { font-weight: 540; }

/* cover-overspending picker */
.cover-rows { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.cover-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.cover-cat { flex: 1 1 auto; min-width: 0; }
.cover-cat-name { font-size: 14px; font-weight: 600; }
.cover-cat-short { font-size: 12.5px; color: #DC3A2A; font-weight: 560; }
.cover-arrow { width: 18px; height: 18px; color: var(--ink-4); flex: none; }
.cover-src { flex: 0 0 200px; max-width: 200px; }

/* category move-history: highlight the focused category in each move row */
.move-node.is-this { font-weight: 700; color: var(--ink); }
.move-amt.pos { color: #1F9B6B; }
.move-amt.neg { color: #DC3A2A; }

/* payee renders as a pill tag (matches the category pill) — still typeable */
#txn-table td.payee .inline-edit {
  border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2);
  padding: 4px 11px; margin: 0; width: 100%; max-width: 230px; font-weight: 540;
  text-overflow: ellipsis;
}
#txn-table tbody tr:hover td.payee .inline-edit:not(:focus) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
#txn-table td.payee .inline-edit:focus { border-color: var(--blue); background: var(--bg); box-shadow: 0 0 0 3px var(--blue-soft); color: var(--ink); max-width: none; }

/* move-money swap button (between From and To) */
.move-swap-row { display: flex; justify-content: center; margin: -6px 0; }
.move-swap { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: transform .14s var(--ease), border-color .12s, color .12s, background .12s; }
.move-swap:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.move-swap svg { width: 17px; height: 17px; }
.move-swap.spin { animation: moveSwapSpin .4s var(--ease); }
@keyframes moveSwapSpin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

/* keep the gap below the Ready-to-Assign banner — in CSS so it survives the
   OOB swap of #budget-stats on every assign (inline style was being lost) */
#budget-stats { margin-top: 18px; }
/* Tighter header rhythm: the stat cards are a glance-row under the RTA hero, so
   make them more compact than the standalone .stat used elsewhere. */
.budget-stats .stat { padding: 14px 16px 15px; }
.budget-stats .stat .value { font-size: 25px; margin-top: 4px; }
.budget-stats .stat .sub { margin-top: 3px; }

/* snooze an underfunded target */
.goal-snooze, .goal-snoozed { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
  border-radius: 999px; font-size: 12px; font-weight: 580; transition: all .13s var(--ease); }
.goal-snooze { width: 26px; height: 24px; justify-content: center; padding: 0; background: var(--surface-2); color: var(--ink-3); }
.goal-snooze:hover { background: var(--border-2); color: var(--ink); }
.goal-snooze svg { width: 14px; height: 14px; }
.goal-snoozed { padding: 4px 11px; background: color-mix(in srgb, #5E5CE6 12%, transparent); color: #5E5CE6; }
.goal-snoozed:hover { background: color-mix(in srgb, #5E5CE6 20%, transparent); }
.goal-snoozed svg { width: 13px; height: 13px; }

/* payee pill gets a dropdown chevron so it reads like the category dropdown */
#txn-table td.payee { position: relative; }
#txn-table td.payee .inline-edit {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
}

/* subscription summary — biggest row + legend amounts */
.subs-biggest { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 13px;
  border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.subs-biggest-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.subs-biggest strong { color: var(--ink); font-weight: 640; }
.subs-biggest-amt { margin-left: 4px; font-weight: 640; color: var(--ink); }
.subs-bar { margin: 16px 0 12px; }
.subs-leg { gap: 6px; }
.subs-leg-name { font-weight: 540; }
.subs-leg-amt { color: var(--ink-4); font-weight: 560; }

/* reports timeframe selector */
.report-range-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.report-range-label { font-size: 13px; font-weight: 580; color: var(--ink-3); }
.report-range-select { width: auto; min-width: 180px; }

/* cover-overspending picker — per-category, multiple sources */
.cover-cat-block { padding: 13px 14px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); }
.cover-cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.cover-cat-name { font-size: 14px; font-weight: 640; }
.cover-cat-short { font-size: 12.5px; color: #DC3A2A; font-weight: 560; }
.cover-srcs { display: flex; flex-direction: column; gap: 8px; }
.cover-src-row { display: flex; align-items: center; gap: 8px; }
.cover-from { font-size: 12.5px; color: var(--ink-4); flex: none; }
.cover-src-row .cover-src { flex: 1 1 auto; min-width: 0; }
.cover-src-row .cover-amt { flex: 0 0 110px; max-width: 110px; }
.cover-rm { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: none; background: transparent; color: var(--ink-4); border-radius: 8px; cursor: pointer; }
.cover-rm:hover { background: var(--red-soft); color: var(--red); }
.cover-rm svg { width: 14px; height: 14px; }
.cover-add { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 5px 9px; border: none; background: transparent; color: var(--blue); font-size: 12.5px; font-weight: 580; cursor: pointer; border-radius: 8px; }
.cover-add:hover { background: var(--blue-soft); }
.cover-add svg { width: 14px; height: 14px; }

/* ── Cover overspending · enhanced ── */
.cover-title { display: flex; align-items: center; gap: 12px; }
.cover-title h3 { margin: 0; line-height: 1.15; }
.cover-title-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--red-soft); color: var(--red); }
.cover-title-icon svg { width: 20px; height: 20px; }
.cover-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.cover-rta { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; background: var(--blue-soft); }
.cover-rta-label { font-size: 12.5px; font-weight: 600; color: var(--blue-press); letter-spacing: .01em; }
.cover-rta-amt { font-size: 15px; font-weight: 680; color: var(--blue-press); font-variant-numeric: tabular-nums; }
.cover-rta-amt.is-zero { color: var(--ink-3); }
.cover-cat-block { padding: 13px 14px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); transition: border-color .18s, box-shadow .18s; }
.cover-cat-block.is-covered { border-color: rgba(48,168,80,.4); box-shadow: 0 0 0 1px rgba(48,168,80,.18); }
.cover-cat-status.under { color: #DC3A2A; }
.cover-cat-status.done { color: var(--green); }
.cover-cat-status.extra { color: var(--blue); }
.cover-cat-status { font-size: 12.5px; font-weight: 580; font-variant-numeric: tabular-nums; transition: color .18s; }
.cover-bar { height: 5px; border-radius: 3px; background: var(--paper-2); overflow: hidden; margin: 0 0 11px; }
.cover-bar-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--amber); transition: width .32s var(--ease), background .2s; }
.cover-bar.full .cover-bar-fill { background: var(--green-vivid); }
.cover-amt-wrap { display: flex; align-items: center; gap: 1px; flex: 0 0 116px; max-width: 116px; padding: 0 8px 0 10px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface); transition: box-shadow .14s, border-color .14s; }
.cover-amt-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-soft); }
.cover-amt-cur { color: var(--ink-3); font-size: 13px; user-select: none; }
/* The select is upgraded to a rich-select (.rs wrapper); it must shrink so the
   amount field + remove button stay on-row. */
.cover-src-row .cover-src, .cover-src-row .rs { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.cover-src-row .cover-amt-wrap .cover-amt { flex: 1 1 auto; min-width: 0; border: none; background: transparent; padding: 7px 0; text-align: right; box-shadow: none; }
.cover-src-row .cover-amt-wrap .cover-amt:focus { box-shadow: none; outline: none; }
.cover-submit:disabled { opacity: .5; pointer-events: none; }
.cover-src-row { animation: coverRowIn .26s var(--ease); }
@keyframes coverRowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Split-on-create line (register + scheduled): category + amount on top, optional per-line payee below */
.asl-line { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 13px; background: var(--surface-2); }
.asl-line-main { display: flex; align-items: center; gap: 8px; }
.asl-line .cover-amt-wrap { flex: 0 0 112px; max-width: 112px; }
.asl-payee { font-size: 13px; padding: 7px 10px; }

/* one reusable modal close button (replaces the ✕ text glyph everywhere) */
.modal-close { width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: none; border-radius: 50%; background: var(--surface-2); color: var(--ink-3);
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), transform .1s; }
.modal-close:hover { background: var(--surface-hover); color: var(--ink); }
.modal-close:active { transform: scale(.9); }
.modal-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-soft), 0 0 0 1px var(--blue); }
.modal-close svg { width: 15px; height: 15px; }

/* ── touch & coarse-pointer affordances (Tier 4.5) ───────────────────────── */
/* hover-revealed controls must stay visible where there's no hover */
@media (hover: none) {
  .assign-tune, .row-acts, .drag-handle, .goal-add,
  #txn-table .row-act, #txn-table .row-locked, .cat-tag-btn { opacity: 1 !important; }
}
/* bigger tap targets on touch devices */
@media (pointer: coarse) {
  .month-arrow { width: 40px; height: 40px; }
  .clear-toggle, #txn-table .clear-toggle { width: 34px; height: 34px; }
  #txn-table .row-act, #txn-table .row-locked { width: 36px; height: 36px; }
  .modal-close { width: 36px; height: 36px; }
}

/* inline glyph icons (replace ▲▼✓ text glyphs) */
.glyph-arrow, .glyph-check { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; }
.lp-ic svg { width: 17px; height: 17px; }

/* over-assigned: pull-money-back button on the RTA banner */
.rta-fix { display: inline-block; margin-top: 10px; padding: 7px 15px; border-radius: var(--radius-pill);
  border: none; background: rgba(255,255,255,.22); color: #fff; font-size: 13px; font-weight: 620; cursor: pointer;
  transition: background var(--dur-fast); }
.rta-fix:hover { background: rgba(255,255,255,.32); }
.rta .rta-msg { display: flex; flex-direction: column; align-items: flex-end; }

/* live context line in Move Money */
.move-context { font-size: 13px; color: var(--ink-2); text-align: center; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); transition: background .15s, color .15s; }
.move-context:empty { padding: 0; background: transparent; }
.move-context b { color: var(--ink); font-weight: 660; font-variant-numeric: tabular-nums; }
.move-context.warn { color: var(--amber); background: var(--amber-soft); }
.move-title-icon { background: var(--blue-soft); color: var(--blue); }

/* one segmented-control primitive (Tier 1.2) */
.segmented { display: inline-flex; gap: 3px; padding: 3px; background: var(--seg-trough); border-radius: var(--seg-radius); }
.segmented__btn { padding: 7px 14px; border-radius: var(--seg-pill-radius); font-size: 13px; font-weight: 600;
  color: var(--ink-2); text-decoration: none; cursor: pointer; border: none; background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast); white-space: nowrap; }
.segmented__btn:hover { color: var(--ink); }
.segmented__btn[aria-selected="true"], .segmented__btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }

/* payee details button — filled when details exist */
.as-payee-details.is-on { color: var(--blue); }

/* fixed-category lock chip (transfer / starting balance / adjustment) */
.cat-fixed { display: inline-flex; align-items: center; gap: 6px; }
.cat-lock { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--ink-4); cursor: help; }
.cat-lock svg { width: 13px; height: 13px; }
.cat-lock:hover, .cat-lock:focus-visible { color: var(--ink-3); outline: none; }

/* ════════════════════════════════════════════════════════════════════════
   Smoothness layer — consistent control heights, contained reflow, gentle
   settle on htmx swaps (less jump/flash when editing values).
   ════════════════════════════════════════════════════════════════════════ */
/* consistent control heights so focus/hover/swap never resize a row (Tier 1.4) */
.btn, .rs-btn, .input, .select { min-height: var(--control-h); }
.rs-pill .rs-btn, .input.num.text-right, #txn-table .input, #txn-table .select,
.assign-input, .inline-edit { min-height: 0; }   /* compact contexts opt out */

/* contain layout so a row re-render doesn't reflow neighbours / the page */
#txn-table tbody tr, .budget-grid .cat-row, .budget-grid .group-row { contain: layout style; }

@media (prefers-reduced-motion: no-preference) {
  /* gentle settle on swapped rows instead of a hard cut */
  #txn-table tbody tr.htmx-added, .budget-grid tr.htmx-added { animation: rowSettle .22s var(--ease-out); }
  @keyframes rowSettle { from { opacity: .35; } to { opacity: 1; } }
  /* the edited budget grid crossfades smoothly via the View Transitions API */
  ::view-transition-old(budget-grid), ::view-transition-new(budget-grid) { animation-duration: .18s; }
}

/* one consistent interaction transition on the small controls (no per-element drift) */
.btn, .rs-btn, .pill, .avail-pill, .row-act, .clear-toggle, .sub-toggle, .qb-btn,
.segmented__btn, .goal-chip, .goal-add { transition: background var(--dur-fast) var(--ease-out),
  color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
  box-shadow var(--dur-fast) var(--ease-out), transform .1s var(--ease-out); }

/* styled floating tooltip (replaces native title= tooltips) */
/* Branded tooltip (rendered by tooltip.js). background/color use --ink/--surface so
   it auto-inverts per theme (dark chip + light text in light mode, and vice-versa). */
.ui-tip { position: fixed; z-index: 4000; pointer-events: none; max-width: 260px;
  background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 540; line-height: 1.4;
  letter-spacing: -0.01em; padding: 7px 10px; border-radius: var(--radius-xs); box-shadow: var(--sh-md);
  opacity: 0; transform: translateY(4px); transition: opacity .12s var(--ease-out), transform .12s var(--ease-out); }
.ui-tip.below { transform: translateY(-4px); }
.ui-tip.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-tip { transition: opacity .12s; transform: none; } }

/* add-transaction action row (full width so buttons never clip) */
.add-actions-cell { text-align: right; padding: 8px 16px 14px !important; }
.add-actions-cell .btn { vertical-align: middle; }
.add-actions-row td { border-bottom: 1px solid var(--hair); }
.add-entry-footer { display: flex; align-items: flex-end; gap: 14px; }
.add-entry-footer-actions { justify-content: flex-end; }
.add-memo-input { width: 100%; }
/* Posted-row memos collapse on compact desktops, but transaction entry must keep
   every field available. Its memo stays in the entry row instead of becoming a
   detached footer form. At phone widths the register's card layout makes it a
   normal full-width field. */
@media (max-width: 1320px) and (min-width: 641px) {
  #txn-table tr.add-row > td.add-memo-cell { display: table-cell; }
}
@media (max-width: 640px) {
  #txn-table tr.add-row > td.add-memo-cell { display: block; }
}
.add-actions-buttons { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   Landing page — Apple-product-page treatment: atmosphere, scroll reveals,
   floating product preview, staggered entrances.
   ════════════════════════════════════════════════════════════════════════ */
/* scroll reveals */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.reveal-up { transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* hero shell */
.lp-hero { max-width: 1100px; padding: 76px 24px 56px; }
.lp-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.lp-eyebrow { display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 640; letter-spacing: .01em;
  color: var(--blue); background: var(--blue-soft); margin-bottom: 22px; }
.lp-title { font-size: clamp(44px, 7.4vw, 76px); }
.lp-sub { font-size: clamp(16px, 2vw, 19px); max-width: 580px; margin: 20px auto 0; line-height: 1.55; color: var(--ink-2); }
.lp-cta { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Secondary hero action: a quiet text link, not a second competing pill. */
.lp-cta-2 { display: inline-flex; align-items: center; padding: 12px 8px; color: var(--ink-2); font-weight: 600; font-size: 15px; border-radius: var(--radius-pill); transition: color .15s var(--ease-out, ease); }
.lp-cta-2:hover { color: var(--blue); }
.lp-trust { margin-top: 20px; font-size: 12.5px; color: var(--ink-4); }

/* atmospheric gradient mesh behind the hero */
.lp-atmosphere { position: absolute; inset: -10% -20% auto; height: 720px; z-index: 0; pointer-events: none; filter: blur(60px); opacity: .55; }
.lp-atmosphere span { position: absolute; border-radius: 50%; }
/* One calm blue bloom instead of the purple/green blob trio (single-accent brand). */
.lp-atmosphere span:nth-child(1) { width: 560px; height: 560px; left: 16%; top: -40px; background: radial-gradient(circle, rgba(10,132,255,.42), transparent 70%); animation: lpDrift 18s ease-in-out infinite; }
.lp-atmosphere span:nth-child(2) { width: 360px; height: 360px; right: 12%; top: 30px; background: radial-gradient(circle, rgba(66,161,255,.28), transparent 70%); animation: lpDrift 22s ease-in-out infinite reverse; }
.lp-atmosphere span:nth-child(3) { display: none; }
@keyframes lpDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-24px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .lp-atmosphere span { animation: none; } }

/* product preview — floating card with chrome, animated fills, callout chips */
.lp-preview { position: relative; max-width: 600px; margin: 60px auto 0; }
/* The interactive demo (.lp-demo is a .lp-preview-card) must NOT bob — steppers
   need a stable target. Canonical look comes from the tokenized def above (line
   ~1450). Keep position:relative for the floating callout chips. */
.lp-preview-card { position: relative; }
@keyframes lpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .lp-preview-float { animation: none; } }
.lp-pv-chrome { display: flex; gap: 6px; margin-bottom: 16px; }
.lp-pv-chrome span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); }
.lp-pv-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 13px; }
.lp-pv-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; position: relative; }
.lp-pv-bar b { font-size: 13px; font-weight: 600; color: var(--ink-2); grid-row: 1; }
.lp-pv-bar i { font-size: 12.5px; color: var(--ink-3); font-style: normal; font-variant-numeric: tabular-nums; grid-row: 1; text-align: right; }
.lp-preview-float { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 14px;
  background: var(--surface); box-shadow: 0 14px 34px rgba(10,30,80,.16); border: 1px solid var(--hair); animation: lpFloat 8s ease-in-out infinite; }
.lp-preview-float b { font-size: 13px; font-weight: 680; }
.lp-preview-float i { font-size: 11.5px; color: var(--ink-3); font-style: normal; }
.lp-float-b { right: -54px; top: 16%; animation-delay: -4s; }
.lp-float-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lp-float-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.lp-float-ic svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .lp-preview-float { display: none; } }

/* features — lift on hover */
.lp-feature { transition: transform .26s var(--ease-out), box-shadow .26s var(--ease-out); }
.lp-feature:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

/* closing CTA with glow */
.lp-final { position: relative; overflow: hidden; max-width: 920px; margin: 40px auto 60px; padding: 72px 24px; border-radius: 28px;
  background: linear-gradient(160deg, #42A1FF, #0060DF); color: #fff; }
.lp-final-glow { position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% -10%, rgba(255,255,255,.3), transparent 60%); pointer-events: none; }
.lp-final h2 { color: #fff; font-size: clamp(26px, 4vw, 38px); font-weight: 720; letter-spacing: -.02em; position: relative; }
.lp-final p { color: rgba(255,255,255,.9); margin: 12px auto 26px; position: relative; }
.lp-final-btn { background: #fff; color: #0A6CD6; font-weight: 680; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.lp-final-btn:hover { transform: translateY(-2px); }


/* full-bleed seamless hero atmosphere (override the boxed/clipped version) */
.lp-hero { overflow: visible; max-width: none; }
.lp-hero-inner, .lp-preview { max-width: 760px; margin-left: auto; margin-right: auto; }
.lp-preview { max-width: 600px; }
.lp-atmosphere { position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 1500px; height: 1000px; filter: blur(80px); opacity: .5; }
.lp-atmosphere span:nth-child(1) { left: 12%; }
.lp-atmosphere span:nth-child(2) { right: 14%; }
.lp-atmosphere span:nth-child(3) { left: 46%; }
/* soft page-wide gradient wash so nothing hard-cuts to white */
body.landing { background:
  radial-gradient(120% 60% at 50% -8%, rgba(10,132,255,.08), transparent 60%),
  var(--bg, #F5F5F7); }

/* ── Admin · Database monitor ────────────────────────────────────────────── */
.table.table-tight th,
.table.table-tight td { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.db-query {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: var(--ink-2, var(--muted));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; max-width: 46ch; vertical-align: bottom;
}

/* ── Danger zone (delete account / delete user) ─ token-based so it adapts to dark ── */
.danger-zone { border-color: color-mix(in srgb, var(--red) 28%, var(--hair)); }
.danger-zone h3 { color: var(--red); }
/* Password + button on one row, button aligned to the input's baseline — fills
   the card instead of leaving a tall empty right side. */
.danger-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.danger-form .field { flex: 1 1 280px; max-width: 380px; margin: 0; }
.danger-form .btn { flex: none; }

/* ════════════════════════════════════════════════════════════════════════════
   Mobile / responsive pass (phones ~375–430px). Fixes the audit-confirmed
   issues: page-level horizontal overflow, the topbar, data tables, input zoom
   on iOS, modals, and touch targets. Builds on the existing breakpoints.
   ════════════════════════════════════════════════════════════════════════════ */

/* A wide child (a data table) must never scroll the whole PAGE sideways. */
html, body { overflow-x: hidden; }
/* Topbar inner blocks can shrink so a long title can't shove the actions off-screen. */
.topbar .bar > div { min-width: 0; }

@media (max-width: 600px) {
  /* Topbar wraps to multiple lines instead of overflowing one fixed 60px row. */
  .topbar { height: auto; min-height: var(--topbar-h); padding-top: 9px; padding-bottom: 9px; }
  .topbar .bar { flex-wrap: wrap; row-gap: 9px; }
  .topbar .page-title { font-size: 19px; }
  .content { padding: 18px 16px 64px; }

  /* iOS Safari zooms the page when a focused field's font-size is < 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, .rs-btn, .rs-search, .rs-opt, .assign-input { font-size: 16px; }

  /* Data tables scroll inside their card instead of stretching the page. */
  .card > .table, .card > table, .card > #txn-table,
  .card-pad > .table, .card-pad > table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* Modals become near-full-width and scroll if tall (were clipping). */
  dialog { width: calc(100vw - 22px); max-width: calc(100vw - 22px); max-height: 90vh; overflow-y: auto; }

  /* Toast never overflows the screen edges. */
  .toast { left: 12px; right: 12px; max-width: none; }
}

/* Larger touch targets on touch devices (extends the existing coarse block). */
@media (pointer: coarse) {
  .menu-toggle, .notif-bell { width: 42px; height: 42px; }
  .rs-opt { padding-top: 11px; padding-bottom: 11px; }
  .assign-tune { width: 32px; height: 32px; }
  /* Primary off-canvas nav targets meet the 44px coarse-pointer minimum. */
  .nav-item { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .sidebar-account { min-height: 44px; }
  .sidebar-admin, .sidebar-feedback { min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Guided setup tour (onboarding) — gamified, dismissible, token-based for dark.
   ════════════════════════════════════════════════════════════════════════════ */
.onboard {
  position: relative; margin: 0 0 22px; padding: 22px 24px;
  border-radius: var(--radius-lg, 22px); border: 1px solid var(--border);
  background: radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--blue) 9%, var(--surface)), var(--surface) 62%);
  box-shadow: var(--sh); overflow: hidden;
  animation: onboard-in .5s var(--ease-out) backwards;
}
@keyframes onboard-in { from { opacity: 0; transform: translateY(8px); } }

.onboard-dismiss {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: var(--fill); color: var(--ink-3); border-radius: 50%;
  transition: background .15s, color .15s;
}
.onboard-dismiss:hover { background: var(--overlay-hover); color: var(--ink); }
.onboard-dismiss svg { width: 15px; height: 15px; }

.onboard-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding-right: 30px; }
.onboard-head h2 { font-size: 18px; margin-bottom: 3px; }
.onboard-head p { color: var(--ink-3); font-size: 13.5px; }

.onboard-ring { position: relative; width: 64px; height: 64px; flex: none; }
.onboard-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.onboard-ring-bg { fill: none; stroke: var(--fill); stroke-width: 3; }
.onboard-ring-fg {
  fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: var(--dash) 100; animation: onboard-ring 1.1s var(--ease-out) backwards;
}
@keyframes onboard-ring { from { stroke-dasharray: 0 100; } }
.onboard-ring-num {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.onboard-ring-num i { display: block; font-style: normal; font-size: 9px; font-weight: 600; color: var(--ink-3); margin-top: -2px; }

.onboard-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.onboard-step-inner {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: var(--radius-md, 14px); background: var(--surface);
  border: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: transform .16s var(--ease-out), box-shadow .16s, border-color .16s;
}
a.onboard-step-inner:hover {
  transform: translateY(-1px); box-shadow: var(--sh-sm);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
}
.onboard-check {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-2); color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.onboard-check svg { width: 15px; height: 15px; }
.onboard-step.is-done .onboard-check {
  background: var(--green); border-color: var(--green); color: #fff;
  animation: onboard-pop .35s var(--ease-spring) backwards;
}
@keyframes onboard-pop { from { transform: scale(.4); } }
.onboard-step-ic { width: 22px; height: 22px; flex: none; color: var(--blue); }
.onboard-step.is-done .onboard-step-ic { color: var(--ink-4); }
.onboard-step-body { flex: 1; min-width: 0; }
.onboard-step-title { display: block; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.onboard-step.is-done .onboard-step-title { color: var(--ink-3); }
.onboard-step-tag { color: var(--green); font-weight: 600; }
.onboard-step-blurb { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.onboard-step-go { color: var(--ink-4); flex: none; }
.onboard-step-go svg { width: 18px; height: 18px; }

.onboard-celebrate { text-align: center; padding: 18px 8px 10px; position: relative; }
.onboard-trophy {
  position: relative;
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: radial-gradient(circle at 32% 30%, var(--green-vivid, #30D158), var(--green));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--green) 45%, transparent);
  animation: onboard-pop .5s var(--ease-spring) backwards;
}
.onboard-trophy svg { width: 32px; height: 32px; }
.onboard-celebrate h2 { font-size: 22px; }
.onboard-celebrate p { color: var(--ink-3); margin: 4px 0 16px; }
/* Two soft rings ping out from the checkmark — the calm, on-brand celebration
   (replaces the old multicolor confetti). */
.onboard-trophy::before, .onboard-trophy::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--green-vivid); opacity: 0;
  animation: onboard-ping 1.1s var(--ease-out, ease) forwards;
}
.onboard-trophy::after { animation-delay: .18s; }
@keyframes onboard-ping {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .onboard, .onboard-ring-fg, .onboard-step.is-done .onboard-check, .onboard-trophy { animation: none; }
  .onboard-trophy::before, .onboard-trophy::after { animation: none; display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view-pop, .ctx-menu, .rs-pop, .admin-menu-pop, .notif-panel { animation: none; }
}


/* Dark mode: lift hard-coded AA-dark accent text (tuned for light tints) to the
   bright theme tokens so it's readable on dark. Light mode untouched. */
html[data-theme="dark"] .pill-active,
html[data-theme="dark"] .mover-chip.down,
html[data-theme="dark"] .suggest-ico.lower,
html[data-theme="dark"] .fund-amt,
html[data-theme="dark"] .sched-panel-amt.pos,
html[data-theme="dark"] .banner-success { color: var(--green); }
html[data-theme="dark"] .mover-chip.up,
html[data-theme="dark"] .suggest-ico.raise { color: var(--red); }
html[data-theme="dark"] .pill-blue,
html[data-theme="dark"] .split-toggle.on,
html[data-theme="dark"] .banner-info { color: var(--blue); }
html[data-theme="dark"] .pill-amber,
html[data-theme="dark"] .banner-warn { color: var(--amber); }

/* ════════════════════════════════════════════════════════════════════════
   Satisfying interactions — tactile press, click ripple, button shine, and
   completion bursts. All motion gated on prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */
.btn { position: relative; overflow: hidden; }
.clear-toggle { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* Springier press: a deeper squish that bounces back. */
  .btn { transition: transform .18s var(--ease-spring), background .14s, color .14s, border-color .14s, box-shadow .16s; }
  .btn:active { transform: scale(.93); }
  .btn-primary:active, .btn-blue:active, .btn-coral:active { transform: scale(.93) translateY(.5px); }

  /* Click ripple — plot.js spawns .ripple at the pointer; it blooms and fades. */
  .ripple {
    position: absolute; border-radius: 50%; transform: scale(0);
    background: currentColor; opacity: .28; pointer-events: none;
    animation: rippleBloom .55s var(--ease-out, ease) forwards;
  }
  @keyframes rippleBloom { to { transform: scale(2.6); opacity: 0; } }

  /* Premium hover shine sweep on filled buttons. */
  .btn-primary::after, .btn-blue::after, .btn-coral::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg); opacity: 0; pointer-events: none;
  }
  .btn-primary:hover::after, .btn-blue:hover::after, .btn-coral:hover::after { animation: btnShine .6s var(--ease-out, ease); }
  @keyframes btnShine { 0% { left: -60%; opacity: 0; } 25% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

  /* Clear-toggle: a satisfying ring pings out when you clear a transaction. */
  .clear-toggle.just-cleared::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--green-vivid); opacity: .9;
    animation: clearRing .5s var(--ease-out, ease) forwards; pointer-events: none;
  }
  @keyframes clearRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

  /* Success pulse — a soft ring radiates from a point and fades (the calm,
     on-brand celebration; plot.js's window.plotPulse drops these). Same language
     as the clear-toggle ping above, scaled up for bigger moments. */
  .plot-pulse-ring { position: fixed; border-radius: 50%; pointer-events: none; z-index: 9998;
    border: 2px solid var(--pulse-color, var(--green-vivid));
    transform: translate(-50%, -50%) scale(.18); opacity: .65;
    animation: plotPulse var(--pulse-dur, .72s) var(--ease-out, ease) forwards; }
  @keyframes plotPulse {
    0%   { transform: translate(-50%, -50%) scale(.18); opacity: .65; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
  }

  /* Tactile everything — springy press + ripple containment for non-button
     controls so every clickable element feels physical. */
  .cat-pill, .seg-btn { position: relative; overflow: hidden; }
  .cat-pill, .rs-btn, .seg-btn, .pill, .month-arrow, .notif-bell, .theme-toggle,
  .menu-toggle, .ctrl-switch, .row-act {
    transition: transform .16s var(--ease-spring), background .14s, color .14s, border-color .14s, box-shadow .15s;
  }
  .cat-pill:active, .rs-btn:active, .seg-btn:active, .pill[role="button"]:active,
  .month-arrow:active, .notif-bell:active, .menu-toggle:active, .ctrl-switch:active { transform: scale(.92); }
  .row-act:active { transform: scale(.86); }
  /* Live-updating numbers tick with a subtle rise as they roll. */
  .num.rolling { will-change: contents; }
}

/* ═══════════════  Reports redesign — "The Ledger" (.report-* namespace)  ═════
   Token-only; inherits dark mode via CSS var swaps + the plot:themechange repaint.
   See docs/REPORTS.md. */

/* Sticky section switcher, just under the frosted topbar. */
.report-sectionbar {
  position: sticky; top: var(--topbar-h); z-index: 40;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: -8px -32px 18px; padding: 11px 32px;
  background: var(--frost);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}
.report-sectionbar .report-controls { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Full-bleed cover block — the masthead of each section. */
.report-cover { padding: 18px 0 22px; border-bottom: 1px solid var(--hair); margin-bottom: 20px; }
.report-drop {
  font-family: var(--font-display); font-weight: 680;
  font-size: clamp(44px, 7vw, 72px); letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink); margin: 2px 0 10px;
}
.report-drop.pos { color: var(--green-vivid); }
.report-drop.neg { color: var(--coral); }
.report-lede {
  font-family: var(--font-display); font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.5; color: var(--ink-2); max-width: 64ch; letter-spacing: -0.012em;
}
.report-lede strong { font-weight: 640; color: var(--ink); font-variant-numeric: tabular-nums; }
.report-lede strong.pos { color: var(--green-vivid); }
.report-lede strong.neg { color: var(--coral); }

/* Compact stat strip (the cover's "by the numbers"). */
.report-vitals { margin-top: 16px; }
.report-vitals .stat .value { font-size: 24px; }
.report-vitals .stat .delta { font-size: 12.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.report-vitals .stat .delta.pos { color: var(--green-vivid); }
.report-vitals .stat .delta.neg { color: var(--coral); }
.report-spark-svg { display: inline-block; vertical-align: middle; }

/* Ledger table — over-average rows get a coral left-rail. */
.report-ledger .report-over td:first-child { box-shadow: inset 3px 0 0 var(--coral); }
.report-ledger .report-spark-svg { vertical-align: -4px; }

/* Spend heatmap — CSS grid, per-row normalized intensity (set inline). */
.report-heat { display: grid; gap: 3px; overflow-x: auto; }
.report-heat-row { display: grid; grid-template-columns: var(--heat-cols); gap: 3px; align-items: center; }
.report-heat-name { font-size: 12.5px; color: var(--ink-2); padding-right: 10px; white-space: nowrap; }
.report-heat-cell {
  height: 26px; border-radius: 5px; background: var(--blue);
  display: block; text-decoration: none; transition: transform .15s var(--ease);
}
.report-heat-cell:hover { transform: scale(1.08); outline: 1px solid var(--hair); }
.report-heat-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
.report-heat-legend .swatch { width: 28px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--blue) 8%, var(--blue) 70%); opacity: .8; }

/* Section-swap value flash (count-up is reserved for first boot only). */
.report-spread .value-bump { animation: valueBump .5s ease; }

/* Dashboard — Income vs Spending footer + grouped, scrollable Accounts.
   The two cards share a grid row at equal height (default stretch); the account
   list scrolls inside its card, capped so a long list can't drag the row down. */
.ie-foot { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.ie-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ie-k { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.ie-stat .num { font-size: 16px; font-weight: 640; font-variant-numeric: tabular-nums; }

.dash-accounts { display: flex; flex-direction: column; }
.dash-accounts > .dash-acct-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: 440px; }
.dash-acct-grouphead { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between;
  align-items: center; padding: 8px 20px; background: var(--surface-2); border-bottom: 1px solid var(--hair);
  font-size: 11.5px; font-weight: 640; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.dash-acct-grouphead .num { font-size: 12.5px; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.account-row--compact { padding: 10px 20px; gap: 12px; }
.account-row--compact .account-name { font-size: 14px; }

/* ═══════════════  Transactions / register table redesign (UI overhaul)  ═══════
   Appended last so it wins the cascade over the earlier #txn-table rules. */

/* fixed layout + dense, uniform rows (ends the 56→94px row-height swing) */
#txn-table { table-layout: fixed; }
#txn-table tbody td { height: 38px; padding: 5px 14px; vertical-align: middle; }

/* account: colored dot + truncated single line (replaces the gray "blob" pill) */
#txn-table .txn-acct-cell { max-width: 0; }
#txn-table .txn-acct-link { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-2); font-weight: 540; font-size: 13px; text-decoration: none; }
#txn-table .txn-acct-link:hover { color: var(--blue); }
#txn-table .txn-acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#txn-table .txn-acct-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-4); }
/* Scoped under #txn-table so these win over the #txn-table default above. */
#txn-table .acc-dot--checking   .txn-acct-dot { background: #0A84FF; }
#txn-table .acc-dot--savings    .txn-acct-dot { background: #248A3D; }
#txn-table .acc-dot--cash       .txn-acct-dot { background: #F56300; }
#txn-table .acc-dot--credit     .txn-acct-dot { background: var(--purple, #6D4AFF); }
#txn-table .acc-dot--investment .txn-acct-dot { background: #E8410F; }
#txn-table .acc-dot--crypto     .txn-acct-dot { background: #F7931A; }
#txn-table .acc-dot--asset      .txn-acct-dot { background: #5E8B7E; }

/* payee + transfer single-line (non-editable rows): no more 3-line wraps */
#txn-table .payee { overflow: hidden; }
#txn-table .payee-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#txn-table .txn-transfer { display: flex; align-items: center; gap: 7px; min-width: 0; }
#txn-table .txn-transfer-ic { width: 14px; height: 14px; flex: none; color: var(--purple, #6D4AFF); opacity: .85; }
#txn-table .txn-transfer-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }

/* editable payee pill fills the (now wider) cell instead of truncating at 230px */
#txn-table td.payee .inline-edit { max-width: none; }
/* category pill fits its fixed column + ellipses */
#txn-table .cat-pill { width: 100%; max-width: 160px; }

/* date input reads like the locked "Jun 15" text — calendar glyph only on hover */
#txn-table td.num.muted { padding-right: 4px; }
#txn-table .inline-edit.inline-date { width: 100%; max-width: none; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-left: 6px; padding-right: 2px; }
#txn-table .inline-edit.inline-date::-webkit-datetime-edit { color: var(--ink-3); padding: 0; }
/* Hide the picker indicator entirely (click the field opens the picker via
   showPicker) so the date text gets the full cell width and never clips. */
#txn-table .inline-edit.inline-date::-webkit-calendar-picker-indicator { display: none; }

/* ═══════════════  Responsive (UI overhaul)  ═══════════════════════════════════ */

/* Reports sectionbar bleeds to the gutters + tabs scroll on small screens */
@media (max-width: 860px) {
  .report-sectionbar { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 640px) {
  .report-sectionbar { flex-wrap: nowrap; gap: 10px; }
  .report-sectionbar .segmented { flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .report-sectionbar .segmented::-webkit-scrollbar { display: none; }
  .report-sectionbar .report-controls { margin-left: 0; flex: none; }
}

/* Fluid stat numbers so they never clip on a phone */
@media (max-width: 600px) {
  .stat .value { font-size: clamp(20px, 6.2vw, 28px); }
  .budget-stats.grid-4 .stat .value { font-size: clamp(19px, 6vw, 26px); }
  .stat { overflow: visible; }
}

/* Transactions filter toolbar → 2-up grid on phones */
@media (max-width: 640px) {
  .txns-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .txns-toolbar .txns-search { grid-column: 1 / -1; max-width: none; }
  .txns-toolbar .select { width: 100%; }
  .txns-toolbar .txns-count { grid-column: 1 / -1; text-align: left; margin-top: 2px; }
}

/* Phone: stack the register rows into cards (the table won't fit even scrolled) */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  .table-scroll > #txn-table { min-width: 0; }
  #txn-table, #txn-table thead, #txn-table tbody, #txn-table tr, #txn-table td { display: block; }
  #txn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #txn-table tbody tr[data-id] {
    position: relative; display: grid;
    grid-template-columns: 30px auto 1fr auto;
    grid-template-areas: 'clear payee payee amount' 'clear cat cat amount' 'clear date acct acts';
    gap: 3px 10px; align-items: center; padding: 12px 14px; height: auto; border-bottom: 1px solid var(--hair);
  }
  #txn-table tbody tr.add-row, #txn-table tbody tr.add-actions-row { display: block; }
  #txn-table td { padding: 0; border: none; height: auto; }
  #txn-table td:first-child { grid-area: clear; align-self: start; }
  #txn-table td.payee { grid-area: payee; }
  #txn-table td.cat-cell { grid-area: cat; }
  /* date + account on their own row in SEPARATE areas (no overlap) */
  #txn-table td.num.muted { grid-area: date; font-size: 12px; color: var(--ink-3); }
  #txn-table td.txn-acct-cell { grid-area: acct; max-width: none; font-size: 12px; color: var(--ink-3); }
  #txn-table td.num.muted .inline-date { max-width: none; width: auto; }
  #txn-table td.text-right.num { grid-area: amount; align-self: center; text-align: right; font-size: 15px; font-weight: 640; }
  #txn-table td.text-right.num:empty { display: none; }
  /* Editable rows carry BOTH an outflow and an inflow input; a real transaction
     fills exactly one. On the phone card the two share the single 'amount' slot,
     so the empty one (still showing its placeholder) would overlap the filled one
     into an unreadable smudge. Collapse whichever input is empty — and its stray
     edit affordance — leaving one clean figure per row. */
  #txn-table td.text-right.num:has(.inline-amt:placeholder-shown) { display: none; }
  #txn-table td.run-bal { display: none; }
  #txn-table td:last-child { grid-area: acts; justify-self: end; }
  #txn-table .inline-edit { width: 100%; }
  #txn-table td.payee .inline-edit { max-width: none; }
  #txn-table .cat-pill { max-width: none; }
}

/* Coarse-pointer tap targets (appended last so it wins) */
@media (pointer: coarse) {
  .clear-toggle, #txn-table .clear-toggle { width: 40px; height: 40px; }
  .row-act, #txn-table .row-act, #txn-table .row-locked { width: 40px; height: 40px; opacity: 1; }
  #txn-table .row-act svg { width: 16px; height: 16px; }
  .modal-close { width: 40px; height: 40px; }
  /* Icon-only close buttons: grow the hit area on touch without resizing the glyph
     (WCAG 2.5.8). The other dense icon buttons above already meet the minimum.
     inline-grid gives toast-x a box for min-size to apply while keeping the glyph
     centered exactly as before. update-pop-x is already a grid. */
  .toast-x { display: inline-grid; place-items: center; padding: 0; }
  .toast-x, .update-pop-x { min-width: 44px; min-height: 44px; }
}

/* "Paid by" column (shared budgets only) — who fronted a split expense; drives
   correct settle-up. Compact so it fits the narrow column. */
#txn-table .txn-paid-cell { font-size: 12.5px; color: var(--ink-2); }
#txn-table .txn-paid { width: 100%; max-width: none; padding: 4px 6px; font-weight: 540; }
#txn-table .txn-paid-chip { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 640; }

/* ── Mobile quick-add (FAB + bottom sheet) ──
   A floating "+" pinned bottom-right that opens an amount-first add sheet from
   any page. Touch / small-screen only — desktop has the inline register add-row. */
.quick-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: none; place-items: center; color: #fff; background: var(--blue);
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.16);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.quick-fab svg { width: 26px; height: 26px; }
.quick-fab:active { transform: scale(.92); }
@media (max-width: 860px), (pointer: coarse) { .quick-fab { display: grid; } }

/* Bottom-sheet variant of the modal: full-width, slides up, rounded top only. */
dialog.qa-sheet { width: 100%; max-width: 520px; margin: auto auto 0; border-radius: 20px 20px 0 0;
  padding: 0; animation: qa-rise var(--dur-base) var(--ease-out); }
@media (min-width: 620px) { dialog.qa-sheet { margin: auto; border-radius: var(--radius); animation: none; } }
dialog.qa-sheet::backdrop { background: rgba(0,0,0,.4); }
@keyframes qa-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.qa-seg { width: 100%; }
.qa-seg .segmented__btn { flex: 1; }
.qa-amount { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: center; padding: 12px; letter-spacing: -.01em; }

/* ── Split-rule editor (custom per-member cost shares) ── */
.split-rule-rows { display: flex; flex-direction: column; gap: 8px; }
.split-rule-row { display: grid; grid-template-columns: 28px 1fr 84px 44px; align-items: center;
  gap: 10px; padding: 6px 0; }
.split-rule-name { font-size: 14px; font-weight: 540; color: var(--ink); }
.split-rule-weight { text-align: center; padding: 7px 8px; }
.split-rule-pct { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: right;
  font-variant-numeric: tabular-nums; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ── Split-transaction editor (elevated, YNAB-parity) ── */
dialog.split-modal { width: min(860px, 96vw); max-width: 860px; }
/* columns: category | payee | memo | amount | remove */
.split-line-head, .split-line { display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) 116px 30px; gap: 9px; }
.split-line-head { padding: 0 2px 7px; font-size: 11px; font-weight: 640;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.split-line-head span:nth-child(4) { text-align: right; }
.split-lines { display: flex; flex-direction: column; gap: 8px; }
.split-line { align-items: center; }
.split-line > .rs, .split-line .line-payee, .split-line .line-memo { min-width: 0; }
.split-line .line-payee, .split-line .line-memo { padding-top: 9px; padding-bottom: 9px; }
/* a freshly-added line slides in */
.split-line { animation: split-line-in var(--dur-base) var(--ease-out); }
@keyframes split-line-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* "Add a split" — quiet, full-width affordance under the lines */
.split-add { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 10px;
  padding: 9px 12px; border: 1px dashed var(--border-2); border-radius: 11px; background: transparent;
  color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.split-add:hover { background: var(--blue-soft); border-color: transparent; }
.split-add svg { width: 15px; height: 15px; }

/* phones: stack each line (category, payee, then memo + amount + remove) */
@media (max-width: 680px) {
  .split-line-head { display: none; }
  .split-line { grid-template-columns: 1fr 116px 30px; gap: 8px 9px;
    padding: 11px 0; border-top: 1px solid var(--hair); }
  .split-line:first-child { border-top: none; }
  .split-line > .rs, .split-line .line-cat { grid-column: 1 / -1; }
  .split-line .line-payee { grid-column: 1 / -1; }
  .split-line .line-memo { grid-column: 1; }
  .split-line .split-amt { grid-column: 2; }
  .split-line .split-line-del { grid-column: 3; }
}
/* amount field — a tight $-prefixed input that matches .input exactly */
.split-amt { display: flex; align-items: center; gap: 3px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--border-2); border-radius: 11px;
  background: var(--surface); transition: all .15s; cursor: text; }
.split-amt:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-soft); }
.split-amt-cur { color: var(--ink-3); font-size: 15px; flex: none; }
.split-amt-in { flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 15px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.split-line-del { width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink-3); border-radius: 8px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.split-line-del:hover { background: var(--red-soft); color: var(--red); }
.split-line-del svg { width: 15px; height: 15px; }

/* running summary — a tappable bar that assigns the remaining amount */
.split-summary { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px;
  padding: 11px 14px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface-2);
  font-size: 13.5px; font-weight: 580; color: var(--ink-2); cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.split-summary:hover:not(:disabled) { background: var(--blue-soft); border-color: transparent; }
.split-summary:disabled { cursor: default; }
.split-summary .num { font-variant-numeric: tabular-nums; font-weight: 680; color: var(--ink); }
.split-sum-hint { margin-left: auto; font-size: 12px; font-weight: 560; color: var(--ink-3); }
.split-sum-check { width: 17px; height: 17px; flex: none; display: none; color: var(--green); }
.split-summary.is-good { background: var(--green-soft); border-color: transparent; color: var(--green); }
.split-summary.is-good .split-sum-check { display: block; }
.split-summary.is-bad { color: var(--red); }
.split-summary.is-bad .num { color: var(--red); }

.split-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.split-actions [onclick*="Unsplit"] { margin-right: auto; }

/* the register's Split-state category pill */
.cat-pill--split { gap: 5px; }
.cat-pill-split-ic { width: 14px; height: 14px; flex: none; }
.cat-pill--split .cat-pill-chev { transition: transform var(--dur-fast) var(--ease-out); }
.cat-pill--split[aria-expanded="true"] .cat-pill-chev { transform: rotate(180deg); }

/* inline split breakdown — plain register rows added under the parent, each
   marked with a corner arrow. Same look as a normal row (no special fill); the
   category pill sits under CATEGORY and the amount under OUTFLOW. */
#txn-table tr.txn-split-line td { padding-top: 9px; padding-bottom: 9px; }
#txn-table tr.txn-split-line .sd-arrow { display: grid; place-items: center; color: var(--ink-4); }
#txn-table tr.txn-split-line .sd-arrow svg { width: 16px; height: 16px; }
.sd-cat-pill { display: inline-block; padding: 3px 11px; border-radius: 980px;
  background: rgba(120, 120, 128, .14); color: var(--ink-2); font-size: 12.5px; font-weight: 590; }
.sd-payee-pill { display: inline-block; padding: 3px 11px; border-radius: 980px;
  border: 1px solid var(--border); color: var(--ink-2); font-size: 12.5px; font-weight: 560; }
.sd-memo { color: var(--ink-3); }
#txn-table tr.txn-split-line td.text-right.num { font-size: 13.5px; color: var(--ink); font-weight: 560; }
#txn-table tr.txn-split-foot td { border-top: none; padding-top: 3px; padding-bottom: 11px; }
.sd-edit-link { display: inline-flex; align-items: center; gap: 6px; padding: 0;
  border: none; background: none; color: var(--blue); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sd-edit-link:hover { text-decoration: underline; }
.sd-edit-link svg { width: 13px; height: 13px; }

/* phone: register is card-mode; show each split line as arrow + category + amount */
@media (max-width: 640px) {
  #txn-table tr.txn-split-line { display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
    gap: 0 8px; padding: 10px 14px; }
  #txn-table tr.txn-split-line td { display: none; padding: 0; }
  #txn-table tr.txn-split-line td.sd-arrow { display: grid; grid-column: 1; grid-row: 1; }
  #txn-table tr.txn-split-line td.cat-cell { display: block; grid-column: 2; grid-row: 1; }
  #txn-table tr.txn-split-line td.text-right.num:not(:empty) {
    display: block; grid-column: 3; grid-row: 1; font-size: 14px; font-weight: 640; }
  #txn-table tr.txn-split-foot { display: flex; padding: 0 14px 10px 44px; }
  #txn-table tr.txn-split-foot td[colspan] { display: block; width: auto; padding: 0; }
  #txn-table tr.txn-split-foot td:first-child { display: none; }
}

/* ── Admin billing: webhook URL + test-connection panel ── */
.bt-webhook { font-size: 12.5px; color: var(--ink-3); background: var(--surface-2);
  border-radius: 10px; padding: 9px 11px; line-height: 1.6; }
.bt-url { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--ink);
  word-break: break-all; user-select: all; }
.billing-test { margin-top: 12px; border-radius: 10px; padding: 11px 13px; font-size: 13px; }
.billing-test.ok { background: var(--green-soft); }
.billing-test.err { background: var(--red-soft); }
.bt-status { display: flex; align-items: center; gap: 7px; margin: 0; font-weight: 600; }
.billing-test.ok .bt-status { color: var(--green); }
.billing-test.err .bt-status { color: var(--red); }
.bt-status svg { width: 15px; height: 15px; flex: none; }
.bt-block { margin-top: 10px; }
.bt-h { font-size: 11px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.bt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--ink-2); }
.bt-row code { font-size: 12px; color: var(--ink); user-select: all; background: var(--surface); padding: 1px 7px; border-radius: 6px; }

/* ── "Get a month ahead" coverage card (budget page) ── */
.month-ahead { margin: 14px 0 4px; padding: 15px 18px; border-radius: 16px;
  background: var(--blue-soft); border: 1px solid var(--border-2); }
.month-ahead.is-covered { background: var(--green-soft); border-color: transparent; }
.month-ahead.is-overfunded { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.ma-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ma-title { font-weight: 680; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
.ma-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.ma-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 640; color: var(--green); }
.ma-badge svg { width: 16px; height: 16px; }
.ma-badge-extra { color: var(--amber-text, #8a5700); }
.ma-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,.07); overflow: hidden; margin-top: 12px; }
.ma-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--blue); transition: width .4s var(--ease-out); }
.month-ahead.is-covered .ma-bar > span { background: var(--green); }
.month-ahead.is-overfunded .ma-bar > span { background: var(--amber); }
.ma-foot { margin-top: 7px; font-size: 12px; color: var(--ink-3); }
.ma-consolidate { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ma-overage { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); }
.ma-overage-copy { min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.ma-overage-copy strong { color: var(--ink); font-size: 12.5px; font-weight: 680; }
.ma-overage-copy span { color: var(--ink-2); line-height: 1.4; }
.btn-overage { white-space: nowrap; color: #fff; background: var(--amber); border-color: transparent; }
.btn-overage:hover { color: #fff; filter: brightness(.96); transform: translateY(-1px); }
.ma-overage-modal-body { gap: 16px; }
.ma-overage-modal .ma-overage-select,
.ma-overage-modal .rs { width: 100%; max-width: 100%; }
.ma-overage-submit { width: 100%; min-height: 44px; justify-content: center; }

/* ═══════════════ Admin portal · unified design system + per-tab polish ═══════════════ */
.admin-section { margin-top: 18px; }
.admin-section--tight { margin-top: 12px; }

.admin-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px; padding: 20px; text-align: center; color: var(--ink-3); font-size: 13px; }
.admin-chart-empty svg { width: 26px; height: 26px; color: var(--ink-4); stroke-width: 1.6; }

.admin-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-actions form { margin: 0; }

.admin-icon { width: 17px; height: 17px; flex: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.admin-icon--sm { width: 14px; height: 14px; }
.card-head h3 .admin-icon { color: var(--ink-3); margin-right: 8px; }

.btn-ghost.danger { color: var(--red); }
.btn-ghost.danger:hover { background: var(--red-soft); }

a.admin-kpi.kpi-link, a.kpi-link { text-decoration: none; color: inherit; display: block; transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, border-color .16s ease; }
a.kpi-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); border-color: var(--border-2); }
a.kpi-link:focus-visible { box-shadow: var(--focus-ring); }
a.admin-kpi.is-active-kpi { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }

.admin-meta-time { font-variant-numeric: tabular-nums; cursor: default; border-bottom: 1px dotted var(--ink-4); }

.admin-statbar { position: relative; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.admin-statbar > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--blue); }
.admin-statbar.is-warn > i { background: var(--coral); }
.admin-statbar.is-bad > i { background: var(--red); }

/* Subscriptions tab */
.subs-cell { display: inline-flex; align-items: center; gap: 9px; }
.subs-dot { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: -.01em; }

/* Feedback tab */
.admin-fb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-fb-search { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; max-width: 360px; margin: 0; }
.admin-fb-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.admin-fb-search-in { flex: 1; padding-left: 34px; }
.admin-fb-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.admin-fb-row:last-child { border-bottom: 0; }
.admin-fb-row.is-reviewed { border-left: 3px solid var(--border-2); padding-left: 15px; background: var(--surface-2); }
.admin-fb-lead { flex: none; padding-top: 1px; }
.admin-fb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.admin-fb-msg { font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-fb-meta { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.admin-fb-who { color: var(--blue); text-decoration: none; }
.admin-fb-who:hover { text-decoration: underline; }
.admin-fb-page { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.admin-fb-statepill { margin-left: 2px; }
.admin-fb-shotwrap { display: inline-block; margin-top: 4px; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); max-width: 100%; }
.admin-fb-shot { display: block; max-width: 100%; max-height: 200px; height: auto; object-fit: cover; }
.admin-fb-act { flex: none; align-items: flex-start; }

/* Email tab — live preview frame */
.eml-frame-wrap { position: relative; }
.eml-frame-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(1px); color: var(--ink-3); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.eml-frame-wrap.is-loading .eml-frame-loading { opacity: 1; }
.eml-frame-wrap.is-loading .email-frame { opacity: .55; transition: opacity .16s ease; }

/* Performance tab */
.perf-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.perf-controls .admin-actions { flex: none; }
.perf-chart-box .admin-chart-empty { min-height: 0; height: 100%; padding: 8px; gap: 6px; }
.perf-chart-box .admin-chart-empty svg { width: 22px; height: 22px; }

/* Controls tab — switch focus + danger */
.ctrl-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ctrl-switch--danger.on { background: var(--coral); }

/* Email preview popup (admin) */
.email-view-modal { width: min(680px, 94vw); max-width: 680px; padding: 0; }
.email-view-modal .card-head { padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.email-view-body { padding: 0; background: var(--surface-2); }
#email-view-frame { display: block; width: 100%; height: min(70vh, 720px); border: 0; background: #F5F5F7; }

/* User-detail log tabs (Activity / Sign-ins / Email history) */
.utabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--hair); }
.utab { appearance: none; border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 560; color: var(--ink-3); padding: 10px 14px; border-radius: 9px 9px 0 0;
  display: inline-flex; align-items: center; gap: 7px; position: relative; transition: color .14s, background .14s; }
.utab:hover { color: var(--ink); background: var(--surface-2); }
.utab.is-active { color: var(--blue); }
.utab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--blue); border-radius: 2px; }
.utab-n { font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.utab.is-active .utab-n { background: var(--blue-soft); color: var(--blue); }
.utab-panel[hidden] { display: none; }

/* ── Admin Logs console ──────────────────────────────────────────────────────
   Live, searchable application-log view (templates/admin/logs.html). Level chips
   reuse the shared accent tokens; rows are dense + monospace for fast scanning. */
.log-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.log-filter-row .select { max-width: 190px; }
.log-filter-row .input { flex: 1 1 220px; min-width: 180px; }
.logs-table td { vertical-align: top; }
.logs-table .log-time { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12px; }
.log-row { cursor: pointer; }
.log-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.log-msg { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.log-src { font-family: var(--font-mono); font-size: 11.5px; }
.log-req { font-size: 11.5px; white-space: nowrap; }
.log-method { font-weight: 650; color: var(--ink-2); }
.log-lvl { display: inline-block; min-width: 56px; text-align: center; padding: 2px 8px;
  border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 650; letter-spacing: .03em; }
.log-lvl--debug { background: var(--fill); color: var(--ink-3); }
.log-lvl--info { background: var(--blue-soft); color: var(--blue); }
.log-lvl--warning { background: var(--amber-soft); color: var(--amber); }
.log-lvl--error, .log-lvl--critical { background: var(--red-soft); color: var(--red); }
.log-row--error, .log-row--critical { background: color-mix(in srgb, var(--red) 4%, transparent); }
.log-event { min-width: 0; background: var(--fill); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px;
  font-weight: 560; letter-spacing: 0; padding: 1px 6px; border-radius: var(--radius-xs); margin-left: 6px; vertical-align: 1px; }
.log-trace-ic { width: 13px; height: 13px; color: var(--red); vertical-align: -2px; margin-left: 5px; }
.log-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 540;
  color: var(--ink-2); cursor: pointer; user-select: none; }
.log-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4);
  transition: background .15s var(--ease), box-shadow .15s var(--ease); }
.log-live:has(#logs-live:checked) .log-live-dot {
  background: var(--green-vivid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-vivid) 22%, transparent); }
.log-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.log-detail-msg { font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.log-detail-meta { display: flex; gap: 24px; margin: 14px 0 0; flex-wrap: wrap; }
.log-detail-meta dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.log-detail-meta dd { font-size: 13px; color: var(--ink); font-family: var(--font-mono); }
.log-trace { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--hair); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
  white-space: pre; overflow-x: auto; color: var(--ink-2); max-height: 52vh; }

/* Split-active form state: once a create-time split is applied, the single
   category + direction controls are replaced by the "Split · N" button, so the
   stale "None (treat as inflow)" box can't confuse. (Toggled in split_create.js.) */
.show-when-split { display: none; }
.split-active .hide-when-split { display: none; }
.split-active .show-when-split { display: block; }

/* ── Expandable Accounts list in the sidebar ─────────────────────────────────
   A height-measured accordion (smooth in plot.js) so accounts are one click away
   from any page. Uses the same tokens as .nav-item so it tracks light/dark. */
.nav-acct-group { display: flex; align-items: center; gap: 2px; }
.nav-acct-group .nav-acct-main { flex: 1 1 auto; min-width: 0; }
.nav-acct-toggle { flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: none; background: transparent; color: var(--ink-3); border-radius: 8px; cursor: pointer;
  transition: background .12s var(--ease), color .12s; }
.nav-acct-toggle:hover { background: var(--overlay-hover); color: var(--ink); }
.nav-acct-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-acct-chev { width: 12px; height: 12px; transition: transform .26s var(--ease); }
.nav-acct-group.expanded .nav-acct-chev { transform: rotate(180deg); }
/* flex:none so the scrolling sidebar-nav can't shrink + clip the open list when
   there are many accounts — the nav scrolls instead. */
.nav-sub { max-height: 0; overflow: hidden; flex: none; transition: max-height .28s var(--ease); }
.nav-acct-group { flex: none; }
.nav-sub-head { font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); padding: 8px 12px 3px 30px; }
.nav-sub-head:not(:first-child) { margin-top: 5px; border-top: 1px solid var(--hair); padding-top: 10px; }
.nav-subitem { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 30px; margin: 1px 12px;
  color: var(--ink-3); text-decoration: none; font-size: 12.5px; font-weight: 500; border-radius: 8px;
  transition: background .12s var(--ease), color .12s; }
.nav-subitem:hover { background: var(--overlay-hover); color: var(--ink); }
.nav-subitem.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.nav-subitem:active { background: var(--blue-soft); }
.nav-subitem:focus-visible { outline: none; box-shadow: var(--focus-ring); background: var(--overlay-hover); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .nav-subitem { transition: background .12s var(--ease), color .12s, transform .12s var(--ease); }
  .nav-subitem:active { transform: scale(.98); }
}
.nav-sub-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sub-bal { flex: none; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.nav-subitem.active .nav-sub-bal { color: var(--blue); }
.nav-sub-bal.neg { color: var(--red); }
.nav-sub .acc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.acc-dot--mortgage, .acc-dot--auto, .acc-dot--loan { background: var(--blue); }
.acc-dot--realestate { background: #14B8A6; }

/* Address typeahead dropdown (property address verification) */
.addr-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--sh-md); overflow: hidden auto; max-height: 264px; }
.addr-suggest-item { display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; font-size: 13px; line-height: 1.35; color: var(--ink-2); cursor: pointer;
  border-bottom: 1px solid var(--hair); }
.addr-suggest-item:last-child { border-bottom: none; }
.addr-suggest-item:hover { background: var(--surface-hover); color: var(--ink); }
.addr-suggest-item:focus-visible,
.addr-suggest-item[aria-selected="true"] { outline: none; background: var(--blue-soft); color: var(--ink); }
.addr-suggest-item:active { background: var(--surface-2); }

/* Upgrade paywall — assembled from cards + type-ramp tokens (no inline styles) */
.upgrade-wrap { max-width: 680px; margin: 24px auto; }
.upgrade-card { text-align: center; padding: 32px 28px; }
.upgrade-title { margin: 0 0 6px; font-size: var(--text-2xl); font-weight: var(--w-bold); letter-spacing: -.02em; }
.upgrade-lede { margin: 0 0 24px; }
.upgrade-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.upgrade-plans .card { margin: 0; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base); }
.upgrade-plans .card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.upgrade-plans .card.is-recommended { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--sh-md); }
.upgrade-plans .plan-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.upgrade-plans .plan-name { font-weight: var(--w-semi); font-size: 14px; color: var(--ink-2); }
.upgrade-plans .plan-price { margin: 6px 0; }
.upgrade-plans .plan-note { margin-bottom: 14px; }
.upgrade-plans .btn { width: 100%; justify-content: center; }
.upgrade-foot { margin-top: 22px; }
@media (max-width: 600px) { .upgrade-plans { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .upgrade-plans .card { transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base); }
  .upgrade-plans .card:hover { transform: none; }
}

/* Settle-up hero figure */
.settle-hero { text-align: center; padding: 26px; }
.settle-hero-value { font-size: 34px; font-weight: var(--w-bold); letter-spacing: -.02em; margin-top: 2px; }

/* ── Accessibility utilities ──
   Canonical screen-reader helpers. .sr-only keeps text out of the visual layout
   while leaving it in the a11y tree (WCAG 1.3.1 / 2.4.4 / 4.1.2) — used for
   accessible names on icon-only controls and state words on color-only dots.
   .sr-only-focusable reveals itself when focused (e.g. the skip link). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.sr-only-focusable:focus, .sr-only-focusable:focus-within {
  position: static; width: auto; height: auto; padding: revert; margin: 0;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
}
/* Skip link (WCAG 2.4.1): off-screen until keyboard-focused, then pinned
   top-left. Uses design tokens; honors reduced motion. Pairs with the link in
   base.html. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  transform: translateY(-150%); transition: transform .15s ease;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: 10px; font-weight: 600;
  box-shadow: var(--focus-ring);
}
.skip-link:focus { transform: translateY(0); outline: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ── AI: receipt scanning ───────────────────────────────────────────────── */
/* Compact icon-only button (the subtle "scan receipt" affordance). */
.btn-icon { padding: 7px; aspect-ratio: 1; line-height: 0; }
.btn-icon svg { width: 17px; height: 17px; }

/* Scanning overlay — a receipt with a sweeping scan beam while the model reads. */
.receipt-scan-modal { max-width: 340px; text-align: center; }
.receipt-scan-modal::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(3px); }
.rscan { padding: 30px 26px 28px; }
.rscan-doc { position: relative; width: 92px; height: 116px; margin: 0 auto 18px;
  display: grid; place-items: center; overflow: hidden; }
.rscan-receipt { width: 76px; height: 96px; color: var(--ink-3); }
.rscan-beam { position: absolute; left: 6px; right: 6px; height: 18px; border-radius: 6px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue) 55%, transparent), transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--blue) 45%, transparent);
  animation: rscanBeam 1.5s var(--ease-in-out, ease-in-out) infinite; }
@keyframes rscanBeam { 0% { top: -4px; } 50% { top: 92px; } 100% { top: -4px; } }
.rscan-title { font-weight: 640; font-size: 16px; letter-spacing: -.01em; }
.rscan-sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.rscan-sub::after { content: ''; animation: rscanDots 1.4s steps(4, end) infinite; }
@keyframes rscanDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) {
  .rscan-beam { animation: none; opacity: .6; top: 44px; }
  .rscan-sub::after { animation: none; content: '…'; }
}

/* Gamified review sheet. */
.receipt-review .rcpt-head { display: flex; align-items: center; gap: 13px; padding: 18px 20px 4px; }
.rcpt-spark { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: var(--accent-grad, linear-gradient(160deg, #42A1FF, #0A84FF)); box-shadow: var(--sh-sm); }
.rcpt-spark svg { width: 20px; height: 20px; }
.rcpt-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.rcpt-merchant { margin: 1px 0 0; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Body scrolls if there are many lines; header + footer stay put. */
.rcpt-body { padding: 4px 20px 2px; max-height: 56vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; }
/* Aligned two-column grid: category | amount. align-items:start keeps the select
   and the amount input top-aligned even though the caption sits below the select. */
.rcpt-grid-head { display: grid; grid-template-columns: 1fr 124px; gap: 0 12px; margin-bottom: -4px; }
.rcpt-grid-head span { font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3); }
.rcpt-grid-head span:last-child { text-align: right; }
/* Each line is its own aligned grid (category | amount); the fixed amount column
   keeps every row's amounts in a clean column, and a line can be removed as a unit
   when a triaged item merges into an existing category. */
.rcpt-lines { display: flex; flex-direction: column; gap: 12px; }
.rcpt-line { display: grid; grid-template-columns: 1fr 124px; column-gap: 12px; align-items: start; }
.rcpt-cell-cat { min-width: 0; }
.rcpt-cell-amt { display: flex; align-items: center; justify-content: flex-end; min-height: 38px; }
.rcpt-amt-text { font-weight: 600; font-size: 15px; }
.rcpt-line-remainder .rcpt-line-desc { padding-top: 9px; }
/* Rich-select fills its column. */
.rcpt-cell-cat .rs-btn, .rcpt-cell-cat .select { width: 100%; }
/* "View N items" breakdown + the tax allocate action span the full line width. */
.rcpt-items { grid-column: 1 / -1; margin-top: 2px; }
.rcpt-items > summary { width: max-content; padding-left: 2px; font-size: 12px; font-weight: 540;
  color: var(--blue); cursor: pointer; list-style: none; }
.rcpt-items > summary::-webkit-details-marker { display: none; }
.rcpt-items[open] > summary { color: var(--ink-3); }
.rcpt-items-list { margin: 6px 0 0; padding: 10px 11px; display: flex; flex-direction: column;
  gap: 9px; background: var(--surface-2); border-radius: var(--radius-xs); }
.rcpt-item { display: grid; grid-template-columns: 1fr minmax(128px, 40%) auto; gap: 10px; align-items: center; }
.rcpt-item-desc { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcpt-item-amt { font-size: 12.5px; font-weight: 540; white-space: nowrap; text-align: right; }
.rcpt-item .rs-btn, .rcpt-item .select { width: 100%; font-size: 12.5px; }
.rcpt-allocate { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 5px 11px;
  border-radius: 999px; border: 1px dashed var(--border); background: transparent; color: var(--blue);
  font-size: 12.5px; font-weight: 540; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.rcpt-allocate:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.rcpt-allocate svg { width: 14px; height: 14px; }
.rcpt-line-desc { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px;
  padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Items the AI couldn't categorize: amber call-to-action until the user picks one. */
.rcpt-cell-cat.needs-cat .select { border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent); }
.rcpt-cell-cat.needs-cat .rcpt-line-desc::before { content: "Pick a category · "; color: var(--amber); font-weight: 640; }
.rcpt-needs-banner { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.35; color: var(--ink);
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.rcpt-needs-banner svg { color: var(--amber); }
.receipt-review { animation: rcptSheetIn .22s var(--ease-out, ease); }
@keyframes rcptSheetIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.rcpt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 14px 20px; border-top: 1px solid var(--hair); flex-wrap: wrap; }

/* Guided triage — one uncategorized item at a time. */
.rcpt-triage { padding: 10px 20px 16px; }
.rcpt-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rcpt-progress-bar { height: 100%; width: 0; border-radius: 999px;
  background: var(--accent-grad, linear-gradient(90deg, #42A1FF, #0A84FF)); transition: width .3s var(--ease-out, ease); }
.rcpt-progress-text { font-size: 12.5px; color: var(--ink-3); margin: 9px 0 14px; text-align: center; }
.rcpt-triage-card { text-align: center; }
.rcpt-triage-card.swap { animation: rcptCardIn .26s var(--ease-out, ease); }
@keyframes rcptCardIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.rcpt-tri-amt { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.rcpt-tri-desc { font-size: 15px; color: var(--ink-2); margin-top: 2px; word-break: break-word; }
.rcpt-tri-picker { margin: 18px auto 4px; max-width: 340px; }
.rcpt-tri-picker .rs-btn, .rcpt-tri-picker .select { width: 100%; }
.rcpt-triage-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--hair); }
.rcpt-total { display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 640; }
.rcpt-total-label { color: var(--ink-3); font-size: 13px; font-weight: 560; }
.rcpt-match, .rcpt-off { font-size: 12px; font-weight: 560; }
.rcpt-match { display: none; align-items: center; gap: 3px; color: var(--green-vivid); }
.rcpt-match svg { width: 14px; height: 14px; }
.rcpt-off { color: var(--ink-3); }
.receipt-review.is-matched .rcpt-match { display: inline-flex; }
.receipt-review.is-matched .rcpt-off { display: none; }
@media (prefers-reduced-motion: reduce) { .receipt-review[open] .rcpt-line { animation: none; } }

/* ── Transaction tags ────────────────────────────────────────────────────── */
/* Row affordance: a tag icon next to the split icon. Quiet until row-hover, but
   always shown (with a count) when the transaction actually has tags. */
.cat-tag-btn { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 5px;
  margin-left: 2px; border: none; background: transparent; color: var(--ink-4); border-radius: 7px;
  cursor: pointer; vertical-align: middle; opacity: 0; transition: opacity .14s, background .14s, color .14s; }
.cat-tag-btn svg { width: 14px; height: 14px; }
tr:hover .cat-tag-btn, .cat-tag-btn:focus-visible, .cat-tag-btn.has-tags { opacity: 1; }
.cat-tag-btn:hover { background: var(--surface-2); color: var(--ink-2); }
.cat-tag-btn.has-tags { color: var(--blue); }
/* Inline count (not an absolute badge — that overflowed into the next column). */
.cat-tag-count { min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }

/* The tag popover (opened off the icon). */
.tag-pop { position: fixed; z-index: 6000; width: 250px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--sh-lg); padding: 12px; animation: rcptSheetIn .16s var(--ease-out, ease); }
.tag-pop-head { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px; }
.txn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.txn-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 540; line-height: 1.6;
  color: var(--tag, var(--blue)); background: color-mix(in srgb, var(--tag, var(--blue)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag, var(--blue)) 26%, transparent); }
.txn-tag-x { display: inline-grid; place-items: center; width: 15px; height: 15px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; opacity: .6; }
.txn-tag-x svg { width: 10px; height: 10px; }
.txn-tag-x:hover { opacity: 1; }
.txn-tag-add { flex: 1; min-width: 70px; border: 1px dashed var(--border); background: transparent;
  border-radius: 999px; font-size: 12px; padding: 3px 10px; color: var(--ink-2); }
.txn-tag-add:focus { border-color: var(--blue); color: var(--ink); outline: none; }

/* ── Tags index: whole-row navigable via a stretched link, keyboard-focusable,
   with a hover/focus chevron — matches the account-row "opens something" cue. ── */
.tags-table tbody tr.tag-row { position: relative; transition: background .12s var(--ease); }
.tags-table tbody tr.tag-row:hover { background: var(--surface-hover); }
.tags-table tbody tr.tag-row:has(a.tag-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--blue); }
.tags-table .tag-link { color: inherit; text-decoration: none; outline: none; }
/* the pseudo-element stretches the link over the whole row so a click/Enter anywhere navigates */
.tags-table .tag-link::after { content: ""; position: absolute; inset: 0; }
.tags-table .tag-link .txn-tag { position: relative; }
.tags-table .tag-chev-head { width: 34px; }
.tags-table td.tag-chev { width: 34px; padding-left: 0; text-align: right; color: var(--ink-4); }
.tags-table td.tag-chev svg { width: 15px; height: 15px; vertical-align: middle; opacity: 0; transform: translateX(-4px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.tag-row:hover td.tag-chev svg,
.tags-table tbody tr.tag-row:has(a.tag-link:focus-visible) td.tag-chev svg { opacity: 1; transform: none; }
.tags-hint { margin-top: 14px; padding-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .tags-table td.tag-chev svg { transition: opacity .001ms; transform: none; }
}