/* Loan / mortgage calculator - inputs, headline figures, and a declining-balance chart.
   Reuses base .field; colors from theme tokens only. */

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

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

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

.loan-legend { margin: 14px 0 0; font-size: 13px; color: var(--muted); }