@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/Sora-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("/assets/fonts/Cairo-VariableFont_slnt,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-bg-gradient: #f9fafb;
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #14803c;
  --accent-hover: #166534;
  --danger: #ef4444;
  --trash-red: #ef4444;
  --trash-icon-filter: invert(17%) sepia(92%) saturate(4325%) hue-rotate(351deg) brightness(92%) contrast(93%);
  --success: #22c55e;
  --border: #d1d5db;
  --app-content-max-width: 760px;
  --app-nav-expanded-width: 280px;
  --sidebar-logo-width: 143px;
  --sidebar-inline-pad: 25px;
  --sidebar-width: 300px;
  --app-header-top: 25px;
  --profile-control-size: 66px;
  --header-logo-height: 128px;
  --app-header-content-height: max(var(--profile-control-size), var(--header-logo-height));
  --app-header-height: calc(var(--app-header-content-height) + (var(--app-header-top) * 2));
  --font-ui: "Sora", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-amount: "Cairo", "Sora", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--page-bg-gradient);
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

html[data-paycheck-restoring-scroll="true"] body {
  visibility: hidden;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.auth-card-wrap {
  width: 100%;
  max-width: 420px;
}

.auth-card-wrap-branded {
  position: relative;
  padding-top: 4.5rem;
}

.auth-card {
  width: 100%;
  background: var(--card);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.auth-brand {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-brand h1 {
  margin: 0;
}

.auth-brand-logo {
  display: block;
  width: min(220px, 100%);
  height: auto;
}

.auth-brand-floating {
  position: absolute;
  /* Sits the visible artwork on the card's top edge: the bill's bottom sliver
     dips ~18px in, the rest floats above. The SVG box is square with ~26%
     transparent padding top and bottom — the numbers below position the BOX,
     so the artwork lands higher than they read. */
  top: -4.5rem;
  left: 50%;
  width: calc(100% - 2rem);
  transform: translateX(-50%);
  z-index: 1;
}

.auth-two-factor-card {
  max-width: 480px;
}

.two-factor-info-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  padding: 0.85rem 0.95rem;
  margin-bottom: 1rem;
}

.two-factor-qr-wrap {
  display: grid;
  place-items: center;
  margin: 0 0 0.55rem;
}

.two-factor-qr-styled {
  display: none;
}

.two-factor-qr-styled.active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.two-factor-qr-image.qr-fallback-hidden {
  display: none;
}

.two-factor-qr-image {
  width: 220px;
  height: 220px;
  border-radius: 10px;
  border: 1px solid #dbe2ea;
  background: #ffffff;
  object-fit: contain;
}

.two-factor-otp-link {
  display: inline-flex;
  margin: 0 0 0.65rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.two-factor-otp-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.two-factor-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.two-factor-key {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  word-break: break-word;
  letter-spacing: 0.04em;
}

.two-factor-help {
  margin: 0.4rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.two-factor-meta-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.3rem;
}

.two-factor-meta-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.two-factor-meta-value {
  font-size: 0.95rem;
  font-weight: 700;
  word-break: break-word;
}

.auth-secondary-button {
  margin-top: 0.1rem;
}

.auth-link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent, #14803c);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

#twoFactorSetupCode,
#twoFactorVerifyCode {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  font-family: var(--font-amount);
}

h1 {
  margin: 0 0 0.5rem;
}

.subtitle {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 0.65rem;
}

label {
  font-size: 0.9rem;
  font-weight: 600;
}

input {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #bbf7d0;
  border-color: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
}

button {
  margin-top: 0.5rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.modal-actions button:not(.modal-secondary):not(.modal-danger):hover {
  background: var(--accent-hover);
}

.meta {
  margin: 1rem 0 0;
  color: var(--muted);
}

.meta a {
  color: var(--text);
}

.message {
  min-height: 1.4rem;
  margin-top: 0.9rem;
  font-weight: 600;
}

.message.error {
  color: var(--danger);
}

.message.success {
  color: var(--success);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

.app-shell[data-auth-page] {
  display: block;
  position: relative;
}

.app-sidebar {
  background: #e5e7eb;
  color: #1f2937;
  padding: 0 var(--sidebar-inline-pad);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-self: start;
  min-height: 0;
  overflow-y: auto;
}

.app-shell[data-auth-page] .app-sidebar {
  background: transparent;
  padding: 0;
  position: fixed;
  inset: 0;
  height: auto;
  overflow: visible;
  pointer-events: none;
  z-index: 40;
}

.app-brand {
  margin: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  left: 0;
  top: var(--app-header-top);
  line-height: 0;
}

.app-brand-logo {
  display: block;
  width: var(--sidebar-logo-width);
  max-width: 100%;
  height: auto;
}

.app-nav {
  display: grid;
  gap: 0.7rem;
  width: calc(100% - (var(--sidebar-inline-pad) * 2));
  position: absolute;
  top: 50%;
  left: var(--sidebar-inline-pad);
  transform: translateY(-50%);
  justify-items: start;
}

.app-shell[data-auth-page] .app-nav {
  position: fixed;
  top: 50%;
  left: max(
    66px,
    calc(max(25px, ((100vw - var(--app-content-max-width)) / 2)) - 25px)
  );
  transform: translate(-100%, -50%);
  width: var(--app-nav-expanded-width);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-items: initial;
  pointer-events: auto;
}

.app-shell[data-auth-page] .app-nav a {
  transform-origin: right center;
}

.app-nav a {
  text-decoration: none;
  width: 66px;
  height: 66px;
  padding: 0;
  border-radius: 999px;
  background: #22c55e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition:
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.app-nav a[data-label="Budget"] {
  --app-nav-item-expanded-width: 150px;
}

.app-nav a[data-label="Transactions"] {
  --app-nav-item-expanded-width: 220px;
}

.app-nav a[data-label="Paycheck Planning"] {
  --app-nav-item-expanded-width: 270px;
}

.app-nav a[data-label="Timeline"] {
  --app-nav-item-expanded-width: 160px;
  overflow: visible;
}

.app-nav a[data-label="Accounts"] {
  --app-nav-item-expanded-width: 170px;
}

.app-nav a:hover {
  width: var(--app-nav-item-expanded-width, var(--app-nav-expanded-width));
  background: var(--accent);
  box-shadow: 0 6px 14px rgba(20, 128, 60, 0.28);
}

.app-nav a:focus-visible {
  width: var(--app-nav-item-expanded-width, var(--app-nav-expanded-width));
  outline: 2px solid #0f172a;
  outline-offset: 2px;
  box-shadow: 0 6px 14px rgba(20, 128, 60, 0.28);
}

.app-nav a.active {
  background: var(--accent);
  box-shadow: 0 6px 14px rgba(20, 128, 60, 0.28);
}

.app-nav-icon {
  width: 34px;
  height: 34px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.16s ease, transform 0.22s ease;
}

.app-nav a::after {
  content: attr(data-label);
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.16s ease, transform 0.22s ease;
  z-index: 2;
}

.app-nav a[data-label="Timeline"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--trash-red);
  border: 3px solid #f9fafb;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 3;
}

.app-nav a[data-label="Timeline"].app-nav-has-todo::before {
  opacity: 1;
  transform: scale(1);
}

.app-nav a:hover::after,
.app-nav a:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.app-nav a:hover .app-nav-icon,
.app-nav a:focus-visible .app-nav-icon {
  opacity: 0;
  transform: scale(0.72);
}

.app-main {
  background: #f9fafb;
  padding: var(--app-header-height) 25px 25px;
  position: relative;
  --app-main-header-band-width: min(var(--app-content-max-width), calc(100% - 50px));
  --app-main-content-width: min(var(--app-content-max-width), 100%);
}


.app-shell[data-auth-page] .app-sidebar .app-brand {
  display: none;
}

.app-shell[data-auth-page] .app-main::before {
  content: "";
  position: absolute;
  top: var(--app-header-top);
  left: 50%;
  width: var(--app-main-header-band-width);
  height: var(--app-header-content-height);
  background-image: url("/assets/logo/mindlessbudget_logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto var(--header-logo-height);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 20;
}

.app-shell[data-auth-page] .app-main > * {
  width: var(--app-main-content-width);
  margin-left: auto;
  margin-right: auto;
}

.app-main h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.planning-month-heading {
  display: flex;
  align-items: center;
}

.planning-month-inline-picker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.planning-month-inline-slot {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.planning-month-inline-button {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.planning-month-inline-button:hover,
.planning-month-inline-button:focus,
.planning-month-inline-button:focus-visible {
  background: transparent;
  color: var(--text);
  text-decoration: none;
  outline: none;
}

.planning-month-inline-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: max-content;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  padding: 0.25rem;
  display: grid;
  gap: 0.1rem;
  z-index: 120;
}

.planning-month-inline-slot-month .planning-month-inline-menu {
  min-width: max(100%, var(--planning-month-menu-min-width-px, 0px));
}

.planning-month-inline-slot-year .planning-month-inline-menu-year {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0.25rem 0;
}

.planning-month-inline-menu[hidden] {
  display: none;
}

.planning-month-inline-option {
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}

.planning-month-inline-option:hover,
.planning-month-inline-option:focus,
.planning-month-inline-option:focus-visible {
  background: #f1f5f9;
  color: var(--text);
  outline: none;
}

.planning-month-inline-option.is-active {
  background: #dcfce7;
  color: var(--text);
}

.planning-month-inline-option-year {
  text-align: center;
  padding: 0.45rem 0;
}

.budget-header,
.paycheck-header,
.accounts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.budget-header {
  margin-bottom: 0;
}

.budget-header-main,
.paycheck-header-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  width: 100%;
  max-width: 760px;
  min-width: 0;
  justify-content: space-between;
}

.budget-header-main {
  align-items: flex-start;
  justify-content: flex-start;
}

.paycheck-header-main {
  align-items: flex-start;
  justify-content: flex-start;
}

.budget-month-nav,
.paycheck-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.budget-month-nav {
  align-items: center;
  /* Center arrow controls against the month heading while keeping heading top-aligned. */
  margin-top: calc((3rem * 1.05 - 42px) / 2);
  margin-left: 0;
}

.paycheck-month-nav {
  align-items: center;
  margin-top: calc((3rem * 1.05 - 42px) / 2);
  margin-left: 0;
}

.budget-month-nav-button,
.paycheck-month-nav-button {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}

.budget-month-nav-button:hover,
.budget-month-nav-button:focus,
.budget-month-nav-button:focus-visible,
.paycheck-month-nav-button:hover,
.paycheck-month-nav-button:focus,
.paycheck-month-nav-button:focus-visible {
  background: transparent;
  outline: none;
}

.budget-month-nav-button:disabled,
.paycheck-month-nav-button:disabled {
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.budget-month-nav-button:disabled:hover,
.budget-month-nav-button:disabled:focus,
.budget-month-nav-button:disabled:focus-visible,
.paycheck-month-nav-button:disabled:hover,
.paycheck-month-nav-button:disabled:focus,
.paycheck-month-nav-button:disabled:focus-visible {
  background: transparent;
}

.budget-month-nav-icon,
.paycheck-month-nav-icon {
  width: 42px;
  height: 42px;
  display: block;
  background-color: var(--accent);
  -webkit-mask: url("/assets/icons/arrow_back_2.svg") center / contain no-repeat;
  mask: url("/assets/icons/arrow_back_2.svg") center / contain no-repeat;
}

.budget-month-nav-button:disabled .budget-month-nav-icon,
.paycheck-month-nav-button:disabled .paycheck-month-nav-icon {
  background-color: #22c55e;
  opacity: 1;
}

.budget-month-nav-icon-forward,
.paycheck-month-nav-icon-forward {
  transform: scaleX(-1);
}

.budget-month-net {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 4rem;
  line-height: 1.05;
}

/* Save feedback for the budget page. Deliberately page-local: there is still
   no toast/snackbar system (see WORKLIST), and inventing half of one here
   would be a second mechanism to reconcile later. Fold this into the toast
   system when that lands. */
.budget-save-status {
  margin: 0;
  align-self: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  /* Reserved width so the header does not shift as the text goes
     "" -> "Saving…" -> "Saved" -> "". A layout jump next to the number
     someone is reading is worse than no indicator at all. */
  min-width: 4.75rem;
  opacity: 0;
  /* Opacity only, so this needs no reduced-motion carve-out: per the rules at
     the bottom of this file, opacity carries state and is not motion. */
  transition: opacity 140ms ease-in-out;
}

.budget-save-status[data-state] {
  opacity: 1;
}

.budget-save-status[data-state="saved"] {
  color: var(--success);
}

.budget-month-net-row {
  max-width: 760px;
  margin: 0.6rem 0 0.75rem;
  display: flex;
  justify-content: center;
}

.budget-month-net-row .budget-month-net {
  width: 100%;
  text-align: center;
}

#budgetMonthNet {
  font-size: 4rem !important;
  line-height: 1.05;
  align-self: flex-start;
  margin-left: auto;
  text-align: right;
}

#budgetMonth {
  font-size: 3rem !important;
  line-height: 1.05;
}

#budgetMonth .planning-month-inline-picker {
  gap: 0.65rem;
}

#transactionsMonth,
#paycheckMonth,
#timelineTitle,
#accountsTitle {
  font-size: 3rem !important;
  line-height: 1.05;
}

#transactionsMonth .planning-month-inline-picker,
#paycheckMonth .planning-month-inline-picker,
#timelineTitle .planning-month-inline-picker {
  gap: 0.65rem;
}

.budget-actions-footer {
  max-width: 760px;
  margin: 0.7rem 0 0;
  display: flex;
  justify-content: center;
}

.budget-month-net-positive {
  color: var(--accent);
}

.budget-month-net-negative {
  color: var(--trash-red);
}

.budget-month-net-neutral {
  color: var(--accent);
}

.paycheck-items-card {
  --paycheck-card-side-padding: 1rem;
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--paycheck-card-side-padding);
  margin-bottom: 1rem;
}

.paycheck-items-card h3 {
  margin: 0 0 0.35rem;
}

.timeline-items-card {
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin: 0.7rem 0 1rem;
  display: grid;
  gap: 0.7rem;
}

.timeline-items-card h3 {
  margin: 0;
}

.timeline-items-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.transactions-card {
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.transactions-card h3 {
  margin: 0 0 0.45rem;
}

.transactions-card #transactionsStatus {
  margin: 0 0 0.65rem;
  min-height: 1.2rem;
}

.transactions-card #transactionsStatus:empty {
  margin: 0;
  min-height: 0;
}

.transactions-list {
  display: grid;
  gap: 5px;
}

/* ── Skeleton / shimmer loader ─────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.transactions-skeleton-row {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.82rem 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 108px;
  gap: 0.55rem;
  align-items: center;
}

.transactions-skeleton-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.transactions-skeleton-cell-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.skeleton-block {
  height: 13px;
  border-radius: 5px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ── Budget skeleton ─────────────────────────────────────────────────── */
.budget-group-skeleton {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

.budget-group-skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.budget-item-skeleton {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
}

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

/* ── Account skeleton ────────────────────────────────────────────────── */
.account-card-skeleton {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 0.55rem;
  align-items: center;
  min-height: 58px;
}

/* ── Paycheck skeleton ───────────────────────────────────────────────── */
.paycheck-skeleton-row {
  width: calc(100% - var(--paycheck-thermo-lane));
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.73rem 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 108px;
  gap: 0.4rem;
  align-items: center;
}

/* ── Timeline / to-do skeleton ───────────────────────────────────────── */
.todo-card-skeleton {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: center;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #f8fafc;
  padding: 0.75rem 0.8rem;
}

.todo-card-skeleton-checkbox {
  width: 30px;
  height: 30px;
  border-radius: 50% !important;
  flex-shrink: 0;
}

.todo-card-skeleton-content {
  display: grid;
  gap: 0.35rem;
}

.transactions-table-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 108px;
  gap: 0.4rem;
  padding: 0.68rem 0.95rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.transactions-table-header span:nth-child(2),
.transactions-table-header span:nth-child(3) {
  text-align: right;
}

.transactions-row {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.82rem 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 108px;
  gap: 0.55rem;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.transactions-row:hover {
  background: #f9fbfe;
}

.transactions-row-pending {
  background: #fffbeb;
  border-color: #fde68a;
}

.transactions-row-pending:hover {
  background: #fef3c7;
}

.transactions-title-cell {
  min-width: 0;
}

.transactions-name {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 25ch;
}

.transactions-meta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  flex-wrap: nowrap;
}

.transactions-meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.transactions-date {
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.transactions-amount {
  font-size: 1.06rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.transactions-amount-positive {
  color: var(--success);
}

.transactions-amount-negative {
  color: var(--trash-red);
}

.transactions-empty {
  margin: 0;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #f8fafc;
  padding: 0.75rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── Transaction categorization layout ──────────────────────────────────── */

.transactions-card {
  position: relative;
  overflow: visible;
}

/* Put a filed transaction back in Needs Review. [H2]
   Sits beside the category pill and is deliberately quieter than it: the pill
   is the information, this is the way out of it. Grey until hovered, then the
   destructive red the Delete control already uses, so the colour only appears
   once the pointer is committed to it.
   32px of touch target via padding, because the transactions row is a tap
   target on mobile and a 12px glyph is not. */
.txn-unfile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 99px;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.txn-unfile-btn:hover,
.txn-unfile-btn:focus-visible {
  background: #fee2e2;
  color: #b91c1c;
}

.txn-unfile-btn:focus-visible {
  outline: 2px solid #b91c1c;
  outline-offset: 1px;
}

.transactions-category-tag-pill {
  display: inline-flex;
  align-items: center;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 99px;
  padding: 0.18rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.transactions-category-tag-pill-transfer {
  background: #f3f4f6;
  color: #6b7280;
}

/* ── Suggestion pill ─────────────────────────────────────────────────────── */

.txn-suggestion-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0;
  padding: 0.18rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #854d0e;
  border-radius: 99px;
  border: none;
  background: #fef9c3;
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}

.txn-suggestion-pill:hover,
.txn-suggestion-pill:focus,
.txn-suggestion-pill:active {
  color: #854d0e;
  background: #fef9c3;
  outline: none;
}

/* Hand-entered transactions (cash, checks). The pencil sits inside the title
   cell's meta row rather than becoming a fourth grid column, so the row grid,
   the table header and the mobile layout all stay exactly as they were. */
.txn-manual-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: #f1f5f9;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0.75;
  transition: opacity 0.12s ease, background 0.12s ease;
}

.txn-manual-edit:hover,
.txn-manual-edit:focus-visible {
  opacity: 1;
  background: #e2e8f0;
  outline: none;
}

.txn-manual-edit:focus-visible {
  box-shadow: 0 0 0 2px #22c55e;
}

.txn-manual-edit img {
  width: 13px;
  height: 13px;
  display: block;
  pointer-events: none;
}

.manual-txn-optional {
  color: var(--muted);
  font-weight: 500;
}

/* drag-enabled rows */
.transactions-row[draggable="true"] {
  cursor: grab;
}

.transactions-row.txn-dragging {
  position: relative;
  z-index: 500;
  opacity: 0.45;
  cursor: grabbing;
}

/* ── Categorized section ────────────────────────────────────────────────── */

.transactions-section-divider {
  display: contents;
}

.transactions-section-toggle {
  margin-top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.68rem 0.95rem;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  text-align: left;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.15s;
}

.transactions-section-toggle:hover {
  background: #f1f5f9;
}

.transactions-section-chevron {
  margin-left: auto;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.transactions-section-toggle[aria-expanded="true"] .transactions-section-chevron {
  transform: rotate(180deg);
}

.transactions-categorized-list {
  display: grid;
  gap: 5px;
}

.transactions-categorized-list[hidden] {
  display: none;
}

/* ── Right drag panel ───────────────────────────────────────────────────── */

.transactions-drag-panel {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  max-height: 80vh;
  overflow-x: visible;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1rem;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, width 0.18s ease;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
  border-radius: var(--radius, 12px);
}

.transactions-drag-panel.txn-panel-active {
  opacity: 1;
  pointer-events: auto;
}

.transactions-drag-panel.txn-panel-split {
  width: 320px;
}

.txn-panel-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem 0.2rem;
}

.txn-category-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.txn-category-block {
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: default;
}

.txn-category-block.txn-cat-push {
  border-color: var(--success);
  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.18);
}

.txn-panel-transfer-divider {
  border-top: 1px solid #e5e7eb;
  margin: 0.6rem 0;
}

/* ── Action circles (Split + Transfer) ────────────────────────────────────── */

.txn-panel-action-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}

.txn-panel-action-circle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.txn-panel-action-circle.txn-cat-push {
  background: #16a34a;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}

/* Delete reads as destructive even though nothing is destroyed: the row is
   filed under a reserved name, hidden from the page, and kept in the database.
   Red is the point -- it is the one circle whose meaning the user must not
   misread as "file it somewhere". */
.txn-panel-action-circle.txn-action-delete {
  background: var(--danger);
}

.txn-panel-action-circle.txn-action-delete.txn-cat-push {
  background: #dc2626;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

/* The only route back to a deleted transaction. It is off every tab by design,
   so this strip is the whole undo affordance -- deliberately quiet when there
   is nothing deleted, and never a fourth tab, because a tab would undo the
   point of the button looking like Delete. */
.txn-deleted-strip {
  margin: 0.5rem 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}

.txn-deleted-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.txn-deleted-strip-toggle,
.txn-deleted-strip-restore {
  background: none;
  border: none;
  color: var(--link, #15803d);
  cursor: pointer;
  font: inherit;
  padding: 0.15rem 0.25rem;
  text-decoration: underline;
}

.txn-deleted-strip-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.txn-deleted-strip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.txn-deleted-strip-amount {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.txn-panel-action-icon {
  width: 36px;
  height: 36px;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* ── Split editor ────────────────────────────────────────────────────────── */

.txn-split-editor-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

.txn-split-editor-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.txn-split-editor-txn-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.txn-split-back-btn {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.txn-split-back-btn:hover {
  color: #1e293b;
}

.txn-split-editor-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  text-align: left;
}

.txn-split-editor-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--trash-red);
  flex-shrink: 0;
}

.txn-split-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.txn-split-row {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.txn-split-selectors {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.txn-split-cascade-btn {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0.38rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.txn-split-cascade-btn:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.txn-split-cascade-dropdown {
  position: fixed;
  z-index: 9999;
  display: flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.txn-split-cascade-left {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  border-right: 1px solid var(--border);
  padding: 0.3rem 0;
}

.txn-split-cascade-right {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  padding: 0.3rem 0;
}

.txn-split-cascade-cat {
  padding: 0.38rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.txn-split-cascade-cat:hover,
.txn-split-cascade-cat.txn-cascade-active {
  background: #f0fdf4;
  color: var(--success);
}

.txn-split-cascade-item {
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.txn-split-cascade-item:hover {
  background: #f0fdf4;
  color: var(--success);
}

.txn-split-cascade-item.txn-cascade-current {
  background: #dcfce7;
  color: var(--success);
  font-weight: 600;
}

.txn-split-amount {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px dashed #94a3b8;
  padding-bottom: 1px;
  text-align: right;
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.txn-split-slider-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.txn-split-track {
  position: relative;
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.txn-split-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  pointer-events: none;
}

.txn-split-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fff;
  border: 2px solid var(--success);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.txn-split-thumb:active {
  cursor: grabbing;
  background: #f0fdf4;
}

.txn-split-amount:hover {
  border-bottom-color: var(--muted);
}

.txn-split-amount-input {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 2px 6px;
  text-align: right;
  outline: none;
  background: #fff;
}

/* [FA-H20] This used to re-assert the resting border colour on focus, which
   cancelled the green border the global input:focus rule paints — so focusing
   this field produced no visual change at all. On a money input that is the
   worst place to lose the cursor. Inherit the app's standard treatment. */
.txn-split-amount-input:focus {
  outline: none;
  box-shadow: none;
}

.txn-split-pct-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 2.8rem;
  text-align: right;
  flex-shrink: 0;
}

.txn-split-lock-btn,
.txn-split-trash-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.txn-split-lock-btn:hover,
.txn-split-trash-btn:hover {
  background: none;
}


.txn-split-lock-icon,
.txn-split-trash-icon {
  display: block;
  width: auto;
  height: 1.3rem;
  aspect-ratio: 1;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.txn-split-lock-icon {
  background-color: #94a3b8;
}

.txn-split-lock-icon.is-locked {
  background-color: #22c55e;
}

.txn-split-trash-icon {
  background-color: #ef4444;
}

.txn-split-warning {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--trash-red);
  margin: 0 0 0.5rem;
  text-align: center;
}

.txn-split-add-btn {
  width: 100%;
  background: none;
  border: 1.5px dashed #e5e7eb;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem;
  margin: 0 0 0.6rem;
  cursor: pointer;
  text-align: center;
}

.txn-split-add-btn:hover {
  border-color: var(--success);
  color: var(--success);
  background: none;
}

.txn-split-actions {
  display: flex;
  gap: 0.4rem;
}

.txn-split-cancel-btn {
  flex: 1;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--kit-border);
  box-shadow: var(--kit-shadow-card);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.65rem;
  margin: 0;
  cursor: pointer;
}

.txn-split-cancel-btn:hover {
  background: var(--color-neutral-50);
  border-color: var(--kit-border-strong);
}

.txn-split-save-btn {
  flex: 1;
  background: var(--success);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.65rem;
  margin: 0;
  cursor: pointer;
}

.txn-split-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.txn-split-save-btn:not(:disabled):hover {
  background: #16a34a;
}

/* ── Split pills on transaction rows ─────────────────────────────────────── */

.txn-split-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.txn-split-pill {
  font-size: 0.7rem;
}

.txn-category-header {
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  user-select: none;
  pointer-events: none;
}

.txn-category-items {
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.txn-category-items.txn-items-open {
  max-height: 400px;
}

@media (max-width: 760px) {
  .transactions-drag-panel,
  .transactions-drag-panel.txn-panel-split {
    width: min(75vw, 480px);
  }
  .txn-category-block {
    cursor: pointer;
  }
  .txn-category-item {
    cursor: pointer;
  }
  .txn-panel-action-circle {
    cursor: pointer;
  }
}

.txn-category-item {
  padding: 0.5rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
  cursor: default;
}

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

.txn-category-item.txn-item-over {
  background: #f0fdf4;
  color: #15803d;
}

.paycheck-items-list {
  --paycheck-thermo-width: 16px;
  --paycheck-thermo-side-gap: 0.85rem;
  --paycheck-thermo-lane: calc(var(--paycheck-thermo-width) + (var(--paycheck-thermo-side-gap) * 2));
  display: grid;
  gap: 5px;
  padding-right: 0;
  width: calc(100% + var(--paycheck-card-side-padding));
  margin-right: calc(-1 * var(--paycheck-card-side-padding));
  border: none;
  border-radius: 0;
  overflow: visible;
  position: relative;
  background: transparent;
}

.paycheck-item-modal-card {
  max-width: 460px;
}

.paycheck-item-modal-card .modal-subtitle {
  margin-bottom: 0.35rem;
}

.paycheck-schedule-mode-toggle {
  display: flex;
  background: #f0f4f8;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 0.9rem;
}

.paycheck-mode-btn {
  flex: 1;
  margin-top: 0;
  padding: 0.38rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}

.paycheck-mode-btn.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.paycheck-item-schedule-form {
  margin-top: 0.2rem;
}

.paycheck-recurring-fields {
  display: grid;
  gap: 0.55rem;
}

.paycheck-recurring-fields[hidden],
.paycheck-recurring-field-group[hidden],
.paycheck-calendar[hidden] {
  display: none !important;
}

.paycheck-recurring-field-group {
  display: grid;
  gap: 0.55rem;
}

.paycheck-table-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 108px;
  gap: 0.4rem;
  width: calc(100% - var(--paycheck-thermo-lane));
  padding: 0.68rem 0.95rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.paycheck-table-header span:nth-child(2),
.paycheck-table-header span:nth-child(3) {
  text-align: right;
}

.paycheck-table-row {
  margin: 0;
  width: calc(100% - var(--paycheck-thermo-lane));
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  padding: 0.9rem 0.95rem;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 108px;
  gap: 0.55rem;
  align-items: center;
  text-align: left;
  position: relative;
  overflow: visible;
}

.paycheck-table-row:hover {
  background: #f9fbfe;
}

.paycheck-table-row-income {
  background: #ecfdf3;
  border-color: #b7ebcf;
}

.paycheck-table-row-income:hover {
  background: #e1f8eb;
}

.paycheck-table-row-overdrawn {
  border-color: #fecaca;
}

.paycheck-table-row:focus,
.paycheck-table-row:focus-visible {
  outline: 2px solid #bbf7d0;
  outline-offset: -2px;
}

.paycheck-table-date {
  font-size: 0.96rem;
  color: var(--muted);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.paycheck-table-name {
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paycheck-table-amount {
  font-size: 1.08rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.paycheck-table-row:not(.paycheck-table-row-income):not(.paycheck-table-row-buffer) .paycheck-table-amount {
  color: var(--trash-red);
}

.paycheck-table-row-income .paycheck-table-amount,
.paycheck-table-row-buffer .paycheck-table-amount {
  color: var(--success);
}

.paycheck-thermometer-overlay {
  position: absolute;
  left: calc(100% - var(--paycheck-thermo-width) - var(--paycheck-thermo-side-gap));
  width: var(--paycheck-thermo-width);
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
}

.paycheck-today-row {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.55rem 0;
  width: calc(100% - var(--paycheck-thermo-lane));
  padding: 14px 0.95rem;
  background: transparent;
  z-index: 95;
}

.paycheck-today-sweep-row {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 95;
  pointer-events: none;
  will-change: transform;
}

.paycheck-today-sweep-row .paycheck-today-label {
  text-transform: none;
  letter-spacing: 0.02em;
}

.paycheck-income-confetti {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 95;
  background-color: currentColor;
  -webkit-mask-image: var(--paycheck-confetti-icon);
  mask-image: var(--paycheck-confetti-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 0;
  animation-name: paycheckIncomeConfettiBurst;
  animation-timing-function: cubic-bezier(0.1, 0.86, 0.28, 1);
  animation-fill-mode: forwards;
}

.paycheck-income-confetti-dollar {
  color: #22c55e;
}

.paycheck-income-confetti-moneybag {
  color: #d4af37;
}

@keyframes paycheckIncomeConfettiBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)
      scale(var(--confetti-start-scale, 0.9))
      rotate(var(--confetti-rotate-start, 0deg));
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--confetti-tx, 0px)),
        calc(-50% + var(--confetti-ty, 0px))
      )
      scale(var(--confetti-end-scale, 0.85))
      rotate(var(--confetti-rotate-end, 0deg));
  }
}

.paycheck-today-line {
  position: absolute;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: transparent;
  pointer-events: none;
}

.paycheck-today-line::before,
.paycheck-today-line::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.paycheck-today-line::before {
  left: 0;
  right: calc(50% + (var(--paycheck-today-center-gap, 120px) / 2));
}

.paycheck-today-line::after {
  left: calc(50% + (var(--paycheck-today-center-gap, 120px) / 2));
  right: var(--paycheck-today-line-end-gap, 0px);
}

.paycheck-today-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  padding: 0.28rem 0.88rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.paycheck-today-remaining {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.36rem 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.48rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.paycheck-today-remaining-positive {
  color: var(--success);
}

.paycheck-today-remaining-negative {
  color: var(--trash-red);
}

.paycheck-today-remaining.paycheck-today-remaining-primary {
  color: #14803c;
}

.paycheck-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.paycheck-calendar-weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0;
}

.paycheck-calendar-spacer {
  min-height: 40px;
}

.paycheck-day-button {
  margin: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  position: relative;
  z-index: 0;
}

.paycheck-day-button:hover {
  background: #f8fafc;
}

.paycheck-day-button.selected {
  border: none;
  background: var(--accent);
  color: #ffffff;
}

.paycheck-day-button.selected.selected-join-right:not(.selected-join-left) {
  border-radius: 999px 0 0 999px;
}

.paycheck-day-button.selected.selected-join-left:not(.selected-join-right) {
  border-radius: 0 999px 999px 0;
}

.paycheck-day-button.selected.selected-join-left.selected-join-right {
  border-radius: 0;
}

.paycheck-day-button.selected::before,
.paycheck-day-button.selected::after {
  position: absolute;
  background: var(--accent);
  z-index: -1;
}

.paycheck-day-button.selected::before {
  content: none;
}

.paycheck-day-button.selected.selected-join-left::before,
.paycheck-day-button.selected.selected-join-right::before {
  content: "";
  top: 0;
  height: 100%;
  border-radius: 0;
}

.paycheck-day-button.selected.selected-join-left::before {
  left: -20px;
  width: 20px;
}

.paycheck-day-button.selected.selected-join-right::before {
  left: 40px;
  width: 20px;
}

.paycheck-day-button.selected.selected-join-left.selected-join-right::before {
  left: -20px;
  width: calc(100% + 40px);
}

.paycheck-day-button.selected::after {
  top: 0;
  left: 50%;
  width: 40px;
  height: 100%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.paycheck-day-button.selected.selected-join-up::after,
.paycheck-day-button.selected.selected-join-down::after {
  content: "";
}

.paycheck-day-button.selected.selected-join-up::after {
  top: -20px;
  height: calc(100% + 20px);
}

.paycheck-day-button.selected.selected-join-down::after {
  height: calc(100% + 20px);
}

.paycheck-day-button.selected.selected-join-up.selected-join-down::after {
  top: -20px;
  height: calc(100% + 40px);
}

.paycheck-day-button.selected:hover {
  background: var(--accent);
}

.paycheck-selected-summary {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 1.3rem;
}

.paycheck-summary-every-toggle {
  cursor: pointer;
  color: var(--accent);
  font-weight: 500;
}

.paycheck-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.budget-header button,
.paycheck-header button,
.accounts-header button {
  margin-top: 0;
  white-space: nowrap;
}

.header-action-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  top: var(--app-header-top);
  right: 25px;
  z-index: 30;
}

.list-bottom-actions {
  max-width: 760px;
  margin: 0.6rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.list-bottom-actions .header-nav-icon-button {
  margin-top: 0;
}

.plaid-status-message {
  max-width: 760px;
  margin: 0 0 0.75rem;
  min-height: 1.2rem;
}

.accounts-header + .plaid-status-message:empty {
  margin: 0;
  min-height: 0;
}

.accounts-bottom-actions {
  justify-content: center;
  margin: 0.7rem 0 0;
}

.plaid-connections-card {
  max-width: 760px;
  border: none;
  background: transparent;
  padding: 0;
  margin-bottom: 0.8rem;
}

.plaid-connections-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.plaid-connections-empty {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.plaid-connections-list {
  display: grid;
  gap: 0.8rem;
}

.plaid-linked-account-card {
  padding: 0.9rem 0.95rem;
}

.plaid-linked-account-row {
  grid-template-columns: minmax(0, 1fr) 108px auto;
}

.plaid-linked-account-name {
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
}

.plaid-linked-account-meta {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.plaid-linked-account-balance {
  white-space: nowrap;
}

.remove-plaid-account-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.budget-actions-row {
  justify-content: space-between;
  align-items: center;
}

.budget-actions-left {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.budget-resync-icon {
  filter: none;
}

.header-user-menu {
  position: relative;
  display: inline-flex;
}

.header-user-menu-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 170px;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 0.2rem;
  z-index: 90;
}

.header-user-menu-panel[hidden] {
  display: none;
}

.header-user-menu-item {
  margin-top: 0;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
}

.header-user-menu-item:hover,
.header-user-menu-item:focus,
.header-user-menu-item:focus-visible {
  background: #f1f5f9;
  color: var(--text);
  outline: none;
}

.header-user-menu-item-logout {
  color: var(--trash-red);
}

.header-user-menu-item-logout:hover,
.header-user-menu-item-logout:focus,
.header-user-menu-item-logout:focus-visible {
  background: #fef2f2;
  color: var(--trash-red);
}

.header-nav-icon-button {
  padding: 0;
  width: 56px;
  height: 56px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
}

.header-nav-icon-button[hidden] {
  display: none;
}

.header-nav-icon-button:hover,
.header-nav-icon-button:focus,
.header-nav-icon-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.header-nav-icon {
  width: 48px;
  height: 48px;
  display: block;
}

.header-user-menu .header-nav-icon-button {
  width: var(--profile-control-size);
  height: var(--profile-control-size);
}

html[data-cached-user-photo="true"] .header-user-menu .header-nav-icon-button {
  background-image: var(--cached-user-photo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 999px;
}

.header-user-menu .header-nav-icon {
  width: var(--profile-control-size);
  height: var(--profile-control-size);
}

html[data-cached-user-photo="true"] .header-user-menu .user-settings-icon {
  opacity: 0;
}

.add-group-icon {
  filter: none;
}

.user-settings-icon {
  filter: invert(20%) sepia(9%) saturate(888%) hue-rotate(178deg) brightness(93%) contrast(90%);
}

.user-settings-icon.user-photo {
  filter: none;
  object-fit: cover;
  border-radius: 999px;
}

.header-todo-icon {
  filter: invert(33%) sepia(69%) saturate(636%) hue-rotate(126deg) brightness(92%) contrast(96%);
  transform: scaleX(-1);
}

.header-todo-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--trash-red);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.15);
}

.header-todo-badge[hidden] {
  display: none;
}

.todo-panel-overlay {
  position: fixed;
  inset: 0;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  justify-content: flex-end;
  z-index: 1100;
}

.todo-panel-overlay[hidden] {
  display: none;
}

.todo-panel {
  width: min(390px, 100%);
  max-height: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.22);
  padding: 1rem;
  display: grid;
  align-content: start;
  gap: 0.7rem;
}

.todo-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.todo-panel-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.todo-panel-close {
  margin-top: 0;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--kit-border);
  box-shadow: var(--kit-shadow-card);
  font-size: 0.92rem;
  padding: 0.5rem 0.75rem;
}

.todo-panel-close:hover {
  background: var(--color-neutral-50);
  border-color: var(--kit-border-strong);
}

.todo-panel-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.todo-card-list {
  display: grid;
  gap: 0.55rem;
}

.todo-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: center;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #f8fafc;
  padding: 0.75rem 0.8rem;
  cursor: pointer;
}

.todo-card-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: var(--success);
  -webkit-mask-image: url("/assets/icons/check_box_unchecked.svg");
  mask-image: url("/assets/icons/check_box_unchecked.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  cursor: pointer;
  flex-shrink: 0;
}

.todo-card-checkbox:checked {
  background-color: var(--success);
  -webkit-mask-image: url("/assets/icons/checkbox.svg");
  mask-image: url("/assets/icons/checkbox.svg");
}

.todo-card-checkbox:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

.todo-card-content {
  display: grid;
  gap: 0.2rem;
}

.todo-card-title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
  position: relative;
  display: block;
  line-height: 1.35;
}

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

.todo-card-completed .todo-card-subtitle {
  opacity: 0.85;
}

.todo-card-striking {
  pointer-events: none;
}

.todo-card-strike-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.todo-card-strike-segment {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: #14803c;
  transform: scaleX(0);
  transform-origin: left center;
  animation: todoCardStrikeIn 0.24s ease-out forwards;
}

.todo-card-strike-segment-static {
  animation: none;
  transform: scaleX(1);
}

.todo-card-swooshing {
  animation: todoCardSwooshOut 0.34s cubic-bezier(0.22, 0.78, 0.16, 1) forwards;
}

.todo-card-swooshing .todo-card-subtitle {
  opacity: 0.85;
}

@keyframes todoCardStrikeIn {
  to {
    transform: scaleX(1);
  }
}

@keyframes todoCardSwooshOut {
  to {
    opacity: 0;
    transform: translateX(68px) scale(0.95);
  }
}

.todo-card-empty {
  margin: 0;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #f8fafc;
  padding: 0.75rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.todo-card-wrap {
  display: grid;
}

.todo-card-wrap .todo-card {
  border-radius: 12px;
}

.todo-card-wrap:has(.todo-card-breakdown:not([hidden])) .todo-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.todo-card-expand-btn {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  text-decoration: none;
}

.todo-card-expand-btn:hover {
  background: none;
  color: var(--accent-hover);
}

.todo-card-breakdown {
  border: 1px solid #dbe2ea;
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #f0f4f8;
  padding: 0.5rem 0.8rem 0.65rem;
  display: grid;
  gap: 0.3rem;
}

.todo-card-breakdown[hidden] {
  display: none;
}

.todo-card-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.82rem;
  color: var(--text);
}

.todo-card-breakdown-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-card-breakdown-amount {
  font-family: var(--font-amount);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.todo-card-breakdown-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding-top: 0.4rem;
  margin-top: 0.1rem;
  border-top: 1px solid #c8d3dc;
  font-size: 0.85rem;
  font-weight: 700;
}

.todo-card-breakdown-total span:last-child {
  font-family: var(--font-amount);
  text-align: right;
}

.todo-completed-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 0.3rem;
}

.todo-completed-toggle {
  margin-top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: #eef2f7;
  color: #0f172a;
  padding: 0.6rem 0.72rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
}

.todo-completed-toggle:hover {
  background: #e2e8f0;
}

.todo-completed-title {
  text-align: left;
}

.todo-completed-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.todo-completed-count {
  min-width: 1.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #dbe2ea;
  font-size: 0.78rem;
  text-align: center;
}

.todo-completed-chevron {
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}

.todo-completed-toggle.is-expanded .todo-completed-chevron {
  transform: rotate(180deg);
}

.todo-completed-body {
  padding-top: 0.55rem;
}

.budget-groups {
  display: grid;
  gap: 0;
  max-width: 760px;
}

/* Clickable nudge above the groups when there's uncategorized spend to review. */
/* "We couldn't work out X" -- [UNKNOWN-1].
   Deliberately quieter than the uncategorized nudge above it: that one is a
   call to action in warning yellow, this is an explanation of an absence. Grey
   rather than red, because nothing is broken for the user to fix -- a figure is
   missing and reloading usually brings it back. It can appear ALONGSIDE the
   nudge, so the two must not look like one control. */
.budget-figures-unavailable {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 0.75rem;
  justify-self: center;
  box-sizing: border-box;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.budget-uncategorized-nudge {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 0.75rem;
  justify-self: center;
  box-sizing: border-box;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background 0.14s ease;
}
.budget-uncategorized-nudge:hover {
  background: #fde68a;
}

.budget-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

.group-insert-row {
  height: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.15s ease, margin 0.15s ease;
}

.group-insert-row.hover-ready,
.group-insert-row.manual-edit-active,
.group-insert-row:focus-within {
  height: 63px;
  margin: 0.2rem 0;
}

.between-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.group-insert-row.hover-ready .between-section-actions,
.group-insert-row.manual-edit-active .between-section-actions,
.group-insert-row:focus-within .between-section-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/*
 * Edit-mode action: a bare icon (no chrome around it) in the
 * between-row cluster (Add / Edit / Delete). The icons differentiate
 * by their built-in color (green add, blue edit, red delete) — same
 * icons the rest of the app uses. The button is just a clickable
 * tap target; the visible affordance is the icon itself.
 */
.between-section-action {
  margin-top: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.between-section-action:hover {
  transform: translateY(-2px);
  background: transparent;
}

.between-section-action:focus,
.between-section-action:focus-visible {
  outline: none;
  background: transparent;
}

.between-section-icon {
  width: 30px;
  height: 30px;
  display: block;
  transition: filter 0.15s ease;
}

/*
 * Strip edit icon: SVG ships natively green (#22C55E) so no filter at
 * rest. On hover / active / focus the icon shifts to #3B82F6 via the
 * same brightness(0)-prefix filter chain the toolbar button uses, so
 * the press feedback color is consistent.
 */
.group-gap-edit:hover .between-section-icon,
.group-gap-edit:active .between-section-icon,
.group-gap-edit:focus-visible .between-section-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(99%) saturate(2275%) hue-rotate(207deg) brightness(96%) contrast(91%);
}

/* .group-gap-edit gets a green filter at rest (see above) — no override
   here. The add / delete icons have their own SVG fill colors and need
   no filter, so we just leave them alone (default: no filter). */

.budget-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.budget-group-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.budget-group-total {
  font-family: var(--font-amount);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: #0f172a;
}

/*
 * Folder-tab actions: each .budget-group hosts a small tab in its
 * top-left that visually looks like the tab on a manila folder.
 * Edit + Delete live inside the tab, so the affordance is anchored
 * to the card it acts on rather than floating between two cards.
 *
 * The card itself becomes position: relative so the tab can absolute-
 * position above it. .budget-groups gets a top padding equal to the
 * tab height so the very first card's tab isn't clipped by the
 * parent. Visibility is gated by .edit-mode-on so out-of-edit users
 * see clean cards without action chrome.
 */
/*
 * Edit-mode bubble actions: every budget-group card has a between-row
 * above it that hosts three round bubble actions — Add Group (insert
 * a new card at this position), Edit (open this card's settings),
 * and Delete (remove this card). The row is collapsed by default; it
 * expands when edit mode is on AND the row is hovered or focused-
 * within, so the bubbles never clutter the page when not in use.
 *
 * Click delegation is unchanged — buttons still carry
 * .group-gap-add / .group-gap-edit / .group-gap-delete from
 * createGroupGapActionButton, which the document-level listener
 * targets directly.
 */
/*
 * Each card + its strip live inside a .budget-group-slot wrapper.
 * Hovering anywhere inside the slot expands its strip; the wrapper
 * is the hover target rather than the card or strip directly, so the
 * cursor doesn't fall out of the hover region when the strip's
 * expansion pushes the card down (which previously caused a flicker
 * loop on the card's top-border pixel).
 *
 * Expansion triggers:
 *  - .budget-group-slot:hover            → mouse anywhere in slot
 *  - .budget-group-slot:focus-within     → keyboard focus in slot
 *  - .intro-expanded on the strip itself → one-shot hint shown on
 *                                          edit-mode entry
 */
.budget-groups.edit-mode-on .budget-group-slot:hover .group-insert-row,
.budget-groups.edit-mode-on .budget-group-slot:focus-within .group-insert-row,
.budget-groups.edit-mode-on .group-insert-row.intro-expanded {
  height: 63px;
  margin: 0.2rem 0;
  /* Icons anchor to the bottom of the strip so they visually attach to
     the card they'll act on (the one directly below the strip). */
  align-items: flex-end;
  padding-bottom: 4px;
}

.budget-groups.edit-mode-on .budget-group-slot:hover .between-section-actions,
.budget-groups.edit-mode-on .budget-group-slot:focus-within .between-section-actions,
.budget-groups.edit-mode-on .group-insert-row.intro-expanded .between-section-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.add-item-button {
  margin-top: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: var(--text);
}

.add-item-button:hover {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.08);
}

.add-item-button:focus,
.add-item-button:focus-visible {
  outline: none;
}

.add-item-icon {
  width: 18px;
  height: 18px;
  display: block;
  filter: none;
}

.budget-item-list {
  --budget-item-text-size: 0.95rem;
  --budget-item-amount-size: 1rem;
  margin: 0.7rem 0 0;
  padding-left: 0;
  list-style: none;
}

.budget-item {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  cursor: grab;
}

.budget-item.dragging {
  opacity: 0.45;
}

.budget-item.drop-before {
  border-top: 2px solid #9ca3af;
}

.budget-item.drop-after {
  border-bottom: 2px solid #9ca3af;
}

.budget-group.drop-target {
  outline: 1px dashed #94a3b8;
  outline-offset: 3px;
}

.budget-item-columns {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 0.75rem;
  padding: 0.2rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}

.budget-item-columns span:nth-child(2) {
  text-align: right;
}

/* Clickable amount-column header — cycles Budgeted / Remaining / Spent. */
.budget-column-toggle {
  cursor: pointer;
  user-select: none;
  transition: color 0.14s ease;
}
.budget-column-toggle:hover,
.budget-column-toggle:focus-visible {
  color: var(--accent, #14803c);
  text-decoration: underline;
  outline: none;
}

/* In Remaining/Spent mode the amount is a computed actual, not editable. */
.budgeted-display-readonly {
  cursor: default;
}

.item-name-cell {
  display: flex;
  align-items: center;
}

.item-name-display {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-weight: 400;
  font-size: var(--budget-item-text-size);
  text-align: left;
}

.item-name-display:hover {
  text-decoration: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.item-name-display:active {
  background: transparent;
  color: var(--text);
}

.item-name-display:focus,
.item-name-display:focus-visible {
  outline: none;
  box-shadow: none;
}

.unlinked-item-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  filter: none;
}

.item-name-editor {
  display: flex;
  align-items: center;
  gap: 0;
}

.item-name-editor[hidden] {
  display: none;
}

.item-name-input {
  width: 200px;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.item-name-input:focus,
.item-name-input:focus-visible {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}

.budgeted-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

.budgeted-display {
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: var(--budget-item-amount-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.budgeted-display:hover {
  text-decoration: none;
  background: transparent;
  color: var(--text);
}

.budgeted-display:focus,
.budgeted-display:focus-visible {
  outline: none;
  box-shadow: none;
}

.budget-start-next-indicator {
  margin-top: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.budget-start-next-indicator:hover,
.budget-start-next-indicator:focus,
.budget-start-next-indicator:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.budget-start-next-icon {
  width: 21px;
  height: 21px;
  display: block;
  filter: none;
}

.budget-start-next-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 0.32rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #111827;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  z-index: 22;
}

.budget-start-next-indicator:hover .budget-start-next-tooltip,
.budget-start-next-indicator:focus .budget-start-next-tooltip,
.budget-start-next-indicator:focus-visible .budget-start-next-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.budgeted-editor {
  display: flex;
  align-items: center;
  gap: 0;
}

.budgeted-editor[hidden] {
  display: none;
}

.budgeted-input {
  width: 110px;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.budgeted-input:focus,
.budgeted-input:focus-visible {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}

.budgeted-input::-webkit-outer-spin-button,
.budgeted-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.budgeted-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.budget-item-empty {
  color: var(--muted);
  margin: 0;
  margin-left: 0;
  border: none;
  background: transparent;
  font-size: inherit;
  font-style: italic;
  text-align: left;
  padding: 0;
  width: auto;
  display: inline;
  cursor: pointer;
}

.budget-item-empty:hover,
.budget-item-empty:focus,
.budget-item-empty:focus-visible,
.budget-item-empty:active {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  outline: none;
  text-decoration: none;
}

.budget-total-row {
  margin-top: 0;
  padding: 0.85rem 0.1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.budget-total-row span:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 1000;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d1d5db;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
  padding: 1.25rem;
}

.modal-card h3 {
  margin: 0 0 0.4rem;
}

.modal-subtitle {
  margin: 0 0 1rem;
  color: var(--muted);
}

.account-type-actions {
  display: grid;
  gap: 0.55rem;
}

.account-type-actions button {
  margin-top: 0;
}

.account-confirm-message {
  margin-bottom: 1.05rem;
}

.account-confirm-reassign {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.account-confirm-reassign[hidden] {
  display: none;
}

.account-confirm-reassign label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.account-confirm-reassign select {
  margin: 0;
}

.modal-form {
  display: grid;
  gap: 0.55rem;
}

.modal-form input,
.modal-form select {
  margin-bottom: 0.4rem;
}

.modal-form select,
.account-confirm-reassign select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 2.4rem 0.7rem 0.8rem;
  font-size: 1rem;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5.5 L7 9 L11 5.5'/></svg>")
    no-repeat right 0.95rem center / 14px 14px,
    #ffffff;
}

.modal-form select:focus,
.modal-form select:focus-visible,
.account-confirm-reassign select:focus,
.account-confirm-reassign select:focus-visible {
  outline: 2px solid #bbf7d0;
  border-color: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
}

#accountModalGoalAmountWrap {
  display: grid;
  gap: 0.55rem;
}

#accountModalGoalAmountWrap[hidden] {
  display: none !important;
}

.set-aside-fields {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.1rem;
}

.set-aside-fields[hidden] {
  display: none;
}

.set-aside-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.set-aside-amount-field {
  display: grid;
  gap: 0.1rem;
}

.set-aside-amount-field input {
  width: 100%;
}

.set-aside-date-row {
  display: block;
}

.set-aside-date-row #itemModalTargetDate {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.set-aside-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.05rem 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.set-aside-checkbox-row[hidden] {
  display: none;
}

.item-modal-settled-note {
  margin: 0.25rem 0 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

.item-modal-settled-note[hidden] {
  display: none;
}

.item-modal-amount-hint {
  margin: 0.25rem 0 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.item-modal-amount-hint[hidden] {
  display: none;
}

.item-modal-amount-hint.is-warning {
  color: var(--text-warning, #b45309);
}

.item-modal-amount-hint.is-manual {
  color: var(--text-emphasis, #1f2937);
  font-style: italic;
}

.item-modal-amount-hint-reset {
  background: none;
  border: 1px solid var(--border-muted, #d1d5db);
  border-radius: 0.375rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  color: inherit;
  cursor: pointer;
}

.item-modal-amount-hint-reset:hover {
  background: var(--surface-muted, #f3f4f6);
}

.item-modal-amount-hint-reset[hidden] {
  display: none;
}

.item-modal-confirmed-transfer-note {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b45309;
}

/* "I already have this money" -- the control that counts an existing pot toward
   a new recurring cycle. A quiet secondary button, not a primary one: it is a
   correction for an uncommon case, and it sits directly under a note explaining
   why the app thinks otherwise. [SA-D3-RESET] */
.item-modal-cycle-reset {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--kit-border);
  border-radius: 8px;
  cursor: pointer;
}

.item-modal-cycle-reset:hover {
  border-color: var(--muted);
}

.item-modal-cycle-reset[hidden] {
  display: none;
}

.item-modal-confirmed-transfer-note[hidden] {
  display: none;
}

/* Where a carried balance came from, and that it still follows that month.
   Deliberately NOT the amber of its base class: amber is this modal's colour
   for "something needs your attention", and this needs none -- it is a standing
   explanation of a number that is behaving correctly. Muted and normal weight,
   so it reads as a caption rather than a warning. [SA-68] */
.item-modal-carried-note {
  font-weight: 500;
  color: var(--muted, #6b7280);
}

#itemModalAmount[readonly] {
  background-color: var(--surface-muted, #f3f4f6);
  color: var(--text-muted, #6b7280);
  cursor: not-allowed;
}

.set-aside-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

@media (max-width: 560px) {
  .set-aside-amount-row {
    grid-template-columns: 1fr;
  }
}

input.auto-selected-no-highlight::selection {
  background: transparent;
  color: inherit;
}

input.auto-selected-no-highlight::-moz-selection {
  background: transparent;
  color: inherit;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.modal-actions button {
  margin-top: 0;
}

.item-modal-delete-button {
  margin-right: auto;
  min-width: 0;
  padding: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--trash-red);
  box-shadow: none;
}

.item-modal-delete-button:hover,
.item-modal-delete-button:focus,
.item-modal-delete-button:focus-visible,
.item-modal-delete-button:active {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.item-modal-delete-icon {
  width: 48px;
  height: 48px;
  display: block;
}

.item-modal-delete-button.modal-danger,
.item-modal-delete-button.modal-danger:hover,
.item-modal-delete-button.modal-danger:focus,
.item-modal-delete-button.modal-danger:focus-visible,
.item-modal-delete-button.modal-danger:active {
  background: transparent;
  color: var(--trash-red);
  box-shadow: none;
  outline: none;
}

.modal-secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--kit-border);
  box-shadow: var(--kit-shadow-card);
}

.modal-secondary:hover {
  background: var(--color-neutral-50);
  border-color: var(--kit-border-strong);
}

.modal-danger {
  background: var(--trash-red);
}

.modal-danger:hover {
  background: var(--danger);
}

/* Account Settings: the on-page delete trigger reads as an outline button
   (the in-modal confirm stays solid red). Matches the design's ghost-danger. */
#accountDeleteButton.modal-danger {
  background: transparent;
  color: var(--trash-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: none;
}

#accountDeleteButton.modal-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--trash-red);
}

.budget-delete-confirm-modal {
  max-width: 460px;
}

.budget-delete-confirm-modal .modal-subtitle {
  margin-bottom: 0.8rem;
}

.accounts-grid {
  display: grid;
  gap: 0;
  max-width: 760px;
  --account-drop-gap: 14px;
}

.account-insert-row {
  height: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.15s ease, margin 0.15s ease;
}

.account-insert-row.hover-ready,
.account-insert-row.manual-edit-active,
.account-insert-row:focus-within {
  height: 63px;
  margin: 0.2rem 0;
}

.account-insert-row.hover-ready .between-section-actions,
.account-insert-row.manual-edit-active .between-section-actions,
.account-insert-row:focus-within .between-section-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/*
 * Page-level edit-mode button (bottom toolbar):
 * - Default (edit mode OFF): the SVG ships fill="#22C55E" natively, so
 *   no filter — exact green match with the add (folder+) and resync
 *   icons sitting beside it.
 * - Active (edit mode ON): apply a filter that maps the green SVG to
 *   #3B82F6 (Tailwind blue-500) as the "edit mode on" signal. The
 *   brightness(0) saturate(100%) prefix normalizes the source to
 *   black so the chain produces the same target regardless of
 *   what color the SVG started as.
 */
.page-edit-mode-icon {
  transition: filter 0.15s ease;
}

.page-edit-mode-button-active .page-edit-mode-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(99%) saturate(2275%) hue-rotate(207deg) brightness(96%) contrast(91%);
}

.account-gap-add .account-gap-action-icon {
  filter: none;
}

.account-gap-edit .account-gap-action-icon {
  filter: none;
}

.account-gap-delete .account-gap-action-icon {
  filter: none;
}

.settings-card {
  width: 100%;
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin-inline: auto;
  margin-bottom: 1rem;
}

.account-settings-card {
  max-width: 760px;
}

/* ── Account Settings — sectioned layout (Variation A) ─────────────── */
.account-settings-stack {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.account-settings-stack .settings-card {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
}

.account-settings-stack .message:empty {
  display: none;
}

.account-settings-stack .settings-eyebrow {
  margin: 0;
  padding: 1.15rem 1.4rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-settings-stack .two-factor-settings {
  margin: 0;
  padding: 1.05rem 1.4rem;
  gap: 1.25rem;
}

.account-settings-stack .two-factor-settings + .two-factor-settings {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.account-settings-stack .two-factor-settings-title {
  font-size: 1rem;
}

.account-settings-stack .two-factor-settings-status {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Profile chip */
.account-settings-stack .profile-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.4rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(255, 255, 255, 0));
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.account-settings-stack .profile-chip-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--success), var(--accent));
  background-size: cover;
  background-position: center;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px -2px rgba(20, 128, 60, 0.35);
}

.account-settings-stack .profile-chip-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-settings-stack .profile-chip-name {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-settings-stack .profile-chip-email {
  font-size: 0.85rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-settings-stack .profile-chip-pill {
  margin-left: auto;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
}

/* Danger zone */
.account-settings-stack .danger-card {
  border-color: rgba(239, 68, 68, 0.22);
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.06);
}

.account-settings-stack .danger-head {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.4rem;
  background: rgba(239, 68, 68, 0.04);
  border-bottom: 1px solid rgba(239, 68, 68, 0.12);
  color: var(--trash-red);
}

.profile-settings-inner {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.account-settings-form {
  display: grid;
  gap: 0.1rem;
}

.settings-dropdown {
  position: relative;
  flex-shrink: 0;
}

.settings-dropdown-button {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--kit-border);
  border-radius: 12px;
  box-shadow: var(--kit-shadow-card);
  cursor: pointer;
  min-width: 156px;
}

.settings-dropdown-button:hover {
  border-color: var(--kit-border-strong);
}

.settings-dropdown-button:focus,
.settings-dropdown-button:focus-visible {
  outline: none;
}

.settings-dropdown-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-dropdown-label {
  flex: 1;
  text-align: left;
}

.settings-dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.settings-dropdown[aria-expanded="true"] .settings-dropdown-chevron {
  transform: rotate(180deg);
}

.settings-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  bottom: auto;
  right: 0;
  min-width: 100%;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 0.1rem;
  z-index: 90;
}

/* Flip upward when there isn't room below (toggled in JS). */
.settings-dropdown-panel.drop-up {
  top: auto;
  bottom: calc(100% + 0.25rem);
}

.settings-dropdown-panel[hidden] {
  display: none;
}

/* The Default Page menu opens upward; its card must not clip the panel.
   Scoped to the card that holds the dropdown so the danger card keeps its
   clip. The profile chip's top corners are rounded explicitly to replace
   the clipping the card used to provide. */
.account-settings-stack .settings-card:has(.settings-dropdown) {
  overflow: visible;
}
.account-settings-stack .settings-card:has(.settings-dropdown) .profile-chip {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.settings-dropdown-option {
  margin-top: 0;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.settings-dropdown-option:hover,
.settings-dropdown-option:focus,
.settings-dropdown-option:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.settings-dropdown-option[aria-selected="true"] {
  color: var(--accent);
}

#accountSettingsStatus {
  margin-top: 0.5rem;
}

#accountSettingsStatus:empty {
  display: none;
}

.profile-avatar-wrap {
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}

.profile-avatar-button {
  margin-top: 0;
  width: 86px;
  height: 86px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-avatar-button:hover {
  background: #f8fafc;
}

.profile-avatar-button:focus,
.profile-avatar-button:focus-visible {
  outline: 2px solid #bbf7d0;
  border-color: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
}

.profile-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-crop-card {
  max-width: 420px;
}

.photo-options-card {
  max-width: 360px;
  text-align: center;
}

.photo-options-preview-wrap {
  display: grid;
  place-items: center;
  margin: 0.1rem 0 0.35rem;
}

.photo-options-preview {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: #ffffff;
}

.photo-options-label {
  margin: 0 0 0.85rem;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
}

.photo-options-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.photo-options-icon-button {
  margin-top: 0;
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.photo-options-icon-button:hover,
.photo-options-icon-button:focus,
.photo-options-icon-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.photo-options-icon-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.photo-options-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.photo-options-add-icon {
  filter: invert(33%) sepia(69%) saturate(636%) hue-rotate(126deg) brightness(92%) contrast(96%);
}

.photo-options-remove-icon {
  filter: var(--trash-icon-filter);
}

.photo-options-cancel-icon {
  filter: invert(21%) sepia(7%) saturate(874%) hue-rotate(177deg) brightness(90%) contrast(89%);
}

.password-modal-card {
  max-width: 460px;
}

.two-factor-profile-modal {
  max-width: 460px;
}

.two-factor-profile-modal h3,
.two-factor-profile-modal .modal-subtitle {
  text-align: center;
}

.two-factor-profile-modal .modal-subtitle {
  margin-bottom: 0.8rem;
}

.two-factor-profile-modal .two-factor-info-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 0.85rem;
}

.two-factor-profile-modal .two-factor-qr-wrap {
  margin: 0 0 0.6rem;
}

.two-factor-profile-modal .two-factor-qr-image {
  width: 260px;
  height: 260px;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid #22c55e;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.14);
}

.two-factor-profile-modal .two-factor-qr-styled {
  width: 260px;
  height: 260px;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid #22c55e;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.14);
}

.two-factor-profile-modal .two-factor-qr-styled canvas,
.two-factor-profile-modal .two-factor-qr-styled svg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px;
}

.two-factor-profile-modal .two-factor-otp-link {
  color: var(--text);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.two-factor-profile-modal .two-factor-otp-link:hover {
  color: var(--text);
}

.two-factor-profile-modal .two-factor-label,
.two-factor-profile-modal .two-factor-meta-label {
  color: var(--text);
}

.two-factor-profile-modal .two-factor-key {
  line-height: 1.28;
}

.two-factor-profile-modal .two-factor-label {
  margin-bottom: 0.2rem;
}

.two-factor-profile-modal input:focus,
.two-factor-profile-modal input:focus-visible {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}

.two-factor-profile-modal .message {
  min-height: 0;
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.two-factor-profile-modal .message:empty {
  display: none;
}

.two-factor-setup-key-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.1rem 0 0.35rem;
}

.two-factor-text-button {
  margin: 0;
  padding: 0.2rem 0.35rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 700;
}

.two-factor-text-button:hover {
  background: #ecfdf5;
  color: var(--text);
}

.two-factor-key-wrap {
  text-align: center;
}

#twoFactorSetupModalCode,
#twoFactorDisableCode {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-family: var(--font-amount);
}

.password-modal-message {
  margin-top: 0.4rem;
}

#photoCropCanvas {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f172a;
  display: block;
  margin: 0 auto 0.8rem;
  cursor: grab;
  touch-action: none;
}

#photoCropCanvas:active {
  cursor: grabbing;
}

.photo-crop-controls {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.photo-crop-controls label {
  font-size: 0.95rem;
}

#photoCropZoom {
  --photo-crop-thumb-size: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: none;
}

#photoCropZoom::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
}

#photoCropZoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--photo-crop-thumb-size);
  height: var(--photo-crop-thumb-size);
  margin-top: calc((8px - var(--photo-crop-thumb-size)) / 2);
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: var(--accent);
  box-shadow: none;
}

#photoCropZoom::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
}

#photoCropZoom::-moz-range-thumb {
  width: var(--photo-crop-thumb-size);
  height: var(--photo-crop-thumb-size);
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: none;
}

#photoCropZoom:focus,
#photoCropZoom:focus-visible {
  outline: none;
}

.photo-crop-card .modal-actions {
  margin-top: 0;
  padding-top: 0.2rem;
}

.settings-form button {
  margin-top: 0.85rem;
}

.member-since-text {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.two-factor-settings {
  margin-top: 0.2rem;
  padding: 0.65rem 0.05rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.two-factor-settings-copy {
  display: grid;
  gap: 0.2rem;
}

.two-factor-settings-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.two-factor-settings-status {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}

.two-factor-toggle {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 30px;
  cursor: pointer;
}

.two-factor-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.two-factor-toggle-slider {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.two-factor-toggle-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
  transition: transform 0.18s ease;
}

.two-factor-toggle input:checked + .two-factor-toggle-slider {
  background: #22c55e;
  border-color: #22c55e;
}

.two-factor-toggle input:checked + .two-factor-toggle-slider::after {
  transform: translateX(22px);
}

.two-factor-toggle input:focus + .two-factor-toggle-slider,
.two-factor-toggle input:focus-visible + .two-factor-toggle-slider {
  outline: 2px solid #bbf7d0;
  outline-offset: 2px;
}

.change-password-text {
  margin: 0.1rem 0 0.15rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

#profilePasswordTrigger {
  cursor: pointer;
  letter-spacing: 0.14em;
  font-family: var(--font-ui);
}

.budget-month-net,
.budgeted-display,
.budgeted-input,
.budget-total-row span:nth-child(2),
.account-amount-input,
.paycheck-table-amount,
.paycheck-today-remaining,
#itemModalAmount,
#itemModalDebtBalance,
#itemModalMinimumPayment,
#itemModalGoalAmount,
#itemModalExistingAmount,
#accountAmountModalAmount,
#emergencyFundModalExistingAmount,
#emergencyFundModalGoalAmount,
#paycheckBufferAmount {
  font-family: var(--font-amount);
}

.account-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.35rem;
}

.account-modal-updated-at {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.account-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.account-modal-actions button {
  margin-top: 0;
}

#profilePasswordTrigger:hover {
  background: #ffffff;
}

#profilePasswordTrigger:focus,
#profilePasswordTrigger:focus-visible {
  outline: 2px solid #bbf7d0;
  border-color: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
}

#profilePasswordTrigger::selection {
  background: transparent;
}

.referral-settings {
  margin-top: 0.2rem;
  padding: 0.65rem 0.05rem 0.4rem;
  display: grid;
  gap: 0.6rem;
}

.referral-settings-copy {
  display: grid;
  gap: 0.2rem;
}

.referral-settings-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.referral-settings-count {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}

.referral-code-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.referral-code-row button {
  margin-top: 0;
}

.referral-code-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  user-select: none;
}

.referral-code-box:hover {
  border-color: var(--accent);
}

.referral-code-text {
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--text);
  flex: 1;
  text-align: center;
}

.referral-copy-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.referral-share-button {
  flex-shrink: 0;
  margin-top: 0;
  padding: 0 0.5rem;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.referral-share-button:hover,
.referral-share-button:focus,
.referral-share-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.referral-share-icon {
  width: 38px;
  height: 38px;
  display: block;
}


.referral-copied-tooltip {
  position: fixed;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.4s ease;
  box-shadow: 0 4px 12px rgba(20, 128, 60, 0.3);
}

.referral-copied-tooltip.fade-out {
  opacity: 0;
}

.field-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85em;
}

.settings-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  align-items: center;
  padding-bottom: 0.75rem;
}

.settings-actions button {
  margin-top: 0.85rem;
}

.sign-out-button {
  background: #ef4444;
  min-width: 180px;
}

.sign-out-button:hover {
  background: #ef4444;
}

#profileMessage {
  min-height: 0;
  margin-top: 0;
}

#profileMessage:empty {
  display: none;
}

#profileMessage:not(:empty) {
  display: block;
  margin-top: 0.65rem;
}

.account-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  cursor: grab;
}

.account-card.dragging {
  opacity: 0.45;
}

.account-card.drop-marker-top {
  border-top: 4px solid var(--accent);
}

.account-card.drop-marker-bottom {
  border-bottom: 4px solid var(--accent);
}

.account-card.drop-gap-before {
  margin-top: var(--account-drop-gap);
}

.account-card.drop-gap-after {
  margin-bottom: var(--account-drop-gap);
}

.account-card h3 {
  margin: 0;
  font-size: 1rem;
}

.account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 58px;
}

.account-card + .account-card {
  margin-top: 0;
}

.accounts-grid .account-card {
  padding: 0.9rem 0.95rem;
}

.emergency-fund-progress-wrap {
  margin-top: 0.35rem;
}

.emergency-fund-progress-track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.emergency-fund-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #22c55e;
  transition: width 0.2s ease;
}

.credit-paydown-progress-wrap {
  margin-top: 0.35rem;
}

.credit-paydown-progress-track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.credit-paydown-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444 0%, #22c55e 100%);
  clip-path: inset(0 calc(100% - var(--credit-paydown-progress, 0%)) 0 0 round 999px);
  transition: clip-path 0.2s ease;
}

.account-name-cell,
.account-amount-cell {
  align-items: center;
}

.account-name-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
}

.account-name-display {
  appearance: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-weight: 600;
  font-size: 1.1rem;
  text-align: left;
  flex: 0 0 auto;
}

.account-name-display:hover {
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.account-name-display:focus,
.account-name-display:focus-visible {
  outline: none;
  box-shadow: none;
}

.account-name-mask-suffix {
  font-family: var(--font-ui);
  font-weight: 350;
  font-size: 0.92rem;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.linked-account-reconnect-button {
  margin-top: 0;
  padding: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.linked-account-reconnect-button:hover,
.linked-account-reconnect-button:focus,
.linked-account-reconnect-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.linked-account-reconnect-icon {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) saturate(100%) invert(49%) sepia(98%) saturate(1100%) hue-rotate(359deg) brightness(101%) contrast(105%);
}

/* .account-name-editor / .account-name-input lived here: 24 lines styling an
   inline rename box that was built hidden on every manual card and never once
   shown, because the function that would have shown it had no callers.
   Renaming goes through the account modal. [SA-26] */

.account-amount-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}

.account-amount-display {
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-family: var(--font-amount);
  font-size: 1.08rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.account-amount-display:hover {
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.account-amount-display:focus,
.account-amount-display:focus-visible {
  outline: none;
  box-shadow: none;
}

.account-amount-display-linked,
.account-amount-display-linked:hover,
.account-amount-display-linked:focus,
.account-amount-display-linked:focus-visible {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
  opacity: 1;
  cursor: default;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.account-amount-display-linked.account-amount-display-credit,
.account-amount-display-linked.account-amount-display-credit:hover,
.account-amount-display-linked.account-amount-display-credit:focus,
.account-amount-display-linked.account-amount-display-credit:focus-visible {
  color: var(--trash-red) !important;
  -webkit-text-fill-color: var(--trash-red);
}

.account-reconcile-indicator {
  margin-top: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.account-reconcile-indicator:hover,
.account-reconcile-indicator:focus,
.account-reconcile-indicator:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.account-reconcile-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.account-reconcile-match .account-reconcile-icon {
  filter: brightness(0) saturate(100%) invert(61%) sepia(79%) saturate(476%) hue-rotate(87deg) brightness(91%) contrast(89%);
}

.account-reconcile-too-much .account-reconcile-icon {
  filter: brightness(0) saturate(100%) invert(68%) sepia(71%) saturate(1599%) hue-rotate(10deg) brightness(96%) contrast(92%);
}

.account-reconcile-too-little .account-reconcile-icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(88%) saturate(1740%) hue-rotate(330deg) brightness(100%) contrast(88%);
}

.account-reconcile-tooltip {
  position: absolute;
  right: -6px;
  bottom: calc(100% + 8px);
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #111827;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  z-index: 25;
}

.account-reconcile-too-little .account-reconcile-tooltip {
  border-color: #fca5a5;
  background: #fef2f2;
}

.account-reconcile-indicator:hover .account-reconcile-tooltip,
.account-reconcile-indicator:focus .account-reconcile-tooltip,
.account-reconcile-indicator:focus-visible .account-reconcile-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-amount-editor {
  display: flex;
  align-items: center;
}

.account-amount-editor[hidden] {
  display: none;
}

.account-amount-input {
  width: 110px;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.account-amount-input:focus,
.account-amount-input:focus-visible {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}

.modal-form input:disabled {
  background: #e2e8f0;
  color: #64748b;
  cursor: not-allowed;
}

.modal-form input:disabled.account-modal-linked-amount {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
}

.remove-account-button {
  margin-top: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: var(--trash-red);
  justify-self: end;
}

.remove-account-button:hover {
  background: transparent;
}

.remove-account-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.account-expand-toggle {
  margin-top: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.account-expand-toggle:hover,
.account-expand-toggle:focus,
.account-expand-toggle:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.account-expand-icon {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.16s ease;
}

.account-card.expanded .account-expand-icon {
  transform: rotate(180deg);
}

.account-breakdown {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e2e8f0;
  display: grid;
  gap: 0;
}

.account-set-aside-tracked {
  margin-top: 0.4rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  align-items: center;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.035);
  color: var(--text-muted, #4b5563);
}

.account-set-aside-tracked[data-status="match"] {
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
}

.account-set-aside-tracked[data-status="too-much"] {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
}

.account-set-aside-tracked[data-status="too-little"] {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}

.account-set-aside-tracked-text {
  font-weight: 600;
}

.account-set-aside-tracked-drift {
  font-weight: 500;
}

.account-set-aside-tracked-action {
  margin-left: auto;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 0.4rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.account-set-aside-tracked-action:hover {
  background: rgba(255, 255, 255, 0.45);
}

.account-set-aside-pace {
  margin-top: 0.35rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 0.5rem;
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
}

.account-breakdown-pace-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  vertical-align: middle;
}

/* "not synced for 35 days" -- red, unlike the blue goal pill and the amber
   pace pill, because this one says the NUMBER BESIDE IT cannot be trusted
   rather than that something needs adjusting. [SYNC-1] */
.account-name-stale-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
  vertical-align: middle;
  white-space: nowrap;
}

/* "Needs $35.78/mo" -- the goal will not reach its target date at the amount
   currently being set aside. A DIFFERENT warning from the pace pill beside it,
   which is about a missed transfer, so it gets its own colour: blue reads as
   "adjust this", amber as "you are behind". [SA-32] */
/* The item modal's "you need $X/month" note and its approve button. Same blue
   as the accounts-card pill so the two read as the same warning. [SA-32] */
.item-modal-goal-pace-note {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d4ed8;
}

.item-modal-goal-pace-note[hidden] {
  display: none;
}

.item-modal-goal-pace-approve {
  border-color: rgba(37, 99, 235, 0.45);
  color: #1d4ed8;
}

/* The goal-pace line uses the same blue as its pill, so the summary and the
   rows it summarises read as one thing. [SA-32] */
.account-set-aside-goal-pace {
  color: #1d4ed8;
}

/* Dividing unallocated set-aside money across the goals that are short of
   their targets. [SA-31] The panel sits under the account's sub-line and is
   drawn from state, because renderAccounts() rebuilds the card on every
   change of mode. */
.account-set-aside-spread-action {
  margin-left: auto;
  font-weight: 600;
}

/* Without this the two actions each take an auto margin and drift apart across
   the free space instead of sitting together at the end of the row. */
.account-set-aside-spread-action + .account-set-aside-tracked-action {
  margin-left: 0.4rem;
}

.set-aside-spread-panel {
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 0.6rem;
  background: rgba(37, 99, 235, 0.06);
  color: #1e3a8a;
  font-size: 0.82rem;
}

.set-aside-spread-heading {
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.set-aside-spread-modes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.set-aside-spread-mode {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.set-aside-spread-mode input {
  cursor: pointer;
}

.set-aside-spread-preview {
  list-style: none;
  margin: 0 0 0.45rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.set-aside-spread-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

/* A goal this mode does not reach is dimmed rather than hidden: the user chose
   a mode, and seeing who it passed over is the point of showing a preview. */
.set-aside-spread-preview-row-empty {
  opacity: 0.6;
}

.set-aside-spread-preview-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.set-aside-spread-total {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.set-aside-spread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.set-aside-spread-apply,
.set-aside-spread-cancel {
  border-radius: 0.4rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.set-aside-spread-apply {
  border: 1px solid #22c55e;
  background: #22c55e;
  color: #ffffff;
  font-weight: 600;
}

.set-aside-spread-apply:disabled {
  opacity: 0.55;
  cursor: default;
}

.set-aside-spread-cancel {
  border: 1px solid rgba(30, 58, 138, 0.35);
  background: #ffffff;
  color: inherit;
}

.set-aside-spread-note {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  opacity: 0.8;
}

.account-breakdown-need-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  vertical-align: middle;
}

/* A goal that has reached its target. Green rather than the blue "Needs" pill
   or the amber pace pill, because this one is the only good news of the three
   -- and it is the design-system primary green, not a fourth invented one. */
.account-breakdown-funded-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
  vertical-align: middle;
}

.account-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.account-breakdown-total-row {
  margin-top: 0.2rem;
  padding-top: 0.55rem;
  border-top: 1px solid #d1d5db;
  border-bottom: none;
}

.account-breakdown-total-row .account-breakdown-item,
.account-breakdown-total-row .account-breakdown-amount {
  font-weight: 700;
}

.account-breakdown-item {
  color: var(--text);
  font-size: var(--budget-item-text-size);
  font-weight: 400;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-breakdown-category {
  display: none;
}

.account-breakdown-amount {
  color: var(--text);
  font-family: var(--font-amount);
  font-size: var(--budget-item-amount-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.account-breakdown-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.account-on-hold-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.account-on-hold-cleared-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.account-on-hold-cleared-checkbox {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.account-on-hold-total-spacer {
  width: 68px;
}

@media (max-width: 760px) {
  *,
  *::before,
  *::after {
    font-style: normal !important;
    font-variation-settings: 'slnt' 0 !important;
  }

  .app-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .app-sidebar,
  .app-shell[data-auth-page] .app-sidebar {
    position: fixed;
    inset: auto;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: 0.6rem 0.5rem;
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
  }

  .app-brand {
    display: none;
  }

  .app-main {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: calc((100vw - 7rem) / 5 + 3rem + max(0.6rem, env(safe-area-inset-bottom)));
  }

  .app-nav,
  .app-shell[data-auth-page] .app-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: var(--page-bg-gradient);
    border-radius: 999px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.13), 0 0 8px rgba(0, 0, 0, 0.07);
    position: static;
    top: auto;
    left: auto;
    transform: none;
    pointer-events: auto;
    box-sizing: border-box;
  }

  .app-shell[data-auth-page] .app-nav a {
    transform-origin: center center;
  }

  .app-nav a {
    flex: 1;
    width: auto;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
  }

  .app-nav a:hover,
  .app-nav a:focus-visible {
    width: auto;
  }

  .app-nav a::after {
    display: none;
  }

  .app-nav a:hover .app-nav-icon,
  .app-nav a:focus-visible .app-nav-icon {
    opacity: 1;
    transform: scale(1);
  }

  .app-nav-icon {
    width: 32px;
    height: 32px;
  }

  .paycheck-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .paycheck-table-header,
  .paycheck-table-row,
  .paycheck-skeleton-row {
    grid-template-columns: minmax(0, 1fr) 106px 90px;
    gap: 0.45rem;
  }

  .paycheck-items-card {
    --paycheck-card-side-padding: 0.5rem;
    padding: 0.5rem;
    border-radius: 18px;
  }

  .paycheck-items-list {
    --paycheck-thermo-side-gap: 0.5rem;
  }

  .paycheck-table-row {
    padding: 0.5rem;
  }

  .timeline-items-card {
    padding: 0.5rem;
    border-radius: 18px;
    gap: 5px;
  }

  .todo-card-list {
    gap: 5px;
  }

  .todo-card {
    padding: 0.5rem;
    border-radius: 10px;
  }

  .transactions-table-header,
  .transactions-row,
  .transactions-skeleton-row {
    grid-template-columns: minmax(0, 1fr) 106px 90px;
    gap: 0.45rem;
  }

  .transactions-card {
    padding: 0.5rem;
    border-radius: 18px;
  }

  .transactions-row {
    row-gap: 0.3rem;
    align-items: center;
    padding: 0.5rem;
  }

  .transactions-row .transactions-title-cell {
    display: contents;
  }

  .transactions-row .transactions-name {
    grid-column: 1;
    grid-row: 1;
  }

  .transactions-row .transactions-date {
    grid-column: 2;
    grid-row: 1;
  }

  .transactions-row .transactions-amount {
    grid-column: 3;
    grid-row: 1;
  }

  .transactions-row .transactions-meta-row {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: space-between;
  }

  .transactions-row .txn-split-pills {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
  }

  .transactions-row .transactions-category-tag-pill,
  .transactions-row .txn-suggestion-pill {
    flex-shrink: 1;
    min-width: 0;
  }

  /* Touch target: 22px is fine for a mouse, too small for a thumb, and this
     button sits inside a row that is itself a tap target for categorizing. */
  .transactions-row .txn-manual-edit {
    width: 32px;
    height: 32px;
  }

  .transactions-row .txn-manual-edit img {
    width: 15px;
    height: 15px;
  }

  .paycheck-today-label {
    font-size: 1rem;
    padding: 0.24rem 0.72rem;
    line-height: 1;
  }

  .paycheck-table-date,
  .paycheck-table-name,
  .paycheck-table-amount {
    font-size: 0.96rem;
  }

  .transactions-date,
  .transactions-name,
  .transactions-amount {
    font-size: 0.96rem;
  }

  .paycheck-today-remaining {
    font-size: 1.2rem;
    padding: 0.28rem 0;
    line-height: 1;
  }

  .app-shell[data-auth-page] .app-main {
    --app-header-top: 6px;
    --header-logo-height: 76px;
  }

  .budget-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .budget-header-main,
  .paycheck-header-main {
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
  }

  #budgetMonthNet {
    order: -1;
    width: 100%;
    text-align: right;
    margin-left: 0;
    margin-bottom: 0;
    font-size: 3rem !important;
    font-style: normal;
    font-variation-settings: 'slnt' 0;
  }

  .budget-header {
    margin-bottom: 1rem;
  }

  .budget-month-nav {
    margin-left: auto;
    margin-top: 0;
  }

  .budget-item,
  .budget-item-columns {
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
  }

  .budgeted-input {
    width: 88px;
  }

  .accounts-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-row {
    grid-template-columns: minmax(0, 1fr) 94px auto;
    gap: 0.4rem;
  }

  .account-amount-input {
    width: 90px;
  }
}

/* ─── Income Interval Scheduling ─────────────────────────────────────── */

.income-interval-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.income-interval-section[hidden] {
  display: none;
}

.income-interval-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.income-interval-section-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.income-interval-add-button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0;
}

.income-interval-add-button:hover {
  background: #f0fdf4;
}

.interval-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.interval-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.4rem 0.5rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f9fafb;
  align-items: center;
}

.interval-type-select {
  grid-column: 1 / -1;
  grid-row: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 2rem 0.45rem 0.65rem;
  font-size: 0.92rem;
  color: var(--text);
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5.5 L7 9 L11 5.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

.interval-remove-button {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0;
}

.interval-remove-button:hover,
.interval-remove-button:focus,
.interval-remove-button:focus-visible {
  background: transparent;
  outline: none;
}

.interval-remove-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.interval-conditionals {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.interval-sub-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.interval-dow-select,
.interval-anchor-select,
.interval-dom-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 2rem 0.35rem 0.55rem;
  font-size: 0.88rem;
  color: var(--text);
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5.5 L7 9 L11 5.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.9rem;
  appearance: none;
  -webkit-appearance: none;
}

.income-interval-modal-card {
  max-width: 520px;
}

.income-interval-modal-card .income-interval-section {
  margin-bottom: 0.8rem;
}

.modal-form .income-interval-add-button {
  margin-top: 0;
}

/* ============================================================
 * MODERN REFRESH (design-system pass) — appended override layer.
 * Same palette; airier radii, subtle elevation, cleaner focus.
 * Targets shared primitives so every screen modernizes at once.
 * Reversible: delete this block to restore the prior look.
 * ============================================================ */
:root {
  --kit-radius-card: 16px;
  --kit-radius-input: 12px;
  --kit-radius-modal: 20px;
  --kit-border: rgba(15, 23, 42, 0.08);
  --kit-border-strong: rgba(15, 23, 42, 0.12);
  --kit-row-divider: rgba(15, 23, 42, 0.06);
  --color-neutral-50: #f9fafb;  /* secondary-button hover surface */
  --color-neutral-100: #f5f7fb; /* subtle neutral surface — pills / count badges */
  --kit-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
  --kit-shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

@keyframes kit-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kit-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Cards: softer radius + subtle elevation ─────────────── */
.budget-group,
.timeline-items-card,
.transactions-card,
.settings-card,
.account-card {
  border-radius: var(--kit-radius-card);
  border-color: var(--kit-border);
  box-shadow: var(--kit-shadow-card);
}

/* ── Buttons: light brand green, lighter weight, no focus ring ── */
button {
  background: var(--success);
  font-weight: 600;
}
.auth-form button[type="submit"],
.modal-actions button:not(.modal-secondary):not(.modal-danger) {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 4px 10px -2px rgba(34, 197, 94, 0.40);
}
.auth-form button[type="submit"]:hover,
.modal-actions button:not(.modal-secondary):not(.modal-danger):hover {
  background: #16a34a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 14px -2px rgba(34, 197, 94, 0.50);
}
/* [FA-H20] Keyboard focus must be visible (WCAG 2.4.7). The "modern refresh"
   removed the outline from :focus AND :focus-visible, which took the ring away
   from every button in the app — a keyboard user could not tell what was
   focused. Splitting the two restores the ring for keyboard navigation while
   keeping mouse clicks ringless, which is what the original rule was actually
   trying to achieve. Components that paint their own focus ring still win on
   specificity and are unaffected. */
button:focus {
  outline: none;
}
button:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

/* ── Inputs / selects: clean green focus, no halo ────────── */
input {
  border-radius: var(--kit-radius-input);
}
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--success);
}

/* ── Modal: blurred scrim, larger radius, pop-in, divider ── */
.modal-overlay {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  animation: kit-fade-in 0.18s ease-out;
}
.modal-card {
  border-radius: var(--kit-radius-modal);
  border-color: var(--kit-border);
  box-shadow: 0 30px 80px -10px rgba(15, 23, 42, 0.30), 0 8px 24px -6px rgba(15, 23, 42, 0.12);
  animation: kit-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-actions {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kit-row-divider);
}

/* ── Nav bubbles: softer glow (geometry unchanged) ───────── */
.app-nav a {
  box-shadow: 0 4px 12px -4px rgba(34, 197, 94, 0.40), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.app-nav a:hover,
.app-nav a.active,
.app-nav a:focus-visible {
  box-shadow: 0 8px 20px -4px rgba(20, 128, 60, 0.40);
}

/* ── Money: always light brand green (negatives stay red) ── */
.budget-month-net-positive,
.budget-month-net-neutral {
  color: var(--success);
}

/* ── Progress: slimmer tracks; green = goal, blue = paydown ── */
.emergency-fund-progress-track,
.credit-paydown-progress-track {
  height: 6px;
}
.emergency-fund-progress-fill {
  background: linear-gradient(90deg, #22c55e 0%, #14803c 100%);
}
.credit-paydown-progress-fill {
  background: linear-gradient(90deg, #0ea5e9 0%, #0369a1 100%);
}

/* ── Suggestion pill: sky-blue (replaces yellow/brown) ───── */
.txn-suggestion-pill {
  background: #e0f2fe;
  color: #0369a1;
}
.txn-suggestion-pill:hover,
.txn-suggestion-pill:focus,
.txn-suggestion-pill:active {
  background: #d4ecfc;
  color: #0369a1;
}
.txn-suggestion-pill::before {
  content: "\2726";
  margin-right: 0.25rem;
  font-weight: 800;
}

/* ============================================================
 * PAGE STRUCTURE (refresh) — eyebrows, summary bands, etc.
 * ============================================================ */

/* Eyebrow above a page title */
.page-eyebrow {
  max-width: 760px;
  margin: 0 auto 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Summary stat band (Budget / Transactions / Accounts) */
.summary-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto 1.25rem;
}
.summary-card {
  background: var(--card);
  border: 1px solid var(--kit-border);
  border-radius: var(--kit-radius-card);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--kit-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.summary-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.summary-card-value {
  font-family: var(--font-amount);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}
.summary-card-value.pos { color: var(--success); }
.summary-card-value.neg { color: var(--trash-red); }
.summary-card-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.summary-card.hero {
  background: linear-gradient(135deg, #14803c 0%, #166534 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(20, 128, 60, 0.35);
}
.summary-card.hero .summary-card-label { color: rgba(255, 255, 255, 0.72); }
.summary-card.hero .summary-card-value { color: #fff; font-size: 2.4rem; }
.summary-card.hero .summary-card-sub { color: rgba(255, 255, 255, 0.8); }
/* "N accounts unavailable", under a total the app could not fully compute.
   Amber, not red: the figure is INCOMPLETE, not wrong, and there is nothing
   the user can do about a bank that stopped answering -- a red alarm on a
   number nobody can act on is the mistake the credit-card badge already
   taught us. Two shades because the hero card is a dark green gradient and
   the plain card is light. [SA-28] */
.summary-card-sub-warning { color: #b45309; font-weight: 600; }
.summary-card.hero .summary-card-sub-warning { color: #fde68a; font-weight: 600; }

@media (max-width: 640px) {
  .summary-band { grid-template-columns: 1fr; }
}

/* Budget: net now lives in the hero summary card */
.budget-header #budgetMonthNet { display: none; }

/* ============================================================
 * BUDGET HEADER REDESIGN — "Allocation Meter" (Direction 2)
 * Bigger centered logo · month chip with crescent arrows ·
 * one allocation panel with a planned-vs-income meter.
 * Scoped to the budget page (.budget-page-main).
 * ============================================================ */

/* Bigger centered logo. The shared header band height + top padding both
   derive from --header-logo-height via var(), so overriding it here grows
   the band to fit the larger mark — budget page only. Desktop only; mobile
   keeps the compact 76px logo set in the max-width:760px block above. */
/* Hero logo: a cropped SVG (transparent padding removed) shown in-flow, so the
   logo→pill gap is an exact margin instead of leftover header-band whitespace.
   The shared ::before band logo is suppressed on this page. */
.app-shell[data-auth-page] .hero-main::before {
  display: none;
}
/* Start the column at the same top offset as the profile image (which is
   positioned at --app-header-top), so the logo top and the avatar top align. */
.app-shell[data-auth-page] .hero-main {
  padding-top: var(--app-header-top);
}
.app-shell[data-auth-page] .hero-main > .budget-hero-logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 1.4rem;
  transition: opacity 0.15s ease;
}
.budget-hero-logo > img {
  display: block;
  width: 100%;
  height: auto;
}
.budget-hero-logo:hover,
.budget-hero-logo:focus-visible {
  opacity: 0.85;
}
@media (min-width: 761px) {
  .app-shell[data-auth-page] .hero-main > .budget-hero-logo {
    width: 175px;
  }
}

/* Month selector — centered pill (budget + the carried-over month pages) */
.hero-main .budget-header-main,
.hero-main .paycheck-header-main {
  justify-content: center;
}
/* The carried-over headers had a 1rem bottom margin; the chip's own 1.4rem
   margin now owns that gap, so drop the header margin to match budget. */
.hero-main .paycheck-header {
  margin-bottom: 0;
}
.budget-month-chip {
  margin: 0 auto 1.4rem;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--card);
  border: 1px solid var(--kit-border);
  border-radius: 999px;
  padding: 0.45rem;
  box-shadow: var(--kit-shadow-card);
  transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.budget-month-chip-button {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-neutral-100);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* While the user is rapidly flipping months the pill resizes and the button
   slides out from under a stationary cursor. This invisible expanded hit zone
   keeps the next click landing; it's added on click and removed ~0.7s after the
   last one (see app.js). */
.budget-month-chip--live .budget-month-chip-button {
  z-index: 3;
}
.budget-month-chip--live .budget-month-chip-button::after {
  content: "";
  position: absolute;
  inset: -18px -54px;
  border-radius: 999px;
}
.budget-month-chip-button:hover,
.budget-month-chip-button:focus,
.budget-month-chip-button:focus-visible {
  background: var(--color-neutral-100);
  outline: none;
}
.budget-month-chip-button:disabled {
  cursor: default;
}
.budget-month-chip-icon {
  width: 36px;
  height: 36px;
  display: block;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M10.38 23.84 A9.6 9.6 0 0 1 10.38 12.16' fill='none' stroke='black' stroke-width='5.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M10.38 23.84 A9.6 9.6 0 0 1 10.38 12.16' fill='none' stroke='black' stroke-width='5.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.budget-month-chip-button:disabled .budget-month-chip-icon {
  /* Grayed out at the first/last available month — neutral-400 "disabled". */
  background-color: #94a3b8;
}
.budget-month-chip-icon-forward {
  transform: scaleX(-1);
}
/* The month label is the existing inline month/year picker — shrink it to fit
   the pill; its buttons use font:inherit so they follow along. */
.budget-month-chip #budgetMonth,
.budget-month-chip #paycheckMonth,
.budget-month-chip #transactionsMonth,
.budget-month-chip #timelineTitle {
  font-size: 1.2rem !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
}
/* The label rolls in from the direction of travel as the month changes. */
.budget-month-chip .budget-month-flip-next {
  animation: budget-month-flip-in-next 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.budget-month-chip .budget-month-flip-prev {
  animation: budget-month-flip-in-prev 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes budget-month-flip-in-next {
  from { opacity: 0; transform: translateX(34%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes budget-month-flip-in-prev {
  from { opacity: 0; transform: translateX(-34%); }
  to   { opacity: 1; transform: translateX(0); }
}
/* The label shrank to 1.2rem, so the year slot is narrow; let its dropdown size
   to the year options instead of being clipped to the slot width. */
.budget-month-chip .planning-month-inline-slot-year .planning-month-inline-menu-year {
  width: max-content;
  min-width: 100%;
  max-width: none;
  padding: 0.25rem;
}
.budget-month-chip .planning-month-inline-option-year {
  padding: 0.45rem 0.9rem;
}

/* Allocation widget — single panel */
.allocation-widget {
  max-width: 760px;
  margin: 0 auto 1.4rem;
  background: var(--card);
  border: 1px solid var(--kit-border);
  border-radius: 22px;
  padding: 1.6rem 1.7rem;
  box-shadow: var(--kit-shadow-card);
}
.allocation-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.allocation-big {
  font-family: var(--font-amount);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--success);
  margin: 0 0 0.2rem;
}
.allocation-big.is-negative {
  color: var(--danger);
}
.allocation-status {
  margin: 0 0 1.3rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.allocation-status .ok {
  color: var(--accent);
  font-weight: 700;
}
.allocation-status .warn {
  color: var(--danger);
  font-weight: 700;
}
.allocation-meter {
  height: 12px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.allocation-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #14803c);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.allocation-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
}
.allocation-leg .k {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.allocation-leg .v {
  font-family: var(--font-amount);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
}
.allocation-leg:last-child {
  text-align: right;
}
.allocation-leg .v.pos {
  color: var(--success);
}

/* The first budget group's insert-row (a 14px edit-mode affordance) otherwise
   stacks on top of the panel's 1.4rem margin, making the panel→groups gap
   larger than the logo→pill and pill→panel gaps. Collapse it outside edit mode
   so all three gaps read as the same 1.4rem. */
.budget-groups:not(.edit-mode-on) .budget-group-slot:first-child .group-insert-row {
  height: 0;
}

@media (max-width: 640px) {
  .allocation-big { font-size: 2.8rem; }
}

/* Mobile: tighten the budget header rhythm so the logo → pill → panel → groups
   gaps match the budget-group card gap (the 14px insert-row) instead of the
   roomier 1.4rem used on desktop. Budget page only. */
@media (max-width: 760px) {
  .app-shell[data-auth-page] .budget-page-main.hero-main > .budget-hero-logo {
    margin-bottom: 14px;
  }
  /* The general mobile block also gives .budget-header a 1rem bottom margin,
     which stacked on top of the chip's margin under the month selector. Zero it
     so the chip's 14px is the only gap below the pill. */
  .app-shell[data-auth-page] .budget-page-main .budget-header {
    margin-bottom: 0;
  }
  .app-shell[data-auth-page] .budget-page-main .budget-month-chip {
    margin-bottom: 14px;
  }
  .app-shell[data-auth-page] .budget-page-main .allocation-widget {
    margin-bottom: 14px;
  }
}

/* Transactions: equal-column band (no hero) + sky-blue pending rows */
.summary-band.equal {
  grid-template-columns: repeat(3, 1fr);
}
.transactions-row-pending {
  background: linear-gradient(to right, rgba(224, 242, 254, 0.7), transparent);
  border-color: rgba(14, 165, 233, 0.35);
}
.transactions-row-pending:hover {
  background: linear-gradient(to right, rgba(224, 242, 254, 0.95), rgba(249, 251, 254, 0.6));
}

/* Accounts: full-width Total balance hero */
.account-total-hero {
  margin-bottom: 1.25rem;
}

/* Timeline: modern todo cards + completed-count pill */
.todo-card {
  box-shadow: var(--kit-shadow-card);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.todo-card:hover {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.04);
}
.todo-completed-count {
  background: var(--color-neutral-100);
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Welcome: onboarding tiles */
.welcome-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 760px;
  margin: 1.25rem auto 0;
}
.welcome-tile {
  display: grid;
  gap: 0.3rem;
  padding: 1.25rem 1.35rem;
  background: var(--card);
  border: 1px solid var(--kit-border);
  border-radius: var(--kit-radius-card);
  box-shadow: var(--kit-shadow-card);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.welcome-tile:hover {
  border-color: var(--success);
  box-shadow: var(--kit-shadow-card-hover);
  transform: translateY(-1px);
}
.welcome-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.10);
  display: inline-grid;
  place-items: center;
  margin-bottom: 0.35rem;
}
.welcome-tile-icon img { width: 22px; height: 22px; }
.welcome-tile-title {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
}
.welcome-tile-sub {
  color: var(--muted);
  font-size: 0.88rem;
}
@media (max-width: 640px) {
  .welcome-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   AI Transaction Search — pill input wearing the AI chat
   button's color-shifting glow + sparkle stars, a typewriter
   placeholder, a filter banner, and All/Categorized/Needs-Review
   tabs. Ported from the Claude Design "Transaction Search"
   handoff (variant B). The transaction row layout is left
   intentionally untouched — this is all list chrome.
   ============================================================ */
.txn-ai-search-wrap {
  max-width: var(--app-content-max-width);
  margin: 0 auto 1.1rem;
}

.ai-search {
  position: relative;
  border-radius: 999px;
  isolation: isolate;
}

/* ── Constellation track glow (palette from the AI chat button) ── */
.ai-lava {
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  overflow: hidden;
  z-index: -2;
  filter: blur(8px) saturate(1.4);
  opacity: 0.4;                /* dim on standby */
  pointer-events: none;
  transition: inset 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
}
/* A rainbow rendered in a SQUARE (even radial spread), rotated cleanly in
   local space, THEN stretched across the pill width. Because rotate is the
   innermost transform, the cone spins evenly and the stretch spreads color
   across the bar — colors travel around top & bottom in opposite directions,
   like an excavator track. */
.ai-lava .lava-cone {
  position: absolute;
  top: 50%; left: 50%;
  width: 130px; height: 130px;
  background: conic-gradient(from 0deg at 50% 50%,
      #22c55e, #2dd4bf, #38bdf8, #14803c, #ef4444,
      #fbbf24, #2dd4bf, #22c55e);
  transform: translate(-50%, -50%) scaleX(8.5) scaleY(0.85) rotate(0deg);
  animation: ai-track-spin 7s linear infinite;
}
@keyframes ai-track-spin {
  to { transform: translate(-50%, -50%) scaleX(8.5) scaleY(0.85) rotate(360deg); }
}

/* crisp gradient ring so the input edge stays clean over the glow */
.ai-search::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(105deg, rgba(34,197,94,0.95), rgba(45,212,191,0.85), rgba(56,189,248,0.85), rgba(34,197,94,0.95));
  background-size: 220% 220%;
  opacity: 0.4;                /* dim on standby */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  animation: ai-drift-ring 9s ease-in-out infinite;
  transition: opacity 0.5s ease;
}
.ai-search:focus-within .ai-lava, .ai-search.is-active .ai-lava { inset: -9px; opacity: 1; filter: blur(10px) saturate(1.6); }
.ai-search:focus-within .lava-cone, .ai-search.is-active .lava-cone { animation-duration: 4s; }
.ai-search:focus-within::after, .ai-search.is-active::after { opacity: 1; animation-duration: 5.5s; }
.ai-search.busy .ai-lava { inset: -10px; opacity: 1; filter: blur(11px) saturate(1.7); }
.ai-search.busy .lava-cone { animation-duration: 2.4s; }
.ai-search.busy::after { opacity: 1; animation-duration: 3.2s; }

@keyframes ai-drift-ring {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ai-search-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card);
  border-radius: 999px;
  padding: 0.8rem 0.85rem 0.8rem 1.05rem;
}
.ai-spark {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  display: grid; place-items: center;
}
.ai-spark svg { width: 26px; height: 26px; display: block; overflow: visible; }
/* exact twinkle motion from the chat button; stars locked to brand green */
.spk-s1, .spk-s2 { transform-origin: center; transform-box: fill-box; fill: var(--success); }
.spk-s1 { animation: c-tw-big 11s linear infinite; }
.spk-s2 { animation: c-tw-small 9s linear infinite; }
@keyframes c-tw-big {
  0% { opacity:0.920; transform: translate(3.90px, 9.34px) rotate(2.89deg) scale(1.129); }
  4.17% { opacity:0.960; transform: translate(6.25px, 6.87px) rotate(3.00deg) scale(1.129); }
  8.33% { opacity:0.989; transform: translate(7.39px, 4.13px) rotate(2.90deg) scale(1.121); }
  12.50% { opacity:1.000; transform: translate(7.45px, 2.33px) rotate(2.61deg) scale(1.108); }
  16.67% { opacity:0.989; transform: translate(6.78px, 1.91px) rotate(2.14deg) scale(1.092); }
  20.83% { opacity:0.960; transform: translate(5.86px, 2.31px) rotate(1.52deg) scale(1.079); }
  25% { opacity:0.920; transform: translate(5.10px, 2.37px) rotate(0.80deg) scale(1.071); }
  29.17% { opacity:0.880; transform: translate(4.77px, 1.04px) rotate(0.03deg) scale(1.071); }
  33.33% { opacity:0.851; transform: translate(4.90px, -1.91px) rotate(-0.75deg) scale(1.079); }
  37.50% { opacity:0.840; transform: translate(5.28px, -5.68px) rotate(-1.48deg) scale(1.092); }
  41.67% { opacity:0.851; transform: translate(5.51px, -8.86px) rotate(-2.10deg) scale(1.108); }
  45.83% { opacity:0.880; transform: translate(5.17px, -10.22px) rotate(-2.58deg) scale(1.121); }
  50% { opacity:0.920; transform: translate(3.90px, -9.34px) rotate(-2.89deg) scale(1.129); }
  54.17% { opacity:0.960; transform: translate(1.59px, -6.87px) rotate(-3.00deg) scale(1.129); }
  58.33% { opacity:0.989; transform: translate(-1.61px, -4.13px) rotate(-2.90deg) scale(1.121); }
  62.50% { opacity:1.000; transform: translate(-5.28px, -2.33px) rotate(-2.61deg) scale(1.108); }
  66.67% { opacity:0.989; transform: translate(-8.81px, -1.91px) rotate(-2.14deg) scale(1.092); }
  70.83% { opacity:0.960; transform: translate(-11.53px, -2.31px) rotate(-1.52deg) scale(1.079); }
  75% { opacity:0.920; transform: translate(-12.90px, -2.37px) rotate(-0.80deg) scale(1.071); }
  79.17% { opacity:0.880; transform: translate(-12.61px, -1.04px) rotate(-0.03deg) scale(1.071); }
  83.33% { opacity:0.851; transform: translate(-10.68px, 1.91px) rotate(0.75deg) scale(1.079); }
  87.50% { opacity:0.840; transform: translate(-7.45px, 5.68px) rotate(1.48deg) scale(1.092); }
  91.67% { opacity:0.851; transform: translate(-3.49px, 8.86px) rotate(2.10deg) scale(1.108); }
  95.83% { opacity:0.880; transform: translate(0.51px, 10.22px) rotate(2.58deg) scale(1.121); }
  100% { opacity:0.920; transform: translate(3.90px, 9.34px) rotate(2.89deg) scale(1.129); }
}
@keyframes c-tw-small {
  0% { opacity:0.920; transform: translate(0.00px, 21.00px) rotate(0.00deg) scale(0.680); }
  4.17% { opacity:0.960; transform: translate(8.71px, 18.73px) rotate(1.04deg) scale(0.705); }
  8.33% { opacity:0.989; transform: translate(16.01px, 12.99px) rotate(2.00deg) scale(0.723); }
  12.50% { opacity:1.000; transform: translate(20.83px, 6.36px) rotate(2.83deg) scale(0.730); }
  16.67% { opacity:0.989; transform: translate(22.60px, 1.50px) rotate(3.46deg) scale(0.723); }
  20.83% { opacity:0.960; transform: translate(21.44px, -0.36px) rotate(3.86deg) scale(0.705); }
  25% { opacity:0.920; transform: translate(18.00px, -0.00px) rotate(4.00deg) scale(0.680); }
  29.17% { opacity:0.880; transform: translate(13.34px, 0.36px) rotate(3.86deg) scale(0.655); }
  33.33% { opacity:0.851; transform: translate(8.57px, -1.50px) rotate(3.46deg) scale(0.637); }
  37.50% { opacity:0.840; transform: translate(4.63px, -6.36px) rotate(2.83deg) scale(0.630); }
  41.67% { opacity:0.851; transform: translate(1.99px, -12.99px) rotate(2.00deg) scale(0.637); }
  45.83% { opacity:0.880; transform: translate(0.61px, -18.73px) rotate(1.04deg) scale(0.655); }
  50% { opacity:0.920; transform: translate(0.00px, -21.00px) rotate(0.00deg) scale(0.680); }
  54.17% { opacity:0.960; transform: translate(-0.61px, -18.73px) rotate(-1.04deg) scale(0.705); }
  58.33% { opacity:0.989; transform: translate(-1.99px, -12.99px) rotate(-2.00deg) scale(0.723); }
  62.50% { opacity:1.000; transform: translate(-4.63px, -6.36px) rotate(-2.83deg) scale(0.730); }
  66.67% { opacity:0.989; transform: translate(-8.57px, -1.50px) rotate(-3.46deg) scale(0.723); }
  70.83% { opacity:0.960; transform: translate(-13.34px, 0.36px) rotate(-3.86deg) scale(0.705); }
  75% { opacity:0.920; transform: translate(-18.00px, 0.00px) rotate(-4.00deg) scale(0.680); }
  79.17% { opacity:0.880; transform: translate(-21.44px, -0.36px) rotate(-3.86deg) scale(0.655); }
  83.33% { opacity:0.851; transform: translate(-22.60px, 1.50px) rotate(-3.46deg) scale(0.637); }
  87.50% { opacity:0.840; transform: translate(-20.83px, 6.36px) rotate(-2.83deg) scale(0.630); }
  91.67% { opacity:0.851; transform: translate(-16.01px, 12.99px) rotate(-2.00deg) scale(0.637); }
  95.83% { opacity:0.880; transform: translate(-8.71px, 18.73px) rotate(-1.04deg) scale(0.655); }
  100% { opacity:0.920; transform: translate(-0.00px, 21.00px) rotate(-0.00deg) scale(0.680); }
}

/* the input itself — strip the app's default input chrome so only the pill shows */
.ai-search input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  min-width: 0;
}
.ai-search input:focus, .ai-search input:focus-visible {
  outline: none; box-shadow: none; border: none;
}
.ai-search input::placeholder { color: var(--muted); font-weight: 500; }

/* typewriter overlay sits over the empty input */
.type-ph {
  position: absolute;
  left: calc(1.05rem + 26px + 0.7rem);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 1.05rem - 26px - 0.7rem - 3rem);
}
.type-ph .tp-q { color: var(--muted); }
.type-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin: 0 1px -0.16em 1px;
  background: var(--accent);
  animation: type-blink 1s steps(1) infinite;
}
@keyframes type-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.ai-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: none;
  border-radius: 999px;
  background: var(--success); /* primary action — light green, per the button rollout */
  display: grid; place-items: center;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: background 0.15s ease, transform 0.08s ease;
}
.ai-send:hover { background: #16a34a; }
.ai-send:active { transform: scale(0.94); }
.ai-send svg { width: 17px; height: 17px; }

/* The `hidden` attribute must win over these elements' own `display` values —
   author `display:` otherwise beats the UA `[hidden]{display:none}` rule, which
   would leak an empty green banner / a resting send button / an empty tab bar. */
.ai-send[hidden],
.filter-banner[hidden],
.group-tabs[hidden] { display: none; }

/* ── Active filter banner ─────────────────────────────────── */
.filter-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem 0.55rem 0.85rem;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 12px;
  font-size: 0.86rem;
  color: var(--accent);
  font-weight: 600;
}
.filter-banner .fb-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.filter-banner .fb-text { flex: 1 1 auto; color: var(--text); font-weight: 500; }
.filter-banner .fb-text b { color: var(--accent); font-weight: 700; }
.filter-banner .fb-clear {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-family: var(--font-ui);
  font-size: 0.8rem; font-weight: 700;
  margin: 0;
  padding: 0.25rem 0.5rem; border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.filter-banner .fb-clear:hover { background: rgba(15, 23, 42, 0.06); color: var(--text); }

/* ── List tabs (All / Categorized / Needs Review) ─────────── */
.group-tabs {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--kit-row-divider);
}
.group-tab {
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  margin: 0;
  padding: 0.55rem 0.75rem 0.7rem;
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 0.15s ease;
}
.group-tab:hover { color: var(--text); }
.group-tab.active { color: var(--accent); }
.group-tab.active::after {
  content: ""; position: absolute; left: 0.55rem; right: 0.55rem; bottom: -1px;
  height: 2.5px; border-radius: 999px; background: var(--accent);
}
.group-tab .tab-badge {
  font-family: var(--font-amount);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem; font-weight: 700;
  background: var(--color-neutral-100);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}
.group-tab.active .tab-badge { background: rgba(34, 197, 94, 0.14); color: var(--accent); }

/* ── Plan picker (Account Settings → Subscription) ────────────────── */
/* Two tiers side by side, stacking on narrow screens. Uses the existing
   card/border/accent tokens so it reads as part of the settings stack rather
   than a bolted-on pricing page. */
.plan-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.plan-option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.875rem;
  background: var(--card);
}

.plan-option[data-current="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.plan-option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.plan-option-name {
  font-weight: 700;
  color: var(--text);
}

.plan-option-price {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.plan-option-features {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.plan-option-features li + li {
  margin-top: 0.2rem;
}

.plan-option-current {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

.plan-option button {
  margin-top: auto;
  width: 100%;
}

/* Hint under the current-password field that appears when the email is edited. */
.field-hint {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* [FA-H20] The pill's own :hover/:focus/:active rule sets outline:none, which
   outranks the global button:focus-visible on specificity — so it needs its own
   ring. Its focus styling is otherwise identical to hover, meaning a keyboard
   user could not distinguish "focused" from "the mouse is over it". */
.txn-suggestion-pill:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [TD] prefers-reduced-motion — respect the OS "reduce motion" setting.
   ═══════════════════════════════════════════════════════════════════════════
   Until now the app had no reduced-motion support at all: the swoosh, the
   month flip, the modal pop, the confetti burst and four infinite loops ran
   for everyone. A user who has set "reduce motion" is not expressing a taste;
   they are telling us that movement makes them ill (vestibular disorder,
   migraine, motion sensitivity).

   Three rules govern everything below.

   1. MOTION GOES, STATE STAYS. Transforms, and anything that moves geometry
      (width / height / max-height / clip-path / inset), are removed. Opacity,
      colour, border, box-shadow and filter transitions are LEFT ALONE — they
      carry meaning (hover, focus, selected, disabled) and are not motion.
      That is why the rules below re-declare a shortened `transition` list
      rather than blanket-zeroing `transition-duration`.

   2. NEVER `transition: none` AND NEVER A 0s DURATION. Per spec a zero-length
      transition does not run, so `transitionend` never fires. The referral
      "Copied!" tooltip (public/app.js, showCopiedTooltip) removes itself from
      the DOM *only* from its `transitionend` handler and has no fallback
      timer — zeroing it would strand a tooltip on screen forever, one per
      copy. Where a duration must be collapsed we use 0.01ms, which is
      non-zero, so the event still fires.

   3. ANIMATIONS THAT JS WAITS ON KEEP THEIR NAME AND A NON-ZERO DURATION.
      Two `animationend` handlers depend on a specific animation: the paycheck
      confetti removes each piece, and the to-do swoosh (which does have a
      safety timeout) checks `event.animationName === "todoCardSwooshOut"`.
      Renaming or disabling those would leak DOM nodes, so they are shortened
      to 1ms and their transforms are cancelled with `!important` instead —
      `!important` is the only thing that outranks a running animation, and
      the only thing that outranks the inline duration JS writes on confetti.

   This block is last in the file on purpose: every selector below matches its
   original at equal specificity, so source order is what makes it win.

   NOT FIXABLE HERE (JS-driven, tracked separately): the paycheck "today
   sweep" is a requestAnimationFrame loop that writes inline transforms and
   calls window.scrollTo() on every frame, and chat-widget.js scrolls with an
   explicit {behavior:"smooth"}. CSS cannot reach either one.
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Guard: nothing sets smooth scrolling in CSS today, and nothing should. */
  html {
    scroll-behavior: auto;
  }

  /* ── 1. Infinite decorative loops — stopped outright ──────────────────
     Nothing observes these and they never end, which makes them the worst
     offenders: continuous movement in the corner of the eye for as long as
     the page is open. */
  .skeleton-block {
    animation: none;
  }

  /* The AI search widget: its spinning colour track, drifting ring and
     twinkling stars are stopped, but every rule and every opacity value is
     left in place, so the standby -> focus -> busy glow still reads exactly
     as designed. The focus glow is the widget's only focus indicator
     ([FA-H20]) and must survive. The `:focus-within` / `.is-active` /
     `.busy` variants are listed explicitly because they set
     `animation-duration` at a higher specificity than `.ai-lava .lava-cone`. */
  .ai-lava .lava-cone,
  .ai-search:focus-within .lava-cone,
  .ai-search.is-active .lava-cone,
  .ai-search.busy .lava-cone,
  .ai-search::after,
  .ai-search:focus-within::after,
  .ai-search.is-active::after,
  .ai-search.busy::after {
    animation: none;
  }

  .spk-s1,
  .spk-s2 {
    animation: none;
  }

  /* ── 2. Entrance animations — fade in instead of moving in ────────────
     The modal scrim already only fades (kit-fade-in), so it is untouched.
     The card pops and slides, and the month chip flips sideways; both are
     re-pointed at the existing opacity-only keyframe so the element still
     announces itself without travelling. */
  .modal-card {
    animation: kit-fade-in 0.18s ease-out;
  }

  .budget-month-chip .budget-month-flip-next,
  .budget-month-chip .budget-month-flip-prev {
    animation: kit-fade-in 0.18s ease-out;
  }

  /* ── 3. Animations JS waits on — kept alive, made imperceptible ───────
     Name and a non-zero duration preserved so `animationend` still fires;
     the movement itself is cancelled with `!important`, which is what it
     takes to outrank a running animation (and, for confetti, the inline
     animation-duration that app.js writes on every piece). */
  .paycheck-income-confetti {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
  }

  .todo-card-strike-segment {
    animation-duration: 1ms;
  }

  .todo-card-swooshing {
    animation-duration: 1ms;
    transform: none !important;
  }

  /* ── 4. Transitions that move geometry — collapsed to instant ─────────
     Each of these animates only layout properties (width, height, max-height,
     clip-path) or only a transform, so collapsing the whole duration is safe
     and loses nothing but the travel. 0.01ms, never 0s — see rule 2. */
  .txn-category-items,
  .group-insert-row,
  .account-insert-row,
  .emergency-fund-progress-fill,
  .credit-paydown-progress-fill,
  .allocation-meter-fill,
  .budget-month-chip,
  .transactions-section-chevron,
  .todo-completed-chevron,
  .settings-dropdown-chevron,
  .account-expand-icon,
  .between-section-action,
  .two-factor-toggle-slider::after {
    transition-duration: 0.01ms;
  }

  /* ── 5. Mixed transitions — the moving half dropped, the rest kept ────
     These fade or recolour *and* move. Re-declaring the shorthand without
     the transform/inset/width component leaves the meaningful part running
     at its original speed. */
  .app-nav a {
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .app-nav-icon,
  .app-nav a::after,
  .app-nav a[data-label="Timeline"]::before {
    transition: opacity 0.16s ease;
  }

  .transactions-drag-panel {
    transition: opacity 0.22s ease;
  }

  .between-section-actions {
    transition: opacity 0.15s ease;
  }

  /* visibility is kept: it is what actually hides the tooltip, not motion. */
  .budget-start-next-tooltip,
  .account-reconcile-tooltip {
    transition: opacity 0.14s ease, visibility 0.14s ease;
  }

  .welcome-tile {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  /* `inset` grows the glow geometrically on focus; blur and opacity do not. */
  .ai-lava {
    transition: filter 0.5s ease, opacity 0.5s ease;
  }

  /* ── Deliberately NOT touched ─────────────────────────────────────────
     .modal-overlay          kit-fade-in is opacity only.
     .referral-copied-tooltip opacity only, and its transitionend is the only
                             thing that removes it from the DOM (rule 2).
     .type-caret             a 1Hz opacity blink standing in for a text
                             caret: no translation, well under the 3Hz flash
                             threshold, and it is the only cue that the
                             placeholder is still typing.
     .ai-send                a 0.08s press scale on the AI widget button,
                             which the design system says not to restyle.
     every colour / background / border / box-shadow / filter transition —
                             state, not motion (rule 1). */
}

/* [NEW] Pending transactions were signalled by a background tint alone, which
   says nothing to someone who cannot distinguish it and explains nothing to
   anyone. Spent excludes pending rows, so categorising one appears to do
   nothing until the charge posts — the label and its tooltip are what make that
   intelligible rather than broken-looking. */
.transactions-pending-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}


/* ── Support view banner ──────────────────────────────────────────────────
   Fixed to the top of every page for the whole session, above everything, and
   deliberately loud. It is the only thing standing between an operator and the
   mistake the 2026-08-05 incident was made of: a session that looks exactly
   like an ordinary one. */
.support-view-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: var(--danger);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.support-view-banner-label { text-transform: uppercase; }
.support-view-banner-who { font-weight: 600; opacity: 0.95; }
.support-view-banner-countdown { font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.9; }
/* A support session that cannot name its account is broken, not empty. Said
   quietly in grey next to a login screen it reads as the customer being signed
   out; it has to read as the tool being wrong. */
.support-view-banner-broken {
  background: #fff;
  color: #b91c1c;
  border-radius: 0.25rem;
  padding: 0.05rem 0.4rem;
  font-weight: 700;
}

.support-view-banner-end {
  background: #fff;
  color: var(--danger);
  border: none;
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Push the page down so the bar never covers anything. */
body.has-support-view-banner { padding-top: 2.4rem; }

/* No reduced-motion block here on purpose. The banner has no transition to
   suppress, and this codebase forbids `transition: none` in those blocks --
   transitionend would never fire and colour feedback would vanish. The
   existing reduced-motion tests caught exactly that when it was added out of
   habit. */

/* Which of the two things a set-aside item is, asked once instead of handing
   every item the controls for both. [SA-34] */
.set-aside-kind {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.03);
}

.set-aside-kind-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  cursor: pointer;
}

.set-aside-kind-option input {
  cursor: pointer;
  margin: 0;
}

.set-aside-kind-option span {
  line-height: 1.3;
}

#itemModalGoalAmountField[hidden],
#itemModalGoalOnlyFields[hidden] {
  display: none;
}

/* A tick the app made from the bank feed, and the undo for it. [SA-42]
   Deliberately not styled as a success: the user did not ask for it, so it
   reads as something to check rather than something to celebrate. */
.todo-auto-summary {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 0.5rem;
  background: rgba(37, 99, 235, 0.07);
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 600;
}

.todo-auto-summary[hidden] {
  display: none;
}

.todo-card-auto-note {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #1d4ed8;
}