/* Data table
 *
 * Rows compared across columns: transactions, and an Event's guest list. It
 * existed twice in the prototype — `.t-table` and `.g-table`, byte-identical
 * apart from one rule — which is the reason it is a component.
 *
 *   <div class="table-wrap">
 *     <table class="data-table">
 *       <caption class="sr-only">Guest list</caption>
 *       <thead><tr><th scope="col">Guest</th><th scope="col" class="num">Pax</th></tr></thead>
 *       <tbody>…</tbody>
 *     </table>
 *   </div>
 *
 * ── a table is for comparing, and that is the whole test ─────────────────────
 * Use it where a reader scans DOWN a column: amounts against amounts, statuses
 * against statuses. Where they read one record at a time, that is a list row,
 * not a table with one meaningful column.
 *
 * ── it is not the phone layout, and must not be squeezed into one ────────────
 * Below the breakpoint the same data is rendered as stacked rows instead. A
 * five-column table at 390px is unreadable however it is scrolled, and a stack
 * of cards at 1100px throws away the comparison a table gives for free. Two
 * renderings, one dataset — and if the screen pages, both read the same page.
 *
 * ── requirements this file does not enforce ──────────────────────────────────
 *   · Every table has a caption, visually hidden if the heading above already
 *     says it. It is what a screen reader announces on entry.
 *   · Every header cell carries `scope`. Without it the association is guessed.
 *   · Numeric columns are `.num` — end-aligned and tabular — on the header too,
 *     or the header sits over the wrong edge of its own column.
 *   · Never a fixed width around translated text. Headers grow ~40% in some
 *     languages; the wrapper scrolls rather than the page.
 */

/* The wrapper scrolls, not the page. design.md: the body never scrolls
 * horizontally — wide content scrolls inside its own container. */
.table-wrap {
  overflow-x: auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  text-align: start;
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-border);
  vertical-align: middle;
}

/* Quieter and smaller than the data. A header row competing with its own rows
 * is the commonest way a table stops being scannable. */
.data-table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Numbers line up by place value, or the column cannot be compared at a glance
 * — which is the only reason to have used a table. */
.data-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* The identifying column carries the weight, so a reader scanning down finds
 * the row before reading across it. */
.data-table--named td:first-child {
  font-weight: var(--weight-medium);
}

/* …and its opposite: a leading column that is metadata rather than identity —
 * a date on a transaction — recedes instead. */
.data-table--dated td:first-child {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* A row whose record is cancelled or withdrawn. Never removed from the table:
 * seeing who dropped out is the reason the row is still there. Dimmed AND its
 * status cell still says so in words — this is not colour alone. */
.data-table tr.is-muted td {
  color: var(--color-text-muted);
}