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

  /* ---------- pension-calculator (scoped) ---------- */

  /* Colour only this calculator uses: --today marks the today's-money
     column of the table. */
  .calc-shell {
    --today: #895430;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --today: #e0a878;
    }
  }

  .calc-shell .stat-grid + .warn-box { margin-top: 14px; }
  .calc-shell #rTilesNote { margin-bottom: 0; }

  /* The year-by-year table: the today's-money column in its own colour (the
     heading says which is which). */
  .calc-shell table.proj td:last-child { color: var(--today); font-weight: 600; }

  /* Two rows of tiles in one card. */
  .calc-shell .stat-grid + .stat-grid { margin-top: 12px; }