/* Page-specific styles for credit-card-interest-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). */

  /* ---------- credit-card-interest-calculator (scoped) ---------- */

  /* "The next 12 months": the two bars sit above the month-by-month table. */
  .calc-shell #splitBars { margin-bottom: var(--gap-before-box); }

  /* The tables' figures keep to their own narrow columns, and the reader's
     own rate is picked out in "The same balance at other rates". */
  .calc-shell #monthBody th,
  .calc-shell #monthBody td,
  .calc-shell #ratesBody td { white-space: nowrap; }
  .calc-shell #ratesBody tr.is-yours th,
  .calc-shell #ratesBody tr.is-yours td { background: var(--base-soft); font-weight: 700; }