/* Shared chart styles: the line / area / before-after comparison chart chrome (.calc-chart-*, gridlines,
   ticks, legend, swatches, the goal line, .calc-sr-only) that every calculator with such a chart needs.
   A second shared sheet beside calculator.css, loaded by the 11 chart-bearing calcs. (It was originally
   named mortgage-overpayment.css after the first calc to grow a chart, though it was always shared - the
   name is why an ISA page used to load "mortgage" CSS.) Colour / shape only; it must NOT restyle the shared
   input chrome, which lives in calculator.css and is guarded by TestCalculatorStylesheetsDoNotRestyleSharedChrome. */

/* Visually-hidden helper for screen readers + crawlers. Stays in the accessibility tree and is
   indexed by search engines, but doesn't render visually. Matches the WAI standard sr-only
   pattern but namespaced to the calc layout so it can't conflict with anything in the main app. */
.calc-sr-only {
    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;
}

/* ── Line chart ─────────────────────────────────────────────────────────────────────────────────
   Inline-SVG line chart: two polylines (baseline + scenario), 4-tick Y grid, 5-year X ticks.
   No external chart library. The server renders the polylines + tick labels at first paint and
   calculator.js redraws them on AJAX recompute (applyOverpaymentChart in calculator.js).
   Geometry is mirrored between Razor and JS so the two paths produce identical pixel output. */

.calc-chart-wrap {
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

/* Fill the full width of the results column (no 600px cap): the column is wider than 600px on
   desktop, so capping wasted space and shrank the in-SVG axis labels. The viewBox keeps the
   aspect ratio, so a wider render makes the whole chart, labels included, physically larger. */
.calc-chart {
    width: 100%;
    height: auto;
    font-size: 0.85rem;
}

.calc-chart-bg {
    fill: #f8f9fa;
}

.calc-chart-gridlines line {
    stroke: #dee2e6;
    stroke-width: 1;
}

.calc-chart-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Comparison line pair (Mortgage Overpayment): the "without overpayment" line is the Loser
   (de-emphasised grey + dash so it reads as the baseline), "with overpayment" is the Winner
   (green). Per Calculators.md §"Chart colour rules" - comparison charts override the series'
   own category colour with the Winner/Loser pair. Colours from the :root vars in _HeadTags. */
.calc-chart-line-loser {
    stroke: var(--chart-loser);
    stroke-dasharray: 4 4;
}

.calc-chart-line-winner {
    stroke: var(--chart-winner);
}

.calc-chart-legend {
    display: flex;
    gap: 1.2rem;
    color: #555;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    font-size: 0.95rem;
}

.calc-chart-swatch {
    display: inline-block;
    width: 1.2rem;
    height: 0.25rem;
    margin-right: 0.4rem;
    border-radius: 1px;
    vertical-align: middle;
}

.calc-chart-swatch-loser {
    background: var(--chart-loser);
}

.calc-chart-swatch-winner {
    background: var(--chart-winner);
}

/* Stacked-area-chart polygons (used by the Mortgage Payment amortisation chart). Capital is
   Neutral (your own debt principal - grey), interest paid is Money Out (red). Stroke matches
   the fill so a thin outline keeps adjacent polygons visually distinct against the plot
   background. Colours from the :root vars in _HeadTags. */
.calc-chart-area {
    stroke-width: 1;
    stroke-linejoin: round;
}
.calc-chart-area-neutral {
    fill: var(--chart-neutral);
    stroke: var(--chart-neutral);
}
.calc-chart-area-money-out {
    fill: var(--chart-money-out);
    stroke: var(--chart-money-out);
}
/* Money In band (Pension Projection's investment-growth layer, stacked on the Neutral paid-in
   band). Blue per the five-category palette - "the gain you keep" is Money In, same category as
   Compound Interest's "interest earned". */
.calc-chart-area-money-in {
    fill: var(--chart-money-in);
    stroke: var(--chart-money-in);
}

.calc-chart-swatch-neutral {
    background: var(--chart-neutral);
}
.calc-chart-swatch-money-out {
    background: var(--chart-money-out);
}
.calc-chart-swatch-money-in {
    background: var(--chart-money-in);
}

/* Tax band (the Savings calculator's "interest lost to tax" layer, stacked on top of the Neutral
   deposits + Money-In kept-interest bands). Orange per the five-category palette: money lost to
   GOVERNMENT is Tax, the same category as PAYE's income tax and SDLT's transaction tax. It is
   deliberately not Money Out (red), which is money lost to a private party. Part of the shared chart
   base so any future calc that charts a tax band gets it for free. */
.calc-chart-area-tax {
    fill: var(--chart-tax-primary);
    stroke: var(--chart-tax-primary);
}

/* Relief band (the Lifetime ISA calculator's "government bonus" layer, stacked between the Neutral
   paid-in band and the Money-In growth band). Relief per the palette: money FROM government is the
   exact mirror of the Tax band above, which is money TO it, and the LISA bonus is the clearest
   instance of it on the surface. It is deliberately not Money In (blue), which is a return the
   saver's own capital earned: the whole point of the band is that nobody paid for it. Part of the
   shared chart base, alongside the tax band, so any future calc that charts a government contribution
   (a pension's tax relief, an employer match) gets it for free. */
.calc-chart-area-relief {
    fill: var(--chart-relief);
    stroke: var(--chart-relief);
}
.calc-chart-swatch-relief {
    background: var(--chart-relief);
}
.calc-chart-swatch-tax {
    background: var(--chart-tax-primary);
}

/* Goal reference line (the Savings Goal calculator's target marker, drawn OVER the paid-in + interest
   bands rather than as a band of its own). A dashed horizontal line at the target the saver entered, so
   the bands are read against it: reaching it in the solvable case, stopping short of it in the
   out-of-reach case. Strong neutral line colour (ChartPalette.Black) so it reads as a marker, not a
   band. Part of the shared chart base so any future goal-seeking calc that charts a target gets it for
   free. */
.calc-chart-goal-line {
    stroke: var(--chart-neutral-line);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    fill: none;
}
.calc-chart-goal-label {
    fill: var(--chart-neutral-line);
    font-size: 12px;
    font-weight: 600;
}
.calc-chart-swatch-goal {
    background: var(--chart-neutral-line);
}

/* Saving-coloured pill figure - matches SDLT's FTB-saving pill colour for visual consistency
   across the calculator surface. The "Interest saved" pill is the page's headline number, so
   it stands out in green. */
.calc-pill-saving {
    color: #1d6a31;
}