/* Shared by every page. Linked by scripts/build-site-index.mjs, which also gives each table cell
   a data-label from its column heading. */

/* Guide tables on phones: each row becomes a small card, each value labelled with its column,
   instead of a wide table you have to scroll sideways. */
@media (max-width: 680px) {
  body .tbl-wrap.tbl-wrap { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  body .tbl.tbl { display: block; min-width: 0; width: 100%; border: 0; }
  body .tbl.tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body .tbl.tbl tbody, body .tbl.tbl tr, body .tbl.tbl th, body .tbl.tbl td { display: block; width: auto; }
  body .tbl.tbl tr { background: var(--card, #fff); border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); padding: 12px 14px; margin: 0 0 10px; }
  body .tbl.tbl tbody tr:hover td, body .tbl.tbl tbody tr:hover th { background: none; }
  body .tbl.tbl th, body .tbl.tbl td { border: 0; padding: 5px 0; text-align: left; }
  body .tbl.tbl tr > th:first-child { font-size: 16px; font-weight: 700; padding: 0 0 4px; }
  body .tbl.tbl td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 650; color: var(--muted, #7f8a84); margin-bottom: 1px; }
  body .tbl.tbl td.r, body .tbl.tbl th.r { text-align: left; }
}