/* 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 mortgage-overpayment.css (shared --chart-* :root vars). */

/* Unit suffix inside an input wrap (the % / "% / year" glyphs). */
.calc-input-suffix {
    position: absolute;
    right: 0.5rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 0.25rem;
    color: #555;
    pointer-events: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

.calc-page .calc-input-wrap input[type="number"] {
    padding-right: 4.5rem;
}

/* Visually-hidden helper for screen readers + crawlers (WAI sr-only, namespaced to the calc). */
.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;
}

/* 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;
}

/* Overpayment verdict callout: green when overpaying helps, red when the loan is written off
   either way so the overpayment is wasted. */
.calc-verdict {
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    font-size: 1.05rem;
    line-height: 1.45;
    border-left: 4px solid transparent;
}
.calc-verdict-good {
    background: #eaf6ee;
    border-left-color: var(--chart-winner);
    color: #14532d;
}
.calc-verdict-bad {
    background: #fdecea;
    border-left-color: var(--chart-money-out);
    color: #7a271a;
}

/* ── Line chart (mirrors mortgage-overpayment.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 mortgage-overpayment.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-yticks text,
.calc-chart-xticks text {
    fill: #6c757d;
    font-size: 20px;
}
.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);
}