@layer components {
  /* A panel hosts a table on its own sheet of paper. */
  .panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* Register-section summary: label · count · open. The count is the ledger
     column — mono, tabular, right-aligned. */
  .summary { width: 100%; }
  .summary td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
  .summary tr:last-child td { border-bottom: 0; }
  .summary tr:hover td { background: var(--paper); }
  .summary__label { color: var(--ink); }
  .summary__count {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-lg);
  }
  .summary__open { width: 1%; white-space: nowrap; text-align: right; }
  .summary__open a { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-sm); }

  /* Ledger: the results table. Serif small-caps headers, sepia row rules,
     hetus in mono. */
  .ledger { width: 100%; font-size: var(--text-sm); }
  .ledger thead th {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule-strong);
  }
  .ledger td { padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--rule-soft); }
  .ledger tbody tr:last-child td { border-bottom: 0; }
  .ledger tbody tr:hover td { background: var(--paper); }
  .ledger__name a { color: var(--ink); }
  .ledger__hetu { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .ledger__row.is-deceased .ledger__name a { color: var(--ink-3); }
  .deceased-mark { color: var(--ink-4); margin-right: 4px; }

  /* Statistics ledgers: figures right-aligned in mono, zeros recede so the
     real counts pop, total rows rule themselves off, and a soft vertical rule
     separates a matrix from its totals columns. */
  .ledger .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .ledger th.num { white-space: nowrap; }
  .ledger .num.is-zero { color: var(--ink-4); }
  .ledger .rule-left { border-left: 1px solid var(--rule); }
  .ledger__row--total td { font-weight: 600; border-top: 1px solid var(--rule-strong); }

  /* Dense variant for wide matrices (the demography table): tighter cells and
     smaller type so fourteen columns fit the page before the panel scrolls. */
  .ledger--dense { font-size: var(--text-xs); }
  .ledger--dense thead th, .ledger--dense td { padding: var(--space-1) var(--space-2); }
  .ledger--dense thead th { letter-spacing: 0.02em; }
  .ledger--dense td:first-child { white-space: nowrap; }

  /* A wide table (the demography matrix) scrolls inside its panel. */
  .panel--scroll { overflow-x: auto; }
}