/* Compound Interest Calculator — a form (investment card + result card)
   from styles/components/form.css. The inputs are shared unit fields; only
   the invested / interest bar under the hero is the page's own. */

/* Share of the final balance that was invested vs. earned. */
.ci-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
  padding-top: var(--space-3);
}
.ci-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-fill);
}
.ci-bar__seg { height: 100%; transition: width var(--duration-snap) var(--ease-standard); }
.ci-bar__seg--invested { background: var(--accent); }
.ci-bar__seg--interest { background: var(--success, #34C759); }

.ci-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--text-muted);
}
.ci-legend__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.ci-dot { width: 9px; height: 9px; border-radius: 50%; }
.ci-dot--invested { background: var(--accent); }
.ci-dot--interest { background: var(--success, #34C759); }