/* Components: button, card, field, list-row, badge, money, alert, empty-state, sign-in. */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-4);
  border: var(--border-w) solid var(--c-border); border-radius: var(--radius-m);
  background: var(--c-surface); color: var(--c-text);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.b-btn:disabled { opacity: .55; cursor: default; }
.b-btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.b-btn--ghost { background: transparent; border-color: transparent; color: inherit; }
.b-btn--small { min-height: var(--tap); padding: 0 var(--space-3); font-size: var(--fs-s); }
.b-btn--block { width: 100%; }

.b-card {
  padding: var(--space-4);
  background: var(--c-surface);
  border: var(--border-w) solid transparent; border-radius: var(--radius-card);
}
.b-card__title { margin-bottom: var(--space-3); }
a.b-card { display: block; color: inherit; text-decoration: none; }

.b-field { display: flex; flex-direction: column; gap: var(--space-1); }
.b-field__label { font-size: var(--fs-s); font-weight: 600; }
.b-field__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.b-input, .b-select {
  min-height: var(--tap); width: 100%;
  padding: 0 var(--space-3);
  background: var(--c-surface);
  border: var(--border-w) solid var(--c-border); border-radius: var(--radius-s);
}
.b-input.invalid, .b-select.invalid { border-color: var(--c-out); }

.b-list { list-style: none; margin: 0; padding: 0; background: var(--c-surface); border-radius: var(--radius-card); overflow: hidden; }
.b-list-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding: var(--space-3) var(--space-4);
}
.b-list-row + .b-list-row { border-top: var(--border-w) solid var(--c-border); }
.b-list-row__main { flex: 1; min-width: 0; }
.b-list-row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-list-row__meta { font-size: var(--fs-s); color: var(--c-muted); }

.b-badge {
  display: inline-block; padding: 0 var(--space-2);
  border-radius: var(--radius-round);
  background: var(--c-overlay); color: var(--c-muted);
  font-size: var(--fs-xs); font-weight: 600;
}

.b-money { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: 600; }
.b-money--in { color: var(--c-in); }
.b-money--out { color: var(--c-out); }

.b-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--c-out-soft); color: var(--c-text);
  border-left: 4px solid var(--c-out);
}
.b-alert ul { margin: 0; padding-left: var(--space-4); }

.b-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--c-muted); }

.b-signin { width: 100%; max-width: 360px; text-align: center; }
.b-signin__logo { margin: 0 auto var(--space-4); border-radius: var(--radius-l); }
.b-signin h1 { font-size: var(--fs-hero); margin-bottom: var(--space-1); }

/* Badge tones (status chips): colour + word, never colour alone. */
.b-badge--info { color: var(--c-info); }
.b-badge--warn { color: var(--c-warn); }
.b-badge--primary { color: var(--c-primary); }
.b-badge--in { color: var(--c-in); }
.b-badge--muted { color: var(--c-muted); }

.b-list-row--link { color: inherit; text-decoration: none; }
.b-list > li + li { border-top: var(--border-w) solid var(--c-border); }
.b-list > li > .b-list-row { display: flex; }

.b-textarea { min-height: calc(var(--tap) * 2); padding: var(--space-2) var(--space-3); resize: vertical; }
.b-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.b-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-s); }

/* Chips (single choice) */
.b-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.b-chip {
  min-height: var(--tap); padding: 0 var(--space-4);
  border: var(--border-w) solid var(--c-border); border-radius: var(--radius-round);
  background: var(--c-surface); color: var(--c-text); font-weight: 600; cursor: pointer;
}
.b-chip--on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }

/* Feedback: floating button, bottom sheet, thumbnails, toast */
.b-fab {
  position: fixed; z-index: 20;
  right: var(--space-4); bottom: calc(var(--nav-h) + var(--space-4) + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 0; border-radius: var(--radius-round);
  background: var(--c-primary); color: var(--c-primary-ink);
  box-shadow: var(--shadow-2); cursor: pointer;
}
.b-fab svg { width: 26px; height: 26px; }
.b-fab:disabled { opacity: .6; cursor: progress; }

.b-sheet__backdrop { position: fixed; inset: 0; z-index: 30; background: var(--c-scrim); }
.b-sheet {
  position: fixed; z-index: 31; inset: auto 0 0 0;
  max-height: 90dvh; overflow-y: auto;
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  background: var(--c-surface);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  box-shadow: var(--shadow-2);
}
.b-sheet__title { margin-bottom: var(--space-4); }
.b-row--end { justify-content: flex-end; }

.b-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.b-thumb {
  position: relative; margin: 0; width: 96px;
  color: var(--c-muted); font-size: var(--fs-xs); text-decoration: none;
}
.b-thumb img {
  width: 96px; height: 96px; object-fit: cover; object-position: top;
  border: var(--border-w) solid var(--c-border); border-radius: var(--radius-m);
}
.b-thumb figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-thumb__remove {
  position: absolute; top: calc(var(--space-2) * -1); right: calc(var(--space-2) * -1);
  width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-round);
  background: var(--c-text); color: var(--c-bg); font-size: var(--fs-l); line-height: 1; cursor: pointer;
}

.b-toast {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--space-5) + env(safe-area-inset-bottom));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-round);
  background: var(--c-text); color: var(--c-bg); font-weight: 600;
  box-shadow: var(--shadow-2);
}

/* Feedback thread */
.b-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.b-thread__item { padding: var(--space-3) var(--space-4); background: var(--c-surface); border: var(--border-w) solid var(--c-border); border-radius: var(--radius-m); }
.b-thread__item--claude { border-left: 4px solid var(--c-primary); }
.b-thread__who { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); margin-bottom: var(--space-1); }

@media (min-width: 900px) {
  .b-fab { bottom: var(--space-5); right: var(--space-5); }
  .b-toast { bottom: var(--space-6); }
  .b-sheet { inset: auto auto var(--space-5) 50%; transform: translateX(-50%); width: min(560px, 90vw); border-radius: var(--radius-l); }
}

.b-field--check { flex-direction: row; align-items: center; gap: var(--space-2); min-height: var(--tap); }
.b-field--check input { width: 22px; height: 22px; }
.b-input--colour { width: var(--tap); padding: var(--space-1); }
.b-dot { flex: none; width: 14px; height: 14px; border-radius: var(--radius-round); border: var(--border-w) solid var(--c-border); }

/* ---- Screens matched to docs/design (Main, Inbox, WhatIf, Budget) ---- */
.b-row--between { justify-content: space-between; }
.b-icon-btn {
  display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0;
  border: 0; border-radius: var(--radius-round); background: transparent; color: inherit; font-size: var(--fs-ml); cursor: pointer;
}
.b-icon-btn:disabled { opacity: .4; }
.b-period-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: calc(var(--space-2) * -1); }
.b-pill {
  flex: none; min-height: var(--tap); padding: 0 var(--space-3);
  border: var(--border-w) solid var(--c-border-strong); border-radius: var(--radius-round);
  background: var(--c-surface); color: var(--c-text); font-size: var(--fs-s); font-weight: 600; cursor: pointer;
}

/* Home hero: blue card, uppercase label, big number, three translucent tiles */
.b-hero {
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--gutter); border-radius: var(--radius-l);
  background: var(--c-hero); color: var(--c-hero-ink);
}
.b-hero__top { display: flex; flex-direction: column; gap: 2px; }
.b-hero__label { font-size: var(--fs-s); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.b-hero__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: 1.1; }
.b-hero__value .b-money { text-align: left; font-weight: 800; }
.b-hero__note { font-size: var(--fs-sm); opacity: .9; }
.b-hero__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } /* D41.1: 4 tiles, 2 × 2 on a phone */
@media (min-width: 600px) { .b-hero__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-hero__tile { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--radius-m); background: var(--c-hero-tile); min-width: 0; }
.b-hero__tile-label { font-size: var(--fs-xs); opacity: .85; }
.b-hero__tile .b-money { text-align: left; font-weight: 700; font-size: var(--fs-ml); }

/* Inbox banner (warm) */
.b-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--c-warn-soft); color: var(--c-warn-soft-ink);
  text-decoration: none; font-weight: 600; font-size: var(--fs-m);
}

/* Sections + white panels */
.b-section { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2); }
.b-section h2 { margin: 0; }
.b-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.b-section__hint { font-size: var(--fs-s); color: var(--c-muted); }
.b-panel { margin: 0; padding: 14px; list-style: none; background: var(--c-surface); border-radius: var(--radius-card); }
.b-panel__title { margin: 0; font-family: var(--font); font-size: var(--fs-m); font-weight: 600; }

/* "The curve": bars up (left over) / down (short) from a zero line */
.b-curve { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; height: var(--curve-h); }
.b-curve__col { display: flex; flex-direction: column; height: var(--curve-h); }
.b-curve__col--up { justify-content: flex-end; padding-bottom: calc(var(--curve-h) / 2); }
.b-curve__col--down { justify-content: flex-start; padding-top: calc(var(--curve-h) / 2); }
.b-curve__bar { background: var(--c-in); border-radius: var(--radius-s) var(--radius-s) 0 0; }
.b-curve__col--down .b-curve__bar { background: var(--c-out-bar); border-radius: 0 0 var(--radius-s) var(--radius-s); }
.b-curve__axis { position: absolute; left: 0; right: 0; top: calc(var(--curve-h) / 2); height: var(--border-w); background: var(--c-axis); }
.b-curve__labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.b-curve__label--now { font-weight: 700; color: var(--c-text); }

/* Bars (where it went, budget) */
.b-bars { padding-top: 6px; padding-bottom: 6px; }
.b-bars__row { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) 0; }
.b-bars__row + .b-bars__row { border-top: var(--border-w) solid var(--c-border); }
.b-bars__head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-m); }
.b-bars__head .b-money { font-weight: 600; }
.b-bar { height: var(--bar-h); border-radius: 3px; background: var(--c-border); overflow: hidden; }
.b-bar__fill { height: 100%; border-radius: 3px; background: var(--c-info); }
.b-bar--l { height: var(--bar-h-l); border-radius: 4px; }
.b-bar--over .b-bar__fill { background: var(--c-warn); }
.b-over { font-size: var(--fs-s); font-weight: 600; color: var(--c-warn-ink); }

/* Inbox cards + chip buttons */
.b-inbox { display: flex; flex-direction: column; gap: 10px; }
.b-inbox__head { display: flex; justify-content: space-between; gap: 10px; }
.b-inbox__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-inbox__name { font-weight: 700; font-size: var(--fs-m); overflow-wrap: anywhere; }
.b-inbox__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.b-inbox__head .b-money { font-weight: 700; }
.b-hint { font-size: var(--fs-s); color: var(--c-warn-soft-ink); background: var(--c-warn-soft); border-radius: 10px; padding: var(--space-2) 10px; }
.b-chip-btn {
  min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-m);
  border: var(--border-w) solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.b-chip-btn--primary { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-primary-ink); }
.b-chip-btn:disabled { opacity: .5; cursor: default; }
.b-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--fs-sm); color: var(--c-text-soft); }
.b-check input { width: 20px; height: 20px; accent-color: var(--c-primary); }
.b-split .b-row > .b-select { flex: 1; min-width: 0; }
.b-input--money { width: 120px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.b-input--file { padding: var(--space-2); }

/* What-if: segmented tabs, sliders, legend, blue result tiles, warm note */
.b-segments { display: flex; gap: 6px; padding: var(--space-1); border-radius: var(--radius-m); background: var(--c-segment); }
.b-segment {
  flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent;
  color: var(--c-text-soft); font-size: var(--fs-s); font-weight: 600; cursor: pointer;
}
.b-segment--on { background: var(--c-surface); color: var(--c-text); font-weight: 700; }
.b-slider { display: flex; flex-direction: column; gap: var(--space-2); }
.b-slider__head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-m); font-weight: 600; }
.b-slider__head .b-money { font-weight: 700; }
.b-slider__ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-muted); }
.b-range { width: 100%; min-height: var(--tap); accent-color: var(--c-primary); }
.b-legend { display: flex; gap: 10px; font-size: var(--fs-xs); color: var(--c-text-soft); }
.b-legend > span { display: flex; align-items: center; gap: var(--space-1); }
.b-legend__swatch { display: inline-block; width: 14px; height: 3px; background: var(--c-primary); }
.b-legend__swatch--muted { background: var(--c-line-muted); }
.b-result { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius-card); background: var(--c-hero); color: var(--c-hero-ink); min-width: 0; }
.b-result__label { font-size: var(--fs-s); opacity: .9; }
.b-result__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); }
.b-result__value .b-money { text-align: left; font-weight: 800; }
.b-result__sub { font-size: var(--fs-s); opacity: .9; }
.b-result__sub .b-money { text-align: left; font-weight: 600; }
.b-note { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 14px; border-radius: 14px; background: var(--c-warn-soft); color: var(--c-warn-soft-ink); font-size: var(--fs-sm); }
.b-note__title { font-weight: 700; }
.b-footnote { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }

/* Budget tiles */
.b-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius-card); background: var(--c-surface); min-width: 0; }
.b-stat__label { font-size: var(--fs-s); color: var(--c-muted); }
.b-stat__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-big); }
.b-stat__value .b-money { text-align: left; font-weight: 800; }
.b-coming { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-sm); }
.b-coming .b-money { font-weight: 400; }

/* Shared bits used by Import / Transactions / tables */
.b-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.b-tile { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; padding: var(--space-3) var(--space-2); background: var(--c-overlay); border-radius: var(--radius-m); min-width: 0; }
.b-tile__label { font-size: var(--fs-xs); color: var(--c-muted); }
.b-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.b-period__label { font-weight: 600; }
.b-period__spacer { flex: 1; }
.b-chip--small { min-height: var(--tap); padding: 0 var(--space-3); font-size: var(--fs-s); }
.b-list--plain { border: 0; background: transparent; }
.b-list-row--compact { min-height: var(--tap); padding: var(--space-2) 0; }
.b-day { font-family: var(--font); font-size: var(--fs-s); font-weight: 600; color: var(--c-muted); margin: var(--space-3) 0 var(--space-2); }
.b-chart { position: relative; width: 100%; }
.b-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.b-table th, .b-table td { padding: var(--space-2); border-bottom: var(--border-w) solid var(--c-border); text-align: left; vertical-align: top; }
.b-table td .b-money { text-align: left; }
.b-ok { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); border-left: 4px solid var(--c-in); background: var(--c-overlay); }
/* Budget extras */
.b-strong { font-weight: 600; }
.b-amounts { font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-amounts .b-money { font-weight: 400; }
.b-edit summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.b-edit[open] summary { margin-bottom: var(--space-2); }.b-after__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: var(--tap); font-weight: 600; cursor: pointer; }
.b-after__head .b-money { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-l); }
.b-after[open] .b-after__head { margin-bottom: var(--space-2); }
/* Slip screen (docs/design/Slip.dc.html) + add sheet */
.b-slip { padding-bottom: calc(var(--space-6) * 2); }
.b-slip__top { display: flex; gap: var(--space-3); }
.b-slip__photo { flex: none; width: 96px; height: 128px; border-radius: var(--radius-m); overflow: hidden; background: var(--c-segment); display: grid; place-items: center; font-size: var(--fs-xs); color: var(--c-muted); }
.b-slip__photo img { width: 100%; height: 100%; object-fit: cover; }
.b-slip__facts { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.b-inline { width: 100%; min-height: var(--tap); padding: 0 var(--space-1); border: var(--border-w) solid transparent; border-radius: var(--radius-s); background: transparent; color: inherit; }
.b-inline:hover, .b-inline:focus { border-color: var(--c-border-strong); background: var(--c-surface); }
.b-slip__merchant { font-weight: 700; font-size: var(--fs-l); }
.b-slip__date { font-size: var(--fs-sm); color: var(--c-text-soft); }
.b-slip__total { display: flex; align-items: baseline; gap: var(--space-1); font-family: var(--font-display); font-weight: 800; font-size: 1.625rem; }
.b-slip__total-input { font: inherit; font-variant-numeric: tabular-nums; }
.b-slip__amount { display: flex; align-items: baseline; gap: 2px; font-weight: 600; white-space: nowrap; }
.b-slip__amount-input { width: 96px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.b-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 5px var(--space-2); border-radius: var(--space-2); font-size: var(--fs-s); font-weight: 600; }
.b-tag--ok { color: var(--c-ok-ink); background: var(--c-ok-soft); }
.b-tag--warn { color: var(--c-warn-soft-ink); background: var(--c-warn-soft); }
.b-chip-btn--small { min-height: var(--tap); padding: 0 10px; border-radius: 10px; font-size: var(--fs-s); }
.b-chip-btn--cat { border-color: var(--c-primary-soft-border); background: var(--c-primary-soft); }
.b-check--small { min-height: var(--tap); font-size: var(--fs-s); }
.b-pick { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); width: 100%; }
.b-sumcheck { display: flex; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1); font-size: var(--fs-sm); font-weight: 600; }
.b-sumcheck--ok { color: var(--c-ok-ink); }
.b-sumcheck--off { color: var(--c-warn-ink); }
.b-savebar { position: sticky; bottom: calc(var(--nav-h) + var(--space-3)); padding-top: var(--space-3); background: var(--c-bg); }
.b-btn--big { min-height: 52px; border-radius: 14px; font-size: var(--fs-ml); font-weight: 700; }
.b-addsheet { display: flex; flex-direction: column; gap: var(--space-2); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.b-addsheet__item {
  display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-3);
  border-radius: var(--radius-m); background: var(--c-bg); color: var(--c-text); text-decoration: none; cursor: pointer;
}
.b-addsheet__item svg { flex: none; width: 24px; height: 24px; color: var(--c-primary); }
.b-addsheet__item > span { display: flex; flex-direction: column; font-size: var(--fs-sm); }
button.b-bottomnav__add { border: 0; cursor: pointer; }
/* Vault, home contents, notifications */
.b-preview { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-m); background: var(--c-segment); }
.b-preview--pdf { height: 70vh; border: 0; }
.b-badge--warn { color: var(--c-warn-ink); background: var(--c-warn-soft); }
.b-badge--out { color: var(--c-out); background: var(--c-out-soft); }
.b-cover .b-result__value { font-size: var(--fs-l); }
.b-thumb__img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-s); }
.b-list-row--read { opacity: .7; }
.b-bell { position: relative; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-round); background: var(--c-surface); color: var(--c-text); }
.b-bell svg { width: 22px; height: 22px; }
.b-bell__count {
  position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-round); background: var(--c-out); color: var(--c-primary-ink); font-size: var(--fs-xs); font-weight: 700; line-height: 20px; text-align: center;
}
.b-claim__img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius-s); }
.b-claim__item { margin-top: var(--space-4); break-inside: avoid; }
@media print {
  .b-bottomnav, .b-fab, .b-feedback, .b-noprint { display: none !important; }
  .b-main { padding: 0; max-width: none; }
  body { background: #fff; }
}
/* Kids' My money (docs/design/KidsMoney.dc.html) */
.b-kid__hi { font-size: 1.625rem; }
.b-kidcard { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--gutter); border-radius: var(--radius-l); background: var(--c-kid); color: var(--c-hero-ink); }
.b-kidcard .b-hero__value .b-money { font-weight: 800; }
.b-kidcard__line { font-size: var(--fs-sm); }
.b-bar--kid { height: 12px; border-radius: 6px; background: var(--c-kid-track); }
.b-bar--kid .b-bar__fill { border-radius: 6px; background: var(--c-kid); }
.b-kid__plan { font-size: var(--fs-sm); color: var(--c-text-soft); }
.b-tip { padding: var(--space-3) 14px; border-radius: 14px; background: var(--c-tip); color: var(--c-tip-ink); font-size: var(--fs-sm); }
.b-bottomnav--kids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Coach (P5) */
.b-tips { list-style: none; margin: 0; padding: 0; }
.b-tip__title { font-weight: 700; }
.b-tip__actions { flex-wrap: wrap; gap: var(--space-2); }
.b-sub__cost { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.b-list-row--focus { outline: 2px solid var(--c-primary); outline-offset: -2px; }

/* The curve (P6) */
.b-legend__swatch--accent { background: var(--c-accent); }
.b-table__total th, .b-table__total td { font-weight: 700; border-top: var(--border-w) solid var(--c-border); }
.b-select--inline { width: auto; min-height: 44px; }

/* Offline (P7) */
.b-offline { position: sticky; top: 0; z-index: 30; padding: var(--space-2) var(--gutter); background: var(--c-warn-soft); color: var(--c-warn-soft-ink); font-size: var(--fs-sm); font-weight: 600; text-align: center; }

/* A list row that stacks (subscriptions): children take the full width, not centred. */
.b-list-row.b-stack { align-items: stretch; }

/* Grouped inbox (D41.2) */
.b-transfers__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); cursor: pointer; font-weight: 600; }
.b-group__lines { margin-top: var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--c-border); }

/* Home: lines not sorted yet (D41.4) � a link to the inbox, not a spending bar */
.b-notsorted__link { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); color: var(--c-warn-soft-ink); font-weight: 600; text-decoration: none; }
.b-notsorted__link .b-money { color: inherit; }

/* Month in review banner (Part 5) */
.b-banner--review { background: var(--c-primary-soft); color: var(--c-text); }

/* How it works (Part 6) */
.b-help__shot { display: block; width: 100%; max-width: 390px; height: auto; margin: var(--space-2) auto 0; border-radius: var(--radius-m); border: var(--border-w) solid var(--c-border); }

/* First-run tour (Part 6) */
.b-tour { display: flex; flex-direction: column; gap: var(--space-3); }
.b-tour__step { font-size: var(--fs-s); color: var(--c-muted); }

/* My goals (D43) */
.b-goal__name { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-ml); }
.b-goal__lock { width: 18px; height: 18px; flex: none; color: var(--c-muted); }
.b-goal--done .b-goal__name { text-decoration: line-through; color: var(--c-muted); }
.b-steps { list-style: none; margin: 0; padding: 0; }
.b-field--inline { flex: 1; }

/* D44 Reminders */
.b-reminder { flex-wrap: wrap; }
.b-reminder__actions { gap: var(--space-1); flex-wrap: wrap; }

/* Part 10 Daily money */
.b-quickadd form .b-input { flex: 1; min-width: 0; }
.b-afford__verdict { font-size: var(--fs-l); margin: 0; }
.b-afford--yes .b-afford__verdict { color: var(--c-ok-ink); }
.b-afford--tight .b-afford__verdict { color: var(--c-warn-ink); }
.b-afford--no .b-afford__verdict { color: var(--c-out); }

/* Part 12 Habits */
.b-input--narrow { width: 5.5rem; flex: none; }
.b-pot { gap: var(--space-2); }
.b-shop--done .b-check span { text-decoration: line-through; color: var(--c-muted); }
.b-checkin { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.b-checkin--ok { border-color: var(--c-ok-soft); }

/* Part 16: a sentence-long title (the savings match) wraps instead of being cut off */
[data-role=match-due] .b-list-row__title { white-space: normal; overflow: visible; text-overflow: clip; }

/* D53 Home on the desktop: two columns; on the phone the column wrappers are invisible to layout. */
.b-home__col { display: contents; }
@media (min-width: 1024px) {
  .b-home--desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-5); align-items: start; }
  .b-home--desk .b-home__col { display: flex; flex-direction: column; gap: var(--space-3); }
  .b-home--desk .b-curve, .b-home--desk .b-curve__col { --curve-h: 188px; }
}

/* D54 setup card, D53 week note */
.b-setupcard { display: flex; flex-direction: column; gap: var(--space-2); }
.b-setupcard__title { color: var(--c-text); text-decoration: none; }
.b-weeknote { display: flex; flex-direction: column; gap: var(--space-1); color: var(--c-text); text-decoration: none; }
.b-weeknote__label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.b-weeknote__text { white-space: pre-line; }

/* D53 More on the desktop: grouped cards */
@media (min-width: 1024px) {
  .b-desk-hidden { display: none; }
  .b-moregrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .b-moregrid__card h2 { margin: 0 0 var(--space-2); }
  .b-moregrid__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .b-moregrid__links a { display: flex; flex-direction: column; padding: var(--space-2); border-radius: var(--radius-m); color: var(--c-text); text-decoration: none; }
  .b-moregrid__links a:hover { background: var(--c-primary-soft); }
}

/* D54 Get started: one step at a time on the phone; steps left, the active step right on the desktop */
.b-setup__steps { display: none; }
.b-setup__missing { margin: 0; padding-left: 1.2em; color: var(--c-warn-ink); }
.b-setup__howto { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
.b-setup__pic { width: 100%; max-width: 320px; border-radius: var(--radius-m); border: var(--border-w) solid var(--c-border); }
@media (min-width: 1024px) {
  .b-setup { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .b-setup__steps { display: grid; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
  .b-setup__step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--c-text); text-decoration: none; }
  .b-setup__step--on { background: var(--c-primary-soft); font-weight: 700; }
  .b-setup__step[data-done=true] .b-setup__tick { background: var(--c-ok-soft); color: var(--c-ok-ink); }
  .b-setup__tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-round); background: var(--c-surface); border: var(--border-w) solid var(--c-border); font-weight: 700; }
}

/* D53 desktop tables and Plan the week */
.b-num { text-align: right; font-variant-numeric: tabular-nums; }
.b-table--desk { width: 100%; border-collapse: collapse; }
.b-table--desk th { text-align: left; font-size: var(--fs-s); color: var(--c-muted); font-weight: 600; padding: var(--space-2); border-bottom: var(--border-w) solid var(--c-border); }
.b-table--desk th.b-num { text-align: right; }
.b-table--desk td { padding: var(--space-2); border-bottom: var(--border-w) solid var(--c-border); vertical-align: middle; }
.b-table--desk tr.b-row--over td { color: var(--c-out); }
.b-plan { display: flex; flex-direction: column; gap: var(--space-4); }
.b-plan__sub { font-size: var(--fs-sm); margin: var(--space-3) 0 var(--space-2); }
@media (min-width: 1024px) {
  .b-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .b-plan__budgets { grid-column: span 2; grid-row: span 2; }
  .b-plan__shopping { grid-column: span 2; }
}

/* D53 desktop filters and sortable headers */
.b-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.b-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.b-table--desk .b-select--inline { min-height: 32px; padding: 2px var(--space-2); }

/* D53 desktop Inbox */
.b-inboxdesk { outline: none; border-radius: var(--radius-2, 8px); }
.b-inboxdesk:focus-visible { box-shadow: 0 0 0 2px var(--focus, var(--brand)); }
.b-table--desk tr.b-row--cursor { background: var(--surface-2, rgba(0,0,0,.05)); box-shadow: inset 3px 0 0 var(--brand); }
.b-table--desk tr.b-row--selected td { font-weight: 600; }
.b-table--desk tr.b-row--child td:nth-child(3) { padding-left: var(--space-5, 24px); }
.b-table--desk tbody tr { cursor: default; }

/* D53 desktop Import drop zone: the file input covers the zone, so a drop lands on it. */
.b-drop { position: relative; display: grid; place-items: center; min-height: 140px; padding: var(--space-4); border: 2px dashed var(--line, currentColor); border-radius: var(--radius-3, 12px); text-align: center; }
.b-drop:hover, .b-drop:focus-within { border-color: var(--brand); }
.b-drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* D53: dates and money never wrap in desktop tables */
.b-table--desk .b-num, .b-table--desk td:first-child, [data-role=tx-table] td:nth-child(1) { white-space: nowrap; }
.b-sort { white-space: nowrap; }
.b-table--desk td.b-num, .b-table--desk th.b-num { text-align: right; }
.b-table--desk td.b-num .b-money { text-align: right; }
.b-table--desk td.b-num .b-input--narrow { margin-left: auto; text-align: right; }