/* A box around a table: the same raised surface as .card — hairline
   border, radius, one minimal shadow — so a table that would otherwise
   float on the page has an edge and sits slightly above it. Nothing
   inside changes: the rows keep the default ruled grammar.

   The two rules below are the cost of the corners, not styling of the
   content: border-radius has no effect while borders are collapsed, and
   separated borders would otherwise space the cells apart and draw the
   last row's rule on top of the box's own bottom edge. */
.table-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  border-collapse: separate;
  border-spacing: 0;
}
.table-box tbody tr:last-child td { border-block-end: 0; }

/* A box needs inner margin: content pressed against its own edge reads as
   cramped, and the columns want air between them too. Block spacing stays
   the table's — this is the horizontal axis only. */
.table-box th,
.table-box td { padding-inline: var(--space-4); }

/* The header is the box's lid: a quiet fill, and the same one minimal
   shadow the box itself casts, so the band sits above its rows instead
   of beside them. Its outer corners follow the box's own. The labels
   keep their muted sentence-case voice — a band, not a shout
   (Tables rule 7). */
.table-box thead th {
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-weight: 700;
  color: var(--ink);
}
.table-box thead th:first-child { border-start-start-radius: var(--radius-2); }
.table-box thead th:last-child { border-start-end-radius: var(--radius-2); }