/* Styles specific to the Compound Interest Tier-1 calculator. Sits alongside calculator.css
   (shared baseline) + mortgage-overpayment.css (shared chart base: .calc-chart, gridlines,
   ticks, .calc-input-suffix). Loaded only on /uk/calculators/compound-interest. */

/* Compound-interest balance curve. The balance is a Neutral quantity (a stock, like a mortgage
   balance) per Calculators.md §"Chart colour rules": a stroked Neutral line is black, a filled
   Neutral area is grey. Colours from the :root vars emitted by _HeadTags.cshtml. */
.calc-page[data-calc-slug="compound-interest"] .calc-chart-line {
    stroke: var(--chart-neutral-line);
}

/* Filled area under the curve - Neutral grey at a low alpha so the curve reads clearly above it. */
.calc-page[data-calc-slug="compound-interest"] .calc-chart-area {
    fill: var(--chart-neutral);
    fill-opacity: 0.10;
    stroke: none;
}

/* The `.calc-comparison` table (same inputs, different X) is a shared pattern and now lives in
   calculator.css so any calc can use it (Compound Interest's frequency spread, Salary Sacrifice's
   before/after columns, ...). It used to live here; moved when Salary Sacrifice became the second
   consumer, per the calculator.css §"shared patterns live in the shared stylesheet" rule. */

/* ── Live AER caption under the rate input ──────────────────────────────────────────────────
   Small grey note that updates as the user types or switches frequency. The <strong> inside
   highlights the headline number; the surrounding context names the compounding frequency
   so the meaning is unambiguous without scrolling. */
.calc-field-hint {
    color: #6c757d;
    font-size: 0.875rem;
    margin: 0.4rem 0 0;
    line-height: 1.4;
}

.calc-field-hint strong {
    font-weight: 600;
}

/* ── Visually-hidden helper ─────────────────────────────────────────────────────────────────
   For the chart's screen-reader summary + table. Same pattern as mortgage-overpayment.css's
   .calc-sr-only but using the standard "visually-hidden" name so it's transferable. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}