/* ==========================================================================
   FinanceCalc — Vermogen en FIRE
   ========================================================================== */

.fire-age {
  margin-top: 4px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-size: clamp(2.8rem, 7vw, 3.6rem); color: var(--text);
}
.fire-age .unit { font-size: 0.45em; font-weight: 700; color: var(--text-3); letter-spacing: -0.01em; margin-left: 6px; }
.fire-age.is-muted { color: var(--text-3); font-size: clamp(1.8rem, 4.5vw, 2.2rem); letter-spacing: -0.02em; }

.progress-wrap { margin-top: 18px; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; max-width: 100%; border-radius: 999px; background: var(--brand); transition: width 0.5s var(--ease); }
.progress-wrap .hint { margin-top: 8px; }
.progress-wrap .hint b { color: var(--text); }

/* Omgekeerde berekening en wat-als naast elkaar */
.fire-duo { display: grid; gap: 16px; }
@media (min-width: 900px) { .fire-duo { grid-template-columns: 1fr 1fr; } }
.fire-duo .card { min-width: 0; }

.reverse-result { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 0.9rem; color: var(--text-2); background: var(--brand-50); border: 1px solid var(--brand-100); }
.reverse-result:empty { display: none; }
.reverse-result b { color: var(--brand-ink); }

.wa-table td:first-child { white-space: normal; min-width: 150px; }