/* #region zone:finance.css.overview — หน้าภาพรวม: สมการในแถบหลัก ยอดสกุลรอง การ์ดเตือน และข้อความไม่ตัดกลางตัวเลข */
.money-alt {
  color: var(--muted);
  font-size: var(--t-label);
  font-weight: 500;
}
.kpi .money-alt,
.hero-number .money-alt {
  display: block;
}
.kpi .alt-sep,
.hero-number .alt-sep {
  display: none;
}
.hero-main {
  display: grid;
  gap: var(--sp-1);
}
.hero-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--hero-muted);
}
.eq-part {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.eq-part span {
  font-size: var(--t-caption);
}
.eq-part strong {
  color: var(--hero-text);
  font-size: var(--t-body);
  white-space: nowrap;
}
.eq-part .money-alt {
  display: none;
}
.eq-op {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: end;
  padding-bottom: 1px;
  font-size: var(--t-body);
}
.eq-part:has(.eq-op) {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-2);
}
.eq-part:has(.eq-op) > :not(.eq-op) {
  grid-column: 2;
}
.eq-total strong {
  font-weight: 700;
}
.rate-tip {
  display: block;
  width: fit-content;
  margin-top: 2px;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.status-badge.bad {
  background: var(--error-soft);
  color: var(--error);
}
.alert-panel {
  gap: var(--sp-1);
  padding-block: var(--sp-3);
}
.alert-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.alert-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
}
.alert-row .alert-text {
  display: grid;
  flex: 1;
  min-width: 0;
}
.alert-row .alert-text small {
  color: var(--muted);
  font-size: var(--t-caption);
}
.alert-row button {
  flex: none;
  margin-left: auto;
}
.alert-row + .alert-row {
  border-top: 1px solid var(--line);
}
/* Amounts never break in the middle of a value; the row wraps around them instead. */
.num,
.panel-total strong,
.bill-row strong,
.merchant-row strong,
.kpi strong .count {
  white-space: nowrap;
}
.kpi strong {
  overflow-wrap: normal;
}
/* The base ("early forecast") card matches the other cards: no thick dark top edge. */
.plan-card.is-base {
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .hero-eq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px var(--sp-2);
  }
  /* Keep the floating assistant avatar clear of the last card. */
  .fin-main {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}
/* #endregion */