/* Styles specific to the Student Loan Repayment Tier-2 calculator: balance-over-time line chart
   (baseline + overpayment scenario, with a write-off marker), the headline + write-off verdict
   subline, the overpayment verdict callout (red/green), the plan/region correction note, and the
   advanced-assumptions disclosure. Sits alongside calculator.css; loaded only on the calc pages.
   The chart line/swatch styling mirrors calculator-charts.css (shared --chart-* :root vars). */

/* 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. */

/* The catchy takeaway uses the shared .calc-commentary box (styled once in calculator.css); this
   calc adds no bespoke headline. The write-off verdict is carried in that commentary sentence. */

/* Plan/region correction note: soft, non-blocking (the result still renders). */
.calc-note-correction {
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    color: #6b5300;
}

/* ── Line chart (mirrors calculator-charts.css; geometry mirrored in calculator.js) ─────────── */
.calc-chart-wrap {
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
/* Fill the results column (no 600px cap) so the chart + its in-SVG axis labels render larger;
   matches calculator-charts.css (the shared chart base). */
.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;
}
.calc-chart-line-loser {
    stroke: var(--chart-loser);
}
.calc-chart-line-winner {
    stroke: var(--chart-winner);
}
/* Write-off marker: dashed vertical rule at the horizon. */
.calc-chart-marker-line {
    stroke: var(--chart-money-out);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}
.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);
}