:root {
  --surface: #f5f2e9;
  --surface-raised: #fbf9f3;
  --surface-muted: #ebe7dc;
  --nav: #17372f;
  --nav-muted: #9fb3aa;
  --text: #18241f;
  --text-muted: #6b756f;
  --accent: #1b7658;
  --accent-soft: #dcece4;
  --divider: #d7d3c8;
  --danger: #a2443c;
  --positive: #19704f;
  --radius: 12px;
  --control-radius: 10px;
  --content-max: 1180px;
  --side-width: 232px;
  --focus: #1f8665;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

/* Owner-managed expense categories use the established expense palette. */
.category-color-0 { --category-color: var(--accent); }
.category-color-1 { --category-color: #8d6f4e; }
.category-color-2 { --category-color: #7c8f87; }
.category-color-3 { --category-color: #b06d5d; }
.category-color-4 { --category-color: #6f7897; }
.category-color-5 { --category-color: #a38a52; }
.category-color-6, .expense-chart-group--6, .expense-donut-segment--6 { --category-color: #527da8; --expense-color: var(--category-color); }
.category-color-7, .expense-chart-group--7, .expense-donut-segment--7 { --category-color: #79a7c2; --expense-color: var(--category-color); }
.category-color-8, .expense-chart-group--8, .expense-donut-segment--8 { --category-color: #4f9b98; --expense-color: var(--category-color); }
.category-color-9, .expense-chart-group--9, .expense-donut-segment--9 { --category-color: #72a58a; --expense-color: var(--category-color); }
.category-color-10, .expense-chart-group--10, .expense-donut-segment--10 { --category-color: #87914d; --expense-color: var(--category-color); }
.category-color-11, .expense-chart-group--11, .expense-donut-segment--11 { --category-color: #c88a4b; --expense-color: var(--category-color); }
.category-color-12, .expense-chart-group--12, .expense-donut-segment--12 { --category-color: #c77b70; --expense-color: var(--category-color); }
.category-color-13, .expense-chart-group--13, .expense-donut-segment--13 { --category-color: #ba8398; --expense-color: var(--category-color); }
.category-color-14, .expense-chart-group--14, .expense-donut-segment--14 { --category-color: #8774a6; --expense-color: var(--category-color); }
.category-color-15, .expense-chart-group--15, .expense-donut-segment--15 { --category-color: #a798bb; --expense-color: var(--category-color); }
.category-color-16, .expense-chart-group--16, .expense-donut-segment--16 { --category-color: #90576b; --expense-color: var(--category-color); }
.category-color-17, .expense-chart-group--17, .expense-donut-segment--17 { --category-color: #475f7a; --expense-color: var(--category-color); }
.category-settings { max-width: 920px; }
.category-settings .page-heading > div { min-width: 0; }
.category-settings .page-heading h1 { overflow-wrap: anywhere; }
.category-settings .muted { color: var(--text-muted); font-size: .92rem; }
.category-panel { border: 1px solid var(--divider); border-radius: var(--radius); background: var(--surface-raised); padding: 24px; margin: 24px 0; }
.category-panel label:not(.category-checkbox):not(.category-shop) { display: grid; gap: 8px; }
.category-panel input:not([type="checkbox"]):not([type="radio"]), .category-panel select { width: 100%; min-width: 0; }
.category-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .category-panel select, .category-toolbar input[type="search"], .category-rule-search input[type="search"] {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.category-panel input:focus-visible, .category-panel select:focus-visible, .category-toolbar input:focus-visible { border-color: var(--accent); }
.category-editor { display: grid; gap: 20px; }
.category-color-selector > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.category-color-selector > summary::-webkit-details-marker { display: none; }
.category-color-selector > summary::after { content: ""; width: 8px; height: 8px; margin: 0 4px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); flex: 0 0 auto; }
.category-color-selector[open] > summary::after { transform: rotate(225deg); }
.category-color-current { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-muted); font-size: .92rem; }
.category-color-selector .category-color-picker { margin-top: 14px; }
.category-color-picker { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.category-color-picker legend { margin-bottom: 8px; }
.category-color-picker label { position: relative; width: 44px; height: 44px; cursor: pointer; place-items: center; }
.category-color-picker input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; }
.category-color-picker label > span[aria-hidden] { width: 28px; height: 28px; border-radius: 50%; background: var(--category-color); }
.category-color-picker input:checked + span, .category-color-picker input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 4px; }
.category-purpose { border-top: 1px solid var(--divider); padding-top: 16px; }
.category-purpose summary { color: var(--accent); cursor: pointer; margin-bottom: 12px; }
.category-checkbox { display: flex; align-items: center; gap: 10px; font-size: .94rem; }
.category-checkbox input, .category-shop input { width: 18px; height: 18px; flex: 0 0 auto; }
.category-toolbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; margin: 24px 0; }
.category-toolbar > form { flex: 1; min-width: 220px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.category-toolbar > .primary-button { display: flex; align-items: center; justify-content: center; }
.category-toolbar input[type="search"] { flex: 1; min-width: 160px; }
.category-list-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--divider); padding: 18px 0; }
.category-list-row > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; color: var(--text); text-decoration: none; }
.category-list-row > a > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.category-list-row strong { font-size: 1.12rem; }
.category-list-row small { display: block; color: var(--text-muted); margin-top: 5px; }
.category-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--category-color); flex: 0 0 auto; }
.category-list-row > form { display: flex; }
.category-order { min-width: 44px; min-height: 44px; padding: 8px; color: var(--text-muted); background: transparent; border: 0; }
.category-order:hover { color: var(--accent); }
.category-shop-list { margin: 16px 0; max-height: 440px; overflow-y: auto; }
.category-shop { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.category-shop[hidden] { display: none; }
.category-shop > span { min-width: 0; overflow-wrap: anywhere; }
.category-shop strong { display: block; }
.category-shop small { display: block; color: var(--text-muted); font-size: .82rem; margin-top: 5px; }
.category-add-shops { border-top: 1px solid var(--divider); margin-top: 24px; padding-top: 20px; }
.category-add-shops > summary { display: flex; align-items: center; width: fit-content; min-height: 44px; padding: 10px 16px; border: 1px solid var(--divider); border-radius: var(--control-radius); color: var(--accent); font-weight: 600; cursor: pointer; list-style: none; }
.category-add-shops > summary::-webkit-details-marker { display: none; }
.category-add-shops > summary::before { content: "+"; margin-right: 8px; }
.category-add-shops[open] > summary::before { content: "−"; }
.category-panel form > .primary-button { margin-top: 18px; }
.category-transfer-preview { padding: 8px 0; }
.category-transfer-preview li { margin: 12px 0; overflow-wrap: anywhere; }
.category-transfer-preview small { color: var(--text-muted); }
.category-archive-form { margin: 24px 0; }
.receipt-merchant-editor .text-link { display: inline-block; margin: 16px 0 0 16px; }
@media (max-width: 600px) {
  .category-panel { padding: 18px; }
  .category-toolbar { display: grid; }
  .category-list-row { gap: 4px; }
  .category-list-row > a { gap: 12px; }
  .category-settings .primary-button { width: 100%; text-align: center; }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--nav);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

button,
select,
input {
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a,
select,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline: 3px solid color-mix(in srgb, var(--focus) 58%, transparent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.side-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: var(--side-width);
  flex-direction: column;
  padding: 34px 22px;
  background: var(--nav);
  color: #eef5f1;
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: inherit;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.035em;
}

.side-nav nav {
  display: grid;
  gap: 8px;
  margin-top: 52px;
}

.side-nav nav a {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  border-radius: var(--control-radius);
  color: var(--nav-muted);
  font-size: 15px;
  font-weight: 580;
  transition: background-color 150ms ease, color 150ms ease;
}

.side-nav nav a:hover,
.side-nav nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.09);
  color: #f7fbf8;
}

.nav-icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.icon-house {
  -webkit-mask-image: url("/static/icons/house.svg");
  mask-image: url("/static/icons/house.svg");
}

.icon-wallet {
  -webkit-mask-image: url("/static/icons/wallet.svg");
  mask-image: url("/static/icons/wallet.svg");
}

.icon-receipt {
  -webkit-mask-image: url("/static/icons/receipt.svg");
  mask-image: url("/static/icons/receipt.svg");
}

.icon-credit-card {
  -webkit-mask-image: url("/static/icons/credit-card.svg");
  mask-image: url("/static/icons/credit-card.svg");
}

.icon-more {
  -webkit-mask-image: url("/static/icons/dots-three.svg");
  mask-image: url("/static/icons/dots-three.svg");
}

.mobile-header,
.bottom-nav {
  display: none;
}

.global-header-actions {
  position: absolute;
  top: 34px;
  right: 52px;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-search-action {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--divider);
  border-radius: 50%;
  color: var(--nav);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.global-search-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.global-search-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.icon-search {
  -webkit-mask-image: url("/static/icons/search.svg");
  mask-image: url("/static/icons/search.svg");
}

#page-content {
  min-height: 100dvh;
  margin-left: var(--side-width);
  background: var(--surface);
}

.page-shell {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 48px 52px 72px;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 38px;
}

.page-heading--compact {
  margin-bottom: 0;
}

.page-heading h1,
.page-heading p,
.section-heading h2,
.finance-row h2,
.finance-row h3,
.expense-group h2 {
  margin: 0;
}

.page-heading h1 {
  max-width: 18ch;
  font-size: clamp(31px, 4vw, 48px);
  font-weight: 690;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero-balance {
  padding: 32px 0 38px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.hero-balance p {
  margin: 0 0 11px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 620;
}

.hero-balance strong {
  display: block;
  font-size: clamp(43px, 7vw, 74px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.058em;
  line-height: 0.98;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 34px;
  border-bottom: 1px solid var(--divider);
}

.metric-row--without-deposit {
  grid-template-columns: 1fr;
}

.metric-row > div {
  min-width: 0;
  padding: 23px 26px 25px 0;
}

.metric-link {
  display: block;
  min-height: 92px;
  margin: -23px -26px -25px 0;
  padding: 23px 26px 25px 0;
  border-radius: 6px;
  transition: color 150ms ease;
}

.metric-link:hover {
  color: var(--accent);
}

.metric-row > div + div {
  padding-left: 26px;
  border-left: 1px solid var(--divider);
}

.metric-row dt {
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 13px;
}

.metric-row dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(19px, 2.1vw, 27px);
  font-variant-numeric: tabular-nums;
  font-weight: 640;
  letter-spacing: -0.035em;
}

.metric-expense dd {
  color: var(--danger);
}

.metric-row--without-deposit .metric-expense {
  padding-left: 0;
  border-left: 0;
}

.balance-history {
  position: relative;
  margin-bottom: 54px;
  padding: 14px 26px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.balance-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.balance-chart-grid {
  stroke: color-mix(in srgb, var(--divider) 74%, transparent);
  stroke-width: 1;
}

.balance-chart-area {
  fill: url("#balance-chart-area-gradient");
}

.balance-chart-area--deposit-income {
  fill: url("#deposit-income-chart-area-gradient");
}

.balance-chart-area--credit-income {
  fill: url("#credit-income-chart-area-gradient");
}

.balance-chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.balance-chart-point {
  fill: var(--surface-raised);
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 140ms ease, transform 140ms ease, stroke-width 140ms ease;
}

.balance-chart-point:hover,
.balance-chart-point:focus-visible,
.balance-chart-point.is-active {
  opacity: 1;
  stroke-width: 4;
  transform: scale(1.35);
}

.balance-chart-point:focus-visible {
  outline: none;
}

.balance-chart-tooltip {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--text);
  box-shadow: 0 8px 22px rgb(24 31 27 / 14%);
  color: var(--surface-raised);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.balance-chart-tooltip[hidden] {
  display: none;
}

.balance-chart-line-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 28px;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}

.balance-chart-point-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.balance-chart-point-target {
  cursor: pointer;
  outline: none;
}

.balance-chart-point-target:hover .balance-chart-point,
.balance-chart-point-target:focus-visible .balance-chart-point,
.balance-chart-point-target.is-active .balance-chart-point {
  opacity: 1;
  stroke-width: 4;
  transform: scale(1.35);
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 8px 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
}

.balance-chart-label {
  fill: var(--text-muted);
  font-size: 12px;
  font-weight: 620;
}

.goal-card {
  display: flex;
  min-height: 176px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 54px;
  padding: 26px 30px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
  transition: border-color 150ms ease, transform 150ms ease;
}

.goal-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.goal-card-copy {
  min-width: 0;
}

.goal-card-copy .eyebrow {
  margin-bottom: 7px;
}

.goal-card-copy h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.goal-card-copy > p:not(.eyebrow) {
  margin: 8px 0 17px;
  color: var(--text-muted);
  font-size: 14px;
}

.goal-card-values {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  color: var(--text-muted);
  font-size: 12px;
}

.goal-card-values strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.goal-card--empty {
  min-height: 92px;
  justify-content: flex-start;
  margin-bottom: 54px;
  color: var(--accent);
}

.goal-card--empty:hover {
  color: var(--accent);
}

.goal-card--empty > span:last-child {
  display: grid;
  gap: 3px;
}

.goal-card--empty strong {
  font-size: 17px;
}

.goal-card--empty small {
  color: var(--text-muted);
  font-size: 13px;
}

.goal-card-empty-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0;
}

.goal-card-empty-icon::before,
.goal-card-empty-icon::after {
  position: absolute;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.goal-card-empty-icon::before {
  width: 16px;
  height: 3px;
}

.goal-card-empty-icon::after {
  width: 3px;
  height: 16px;
}

.goal-ring {
  display: grid;
  width: 176px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) calc(var(--goal-progress) * 1%),
    var(--surface-muted) 0
  );
}

.goal-ring::before {
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-raised);
  content: "";
  grid-area: 1 / 1;
}

.goal-ring > span {
  z-index: 1;
  grid-area: 1 / 1;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.goal-ring--compact {
  width: 112px;
}

.goal-ring--compact > span {
  font-size: 19px;
}

.goal-page {
  max-width: 1000px;
}

.goal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
}

.goal-heading .back-link,
.goal-back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.goal-edit-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}

.goal-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 64px;
}

.goal-detail-summary h1,
.goal-form-panel h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 690;
  letter-spacing: -0.055em;
  line-height: 1;
}

.goal-detail-ring-wrap {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 37px 0 28px;
}

.goal-ring--detail {
  width: 218px;
}

.goal-ring--detail > span {
  font-size: 31px;
}

.goal-detail-values {
  display: grid;
  gap: 16px;
}

.goal-detail-values div {
  display: grid;
  gap: 3px;
}

.goal-detail-values span,
.goal-detail-values strong {
  font-variant-numeric: tabular-nums;
}

.goal-detail-values span {
  color: var(--text-muted);
  font-size: 13px;
}

.goal-detail-values strong {
  font-size: 19px;
  font-weight: 680;
}

.goal-achievement {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

.goal-achievement strong {
  color: var(--text);
}

.goal-detail-side {
  display: grid;
  align-content: start;
  gap: 34px;
  padding-top: 8px;
}

.goal-detail-side h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 680;
}

.goal-month-plan {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 18px;
  background: var(--surface-raised);
}

.goal-month-plan-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.goal-month-plan-heading p {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.goal-month-plan-heading h2 {
  margin: 0;
  line-height: 1.25;
}

.goal-month-plan-heading > small {
  flex: 0 0 auto;
  padding-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.goal-plan-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-muted);
}

.goal-plan-toggle button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.goal-plan-toggle button.is-active {
  background: var(--surface-raised);
  color: var(--text);
}

.goal-plan-panel[hidden] {
  display: none;
}

.goal-plan-panel {
  display: grid;
  gap: 14px;
}

.goal-plan-result {
  display: grid;
  gap: 2px;
}

.goal-plan-result > span {
  color: var(--text-muted);
  font-size: 13px;
}

.goal-plan-result > strong {
  color: var(--accent);
  font-size: 29px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.goal-plan-result--exceeded > strong {
  color: var(--danger);
}

.goal-plan-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.goal-plan-progress {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
}

.goal-plan-progress-background {
  fill: var(--surface-muted);
}

.goal-plan-progress-fill {
  fill: var(--accent);
}

.goal-plan-result--exceeded + .goal-plan-progress-row .goal-plan-progress-fill {
  fill: var(--danger);
}

.goal-plan-progress-row small {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.goal-plan-breakdown {
  padding-top: 2px;
}

.goal-plan-breakdown summary {
  width: fit-content;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.goal-plan-breakdown dl {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

.goal-plan-breakdown dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.goal-plan-breakdown dt,
.goal-plan-breakdown dd {
  margin: 0;
  font-size: 12px;
}

.goal-plan-breakdown dt {
  color: var(--text-muted);
}

.goal-plan-breakdown dd {
  flex: 0 0 auto;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.goal-plan-breakdown p {
  margin: 11px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.goal-milestone-list {
  border-top: 1px solid var(--divider);
}

.goal-milestone {
  display: flex;
  min-height: 60px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--divider);
}

.goal-milestone-marker {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 2px solid var(--divider);
  border-radius: 50%;
}

.goal-milestone.is-reached .goal-milestone-marker {
  border-color: var(--accent);
  background: var(--accent);
}

.goal-milestone > div {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.goal-milestone strong {
  font-size: 15px;
}

.goal-milestone span:not(.goal-milestone-marker) {
  color: var(--text-muted);
  font-size: 13px;
  text-align: right;
}

.goal-scenarios {
  padding-top: 22px;
  border-top: 1px solid var(--divider);
}

.goal-scenarios dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.goal-scenarios dl div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.goal-scenarios dt,
.goal-scenarios dd {
  margin: 0;
  font-size: 14px;
}

.goal-scenarios dt {
  color: var(--text-muted);
}

.goal-scenarios dd {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.goal-scenarios dd strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}

.goal-scenarios dd span,
.goal-scenarios-note {
  color: var(--text-muted);
  font-size: 12px;
}

.goal-scenarios-note {
  margin: 14px 0 0;
  line-height: 1.4;
}

.goal-warnings {
  padding: 15px 17px;
  border-left: 3px solid var(--divider);
  color: var(--text-muted);
  font-size: 13px;
}

.goal-warnings p {
  margin: 0;
}

.goal-warnings p + p {
  margin-top: 5px;
}

.goal-archive-form {
  padding-top: 2px;
}

.goal-form-panel {
  max-width: 560px;
  margin-top: 10px;
}

.goal-form-intro {
  max-width: 48ch;
  margin: 15px 0 26px;
  color: var(--text-muted);
  font-size: 15px;
}

.goal-form-status {
  max-width: 48ch;
  margin: -7px 0 21px;
  color: var(--text-muted);
  font-size: 14px;
}

.goal-form {
  display: grid;
  gap: 10px;
}

.goal-form label {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 650;
}

.goal-form input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  font-size: 17px;
}

.goal-form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 17px;
}

.form-error {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-left: 3px solid var(--danger);
  color: var(--danger);
  font-size: 14px;
}

.forecast-page {
  max-width: 980px;
}

.deposit-income-page {
  max-width: 980px;
}

.deposit-income-heading {
  min-height: 44px;
  margin-bottom: 24px;
}

.deposit-income-heading .back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.deposit-income-summary {
  padding: 28px 0 36px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.deposit-income-summary .eyebrow {
  margin-bottom: 12px;
}

.deposit-income-summary h1 {
  max-width: 15ch;
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 690;
  letter-spacing: -0.055em;
  line-height: 1;
}

.deposit-income-summary strong {
  display: block;
  font-size: clamp(40px, 6vw, 68px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1;
}

.deposit-income-meta {
  margin-top: 11px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 620;
}

.deposit-income-meta p {
  margin: 0;
}

.deposit-income-meta p + p {
  margin-top: 5px;
}

.deposit-income-chart.balance-history {
  margin-top: 30px;
  margin-bottom: 0;
}

.deposit-income-breakdown {
  margin-top: 30px;
}

.deposit-income-breakdown .section-heading {
  margin-bottom: 0;
}

.deposit-income-breakdown .section-heading h2 {
  margin: 0;
}

.deposit-income-monthly-list .finance-row {
  min-height: 58px;
  padding: 13px 0;
}

.deposit-income-monthly-list h3 {
  margin: 0;
  font-size: 16px;
}

.deposit-income-month-rate {
  display: inline-block;
  margin-left: 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 560;
}

.deposit-income-monthly-list > .finance-row > strong {
  color: var(--positive);
}

.expense-history-page {
  max-width: 980px;
}

.expense-history-heading {
  min-height: 44px;
  margin-bottom: 24px;
}

.expense-history-heading .back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.expense-history-summary {
  padding: 28px 0 36px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.expense-history-summary .eyebrow {
  margin-bottom: 12px;
}

.expense-history-summary h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 690;
  letter-spacing: -0.055em;
  line-height: 1;
}

.expense-history-summary strong {
  display: block;
  color: var(--danger);
  font-size: clamp(40px, 6vw, 68px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1;
}

.expense-history-summary > p:last-child {
  margin: 11px 0 0;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 620;
}

.expense-history-chart.balance-history {
  margin-top: 30px;
  margin-bottom: 0;
}

.expense-history-chart-area {
  fill: url("#expense-history-chart-area-gradient");
}

.expense-history-chart-line {
  stroke: var(--danger);
}

.expense-history-chart-point {
  stroke: var(--danger);
}

.expense-history-chart-point-target:hover .expense-history-chart-point,
.expense-history-chart-point-target:focus-visible .expense-history-chart-point,
.expense-history-chart-point-target.is-active .expense-history-chart-point {
  stroke: var(--danger);
}

.expense-history-breakdown {
  margin-top: 30px;
}

.expense-history-breakdown .section-heading {
  margin-bottom: 0;
}

.expense-history-breakdown .section-heading h2 {
  margin: 0;
}

.expense-history-monthly-list .finance-row {
  min-height: 58px;
  padding: 13px 0;
}

.expense-history-monthly-list h3 {
  margin: 0;
  font-size: 16px;
}

.expense-history-monthly-list > .finance-row > strong {
  color: var(--danger);
}

.forecast-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
}

.forecast-heading .eyebrow {
  margin-bottom: 14px;
}

.forecast-headline-label {
  margin: 0 0 7px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 620;
}

.forecast-heading strong {
  display: block;
  font-size: clamp(42px, 7vw, 76px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1;
}

.forecast-change {
  display: inline-block;
  margin-top: 11px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.forecast-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease;
}

.forecast-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.forecast-chart {
  position: relative;
  margin: 32px 0 16px;
  padding: 14px 18px 10px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.forecast-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.forecast-range {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
}

.forecast-line {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  opacity: 0.28;
  pointer-events: none;
  transition: opacity 150ms ease, stroke-width 150ms ease;
}

.forecast-line--economical {
  stroke: #7c8f87;
}

.forecast-line--expected {
  stroke: var(--accent);
}

.forecast-line--increased {
  stroke: #b06d5d;
}

.forecast-line--expected,
.forecast-line.is-selected {
  stroke-width: 4;
  opacity: 1;
}

.forecast-chart-point {
  fill: var(--surface-raised);
  stroke: var(--accent);
  stroke-width: 2;
  cursor: pointer;
  opacity: 0.5;
  outline: none;
  transition: opacity 140ms ease, transform 140ms ease, stroke-width 140ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.forecast-chart-point[data-forecast-scenario="economical"] {
  stroke: #7c8f87;
}

.forecast-chart-point[data-forecast-scenario="expected"] {
  stroke: var(--accent);
}

.forecast-chart-point[data-forecast-scenario="increased"] {
  stroke: #b06d5d;
}

.forecast-chart-point:hover,
.forecast-chart-point:focus-visible,
.forecast-chart-point.is-active {
  opacity: 1;
  stroke-width: 4;
  transform: scale(1.35);
}

.forecast-chart-label {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 620;
}

.forecast-scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 520px;
  margin: 0 0 28px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-muted);
}

.forecast-scenarios button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 680;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.forecast-scenarios button:hover,
.forecast-scenarios button.is-active {
  background: var(--surface-raised);
  color: var(--text);
}

.forecast-scenarios button:active {
  transform: scale(0.98);
}

.forecast-record {
  margin-bottom: 28px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.forecast-record[hidden] {
  display: none;
}

.forecast-record-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.forecast-record-heading p {
  margin: 0 0 5px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 620;
}

.forecast-record-heading strong {
  display: block;
  font-size: clamp(30px, 5vw, 46px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1;
}

.forecast-record-heading > span {
  flex: 0 0 auto;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.forecast-record dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.forecast-record dl div {
  min-width: 0;
}

.forecast-record dt,
.forecast-record dd {
  margin: 0;
}

.forecast-record dt {
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 12px;
}

.forecast-record dd {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  white-space: nowrap;
}

.forecast-assumptions {
  max-width: 760px;
  color: var(--text-muted);
  font-size: 13px;
}

.forecast-assumptions h2 {
  margin: 0 0 9px;
  color: var(--text);
  font-size: 17px;
  font-weight: 680;
}

.forecast-assumptions p {
  margin: 6px 0;
}

.forecast-assumptions ul {
  margin: 12px 0 0;
  padding-left: 19px;
}

.forecast-assumptions li + li {
  margin-top: 5px;
}

.forecast-explanation {
  max-width: 760px;
  margin: -8px 0 28px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}

.forecast-explanation > summary,
.forecast-source > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  color: var(--accent);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.forecast-explanation > summary::-webkit-details-marker,
.forecast-source > summary::-webkit-details-marker {
  display: none;
}

.forecast-explanation > summary::after,
.forecast-source > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 400;
}

.forecast-explanation[open] > summary::after,
.forecast-source[open] > summary::after {
  content: "−";
}

.forecast-explanation summary:focus-visible,
.forecast-explanation a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.forecast-explanation-content {
  padding: 2px 0 18px;
}

.forecast-explanation-record[hidden] {
  display: none;
}

.forecast-explanation-record h2 {
  margin: 20px 0 12px;
  font-size: 16px;
  font-weight: 650;
}

.forecast-reconciliation {
  margin: 0;
}

.forecast-reconciliation > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
}

.forecast-reconciliation dt,
.forecast-reconciliation dd {
  min-width: 0;
  margin: 0;
}

.forecast-reconciliation dt {
  color: var(--text-muted);
}

.forecast-reconciliation dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.forecast-reconciliation-total {
  margin-top: 6px;
  border-top: 1px solid var(--divider);
  font-weight: 650;
}

.forecast-reconciliation-total dt {
  color: var(--text);
}

.forecast-explanation-note,
.forecast-source-content p {
  margin: 12px 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.forecast-explanation-note {
  font-size: 13px;
}

.forecast-source {
  border-top: 1px solid var(--divider);
}

.forecast-source > summary {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px 10px;
  color: var(--text);
}

.forecast-source > summary span {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.forecast-source > summary::after {
  margin-left: auto;
}

.forecast-source-content {
  padding-bottom: 12px;
}

.forecast-source-history {
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.forecast-source-history li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 10px;
  border-bottom: 1px solid var(--divider);
}

.forecast-source-history a {
  display: flex;
  min-height: 44px;
  align-items: center;
  width: fit-content;
  color: var(--accent);
}

.forecast-source-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.forecast-source-history small {
  grid-column: 1 / -1;
  padding-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
}

.forecast-warnings {
  margin-top: 22px;
}

@media (max-width: 640px) {
  .forecast-explanation {
    font-size: 13px;
  }

  .forecast-reconciliation > div {
    gap: 10px;
  }

  .forecast-source > summary {
    font-size: 13px;
  }
}

.overview-columns {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: 54px;
}

.section-heading {
  display: flex;
  min-height: 44px;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 7px;
}

.section-heading h2 {
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.section-heading a,
.back-link,
.settings-list a {
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}

.row-list {
  border-top: 1px solid var(--divider);
}

.finance-row {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 0;
  border-bottom: 1px solid var(--divider);
}

.finance-row > div {
  min-width: 0;
}

.finance-row h2,
.finance-row h3 {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.015em;
}

.finance-row p,
.expense-group p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.finance-row > strong,
.expense-group summary > strong,
.contributions strong,
.detail-total {
  flex: 0 0 auto;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  white-space: nowrap;
}

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

.amount-negative {
  color: var(--danger);
}

.empty-state {
  margin: 0;
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.credit-cards-page {
  max-width: 940px;
}

.credit-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: 48px;
  padding: 5px 0 40px;
  border-bottom: 1px solid var(--divider);
}

.credit-summary p,
.credit-summary small {
  display: block;
  margin: 0;
  color: var(--text-muted);
}

.credit-summary p {
  margin-bottom: 8px;
  font-size: 15px;
}

.credit-summary strong {
  display: block;
  font-size: clamp(34px, 6vw, 62px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1;
}

.credit-summary-income strong {
  font-size: clamp(29px, 4.4vw, 47px);
}

.credit-summary small {
  margin-top: 8px;
  font-size: 14px;
}

.credit-section {
  padding: 34px 0 39px;
  border-bottom: 1px solid var(--divider);
}

.credit-section:last-child {
  border-bottom: 0;
}

.credit-section h2 {
  margin: 0 0 25px;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -0.03em;
}

.credit-return-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.credit-returns {
  position: relative;
}

.credit-return-timeline {
  position: relative;
  display: grid;
  min-width: 100%;
  margin: 0;
  padding: 9px 0 0;
  list-style: none;
}

.credit-return-timeline--1 {
  grid-template-columns: 1fr;
}

.credit-return-timeline--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.credit-return-timeline--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.credit-return-timeline--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.credit-return-timeline--scrollable {
  display: flex;
  min-width: max-content;
}

.credit-return-timeline::before {
  position: absolute;
  top: 18px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--text-muted);
  content: "";
}

.credit-return-timeline li {
  position: relative;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 18px;
  color: var(--text-muted);
}

.credit-return-timeline--scrollable li {
  min-width: 112px;
}

.credit-return-timeline li:first-child time {
  color: var(--accent);
}

.credit-return-point {
  position: relative;
  z-index: 1;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.credit-return-point::before {
  position: absolute;
  inset: -10px;
  content: "";
}

.credit-return-point span {
  z-index: 1;
  width: 19px;
  height: 19px;
  border: 5px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.credit-return-point:hover span,
.credit-return-point:focus-visible span,
.credit-return-point.is-active span {
  box-shadow: 0 0 0 3px var(--accent);
}

.credit-return-timeline time {
  font-size: 14px;
  white-space: nowrap;
}

.credit-income-chart.balance-history {
  margin: 0;
  padding: 34px 0 30px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.credit-income-chart .balance-chart {
  margin-top: -2px;
}

.credit-income-baseline {
  stroke: color-mix(in srgb, var(--text-muted) 62%, transparent);
  stroke-dasharray: 8 7;
  stroke-width: 1;
}

.credit-card-list {
  border-top: 1px solid var(--divider);
}

.credit-card-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  min-height: 92px;
  align-items: center;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--divider);
}

.bank-logo {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
  border-radius: 12px;
  background: #fff;
}

.bank-logo img {
  position: absolute;
  inset: 4px;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.bank-logo--generic img {
  inset: 11px;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
}

.credit-card-copy {
  min-width: 0;
}

.credit-card-copy h3,
.credit-card-copy p,
.credit-card-return {
  margin: 0;
}

.credit-card-copy h3 {
  font-size: 17px;
  font-weight: 670;
  letter-spacing: -0.018em;
}

.credit-card-copy p {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-card-return {
  color: var(--accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 24px;
  margin: -12px 0 28px;
  border-bottom: 1px solid var(--divider);
}

.tabs a {
  position: relative;
  display: grid;
  min-height: 48px;
  place-items: center;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 650;
}

.tabs a[aria-current="page"] {
  color: var(--text);
}

.tabs a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
}

.expense-summary {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--divider);
}

.expense-summary-line {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.expense-summary-amount {
  font-size: clamp(36px, 4.7vw, 54px);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: -0.075em;
  line-height: 0.98;
}

.expense-summary-change {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  line-height: 1;
}

.expense-summary-change--increase {
  color: var(--danger);
}

.expense-summary-change--decrease {
  color: var(--positive);
}

.expense-change-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.expense-change-icon.icon-arrow-up {
  -webkit-mask-image: url("/static/icons/arrow-up.svg");
  mask-image: url("/static/icons/arrow-up.svg");
}

.expense-change-icon.icon-arrow-down {
  -webkit-mask-image: url("/static/icons/arrow-down.svg");
  mask-image: url("/static/icons/arrow-down.svg");
}

.expense-summary-title {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.expense-comparison-trigger {
  min-height: 44px;
  border: 0;
  cursor: pointer;
}

.expense-comparison summary::-webkit-details-marker,
.expense-comparison summary::marker {
  display: none;
  content: "";
}

.expense-comparison summary:focus-visible,
.expense-comparison-trigger:focus-visible,
.expense-comparison a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.expense-comparison-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0.68;
  transition: transform 150ms ease;
}

.expense-comparison-group[open] > summary .expense-comparison-chevron,
.expense-comparison-item[open] > summary .expense-comparison-chevron {
  transform: rotate(180deg);
}

.expense-comparison-status,
.expense-comparison-note,
.expense-comparison-caption {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.expense-comparison-content {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}

.expense-comparison-content[hidden] {
  display: none;
}

.expense-comparison-periods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0;
}

.expense-comparison-periods > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.expense-comparison-periods dt {
  color: var(--text-muted);
  font-size: 12px;
}

.expense-comparison-periods dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.expense-comparison-group,
.expense-comparison-item {
  border-bottom: 1px solid var(--divider);
}

.expense-comparison-group:last-child,
.expense-comparison-item:last-child {
  border-bottom: 0;
}

.expense-comparison-group > summary,
.expense-comparison-item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

.expense-comparison-copy {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 600;
}

.expense-comparison-change {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.expense-comparison-group-content,
.expense-comparison-item-content {
  display: grid;
  gap: 14px;
  margin: 0 0 14px 12px;
  padding: 4px 0 2px 14px;
  border-left: 2px solid var(--divider);
}

.expense-comparison-contributions h3 {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.expense-comparison-contributions a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 0;
  border-top: 1px solid var(--divider);
  font-size: 13px;
}

.expense-comparison-contributions a:hover {
  color: var(--accent);
}

.expense-comparison-contributions a > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  overflow-wrap: anywhere;
}

.expense-comparison-contributions a small {
  color: var(--text-muted);
  font-size: 12px;
}

.expense-comparison-contributions a > strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.expense-chart {
  position: relative;
  display: grid;
  gap: 18px;
  margin: -4px 0 0;
  padding: 22px 0 28px;
}

.expense-chart-title {
  margin: 0;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.expense-chart-body {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 84px);
}

.expense-chart-overview {
  display: grid;
  align-content: start;
  gap: 10px;
}

.expense-chart-graphic {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.expense-bars-graphic {
  position: relative;
}

.expense-month-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--accent);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.expense-month-arrow--previous {
  left: -12px;
}

.expense-month-arrow--next {
  right: -12px;
}

.expense-month-arrow:hover,
.expense-month-arrow:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.expense-month-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.expense-month-arrow-icon {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.expense-month-arrow--previous .expense-month-arrow-icon {
  transform: translateX(1px) rotate(-135deg);
}

.expense-month-arrow--next .expense-month-arrow-icon {
  transform: translateX(-1px) rotate(45deg);
}

.expense-chart-month {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 650;
  text-align: center;
}

.expense-chart-graphic--empty .expense-donut-track {
  opacity: 0.46;
}

.expense-chart-no-data {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

.expense-range-toggle {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
}

.expense-range-toggle a {
  display: grid;
  min-height: 36px;
  place-items: center;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.expense-range-toggle a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.expense-chart-controls {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
}

.expense-chart-controls .expense-range-toggle {
  margin: 0;
}

.expense-mode-toggle {
  flex: 0 0 88px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 88px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
}

.expense-mode-toggle a {
  display: grid;
  min-height: 36px;
  place-items: center;
  border-radius: 999px;
  color: var(--text-muted);
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.expense-mode-toggle a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.expense-mode-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.expense-range-toggle a:active,
.expense-mode-toggle a:active {
  transform: scale(0.97);
}

.expense-bar-overview {
  position: relative;
  display: grid;
  gap: 0;
  width: 100%;
}

.expense-bar-overview .expense-chart-groups {
  margin-top: 18px;
}

.expense-bars {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.expense-bars-grid {
  stroke: color-mix(in srgb, var(--divider) 78%, transparent);
  stroke-width: 1;
}

.expense-bars-axis-label {
  fill: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-anchor: end;
}

.expense-bar {
  fill: var(--accent);
  cursor: pointer;
  transition: opacity 140ms ease, filter 140ms ease;
}

.expense-bar--negative {
  fill: var(--danger);
}

.expense-bar:hover,
.expense-bar:focus-visible,
.expense-bar.is-active {
  opacity: 0.82;
  filter: brightness(1.05);
}

.expense-bar:focus-visible {
  outline: none;
}

.expense-bar-label {
  fill: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

.expense-donut {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.expense-donut-track,
.expense-donut-segment {
  fill: none;
  stroke-width: 24;
}

.expense-donut-track {
  stroke: var(--surface-muted);
}

.expense-donut-segment {
  stroke: var(--expense-color);
  stroke-linecap: butt;
  cursor: pointer;
  transition: opacity 140ms ease, stroke-width 140ms ease;
}

.expense-donut-segment:hover,
.expense-donut-segment:focus-visible,
.expense-donut-segment.is-active {
  opacity: 0.78;
  stroke-width: 29;
}

.expense-donut-segment:focus-visible {
  outline: none;
}

.expense-donut-segment--0,
.expense-chart-group--0 {
  --expense-color: var(--accent);
}

.expense-donut-segment--0 {
  stroke: var(--accent);
}

.expense-donut-segment--1,
.expense-chart-group--1 {
  --expense-color: #8d6f4e;
}

.expense-donut-segment--1 {
  stroke: #8d6f4e;
}

.expense-donut-segment--2,
.expense-chart-group--2 {
  --expense-color: #7c8f87;
}

.expense-donut-segment--2 {
  stroke: #7c8f87;
}

.expense-donut-segment--3,
.expense-chart-group--3 {
  --expense-color: #b06d5d;
}

.expense-donut-segment--3 {
  stroke: #b06d5d;
}

.expense-donut-segment--4,
.expense-chart-group--4 {
  --expense-color: #6f7897;
}

.expense-donut-segment--4 {
  stroke: #6f7897;
}

.expense-donut-segment--5,
.expense-chart-group--5 {
  --expense-color: #a38a52;
}

.expense-donut-segment--5 {
  stroke: #a38a52;
}

.expense-chart-total {
  display: grid;
  justify-items: center;
  text-align: center;
}

.expense-chart-total span {
  color: var(--text-muted);
  font-size: 13px;
}

.expense-chart-total strong {
  font-size: clamp(25px, 3.2vw, 30px);
  font-variant-numeric: tabular-nums;
  font-weight: 690;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.expense-chart-tooltip {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--text);
  box-shadow: 0 8px 22px rgb(24 31 27 / 14%);
  color: var(--surface-raised);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.expense-chart-tooltip[hidden] {
  display: none;
}

.expense-chart-groups {
  display: grid;
}

.expense-chart-group {
  border-bottom: 1px solid var(--divider);
}

.expense-chart-group.is-highlighted {
  background: color-mix(in srgb, var(--expense-color) 7%, transparent);
}

.expense-chart-group summary {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 3ch 18px;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 13px 0 15px;
  cursor: pointer;
  list-style: none;
}

.expense-chart-group summary::-webkit-details-marker,
.expense-chart-group summary::marker {
  display: none;
  content: "";
}

.expense-chart-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--expense-color);
}

.expense-chart-label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 600;
}

.expense-chart-value > strong,
.expense-chart-group summary > small {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.expense-chart-value {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.expense-chart-value > strong {
  font-size: 14px;
  font-weight: 680;
}

.expense-group-change {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

.expense-group-change--increase {
  color: var(--danger);
}

.expense-group-change--decrease {
  color: var(--positive);
}

.expense-chart-group summary > small {
  color: var(--text-muted);
  font-size: 13px;
  text-align: right;
}

.expense-chart-chevron {
  width: 16px;
  height: 16px;
  opacity: 0.68;
  transition: transform 150ms ease;
}

.expense-chart-group[open] .expense-chart-chevron {
  transform: rotate(180deg);
}

.expense-chart-purchase {
  margin-left: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
}

.expense-chart-purchase:last-child {
  border-bottom: 0;
}

.expense-chart-purchase summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
}

.expense-chart-purchase summary::-webkit-details-marker,
.expense-chart-purchase summary::marker {
  display: none;
  content: "";
}

.expense-chart-purchase-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.expense-chart-purchase-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-chart-purchase-copy small {
  color: var(--text-muted);
  font-size: 12px;
}

.expense-chart-purchase summary > strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.expense-chart-purchase[open] .expense-chart-chevron {
  transform: rotate(180deg);
}

.expense-chart-transaction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-left: 20px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
}

.expense-chart-transaction:hover,
.expense-chart-transaction:focus-visible {
  background: var(--surface-muted);
}

.expense-chart-transaction:last-child {
  border-bottom: 0;
}

.expense-chart-transaction > strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.expense-chart-track {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.expense-chart-bar {
  display: block;
  width: var(--expense-share);
  height: 100%;
  border-radius: inherit;
  background: var(--expense-color);
}

.expense-chart-contributions {
  margin: 0 0 14px 5px;
  padding: 4px 0 5px 20px;
  border-left: 2px solid color-mix(in srgb, var(--expense-color) 42%, transparent);
}

.expense-chart-contributions a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 52px;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  font-size: 13px;
}

.expense-chart-contributions a + a {
  border-top: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
}

.expense-chart-contributions a > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.expense-chart-contributions a > span strong {
  overflow: hidden;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-chart-contributions a > span small {
  color: var(--text-muted);
  font-size: 12px;
}

.expense-chart-contributions a > strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.expense-chart-contributions a:hover {
  color: var(--accent);
}

.expense-chart-empty {
  margin: 0 0 14px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.purchase-search-page {
  max-width: 860px;
}

.search-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--divider);
}

.purchase-search-form {
  flex: 1 1 auto;
}

.purchase-search-form input[type="search"] {
  width: 100%;
  min-height: 50px;
  padding: 0 17px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  font-size: 18px;
  outline-offset: 2px;
}

.purchase-search-form input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

.search-close {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease;
}

.search-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.purchase-search-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-muted);
}

.purchase-search-tab {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 680;
  transition: background-color 150ms ease, color 150ms ease;
}

.purchase-search-tab[aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--text);
}

.purchase-search-tab span {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.search-hint,
.search-empty {
  min-height: 116px;
  margin: 0;
  padding: 36px 0;
  color: var(--text-muted);
  font-size: 15px;
  text-align: center;
}

.purchase-search-list {
  border-top: 1px solid var(--divider);
}

.purchase-search-result {
  flex: 1 1 auto;
  border-bottom: 1px solid var(--divider);
}

.purchase-search-result-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--divider);
}

.purchase-search-result-row .purchase-search-result {
  border-bottom: 0;
}

.purchase-search-history-link {
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-self: center;
  place-items: center;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background-color 150ms ease, color 150ms ease;
}

.purchase-search-history-link:hover,
.purchase-search-history-link:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

.purchase-search-history-icon {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask-image: url("/static/icons/price-history.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("/static/icons/price-history.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.purchase-search-result summary {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
}

.purchase-search-result summary::-webkit-details-marker,
.purchase-search-result summary::marker {
  display: none;
  content: "";
}

.purchase-search-result summary::after {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--text-muted);
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

.purchase-search-result[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.purchase-search-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.purchase-search-copy strong {
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 670;
}

.purchase-search-copy small {
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.purchase-search-result summary > strong {
  flex: 0 0 auto;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  white-space: nowrap;
}

.purchase-search-details {
  margin: 0 0 15px 18px;
  padding-left: 20px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

.purchase-search-purchase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  font-size: 13px;
}

.purchase-search-purchase + .purchase-search-purchase {
  border-top: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
}

.purchase-search-purchase > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.purchase-search-purchase strong,
.purchase-search-purchase small {
  overflow-wrap: anywhere;
}

.purchase-search-purchase strong {
  font-weight: 630;
}

.purchase-search-purchase small {
  color: var(--text-muted);
  font-size: 12px;
}

.purchase-search-purchase > strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.purchase-search-purchase:hover {
  color: var(--accent);
}

.search-load-more {
  margin-top: 18px;
}

.receipt-row {
  transition: color 130ms ease, padding-left 130ms ease;
}

.receipt-row:hover {
  padding-left: 5px;
  color: var(--accent);
}

.load-more {
  display: grid;
  min-height: 52px;
  place-items: center;
  margin-top: 18px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 14px;
  font-weight: 680;
}

.receipt-detail .back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-bottom: 24px;
}

.receipt-description {
  margin: -6px 0 16px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.receipt-description-editor { margin-bottom: 20px; }
.receipt-description-editor summary {
  width: fit-content;
  padding: 8px 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
}
.receipt-description-editor form {
  display: grid;
  gap: 10px;
  max-width: 560px;
  padding: 12px 0 16px;
}
.receipt-description-editor label,
.receipt-description-editor small { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.receipt-description-editor textarea {
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.receipt-description-editor textarea:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.receipt-description-editor .primary-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
}
.expense-receipt-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.receipt-merchant-meta {
  margin: -14px 0 22px;
  color: var(--text-muted);
  font-size: 14px;
}

.receipt-merchant-editor {
  margin-bottom: 22px;
  border-block: 1px solid var(--divider);
}

.receipt-merchant-editor summary {
  width: fit-content;
  padding: 18px 0;
  color: var(--accent);
  cursor: pointer;
  font-weight: 680;
  list-style: none;
}

.receipt-merchant-editor summary::-webkit-details-marker {
  display: none;
}

.receipt-merchant-editor summary::after {
  content: "↓";
  display: inline-block;
  margin-left: 9px;
  transition: transform 150ms ease;
}

.receipt-merchant-editor[open] summary::after {
  transform: rotate(180deg);
}

.receipt-merchant-editor form {
  padding: 2px 0 22px;
}

.operation-category-form {
  display: grid;
  gap: 16px;
  max-width: 380px;
}

.operation-category-form label {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 620;
}

.operation-category-form select, .operation-category-form input[name="rule_description"] {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
}

.operation-category-form .primary-button {
  justify-self: start;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.operation-category-form .category-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
}

.operation-category-form .category-checkbox input { margin-top: 2px; }
.operation-category-source { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.category-rule-settings p { overflow-wrap: anywhere; }
.category-notice { padding: 12px 0; color: var(--accent); }
.category-rule-disclosure { margin-top: 28px; border-top: 1px solid var(--divider); }
.category-rule-disclosure > summary { cursor: pointer; padding: 20px 0; font-weight: 650; }
.category-rule-search { display: flex; gap: 12px; margin-bottom: 16px; }
.category-rule-search input { min-width: 0; flex: 1; }
.category-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.category-rule-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.category-rule-row small, .category-rule-preview-list small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 13px; font-weight: 400; }
.category-rule-preview-list { list-style: none; padding: 0; }
.category-rule-preview-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.category-rule-preview-list li > span { min-width: 0; overflow-wrap: anywhere; }
.category-rule-preview-list strong { white-space: nowrap; }
.category-rule-history form { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.category-rule-examples { margin-bottom: 20px; }
.operation-rule-fields { display: grid; gap: 16px; }
.operation-rule-fields[hidden] { display: none; }
.operation-rule-fields > .secondary-button { justify-self: start; }

.operation-delete-action {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}

.operation-delete-action a { color: var(--danger); }
.expense-deletion-page { max-width: 900px; }
.expense-deletion-list { display: grid; gap: 16px; }

.expense-deletion-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
  overflow-wrap: anywhere;
}

.expense-deletion-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}

.expense-deletion-heading > div { flex: 1 1 220px; min-width: 0; }
.expense-deletion-heading h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.expense-deletion-heading p { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; }
.expense-deletion-heading > strong { color: var(--danger); font-size: 20px; white-space: nowrap; }
.expense-deletion-card > p { line-height: 1.6; }
.expense-deletion-card .expense-deletion-meta { color: var(--text-muted); font-size: 13px; }

.expense-deletion-warning {
  padding: 12px 16px;
  border-left: 3px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-raised));
}

.expense-deletion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 20px;
}

.expense-deletion-actions button, .expense-deletion-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.expense-deletion-more { margin-top: 24px; }
.rule-match-examples { padding-top: 16px; border-top: 1px solid var(--divider); overflow-wrap: anywhere; }
.rule-match-examples p { font-size: 13px; line-height: 1.5; }
.rule-editor-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rule-editor-actions .primary-button { width: auto; }

.receipt-merchant-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.8fr) minmax(180px, 1fr);
  gap: 14px;
}

.receipt-merchant-fields label {
  display: grid;
  gap: 7px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 620;
}

.receipt-merchant-fields input,
.receipt-merchant-fields select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
}

.receipt-merchant-fields input:focus,
.receipt-merchant-fields select:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.receipt-merchant-note {
  margin: 13px 0 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.detail-total {
  color: var(--danger);
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.04em;
}

.item-list .finance-row {
  min-height: 70px;
}

@media (max-width: 700px) {
  .receipt-merchant-fields {
    grid-template-columns: 1fr;
  }
}

.settings-list {
  display: grid;
  max-width: 760px;
  border-top: 1px solid var(--divider);
}

.settings-list section,
.settings-list form {
  padding: 25px 0;
  border-bottom: 1px solid var(--divider);
}

.settings-list h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.settings-list p {
  max-width: 64ch;
  margin: 6px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.price-history-page,
.price-history-detail-page {
  max-width: 900px;
}

.price-inflation-card {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.price-inflation-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.price-inflation-heading h2,
.price-inflation-heading p {
  margin: 0;
}

.price-inflation-heading h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.price-inflation-heading p,
.price-inflation-metric span,
.price-inflation-metric small {
  color: var(--text-muted);
  font-size: 13px;
}

.price-inflation-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.price-inflation-metric {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.price-inflation-metric + .price-inflation-metric {
  padding-left: 22px;
  border-left: 1px solid var(--divider);
  border-radius: 0 12px 12px 0;
}

a.price-inflation-metric {
  cursor: pointer;
  transition: background-color 140ms ease;
}

a.price-inflation-metric:hover,
a.price-inflation-metric:focus-visible,
.price-inflation-metric.is-active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

a.price-inflation-metric:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.price-inflation-metric strong {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.price-inflation-breakdown {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.price-inflation-breakdown > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 4px;
}

.price-inflation-breakdown h3,
.price-inflation-breakdown p,
.price-inflation-product h4,
.price-inflation-product p {
  margin: 0;
}

.price-inflation-breakdown h3 {
  font-size: 16px;
}

.price-inflation-breakdown > header p,
.price-inflation-product p {
  color: var(--text-muted);
  font-size: 13px;
}

.price-inflation-product {
  min-height: 58px;
  padding: 10px 0;
}

.price-inflation-product h4 {
  font-size: 14px;
}

.price-inflation-product > strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-history-list {
  border-top: 1px solid var(--divider);
}

.price-history-groups {
  border-top: 1px solid var(--divider);
}

.price-history-group {
  border-bottom: 1px solid var(--divider);
}

.price-history-group summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  cursor: pointer;
  list-style: none;
}

.price-history-group summary::-webkit-details-marker,
.price-history-group summary::marker {
  display: none;
  content: "";
}

.price-history-group summary > strong {
  font-size: 18px;
  font-weight: 700;
}

.price-history-group summary > small {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 650;
}

.price-history-group-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.price-history-group--marketplaces .price-history-group-swatch {
  background: #8d6f4e;
}

.price-history-group--other .price-history-group-swatch {
  background: var(--text-muted);
}

.price-history-group-chevron {
  width: 16px;
  height: 16px;
  opacity: 0.62;
  transition: transform 160ms ease;
}

.price-history-group[open] .price-history-group-chevron {
  transform: rotate(180deg);
}

.price-history-group .price-history-list {
  margin-left: 34px;
}

.price-history-row {
  gap: 28px;
  transition: color 130ms ease, padding-left 130ms ease;
}

.price-history-row:hover {
  padding-left: 5px;
  color: var(--accent);
}

.price-history-copy {
  min-width: 0;
}

.price-history-copy h2,
.price-history-copy p,
.price-history-value small,
.price-history-summary p,
.price-history-summary strong,
.price-history-purchases h2 {
  margin: 0;
}

.price-history-copy h2 {
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 670;
  letter-spacing: -0.018em;
}

.price-history-copy p,
.price-history-summary p,
.price-history-purchase p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}

.price-history-value {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.price-history-value strong {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.price-history-value small,
.price-change--increase,
.price-change--decrease,
.price-change--neutral {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.price-change--increase {
  color: var(--danger);
}

.price-change--decrease {
  color: var(--positive);
}

.price-change--neutral {
  color: var(--text-muted);
}

.price-history-detail-heading {
  margin-bottom: 22px;
}

.price-history-selection-note {
  color: var(--text-muted);
  font-size: 14px;
}

.price-history-observation {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}

.price-history-observation .finance-row {
  border-bottom: 0;
  padding-bottom: 3px;
}

.price-history-observation--excluded .price-history-purchase {
  color: var(--text-muted);
}

.price-history-selection-button {
  min-height: 40px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
}

.price-history-excluded {
  margin-top: 30px;
}

.price-history-excluded-heading {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.price-history-detail-heading h1 {
  max-width: 28ch;
}

.price-history-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 28px;
  padding: 0 0 25px;
  border-bottom: 1px solid var(--divider);
}

.price-history-summary p {
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 14px;
}

.price-history-summary strong {
  display: block;
  font-size: clamp(25px, 4vw, 38px);
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 1;
}

.price-history-chart {
  position: relative;
  margin-bottom: 42px;
  padding: 18px 20px 14px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.price-history-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.price-history-grid {
  stroke: color-mix(in srgb, var(--divider) 78%, transparent);
  stroke-width: 1;
}

.price-history-line {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.price-history-point {
  fill: var(--surface-raised);
  stroke: var(--accent);
  stroke-width: 3;
  cursor: pointer;
  outline: none;
  transition: transform 140ms ease, stroke-width 140ms ease, fill 140ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.price-history-point:hover,
.price-history-point:focus-visible,
.price-history-point.is-active {
  fill: var(--accent-soft);
  stroke-width: 4;
  transform: scale(1.35);
}

.price-history-purchases {
  border-top: 1px solid var(--divider);
}

.price-history-purchases h2 {
  padding: 23px 0 15px;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.price-history-purchase h3,
.price-history-purchase p {
  margin: 0;
}

.price-history-purchase h3 {
  font-size: 15px;
  font-weight: 650;
}

.price-history-purchase:hover {
  color: var(--accent);
}

.primary-button,
.secondary-button {
  min-height: 46px;
  padding: 0 19px;
  border-radius: var(--control-radius);
  cursor: pointer;
  font-weight: 680;
  white-space: nowrap;
}

.primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #f7fbf8;
}

.secondary-button {
  border: 1px solid var(--divider);
  background: var(--surface-raised);
  color: var(--danger);
}

.primary-button:active,
.secondary-button:active,
.load-more:active {
  transform: translateY(1px);
}

.auth-page,
.error-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: var(--nav);
}

.auth-panel,
.error-panel {
  width: min(100%, 430px);
  padding: 36px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: 0 24px 70px rgba(6, 31, 23, 0.26);
}

.auth-brand {
  margin: 0 0 30px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.035em;
}

.auth-panel h1,
.error-panel h1 {
  margin: 0 0 12px;
  font-size: 31px;
  letter-spacing: -0.04em;
}

.auth-panel > p:not(.auth-brand),
.error-panel p {
  margin: 0 0 24px;
  color: var(--text-muted);
}

.auth-panel form {
  display: grid;
  gap: 11px;
  margin: 24px 0 15px;
}

.auth-panel label {
  font-size: 14px;
  font-weight: 650;
}

.auth-panel input:not([type="hidden"]) {
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: #fffef9;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

.auth-panel > a,
.error-panel a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}

@media (max-width: 960px) {
  .page-shell {
    padding-right: 34px;
    padding-left: 34px;
  }

  .overview-columns {
    grid-template-columns: 1fr;
    gap: 42px;
  }
}

@media (max-width: 767px) {
  html,
  body {
    background: var(--surface);
  }

  .side-nav {
    display: none;
  }

  .mobile-header {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--divider);
    background: var(--surface);
  }

  .mobile-header .brand {
    color: var(--nav);
    font-size: 18px;
  }

  .global-header-actions {
    top: 10px;
    right: 20px;
  }

  body:has(.credit-cards-page) .mobile-header {
    min-height: 48px;
    border-bottom: 0;
  }

  body:has(.credit-cards-page) #page-content {
    min-height: calc(100dvh - 48px);
  }

  #page-content {
    min-height: calc(100dvh - 64px);
    margin-left: 0;
    padding-bottom: 80px;
  }

  .page-shell {
    padding: 25px 20px 44px;
  }

  .page-heading {
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
  }

  .page-heading h1 {
    font-size: 30px;
  }

  .eyebrow {
    display: none;
  }

  .hero-balance {
    padding: 24px 0 31px;
  }

  .hero-balance strong {
    font-size: clamp(41px, 13.5vw, 58px);
  }

  .metric-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 42px;
  }

  .metric-row--without-deposit {
    grid-template-columns: 1fr;
  }

  .balance-history {
    margin-bottom: 42px;
    padding: 10px 14px 8px;
  }

  .goal-card {
    min-height: 142px;
    gap: 15px;
    margin-bottom: 42px;
    padding: 20px;
  }

  .goal-card-copy h2 {
    font-size: clamp(22px, 7vw, 29px);
  }

  .goal-card-copy > p:not(.eyebrow) {
    margin: 6px 0 14px;
    font-size: 12px;
  }

  .goal-card-values {
    gap: 10px 18px;
    font-size: 11px;
  }

  .goal-card-values strong {
    font-size: 14px;
  }

  .goal-ring--compact {
    width: 82px;
  }

  .goal-ring--compact > span {
    font-size: 15px;
  }

  .goal-card--empty {
    min-height: 78px;
  }

  .goal-page {
    padding-top: 25px;
  }

  .goal-heading {
    margin-bottom: 25px;
  }

  .goal-detail-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .goal-detail-ring-wrap {
    gap: 22px;
    margin: 29px 0 22px;
  }

  .goal-ring--detail {
    width: min(45vw, 180px);
  }

  .goal-ring--detail > span {
    font-size: 25px;
  }

  .goal-detail-values {
    gap: 12px;
  }

  .goal-detail-values strong {
    font-size: 17px;
  }

  .goal-detail-side {
    gap: 27px;
    padding-top: 0;
  }

  .goal-month-plan {
    padding: 16px;
  }

  .goal-month-plan-heading {
    display: grid;
    gap: 4px;
  }

  .goal-month-plan-heading > small {
    padding-top: 0;
  }

  .goal-plan-toggle button {
    min-height: 36px;
    padding-inline: 5px;
    font-size: 11px;
  }

  .goal-milestone {
    min-height: 56px;
  }

  .goal-form-panel {
    margin-top: 0;
  }

  .goal-form input {
    min-height: 48px;
  }

  .forecast-page {
    padding-top: 25px;
  }

  .forecast-heading {
    gap: 12px;
  }

  .forecast-headline-label {
    max-width: 25ch;
    font-size: 13px;
  }

  .forecast-heading strong {
    font-size: clamp(38px, 12vw, 54px);
  }

  .forecast-change {
    margin-top: 8px;
    font-size: 14px;
  }

  .forecast-close {
    width: 40px;
    height: 40px;
    font-size: 29px;
  }

  .forecast-chart {
    margin-top: 24px;
    padding: 10px 6px 7px;
  }

  .forecast-chart-label {
    font-size: 10px;
  }

  .forecast-scenarios {
    width: 100%;
    max-width: none;
    margin-bottom: 22px;
  }

  .forecast-scenarios button {
    min-height: 44px;
    padding: 0 5px;
    font-size: 12px;
  }

  .forecast-record {
    margin-bottom: 22px;
    padding: 18px 0 20px;
  }

  .forecast-record-heading {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }

  .forecast-record-heading p {
    font-size: 12px;
  }

  .forecast-record-heading strong {
    font-size: 30px;
  }

  .forecast-record-heading > span {
    font-size: 13px;
  }

  .forecast-record dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 18px;
  }

  .forecast-record dt {
    font-size: 11px;
  }

  .forecast-record dd {
    font-size: 13px;
  }

  .forecast-assumptions {
    font-size: 12px;
  }

  .credit-cards-page .page-heading {
    margin-bottom: 18px;
  }

  .credit-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 18px;
  }

  .credit-summary strong {
    font-size: clamp(38px, 10.5vw, 44px);
  }

  .credit-summary-income strong {
    font-size: clamp(32px, 8.5vw, 36px);
  }

  .credit-summary p {
    margin-bottom: 5px;
  }

  .credit-summary small {
    margin-top: 5px;
  }

  .credit-section {
    padding: 14px 0 18px;
  }

  .credit-section h2 {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .credit-income-chart.balance-history {
    margin: 0;
    padding: 14px 0;
  }

  .credit-income-chart .balance-chart {
    height: 100px;
  }

  .credit-card-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 58px;
    gap: 11px;
    padding: 8px 0;
  }

  .credit-section:last-child {
    padding-top: 10px;
  }

  .credit-section:last-child h2 {
    margin-bottom: 8px;
  }

  .bank-logo {
    width: 42px;
    height: 42px;
    justify-self: center;
    border-radius: 10px;
  }

  .bank-logo img {
    inset: 4px;
    width: 32px;
    height: 32px;
  }

  .bank-logo--generic img {
    inset: 9px;
    width: 22px;
    height: 22px;
  }

  .credit-card-copy h3 {
    font-size: 15px;
  }

  .credit-card-copy p,
  .credit-card-return {
    font-size: 11.5px;
  }

  .balance-chart-line {
    stroke-width: 5;
  }

  .metric-row > div {
    padding: 19px 14px 21px 0;
  }

  .metric-link {
    min-height: 84px;
    margin: -19px -14px -21px 0;
    padding: 19px 14px 21px 0;
  }

  .deposit-income-page {
    padding-top: 25px;
  }

  .deposit-income-heading {
    margin-bottom: 18px;
  }

  .deposit-income-summary {
    padding: 23px 0 30px;
  }

  .deposit-income-summary h1 {
    margin-bottom: 14px;
    font-size: clamp(31px, 9vw, 44px);
  }

  .deposit-income-summary strong {
    font-size: clamp(37px, 12vw, 54px);
  }

  .deposit-income-chart.balance-history {
    margin-top: 24px;
  }

  .expense-history-page {
    padding-top: 25px;
  }

  .expense-history-heading {
    margin-bottom: 18px;
  }

  .expense-history-summary {
    padding: 23px 0 30px;
  }

  .expense-history-summary h1 {
    margin-bottom: 14px;
    font-size: clamp(31px, 9vw, 44px);
  }

  .expense-history-summary strong {
    font-size: clamp(37px, 12vw, 54px);
  }

  .expense-history-chart.balance-history {
    margin-top: 24px;
  }

  .metric-row > div + div {
    padding-left: 14px;
  }

  .metric-row.metric-row--without-deposit .metric-expense {
    padding-left: 0;
    border-left: 0;
  }

  .metric-row dd {
    font-size: 19px;
  }

  .overview-columns {
    gap: 38px;
  }

  .expense-chart {
    margin-top: -4px;
    padding: 18px 0 10px;
  }

  .expense-chart-title {
    font-size: 18px;
  }

  .expense-chart-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .expense-chart-overview {
    display: block;
  }

  .expense-chart-controls {
    width: 100%;
    gap: 10px;
    margin-top: 16px;
  }

  .expense-range-toggle a,
  .expense-mode-toggle a {
    min-height: 34px;
  }

  .expense-range-toggle a {
    font-size: 13px;
  }

  .expense-mode-toggle {
    flex-basis: 82px;
    width: 82px;
  }

  .expense-mode-icon {
    width: 19px;
    height: 19px;
  }

  .expense-chart-graphic {
    width: min(100%, 310px);
  }

  .expense-month-arrow {
    width: 32px;
    height: 32px;
  }

  .expense-month-arrow--previous {
    left: -4px;
  }

  .expense-month-arrow--next {
    right: -4px;
  }

  .expense-chart-month {
    font-size: 14px;
  }

  .expense-bars {
    height: 180px;
  }

  .expense-bars-axis-label,
  .expense-bar-label {
    font-size: 20px;
  }

  .expense-summary {
    margin-top: 12px;
    padding-bottom: 16px;
  }

  .expense-summary-amount {
    font-size: clamp(34px, 10vw, 44px);
  }

  .expense-summary-title {
    font-size: 28px;
  }

  .expense-chart-group summary {
    grid-template-columns: 10px minmax(0, 1fr) auto 3ch 16px;
    gap: 8px;
  }

  .expense-chart-purchase summary {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    gap: 8px;
  }

  .expense-chart-contributions {
    padding-left: 14px;
  }

  .finance-row {
    min-height: 72px;
    gap: 15px;
  }

  .detail-total {
    font-size: 23px;
  }

  .price-history-row {
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .price-history-copy h2 {
    font-size: 15px;
  }

  .price-history-copy p,
  .price-history-value small,
  .price-history-purchase p {
    font-size: 11.5px;
  }

  .price-history-value strong {
    font-size: 16px;
  }

  .price-history-detail-heading {
    margin-bottom: 17px;
  }

  .price-history-detail-heading h1 {
    font-size: 28px;
  }

  .price-history-summary {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
  }

  .price-history-summary p {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .price-history-summary strong {
    font-size: 24px;
  }

  .price-history-chart {
    margin-bottom: 29px;
    padding: 12px 8px 8px;
  }

  .price-history-line {
    stroke-width: 5;
  }

  .price-history-purchases h2 {
    padding: 18px 0 11px;
    font-size: 18px;
  }

  .purchase-search-page {
    padding-top: 18px;
  }

  .search-header {
    gap: 10px;
    margin-bottom: 19px;
    padding-bottom: 13px;
  }

  .purchase-search-form input[type="search"] {
    min-height: 46px;
    padding: 0 13px;
    font-size: 16px;
  }

  .search-close {
    width: 40px;
    height: 40px;
  }

  .purchase-search-tabs {
    margin-bottom: 15px;
  }

  .purchase-search-tab {
    min-height: 38px;
    font-size: 13px;
  }

  .search-hint,
  .search-empty {
    min-height: 100px;
    padding: 29px 10px;
    font-size: 14px;
  }

  .purchase-search-result summary {
    min-height: 68px;
    gap: 11px;
    padding: 12px 0;
  }

  .purchase-search-copy strong,
  .purchase-search-result summary > strong {
    font-size: 14px;
  }

  .purchase-search-copy small {
    font-size: 11.5px;
  }

  .purchase-search-details {
    margin-left: 10px;
    padding-left: 14px;
  }

  .purchase-search-purchase {
    min-height: 53px;
    gap: 10px;
    padding: 8px 0;
  }

  .purchase-search-purchase small {
    font-size: 11px;
  }

  .bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 70px;
    padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--divider);
    background: rgba(251, 249, 243, 0.97);
  }

  .bottom-nav a {
    display: flex;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 650;
  }

  .bottom-nav a[aria-current="page"] {
    color: var(--accent);
  }

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

  .auth-panel,
  .error-panel {
    padding: 29px 24px;
  }
}

/* Overview dashboard: a compact, glanceable layout for the primary screen. */
.home-heading {
  align-items: flex-start;
  margin-bottom: 27px;
}

.home-heading > div {
  display: flex;
  align-items: baseline;
  gap: 23px;
  flex-wrap: wrap;
}

.home-heading .eyebrow {
  display: none;
}

.home-heading h1 {
  font-size: clamp(34px, 4vw, 48px);
}

.home-period {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
  grid-template-areas:
    "balance goal"
    "metrics metrics";
  gap: 24px;
  align-items: stretch;
}

.home-balance {
  display: flex;
  grid-area: balance;
  min-width: 0;
  flex-direction: column;
  padding: 24px 26px 17px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.home-balance .hero-balance {
  flex: 0 0 auto;
  padding: 0 0 18px;
  border-top: 0;
  border-bottom: 0;
}

.home-balance .hero-balance p {
  margin-bottom: 9px;
  font-size: 13px;
}

.home-balance .hero-balance strong {
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 0.96;
}

.home-balance .balance-history {
  flex: 1 1 auto;
  min-height: 180px;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  background: transparent;
}

.home-dashboard > .goal-card {
  grid-area: goal;
  min-height: 100%;
  margin: 0;
}

.home-page .goal-card-copy {
  width: 100%;
}

.home-page .goal-card-copy > h2 {
  margin-bottom: 21px;
}

.home-page .goal-card-copy > .goal-target-label {
  margin: 0 0 3px;
  color: var(--text-muted);
  font-size: 12px;
}

.home-page .goal-target {
  display: block;
  margin-bottom: 14px;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.goal-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goal-progress-track {
  display: block;
  width: 100%;
  height: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.goal-progress-background {
  fill: var(--surface-muted);
}

.goal-progress-fill {
  fill: var(--accent);
}

.goal-progress-value {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.goal-card-divider {
  height: 1px;
  margin: 23px 0 20px;
  background: var(--divider);
}

.home-page .goal-card-values {
  gap: 18px 28px;
}

.goal-card-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}

.goal-card-more img {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}

.home-page .goal-ring--compact {
  display: none;
}

.home-metrics {
  grid-area: metrics;
  gap: 16px;
  margin: 0 0 43px;
  border: 0;
}

.home-metrics > div {
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.home-page .home-metrics > div + div {
  padding-left: 0;
  border-left: 1px solid var(--divider);
}

.home-metrics .metric-link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 13px;
  min-height: 88px;
  margin: 0;
  padding: 16px 18px;
}

.home-metrics .metric-link dt {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 5px;
}

.home-metrics .metric-link dd {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.home-metrics .metric-average {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 520;
  letter-spacing: 0;
}

.home-metrics .metric-income dd,
.home-metrics .metric-link dd > span {
  white-space: nowrap;
}

.home-metrics .metric-income dd {
  color: var(--positive);
}

.metric-icon {
  display: grid;
  width: 40px;
  height: 40px;
  grid-column: 1;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.metric-icon::before {
  display: block;
  width: 19px;
  height: 19px;
  background: currentColor;
  content: "";
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.metric-icon--income::before {
  -webkit-mask-image: url("/static/icons/percent.svg");
  mask-image: url("/static/icons/percent.svg");
}

.metric-icon--expense {
  background: color-mix(in srgb, var(--danger) 11%, var(--surface-raised));
  color: var(--danger);
}

.metric-icon--expense::before {
  -webkit-mask-image: url("/static/icons/receipt.svg");
  mask-image: url("/static/icons/receipt.svg");
}

.home-page > .overview-columns {
  grid-template-columns: 1fr;
  gap: 0;
}

.home-page > .overview-columns > section {
  padding: 20px 24px 4px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.home-page > .overview-columns .row-list {
  border-top: 0;
}

.home-page .section-heading {
  min-height: 38px;
}

.home-page .section-heading a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.section-heading-arrow {
  width: 13px;
  height: 13px;
  opacity: 0.72;
  transform: rotate(-90deg);
}

.home-page .finance-row {
  min-height: 70px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.operation-link:hover,
.operation-link:focus-visible,
.more-link:hover,
.more-link:focus-visible {
  background: var(--accent-soft);
}

.operation-trailing strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.more-sections .more-links {
  padding: 0 18px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.more-links .more-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  color: var(--text);
}

.more-link + .more-link { border-top: 1px solid var(--divider); }
.more-link strong { display: block; font-size: 16px; }
.more-link small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 13px; font-weight: 400; }
.more-link-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-soft); }
.more-link-icon img { width: 22px; height: 22px; }
.more-chevron { margin-left: auto; color: var(--text-muted); font-size: 24px; }
.more-import p { color: var(--text-muted); font-size: 14px; }

.more-link-icon--neutral { background: var(--surface); }
.more-link-icon--warm { background: #eee5d6; }

.price-comparison-page { max-width: 900px; }
.price-comparison-heading { margin-bottom: 24px; }
.price-comparison-heading .page-subtitle {
  max-width: 56ch;
  margin: 8px 0 0;
  color: var(--text-muted);
}
.price-comparison-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 132px 174px auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.price-comparison-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.price-comparison-filters label > span:not(.sr-only) {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.price-comparison-filters input,
.price-comparison-filters select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface);
  padding: 0 12px;
}
.price-comparison-filters input:focus,
.price-comparison-filters select:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.price-comparison-filters .secondary-button { min-height: 44px; }
.price-comparison-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}
.price-comparison-summary strong { font-size: 17px; }
.price-comparison-summary span { color: var(--text-muted); font-size: 13px; }
.price-comparison-product { border-bottom: 1px solid var(--divider); }
.price-comparison-product summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 20px;
  min-height: 88px;
  cursor: pointer;
  list-style: none;
}
.price-comparison-product summary::-webkit-details-marker,
.price-comparison-product summary::marker {
  display: none;
  content: "";
}
.price-comparison-product summary > img {
  width: 16px;
  height: 16px;
  opacity: 0.62;
  transition: transform 160ms ease;
}
.price-comparison-product[open] summary > img { transform: rotate(180deg); }
.price-comparison-product-copy { min-width: 0; }
.price-comparison-product-copy h2,
.price-comparison-product-copy p,
.price-comparison-best strong,
.price-comparison-best small {
  margin: 0;
}
.price-comparison-product-copy h2 {
  overflow: hidden;
  font-size: 17px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-comparison-product-copy p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}
.price-comparison-best {
  display: grid;
  justify-items: end;
  white-space: nowrap;
}
.price-comparison-best strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.price-comparison-best small {
  margin-top: 3px;
  color: var(--positive);
  font-size: 12px;
  font-weight: 650;
}
.price-comparison-best small.price-comparison-pending {
  color: var(--text-muted);
}
.price-comparison-stores {
  margin: 0 34px 16px 20px;
  border-top: 1px solid color-mix(in srgb, var(--divider) 75%, transparent);
}
.price-comparison-store {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 75%, transparent);
}
.price-comparison-store span { min-width: 0; }
.price-comparison-store strong,
.price-comparison-store small { display: block; }
.price-comparison-store strong { font-size: 14px; }
.price-comparison-store small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.price-comparison-store b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-comparison-store:first-child b { color: var(--positive); }
.price-comparison-notice {
  margin: 12px 0 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.price-comparison-history {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 680;
}
.price-comparison-empty {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.price-comparison-empty h2 { margin: 0; font-size: 19px; }
.price-comparison-empty p {
  max-width: 56ch;
  margin: 8px 0 20px;
  color: var(--text-muted);
}

.data-checks-page .page-heading { margin-bottom: 26px; }
.data-checks-page .page-heading h1 { margin-top: 10px; }
.data-checks-page .page-subtitle { margin-top: 8px; color: var(--text-muted); }
.data-checks-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.data-checks-summary--warning {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-raised));
}
.data-checks-summary strong { font-size: 17px; }
.data-checks-summary span { color: var(--text-muted); font-size: 14px; }
.data-check-list { margin-top: 24px; border-top: 1px solid var(--divider); }
.data-check {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
}
.data-check-marker {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 750;
}
.data-check--warning .data-check-marker { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }
.data-check--info .data-check-marker { background: var(--surface); color: var(--text-muted); }
.data-check-body { min-width: 0; flex: 1; }
.data-check-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.data-check-heading h2 { font-size: 17px; font-weight: 680; }
.data-check-heading strong { color: var(--accent); font-size: 14px; white-space: nowrap; }
.data-check--warning .data-check-heading strong { color: var(--danger); }
.data-check--info .data-check-heading strong { color: var(--text-muted); }
.data-check-body p { margin-top: 6px; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.data-check-body a { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 14px; font-weight: 680; }
.data-checks-refresh { display: inline-flex; align-items: center; margin-top: 24px; color: var(--text); }

.accuracy-card { margin-top: 34px; padding: 24px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--surface-raised); }
.accuracy-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.accuracy-heading h2 { margin: 3px 0 0; font-size: clamp(22px, 3vw, 29px); }
.accuracy-heading small, .accuracy-intro, .accuracy-note { color: var(--text-muted); }
.accuracy-intro { margin: 10px 0 20px; }
.accuracy-switch { display: grid; grid-template-columns: max-content max-content 1fr; align-items: end; gap: 0 16px; }
.accuracy-switch > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.accuracy-switch > label { padding: 9px 0; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.accuracy-switch > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
#accuracy-history:checked + label, #accuracy-saved:checked + label { color: var(--accent); font-weight: 700; border-color: var(--accent); }
.accuracy-panel { display: none; grid-column: 1 / -1; min-width: 0; padding-top: 18px; }
#accuracy-history:checked ~ .accuracy-panel--history, #accuracy-saved:checked ~ .accuracy-panel--saved { display: block; }
.accuracy-note { margin: 0 0 12px; font-size: 14px; }
.accuracy-summary { margin: 16px 0 6px; }
.accuracy-summary strong { font-size: 23px; color: var(--accent); }
.accuracy-empty { padding: 16px; border-radius: var(--control-radius); background: var(--surface); color: var(--text-muted); }
.accuracy-months { margin-top: 16px; border-top: 1px solid var(--divider); }
.accuracy-month { border-bottom: 1px solid var(--divider); }
.accuracy-month summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 0; cursor: pointer; }
.accuracy-month summary > span:nth-child(2) { color: var(--text-muted); font-size: 14px; }
.accuracy-month summary.accuracy-month-summary--unscored { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.accuracy-month summary.accuracy-month-summary--unscored > span:nth-child(2),
.accuracy-month summary.accuracy-month-summary--unscored strong { grid-column: 1; grid-row: auto; text-align: left; }
.accuracy-month summary.accuracy-month-summary--unscored strong { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.accuracy-amounts > span + span::before { content: " · "; }
.accuracy-month-detail { padding: 0 0 16px; color: var(--text-muted); font-size: 14px; }
.accuracy-month-detail p { margin: 4px 0; }
.accuracy-month-detail a { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 700; }
.accuracy-contributors { list-style: none; padding: 0; margin: 8px 0; }
.accuracy-contributors li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.accuracy-contributors li span { min-width: 0; overflow-wrap: anywhere; }
.accuracy-contributors strong { white-space: nowrap; color: var(--text); }
.accuracy-methods { margin-top: 18px; }
.accuracy-methods summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.accuracy-methods dl { margin: 12px 0 0; }
.accuracy-methods dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); }

@media (max-width: 560px) {
  .price-comparison-filters { grid-template-columns: 1fr 1fr; }
  .price-comparison-search,
  .price-comparison-filters .secondary-button { grid-column: 1 / -1; }
  .price-comparison-product summary {
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 12px;
    padding: 14px 0;
  }
  .price-comparison-best {
    grid-column: 1;
    grid-row: 2;
    justify-items: start;
  }
  .price-comparison-product summary > img {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .price-comparison-stores { margin-right: 28px; margin-left: 0; }
  .price-comparison-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .data-checks-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .data-check-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .accuracy-card { padding: 18px; }
  .accuracy-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .accuracy-switch { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .accuracy-switch > label { font-size: 14px; }
  .accuracy-month summary { grid-template-columns: minmax(0, 1fr) auto; }
  .accuracy-month summary > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .accuracy-amounts > span { display: block; }
  .accuracy-amounts > span + span::before { content: none; }
  .accuracy-month summary strong { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}

.operation-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.operation-main > div {
  min-width: 0;
}

.operation-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.operation-icon::before {
  display: block;
  width: 23px;
  height: 23px;
  background: currentColor;
  content: "";
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 23px 23px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 23px 23px;
}

.operation-icon--income::before {
  -webkit-mask-image: url("/static/icons/percent.svg");
  mask-image: url("/static/icons/percent.svg");
}

.operation-icon--marketplace::before {
  -webkit-mask-image: url("/static/icons/bag.svg");
  mask-image: url("/static/icons/bag.svg");
}

.operation-icon--purchase::before {
  -webkit-mask-image: url("/static/icons/cart.svg");
  mask-image: url("/static/icons/cart.svg");
}

.operation-icon--default::before {
  -webkit-mask-image: url("/static/icons/wallet.svg");
  mask-image: url("/static/icons/wallet.svg");
}

.operation-icon--income {
  background: color-mix(in srgb, var(--positive) 17%, var(--surface-raised));
  color: var(--positive);
}

.operation-icon--purchase {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-raised));
}

.operation-icon--marketplace {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-raised));
}

.operation-icon--default {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.operation-trailing {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.operation-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.62;
  transform: rotate(-90deg);
}

@media (max-width: 960px) and (min-width: 768px) {
  .home-dashboard {
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
    gap: 18px;
  }

  .home-balance .hero-balance strong {
    font-size: clamp(44px, 5vw, 60px);
  }
}

@media (max-width: 767px) {
  .home-page {
    display: flex;
    flex-direction: column;
  }

  .home-heading {
    order: 0;
    margin-bottom: 24px;
  }

  .home-heading h1 {
    font-size: 30px;
  }

  .home-heading > div {
    display: block;
  }

  .home-period {
    margin-top: 5px;
    font-size: 12px;
  }

  .home-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .home-balance {
    order: 1;
    padding: 20px 18px 14px;
  }

  .home-balance .hero-balance {
    padding: 0 0 14px;
  }

  .home-balance .hero-balance strong {
    font-size: clamp(34px, 9vw, 42px);
    white-space: nowrap;
  }

  .home-balance .balance-history {
    min-height: 0;
    margin: 0 -10px;
    padding: 8px 0 0;
  }

  .home-metrics {
    grid-template-columns: 1fr;
    order: 2;
    gap: 12px;
    margin: 23px 0 0;
  }

  .home-dashboard > .goal-card {
    order: 3;
    min-height: 142px;
    margin: 34px 0 34px;
  }

  .home-page > .overview-columns {
    order: 4;
  }

  .operation-main {
    gap: 11px;
  }

  .operation-icon {
    width: 40px;
    height: 40px;
  }

  .operation-trailing {
    gap: 8px;
  }
}

.product-merge-page {
  max-width: 900px;
}

.price-history-merge-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}

.product-merge-heading {
  margin-top: 22px;
}

.product-merge-intro {
  max-width: 58ch;
  margin: 15px 0 32px;
  color: var(--text-muted);
}

.product-merge-existing,
.product-merge-suggestions,
.product-merge-search,
.product-merge-form {
  margin-top: 30px;
}

.product-merge-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.product-merge-section-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.product-merge-section-heading > span {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

.product-merge-suggestion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-merge-suggestion-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.product-merge-suggestion-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}

.product-merge-suggestion-topline > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.product-merge-suggestion-topline > small {
  flex: 0 0 auto;
  color: var(--positive);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.product-merge-suggestion-variants {
  flex: 1 1 auto;
}

.product-merge-suggestion-variants > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
}

.product-merge-suggestion-variants > div + div {
  border-top: 1px solid color-mix(in srgb, var(--divider) 70%, transparent);
}

.product-merge-suggestion-variants span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-merge-suggestion-variants small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.product-merge-suggestion-variants strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.product-merge-suggestion-select {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px;
  padding: 0 14px;
  border-radius: var(--control-radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.product-merge-suggestion-empty {
  margin: 0;
  padding: 15px 17px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
}

.product-merge-existing > h2,
.product-merge-candidates > legend {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.product-merge-group-list {
  border-top: 1px solid var(--divider);
}

.product-merge-group-card {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 13px 0;
  border-bottom: 1px solid var(--divider);
}

.product-merge-group-card h3,
.product-merge-group-card p {
  margin: 0;
}

.product-merge-group-card h3 {
  font-size: 16px;
}

.product-merge-group-card p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 13px;
}

.product-merge-unmerge {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.product-merge-search > label,
.product-merge-name > span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 650;
}

.product-merge-search > div {
  display: flex;
  gap: 10px;
}

.product-merge-search input,
.product-merge-name input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
}

.product-merge-name {
  display: block;
  margin-bottom: 22px;
}

.product-merge-candidates {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.product-merge-candidate {
  border-top: 1px solid var(--divider);
}

.product-merge-candidate:last-of-type {
  border-bottom: 1px solid var(--divider);
}

.product-merge-candidate summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  cursor: pointer;
  list-style: none;
}

.product-merge-candidate summary::-webkit-details-marker,
.product-merge-candidate summary::marker {
  display: none;
  content: "";
}

.product-merge-candidate summary > img {
  width: 15px;
  height: 15px;
  opacity: 0.55;
  transition: transform 160ms ease;
}

.product-merge-candidate[open] summary > img {
  transform: rotate(180deg);
}

.product-merge-candidate input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.product-merge-candidate-copy {
  min-width: 0;
}

.product-merge-candidate-copy strong,
.product-merge-candidate-copy small {
  display: block;
}

.product-merge-candidate-copy strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

.product-merge-candidate-copy small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.product-merge-candidate summary b {
  font-size: 15px;
  white-space: nowrap;
}

.product-merge-purchases {
  margin: 0 28px 12px 34px;
  padding: 7px 14px;
  border-radius: var(--control-radius);
  background: var(--surface-muted);
}

.product-merge-purchases a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
  font-size: 13px;
}

.product-merge-purchases a + a {
  border-top: 1px solid color-mix(in srgb, var(--divider) 75%, transparent);
}

.product-merge-purchases small {
  display: block;
  color: var(--text-muted);
}

.product-merge-submit {
  margin-top: 24px;
}

@media (max-width: 767px) {
  .price-inflation-card {
    padding: 17px;
  }

  .price-inflation-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .price-inflation-metric + .price-inflation-metric {
    padding-left: 16px;
  }

  .price-inflation-metric strong {
    font-size: 26px;
  }

  .price-inflation-breakdown > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .price-history-page .page-heading {
    align-items: flex-end;
  }

  .price-history-merge-link {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }

  .product-merge-intro {
    margin-bottom: 24px;
    font-size: 14px;
  }

  .product-merge-suggestion-list {
    grid-template-columns: 1fr;
  }

  .product-merge-suggestion-card {
    padding: 14px;
  }

  .product-merge-search > div {
    align-items: stretch;
  }

  .product-merge-search .secondary-button {
    min-height: 44px;
    padding: 0 13px;
  }

  .product-merge-candidate summary {
    grid-template-columns: 22px minmax(0, 1fr) 16px;
  }

  .product-merge-candidate summary b {
    grid-column: 2;
    margin-top: 3px;
  }

  .product-merge-candidate summary > img {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .product-merge-purchases {
    margin-right: 0;
    margin-left: 34px;
  }

  .product-merge-submit {
    width: 100%;
  }
}

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

/* Mortgage planning */
.mortgage-page {
  max-width: 1040px;
}

.mortgage-heading {
  display: grid;
  gap: 24px;
  margin-bottom: 30px;
}

.mortgage-heading h1,
.mortgage-heading p,
.mortgage-panel h2 {
  margin: 0;
}

.mortgage-heading h1 {
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.mortgage-heading > div > p:last-child {
  max-width: 680px;
  margin-top: 12px;
  color: var(--text-muted);
}

.mortgage-form {
  display: grid;
  gap: 22px;
}

.mortgage-panel,
.mortgage-result-card,
.mortgage-goal-link {
  min-width: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.mortgage-panel {
  padding: 28px;
}

.mortgage-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.mortgage-panel-heading small {
  color: var(--text-muted);
  text-align: right;
}

.mortgage-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mortgage-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
}

.mortgage-field[hidden] {
  display: none;
}

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

.mortgage-field > span:first-child {
  font-size: 13px;
  font-weight: 650;
}

.mortgage-field input,
.mortgage-field select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
}

.mortgage-field input:focus,
.mortgage-field select:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.mortgage-input-suffix {
  position: relative;
  display: block;
}

.mortgage-input-suffix input {
  padding-right: 38px;
}

.mortgage-input-suffix b {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--text-muted);
  font-weight: 600;
  transform: translateY(-50%);
}

.mortgage-field-note,
.mortgage-field-error {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.mortgage-field-note {
  color: var(--text-muted);
}

.mortgage-confirmation {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--control-radius);
  background: var(--surface-muted);
  font-size: 13px;
  line-height: 1.4;
}

.mortgage-confirmation input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
}

.mortgage-field-error,
.mortgage-form-error {
  color: var(--danger);
}

.mortgage-extra {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}

.mortgage-extra > summary {
  min-height: 44px;
  cursor: pointer;
  font-weight: 680;
}

.mortgage-extra > summary span,
.mortgage-extra > summary small {
  display: block;
}

.mortgage-extra > summary small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.mortgage-extra > .mortgage-fields {
  margin-top: 16px;
}

.mortgage-context-note,
.mortgage-disclaimer {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.mortgage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.mortgage-actions button {
  min-height: 48px;
}

.mortgage-notice,
.mortgage-form-error,
.mortgage-stale {
  margin: 0;
  padding: 12px 15px;
  border-radius: var(--control-radius);
  font-size: 14px;
  font-weight: 650;
}

.mortgage-notice {
  background: var(--accent-soft);
  color: var(--positive);
}

.mortgage-form-error,
.mortgage-stale {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-raised));
}

.mortgage-results {
  display: grid;
  gap: 22px;
}

.mortgage-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mortgage-result-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px;
}

.mortgage-result-card--primary {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--divider));
  background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface-raised));
}

.mortgage-result-card > span,
.mortgage-result-card small {
  color: var(--text-muted);
  font-size: 13px;
}

.mortgage-result-card strong {
  overflow-wrap: anywhere;
  font-size: clamp(23px, 3vw, 34px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.mortgage-section-lead {
  max-width: 58ch;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.mortgage-rate-scenario-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mortgage-rate-scenario-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mortgage-rate-scenario-table th,
.mortgage-rate-scenario-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--divider);
  text-align: right;
  vertical-align: top;
}

.mortgage-rate-scenario-table thead th {
  padding-top: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.mortgage-rate-scenario-table th:first-child,
.mortgage-rate-scenario-table td:first-child {
  padding-left: 0;
  text-align: left;
}

.mortgage-rate-scenario-table tbody th {
  font-weight: 700;
}

.mortgage-rate-scenario-table tbody tr.is-current {
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
}

.mortgage-rate-scenario-table td strong,
.mortgage-rate-scenario-table td small {
  display: block;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.mortgage-rate-scenario-table td small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.mortgage-rate-scenario-table td strong.is-negative {
  color: var(--danger);
}

.mortgage-rate-scenario-action button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.mortgage-rate-scenario-action button:hover {
  border-color: var(--accent);
}

.mortgage-rate-scenario-action button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mortgage-savings-panel {
  display: grid;
  gap: 18px;
}

.mortgage-savings-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 190px;
}

.mortgage-savings-chart text {
  fill: var(--text-muted);
  font-size: 12px;
}

.mortgage-savings-chart line {
  stroke: var(--divider);
  stroke-width: 1;
}

.mortgage-savings-chart polyline {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.mortgage-scenario-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mortgage-scenario-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
}

.mortgage-scenario-card--ready {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--divider));
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface-raised));
}

.mortgage-scenario-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mortgage-scenario-heading > div,
.mortgage-scenario-heading strong {
  display: grid;
  gap: 3px;
}

.mortgage-scenario-heading span {
  font-weight: 700;
}

.mortgage-scenario-heading small,
.mortgage-scenario-heading strong small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.mortgage-scenario-heading strong {
  flex: 0 0 auto;
  color: var(--positive);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mortgage-scenario-card dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.mortgage-scenario-card dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mortgage-scenario-card dt,
.mortgage-scenario-note {
  color: var(--text-muted);
  font-size: 12px;
}

.mortgage-scenario-card dd {
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  text-align: right;
}

.mortgage-scenario-note {
  margin: 0;
  line-height: 1.4;
}

.mortgage-capital-target {
  margin: 0;
  color: var(--text-muted);
}

.mortgage-capital-target strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mortgage-variants {
  display: grid;
  gap: 18px;
}

.mortgage-variant-cards {
  display: none;
}

.mortgage-variant-table-wrap {
  overflow-x: auto;
}

.mortgage-variant-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.mortgage-variant-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.mortgage-variant-table th,
.mortgage-variant-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

.mortgage-variant-table th:first-child {
  width: 25%;
}

.mortgage-variant-table td {
  font-weight: 650;
}

.mortgage-variant-editors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mortgage-variant-editors .mortgage-extra {
  min-width: 0;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  padding: 12px;
}

.mortgage-variant-editors form {
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.mortgage-variant-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mortgage-variant-presets button {
  padding: 6px 10px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}

.mortgage-variant-delete,
.mortgage-goal-copy {
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 680;
  cursor: pointer;
}

.mortgage-variant-delete {
  color: var(--danger);
}

.mortgage-goal-link > div:nth-child(2) {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.mortgage-strategy-comparison {
  display: grid;
  gap: 20px;
}

.mortgage-strategy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mortgage-strategy-card {
  --strategy-color: var(--text-muted);
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
}

.mortgage-strategy-card--term {
  --strategy-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--divider));
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-raised));
}

.mortgage-strategy-card--payment {
  --strategy-color: color-mix(in srgb, var(--accent) 64%, var(--text-muted));
}

.mortgage-strategy-card--reinvested {
  --strategy-color: color-mix(in srgb, var(--accent) 72%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--divider));
}

.mortgage-strategy-card > div {
  display: grid;
  gap: 5px;
}

.mortgage-strategy-card span,
.mortgage-strategy-card small {
  color: var(--text-muted);
  font-size: 12px;
}

.mortgage-strategy-card strong {
  flex: 0 0 auto;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.mortgage-strategy-meter {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: var(--surface-muted);
}

.mortgage-strategy-meter::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--surface-muted);
}

.mortgage-strategy-meter::-webkit-progress-value {
  border-radius: 999px;
  background: var(--strategy-color);
}

.mortgage-strategy-meter::-moz-progress-bar {
  border-radius: 999px;
  background: var(--strategy-color);
}

.mortgage-big-number {
  margin: 0 0 14px;
  overflow-wrap: anywhere;
  color: var(--positive);
  font-size: clamp(34px, 6vw, 56px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.mortgage-big-number.is-negative {
  color: var(--danger);
}

.mortgage-big-number small {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 560;
  letter-spacing: 0;
}

.mortgage-status,
.mortgage-empty-result {
  margin: 0 0 18px;
  color: var(--text-muted);
}

.mortgage-status--danger,
.mortgage-status--warning {
  color: var(--danger);
  font-weight: 650;
}

.mortgage-status--positive {
  color: var(--positive);
  font-weight: 650;
}

.mortgage-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--divider);
}

.mortgage-breakdown div {
  min-width: 0;
  padding: 14px;
  background: var(--surface-raised);
}

.mortgage-breakdown dt {
  color: var(--text-muted);
  font-size: 12px;
}

.mortgage-breakdown dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.mortgage-goal-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
}

.mortgage-goal-link span,
.mortgage-goal-link small,
.mortgage-goal-link strong {
  display: block;
}

.mortgage-goal-link span,
.mortgage-goal-link small {
  color: var(--text-muted);
  font-size: 12px;
}

.mortgage-goal-link strong {
  margin: 3px 0;
  font-size: 18px;
}

.mortgage-goal-link a {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 680;
}

.mortgage-rates {
  margin-top: 28px;
}

.mortgage-rates-heading {
  align-items: flex-end;
}

.mortgage-rate-period {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.mortgage-rate-period label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 680;
}

.mortgage-rate-period select {
  min-height: 44px;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  color: var(--text);
  background: var(--surface);
  font: inherit;
}

.mortgage-rate-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 14px;
  min-width: 0;
}

.mortgage-rate-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
}

.mortgage-rate-card.is-stale {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--divider));
}

.mortgage-rate-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mortgage-rate-card-heading > div,
.mortgage-rate-card-heading > div span,
.mortgage-rate-card-heading > div small {
  display: block;
  min-width: 0;
}

.mortgage-rate-card-heading > div span {
  font-weight: 760;
  line-height: 1.25;
}

.mortgage-rate-card-heading > div small,
.mortgage-rate-period-label,
.mortgage-rate-change,
.mortgage-rate-source-status {
  color: var(--text-muted);
  font-size: 12px;
}

.mortgage-rate-card-heading > div small {
  margin-top: 4px;
}

.mortgage-rate-card-heading > strong {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: clamp(22px, 4vw, 30px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mortgage-rate-period-label,
.mortgage-rate-change,
.mortgage-rate-source-status {
  margin: 12px 0 0;
}

.mortgage-rate-warning {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 680;
}

.mortgage-rate-source-link {
  display: inline-block;
  max-width: 100%;
  margin-top: 10px;
  color: var(--accent);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.mortgage-rate-comparison {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}

.mortgage-rate-comparison > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.mortgage-rate-comparison dt {
  color: var(--text-muted);
  font-size: 12px;
}

.mortgage-rate-comparison dd {
  margin: 0;
  text-align: right;
  font-size: 13px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.mortgage-rate-comparison dd small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 560;
}

.mortgage-rate-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
}

.mortgage-rate-chart line {
  stroke: var(--divider);
  stroke-width: 1;
}

.mortgage-rate-chart polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mortgage-rate-history {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.mortgage-rate-history li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--divider);
  font-size: 12px;
}

.mortgage-rate-history strong {
  font-variant-numeric: tabular-nums;
}

.mortgage-rate-apply {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--surface);
  background: var(--accent);
  font: inherit;
  font-weight: 720;
  cursor: pointer;
}

.mortgage-manual-rates {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.mortgage-manual-rates > summary {
  color: var(--accent);
  font-weight: 720;
  cursor: pointer;
}

.mortgage-manual-rates > .mortgage-field-note {
  margin: 10px 0 16px;
}

.mortgage-rate-manual-fields {
  margin-top: 14px;
}

.mortgage-rate-manual-fields input,
.mortgage-rate-manual-fields select {
  min-width: 0;
}

@media (max-width: 900px) {
  .mortgage-rate-scenario-table,
  .mortgage-rate-scenario-table tbody {
    display: block;
  }

  .mortgage-rate-scenario-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .mortgage-rate-scenario-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--divider);
    border-radius: var(--control-radius);
  }

  .mortgage-rate-scenario-table th,
  .mortgage-rate-scenario-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .mortgage-rate-scenario-table tbody th {
    grid-column: 1 / -1;
    font-size: 16px;
  }

  .mortgage-rate-scenario-table td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    content: attr(data-label);
    font-size: 11px;
  }

  .mortgage-rate-scenario-table .mortgage-rate-scenario-action {
    grid-column: 1 / -1;
  }

  .mortgage-rate-scenario-table .mortgage-rate-scenario-action::before {
    display: none;
  }

  .mortgage-rate-scenario-action button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .mortgage-variant-table-wrap {
    display: none;
  }

  .mortgage-variant-cards {
    display: grid;
    gap: 12px;
  }

  .mortgage-variant-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--divider);
    border-radius: var(--control-radius);
    background: var(--surface-raised);
  }

  .mortgage-variant-card h3 {
    margin: 0 0 4px;
    font-size: 18px;
  }

  .mortgage-variant-status {
    margin: 0 0 14px;
    color: var(--danger);
    font-size: 13px;
  }

  .mortgage-variant-status.is-ready {
    color: var(--positive);
  }

  .mortgage-variant-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
  }

  .mortgage-variant-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--divider);
    padding-top: 8px;
    font-size: 12px;
  }

  .mortgage-variant-card dt {
    color: var(--text-muted);
  }

  .mortgage-variant-card dd {
    margin: 0;
    text-align: right;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
  }

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

  .mortgage-page {
    padding-right: 18px;
    padding-left: 18px;
  }

  .mortgage-panel {
    padding: 20px 16px;
  }

  .mortgage-fields,
  .mortgage-summary-grid,
  .mortgage-strategy-list,
  .mortgage-scenario-list,
  .mortgage-breakdown {
    grid-template-columns: minmax(0, 1fr);
  }

  .mortgage-panel-heading,
  .mortgage-goal-link {
    align-items: flex-start;
    flex-direction: column;
  }

  .mortgage-panel-heading small {
    text-align: left;
  }

  .mortgage-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mortgage-actions button {
    width: 100%;
  }

  .mortgage-rates-heading {
    align-items: stretch;
  }

  .mortgage-rate-period {
    width: 100%;
  }

  .mortgage-rate-period label {
    flex: 1;
  }

  .mortgage-rate-period select {
    width: 100%;
  }
}

/* Mortgage page layout */
.mortgage-page {
  max-width: 1160px;
}

.mortgage-heading {
  gap: 14px;
  margin-bottom: 20px;
}

.mortgage-heading h1 {
  font-size: clamp(36px, 5vw, 54px);
}

.mortgage-heading > div > p:last-child {
  margin-top: 8px;
  font-size: 14px;
}

.mortgage-section-nav {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-muted);
}

.mortgage-page[data-mortgage-ready="true"] .mortgage-section-nav {
  display: grid;
}

.mortgage-section-nav button {
  min-width: 0;
  min-height: 44px;
  padding: 9px 7px;
  border: 0;
  border-radius: calc(var(--control-radius) - 3px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.mortgage-section-nav button[aria-pressed="true"] {
  background: var(--surface-raised);
  color: var(--accent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 8%, transparent);
}

.mortgage-section-nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-mortgage-section][hidden] {
  display: none !important;
}

.mortgage-form {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: 18px;
}

.mortgage-input-column,
.mortgage-results {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.mortgage-panel {
  padding: 22px;
}

.mortgage-panel-heading {
  margin-bottom: 17px;
}

.mortgage-parameters .mortgage-panel-heading {
  display: block;
}

.mortgage-parameters .mortgage-panel-heading small {
  display: block;
  margin-top: 7px;
  text-align: left;
}

.mortgage-fields {
  gap: 13px;
}

.mortgage-fields--main > :first-child {
  grid-column: 1 / -1;
}

.mortgage-more-parameters {
  margin-top: 16px;
  padding-top: 12px;
}

.mortgage-parameters .mortgage-extra:not(.mortgage-more-parameters) {
  margin-top: 16px;
  padding-top: 12px;
}

.mortgage-more-parameters > summary {
  color: var(--accent);
  font-size: 13px;
}

.mortgage-purchase-entry .mortgage-extra {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.mortgage-extra-entry > .mortgage-notice {
  margin-top: 14px;
}

.mortgage-target {
  margin-top: 20px;
  padding-top: 16px;
}

.mortgage-target > summary {
  color: var(--accent);
  font-size: 14px;
}

.mortgage-target-note,
.mortgage-target-stale {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.mortgage-target-stale {
  color: var(--danger);
}

.mortgage-target-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.mortgage-target-presets button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mortgage-target-presets button[hidden] {
  display: none;
}

.mortgage-target-presets button:focus-visible,
.mortgage-target > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.mortgage-target-fields {
  margin-top: 16px;
}

.mortgage-target-submit,
.mortgage-target-apply {
  width: 100%;
  margin-top: 16px;
}

.mortgage-target-result {
  min-width: 0;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--divider));
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface-raised));
}

.mortgage-target-kicker {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.mortgage-target-amount {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.mortgage-target-facts {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}

.mortgage-target-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--divider);
  padding-top: 8px;
}

.mortgage-target-facts dt {
  color: var(--text-muted);
}

.mortgage-target-facts dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mortgage-target-budget {
  margin: 16px 0 0;
  font-weight: 700;
}

.mortgage-target-budget.is-negative {
  color: var(--danger);
}

.mortgage-actions {
  margin-top: 0;
}

.mortgage-actions button {
  flex: 1 1 175px;
}

.mortgage-overview {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--divider));
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.mortgage-overview-scenario {
  margin: 0;
  padding: 20px 24px 0;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface-raised));
  font-size: 13px;
  font-weight: 700;
}

.mortgage-overview-scenario + .mortgage-overview-primary {
  padding-top: 12px;
}

.mortgage-overview-primary {
  display: grid;
  gap: 8px;
  padding: 24px;
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface-raised));
}

.mortgage-overview-primary span,
.mortgage-overview-primary small,
.mortgage-overview-facts dt {
  color: var(--text-muted);
  font-size: 13px;
}

.mortgage-overview-primary strong {
  overflow-wrap: anywhere;
  font-size: clamp(27px, 4vw, 42px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.mortgage-overview-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.mortgage-overview-facts div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--divider);
}

.mortgage-overview-facts div:nth-child(odd) {
  border-right: 1px solid var(--divider);
}

.mortgage-overview-facts div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: 0;
}

.mortgage-overview-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mortgage-rate-scenarios > summary,
.mortgage-deep-disclosure > summary {
  min-height: 28px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 720;
  cursor: pointer;
}

.mortgage-rate-scenarios > summary:focus-visible,
.mortgage-deep-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.mortgage-rate-scenarios[open] .mortgage-rate-scenario-table,
.mortgage-deep-disclosure[open] .mortgage-variant-cards,
.mortgage-deep-disclosure[open] .mortgage-rate-cards {
  margin-top: 20px;
}

.mortgage-deep-disclosure > .mortgage-panel-heading {
  margin-top: 18px;
}

.mortgage-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.mortgage-next-step p {
  margin: 0;
}

.mortgage-next-step button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-raised);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.mortgage-extra-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.mortgage-extra-example {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--surface-muted);
}

.mortgage-extra-example span {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.mortgage-extra-example strong {
  font-size: 24px;
  letter-spacing: -0.035em;
}

.mortgage-extra-example small {
  color: var(--text-muted);
  line-height: 1.35;
}

.mortgage-rate-scenarios {
  order: 2;
}

.mortgage-budget {
  order: 3;
}

.mortgage-readiness {
  order: 1;
}

.mortgage-savings-panel {
  order: 2;
}

.mortgage-goal-link {
  order: 3;
}

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

  .mortgage-input-column,
  .mortgage-results {
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  .mortgage-extra-examples-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mortgage-heading {
    margin-bottom: 18px;
  }

  .mortgage-page .mortgage-panel {
    padding: 18px 16px;
  }

  .mortgage-page .mortgage-fields--main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mortgage-section-nav button {
    font-size: 13px;
  }

  .mortgage-overview-primary {
    padding: 20px;
  }

  .mortgage-overview-facts dd {
    font-size: 15px;
  }

  .mortgage-next-step {
    align-items: flex-start;
    flex-direction: column;
  }

  .mortgage-next-step button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .mortgage-fields--main > .mortgage-field:not(:first-child) > span:first-child {
    min-height: 2lh;
  }
}

.savings-accuracy h3 { margin: 24px 0 12px; font-size: 17px; }
.savings-month { border-top: 1px solid var(--divider); }
.savings-month > summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.savings-month > summary::-webkit-details-marker { display: none; }
.savings-month-title { font-weight: 700; }
.savings-month-title::before { content: '▸ '; color: var(--accent); }
.savings-month[open] > summary .savings-month-title::before { content: '▾ '; }
.savings-month small { display: block; color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.savings-month-pair strong { display: block; margin-top: 4px; }
.savings-month-detail { padding: 0 0 20px; }
.savings-balance-facts { margin: 16px 0; }
.savings-balance-facts > div, .savings-drivers > li {
  display: flex; justify-content: space-between; gap: 20px; padding: 8px 0;
}
.savings-balance-facts dt { color: var(--text-muted); }
.savings-balance-facts dd { margin: 0; font-weight: 600; text-align: right; }
.savings-drivers { list-style: none; padding: 0; }
.savings-component { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 16px; padding: 12px 0; border-top: 1px solid var(--divider); }
.savings-month span, .savings-month strong, .savings-month dt, .savings-month dd { min-width: 0; overflow-wrap: anywhere; }
.savings-month > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 767px) {
  .savings-month > summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .savings-month-pair { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .savings-month-pair strong { margin: 0; text-align: right; }
  .savings-balance-facts > div, .savings-drivers > li { flex-direction: column; gap: 4px; }
  .savings-balance-facts dd { text-align: left; }
  .savings-component { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .savings-component > strong { grid-column: 1 / -1; }
}