/* Premium Bonds calculator, per-slug stylesheet.
   The base chart chrome (calc-chart-bg / -line / -gridlines / -legend / -swatch-*) and the shared
   .calc-sr-only hiding rule come from calculator.css + calculator-charts.css, which the page also links.
   This sheet adds only what is specific to this chart: colours for the three lines, and the two vertical
   markers plus the dot on the reader's own holding. Geometry, shape and colour only, per
   CalculatorDesignSchema.md section 8: nothing here re-declares font-size / color / font-weight on a
   shared class.

   The three lines are deliberately NOT the shared winner / loser pair. Which of Premium Bonds and the
   savings account wins depends on the reader's income and holding and flips inside a single page load, so
   painting one of them "winner" would be wrong half the time. They are coloured by what they ARE instead:
   what you typically win (money in), the headline average (neutral, and dashed because it is a reference
   almost nobody receives rather than an outcome), and the savings account after tax (tax). Those three
   match the legend swatches the markup uses, which come from calculator-charts.css. */

.calc-page[data-calc-slug="premium-bonds-return"] .calc-chart-line-median {
    stroke: var(--chart-money-in);
}

.calc-page[data-calc-slug="premium-bonds-return"] .calc-chart-line-savings {
    stroke: var(--chart-tax-secondary);
}

/* Dashed, and thinner: the headline average is the figure this page exists to put in context, so it is
   drawn as a reference rule rather than as a third competing outcome. */
.calc-page[data-calc-slug="premium-bonds-return"] .calc-chart-line-mean {
    stroke: var(--chart-neutral);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

/* The crossover: the holding at which Premium Bonds overtake the savings account. Absent from the
   markup entirely when there is no crossing, rather than drawn at the edge. It is the only marker on
   this chart: a zero-boundary rule was tried and removed, because the green line lying flat on zero
   shows that fact without a label, and the label it needed made a PROBABILITY claim on a money axis. */
.calc-page[data-calc-slug="premium-bonds-return"] .calc-chart-marker-crossover line {
    stroke: var(--chart-money-in);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.calc-page[data-calc-slug="premium-bonds-return"] .calc-chart-marker-crossover text {
    fill: var(--chart-money-in);
    font-size: 10px;
    font-weight: 600;
}

/* The reader's own holding, on the median line: the one point on the chart that is about them. */
.calc-page[data-calc-slug="premium-bonds-return"] .calc-chart-marker-dot {
    fill: var(--chart-money-in);
    /* Matches .calc-chart-bg's fill in calculator-charts.css, so the dot reads as a halo lifting it off
       the line rather than a second blob. A literal because the plot background is a literal there too;
       there is no --calc-surface token to point at, and inventing one would put a shared-chrome
       declaration in a per-slug sheet. */
    stroke: #f8f9fa;
    stroke-width: 2;
}