:root {
  color-scheme: dark;
  --background: #18191f;
  --surface: #22232c;
  --surface-strong: #2c2d39;
  --surface-soft: #1d1e26;
  --text: #f4f1ff;
  --muted: #aaa6bd;
  --border: #363747;
  --accent: #c7a6ff;
  --accent-hover: #dac8ff;
  --accent-pressed: #a986ef;
  --good: #79ddb8;
  --bad: #ff8296;
  --warn: #ffc66d;
  --blue: #8abfff;
  --sky: #a78bfa;
  --nav: #111219;
  --on-accent: #14101d;
  --backdrop-top: #20212a;
  --footer-text: #6f6b7d;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
  --hover-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  --focus: 0 0 0 2px var(--background), 0 0 0 4px var(--accent);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #12131a;
  --surface: #1b1c25;
  --surface-strong: #282936;
  --surface-soft: #161720;
  --text: #f6f3ff;
  --muted: #aaa5be;
  --border: #303141;
  --accent: #c7a6ff;
  --accent-hover: #dfcdff;
  --accent-pressed: #a684ef;
  --good: #72deb8;
  --bad: #ff8790;
  --warn: #ffc36a;
  --blue: #89bbff;
  --sky: #a78bfa;
  --nav: #0f1017;
  --on-accent: #14101d;
  --backdrop-top: #1b1c26;
  --footer-text: #6f6b7d;
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  --hover-shadow: 0 22px 46px rgba(0, 0, 0, 0.42);
  --focus: 0 0 0 2px var(--background), 0 0 0 4px var(--accent);
}

/* Light is a full palette swap, not a tint: every token the dark themes define
   is redefined here, so no component falls back to a dark value. */
:root[data-theme="light"] {
  color-scheme: light;
  --background: #f3f1f9;
  --surface: #ffffff;
  --surface-strong: #f1eef9;
  --surface-soft: #f8f7fc;
  --text: #1b1826;
  --muted: #5d5872;
  --border: #e2dded;
  --accent: #6d3fd4;
  --accent-hover: #8358e4;
  --accent-pressed: #5a30bb;
  --good: #10805c;
  --bad: #c62d48;
  --warn: #9a6404;
  --blue: #2563c4;
  --sky: #6d3fd4;
  --nav: #ffffff;
  --on-accent: #ffffff;
  --backdrop-top: #ffffff;
  --footer-text: #5d5872;
  --shadow: 0 14px 32px rgba(39, 27, 72, 0.10);
  --hover-shadow: 0 20px 44px rgba(39, 27, 72, 0.16);
  --focus: 0 0 0 2px var(--background), 0 0 0 4px var(--accent);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent), transparent 82%) 0 260px, transparent 520px),
    linear-gradient(180deg, var(--backdrop-top) 0, var(--background) 360px);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.38;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.app-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 12px;
  width: min(1480px, calc(100% - 24px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px 0 24px;
}

/* One bar: brand, tabs, account. Sticks so the tabs stay reachable on long
   pages, which matters most on a phone. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
}

/* Prev/next either side of a month field. Sits in the header on every size;
   on mobile the section tabs move to the bottom bar and this takes their room. */
.month-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}

.month-nav {
  min-width: 34px;
  min-height: 34px;
}

.month-field {
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), transparent 20%);
  color: var(--text);
  font-weight: 820;
  color-scheme: dark light;
}

.month-field:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Brand and the Updates bell travel together as the header's left cluster, so
   they occupy a single grid cell and the bar's column layout is unchanged. */
.header-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Icon-only, circular notification button. Sized to match the account avatar so
   the two round controls bookend the bar. */
.header-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface), transparent 20%);
  color: var(--muted);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 140ms ease;
}

.header-bell:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 34%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--text);
  transform: translateY(-1px);
}

.header-bell.is-active {
  border-color: color-mix(in srgb, var(--accent), white 8%);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), white 18%));
  color: var(--on-accent);
}

.header-bell .icon {
  width: 19px;
  height: 19px;
}

/* The waiting-count pip. Rides the top-right of the bell and, past nine, reads
   "9+" so it never grows wide enough to spill off the circle. */
.header-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .header-bell {
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  .header-bell:hover {
    transform: none;
  }
}

/* The logo is the way back to the Dashboard, so it is a real button - keyboard
   reachable and announced as a control - with the chrome stripped off. */
.app-brand {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 8px;
}

.app-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.app-brand img {
  width: auto;
  height: 34px;
  object-fit: contain;
  transform-origin: left center;
  transition: transform 0.18s ease;
}

.app-brand:hover img,
.app-brand:focus-visible img {
  transform: scale(1.05);
}

/* Hover growth is decoration, not information - drop it when motion is not
   wanted, leaving the focus ring to do the work. */
@media (prefers-reduced-motion: reduce) {
  .app-brand img {
    transition: none;
  }

  .app-brand:hover img,
  .app-brand:focus-visible img {
    transform: none;
  }
}

.app-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 860;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.nav-tab:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent), var(--border) 34%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--text);
}

.nav-tab.is-active {
  border-color: color-mix(in srgb, var(--accent), white 8%);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), white 18%));
  color: var(--on-accent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent), transparent 80%);
}

/* A header group (e.g. Planning) anchors its dropdown, so it is the positioning
   context for the absolutely placed menu below. */
.nav-group {
  position: relative;
  display: inline-flex;
}

/* The chevron sits after the label and flips when the dropdown is open, the same
   read as any disclosure control. */
.nav-group-toggle .nav-chevron {
  display: grid;
  place-items: center;
  margin-left: -2px;
  transition: transform 160ms ease;
}

.nav-group-toggle .nav-chevron .icon {
  width: 15px;
  height: 15px;
}

.nav-group.is-open .nav-group-toggle .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 208px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.nav-dropdown button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.nav-dropdown button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.nav-dropdown button.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.nav-dropdown button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nav-dropdown .icon {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-toggle .nav-chevron {
    transition: none;
  }
}

.app-footer {
  padding: 6px 2px 0;
  color: var(--footer-text);
  font-size: 0.76rem;
  text-align: center;
}

/* The bottom tab bar only exists on mobile; on desktop the header tabs stand in
   for it, so it is hidden here and revealed in the 760px block. */
.bottom-nav {
  display: none;
}

/* ---- Collapsible cards ---- */

/* The heading turns into a full-width toggle; the chevron rides the right edge
   and the title block takes the rest. Action buttons sit outside this toggle
   in the heading, so they keep working whether the card is open or shut. */
.card-collapse-toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.card-collapse-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.card-collapse-titles {
  min-width: 0;
}

.collapse-chevron {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 180ms ease;
}

/* Closed points right (collapsed), open points down. The base glyph is the
   down chevron, so the closed state rotates it a quarter turn anti-clockwise. */
.card.is-collapsed .collapse-chevron {
  transform: rotate(-90deg);
}

.card.is-collapsed .card-region {
  display: none;
}

/* In a stretch grid (the plan page) every card in a row grows to the tallest,
   so a collapsed card would keep its neighbour's height with an empty gap
   below the heading. Aligning it to the top lets it shrink to just the head. */
.card.is-collapsed {
  align-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .collapse-chevron {
    transition: none;
  }
}

.app-header,
.auth-card {
  border: 1px solid color-mix(in srgb, var(--border), white 4%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface), var(--accent) 3%), var(--surface-soft));
  box-shadow: var(--shadow);
}


.auth-logo-image {
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.auth-logo-image img {
  width: min(150px, 60%);
  height: auto;
}


/* Account menu */
.account-menu {
  position: relative;
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 55%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.account-avatar:hover,
.account-menu.is-open .account-avatar {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.account-avatar.large {
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
  cursor: default;
}

.account-avatar.has-image {
  overflow: hidden;
  padding: 0;
  background: var(--surface-strong);
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The avatar itself is a span so it can hold an image; the button around it in
   the header is what actually takes the click. */
.account-avatar-button {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  line-height: 0;
}

.avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Admin panel ---- */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.admin-user {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow);
}

.admin-user-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-user-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-user-name strong,
.admin-user-name h2 {
  margin: 0;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.admin-user-name small,
.admin-user-name p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.admin-user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-lock-card {
  max-width: 520px;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 214px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.account-dropdown-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%);
  margin-bottom: 4px;
}

.account-dropdown-head strong {
  display: block;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.account-dropdown-head small {
  color: var(--muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.account-dropdown button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.account-dropdown button:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.account-dropdown button.is-danger:hover {
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  color: var(--bad);
}

.account-dropdown .icon {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

/* Account and upgrade views */
/* Details on the left, two-factor as its own column beside it - the page was
   capped at 720px and left the right half of a desktop window empty. */
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  max-width: 1160px;
}

.account-grid > .card:only-child {
  grid-column: 1 / -1;
  max-width: 720px;
}

@media (max-width: 900px) {
  .account-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
  }
}

.avatar-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent), transparent 92%);
}

.avatar-preview img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-preview-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.avatar-preview-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.avatar-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.account-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%);
}

.account-identity strong {
  display: block;
  font-size: 1rem;
}

.account-identity small {
  color: var(--muted);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Recovery code */
.recovery-panel {
  display: grid;
  gap: 10px;
}

.recovery-panel h2 {
  margin: 0;
  font-size: 1.2rem;
}

.recovery-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.recovery-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.recovery-code code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  user-select: all;
  overflow-wrap: anywhere;
}

.recovery-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.recovery-warning .icon {
  flex: none;
  color: var(--warn);
}

.account-form {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--border), transparent 40%);
}

.account-form h3 {
  margin: 0;
  font-size: 0.94rem;
}

.danger-zone {
  margin-top: 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--bad), transparent 60%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bad) 6%, transparent);
}

.secondary-button.danger {
  border-color: color-mix(in srgb, var(--bad), transparent 45%);
  color: var(--bad);
}

.account-form button {
  justify-self: start;
}

.field-note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.empty-note {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 4px 0;
}

.totp-setup {
  margin-bottom: 10px;
}

.totp-steps {
  margin: 0 0 10px;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.totp-secret {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.totp-secret code {
  padding: 6px 10px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  user-select: all;
  overflow-wrap: anywhere;
}

.reset-advanced {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--surface-soft);
}

.reset-advanced summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}

.reset-advanced .field {
  margin-top: 8px;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.auth-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.row-heading,
.pot-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mark,
.logo-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 10%);
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
}

.logo-mark {
  position: relative;
}

.logo-mark strong {
  font-size: 0.92rem;
  font-weight: 950;
}

.logo-mark .icon {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 13px;
  height: 13px;
}

.icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  flex: 0 0 auto;
}

.scan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 15%);
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 900;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}

.scan-button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.scan-button .icon {
  width: 17px;
  height: 17px;
}

.widget-metrics div,
.money-card,
.auto-panel,
.horizon-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.widget-metrics span,
.money-card span,
.bill-list small,
.scenario-bars span,
.horizon-card span,
.snapshot-values span,
.pot-row-meta,
.field span,
.check-field span,
.subhead {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}


.workspace {
  padding-top: 4px;
  min-width: 0;
}

/* ---- Dashboard widgets ---- */

.dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dashboard-toolbar h2 {
  margin: 0;
  font-size: 1.16rem;
}

.dashboard-toolbar p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Left bar, main section, right bar. Flex rather than grid tracks so an empty
   zone - which is not rendered at all outside edit mode - simply leaves more
   room for the rest, instead of holding an empty column open. */
.widget-canvas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* flex-basis 0 with a per-zone grow set in the markup: widths end up in
   proportion to how much each zone holds. The min-widths are the floor that
   stops a busy side bar collapsing the middle. */
.widget-zone {
  display: grid;
  align-content: start;
  flex: 0 1 0;
  gap: 12px;
  min-width: 0;
}

.zone-left,
.zone-right {
  min-width: 268px;
}

.zone-main {
  min-width: 360px;
}

.dashboard-canvas.is-editing .widget-zone {
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--accent), var(--border) 40%);
  border-radius: 12px;
  min-height: 96px;
}

.dashboard-canvas.is-editing .widget-zone.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 92%);
}

.widget-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 860;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.widget-zone-empty {
  margin: 0;
  padding: 18px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-strong), transparent 40%);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* A widget can be any width now, so its contents have to respond to the widget
   rather than to the viewport - a 268px side bar on a 1500px screen still needs
   the narrow layout. The @container rules below do that. */
.widget {
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow);
}

.widget.is-editing {
  border-color: color-mix(in srgb, var(--accent), var(--border) 30%);
}

.widget.is-dragging {
  opacity: 0.45;
}

.widget.is-editing:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.widget-cover {
  height: 64px;
  line-height: 0;
}

.widget-cover-art {
  display: block;
  width: 100%;
  height: 64px;
}

.widget-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 12px 14px 6px;
}

.widget.is-editing .widget-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* A collapsed widget keeps its head and cover but drops its body, so the
   dashboard can be thinned out without losing the layout. */
.widget.is-collapsed .widget-body {
  display: none;
}

.widget-collapse .collapse-chevron {
  display: grid;
  place-items: center;
  transition: transform 180ms ease;
}

.widget.is-collapsed .widget-collapse .collapse-chevron {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .widget-collapse .collapse-chevron {
    transition: none;
  }
}

.widget-title h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.widget-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.widget-grip {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--accent);
  cursor: grab;
}

.widget-tools {
  display: flex;
  gap: 2px;
}

.widget-body {
  padding: 8px 14px 14px;
}

.widget-body > .empty-state {
  margin: 0;
}

/* 150px is what a formatted amount actually needs; below that the column drops
   rather than clipping the figure. */
.widget-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

/* Widget internals, sized against the widget. Without these a panel with fixed
   minimum columns overflows a narrow zone and is clipped by the widget's own
   overflow, which is what "cut off" and "overlapping" looked like. */
@container (max-width: 560px) {
  .widget .hero-grid,
  .widget .auto-layout,
  .widget .control-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 380px) {
  .widget .mini-metrics,
  .widget .widget-metrics,
  .widget .vertical-waterfall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .widget .scenario-bars div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .widget .scenario-bars div i {
    grid-column: 1 / -1;
  }

  .widget .target-row-head,
  .widget .bill-list div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 260px) {
  .widget .mini-metrics,
  .widget .widget-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

.widget-note {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ghost-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.ghost-button:hover:not(:disabled) {
  border-color: var(--border);
  background: color-mix(in srgb, var(--accent), transparent 90%);
  color: var(--text);
}

/* Shown when a plan exists but every widget has been removed. Centred in the
   workspace rather than pinned to the top, so it reads as a state and not as a
   dashboard that failed to load. */
.dashboard-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  min-height: 52vh;
  padding: 24px;
  text-align: center;
}

.dashboard-empty p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.5;
}

.dashboard-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---- First-plan onboarding ---- */

.first-plan {
  display: grid;
  place-items: center;
  padding: 24px 0;
}

.first-plan-box {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(620px, 100%);
  padding: 40px 28px;
  border: 2px dashed color-mix(in srgb, var(--accent), var(--border) 30%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent), transparent 94%);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.first-plan-box:hover,
.first-plan-box:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 88%);
  outline: none;
}

.first-plan-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
}

.first-plan-mark .icon {
  width: 28px;
  height: 28px;
}

.first-plan-box h2 {
  max-width: 34ch;
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.3;
  text-wrap: balance;
}

.first-plan-box p {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.first-plan-box small {
  color: var(--muted);
  font-size: 0.76rem;
}

.first-plan-actions {
  margin-top: 4px;
}

/* ---- Modal ---- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 6, 16, 0.62);
  overflow-y: auto;
}

.modal-panel {
  width: min(640px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--hover-shadow);
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.widget-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.widget-choice {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.widget-choice:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 92%);
  transform: translateY(-1px);
}

.widget-choice-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent), transparent 84%);
  color: var(--accent);
}

.widget-choice strong {
  font-size: 0.9rem;
}

.widget-choice small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.widget-form {
  display: grid;
  gap: 12px;
}

.cover-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.cover-picker legend {
  padding: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.cover-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.cover-option {
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.cover-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cover-swatch {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 40px;
  border: 2px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 0;
}

.cover-swatch em {
  font-style: normal;
  line-height: 1;
}

.cover-option input:checked + .cover-swatch {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 70%);
}

.cover-option small {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.widget-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-grid,
.plan-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.plan-grid {
  gap: 10px;
  align-items: stretch;
}

.plan-grid .card {
  padding: 12px;
}

.plan-grid .card-heading {
  margin-bottom: 10px;
}

.stack {
  display: grid;
  gap: 12px;
}

.banks-grid {
  display: grid;
  gap: 12px;
}

.banks-connect-stage {
  min-height: calc(100vh - 220px);
  display: grid;
  place-items: center;
  padding: 24px 12px;
}

.connect-hero {
  width: min(460px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 44px 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.connect-hero-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.connect-hero-icon svg {
  width: 34px;
  height: 34px;
}

.connect-hero h2 {
  margin: 0;
  font-size: 1.5rem;
}

.connect-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.connect-hero-button {
  min-height: 44px;
  padding: 0 26px;
  font-size: 1rem;
}

.connect-hero .inline-status {
  justify-content: center;
  text-align: left;
}

/* Bank account tiles */
.account-tile-stage {
  display: grid;
  gap: 10px;
}

.account-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.account-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}

.account-tile.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}

.account-tile-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.account-tile-main:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.account-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--accent);
  overflow: hidden;
}

.account-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.account-tile-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-tile-text strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.account-mask {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.account-tile-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--border), transparent 40%);
  background: var(--surface-soft);
}

.account-tile-actions .secondary-button {
  flex: 1;
}

.add-account-tile {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 108px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.add-account-tile:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.account-add-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

/* Paged statement box */
.paged-card {
  padding: 10px 12px;
}

.paged-card .outgoing-list {
  gap: 5px;
}

.paged-card .outgoing-row {
  padding: 6px 8px;
}

.paged-card .outgoing-row strong {
  font-size: 0.82rem;
}

.paged-card .pager {
  margin-top: 8px;
}

.paged-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.month-nav,
.paged-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.month-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.month-pick:hover {
  border-color: var(--accent);
}

.month-pick .icon {
  color: var(--accent);
}

.month-pick input[type="month"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-soft);
  font-size: 0.78rem;
  cursor: pointer;
}

.chip-toggle input {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
}

.synced-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

/* Stat tiles */
.stat-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.stat-tile {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.stat-tile span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-tile strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

.stat-tile small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Insight panels */
.insight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.insight-col {
  display: grid;
  gap: 10px;
  align-content: start;
}

@media (max-width: 720px) {
  .insight-row {
    grid-template-columns: 1fr;
  }
}

.insight-panel {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Spending by category */
.category-list {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.category-row-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.category-row-head strong {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.category-row-head em {
  color: var(--text);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.category-bar {
  height: 7px;
  border-radius: 9999px;
  background: var(--surface-soft);
  overflow: hidden;
}

.category-bar span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent), transparent 35%));
}

.subscriptions-headline {
  margin: 8px 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.subscriptions-headline .money-figure,
.subscriptions-headline strong {
  color: var(--text);
  font-weight: 900;
}

.subscription-list {
  display: grid;
  gap: 4px;
}

.subscription-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.subscription-row:last-child {
  border-bottom: 0;
}

.merchant-badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  overflow: hidden;
  background: transparent;
}

.merchant-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.subscription-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.subscription-text strong {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.subscription-text small {
  color: var(--muted);
  font-size: 0.74rem;
}


/* Statement chat */
.chat-bubble {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  transition: transform 160ms ease;
}

.chat-bubble:hover {
  transform: translateY(-2px);
}

.chat-bubble .icon {
  width: 24px;
  height: 24px;
}

.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 90px));
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.chat-panel-head strong {
  display: block;
  font-size: 0.9rem;
}

.chat-panel-head small {
  color: var(--muted);
  font-size: 0.72rem;
}

.chat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}

.chat-message {
  max-width: 88%;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chat-message.from-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.chat-message.from-ai {
  align-self: flex-start;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

.chat-message.is-busy {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.chat-empty {
  display: grid;
  gap: 6px;
}

.chat-empty p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.chat-prompt {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.chat-prompt:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chat-error {
  margin: 0 12px 8px;
  font-size: 0.72rem;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--background);
  color: var(--text);
  font-size: 0.82rem;
}

.chat-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.card {
  --card-accent: var(--sky);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface), var(--card-accent) 4%), var(--surface));
  box-shadow: var(--shadow);
  padding: 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--card-accent), color-mix(in srgb, var(--accent), transparent 20%));
  content: "";
}

.card > * {
  position: relative;
}

.card:hover {
  border-color: color-mix(in srgb, var(--card-accent), var(--border) 38%);
  box-shadow: var(--hover-shadow);
  transform: translateY(-2px);
}

.accent-purple {
  --card-accent: var(--accent);
}

.accent-blue {
  --card-accent: var(--blue);
}

.accent-green {
  --card-accent: var(--good);
}

.accent-amber {
  --card-accent: var(--warn);
}

.accent-sky {
  --card-accent: var(--sky);
}

.accent-rose {
  --card-accent: var(--bad);
}

.accent-teal {
  --card-accent: color-mix(in srgb, var(--good), var(--blue) 40%);
}

.hero-card {
  grid-column: 1 / -1;
  --card-accent: var(--accent);
}

.fixed-card {
  grid-column: span 6;
  --card-accent: var(--blue);
}

.target-card {
  grid-column: span 6;
  --card-accent: var(--warn);
}

.wide {
  grid-column: 1 / -1;
}

.control-card {
  grid-column: span 4;
  --card-accent: var(--accent);
}

.additional-income-card {
  grid-column: span 4;
  --card-accent: var(--good);
}

.keep-spends-card {
  grid-column: span 4;
  --card-accent: var(--warn);
}

.bills-card {
  --card-accent: var(--blue);
}

.pots-card {
  --card-accent: var(--accent);
}

.plan-grid > .card:not(.wide):not(.control-card):not(.additional-income-card):not(.keep-spends-card):not(.cards-editor-card):not(.cards-plan-card),
.settings-grid > .card {
  grid-column: span 6;
}

.bank-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bank-summary-grid .money-card strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.card-heading {
  margin-bottom: 12px;
}

.card-heading h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
}

.card-heading p,
.privacy-note p,
.horizon-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.row-heading {
  justify-content: space-between;
  align-items: flex-start;
}

.row-heading > strong {
  font-size: 1.12rem;
}

.card-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.card-stat-strip span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--card-accent), var(--border) 54%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-accent), var(--surface) 88%);
  color: color-mix(in srgb, var(--text), var(--muted) 44%);
  font-size: 0.76rem;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.card-stat-strip strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1;
}

.hero-grid {
  display: grid;
  /* No fixed minimums: the container query decides when this becomes one
     column, so the tracks must be free to shrink until it does. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 12px;
  align-items: stretch;
}

.hero-metric {
  /* A widget can now be any width, so the headline number is sized against its
     own box rather than the viewport - vw units overflowed a narrow zone. */
  container-type: inline-size;
  display: grid;
  align-content: center;
  min-height: 152px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 42%);
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 82%), var(--background));
}

.hero-metric span {
  color: var(--muted);
  font-weight: 850;
}

.hero-metric strong {
  margin-top: 4px;
  font-size: clamp(1.7rem, 13cqi, 4.7rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.mini-metrics,
.control-grid,
.auto-layout {
  display: grid;
  gap: 8px;
}

.auto-rate {
  padding: 3px 9px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.auto-pot-row {
  display: grid;
  gap: 4px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%);
}

.auto-pot-row:last-child {
  border-bottom: 0;
}

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

.auto-pot-head strong {
  white-space: nowrap;
}

.auto-share-bar {
  height: 5px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--border), transparent 30%);
  overflow: hidden;
}

.auto-share-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.auto-pot-row small {
  color: var(--muted);
  font-size: 0.72rem;
}

.wealth-homes {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.wealth-home-row {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: 2px 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 30%);
  border-radius: 8px;
  background: var(--surface-soft);
}

.wealth-home-row span {
  font-size: 0.76rem;
  font-weight: 800;
}

.wealth-home-row strong {
  font-size: 0.78rem;
  white-space: nowrap;
}

.wealth-home-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.wealth-homes-disclaimer {
  color: var(--muted);
  font-size: 0.68rem;
}

.auto-note {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.mini-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.plan-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Payslip import: the button sits bottom-right of the Month plan card, with the
   scan status growing to its left. */
.payslip-import {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.payslip-status {
  margin: 0;
  margin-right: auto;
  font-size: 0.85rem;
  color: var(--muted, #8b8b9a);
  min-height: 1.1em;
}

.payslip-status[data-tone="error"] { color: var(--danger, #e05a6a); }
.payslip-status[data-tone="success"] { color: var(--success, #3aa675); }
.payslip-status[data-tone="busy"] { color: var(--accent-pressed, #a986ef); }

/* The Month plan card is itself the drop zone. The hint is hidden until a file
   is dragged over the card, then covers it with a dashed target. */
.payslip-card {
  position: relative;
}

.payslip-drop-hint {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed var(--accent, #c7a6ff);
  border-radius: inherit;
  background: color-mix(in srgb, var(--background, #14141c) 82%, var(--accent, #c7a6ff));
  color: var(--accent, #c7a6ff);
  font-weight: 600;
  pointer-events: none;
}

.payslip-drop-hint .icon {
  width: 28px;
  height: 28px;
}

.payslip-card.is-payslip-over .payslip-drop-hint {
  display: flex;
}

.payslip-card.is-payslip-loading .payslip-import-button {
  opacity: 0.6;
  cursor: progress;
}

.additional-income-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.keep-spends-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Three inputs share the top row (2 columns each) and the two summary boxes
   split the row below (3 columns each) so nothing is left stranded in a half-
   empty cell. */
.keep-spends-grid > .field {
  grid-column: span 2;
}

.keep-spends-grid > .money-card {
  grid-column: span 3;
}

.control-card .money-card,
.additional-income-card .money-card,
.keep-spends-card .money-card {
  min-height: 62px;
  padding: 9px;
}

.control-card .money-card strong,
.additional-income-card .money-card strong,
.keep-spends-card .money-card strong {
  font-size: 1.08rem;
}

.money-card {
  /* Sized against its own box, not the viewport: these cards sit in dashboard
     zones that can be a sidebar's width while the viewport stays wide. */
  container-type: inline-size;
  min-height: 70px;
  padding: 10px 12px;
}

.money-card:hover,
.horizon-card:hover,
.auto-panel:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)), var(--border) 40%);
  background: color-mix(in srgb, var(--surface), var(--card-accent, var(--accent)) 5%);
  box-shadow: 0 10px 22px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.money-card strong {
  display: block;
  margin-top: 5px;
  /* cqi, not vw - see the note on .money-card. A long figure in a narrow card
     still has to break rather than run past the border. */
  font-size: clamp(0.94rem, 13cqi, 1.55rem);
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.money-card.positive strong {
  color: var(--good);
}

.money-card.negative strong {
  color: var(--bad);
}

.primary-button,
.secondary-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid transparent;
  font-weight: 850;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.primary-button {
  padding: 0 15px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
}

.primary-button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.secondary-button {
  padding: 0 12px;
  border-color: color-mix(in srgb, var(--accent), var(--border) 54%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent), transparent 91%);
  color: var(--text);
}

.secondary-button:hover {
  border-color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent), transparent 82%);
  transform: translateY(-1px);
}

.secondary-button.small,
.primary-button.small {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.86rem;
}

.secondary-button.danger:hover {
  border-color: var(--bad);
  color: var(--bad);
}

.icon-button {
  width: 34px;
  height: 34px;
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent), transparent 93%);
  color: var(--text);
}

.icon-button.subtle {
  background: transparent;
  color: var(--muted);
}

.button-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.alert-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.alert {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 750;
}

.alert.error {
  border-color: color-mix(in srgb, var(--bad), var(--border) 35%);
  color: var(--bad);
}

.alert.warning {
  border-color: color-mix(in srgb, var(--warn), var(--border) 35%);
  color: var(--warn);
}

.flow-strip {
  display: flex;
  gap: 4px;
  min-height: 58px;
  margin-top: 10px;
}

.flow-strip div {
  display: grid;
  align-content: center;
  min-width: 54px;
  padding: 8px 10px;
  overflow: hidden;
  color: var(--on-accent);
}

.flow-strip div:first-child {
  border-radius: 8px 0 0 8px;
}

.flow-strip div:last-child {
  border-radius: 0 8px 8px 0;
}

.flow-strip .fixed {
  background: color-mix(in srgb, var(--blue), white 45%);
}

.flow-strip .reserve {
  background: color-mix(in srgb, var(--good), white 52%);
}

.flow-strip .saved {
  background: var(--accent);
}

.flow-strip .buffer {
  background: color-mix(in srgb, var(--warn), white 58%);
}

.flow-strip span {
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.flow-strip strong {
  margin-top: 2px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.vertical-waterfall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-height: 172px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
}

.waterfall-column {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.waterfall-track {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 108px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-strong);
}

.waterfall-track i {
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 10px 10px 0 0;
}

.waterfall-track .fixed {
  background: color-mix(in srgb, var(--blue), transparent 14%);
}

.waterfall-track .advance {
  background: color-mix(in srgb, var(--good), transparent 10%);
}

.waterfall-track .saved {
  background: var(--accent);
}

.waterfall-track .buffer {
  background: color-mix(in srgb, var(--warn), transparent 10%);
}

.waterfall-column strong {
  font-size: 0.88rem;
  line-height: 1;
}

.waterfall-column span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bill-list,
.auto-list,
.shortlist,
.editor-list,
.history-list,
.pot-editor {
  display: grid;
  gap: 8px;
}

.bill-list div {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(70px, 0.7fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.bill-list div:hover {
  border-color: color-mix(in srgb, var(--blue), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--blue) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.bill-list span {
  font-weight: 850;
}

.bill-list strong {
  text-align: right;
}

.compound-chart,
.compound-chart svg {
  width: 100%;
  margin: 0;
}

.compound-chart svg {
  display: block;
  min-height: 190px;
}

.axis {
  stroke: var(--border);
}

.bill-bar {
  fill: color-mix(in srgb, var(--blue), transparent 20%);
}

.saved-bar {
  fill: var(--accent);
}

.compound-line {
  fill: none;
  stroke: var(--warn);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.compound-chart text {
  fill: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.compound-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.savings-timeline-panel .compound-chart svg {
  min-height: 150px;
}

.savings-timeline-panel .compound-chart figcaption {
  gap: 8px;
  font-size: 0.78rem;
}

.compound-chart figcaption span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend {
  width: 18px;
  height: 8px;
  border-radius: 9999px;
}

.legend.fixed {
  background: var(--blue);
}

.legend.saved {
  background: var(--accent);
}

.legend.line {
  background: var(--warn);
}

.horizon-grid {
  display: grid;
  gap: 8px;
}

.horizon-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.horizon-card strong {
  display: block;
  margin-top: 2px;
  font-size: 1.2rem;
}

.target-list {
  display: grid;
  gap: 8px;
}

.target-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.target-row:hover {
  border-color: color-mix(in srgb, var(--warn), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--warn) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.target-row-head {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.target-row-head strong,
.target-row-head span,
.target-row p {
  display: block;
}

.target-row-head span,
.target-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.target-eta {
  flex: 0 0 auto;
  text-align: right;
}

.target-eta strong {
  font-size: 1rem;
}

.target-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--surface-strong);
}

.target-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.mini-bars {
  display: grid;
  gap: 4px;
}

.mini-bars i {
  display: block;
  height: 8px;
  border-radius: 9999px;
}

.mini-bars .income {
  background: var(--accent);
}

.mini-bars .bills {
  background: var(--blue);
}

.mini-bars .saved {
  background: var(--warn);
}

.auto-layout {
  grid-template-columns: 1fr 1.15fr 0.9fr;
}

.auto-panel {
  padding: 12px;
}

.auto-panel h3,
.bank-product-card h3,
.snapshot-card h3,
.privacy-note h3 {
  margin: 0;
  font-size: 0.96rem;
}

.auto-total {
  margin: 8px 0 10px;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

.auto-list div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.auto-list div:last-child {
  border-bottom: 0;
}

.auto-list p {
  margin: 0;
  color: var(--muted);
}

.scenario-bars {
  display: grid;
  gap: 8px;
}

.scenario-bars div {
  display: grid;
  grid-template-columns: 76px 90px minmax(80px, 1fr);
  gap: 8px;
  align-items: center;
}

.scenario-bars strong {
  font-size: 0.86rem;
}

.scenario-bars i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--surface-strong);
}

.scenario-bars b,
.progress-wrap span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.shortlist label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.shortlist label:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--accent) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.shortlist input,
.check-field input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.shortlist strong,
.shortlist small {
  display: block;
}

.shortlist small {
  color: var(--muted);
}

.panel-title-line {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.panel-title-line time,
.muted-copy {
  color: var(--muted);
  font-size: 0.82rem;
}

.muted-copy {
  margin: 8px 0 10px;
}

.scan-panel-button {
  width: 100%;
  margin-top: 4px;
}

.scan-state {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding-top: 12px;
}

.scan-state p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
}

.loader {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--accent), transparent 68%);
  border-top-color: var(--accent);
  border-radius: 9999px;
  animation: spin 850ms linear infinite;
}

/* Lives inside the Pot ideas widget now, so it is a panel rather than a
   free-floating speech bubble. */
.ai-bubble {
  --bubble-accent: var(--accent);
  position: relative;
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--bubble-accent), var(--border) 44%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bubble-accent), transparent 93%);
}

.ai-bubble-head,
.ai-loading-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
}

.ai-bubble-head strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.12;
}

.ai-bubble-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--bubble-accent), white 8%);
  border-radius: 14px;
  background: var(--bubble-accent);
  color: var(--on-accent);
}

.ai-bubble-mark .icon {
  width: 18px;
  height: 18px;
}

.ai-bubble p,
.ai-bubble small {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.32;
}

.ai-rule-line {
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--bubble-accent), var(--border) 46%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bubble-accent), transparent 90%);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 840;
}

.ai-bubble-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ai-bubble-metrics span {
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 830;
  text-align: center;
}

.ai-bubble-metrics strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1;
}

.ai-bubble-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.ai-bubble-actions button,
.ai-bubble.is-empty button {
  width: 100%;
}

.ai-bubble.is-empty {
  --bubble-accent: var(--blue);
}

.ai-bubble.is-loading {
  --bubble-accent: var(--good);
}

.ai-loading-line .loader {
  width: 24px;
  height: 24px;
  border-width: 3px;
  justify-self: center;
}

.ai-settings-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.5fr);
}

.ai-key-field {
  grid-column: span 1;
}

.compact-note {
  margin-bottom: 0;
}

.truelayer-setup-grid,
.statement-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
}

.truelayer-setup-grid .redirect-field {
  grid-column: span 2;
}

.statement-controls {
  grid-template-columns: minmax(170px, 0.9fr) minmax(170px, 1fr) minmax(120px, 0.5fr) minmax(120px, 0.5fr);
  margin-bottom: 10px;
}

.inline-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--blue), var(--border) 46%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue), transparent 90%);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 760;
}

.truelayer-open-status {
  grid-template-columns: auto 1fr auto;
}

.inline-status.error {
  border-color: color-mix(in srgb, var(--bad), var(--border) 38%);
  background: color-mix(in srgb, var(--bad), transparent 91%);
  color: var(--bad);
}

.inline-status.success {
  border-color: color-mix(in srgb, var(--good), var(--border) 42%);
  background: color-mix(in srgb, var(--good), transparent 90%);
  color: var(--good);
}

.inline-status.warning {
  border-color: color-mix(in srgb, var(--warn), var(--border) 42%);
  background: color-mix(in srgb, var(--warn), transparent 90%);
  color: var(--warn);
}

.bank-connection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.bank-connection-tile,
.statement-panel,
.empty-bank-state,
.saving-list article {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
}

.bank-connection-tile {
  display: grid;
  gap: 9px;
  padding: 10px;
  border-left: 3px solid var(--accent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.bank-connection-tile:hover,
.bank-connection-tile.is-selected {
  border-color: color-mix(in srgb, var(--accent), var(--border) 34%);
  background: color-mix(in srgb, var(--surface), var(--accent) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.bank-connection-tile h3 {
  margin: 6px 0 2px;
  font-size: 0.98rem;
}

.bank-connection-tile p,
.connection-meta,
.statement-sync-meta span,
.outgoing-row small,
.repeat-list span,
.saving-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.status-pill {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--good), var(--border) 48%);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--good), transparent 88%);
  color: var(--good);
  font-size: 0.7rem;
  font-weight: 900;
}

.status-pill.warning {
  border-color: color-mix(in srgb, var(--warn), var(--border) 40%);
  background: color-mix(in srgb, var(--warn), transparent 88%);
  color: var(--warn);
}

.status-pill.expired {
  border-color: color-mix(in srgb, var(--bad), var(--border) 38%);
  background: color-mix(in srgb, var(--bad), transparent 90%);
  color: var(--bad);
}

.connection-meta,
.connection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.connection-actions {
  justify-content: flex-start;
}

.statement-sync-meta {
  display: grid;
  gap: 4px;
  min-height: 36px;
  align-content: center;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
}

.statement-sync-meta strong {
  font-size: 0.86rem;
}

.statement-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.statement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 10px;
}

.statement-panel {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
}

.statement-panel .panel-title-line span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.outgoing-list,
.repeat-list,
.saving-list {
  display: grid;
  gap: 7px;
}

.outgoing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: var(--surface);
}

.outgoing-row .eye-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.outgoing-row .eye-button .icon {
  width: 17px;
  height: 17px;
}

.outgoing-row .eye-button:hover {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

.outgoing-row .eye-button.is-ignored {
  color: var(--bad);
}

.outgoing-row .eye-button.is-ignored:hover {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}

.outgoing-row.is-ignored {
  border-left-color: var(--bad);
  opacity: 0.6;
}

.outgoing-row.is-ignored strong,
.outgoing-row.is-ignored em {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bad), transparent 40%);
}

.outgoing-row.is-repeated {
  border-left-color: var(--warn);
}

.outgoing-row strong,
.repeat-list strong,
.saving-list strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.outgoing-row em {
  color: var(--text);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.outgoing-row b {
  padding: 3px 6px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--warn), transparent 88%);
  color: var(--warn);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.repeat-list div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.repeat-list div:last-child {
  border-bottom: 0;
}

.price-rise-panel .panel-title-line span {
  color: var(--warn);
  font-size: 0.8rem;
  font-weight: 900;
}

.price-rise-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.price-rise-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  background: var(--surface);
}

.price-rise-item strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.price-rise-item small {
  color: var(--warn);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.price-rise-item span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.saving-list article {
  padding: 8px;
  border-left: 3px solid var(--good);
}

.saving-list span {
  display: inline-flex;
  margin-top: 5px;
  color: var(--good);
  font-size: 0.76rem;
  font-weight: 900;
}

.empty-bank-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  color: var(--muted);
}

.empty-bank-state p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 760;
}

.statement-loading {
  padding: 10px 0;
}

.bank-products {
  display: grid;
  gap: 8px;
  max-height: 360px;
  margin-top: 9px;
  overflow: auto;
  padding-right: 2px;
}

.bank-product-card .bank-products {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.bank-product {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.bank-product:hover {
  border-color: color-mix(in srgb, var(--blue), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--blue) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.bank-product input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.bank-product strong,
.bank-product em,
.bank-product small,
.bank-product a {
  display: block;
}

.bank-product em {
  margin: 3px 0;
  color: var(--text);
  font-size: 1.08rem;
  font-style: normal;
  font-weight: 950;
}

.bank-product small {
  color: var(--muted);
  line-height: 1.25;
}

.bank-product a {
  width: fit-content;
  margin-top: 6px;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 850;
}

.scan-errors {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.82rem;
}

.scan-errors summary {
  cursor: pointer;
  font-weight: 850;
}

.scan-errors p {
  margin: 6px 0 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.field input,
.field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 0 10px;
  transition: border-color 160ms ease, background 160ms ease;
}

.field input:hover,
.field select:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 42%);
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
}

.field.compact input,
.field.compact select {
  min-height: 32px;
}

.editor-row {
  display: grid;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  border-left: 3px solid var(--blue);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.editor-row:hover {
  border-color: color-mix(in srgb, var(--blue), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--blue) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.compact-row {
  grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.55fr) auto auto;
}

.bill-row {
  grid-template-columns: minmax(140px, 1fr) minmax(110px, 0.7fr) minmax(96px, 0.45fr) auto auto;
}

/* The additional-income card is narrower than the bills card, so its rows wrap
   the Active toggle and delete button onto a second line rather than letting
   the trash button spill outside the card. */
.additional-income-card .bill-row {
  grid-template-columns: minmax(120px, 1fr) minmax(90px, 0.7fr) minmax(80px, 0.5fr);
}

.additional-income-card .bill-row .check-field {
  grid-column: 1 / -2;
}

.additional-income-card .bill-row [data-action="remove-income"] {
  justify-self: end;
}

.check-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  white-space: nowrap;
}

.subhead {
  margin: 12px 0 8px;
}

.pot-row {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--background);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.pot-row:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--accent) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.pot-row-main {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) repeat(4, minmax(76px, 0.55fr)) auto;
  align-items: end;
}

.pot-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.progress-wrap {
  height: 7px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--surface-strong);
}

.snapshot-card {
  display: grid;
  grid-template-columns: minmax(116px, 0.55fr) minmax(260px, 1.5fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--sky);
  border-radius: 8px;
  background: var(--background);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.snapshot-card:hover {
  border-color: color-mix(in srgb, var(--sky), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--sky) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.snapshot-card p {
  margin: 3px 0 0;
  color: var(--muted);
}

.snapshot-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.snapshot-values span {
  padding: 7px;
  border-radius: 8px;
  background: var(--surface);
}

.snapshot-values strong {
  display: block;
  color: var(--text);
}

.snapshot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface);
}

.segmented-control label {
  position: relative;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
}

.segmented-control span {
  display: grid;
  min-height: 32px;
  place-items: center;
  border-radius: 9999px;
  color: var(--muted);
  font-weight: 850;
}

.segmented-control input:checked + span {
  background: var(--accent);
  color: var(--on-accent);
}

.switch-field {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.switch-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface);
  transition: background 140ms ease, border-color 140ms ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 140ms ease, background 140ms ease;
}

.switch-field input:checked + .switch-track {
  border-color: var(--accent);
  background: var(--accent);
}

.switch-field input:checked + .switch-track::after {
  background: var(--on-accent);
  transform: translateX(18px);
}

.switch-field input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch-label {
  font-weight: 850;
}

/* Row variant: label on the left, toggle pinned right. The input is visually
   hidden but stays adjacent to the track so the :checked + .switch-track rules
   keep working. */
.switch-field.spread {
  justify-content: space-between;
  gap: 14px;
}

.switch-field.spread .switch-track {
  order: 2;
}

.pref-copy {
  display: grid;
  gap: 2px;
}

.pref-copy small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.pref-list {
  display: grid;
  gap: 12px;
}

.pref-list .switch-field + .switch-field {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Accent picker: a swatch per preset. The radio itself is hidden; the dot and
   name carry the selected state. */
.accent-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.accent-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.accent-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.accent-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch), transparent 62%);
}

.accent-name {
  font-weight: 820;
  font-size: 0.82rem;
}

.accent-swatch:hover {
  border-color: color-mix(in srgb, var(--swatch), var(--border) 40%);
  background: color-mix(in srgb, var(--surface), var(--swatch) 6%);
}

.accent-swatch:has(input:checked) {
  border-color: var(--swatch);
  background: color-mix(in srgb, var(--surface), var(--swatch) 12%);
}

.accent-swatch:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The wrapper is only a hook for the privacy blur; it must stay invisible to
   layout. Many `.container span` rules across the sheet style a span as either
   the small muted label beside a value or a bordered stat chip (padding, border,
   background), and a bare `.money-figure` (0,1,0) loses to those one-class-plus-
   element selectors (0,1,1) - so the figure would inherit label typography or
   get boxed in its own outline. The doubled class (0,2,0) keeps it ahead of them
   and resets it back to plain inline text that reads as its parent. */
.money-figure.money-figure {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Privacy mode. Money is blurred rather than replaced so every row keeps its
   width and the page does not reflow when the setting is turned on, and each
   figure clears on its own while it is pointed at or being edited. */
html[data-privacy="on"] .money-figure,
html[data-privacy="on"] input[data-money] {
  filter: blur(5px);
  transition: filter 120ms ease;
}

html[data-privacy="on"] .money-figure:hover,
html[data-privacy="on"] input[data-money]:hover,
html[data-privacy="on"] input[data-money]:focus {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-privacy="on"] .money-figure,
  html[data-privacy="on"] input[data-money] {
    transition: none;
  }
}

.privacy-note {
  margin: 12px 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.auth-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 18px;
  width: min(960px, 100%);
  padding: 16px;
  border-radius: 12px;
}

.auth-brand,
.auth-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), black 10%);
}

.auth-brand {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 420px;
  padding: 26px;
}

.auth-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.auth-brand h1 {
  max-width: 420px;
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.auth-brand p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.auth-note,
.auth-error {
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 800;
}

.auth-note {
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 40%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.auth-error {
  margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--bad), var(--border) 35%);
  color: var(--bad);
}

.auth-panel {
  padding: 16px;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}

.auth-mode-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 880;
}

.auth-mode-tabs button:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--text);
}

.auth-mode-tabs .is-active {
  background: var(--accent);
  color: var(--on-accent);
}

.auth-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.remember-field {
  width: fit-content;
  color: var(--muted);
  font-size: 0.88rem;
}

.auth-remember-loading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 44%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent), transparent 91%);
}

.auth-remember-loading strong,
.auth-remember-loading p {
  display: block;
  margin: 0;
}

.auth-remember-loading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.86rem;
}

.auth-form .primary-button {
  width: 100%;
  margin-top: 4px;
}

.empty-state {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), transparent 32%);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
  font-weight: 780;
}

.noscript {
  width: min(720px, calc(100% - 32px));
  margin: 48px auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Below this the three dashboard zones stop being side by side: the bars fold
   under the main section rather than squeezing every column. */
@media (max-width: 1140px) {
  /* Too narrow for three columns: every zone takes the full width and they
     stack, so the grow weights stop applying. */
  .widget-zone,
  .zone-left,
  .zone-right,
  .zone-main {
    flex: 1 1 100%;
    min-width: 0;
  }

  .hero-card,
  .fixed-card,
  .target-card,
  .control-card,
  .additional-income-card,
  .keep-spends-card,
  .plan-grid > .card:not(.wide):not(.control-card):not(.additional-income-card):not(.keep-spends-card),
  .settings-grid > .card {
    grid-column: 1 / -1;
  }

  .auto-layout {
    grid-template-columns: 1fr;
  }

  .truelayer-setup-grid,
  .statement-controls,
  .statement-layout {
    grid-template-columns: 1fr 1fr;
  }

  .ai-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 18px, 1360px);
    padding-top: 8px;
  }

  .auth-shell {
    padding: 10px;
  }

  .auth-card {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .auth-brand {
    min-height: auto;
    padding: 18px;
  }

  .auth-brand h1 {
    font-size: 2.1rem;
  }

  .app-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 8px;
  }

  .app-brand img {
    height: 28px;
  }

  /* The section tabs move to the bottom bar on mobile, freeing the header row
     for the month switcher. */
  .app-nav {
    display: none;
  }

  .month-switcher {
    justify-self: stretch;
    justify-content: center;
  }

  .month-field {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* A thumb-reachable tab bar pinned to the bottom. All five sections share the
     row evenly; content above clears it via the shell's padding. */
  .bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in srgb, var(--border), white 4%);
    background: color-mix(in srgb, var(--surface), transparent 4%);
    backdrop-filter: blur(10px);
  }

  .bottom-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 820;
  }

  .bottom-nav-tab .icon {
    width: 22px;
    height: 22px;
  }

  .bottom-nav-tab.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent), transparent 88%);
  }

  .bottom-nav-tab:disabled {
    opacity: 0.4;
  }

  /* A grouped bottom-bar entry (Planning). It occupies one column of the bar and
     anchors its drop-up panel; the toggle fills the column like any other tab. */
  .bottom-nav-group {
    position: relative;
    display: flex;
  }

  .bottom-nav-group-toggle {
    width: 100%;
  }

  .bottom-nav-group.is-open > .bottom-nav-group-toggle {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent), transparent 88%);
  }

  /* Lifts above the fixed bar so the choices clear the footer and the home
     indicator, and centres on the toggle it belongs to. */
  .bottom-nav-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: grid;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 -14px 42px rgba(0, 0, 0, 0.45);
  }

  .bottom-nav-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 760;
    text-align: left;
    cursor: pointer;
  }

  .bottom-nav-dropdown button.is-active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .bottom-nav-dropdown button:disabled {
    opacity: 0.4;
  }

  .bottom-nav-dropdown .icon {
    width: 20px;
    height: 20px;
    color: var(--muted);
  }

  /* Leave room at the foot of the scroll for the fixed bar, including any home
     indicator inset, so the last card is never trapped behind it. */
  .app-shell {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .scan-button {
    width: 100%;
  }

  .widget-metrics,
  .hero-grid,
  .mini-metrics,
  .control-grid,
  .plan-summary-grid,
  .keep-spends-grid,
  .bank-summary-grid,
  .statement-summary-grid,
  .truelayer-setup-grid,
  .statement-controls,
  .statement-layout,
  .card-stat-strip,
  .snapshot-values {
    grid-template-columns: 1fr;
  }

  .truelayer-setup-grid .redirect-field {
    grid-column: auto;
  }

  .vertical-waterfall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-metric {
    min-height: 118px;
  }

  .hero-metric strong {
    font-size: clamp(2rem, 15cqi, 3.4rem);
  }

  .flow-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: auto;
  }

  .flow-strip div,
  .flow-strip div:first-child,
  .flow-strip div:last-child {
    min-height: 54px;
    border-radius: 8px;
  }

  .bill-list div,
  .compact-row,
  .bill-row,
  .pot-row-main,
  .snapshot-card {
    grid-template-columns: 1fr;
  }

  .bill-list strong {
    text-align: left;
  }

  .target-row-head {
    display: grid;
  }

  .target-eta {
    text-align: left;
  }

  .snapshot-actions {
    justify-content: flex-start;
  }

  .scenario-bars div {
    grid-template-columns: 1fr;
  }

  .ai-bubble-metrics {
    grid-template-columns: 1fr;
  }

  .truelayer-open-status {
    grid-template-columns: auto 1fr;
  }

  .truelayer-open-status .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-backdrop {
    padding: 8px;
    align-items: end;
  }

  .modal-panel {
    max-height: calc(100vh - 16px);
    padding: 14px;
  }

  .widget-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .cover-options {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  .widget-form-actions button,
  .account-form button,
  .first-plan-actions .primary-button {
    width: 100%;
    justify-content: center;
  }

  .first-plan-box {
    padding: 28px 16px;
  }

  .dashboard-toolbar .button-pair {
    width: 100%;
  }

  .dashboard-toolbar .button-pair button {
    flex: 1;
    justify-content: center;
  }

  .account-identity {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Very narrow phones: keep the header row intact by trimming its padding
   further rather than letting anything wrap under it. */
@media (max-width: 380px) {
  .app-shell {
    width: min(100% - 12px, 1360px);
  }

  .nav-tab {
    min-width: 38px;
    padding: 0 4px;
  }

  .app-brand img {
    height: 24px;
  }
}

/* Shown while a bank statement sync is in flight. Sits above the workspace but
   below nothing else - there is no dialog it can collide with, because the
   widget modal only exists on the dashboard and syncing happens on Banks. */
.sync-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 6, 16, 0.62);
}

.sync-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(360px, 100%);
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--hover-shadow);
  text-align: center;
}

.sync-panel strong {
  font-size: 1rem;
  color: var(--text);
}

.sync-panel span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.sync-spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sync-spin 0.8s linear infinite;
}

@keyframes sync-spin {
  to { transform: rotate(360deg); }
}

/* Without motion the ring would be a static circle with no sign of life, so
   pulse the opacity instead. */
@media (prefers-reduced-motion: reduce) {
  .sync-spinner {
    animation: sync-pulse 1.6s ease-in-out infinite;
  }
}

@keyframes sync-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---- Density: compact ----
   The sheet uses literal spacing rather than a token scale, so compact mode is a
   curated pass over the highest-impact surfaces - card padding, section gaps and
   list gaps - rather than a blanket multiplier. It tightens the busy planning
   and dashboard views without touching type sizes. */
:root[data-density="compact"] .card {
  padding: 10px;
}

:root[data-density="compact"] .stack,
:root[data-density="compact"] .settings-grid,
:root[data-density="compact"] .hero-grid,
:root[data-density="compact"] .banks-grid {
  gap: 8px;
}

:root[data-density="compact"] .control-grid,
:root[data-density="compact"] .auto-layout,
:root[data-density="compact"] .editor-list,
:root[data-density="compact"] .history-list,
:root[data-density="compact"] .pot-editor {
  gap: 6px;
}

:root[data-density="compact"] .money-card {
  min-height: 58px;
  padding: 8px 10px;
}

:root[data-density="compact"] .card-stat-strip span {
  padding: 6px 8px;
}

:root[data-density="compact"] .workspace {
  padding-top: 2px;
}

/* ---- Skeletons ----
   Shown in place of blank cards while a scan or statement sync is in flight, so
   the layout that is about to fill in is already sketched out. */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-strong), var(--border) 45%);
}

.skeleton::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--text), transparent 88%),
    transparent
  );
  animation: skeleton-sweep 1.3s ease-in-out infinite;
  content: "";
}

.skeleton-line {
  height: 12px;
  margin: 6px 0;
}

.skeleton-line.tall {
  height: 22px;
}

.skeleton-line.short {
  width: 45%;
}

.skeleton-line.mid {
  width: 70%;
}

.skeleton-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.skeleton-tile {
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.skeleton-rows {
  display: grid;
  gap: 8px;
}

.skeleton-row {
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

@keyframes skeleton-sweep {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: skeleton-pulse 1.6s ease-in-out infinite;
    transform: none;
  }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ---- High contrast ----
   The palette is intentionally soft, so when the viewer asks their OS for more
   contrast, firm up the borders, mute-text and focus rings that carry the most
   meaning. Colour tokens are nudged toward the page's ink/paper, not replaced,
   so the design still reads as itself. */
@media (prefers-contrast: more) {
  :root {
    --border: color-mix(in srgb, var(--text), transparent 30%);
    --muted: color-mix(in srgb, var(--text), transparent 12%);
    --focus: 0 0 0 2px var(--background), 0 0 0 4px var(--text);
  }

  .card,
  .money-card,
  .stat-tile,
  .accent-swatch,
  .switch-track,
  .card-stat-strip span {
    border-width: 2px;
  }

  .nav-tab.is-active {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  :focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
}

/* ---- Updates / announcements ---- */

.updates-page {
  display: grid;
  gap: 16px;
}

.updates-list {
  display: grid;
  gap: 12px;
}

.update-item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--accent), var(--border) 30%);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
}

.update-item-date {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}

.update-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.update-item-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.update-item-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-wrap;
}

.updates-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 4px;
}

.updates-pager-status {
  font-size: 0.85rem;
  color: var(--muted);
}

/* The compose form and posted list inside the admin panel. */
.admin-announcements {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--border), transparent 30%);
}

.announcement-compose textarea {
  resize: vertical;
  min-height: 96px;
}

/* ---- Announcement popup box ---- */

/* A card that floats in the middle of the viewport and stays there as the page
   scrolls behind it, so it follows the user until they close it with the X or
   Got it. The overlay itself ignores pointer events, leaving the rest of the
   page fully scrollable and clickable - only the card captures input. */
.announcement-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
}

.announcement-box {
  pointer-events: auto;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 40%);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--hover-shadow);
  animation: announcement-rise 220ms ease;
}

@keyframes announcement-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.announcement-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.announcement-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 86%);
}

.announcement-badge .icon {
  width: 14px;
  height: 14px;
}

.announcement-box h2 {
  margin: 0;
  font-size: 1.1rem;
}

.announcement-date {
  font-size: 0.75rem;
  color: var(--muted);
}

.announcement-body {
  margin: 2px 0 0;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 40vh;
  overflow-y: auto;
}

.announcement-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.announcement-more {
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent), var(--border) 30%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent), transparent 92%);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 140ms ease;
}

.announcement-more:hover {
  background: color-mix(in srgb, var(--accent), transparent 84%);
}

/* ---- Confirm dialog ---- */

/* Our own replacement for the browser confirm() box. An X mark centred at the
   top, the question, then Confirm and Cancel side by side. It sits above every
   other overlay so a delete prompt is never hidden behind a modal it came
   from. */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 6, 16, 0.62);
  overflow-y: auto;
}

.confirm-box {
  width: min(400px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 26px 24px 22px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 40%);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--hover-shadow);
  text-align: center;
  animation: announcement-rise 200ms ease;
}

.confirm-box.is-danger {
  border-color: color-mix(in srgb, var(--bad), transparent 55%);
}

/* The X mark itself - a round badge centred at the top. */
.confirm-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 86%);
}

.confirm-box.is-danger .confirm-mark {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad), transparent 88%);
}

.confirm-mark .icon {
  width: 26px;
  height: 26px;
}

.confirm-box h2 {
  margin: 0;
  font-size: 1.1rem;
}

.confirm-box p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  width: 100%;
}

.confirm-actions button {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

/* A destructive confirm button leans on the bad colour rather than the accent,
   so Confirm reads as the weightier choice. */
.primary-button.is-danger {
  border-color: color-mix(in srgb, var(--bad), white 8%);
  background: linear-gradient(135deg, var(--bad), color-mix(in srgb, var(--bad), white 16%));
  color: #fff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--bad), transparent 78%);
}

.primary-button.is-danger:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bad), white 8%), color-mix(in srgb, var(--bad), white 24%));
}

/* ---- Custom month picker ---- */

.month-picker {
  position: relative;
  display: inline-flex;
}

.month-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.month-picker-trigger:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 42%);
}

.month-picker-trigger .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.month-picker.is-open .month-picker-trigger {
  border-color: var(--accent);
}

.month-picker-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: 268px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 40%);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--hover-shadow);
  animation: announcement-rise 160ms ease;
}

.month-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.month-picker-head strong {
  font-size: 0.98rem;
}

.month-picker-year {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.month-picker-year:hover:not(:disabled) {
  border-color: var(--accent);
}

.month-picker-year:disabled {
  opacity: 0.4;
  cursor: default;
}

.month-picker-year .icon {
  width: 16px;
  height: 16px;
}

.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.month-picker-cell {
  padding: 9px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.month-picker-cell:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent), var(--border) 34%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.month-picker-cell:disabled {
  opacity: 0.35;
  cursor: default;
}

.month-picker-cell.is-selected {
  border-color: color-mix(in srgb, var(--accent), white 8%);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), white 18%));
  color: var(--on-accent);
}

/* ---- Rich text editor (announcement composer) ---- */

.rich-editor {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  overflow: hidden;
  transition: border-color 160ms ease;
}

.rich-editor:focus-within {
  border-color: var(--accent);
}

.rich-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 30%);
  background: color-mix(in srgb, var(--surface-strong), transparent 20%);
}

.rich-tool {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.rich-tool:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 34%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.rich-tool .icon {
  width: 17px;
  height: 17px;
}

.rich-surface {
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  color: var(--text);
  line-height: 1.55;
  outline: none;
}

.rich-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.rich-content :first-child { margin-top: 0; }
.rich-content :last-child { margin-bottom: 0; }
.rich-content p { margin: 0 0 8px; }

/* Rich announcement bodies carry their own block structure, so the pre-wrap the
   plain-text version relied on is dropped here to avoid doubled blank lines. */
.announcement-body.rich-content,
.update-item-body.rich-content {
  white-space: normal;
}

/* ---- What if? - compounded outlook -------------------------------------- */
.whatif-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.whatif-intro h1 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
}

.whatif-intro p {
  margin: 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.94rem;
}

/* The hero: a spoken sentence on the left with the big figure, the extra-saving
   lever on the right. */
.whatif-headline {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 34%);
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--accent), transparent 86%) 0, transparent 60%),
    var(--surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--accent), transparent 90%);
}

.whatif-headline-line {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
}

.whatif-headline-line strong {
  color: var(--accent);
}

.whatif-headline-figure {
  margin: 6px 0 8px;
  font-size: 2.7rem;
  font-weight: 820;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.whatif-headline-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.whatif-headline-sub em {
  display: block;
  margin-top: 6px;
  color: var(--warn);
  font-style: normal;
  font-weight: 700;
}

/* An inline dropdown sitting inside a sentence - underlined like a chosen word
   rather than a boxed form control. */
.whatif-inline-select {
  display: inline-flex;
}

.whatif-inline-select select {
  appearance: none;
  border: none;
  border-bottom: 2px dashed color-mix(in srgb, var(--accent), transparent 40%);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  padding: 0 2px;
  cursor: pointer;
}

.whatif-inline-select select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The open option list is drawn by the OS; give it explicit theme tokens so it
   doesn't fall back to a light popup on a dark page (and vice versa). */
.whatif-inline-select option {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.whatif-boost {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.whatif-boost .field span {
  font-weight: 760;
}

.whatif-boost-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.whatif-boost-prefix {
  color: var(--muted);
  font-weight: 800;
  font-size: 1.1rem;
}

.whatif-boost-input input {
  width: 100%;
  font-size: 1.15rem;
  font-weight: 700;
}

.whatif-boost-payoff {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}

.whatif-boost-payoff strong {
  color: var(--good);
}

.whatif-boost-hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Two even columns for the detail cards; the projection and goals span full
   width as their own rows above and below. */
.whatif-widgets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.whatif-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.whatif-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.whatif-stat span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.whatif-stat strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.whatif-stat small {
  color: var(--muted);
  font-size: 0.74rem;
}

.whatif-invest-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.whatif-invest-option {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.whatif-invest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.whatif-invest-head h3 {
  margin: 0;
  font-size: 1rem;
}

.whatif-invest-monthly {
  color: var(--accent);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.whatif-invest-option p {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.whatif-invest-payoff {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.whatif-invest-payoff .icon {
  color: var(--good);
}

/* Projection chart shared with the trajectory card. */
.projection-chart,
.projection-chart svg {
  width: 100%;
  margin: 0;
}

.projection-chart svg {
  display: block;
  min-height: 210px;
}

.projection-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.projection-line.baseline {
  stroke: var(--muted);
  stroke-dasharray: 6 6;
  opacity: 0.8;
}

.projection-line.scenario {
  stroke: var(--accent);
}

.projection-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 720;
}

.projection-chart figcaption span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.projection-chart .legend {
  width: 18px;
  height: 8px;
  border-radius: 9999px;
}

.projection-chart .legend.baseline {
  background: var(--muted);
}

.projection-chart .legend.scenario {
  background: var(--accent);
}

/* Goal finish lines. */
.whatif-goal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.whatif-goal {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.whatif-goal-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.whatif-goal-top h3 {
  margin: 0;
  font-size: 1rem;
}

.whatif-goal-when {
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

.whatif-goal-done {
  color: var(--good);
  font-weight: 800;
}

.whatif-goal-unknown {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.whatif-goal-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .whatif-headline {
    grid-template-columns: 1fr;
  }
  .whatif-widgets {
    grid-template-columns: 1fr;
  }
}

.whatif-momentum-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border), transparent 40%);
  color: var(--muted);
  font-size: 0.9rem;
}

.whatif-momentum-note .icon {
  color: var(--good);
  flex-shrink: 0;
}

.whatif-momentum-note strong {
  color: var(--text);
}

/* Outlook chart: past (solid) meeting future (dashed) at a "now" divider. */
.projection-line.past {
  stroke: var(--good);
}

.projection-line.projected {
  stroke: var(--muted);
  stroke-dasharray: 6 6;
  opacity: 0.9;
}

.projection-line.boosted {
  stroke: var(--accent);
}

.outlook-now {
  stroke: color-mix(in srgb, var(--border), transparent 10%);
  stroke-dasharray: 4 5;
}

.outlook-now-label {
  fill: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.projection-chart .legend.past {
  background: var(--good);
}

.projection-chart .legend.projected {
  background: var(--muted);
}

.projection-chart .legend.boosted {
  background: var(--accent);
}

.whatif-headline-note {
  margin: -4px 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

/* "In today's money" switch, styled as a compact toggle row. */
.whatif-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.whatif-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.whatif-toggle small {
  color: var(--muted);
  font-weight: 600;
}

/* ---- Joint Plans ---- */
.joint-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.joint-group-list,
.joint-member-list,
.joint-plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.joint-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 6px 14px 6px 6px;
}

.joint-group-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
}

.joint-group-open:hover {
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.joint-group-name {
  font-weight: 700;
  font-size: 1.02rem;
}

.joint-group-desc {
  color: var(--muted);
  font-size: 0.9rem;
}

.joint-group-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.joint-group-avatars {
  display: flex;
  gap: -6px;
}

.joint-group-avatars .account-avatar {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--surface-soft);
}

.joint-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.joint-member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.joint-member-name {
  font-weight: 600;
}

.joint-member-sub {
  color: var(--muted);
  font-size: 0.82rem;
}

.joint-invite-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.joint-invite-results {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.joint-invite-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.joint-invite-result:hover {
  border-color: var(--accent);
}

.joint-invite-result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.joint-invite-result-info small {
  color: var(--muted);
}

.joint-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.joint-inline-form {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.joint-defaults {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.joint-defaults legend {
  padding: 0 6px;
  color: var(--muted);
  font-weight: 600;
}

.joint-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.joint-plan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.joint-plan-item:hover {
  border-color: var(--accent);
}

.joint-plan-item.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.joint-plan-name {
  font-weight: 600;
}

.joint-plan-month {
  color: var(--muted);
  font-size: 0.85rem;
}

.joint-breakdown {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.joint-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  flex-wrap: wrap;
}

.joint-breakdown-who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.joint-breakdown-figures {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.joint-breakdown-figures small {
  color: var(--muted);
  margin-right: 4px;
}

.joint-solo-note {
  margin-top: 4px;
}

/* ---- Joint Plans: create box, invite flow, combined graph ---- */
.joint-center-wrap {
  display: flex;
  justify-content: center;
}

.joint-center-wrap .joint-create-card {
  width: 100%;
  max-width: 540px;
}

.joint-invite-cta {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.joint-invite-pill,
button.joint-invite-pill {
  border-radius: 999px;
  padding-inline: 20px;
}

.joint-invite-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.joint-invite-selected {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.joint-plan-grid {
  margin-top: 4px;
}

/* Combined proportion bar */
.joint-bar {
  margin-top: 16px;
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-strong);
  border: 1px solid var(--border);
}

.joint-bar-seg {
  height: 100%;
}

.joint-bar-bills {
  background: #6ea8fe;
}

.joint-bar-kept {
  background: #f0b95d;
}

.joint-bar-pots {
  background: var(--accent);
}

.joint-bar-spare {
  background: var(--good);
}

.joint-bar-legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

.joint-bar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.joint-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.joint-dot.joint-bar-bills { background: #6ea8fe; }
.joint-dot.joint-bar-kept { background: #f0b95d; }
.joint-dot.joint-bar-pots { background: var(--accent); }
.joint-dot.joint-bar-spare { background: var(--good); }

/* Combined joint savings summary */
.joint-pots-summary {
  margin-top: 18px;
}

.joint-pot-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.joint-pot-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
}

.joint-pot-line-name {
  font-weight: 600;
}

.joint-pot-line-amount {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 700;
}

/* ---- Toast notifications ---- */
.toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 36px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-10px) translateX(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

.toast.is-in {
  opacity: 1;
  transform: none;
}

.toast.is-out {
  opacity: 0;
  transform: translateY(-10px);
}

.toast-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.8rem;
  color: #08120d;
}

.toast-success {
  border-color: color-mix(in srgb, var(--good), transparent 45%);
}

.toast-success .toast-icon {
  background: var(--good);
}

.toast-error {
  border-color: color-mix(in srgb, #e2506b, transparent 40%);
}

.toast-error .toast-icon {
  background: #e2506b;
  color: #fff;
}

/* ---- Group invite popup (its own layout, not the announcement body) ---- */
.joint-invite-pop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 26px 26px 22px;
}

.joint-invite-pop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent), transparent 85%);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.joint-invite-pop-badge .icon {
  width: 15px;
  height: 15px;
}

.joint-invite-pop-title {
  margin: 2px 0 0;
  font-size: 1.35rem;
}

.joint-invite-pop-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 34ch;
}

.joint-invite-pop-desc {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.92rem;
  max-width: 100%;
}

.joint-invite-pop-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.joint-invite-pop-more {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Credit Cards ------------------------------------------------------------- */
.money-card.warn strong {
  color: var(--warn);
}

.card-row {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--background);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.card-row:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 38%);
  background: color-mix(in srgb, var(--surface), var(--accent) 5%);
  box-shadow: 0 8px 18px rgba(39, 68, 91, 0.08);
  transform: translateY(-1px);
}

.card-row-main {
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) repeat(4, minmax(84px, 0.7fr)) auto auto;
  gap: 8px;
  align-items: end;
}

.card-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.progress-wrap.is-high span {
  background: var(--warn);
}

.strategy-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-strong);
}

.strategy-chip {
  border: 0;
  border-radius: 9999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.strategy-chip:hover {
  color: var(--text);
}

.strategy-chip.is-active {
  color: var(--on-accent);
  background: var(--accent);
}

.cards-savings {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 4px 0 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--good), var(--border) 55%);
  background: color-mix(in srgb, var(--surface), var(--good) 10%);
}

.cards-savings p {
  margin: 0;
}

.cards-savings .icon {
  flex: none;
  color: var(--good);
}

.cards-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn), var(--border) 45%);
  background: color-mix(in srgb, var(--surface), var(--warn) 12%);
  font-size: 0.88rem;
}

.cards-warning .icon {
  flex: none;
  color: var(--warn);
}

.cards-compare {
  overflow-x: auto;
  margin: 14px 0;
}

.cards-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.cards-compare th,
.cards-compare td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.cards-compare thead th {
  color: var(--muted);
  font-weight: 600;
}

.cards-compare td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cards-compare tbody th {
  font-weight: 600;
}

.cards-compare tr.is-current {
  background: color-mix(in srgb, var(--surface), var(--accent) 8%);
}

.cards-order {
  display: grid;
  gap: 6px;
}

.cards-order-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  font-size: 0.85rem;
}

.cards-order-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.78rem;
}

.cards-order-name {
  font-weight: 600;
}

.cards-order-when,
.cards-order-interest {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .card-row-main {
    grid-template-columns: 1fr 1fr;
  }
  .cards-order-row {
    grid-template-columns: auto 1fr;
    row-gap: 2px;
  }
  .cards-order-when,
  .cards-order-interest {
    grid-column: 2;
  }
}

/* Credit Cards — budget fields & payment breakdown ------------------------- */
.cards-budget-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.cards-budget-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A select that actually follows the theme: kill the native chrome, draw our
   own chevron, and give the (OS-drawn) option list explicit theme tokens. */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 36px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  text-overflow: ellipsis;
  transition: border-color 160ms ease;
}

.select-wrap select:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 42%);
}

.select-wrap select:focus {
  border-color: var(--accent);
}

.select-wrap option {
  background: var(--surface);
  color: var(--text);
}

.pay-month {
  margin: 4px 0 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 45%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), var(--accent) 6%);
}

.pay-month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pay-month-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.pay-month-total {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.pay-month-list {
  display: grid;
  gap: 8px;
}

.pay-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--background);
}

.pay-row.is-focus {
  border-color: var(--accent);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--background), var(--accent) 7%);
}

.pay-row-name {
  display: block;
  font-weight: 600;
}

.pay-row-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
}

.pay-row-tag .icon {
  width: 14px;
  height: 14px;
}

.pay-row-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--muted);
}

.pay-row-amount {
  text-align: right;
}

.pay-row-amount strong {
  display: block;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.pay-row-amount small,
.pay-row-balance small {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}

.pay-row-balance {
  text-align: right;
  min-width: 76px;
  font-variant-numeric: tabular-nums;
}

.pay-row-balance span {
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .cards-budget-fields,
  .cards-budget-metrics {
    grid-template-columns: 1fr;
  }
  .pay-row {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }
  .pay-row-balance {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    text-align: left;
    align-items: baseline;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
  }
}

/* Credit Cards — layout: the payoff plan is the main event, so it spans the
   full width below the budget (4) and cards editor (8) on the top row. */
.cards-editor-card {
  grid-column: span 8;
}

.cards-plan-card {
  grid-column: 1 / -1;
}

/* With the plan full-width, its metric strip and per-card lists get more room. */
.cards-plan-card .cards-plan-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .cards-editor-card,
  .cards-plan-card {
    grid-column: 1 / -1;
  }
}

/* Credit Cards — over-limit emphasis --------------------------------------- */
.pay-row.is-over {
  border-color: var(--bad);
  border-left: 3px solid var(--bad);
  background: color-mix(in srgb, var(--background), var(--bad) 9%);
}

.pay-row-tag.is-over {
  color: var(--bad);
}

.pay-row-tag.is-over .icon {
  width: 14px;
  height: 14px;
}

.progress-wrap.is-over span {
  background: var(--bad);
}

.card-over-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bad);
  font-weight: 600;
}

.card-over-tag .icon {
  width: 13px;
  height: 13px;
}