/* Givehold brand palette ("Hearth"): evergreen brand, warm amber accent,
   warm stone neutrals. Every color in the app comes from these tokens --
   never hard-code colors in JS/HTML (use var(--…), the .pill-* classes, and
   themeColor() in app.js for Chart.js). All text pairs pass WCAG AA. */
:root {
  --p: #1F5F4A;          /* brand: primary buttons (white text) */
  --p-hover: #174A39;
  --a: #226B53;          /* brand: links, headings, highlights */
  --a-hover: #1A5541;
  --accent: #E59E2B;     /* warm accent: heart, banners, highlights */
  --on-accent: #2B2724;  /* text on --accent */
  /* Text on solid --a / --s / --d fills (white in light, dark in dark). */
  --on-a: #FFFFFF;
  --on-p: #FFFFFF;      /* text on --p (primary buttons) */
  --on-s: #FFFFFF;
  --on-d: #FFFFFF;
  --s: #287F47;          /* money left / success */
  --d: #C2362F;          /* danger / over budget */
  --warn: #A8650E;       /* warnings (text-safe amber) */
  --info: #2F6690;
  /* Rolling (sinking) funds on the dashboard: follows --info in every theme
     and palette (already AA as text on cards). */
  --fund: var(--info);
  --bg: #FAF8F5;
  --card-bg: #FFFFFF;
  --text-main: #2B2724;
  --text-muted: #6B635B;
  --border-color: #E7E1D9;
  --input-bg: #FAF8F5;
  --modal-overlay: rgba(43, 39, 36, 0.72);
  --hover-bg: #F3EFE9;
  /* Type: Bricolage Grotesque for headings and the wordmark, Source Sans 3
     for everything else (tabular figures for money). */
  /* Type scale and corner rounding: use these, never raw rem/px values. */
  --fs-2xs: 0.7rem;    /* badges, tiny captions */
  --fs-xs: 0.75rem;    /* captions, hints, labels */
  --fs-sm: 0.85rem;    /* secondary text, small buttons */
  --fs-md: 0.95rem;    /* dense body text */
  --fs-base: 1rem;     /* body, inputs, buttons */
  --fs-lg: 1.2rem;     /* card titles, emphasis */
  --fs-xl: 1.6rem;     /* page titles, big numbers */
  --fs-display: 2.5rem;/* headline figures */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 20px;  --r-pill: 999px;
  --font-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Category colors for charts and the spending bar. */
  --chart-1: #226B53;
  --chart-2: #B9781A;
  --chart-3: #B4533C;
  --chart-4: #4F7CAC;
  --chart-5: #8A6BB0;
  --chart-6: #2F8577;
  --chart-7: #B5617F;
  /* Dashboard category tiles: a faint accent tint so they stand apart
     from the card they sit on (hex values are the fallback for browsers
     without color-mix). */
  --tile-bg: #EFF5F3;
  --tile-bg: color-mix(in srgb, var(--a) 7%, var(--card-bg));
  --tile-border: #BCC7BC;
  --tile-border: color-mix(in srgb, var(--a) 22%, var(--border-color));
}

[data-theme="dark"] {
  --p: #2E7A60;
  --p-hover: #25664F;
  --a: #8EC3AD;
  --a-hover: #A2CFBC;
  --accent: #E8B05A;
  --on-accent: #252220;
  --on-a: #1A1816;
  --on-p: #FFFFFF;      /* text on --p (primary buttons) */
  --on-s: #1A1816;
  --on-d: #1A1816;
  --s: #6CC290;
  --d: #E8928A;
  --warn: #E9B462;
  --info: #8FB6D8;
  --bg: #1A1816;
  --card-bg: #252220;
  --text-main: #E8E2DA;
  --text-muted: #A39A90;
  --border-color: #3B3632;
  --input-bg: #1F1D1B;
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --hover-bg: #2F2B28;
  --chart-1: #8EC3AD;
  --chart-2: #E8B05A;
  --chart-3: #E3907A;
  --chart-4: #8DB3DB;
  --chart-5: #B9A0D8;
  --chart-6: #6CC6B8;
  --chart-7: #E3A3BD;
  --tile-bg: #323531;
  --tile-bg: color-mix(in srgb, var(--a) 12%, var(--card-bg));
  --tile-border: #525E54;
  --tile-border: color-mix(in srgb, var(--a) 28%, var(--border-color));
}

/* Color-theme beta test: "Vespers" (plum + gold on ivory), switched on by
   <html data-palette="vespers"> (toggle by the logo; themevote.js). Same
   token names as Hearth above, all text pairs AA. Remove these two blocks
   (and themevote.js) once a palette is chosen. */
html[data-palette="vespers"]:not([data-theme="dark"]) {
  --p: #5B3A6E;
  --p-hover: #482D58;
  --a: #6A4482;
  --a-hover: #5B3A6E;
  --accent: #C99A33;
  --on-accent: #2A2430;
  --on-a: #FFFFFF;
  --on-p: #FFFFFF;      /* text on --p (primary buttons) */
  --on-s: #FFFFFF;
  --on-d: #FFFFFF;
  --s: #2F8152;
  --d: #C0392B;
  --warn: #A8650E;
  --info: #2F6690;
  --bg: #FBF9F6;
  --card-bg: #FFFFFF;
  --text-main: #2A2430;
  --text-muted: #6A6270;
  --border-color: #E9E3EA;
  --input-bg: #FBF9F6;
  --modal-overlay: rgba(42, 36, 48, 0.72);
  --hover-bg: #F4EFF3;
  --chart-1: #6A4482;
  --chart-2: #A87D22;
  --chart-3: #2F7F70;
  --chart-4: #B84E37;
  --chart-5: #4F7CAC;
  --chart-6: #8E5F43;
  --chart-7: #A9527F;
  --tile-bg: #F5F2F6;
  --tile-bg: color-mix(in srgb, var(--a) 7%, var(--card-bg));
  --tile-border: #CDC0D3;
  --tile-border: color-mix(in srgb, var(--a) 22%, var(--border-color));
}

html[data-palette="vespers"][data-theme="dark"] {
  --p: #7A549A;
  --p-hover: #664480;
  --a: #C8AEDB;
  --a-hover: #D6C0E6;
  --accent: #DDB660;
  --on-accent: #252128;
  --on-a: #1A171C;
  --on-p: #FFFFFF;      /* text on --p (primary buttons) */
  --on-s: #1A171C;
  --on-d: #1A171C;
  --s: #6FC292;
  --d: #E8928A;
  --warn: #E9B462;
  --info: #8FB6D8;
  --bg: #1A171C;
  --card-bg: #252128;
  --text-main: #E8E3EB;
  --text-muted: #A49DAA;
  --border-color: #3C3542;
  --input-bg: #1F1C21;
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --hover-bg: #302B34;
  --chart-1: #C8AEDB;
  --chart-2: #DDB660;
  --chart-3: #7FCDBB;
  --chart-4: #EE9A82;
  --chart-5: #94B6E0;
  --chart-6: #D6A585;
  --chart-7: #E5A0C4;
  --tile-bg: #39323E;
  --tile-bg: color-mix(in srgb, var(--a) 12%, var(--card-bg));
  --tile-border: #63576D;
  --tile-border: color-mix(in srgb, var(--a) 28%, var(--border-color));
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  margin: 0;
  color: var(--text-main);
  padding-bottom: 80px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hidden {
  display: none !important;
}

/* ========================================== */
/* BOOT SPLASH (while a stored session loads)  */
/* ========================================== */
/* <html class="booting"> is set by the head script before first paint and
   removed by BootSplash in app.js. Above the app and its modals (≤ 5001),
   below Dialog (10000) so a session-expired alert is never hidden. */
.boot-splash {
  display: none;
}

html.booting .boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  transition: opacity 0.35s ease;
}

html.boot-leaving .boot-splash {
  opacity: 0;
  pointer-events: none;
}

.boot-mark-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  animation: bootBreathe 2.8s ease-in-out infinite;
}

/* Soft glow behind the mark */
.boot-mark-wrap::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--a) 22%, transparent) 0%, transparent 70%);
  animation: bootGlow 2.8s ease-in-out infinite;
}

.boot-mark {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The house outline draws itself in once */
.boot-house {
  fill: none;
  stroke: var(--a);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bootDraw 1.1s ease-out forwards;
}

.boot-heart-bg {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The heart fills like the dashboard's liquid envelopes: a rolling wave
   (bootWave) riding a rising and falling level (bootFill). */
.boot-level {
  transform: translateY(18.8px);
  animation: bootFill 2.8s ease-in-out 0.4s infinite;
}

.boot-wave {
  fill: var(--accent);
  animation: bootWave 1.2s linear infinite;
}

.boot-wordmark {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-main);
}

.boot-wordmark span {
  color: var(--a);
}

.boot-message {
  margin: 0;
  min-height: 1.4em;
  color: var(--text-muted);
  font-size: var(--fs-md);
  text-align: center;
  transition: opacity 0.2s ease;
}

.boot-message.fade {
  opacity: 0;
}

.boot-reload {
  width: auto;
  padding: 8px 20px;
}

@keyframes bootDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes bootWave {
  from { transform: translateX(0); }
  to { transform: translateX(-4px); }
}

@keyframes bootFill {
  0%, 100% { transform: translateY(18.8px); }
  55%, 80% { transform: translateY(9.8px); }
}

@keyframes bootBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes bootGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark-wrap,
  .boot-mark-wrap::before,
  .boot-wave {
    animation: none;
  }

.boot-house {
    animation: none;
    stroke-dashoffset: 0;
  }

.boot-level {
    animation: none;
    transform: translateY(12.5px);
  }
}

/* "A new version is available" notice (AppVersion in app.js). Floats above
   the bottom nav; above app modals (≤ 2100), below Dialog (10000). */
.app-update-banner {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 10px 10px 16px;
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--tile-border);
  border-radius: var(--r-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  font-size: var(--fs-md);
  font-weight: 600;
  animation: appUpdateIn 0.25s ease-out;
}

/* Own keyframes: the shared fadeIn would override the centering transform */
@keyframes appUpdateIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.app-update-reload {
  flex-shrink: 0;
  background: var(--a);
  color: var(--on-a);
  border: none;
  border-radius: var(--r-sm);
  padding: 6px 14px;
  font: inherit;
  cursor: pointer;
}

.app-update-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  padding: 4px 6px;
  cursor: pointer;
}

/* Full-screen modal overlays (class="modal-overlay"). A card taller than the
   screen (e.g. a transaction with many splits) used to overflow off the top
   and bottom with the wheel scrolling the page behind. Now the overlay
   scrolls, the card stays centered when it fits (margin: auto) and starts at
   the top when it doesn't, and the page behind is locked while one is open. */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  background: var(--modal-overlay);
  backdrop-filter: blur(4px);
  z-index: 2000;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start !important;
  padding: 16px;
}

/* Windows opened on top of another window. */
.modal-overlay.modal-raised { z-index: 2100; }
.modal-overlay.modal-raised-2 { z-index: 2200; }
.modal-overlay.modal-raised-3 { z-index: 2300; }

.modal-overlay > .card {
  margin: auto;
  flex-shrink: 0;
}

body:has(.modal-overlay:not(.hidden)) {
  overflow: hidden;
}

/* Email verification (frontend/js/modules/verification.js) */
.verify-banner {
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

.join-pending-banner {
  background: color-mix(in srgb, var(--info) 14%, var(--card-bg));
  color: var(--text-main);
  border-bottom: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}
.join-pending-banner.hidden { display: none; }
.join-pending-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.join-pending-btn:hover { border-color: var(--text-muted); }

.verify-banner strong {
  word-break: break-all;
}

.verify-banner-btn {
  background: rgba(255, 255, 255, 0.85);
  color: #2B2724;
  border: none;
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.verify-banner-btn.primary {
  background: var(--on-accent);
  color: #ffffff;
}

/* Lock screen after the grace period: opaque, above the app and its modals
   (2000), below the support modal (2100) and Dialog (10000). */
/* Member lists (Household Activity window, Household Members window) */
.household-member-list {
  font-size: var(--fs-md);
  color: var(--text-main);
  background: var(--hover-bg);
  border-radius: var(--r-sm);
  padding: 4px 10px;
}
.household-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}
.household-member-row:last-child { border-bottom: none; }

/* "Check your junk folder" line under code-entry forms */
.junk-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 10px;
  text-align: center;
}

.verify-lock {
  position: fixed;
  inset: 0;
  z-index: 2050;
  display: flex;
  justify-content: center;
  background: var(--bg);
}

.verify-lock-card {
  width: 100%;
  max-width: 440px;
}

.verify-lock-details {
  margin: 6px 0 12px;
  font-size: var(--fs-sm);
}

.verify-lock-details summary {
  cursor: pointer;
  color: var(--a);
  font-weight: 600;
}

.verify-lock-actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}

.verify-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--a);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.verify-link.danger {
  color: var(--d);
}

/* Giving settings (frontend/js/modules/giving.js) and the Steward ⚙️ */
.steward-gear {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-lg);
  cursor: pointer;
}

.giving-section {
  border-top: 1px solid var(--border-color);
  padding: 12px 0;
}

.giving-section-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--a);
  margin-bottom: 8px;
}

.giving-section-label span {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 4px;
}

.giving-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
}

.giving-toggle small {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
}

.giving-toggle input {
  width: auto;
  margin: 0;
  transform: scale(1.2);
}

.giving-fields {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  transition: opacity 0.15s;
}

.giving-fields.off {
  opacity: 0.45;
}

.giving-fields label,
.giving-link {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.giving-fields input,
.giving-fields select,
.giving-link input {
  margin: 4px 0 0;
}

.giving-pct {
  display: flex;
  align-items: center;
  gap: 6px;
}

.giving-pct input {
  max-width: 110px;
}

/* Status pills: tinted background + matching text, both themes. Use these
   instead of inline badge colors. */
.pill-success,
.pill-warn,
.pill-info,
.pill-muted,
.pill-danger {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 1px solid transparent;
}

.pill-success { color: var(--s); background: color-mix(in srgb, var(--s) 14%, transparent); border-color: color-mix(in srgb, var(--s) 30%, transparent); }

.pill-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

.pill-info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); border-color: color-mix(in srgb, var(--info) 28%, transparent); }

.pill-danger { color: var(--d); background: color-mix(in srgb, var(--d) 12%, transparent); border-color: color-mix(in srgb, var(--d) 28%, transparent); }

.pill-muted { color: var(--text-muted); background: var(--hover-bg); border-color: var(--border-color); }

/* Tinted notice boxes (e.g. the date-mismatch warning, email-change box). */
.notice-warn,
.notice-info {
  border-radius: var(--r-sm);
  padding: 10px;
  font-size: var(--fs-sm);
}

.notice-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }

.notice-info { color: var(--info); background: color-mix(in srgb, var(--info) 8%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--info) 28%, transparent); }

/* Color-theme beta: the little switch by the logo and the vote popup
   (themevote.js). The switch shows the current palette's own colors. */
.nav-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.palette-switch {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  border-radius: var(--r-pill);
}

.palette-switch:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.ps-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--p);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: background 0.25s;
}

.ps-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.25s;
}

.palette-switch[aria-checked="true"] .ps-knob {
  transform: translateX(16px);
}

.palette-switch.hint .ps-track {
  animation: psHint 1.2s ease-in-out 3;
}

@keyframes psHint {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

.tv-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.tv-option {
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--text-main);
  border: 2px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.tv-option:hover { border-color: var(--text-muted); }

.tv-option.selected { border-color: var(--a); background: color-mix(in srgb, var(--a) 6%, var(--card-bg)); }

.tv-option b { font-family: var(--font-display); font-size: var(--fs-base); }

.tv-option small { color: var(--text-muted); }

.tv-swatches { display: flex; gap: 4px; }

.tv-swatches span { width: 22px; height: 22px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

.tv-note {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font: inherit;
}

.tv-actions { display: flex; gap: 10px; margin-top: 10px; }

/* Tab switch transition (TabTransition in app.js): the new view opens in
   a circle growing from where the user tapped (--vt-x / --vt-y, relative to
   #view-container) while the old view settles back and fades. The top and
   bottom bars get their own names so they hold perfectly still. The names
   only exist during a tab transition (html.vt-tabs), so they never affect
   stacking of the modals inside #view-container the rest of the time. */
html.vt-tabs #view-container { view-transition-name: tab-view; }

html.vt-tabs #app > nav { view-transition-name: app-top; }

html.vt-tabs #bottom-nav { view-transition-name: app-bottom; }

::view-transition-group(root),
::view-transition-group(app-top),
::view-transition-group(app-bottom),
::view-transition-group(tab-view) {
  animation: none;
}

::view-transition-old(root),
::view-transition-old(app-top),
::view-transition-old(app-bottom) {
  display: none;
}

::view-transition-new(root),
::view-transition-new(app-top),
::view-transition-new(app-bottom) {
  animation: none;
}

::view-transition-old(tab-view) {
  transform-origin: var(--vt-x, 50%) var(--vt-y, 0);
  animation: tabOldSettle 380ms cubic-bezier(.4, 0, .2, 1) both;
}

::view-transition-new(tab-view) {
  animation: tabRipple 600ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes tabOldSettle {
  to { opacity: 0; transform: scale(0.965); }
}

@keyframes tabRipple {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 0)); }
}

/* Fallback for browsers without View Transitions. */
#view-container.tab-enter { animation: tabEnter 260ms cubic-bezier(.2, .8, .2, 1) both; }

@keyframes tabEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* The newly active bottom-nav tab gives a small bounce. */
.nav-item.pop { animation: tabPop 420ms cubic-bezier(.3, 1.6, .5, 1); }

@keyframes tabPop {
  0% { transform: scale(0.88); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(tab-view),
  ::view-transition-new(tab-view),
  #view-container.tab-enter,
  .nav-item.pop {
    animation: none;
  }
}

/* Month changes (dashboard, Setup, Reconcile, Trends): a short horizontal
   slide like macOS Calendar -- the old month eases out one way, the new one
   in from the other (--month-dir: 1 = next, -1 = previous). The month header
   (.month-head) holds still. See transitionMonth() in app.js. */
html.vt-month .vt-month-target { view-transition-name: month-view; }
html.vt-month .month-head { view-transition-name: month-head; }

::view-transition-group(month-view),
::view-transition-group(month-head) {
  animation: none;
}
::view-transition-old(month-head) { display: none; }
::view-transition-new(month-head) { animation: none; }

::view-transition-old(month-view) {
  animation: monthOut 180ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(month-view) {
  animation: monthIn 260ms cubic-bezier(.2, .8, .2, 1) 40ms both;
}

/* Fallback for browsers without View Transitions: just the slide in. */
.month-enter { animation: monthIn 240ms cubic-bezier(.2, .8, .2, 1) both; }

@keyframes monthOut {
  to { opacity: 0; transform: translateX(calc(var(--month-dir, 1) * -24px)); }
}
@keyframes monthIn {
  from { opacity: 0; transform: translateX(calc(var(--month-dir, 1) * 24px)); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(month-view),
  ::view-transition-new(month-view),
  .month-enter {
    animation: none;
  }
}

/* Passkeys: sign-in button (auth modal) and Manage Account section */
.passkey-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  font-weight: 700;
}

.passkey-btn.hidden { display: none; }

.passkey-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--a);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.passkey-btn:hover { border-color: var(--a); }

/* Passkey sign-in in progress / failed: takes the place of the username and
   password fields (passkeys.js). Reuses the boot splash's animated mark. */
.passkey-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
  text-align: center;
}
.passkey-panel.hidden { display: none; }
.passkey-mark.boot-mark-wrap { width: 64px; height: 64px; }
.passkey-mark.boot-mark-wrap::before { inset: -14px; }
.passkey-panel.failed .passkey-mark { display: none; }
.passkey-fail-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--d);
  background: color-mix(in srgb, var(--d) 12%, transparent);
}
.passkey-fail-icon.hidden { display: none; }
.passkey-panel-title {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-main);
}
.passkey-panel-text {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 320px;
}
.passkey-panel .btn { margin-bottom: 4px; }

.pk-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pk-help { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 8px; }

.pk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  background: var(--card-bg);
}

.pk-info { flex: 1; min-width: 0; display: grid; }

.pk-info strong { font-size: var(--fs-md); }

.pk-info small { color: var(--text-muted); font-size: var(--fs-2xs); }

.pk-link {
  background: none;
  border: none;
  color: var(--a);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}

.pk-link.danger { color: var(--d); }

.pk-add {
  background: var(--hover-bg);
  color: var(--a);
  border: 1px solid var(--border-color);
  font-size: var(--fs-md);
}

/* Sign-up terms checkbox and legal links */
.terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 2px 0 14px;
  cursor: pointer;
  line-height: 1.4;
}

.terms-row input {
  width: auto;
  margin: 2px 0 0;
  flex-shrink: 0;
}

.terms-row a,
.legal-links a {
  color: var(--a);
  font-weight: 600;
}

.legal-links {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 12px 0 0;
}


/* Navbars & Views */
nav {
  background: var(--card-bg);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.view {
  max-width: 600px;
  margin: 1rem auto;
  padding: 0 1rem;
  animation: fadeIn 0.3s ease;
}

.card {
  background: var(--card-bg);
  padding: 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-bg);
  display: flex;
  justify-content: space-around;
  padding: 12px 15px;
  border-top: 1px solid var(--border-color);
  z-index: 1000;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.nav-item {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-item.active {
  color: var(--a);
}

/* Inputs & Buttons */
input, select, textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  font-size: var(--fs-base);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--a);
}

/* Number boxes without the up/down arrows (amounts are typed, not stepped). */
input[type="number"].no-spin { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].no-spin::-webkit-inner-spin-button,
input[type="number"].no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 700;
  width: 100%;
  font-size: var(--fs-base);
  font-family: inherit;
  transition: transform 0.1s, opacity 0.2s, background-color 0.2s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-p {
  background: var(--p);
  color: var(--on-p);
}

/* The button set (all start from .btn):
     .btn-p          primary -- the one main action of a card or window
     .btn-secondary  soft fill -- navigation and everyday actions
     .btn-ghost      outlined -- minor actions (Close, Copy, Members)
     .btn-danger     soft red -- destructive actions
     .btn-sm         compact size for rows and inline actions */
.btn-secondary { background: var(--hover-bg); color: var(--text-main); border: 1px solid var(--border-color); }
.btn-secondary:hover { border-color: var(--a); }
.btn-ghost { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--hover-bg); }
.btn-danger {
  background: color-mix(in srgb, var(--d) 10%, var(--card-bg)); color: var(--d);
  border: 1px solid color-mix(in srgb, var(--d) 30%, transparent);
}
.btn-danger:hover { background: color-mix(in srgb, var(--d) 16%, var(--card-bg)); }
.btn.btn-sm { width: auto; padding: 5px 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
/* E.g. checkout, until its renewal terms are agreed to. */
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.settings-link { margin-bottom: 10px; }

.btn-p:hover {
  background: var(--p-hover);
}

/* Progress & Liquid Tiles */
.progress {
  height: 10px;
  background: var(--hover-bg);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.fill {
  height: 100%;
  background: var(--a);
  transition: width 0.3s ease;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.liquid-tile {
  position: relative;
  height: 90px;
  background: var(--tile-bg);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--tile-border);
  transition: border-color 0.2s;
}

.liquid-tile:hover {
  border-color: var(--a);
}

.liquid-tile.active-filter {
  border-color: var(--a);
  border-width: 2px;
}

.liquid-tile.over {
  border: 2px solid var(--d);
}

/* "Money left" fill: a pale tint, so the text on top stays solid and
   readable (no shadows) in every theme. */
.liquid-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: color-mix(in srgb, var(--a) 16%, transparent);
  transition: height 0.5s ease, background 0.5s ease;
  z-index: 1;
}

.liquid-tile.pacing .liquid-fill {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
}

.liquid-content {
  position: absolute;
  inset: 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
  color: var(--text-main);
}

.lt-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-amount {
  margin-block: auto;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.liquid-tile.over .lt-amount { color: var(--d); }

/* Rolling funds: a colored band across the top and "↻ rolls" in the foot
   (the name can be cut off, so the marker never sits after it). */
.liquid-tile.fund::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--fund);
  z-index: 2;
}
.lt-foot .fund-tag { color: var(--fund); font-weight: 700; }
.fund-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.fund-legend i { display: inline-block; width: 16px; height: 4px; border-radius: var(--r-pill); background: var(--fund); }

.lt-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.master-bar-container {
  display: flex;
  height: 24px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--border-color);
  margin: 15px 0;
}

.master-bar-segment {
  height: 100%;
  transition: width 0.3s;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.section-header > h3 { white-space: nowrap; }

.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Pro tip" card for the dashboard's type-to-add shortcut (dashboard.js
   TypeToAddTip). Non-blocking: sits above the bottom nav, below modals. */
.protip {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 1500;
  width: min(320px, calc(100% - 32px));
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.3);
  animation: protipIn 0.3s ease-out;
}

.protip p { margin: 0 0 8px; line-height: 1.45; font-size: var(--fs-md); }

.protip .protip-example { color: var(--text-muted); font-size: var(--fs-sm); }

.protip-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 6px;
}

.protip kbd {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-main);
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

.protip-ok {
  border: none;
  background: var(--p);
  color: var(--on-p);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.protip-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-md);
}

@keyframes protipIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .protip { animation: none; }
}

/* Tiles / Table switch in the Budget Goals header */
/* ---------- Dashboard quick entry (type, Enter, type, Enter) ---------- */
.qe { margin: 12px 0 2px; }
.qe-box {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 12px; border-radius: var(--r-md);
    border: 2px solid var(--border-color); background: var(--card-bg);
    transition: border-color 0.15s;
}
.qe-box:focus-within { border-color: var(--a); }
.qe-box input#qeInput {
    flex: 1; min-width: 0; width: auto; margin: 0; padding: 9px 0;
    border: 0; background: transparent; box-shadow: none; outline: none;
    font-family: inherit; font-size: var(--fs-base); font-variant-numeric: tabular-nums;
    color: var(--text-main);
}
.qe-chip, .qe-tag {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
    background: color-mix(in srgb, var(--a) 12%, transparent); color: var(--a);
}
.qe-tag.uncat { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.qe-hint { font-size: var(--fs-xs); color: var(--text-muted); margin: 6px 2px 0; min-height: 1.2em; }
.qe-hint.ok { color: var(--s); font-weight: 600; }
.qe-hint.err { color: var(--d); font-weight: 600; }
.qe-hint kbd {
    font-family: inherit; font-size: var(--fs-2xs); font-weight: 700; padding: 1px 6px; border-radius: var(--r-xs);
    border: 1px solid var(--border-color); background: var(--bg); color: var(--text-main);
}
.qe-link {
    background: none; border: 0; padding: 0; margin: 0; width: auto; cursor: pointer;
    font: inherit; font-weight: 700; color: var(--a); text-decoration: underline;
}
.uncat-note {
    display: block; width: 100%; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r-md); cursor: pointer;
    border: 1px dashed var(--border-color); background: transparent; color: var(--text-muted);
    font: inherit; font-size: var(--fs-sm); text-align: left;
}
.uncat-note:hover { border-color: var(--a); color: var(--text-main); }
.uncat-note.hidden { display: none; }

/* ---------- Dashboard Bars view (one long bar per category) ---------- */
.bar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.bar-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
    padding: 12px 14px; border-radius: var(--r-md); cursor: pointer;
    background: var(--bg); border: 1px solid transparent;
    transition: background 0.4s, border-color 0.15s;
}
.bar-row:hover { border-color: var(--border-color); }
.bar-row.active-filter { border-color: var(--a); }
/* A category picked on the dashboard (dashboard.js setDashFilter): only it
   shows, and it and its transactions are framed in --info, with a bar that
   says so and a way back. */
.card.dash-filtered { box-shadow: 0 0 0 2px var(--info); }
.dash-filtered .liquid-tile.active-filter:not(.over),
.dash-filtered .bar-row.active-filter:not(.over) { border-color: var(--info); }
.dash-filtered .tx-row { box-shadow: inset 3px 0 0 var(--info); }
.tx-filter-bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px;
}
.tx-filter-bar .btn { width: auto; }
.br-name { font-weight: 700; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-amt { font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-amt small { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.br-track { grid-column: 1 / -1; height: 7px; border-radius: var(--r-pill); background: var(--border-color); overflow: hidden; }
.br-track i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--a); transition: width 0.6s ease; }
.bar-row.pacing .br-track i { background: var(--warn); }
.bar-row.over .br-amt { color: var(--d); }
.bar-row.over .br-track { background: color-mix(in srgb, var(--d) 30%, transparent); }
.bar-row.give .br-track i { background: var(--accent); }
.bar-row.give .br-name::after { content: " \2665"; color: var(--accent); }
/* Rolling funds: a colored strip down the left (no layout shift). */
.bar-row.fund { box-shadow: inset 4px 0 0 var(--fund); }
.hit-ghost.bar-row.fund { box-shadow: inset 4px 0 0 var(--fund), 0 16px 36px -14px color-mix(in srgb, var(--text-main) 45%, transparent); }

/* A just-saved transaction's category: a one-time glow and a small pop, in
   any dashboard view (the amount counts down in dashboard.js). */
.cat-hit { animation: cat-hit-glow 1.4s ease-out, cat-hit-pop 0.45s ease-out; animation-delay: var(--hit-delay, 0ms); }
.bar-row.cat-hit { animation: cat-hit-glow 1.4s ease-out, cat-hit-pop 0.45s ease-out, cat-hit-bg 1.8s ease-out; animation-delay: var(--hit-delay, 0ms); }
tr.cat-hit { animation: none; }
tr.cat-hit td { animation: cat-hit-row 1.8s ease-out; animation-delay: var(--hit-delay, 0ms); }
@keyframes cat-hit-glow {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
    100% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes cat-hit-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.03); }
    100% { transform: scale(1); }
}
@keyframes cat-hit-bg {
    0%, 35% { background: color-mix(in srgb, var(--accent) 24%, var(--bg)); }
    100% { background: var(--bg); }
}
@keyframes cat-hit-row {
    0%, 35% { background: color-mix(in srgb, var(--accent) 28%, transparent); }
    100% { background: transparent; }
}
/* Landing back in place after the lift (and the "to sort" box taking a
   receipt). */
.cat-land { animation: cat-hit-glow 1.2s ease-out; }
.bar-row.cat-land { animation: cat-hit-glow 1.2s ease-out, cat-hit-bg 1.4s ease-out; }
tr.cat-land { animation: none; }
tr.cat-land td { animation: cat-hit-row 1.4s ease-out; }
.uncat-note.cat-land { animation: cat-hit-glow 1.2s ease-out, cat-box-bump 0.4s ease-out; }
@keyframes cat-box-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.03, 0.92); }
    100% { transform: scale(1); }
}
.hit-pending { visibility: hidden; }

/* The floating copy shown under the entry box (dashboard.js runHitLift). */
.hit-ghost {
    position: fixed; z-index: 1500; pointer-events: none; margin: 0;
    transform-origin: top left; box-sizing: border-box;
    box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--text-main) 45%, transparent);
    animation: cat-hit-glow 1.4s ease-out 0.25s;
}
.hit-ghost.bar-row { background: var(--card-bg); border: 1px solid var(--a); }
.hit-ghost.liquid-tile { border-color: var(--a); }
.hit-ghost .hg-track { position: relative; height: 12px; }
.hit-ghost .hg-track i { position: relative; z-index: 1; }
.hit-ghost .hg-loss {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill);
    background: var(--accent);
}
.hit-ghost .liquid-loss {
    position: absolute; left: 0; width: 100%; z-index: 1;
    background: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Giving bars are amber and fast-spending ones are close: use red there. */
.hit-ghost.give .hg-loss, .hit-ghost.pacing .hg-loss { background: var(--d); }
.hit-ghost-table { background: var(--card-bg); border-collapse: collapse; font-size: var(--fs-md); border-radius: var(--r-sm); overflow: hidden; animation: none; }
.hit-ghost-uncat {
    display: flex; align-items: center; gap: 8px; max-width: 340px;
    padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-md);
    background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-main);
}
.hit-ghost-uncat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-ghost-uncat .hg-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.hit-ghost-uncat small { color: var(--text-muted); white-space: nowrap; }
/* A paycheck typed on the dashboard, on its way to the Steward tab. */
.hit-ghost-pay {
    border-color: var(--s);
    background: color-mix(in srgb, var(--s) 8%, var(--card-bg));
}
.hit-ghost-pay .hg-amt { color: var(--s); }
.qe-tag.pay { background: color-mix(in srgb, var(--s) 14%, transparent); color: var(--s); }
/* Giving marked paid on Steward, on its way out to the Dashboard
   (steward.js runGivingPaidFlight): the band drains like an expense. */
.hit-ghost-give {
    flex-direction: column; align-items: stretch; gap: 8px;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}
.hit-ghost-give .gp-head { display: flex; align-items: center; gap: 8px; }
.hit-ghost-give .gp-head .hg-amt { margin-left: auto; }
.hit-ghost-give .hg-track { height: 8px; border-radius: var(--r-pill); background: var(--border-color); overflow: hidden; }
.hit-ghost-give .hg-loss { width: 100%; }
.hit-ghost-give small { align-self: flex-end; }
/* ...and the tab lighting up as it lands (dashboard.js flashStewardTab). */
.nav-item.nav-flash {
    border-radius: var(--r-pill);
    animation: nav-flash 0.9s ease-out, tabPop 420ms cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes nav-flash {
    0%, 100% { background: transparent; }
    15%, 55% { background: color-mix(in srgb, var(--s) 24%, transparent); color: var(--s); box-shadow: 0 0 0 6px color-mix(in srgb, var(--s) 24%, transparent); }
    35% { background: color-mix(in srgb, var(--s) 8%, transparent); color: var(--s); box-shadow: 0 0 0 6px color-mix(in srgb, var(--s) 8%, transparent); }
}
/* Giving paid, landing on the Dashboard tab: amber instead of green. */
.nav-item.nav-flash.flash-give { animation: nav-flash-give 0.9s ease-out, tabPop 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nav-flash-give {
    0%, 100% { background: transparent; }
    15%, 55% { background: color-mix(in srgb, var(--accent) 26%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent); }
    35% { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); }
}
.nav-coin {
    position: fixed; z-index: 1500; pointer-events: none;
    font-size: var(--fs-sm); font-weight: 800; color: var(--s);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav-coin.flash-give { color: var(--text-main); }

@media (prefers-reduced-motion: reduce) {
    .br-track i, .bar-row, .qe-box { transition: none; }
    /* Keep the highlight, drop the movement. */
    .cat-hit, .bar-row.cat-hit { animation: cat-hit-glow 1.4s ease-out; animation-delay: var(--hit-delay, 0ms); }
    .nav-item.nav-flash { animation: nav-flash 0.9s ease-out; }
    .nav-item.nav-flash.flash-give { animation: nav-flash-give 0.9s ease-out; }
}

.view-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
}

/* Dashboard Table view: sortable column headers (dashboard.js tableSortHeader). */
.th-sort {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    font: inherit; font-weight: 700; color: inherit; border-radius: var(--r-xs);
}
.th-sort:hover { text-decoration: underline; }
.th-sort:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.th-sort-arrow { display: inline-block; min-width: 1em; font-size: var(--fs-2xs); }

.view-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.view-toggle-btn.active {
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.view-toggle-btn:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 1px;
}

/* Search button in the dashboard's Recent Activity header */
.icon-btn-search {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.icon-btn-search:hover,
.icon-btn-search:focus-visible {
  color: var(--a);
  border-color: var(--a);
  outline: none;
}

.icon-btn-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Light/dark toggle beside the logo */
.nav-theme-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-sm);
}

.nav-theme-btn:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.icon-btn-add {
  background: var(--s);
  color: var(--on-s);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn-del {
  background: none;
  color: var(--d);
  border: none;
  cursor: pointer;
  font-size: var(--fs-lg);
  padding: 0 5px;
}

/* Modals & Menus */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

/* The one close button for every window: a quiet ✕ in the top-right corner. */
.close-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  z-index: 10;
  transition: background-color 0.15s, color 0.15s;
}
.close-x:hover { background: var(--hover-bg); color: var(--text-main); }
.close-x:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }

.close-x:hover {
  transform: scale(1.1);
}

.menu-container {
  position: relative;
  display: inline-block;
}

.hamburger {
  cursor: pointer;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  align-items: flex-end;
}

.hamburger span {
  width: 24px;
  height: 3px;
  background: var(--text-main);
  border-radius: var(--r-xs);
  transition: 0.3s;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 40px;
  background: var(--card-bg);
  min-width: 190px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-radius: var(--r-md);
  border: 1px solid var(--border-color);
  display: none;
  z-index: 2000;
  overflow: hidden;
}

.dropdown-menu.show {
  display: block;
  animation: fadeIn 0.2s;
}

.menu-item {
  padding: 12px 16px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: block;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s, color 0.15s;
}

.menu-item:last-child {
  border-bottom: none;
}

/* Separates groups in the ☰ menu (tools / account / help / log out) */
.menu-divider {
  height: 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-color);
}

.menu-item:hover {
  background: var(--hover-bg);
  color: var(--a);
}

.menu-item.danger {
  color: var(--d);
}

.menu-item.danger:hover {
  background: color-mix(in srgb, var(--d) 10%, transparent);
}

.tx-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

/* Very subtle banding (a faint tint of the text color works in every
   palette and theme); hover and bulk-selected rows sit on top of it. */
.tx-row:nth-child(even) {
  background: color-mix(in srgb, var(--text-main) 3.5%, transparent);
}

.tx-row:hover,
.tx-row.selected {
  background: var(--hover-bg);
}

/* Dashboard transaction list: description + amount read as a pair; the
   amount column lines up (tabular figures). Spending is a muted red,
   green marks money added, muted marks transfers. */
.tx-desc {
  color: var(--text-main);
  font-size: var(--fs-md);
  font-weight: 700;
}

.tx-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 5.5rem;
  padding-left: 12px;
  font-size: var(--fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Spending: a muted red (danger blended into the text color) -- reads as
     money out without the glare of full red. */
  color: color-mix(in srgb, var(--d) 75%, var(--text-main));
}

.tx-amount.added { color: var(--s); }

.tx-amount.transfer { color: var(--text-muted); font-weight: 600; }

/* Tooltips */
#customTooltip {
  position: fixed;
  background: var(--p);
  color: var(--on-p);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: opacity 0.1s;
  white-space: nowrap;
}

#mobileTooltip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--p);
  color: var(--on-p);
  padding: 15px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 10001;
  transition: transform 0.3s;
  transform: translateY(-100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#mobileTooltip.show {
  transform: translateY(0);
}

/* ========================================== */
/* AUTH POPUP / SCREEN STYLES                 */
/* ========================================== */
#authScreen {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.2s ease-out;
}

.auth-card {
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  animation: modalPop 0.25s ease-out;
  padding: 2rem 1.75rem;
}

.auth-header h2 {
  color: var(--text-main);
  font-weight: 800;
  margin: 10px 0 5px 0;
  font-size: var(--fs-xl);
  letter-spacing: -0.5px;
}

/* ========================================== */
/* PUBLIC LANDING PAGE STYLES                 */
/* The app on a phone, with two floating cards over a soft amber shape */

/* Display face for headings and the wordmark throughout the app. */
h1, h2, h3,
.app-wordmark,
.boot-wordmark,
.app-dialog-title {
  font-family: var(--font-display);
}

/* Givehold brand mark (house + heart) */
.brand-mark {
  width: 1.5em;
  height: 1.5em;
  color: var(--a);
  flex-shrink: 0;
}

.brand-mark-heart {
  fill: var(--accent);
}

.brand-mark-lg {
  width: 2.5rem;
  height: 2.5rem;
}

.app-wordmark {
  letter-spacing: -0.5px;
}

.app-wordmark span {
  color: var(--a);
}

/* In-app wordmark doubles as a "home" link to the dashboard. */
.app-home-link {
  font-weight: 800;
  color: var(--text-main);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.app-home-link:hover span,
.app-home-link:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-home-link:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 3px;
}

.btn-pricing-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-pricing-outline:hover {
  background: var(--hover-bg);
}

.save-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--s);
  color: var(--on-s);
  font-size: var(--fs-2xs);
}

.btn-pro-cta { font-size: var(--fs-base); padding: 14px; }

/* One-time welcome offer (billing.js) */
.welcome-offer-card { max-width: 420px; text-align: center; position: relative; }

.welcome-offer-card .offer-headline { font-size: var(--fs-xl); font-weight: 800; margin: 6px 0; letter-spacing: -0.5px; }

.welcome-offer-card .offer-strike { text-decoration: line-through; color: var(--text-muted); }

.welcome-offer-card .offer-terms { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 12px; line-height: 1.45; }

.welcome-offer-card .offer-once { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--d); color: var(--on-d); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.4px; }

/* Keyframe Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes successFlash {
  0% { background-color: var(--s); color: var(--on-s); transform: scale(1.02); }
  100% { background-color: var(--p); color: var(--on-p); transform: scale(1); }
}

.flash-green {
  animation: successFlash 0.6s ease-out !important;
}

/* ========================================== */
/* APP DIALOG (replaces alert/confirm/prompt) */
/* ========================================== */
#appDialogModal {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  animation: fadeIn 0.15s ease-out;
}

.app-dialog {
  width: 100%;
  max-width: 400px;
  margin: 0;
  text-align: center;
  padding: 1.75rem 1.5rem 1.25rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  animation: modalPop 0.2s ease-out;
}

.app-dialog-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--on-a);
  background: var(--a);
}

.app-dialog[data-variant="error"] .app-dialog-icon,
.app-dialog[data-variant="danger"] .app-dialog-icon { background: var(--d); }

.app-dialog[data-variant="success"] .app-dialog-icon { background: var(--s); }

.app-dialog[data-variant="warning"] .app-dialog-icon { background: var(--accent); color: var(--on-accent); }

.app-dialog-title {
  margin: 0 0 8px;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-main);
}

.app-dialog-message {
  margin: 0 0 18px;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* PRO tag beside the wordmark (billing.js renderProBadge) */
/* Deliberately below the type scale's smallest step (--fs-2xs): a small
   status chip, not a control. */
.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: calc(var(--fs-2xs) * 0.78);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: pointer;
  width: auto;
  flex: none;
}
.pro-badge.hidden { display: none; }
.pro-badge .ico { width: 9px; height: 9px; }
/* Free trial: outlined, so it reads as "not paid for yet" */
.pro-badge.trial {
  background: color-mix(in srgb, var(--accent) 14%, var(--card-bg));
  color: var(--text-main);
  border-color: var(--accent);
}
.pro-badge.payment-due {
  background: color-mix(in srgb, var(--warn) 16%, var(--card-bg));
  color: var(--warn);
  border-color: var(--warn);
}

/* Dialog.confirm's optional checkbox (e.g. "Don't show this warning again") */
.app-dialog-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 16px;
  font-size: var(--fs-sm);
  color: var(--text-main);
  cursor: pointer;
}
.app-dialog-check input { width: auto; margin: 0; }

.app-dialog-input {
  margin-bottom: 16px;
  text-align: left;
}

.app-dialog-actions {
  display: flex;
  gap: 10px;
}

.app-dialog-actions .btn {
  flex: 1;
  padding: 12px;
  font-size: var(--fs-md);
}

.app-dialog-cancel {
  background: var(--hover-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.app-dialog-danger {
  background: var(--d);
  color: var(--on-d);
}

/* ========================================== */
/* HOUSEHOLD SWITCHER (nav, under the logo)   */
/* ========================================== */
.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  min-width: 0;
}

.household-switcher-btn {
  background: none;
  border: none;
  padding: 2px 0 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--a);
  cursor: pointer;
  max-width: 45vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.household-switcher-btn:hover {
  text-decoration: underline;
}

.household-switcher-menu {
  left: 0;
  right: auto;
  top: 24px;
  min-width: 220px;
}

.household-switcher-menu .menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.household-switcher-menu .menu-item.active {
  color: var(--a);
  cursor: default;
}

.household-switcher-menu .menu-item small {
  font-weight: 600;
  color: var(--text-muted);
}

/* Quick Setup wizard (js/modules/quicksetup.js) */
.qs-card { width: 92%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; }

.qs-h { margin: 4px 0 6px; font-size: var(--fs-lg); }

.qs-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 14px; line-height: 1.45; }

.qs-hint { color: var(--text-muted); font-size: var(--fs-xs); margin: 8px 0 0; }

.qs-dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; }

.qs-dots span { width: 26px; height: 5px; border-radius: var(--r-pill); background: var(--border-color); }

.qs-dots span.on { background: var(--a); }

.qs-choice {
  display: block; width: 100%; text-align: left; margin: 10px 0 0; padding: 14px 16px;
  border: 1px solid var(--border-color); border-radius: var(--r-md); background: var(--tile-bg, var(--card-bg));
  color: var(--text-main); font: inherit; cursor: pointer;
}

.qs-choice:hover { border-color: var(--a); }

.qs-choice strong { display: block; font-size: var(--fs-base); margin-bottom: 2px; }

.qs-choice span { font-size: var(--fs-sm); color: var(--text-muted); }

.qs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }

.qs-row input, .qs-row select { margin: 0; }

/* Text/amount fields take the room; the global `select { width: 100% }`
   would otherwise squeeze them to nothing. Rows wrap on narrow phones. */
.qs-row input[type="text"], .qs-row input[type="number"] { flex: 1 1 140px; min-width: 110px; }

.qs-row select { width: auto; flex: 0 0 auto; }

.qs-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: var(--fs-sm); }

.qs-field span { display: flex; flex-direction: column; }

.qs-field small { color: var(--text-muted); font-size: var(--fs-xs); }

.qs-field input { max-width: 130px; margin: 0; }

.qs-inline { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); width: 100%; }

.qs-inline input { flex: 1; margin: 0; }

.qs-check { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); white-space: nowrap; }

.qs-check input { width: auto; margin: 0; }

.qs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }

.qs-chip {
  border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main);
  border-radius: var(--r-pill); padding: 5px 12px; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}

.qs-chip.on, .qs-chip:hover { border-color: var(--a); color: var(--a); }

.qs-link { background: none; border: none; color: var(--a); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 4px 0; }

.qs-total { margin: 12px 0 0; font-size: var(--fs-md); font-weight: 700; }

.qs-tips { background: var(--tile-bg, var(--hover-bg)); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.5; margin-bottom: 12px; }

.qs-review { max-height: 38vh; overflow-y: auto; padding-right: 2px; }

.qs-nav { display: flex; gap: 10px; margin-top: 18px; }

.qs-nav .btn { flex: 1; }

.qs-skip { text-align: center; margin: 10px 0 0; font-size: var(--fs-sm); }

.qs-skip a { color: var(--text-muted); }

/* The Steward welcome (giving.js GivingWelcome): Quick Setup's window with
   the Giving settings' fields. */
.gw-steps { margin: 0; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.5; }

.gw-steps li { margin-bottom: 10px; }

.gw-card .giving-fields { margin: 12px 0 0; }

.gw-card .giving-fields .qs-chips { margin: 0; }

.gw-card .qs-tips { overflow-wrap: anywhere; }

.qs-setup-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--a); }

/* Dashboard: quiet links under the headline (savings summary, trends) */
.dash-link {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--a);
}

.dash-link:hover { text-decoration: underline; }

/* 🐷 Savings tab (js/modules/savings.js) */
.sv-page .card { margin-bottom: 14px; }

.sv-hero { text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--s) 12%, var(--card-bg)), var(--card-bg) 70%); }

.sv-pig {
  font-size: var(--fs-display); line-height: 1; background: none; border: none; cursor: pointer; padding: 4px;
  display: inline-block; animation: svBob 3.2s ease-in-out infinite;
}

.sv-pig.wiggle { animation: svWiggle .6s ease; }

@keyframes svBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@keyframes svWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 75% { transform: rotate(14deg) scale(1.1); } }

.sv-hero-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

.sv-hero-total { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 10px; color: var(--text-main); }

.sv-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.sv-pill { font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: var(--hover-bg); color: var(--text-muted); }

.sv-pill.good { background: color-mix(in srgb, var(--s) 18%, transparent); color: var(--s); }

.sv-pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

.sv-pill.streak { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--warn); }

.sv-note { display: flex; gap: 12px; align-items: center; font-size: var(--fs-md); line-height: 1.45;
  border-left: 4px solid var(--a); }

.sv-note-icon { font-size: var(--fs-xl); flex: 0 0 auto; }

.sv-milestone-head { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 8px; color: var(--text-muted); }

.sv-bar { height: 10px; border-radius: var(--r-pill); background: var(--hover-bg); overflow: hidden; }

.sv-bar-fill { height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--a), var(--s)); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }

.sv-funds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }

.sv-fund {
  background: var(--card-bg); border: 1px solid var(--border-color); border-top: 4px solid var(--fund-color);
  border-radius: var(--r-lg); padding: 14px 16px 10px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}

.sv-fund:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }

.sv-fund-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

.sv-fund-name { font-weight: 700; }

.sv-fund-balance { font-size: var(--fs-lg); font-weight: 800; }

.sv-fund-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

.sv-grew { color: var(--s); font-weight: 700; }

.sv-pos { color: var(--s); }

.sv-neg { color: var(--d); }

.sv-spark { width: 100%; height: 34px; margin-top: 6px; color: var(--fund-color); }

.sv-spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sv-spark-area { fill: currentColor; opacity: .12; }

.sv-fund-detail { margin-top: 10px; border-top: 1px solid var(--border-color); padding-top: 10px; cursor: default; }

.sv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.sv-table th { text-align: left; color: var(--text-muted); font-weight: 700; padding: 4px 2px; }

.sv-table td { padding: 4px 2px; border-top: 1px solid var(--border-color); }

.sv-sub-h { font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 10px 0 4px; }

.sv-tx { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }

.sv-tx li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }

.sv-muted { color: var(--text-muted); font-size: var(--fs-xs); margin: 8px 0 0; }

.sv-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.sv-badge { font-size: var(--fs-xs); font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-color); }

.sv-badge.earned { background: color-mix(in srgb, var(--a) 12%, var(--card-bg)); border-color: color-mix(in srgb, var(--a) 40%, var(--border-color)); color: var(--text-main); }

.sv-badge.locked { color: var(--text-muted); opacity: .6; filter: grayscale(1); }

.sv-empty { text-align: center; padding: 28px 20px; }

/* Celebration effects: pointer-events none, removed after a few seconds */
.sv-fx { position: fixed; inset: 0; pointer-events: none; z-index: 5000; overflow: hidden; }

.sv-piece { position: absolute; width: 8px; height: 12px; border-radius: var(--r-xs); will-change: transform, opacity; }

.sv-piece.dot { width: 8px; height: 8px; border-radius: 50%; }

.sv-piece.streamer { width: 4px; height: 16px; border-radius: var(--r-xs); }

.sv-piece.spark { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }

.sv-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); opacity: 0; z-index: 5001;
  background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border-color);
  box-shadow: 0 12px 30px rgba(0,0,0,.18); border-radius: var(--r-pill); padding: 10px 18px; font-weight: 700; font-size: var(--fs-md);
  transition: opacity .35s ease, transform .35s ease; max-width: calc(100vw - 32px); text-align: center;
}

.sv-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .sv-pig, .sv-pig.wiggle { animation: none; }

.sv-bar-fill { transition: none; }
}

/* Setup (js/modules/setup.js): compact, one line per item on phones */

.setup-save { font-size: var(--fs-xs); font-weight: 700; color: var(--s); }

.setup-save.saving { color: var(--text-muted); }

.setup-summary { padding-top: 12px; }

/* The month switcher used by every month-based view: ◀ October 2026 ▶ */
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.month-nav-label { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--text-main); text-align: center; }
.month-nav-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--border-color);
  background: var(--card-bg); color: var(--text-main); font-size: var(--fs-md); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.month-nav-btn:hover { border-color: var(--a); color: var(--a); }
.month-nav-btn:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }

/* The app-wide month switcher above the view (ViewMonth in app.js): same
   width as the view below it. Tinted, with "This month", while another
   month is shown, so it's clear the whole app is on that month. */
.app-month-bar {
  max-width: 600px;
  margin: 1rem auto -0.25rem;
  padding: 6px 1rem;
  box-sizing: border-box;
}
.app-month-bar .month-nav-label { flex: 1; }
.app-month-bar.away .month-nav-label { color: var(--a); }
.app-month-bar.away {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--r-md);
}
.app-month-bar #monthBarToday { width: auto; flex: 0 0 auto; }
html.vt-tabs #monthBar { view-transition-name: month-bar; }

/* Savings: "Viewing savings as of ..." while another month is shown. */
.sv-asof {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 16%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: var(--fs-md); color: var(--text-main);
}
.sv-asof .btn { width: auto; }

.setup-income { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: var(--fs-md); }

.setup-income .money-input { max-width: 170px; }

.alloc-bar { height: 6px; border-radius: var(--r-pill); background: var(--hover-bg); overflow: hidden; margin: 12px 0 6px; }

.alloc-bar > div { height: 100%; width: 0; background: var(--a); border-radius: var(--r-pill); transition: width .3s ease; }

.alloc-bar > div.over { background: var(--d); }

.setup-left { text-align: right; font-size: var(--fs-sm); color: var(--text-muted); }

.setup-left strong { font-size: var(--fs-md); }

/* $-prefixed amount field */
.money-input { position: relative; display: flex; align-items: center; flex: 0 0 auto; }

.money-input > span { position: absolute; left: 10px; color: var(--text-muted); font-weight: 700; pointer-events: none; }

.money-input input { margin: 0; padding: 10px 10px 10px 22px; text-align: right; font-variant-numeric: tabular-nums; }

.setup-actions { display: flex; align-items: center; gap: 6px; }

.setup-chip {
  border: 1px solid var(--border-color); background: var(--card-bg); color: var(--a);
  border-radius: var(--r-pill); padding: 6px 12px; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; width: auto;
}

.setup-chip:hover:not(:disabled) { border-color: var(--a); }

.setup-chip:disabled { opacity: .4; cursor: default; }

.setup-chip.danger { color: var(--d); }

.setup-more {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-md); border: none; background: transparent;
  color: var(--text-muted); font-size: var(--fs-lg); font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}

.setup-more:hover { background: var(--hover-bg); color: var(--a); }

.setup-link { background: none; border: none; color: var(--a); font: inherit; font-weight: 700; cursor: pointer; padding: 0 0 0 8px; }

.setup-row {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0;
  border-bottom: 1px solid var(--border-color); width: 100%;
}

.setup-row:last-child { border-bottom: none; }

.setup-row .drag-handle { display: none; cursor: grab; color: var(--text-muted); }

@media (hover: hover) and (pointer: fine) {
  .setup-row .drag-handle { display: inline; }
}

.setup-row-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left;
  background: none; border: none; padding: 8px 0; font: inherit; color: var(--text-main); cursor: pointer;
}

.setup-row-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

.setup-row-name .nm.placeholder { color: var(--text-muted); font-style: italic; }

.setup-row-name .type-ic { flex: 0 0 auto; font-size: var(--fs-md); }

.setup-row .money-input { width: 118px; }

.setup-row .money-input input { width: 100%; }

.setup-row.bill { background: none; border-left: none; border-right: none; border-top: none; font: inherit; color: var(--text-main); cursor: pointer; text-align: left; }

.bill-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bill-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bill-main small { color: var(--text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bill-amt { font-weight: 800; font-variant-numeric: tabular-nums; }

.setup-empty { text-align: center; padding: 14px 10px; font-size: var(--fs-sm); color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: var(--r-md); }

/* Edit sheet: bottom sheet on phones, centered card on wider screens */
.setup-sheet-backdrop {
  position: fixed; inset: 0; z-index: 2100; background: var(--modal-overlay);
  display: flex; align-items: flex-end; justify-content: center;
}

.setup-sheet {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: var(--card-bg); border-radius: 20px 20px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.25); animation: sheetUp .22s ease-out;
}

.setup-sheet h3 { margin: 6px 0 14px; }

.setup-sheet-grip { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--border-color); margin: 0 auto 6px; }

@keyframes sheetUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }

@media (min-width: 720px) {
  .setup-sheet-backdrop { align-items: center; }

.setup-sheet { border-radius: var(--r-lg); }

.setup-sheet-grip { display: none; }
}

.sheet-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); margin-bottom: 14px; }

.sheet-field input, .sheet-field select { margin: 0; }

.sheet-field .money-input input { width: 100%; text-align: left; }

.sheet-two { display: flex; gap: 10px; }

.sheet-two > .sheet-field { flex: 1; min-width: 0; }

.sheet-hint { display: block; font-weight: 500; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; margin: -4px 0 12px; }

.sheet-field .sheet-hint { margin: 0; }

.sheet-balance { font-size: var(--fs-sm); padding: 10px 12px; border-radius: var(--r-md); background: var(--hover-bg); margin-bottom: 14px; }

.sheet-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.setup-sheet-actions { display: flex; gap: 10px; position: sticky; bottom: 0; background: var(--card-bg); padding-top: 6px; }

.setup-sheet-actions .btn { flex: 1; }

.seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--hover-bg); }

.seg-btn {
  flex: 1; border: none; border-radius: var(--r-sm); padding: 9px 4px; background: transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); cursor: pointer;
}

.seg-btn.on { background: var(--card-bg); color: var(--a); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

.seg-btn:disabled { cursor: default; }

/* Header "AI Receipt" button: one line at any width. */
#aiReceiptBtn {
  background: var(--s); color: var(--on-s); border: none; border-radius: var(--r-sm);
  padding: 5px 9px; font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap; cursor: pointer;
}

/* Header right side: AI Receipt, sync, alerts, then the menu. Tighter on
   narrow phones so nothing overlaps the brand row. */
.nav-actions { display: flex; align-items: center; gap: 15px; }
.nav-icons { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg); }
@media (max-width: 420px) {
  .nav-actions { gap: 8px; }
  .nav-icons { gap: 8px; }
  #aiReceiptBtn { padding: 4px 7px; }
}

/* Header on phones: AI Receipt reads "AI" (same color and shape), and the
   color-theme test switch, dark-mode moon and sync icon step aside -- the
   last two have ☰ menu items (.phone-only), the switch is in "Vote on
   colors". Wider screens keep everything. */
.ai-btn-short, .menu-item.phone-only { display: none; }
@media (max-width: 600px) {
  .ai-btn-long { display: none; }
  .ai-btn-short { display: inline; }
  #aiReceiptBtn { padding: 4px 10px; }
  .palette-switch, .nav-theme-btn, #updateIcon { display: none; }
  .menu-item.phone-only { display: block; }
}

/* Line icons (sprite in app.html; icon() in app.js). Sized to the text. */
.ico {
  width: 1.15em; height: 1.15em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}
.menu-item .ico { margin-right: 4px; color: var(--text-muted); }
.menu-item.danger .ico { color: inherit; }
/* Header icon buttons (sync, alerts, theme). */
.nav-icon-btn, .nav-theme-btn {
  background: none; border: none; padding: 4px; margin: 0; cursor: pointer;
  color: var(--text-main); font-size: var(--fs-lg); line-height: 0; border-radius: var(--r-sm);
}
.nav-icon-btn:hover, .nav-theme-btn:hover { background: var(--hover-bg); }
#navNotifBtn { color: var(--text-main); line-height: 0; }

/* Page header for every tab but the Dashboard (whose month switcher heads
   it): one title style, actions (Close, save status) on the right. */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 36px; }
.page-title { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
/* Card titles: the h3 at the top of a card. */
.card-title, .section-header > h3 { margin: 0; font-size: var(--fs-lg); font-weight: 800; color: var(--text-main); }
.card > h3.card-title:first-child { margin-bottom: 12px; }

/* On/off settings: a checkbox drawn as a switch (same look as the header's
   palette switch). Keeps the checkbox's keyboard and form behavior. */
input[type="checkbox"].switch {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 38px; height: 22px; margin: 0; padding: 0;
  border-radius: var(--r-pill); border: 1px solid var(--border-color);
  background: var(--hover-bg); position: relative; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
input[type="checkbox"].switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--card-bg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-main) 30%, transparent);
  transition: transform 0.2s;
}
input[type="checkbox"].switch:checked { background: var(--p); border-color: var(--p); }
input[type="checkbox"].switch:checked::after { transform: translateX(16px); }
input[type="checkbox"].switch:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"].switch, input[type="checkbox"].switch::after { transition: none; }
}

/* Alerts badge on the bell (the button itself has line-height 0). */
#navNotifBtn #notifBadge { line-height: 1.2; top: -6px; right: -8px; }
/* Steward's icon buttons (giving link, settings) share one look. */
.steward-gear, a.steward-gear { color: var(--text-main); text-decoration: none; }
/* Trends' card collapse buttons. */
.toggle-btn {
  background: none; border: none; padding: 4px; margin: 0; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-lg); line-height: 0; border-radius: var(--r-sm);
}
.toggle-btn:hover { background: var(--hover-bg); color: var(--text-main); }

/* Text helpers for markup built in JS (prefer these to inline styles). */
.text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--text-muted); }
.text-muted-sm { font-size: var(--fs-sm); color: var(--text-muted); }
.caption-muted { font-size: var(--fs-xs); color: var(--text-muted); }
.field-label { font-size: var(--fs-xs); font-weight: 700; }
.link-sm { font-size: var(--fs-sm); font-weight: 700; color: var(--a); }
.text-brand { color: var(--a); }
.text-danger { color: var(--d); }
.text-success { color: var(--s); }
.d-block { display: block; }
.help-subhead { border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }
/* Help page: one collapsible topic per row (help.js). */
.help-intro { margin: 0 0 4px; color: var(--text-muted); line-height: 1.5; }
.help-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.help-actions .btn { width: auto; padding: 8px 16px; }
.help-steps { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }
.help-topic { border-top: 1px solid var(--border-color); }
.help-topic:first-of-type { border-top: 0; }
.help-topic summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; font-weight: 700; color: var(--text-main);
}
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary::after { content: "+"; margin-left: auto; color: var(--a); font-size: var(--fs-lg); line-height: 1; }
.help-topic[open] summary::after { content: "–"; }
.help-topic summary:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-radius: var(--r-xs); }
.help-topic ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.55; font-size: var(--fs-sm); }
.help-topic li + li { margin-top: 6px; }

/* "Pro" next to a Pro-only button or feature (app and landing page). */
.pro-chip {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--tile-bg);
  color: var(--a);
  border: 1px solid var(--tile-border);
}

/* ---------- Statement import (statement-import.js, from Reconcile) ---------- */
.stmt-card { width: 94%; max-width: 640px; }
.stmt-points { margin: 10px 0 16px; padding-left: 18px; display: grid; gap: 6px; }
.stmt-working { text-align: center; padding: 18px 0; }
.stmt-working p { margin: 6px 0; }
.spinner {
  width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%;
  border: 3px solid var(--border-color); border-top-color: var(--a);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.stmt-head { margin: 16px 0 6px; font-size: var(--fs-md); }
.stmt-list { display: grid; gap: 8px; }
.stmt-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--r-md); background: var(--card-bg);
}
.stmt-check { width: 18px; height: 18px; margin: 0; accent-color: var(--p); }
.stmt-main { min-width: 0; display: grid; gap: 4px; }
.stmt-desc { margin: 0; padding: 6px 8px; font-size: var(--fs-sm); font-weight: 600; }
.stmt-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-xs); color: var(--text-muted); }
.stmt-meta select { margin: 0; padding: 4px 8px; width: auto; max-width: 100%; font-size: var(--fs-xs); }
.stmt-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stmt-fold { margin-top: 14px; border-top: 1px solid var(--border-color); padding-top: 10px; }
.stmt-fold summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); }
.stmt-plain { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.stmt-plain li { display: flex; justify-content: space-between; gap: 10px; color: var(--text-muted); }
.stmt-plain b { font-variant-numeric: tabular-nums; color: var(--text-main); }
.stmt-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }

/* ---------- The support wall (supportwall.js): Basic households ---------- */
/* Above ordinary windows, under Billing & Plan (modal-raised) so
   "Subscribe now" can open it on top. */
.modal-overlay.support-wall { z-index: 2050; align-items: center !important; }
.support-wall-card { width: 92%; max-width: 520px; margin: auto; text-align: left; padding: 28px 26px; }
.support-wall-card .brand-mark { color: var(--a); margin-bottom: 6px; }
.support-wall-card h2 { margin: 0 0 10px; font-family: var(--font-display); }
.support-wall-card p { margin: 0 0 12px; line-height: 1.55; }
.support-wall-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.support-wall-actions .btn { flex: 1 1 200px; }

/* ---------- Re-accepting updated Terms (terms.js): above everything ---------- */
.modal-overlay.terms-gate { z-index: 2060; align-items: center !important; }
.terms-gate-card { width: 92%; max-width: 520px; margin: auto; padding: 26px 24px; }
.terms-gate-card h2 { margin: 0 0 10px; font-family: var(--font-display); }
.terms-gate-card p { margin: 0 0 10px; }
.terms-gate-changes { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-sm); }
.terms-gate-card .terms-row { margin: 12px 0 14px; }
.receipt-privacy-hint { margin: 0 0 12px; font-size: var(--fs-xs); }

/* A failed payment, still within the paid-before grace (billing.js). */
.join-pending-banner.payment-banner {
  background: color-mix(in srgb, var(--warn) 14%, var(--card-bg));
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}