/* Child Benefit charge calculator, per-slug stylesheet.
   The base chart chrome (calc-chart-bg / -line / -gridlines / -legend / -swatch-*) and the shared
   .calc-sr-only rule come from calculator.css + calculator-charts.css, which the page also links. This
   sheet adds only what is specific to this chart: the two stepped paths, the two threshold rules, the dot
   on the payer's own income, and the keep-claiming callout. Geometry, shape and colour only. */

/* The paths are STEPPED and stroke-only: fill:none matters, because a <path> defaults to filled and a
   staircase filled from its own start point renders as a solid wedge. */
.calc-page[data-calc-slug="child-benefit-tax-charge"] .calc-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: miter;
}

.calc-page[data-calc-slug="child-benefit-tax-charge"] .calc-chart-line-charged {
    stroke: var(--chart-tax-primary);
}

.calc-page[data-calc-slug="child-benefit-tax-charge"] .calc-chart-line-kept {
    stroke: var(--chart-money-in);
}

/* The two places the rule changes character: where the charge starts, and where it has taken everything. */
.calc-page[data-calc-slug="child-benefit-tax-charge"] .calc-chart-threshold line {
    stroke: var(--chart-neutral);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}

.calc-page[data-calc-slug="child-benefit-tax-charge"] .calc-chart-threshold text {
    fill: var(--chart-neutral);
    font-size: 10px;
    font-weight: 600;
}

/* The payer's own income on the charged line: the one point on the chart that is about this reader. */
.calc-page[data-calc-slug="child-benefit-tax-charge"] .calc-chart-marker-dot {
    fill: var(--chart-tax-primary);
    /* Matches .calc-chart-bg's fill in calculator-charts.css, so the dot reads as a halo lifting it off
       the line. A literal because the plot background is a literal there too. */
    stroke: #f8f9fa;
    stroke-width: 2;
}

/* The keep-claiming callout. Green because it is the one piece of good news on a page about a charge,
   and it is the page's most actionable finding for exactly the readers who see it. */
.calc-page[data-calc-slug="child-benefit-tax-charge"] .calc-keep-claiming {
    border-left: 3px solid var(--chart-money-in);
}