/*
 * Data table.
 *
 * Rules and space, no fills and no zebra striping — a header band, a hairline
 * under every row, and nothing else. The same treatment the documentation uses
 * for its own tables, lifted into the shared system.
 *
 * Wrap the table in `.table-wrap` so a wide one scrolls inside its own box
 * rather than pushing the page sideways. The wrapper carries `tabindex="0"`
 * and an accessible name in the markup, because a scrollable region has to be
 * reachable from the keyboard.
 */

.table-wrap {
	overflow-x: auto;
	/* Stops the flex/grid parent from letting the table dictate the page width. */
	min-width: 0;
	max-width: 100%;
}

.table-wrap:focus-visible {
	outline: 2px solid var(--color-signal);
	outline-offset: 2px;
}

.table {
	width: 100%;
	border-collapse: collapse;
	/* Wide tables scroll rather than crushing their columns. */
	min-width: 32rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--color-ink-2);
}

.table caption {
	margin-bottom: 0.75rem;
	color: var(--color-ink-3);
	font-size: 0.875rem;
	text-align: left;
}

.table th,
.table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--color-line);
	text-align: left;
	vertical-align: top;
}

.table thead th {
	background: var(--color-canvas-2);
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	font-weight: 400;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	white-space: nowrap;
}

/* A row header, for tables whose first column names the row. */
.table tbody th {
	color: var(--color-ink);
	font-weight: 600;
}

.table code {
	white-space: nowrap;
}

/*
 * Numbers line up when they share a column, so set them in the mono face.
 * Scoped through .table because `.table th, .table td` above is one type
 * selector more specific than a bare class, and would win the text-align.
 */
.table .table__cell--numeric {
	font-family: var(--font-mono);
	font-size: var(--text-data);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* The last row's rule is usually redundant against whatever follows. */
.table--flush tbody tr:last-child th,
.table--flush tbody tr:last-child td {
	border-bottom: 0;
}

/* Denser, for long reference tables. */
.table--compact th,
.table--compact td {
	padding: 0.4rem 0.6rem;
}

/* On a dark section. */
.table--on-signal {
	color: var(--paper-80);
}

.table--on-signal th,
.table--on-signal td {
	border-bottom-color: var(--paper-15);
}

.table--on-signal thead th {
	background: var(--paper-10);
	color: #fff;
}

.table--on-signal tbody th {
	color: #fff;
}