/* Page-specific styles for redundancy-pay-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). */

  /* ---------- redundancy-pay-calculator (scoped) ---------- */

  /* Colours only this calculator uses. The four --seg-* colours are the
     parts of the payout bar; each carries white text, so the dark-
     mode values stay deep enough for it to read. */
  .calc-shell {
    --seg-free: #0b6b4f;
    --seg-pension: #2f5f9e;
    --seg-over: #5a6b85;
    --seg-pay: #895430;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --seg-free: #13704f;
      --seg-pension: #2f5a96;
      --seg-over: #4a5a74;
      --seg-pay: #8f5630;
    }
  }

  /* A small line under a figure in a stat tile ("Capped from £900"). */
  .calc-shell #rNote { margin-bottom: 14px; }

  /* The payout bar: tax-free, paid into a pension, redundancy pay over
     £30,000, and pay taxed with NI. The over-£30,000 part is hatched, so it
     differs from its neighbours by more than colour; the key and the table
     under it give the figures. */
  .calc-shell .bar { background: var(--surface-alt); }
  .calc-shell .bar .seg-free { width: 100%; background: var(--seg-free); }
  .calc-shell .bar .seg-pension { width: 0; background: var(--seg-pension); }
  .calc-shell .bar .seg-over {
    width: 0;
    background: repeating-linear-gradient(45deg, var(--seg-over), var(--seg-over) 8px, color-mix(in srgb, var(--seg-over) 78%, #000) 8px, color-mix(in srgb, var(--seg-over) 78%, #000) 16px);
  }
  .calc-shell .bar .seg-pay { width: 0; background: var(--seg-pay); }
  .calc-shell .dot.free { background: var(--seg-free); }
  .calc-shell .dot.pension { background: var(--seg-pension); }
  .calc-shell .dot.over { background: var(--seg-over); }
  .calc-shell .dot.pay { background: var(--seg-pay); }
  .calc-shell .payout-table { margin-top: 14px; }

  .calc-shell .years-table td:nth-child(2) { color: var(--ink-soft); }
  .calc-shell .years-table td.proj-empty { text-align: center; }

  /* The key wraps onto several lines on a phone; keep those lines close. */
  .calc-shell .legend { row-gap: 6px; }