/* Page-specific styles for capital-gains-tax-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 two-column layout is
   the shared .layout-split; the headline is the shared .result-tiles,
   the two breakdowns are table.tax-table and the spouse comparison is
   .result-compare tiles. The one thing of its own is the band chart: a single
   stacked bar showing how income fills the basic rate band before a gain. */

  /* ---------- capital-gains-tax-calculator (scoped) ---------- */

  /* Colour only this calculator uses: the band behind the personal
     allowance. */
  .calc-shell {
    --band-pa: #c9d2e0;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --band-pa: #3a4759;
    }
  }

  /* The completion date is the fieldset's last field but is hidden unless
     the sale is residential property; the field before it then ends the
     fieldset, so it drops its gap the way a last field does. */
  .calc-shell .col-inputs .field:has(+ .field[hidden]:last-child) { margin-bottom: 0; }

  /* ---------- the band chart ----------
     One bar from £0: the Personal Allowance, income, savings, dividends,
     then the gain, with a line where the basic rate band ends. Colours come
     from classes rather than attributes, so they follow dark mode; the key
     under it names every part with its amount, so colour is never the only
     signal. */
  .calc-shell .band-wrap { margin-top: 14px; }
  .calc-shell .chart-wrap.band-wrap svg { height: 40px; margin-top: 0; }
  .calc-shell #bandChart .band-track { fill: var(--surface-alt); }
  .calc-shell #bandChart .seg { stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .calc-shell #bandChart .band-edge { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
  .calc-shell #bandLegend .dot.base { border-top-color: var(--ink); }
  .calc-shell .k-pa { fill: var(--band-pa); background: var(--band-pa); }
  .calc-shell .k-inc { fill: var(--brand); background: var(--brand); }
  .calc-shell .k-sav { fill: var(--loan); background: var(--loan); }
  .calc-shell .k-div { fill: var(--accent); background: var(--accent); }
  .calc-shell .k-badr,
  .calc-shell .k-low { fill: var(--growth); background: var(--growth); }
  .calc-shell .k-high { fill: var(--danger); background: var(--danger); }
  /* The key's chips: the shared .dot shape, coloured by the classes above. */
  .calc-shell #bandLegend { gap: 6px 16px; }
  .calc-shell #bandLegend > span { white-space: nowrap; }

  /* The comparison's explanation sits under the tiles. */
  .calc-shell .result-compare { margin: 14px 0 0; }