/* Page-specific styles for credit-card-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-calculator (scoped) ---------- */

  /* The chart's two lines: your payment (the accent) and the minimum
     (dashed, in the warning colour). */
  .calc-shell .chart-legend .dot.cc-you { background: var(--accent); }
  .calc-shell .chart-legend .dot.cc-min { background: var(--danger); height: 3px; vertical-align: 3px; }

  /* "Paying a little more": the first column says what's paid, the
     figures keep to their own narrow columns. */
  .calc-shell #moreBody td { white-space: nowrap; }