/* Page-specific styles for childcare-100k-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The page uses the shared
   single-column layout (.layout-single). */

  /* ---------- childcare-100k-calculator (scoped) ---------- */

  /* Money left after tax and childcare as your salary changes: the line as
     things are, the line paying into a pension to stay at £100,000, the
     60% band shaded and your salary marked. */
  .calc-shell #cliffChart .trap-zone { fill: var(--danger); opacity: .08; }
  .calc-shell #cliffChart .line-now { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
  .calc-shell #cliffChart .line-kept { fill: none; stroke: var(--growth); stroke-width: 2; stroke-dasharray: 6 4; }
  .calc-shell #cliffChart .you-line { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 3; }
  .calc-shell #cliffChart .you-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
  .calc-shell #cliffLegend .dot.c-now { background: var(--accent); }
  .calc-shell #cliffLegend .dot.c-kept {
    background: transparent;
    border-top: 2px dashed var(--growth);
    height: 0;
    border-radius: 0;
    vertical-align: 4px;
    width: 14px;
  }
  .calc-shell #cliffLegend .dot.c-trap { background: color-mix(in srgb, var(--danger) 22%, transparent); border-radius: 2px; }
  .calc-shell #cliffLegend .dot.c-you { background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-soft); }