/* Page-specific styles for inheritance-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 breakdowns are table.tax-table, the doughnut is .split-wrap and the
   two comparisons (the charity rate, pensions from April 2027) are .result-compare
   tiles. What's its own: the list of gifts with its "Add another gift"
   button, and the small heading over the taper scale. */

  /* A late partner's unused allowances open under the marital status. */
  .calc-shell .late-fields { margin-top: 12px; }
  .calc-shell .late-fields .field-row { margin-bottom: 0; }

  .calc-shell .fold-body > .fold-intro { margin: 0 2px var(--field-gap); }

  /* Gifts: one row per gift, amount and years side by side (they stay side
     by side on a phone, where both boxes still have room for their
     figures). "Add another gift" is a quiet text button, like Reset. */
  .calc-shell .col-inputs .gift-row { margin-bottom: 12px; }
  @media (max-width: 560px) {
    .calc-shell .col-inputs .gift-row { column-gap: 12px; }
  }
  .calc-shell .add-gift {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--field-gap);
    padding: 4px 2px;
    border: 0;
    border-radius: 3px;
    background: none;
    font: inherit;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
  }
  .calc-shell .add-gift:hover { color: var(--ink); }
  .calc-shell .add-gift:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .calc-shell .add-gift svg { width: 14px; height: 14px; flex: none; }
  .calc-shell .add-gift[hidden] + .annual-field { margin-top: 2px; }

  /* The doughnut key as written in the page, before the script draws it
     (the script colours each dot itself). */
  .calc-shell .legend-dot.k-ben { background: var(--brand); }
  .calc-shell .legend-dot.k-sp { background: var(--loan); }
  .calc-shell .legend-dot.k-ch { background: var(--growth); }

  /* The taper scale under the gifts: a small heading of its own. */
  .calc-shell .scale-heading {
    margin: 18px 0 4px;
    font-size: var(--text-read);
    font-weight: 700;
  }
  .calc-shell #giftWrap + .scale-heading { margin-top: 20px; }

  /* The comparison cards' explanation sits under the tiles. */
  .calc-shell .result-compare { margin: 14px 0 0; }
  .calc-shell .taper-warn { margin: 0 0 12px; }
  .calc-shell .taper-warn + .rate-line { margin-top: 0; }