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

  /* The rule box under the provider: the shared .rate-line, with the
     provider's name, its rule and where the rule comes from on lines of
     their own. */
  .calc-shell .card-rule > span,
  .calc-shell .card-rule > strong { display: block; }
  .calc-shell .card-rule-name { color: var(--ink); }
  .calc-shell .card-rule-words { margin-top: 3px; color: var(--ink); }
  .calc-shell .card-rule-src { margin-top: 6px; }
  .calc-shell .card-rule a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

  /* The chart's two lines: the minimum (dashed, in the warning colour) and
     this month's minimum kept as a fixed payment (the accent). */
  .calc-shell .chart-legend .dot.cm-fixed { background: var(--accent); }
  .calc-shell .chart-legend .dot.cm-min { background: var(--danger); height: 3px; vertical-align: 3px; }

  /* The tables' figures keep to their own narrow columns, and the minimum
     row is picked out in "Paying more than the minimum". */
  .calc-shell #yearsBody td,
  .calc-shell #moreBody td { white-space: nowrap; }
  .calc-shell #moreBody tr.is-yours th,
  .calc-shell #moreBody tr.is-yours td { background: var(--base-soft); font-weight: 700; }