/* Styles specific to the Compound Interest Tier-1 calculator. Sits alongside calculator.css
   (shared baseline) + calculator-charts.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;
}

/* Keep the pie beside the pills instead of marooned on its own row below the full-width balance
   chart. The results flex is DOM-ordered pills / chart(full) / pie / cross-link; reflow the
   full-width chart and the cross-link to sit AFTER the pie so the visual row order becomes
   [pills | pie], then the full-width chart, then the cross-link. Order-only: the DOM (and the
   commentary -> pills -> chart -> pie reading order the results-ordering guard checks) is unchanged. */
.calc-page[data-calc-slug="compound-interest"] .calc-result-card-full {
    order: 1;
}
.calc-page[data-calc-slug="compound-interest"] .calc-related-cta {
    order: 2;
}

/* 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. */
/* The visually-hidden screen-reader helper (.calc-sr-only / .visually-hidden) is defined ONCE in
   calculator.css, which every calculator page loads. It used to be defined here and copied into three
   other per-page sheets, which is why mortgage-affordability, a page that loads calculator.css and not
   this one, rendered its screen-reader table VISIBLY to every sighted visitor. */