/* ==========================================================================
   Finanz-Übersicht  (html/pages/finance-overview.html, js/pages/finance/finance-overview.js)
   Shared bits used here: .card / .fill-gauge / .segmented (components.css),
   .fin-bucket-group / .fin-empty / .fin-suffix / .fin-row-btn
   (finance-shared.css). Everything below is Übersicht-only.
   ========================================================================== */

/* ---------- Month bar: month switcher + overspent hint ---------- */
/* Desktop: one sticky row (switcher left, overspent hint right of it).
   Mobile (<=1270): .fin-monthbar becomes display:contents so the switcher
   scrolls away normally and ONLY .fin-overspent-line stays sticky — see the
   mobile block further down. */
.fin-monthbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--fin-monthbar-h);
  background: var(--canvas);
}

.fin-month-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-weight: 500;
}

#finOverviewMonthLabel {
  display: inline-block;
  min-width: 128px;
  text-align: center;
}

/* Prev/next: the shared chevronDown icon rotated to point left / right. */
.fin-month-prev svg {
  transform: rotate(90deg);
}

.fin-month-next svg {
  transform: rotate(-90deg);
}

.fin-today-btn {
  margin-left: var(--space-6);
  flex: 0 0 auto;
  padding: var(--space-6) var(--space-12);
  font-size: var(--fs-l);
}

.fin-overspent-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  font-size: var(--fs-m);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.fin-overspent-line span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-overspent-line.is-warn {
  color: var(--coral);
}

.fin-overspent-icon {
  flex: 0 0 auto;
  display: inline-flex;
}

.fin-overspent-icon svg {
  width: 15px;
  height: 15px;
}

/* Mobile: nothing in the month bar is sticky — it just scrolls away with the
   page. The overspent hint drops onto its own line below the switcher. */
@media (max-width: 1270px) {
  .fin-monthbar {
    position: static;
    flex-wrap: wrap;
    min-height: 0;
  }

  .fin-overspent-line {
    flex: 1 0 100%;
    display: flex;
    margin: var(--space-6) 0 var(--space-6) 0;
  }
}

/* ---------- Top row: Aktuell verfügbar + account cards (month-independent) ---------- */
.fin-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

@media (min-width: 1271px) {
  .fin-top-row {
    grid-template-columns: 280px 1fr;
    align-items: stretch;
  }
}

/* Heading sits above the card (like "Konten"), not inside it. */
.fin-available-section {
  display: flex;
  flex-direction: column;
}

/* The headline number of the page — deliberately large. The card fills the
   section's height so it lines up with the account tiles beside it. Padding
   moves to the inner wrapper (which on desktop is the abs-positioned box), so
   the number keeps the same breathing room as the other tiles in both modes. */
.fin-available-card {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 0;
}

/* Holds the amount (top) and the Konten / Buckets breakdown (bottom), gap
   auto-sized. On desktop (see the >=1271px block below) this is taken out of
   flow so the JS-enlarged amount can't push the grid row — and this column —
   taller than the Konten column beside it. */
.fin-available-card-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  /* Clips the amount here (not on the card) so the card's own overflow stays
     visible — the .fin-info-dot tooltip in the top-right corner needs to
     escape it. The JS-scaled number still can't spill past the padding box. */
  overflow: hidden;
}

/* AFTER the base rules above (equal specificity → later wins): on desktop the
   available column sits beside Konten, so its card body goes out of flow and
   the card contributes only its padding to the grid row. The card is
   stretched by the grid to Konten's height and is the positioned ancestor;
   inset:0 fills its padding box. */
@media (min-width: 1271px) {
  .fin-available-section {
    min-height: 0;
  }

  .fin-available-card-inner {
    position: absolute;
    inset: 0;
  }
}

/* The amount is sized by JS (fitAvailableValue() in finance-overview.js) to
   fill the card — this is only the pre-fit fallback. display:block + nowrap
   so it can be measured. */
.fin-available-card .fin-stat-value {
  display: block;
  white-space: nowrap;
  line-height: 1.1;
  font-size: var(--fs-3xl);
}

/* The page's headline figure gets an accent-tinted diagonal gradient fill — a
   small flourish for the one number that matters most. Only when it's positive:
   a shortfall keeps the plain solid --coral (.fin-stat-value.is-neg, below) so
   it still reads as a warning, not decoration. `color` is the fallback if
   `background-clip: text` isn't supported. */
.fin-available-card .fin-stat-value:not(.is-neg) {
  background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--brass) 82%, var(--sky)),
    var(--brass) 45%,
    color-mix(in srgb, var(--brass) 68%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brass);
  -webkit-text-fill-color: transparent;
}

.fin-available-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-m);
  color: var(--ink-dim);
}

.fin-available-bottom b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

/* Circled-"i" help affordance in the card's top-right corner — carries the
   data-tooltip explaining the future-budget-month rule (see
   computeFreeAvailable() / futureBudgetMonthBalanceEffect() in finance-data.js).
   The card keeps overflow:visible (clipping moved to .fin-available-card-inner)
   so the bubble isn't cut off. */
.fin-info-dot {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: help;
}

.fin-info-dot:hover {
  color: var(--brass);
}

.fin-info-dot svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Open the bubble downward-left into the card body (default is upward-centered,
   which from this corner would overshoot the card's right edge / the viewport
   top on mobile). */
.fin-info-dot::after {
  top: calc(100% + var(--space-6));
  bottom: auto;
  left: auto;
  right: 0;
  transform: translateX(0) translateY(calc(-1 * var(--space-4)));
}

.fin-info-dot:hover::after,
.fin-info-dot:focus-visible::after {
  transform: translateX(0) translateY(0);
}

.fin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.fin-stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fin-stat-value.is-neg {
  color: var(--coral);
}

/* ---------- Einkommen/Ausgaben chart ---------- */
/* Heading sits above the card (like "Konten" / "Aktuell verfügbar"), not
   inside it — .fin-section-head does that, the card itself is just the chart. */
.fin-chart-section {
  margin-bottom: var(--space-16);
}

.fin-chart-main {
  display: flex;
  gap: var(--space-24);
  align-items: stretch;
}

/* --- Grouped vertical bars (6 months, income left / expense right) --- */
.fin-chart-body {
  flex: 1;
  min-width: 0;
}

/* --y-label-w reserves the left gutter for the amount axis; --x-label-h the
   bottom strip for the month labels (incl. --space-8 gap above them).
   --y-gutter-r is 0 on desktop; on mobile it's flipped to --y-label-w so the
   plot has an equal gutter on both sides and the bars sit centred. */
.fin-chart-plot {
  position: relative;
  height: 200px;
  --y-label-w: 38px;
  --x-label-h: var(--space-24);
  --y-gutter-r: 0px;
}

.fin-chart-yaxis,
.fin-chart-grid {
  position: absolute;
  top: 0;
  bottom: var(--x-label-h);
}

.fin-chart-yaxis {
  left: 0;
  width: var(--y-label-w);
}

.fin-chart-grid {
  left: var(--y-label-w);
  right: var(--y-gutter-r);
}

.fin-chart-bars {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--y-label-w);
  right: var(--y-gutter-r);
  display: flex;
  align-items: stretch;
}

.fin-chart-ytick {
  position: absolute;
  right: var(--space-8);
  transform: translateY(50%);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
  white-space: nowrap;
}

.fin-chart-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.fin-chart-month {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fin-chart-pair {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-4);
}

.fin-chart-bar {
  width: 32%;
  max-width: 16px;
  min-height: 2px;
  border-radius: var(--space-4) var(--space-4) 0 0;
  transition: height .4s ease;
}

.fin-chart-bar.is-income {
  background: var(--good);
}

.fin-chart-bar.is-expense {
  background: var(--coral);
}

/* Lift the hovered bar (and so its ::after tooltip) above later sibling
   bars, which would otherwise paint over the tooltip. */
.fin-chart-bar:hover {
  filter: brightness(1.12);
  z-index: 4;
}

.fin-chart-month-label {
  flex: 0 0 var(--x-label-h);
  padding-top: var(--space-8);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --- Side panel: current month's Einkommen / Ausgaben, made dominant:
   icon + label on one line, then the amount below in a large figure. --- */
.fin-chart-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 160px;
}

.fin-chart-side-head {
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fin-chart-side-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fin-chart-side-top {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.fin-chart-side-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--row-color);
}

.fin-chart-side-icon svg {
  width: 14px;
  height: 14px;
}

.fin-chart-side-row.is-income {
  --row-color: var(--good);
}

.fin-chart-side-row.is-expense {
  --row-color: var(--coral);
}

.fin-chart-side-label {
  font-size: var(--fs-m);
  color: var(--ink-dim);
}

.fin-chart-side-value {
  font-family: var(--font-mono);
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Chart: desktop side panel centered; mobile stacked + centered plot --- */
@media (min-width: 1271px) {
  .fin-chart-side {
    align-self: center;
  }
}

@media (max-width: 1270px) {
  .fin-chart-main {
    flex-direction: column;
    gap: var(--space-16);
  }

  /* Equal gutter both sides → bars centred, not shifted right. */
  .fin-chart-plot {
    --y-gutter-r: var(--y-label-w);
  }

  /* Einkommen / Ausgaben side by side. */
  .fin-chart-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-12) var(--space-16);
  }

  .fin-chart-side-head {
    flex: 1 0 100%;
  }

  .fin-chart-side-row {
    flex: 1 1 40%;
  }
}

/* ---------- Account credit-card tiles ---------- */
.fin-accounts-section {
  min-width: 0;
}

.fin-accounts-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-16);
}

/* Bank/credit-card look — the one deliberate exception to the app's
   white-container rule: a diagonal wash of the account's own color, mixed
   toward --acct-card-tint (white in light mode, a dark neutral in dark
   mode — see the dark override below). Light text throughout. */
.fin-acct-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-16) var(--space-16);
  border-radius: var(--radius);
  color: var(--on-accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(320deg,
      color-mix(in srgb, var(--acct-color) 60%, var(--acct-card-tint)),
      color-mix(in srgb, var(--acct-color) 100%, var(--acct-card-tint)));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Dark mode: pull both gradient stops well down toward the dark tint so the
   tiles read as dark tinted surfaces, not bright colour blocks. */
:root[data-theme="dark"] .fin-acct-card {
  background:
    linear-gradient(320deg,
      color-mix(in srgb, var(--acct-color) 34%, var(--acct-card-tint)),
      color-mix(in srgb, var(--acct-color) 60%, var(--acct-card-tint)));
}

.fin-acct-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.fin-acct-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-l);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-acct-card-icon {
  display: flex;
  flex: 0 0 auto;
  opacity: 0.85;
}

.fin-acct-card-icon svg {
  width: 22px;
  height: 22px;
}

.fin-acct-card-mid {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 19px;
}

/* Contactless-chip nod — only shown when the account has an IBAN
   (rendered conditionally in finance-overview.js). */
.fin-acct-card-chip {
  width: 26px;
  height: 19px;
  border-radius: var(--space-4);
  background: color-mix(in srgb, var(--on-accent) 55%, transparent);
}

.fin-acct-card-number {
  font-family: var(--font-mono);
  font-size: var(--fs-l);
  letter-spacing: 0.12em;
}

/* Fixed height so the balance baseline doesn't shift between accounts that
   have an expiry/buffer line and ones that don't. */
.fin-acct-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--space-40);
}

.fin-acct-card-balance {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
}

.fin-acct-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  opacity: 0.9;
  white-space: nowrap;
}

.fin-acct-card-buffer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.fin-acct-card-buffer svg {
  width: 12px;
  height: 12px;
}

.fin-acct-card-expiry {
  letter-spacing: 0.06em;
}

/* ---------- 2-column layout: bucket table + aside ---------- */
.fin-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  align-items: start;
}

.fin-overview-main {
  min-width: 0;
}

.fin-overview-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

@media (min-width: 1271px) {
  .fin-overview-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* ---------- Bucket table ---------- */
.fin-bucket-table-card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-12) var(--space-16) var(--space-16);
}

.fin-btbl-head,
.fin-btbl-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 86px 104px 112px 116px;
  grid-template-areas: "name avg budget spent avail";
  gap: var(--space-16);
  align-items: center;
}

.fin-btbl-head {
  position: sticky;
  top: calc(var(--topbar-h) + var(--fin-monthbar-h));
  z-index: 2;
  padding: var(--space-10) var(--space-4) var(--space-8);
  font-size: var(--fs-xs);
  background: var(--panel);
  border-bottom: 1px solid var(--line-strong);
}

.fin-btbl-head-name {
  grid-area: name;
}

.fin-btbl-head-meta {
  display: contents;
}

.fin-btbl-head-meta span {
  text-align: right;
}

.fin-btbl-head-meta span:nth-child(1) {
  grid-area: avg;
}

.fin-btbl-head-meta span:nth-child(2) {
  grid-area: budget;
}

.fin-btbl-head-meta span:nth-child(3) {
  grid-area: spent;
}

.fin-btbl-head-avail {
  grid-area: avail;
  text-align: right;
}

/* ---------- Category group + collapsible header ---------- */
#finBucketsOverview {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

#finBucketsOverview .fin-bucket-group {
  margin-bottom: 0;
}

.fin-btbl-cat-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) var(--space-4);
  background: none;
  border: none;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
}

.fin-btbl-cat-title:hover {
  background: var(--brass-soft);
}

/* The chevron carries the category's own colour (there's no separate colour
   dot in front of the name any more). */
.fin-btbl-cat-chevron {
  display: flex;
  flex: 0 0 auto;
  color: var(--tag-color, var(--muted));
  transition: transform 0.15s ease;
}

.fin-btbl-cat-chevron svg {
  width: 15px;
  height: 15px;
}

.fin-bucket-group.is-collapsed .fin-btbl-cat-chevron {
  transform: rotate(-90deg);
}

.fin-btbl-cat-name {
  font-size: var(--fs-m);
}

.fin-btbl-cat-count {
  font-size: var(--fs-m);
  color: var(--muted);
}

.fin-btbl-rows {
  display: flex;
  flex-direction: column;
}

.fin-bucket-group.is-collapsed .fin-btbl-rows {
  display: none;
}

.fin-btbl-row {
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius);
}

/* Hover highlight only a hair wider than the row (not the old 8px bleed). */
.fin-btbl-row:hover:not(.fin-btbl-sum) {
  background: var(--brass-soft);
  box-shadow: 0 0 0 var(--space-2) var(--brass-soft);
}

/* ---------- Category summary row ---------- */
.fin-btbl-sum {
  margin-top: var(--space-4);
  padding-top: var(--space-10);
  /* Straight rule above the sum — no rounded ends (overrides .fin-btbl-row). */
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: var(--font-mono);
}

.fin-btbl-sum .fin-btbl-name-label {
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fin-btbl-budget-sum {
  grid-area: budget;
  text-align: right;
  font-size: var(--fs-l);
}

.fin-btbl-sum .fin-btbl-spent {
  cursor: default;
}

/* ---------- Bucket row cells ---------- */
.fin-btbl-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

.fin-btbl-name-icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--tag-color, var(--ink-dim));
}

.fin-btbl-name-icon svg {
  width: 17px;
  height: 17px;
}

.fin-btbl-name-label {
  font-size: var(--fs-xl);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-btbl-meta {
  display: contents;
}

.fin-btbl-avg,
.fin-btbl-spent {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  font-family: var(--font-mono);
  background: none;
  border: none;
  padding: 0;
  cursor: default;
}

.fin-btbl-avg {
  grid-area: avg;
  font-size: var(--fs-m);
  color: var(--ink-dim);
}

.fin-btbl-spent {
  grid-area: spent;
  font-size: var(--fs-l);
  cursor: pointer;
}

/* Sign colouring for the Transaktionen column (and its category-sum cell). */
.fin-btbl-spent.is-neg {
  color: var(--coral);
}

.fin-btbl-spent.is-pos {
  color: var(--good);
}

.fin-btbl-spent.is-zero {
  color: var(--ink-dim);
}

.fin-btbl-avg svg,
.fin-btbl-spent svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.fin-btbl-budget {
  grid-area: budget;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line-strong);
  padding: 0;
}

.fin-btbl-budget:focus-within {
  border-bottom-color: var(--brass);
}

.fin-btbl-budget svg {
  width: 13px;
  height: 13px;
  color: var(--ink-dim);
  flex: 0 0 auto;
}

.fin-btbl-budget input {
  width: 64px;
  min-width: 0;
  text-align: right;
  border: none;
  padding: var(--space-2) var(--space-2) var(--space-4);
  background: none;
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  color: var(--ink);
}

.fin-btbl-budget input:focus {
  outline: none;
}

.fin-btbl-avail {
  grid-area: avail;
  text-align: right;
  font-size: var(--fs-l);
  font-family: var(--font-mono);
}

.fin-btbl-avail.negative {
  color: var(--coral);
}

/* Meta-cell icons only carry meaning on mobile (no column header there). */
@media (min-width: 1271px) {
  .fin-btbl-avg svg,
  .fin-btbl-spent svg,
  .fin-btbl-budget svg {
    display: none;
  }
}

@media (max-width: 1270px) {
  .fin-btbl-head {
    display: none;
  }

  .fin-btbl-head,
  .fin-btbl-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name avail"
      "meta meta";
  }

  .fin-btbl-row {
    padding: var(--space-12) var(--space-2);
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }

  .fin-btbl-name-label {
    font-size: var(--fs-xl);
  }

  .fin-btbl-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    /* aligns the meta row under the bucket name text, past the 17px icon
       + its --space-12 gap */
    padding-left: 27px;
    margin-top: var(--space-6);
  }

  .fin-btbl-avg,
  .fin-btbl-budget,
  .fin-btbl-spent,
  .fin-btbl-budget-sum {
    grid-area: auto;
    font-size: var(--fs-m);
  }

  .fin-btbl-budget input {
    width: 56px;
    font-size: var(--fs-m);
    padding: var(--space-4) var(--space-2);
  }

  .fin-btbl-avail {
    font-size: var(--fs-xl);
  }

  /* Category summary row is hidden on mobile — the per-bucket rows are
     enough on a narrow screen. */
  .fin-btbl-sum {
    display: none;
  }
}

/* ---------- Aside: Notgroschen gauge + Sparziele ---------- */
/* .fin-gauge-card / .fin-goal-card are just positioning wrappers now — the
   .fill-gauge inside carries the card look (components.css). */
.fin-gauge-card,
.fin-goal-card {
  display: flex;
}

.fin-gauge-card .fill-gauge,
.fin-goal-card .fill-gauge {
  flex: 1;
}

.fin-goals-section.is-hidden {
  display: none;
}

.fin-goals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

/* Standard full-width .field, nudged down from the figures above it (no
   divider); only the amount inside it is right-aligned. */
.fin-goal-rate {
  margin-top: var(--space-12);
  margin-bottom: 0;
}

.fin-goal-rate-input {
  text-align: right;
}