/* Compound interest calculator - inputs, headline figures, and a stacked year-by-year chart.
   Reuses base .field; colors from theme tokens only. */

.ci-form { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.ci-field { display: flex; flex-direction: column; gap: 6px; }
.ci-field-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.ci-field .field { width: 11rem; font-variant-numeric: tabular-nums; }
.ci-input-unit { display: inline-flex; align-items: center; gap: 6px; }
.ci-rate { width: 6rem; }
.ci-years { width: 6rem; }
.ci-unit { font-size: 14px; color: var(--muted); }

.ci-result {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px;
}
.ci-figures {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.ci-stat { display: flex; flex-direction: column; gap: 2px; min-width: 7rem; }
.ci-stat-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.ci-stat-value { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ci-stat-accent .ci-stat-value { color: var(--accent-strong); }

.ci-chart {
    display: flex; align-items: flex-end; gap: 4px; height: 180px;
    margin-top: 18px; padding-top: 4px;
}
.ci-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; }
.ci-bar {
    width: 100%; max-width: 28px; background: var(--accent-weak);
    border-radius: 4px 4px 0 0; display: flex; flex-direction: column; justify-content: flex-start;
    min-height: 2px;
}
.ci-bar-interest { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.ci-col-label { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.ci-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.ci-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ci-key-contrib { background: var(--accent-weak); }
.ci-key-interest { background: var(--accent); margin-left: 10px; }
.ci-legend-note { margin-left: 4px; }