/* Page-specific styles for dividend-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 page uses the shared
   single-column layout (.layout-single). */

  /* ---------- dividend-tax-calculator (scoped) ---------- */

  /* The two bars sit above the table of how the tax is built up. */
  .calc-shell #splitBars.hbars { margin-bottom: var(--gap-before-box); }
  /* The pre-written bars (the script redraws them once it runs). */
  .calc-shell #splitBars .hbar:first-child .hbar-fill { width: 28.27%; background: var(--danger); }
  .calc-shell #splitBars .hbar:nth-child(2) .hbar-fill { width: 100%; }

  /* The tables' figures keep to their own narrow columns, and the reader's
     own dividends are picked out in "The same income with other dividends". */
  .calc-shell #howBody th,
  .calc-shell #howBody td,
  .calc-shell #othersBody td { white-space: nowrap; }
  .calc-shell #howBody th { white-space: normal; }
  .calc-shell #othersBody tr.is-yours th,
  .calc-shell #othersBody tr.is-yours td { background: var(--base-soft); font-weight: 700; }

  /* The tax year box doesn't need the whole row: it takes half, like a box
     with box-half (the fieldset itself stays the standard one every
     calculator shares). Full width on a phone. */
  .calc-shell .select-wrap:has(#taxYear) { max-width: calc(50% - var(--field-gap-across) / 2); }
  @media (max-width: 560px) {
    .calc-shell .select-wrap:has(#taxYear) { max-width: none; }
  }

  /* The thresholds table keeps its figures on one line and its description
     wraps. */
  .calc-shell #roomBody td { white-space: nowrap; }