/**
 * Tables
 *
 * Default is the data look — mono / compact / `data-voice` typography. Almost
 * every table in PE is data (payment summaries, program stats, admin
 * overviews) so the dominant case wins by default; standalone `<table>`
 * markup looks right with no extra classes.
 *
 * Prose tables (a comparison table inside a resource body, a markdown table
 * in a blog post — anything flowing inside `<text-content>`) automatically
 * shed the data look and get body-font / comfortable density. The container
 * picks the right look based on context, not the author.
 *
 * Tokens (override on a parent or on the table itself):
 *   --table-density                Coarse knob. Lower = tighter; default 0.7 (data).
 *   --table-cell-padding-inline    Per-cell vertical padding (derived from density).
 *   --table-cell-padding-block     Per-cell horizontal padding (derived from density).
 *   --table-font-size              Table font size.
 *   --table-row-border             Border between rows.
 *   --table-header-border-bottom
 *   --table-header-background
 *   --table-header-color
 */

table {
	--table-density: 0.7;

	--table-cell-padding-inline: calc(0.5em * var(--table-density));
	--table-cell-padding-block: calc(0.75em * var(--table-density));

	--table-font-size: 0.9em;
	--table-row-border: 1px solid var(--stroke-auxiliary);
	--table-header-border-bottom: 2px solid var(--stroke-auxiliary);
	--table-header-background: var(--fill-secondary);
	--table-header-color: var(--ink-primary);

	width: auto;
	border-collapse: collapse;
	font-size: var(--table-font-size);

	/* data-voice typography — mono code font, tight tracking */
	font-family: var(--data-voice-font-family);
	line-height: var(--data-voice-line-height);
	letter-spacing: var(--data-voice-letter-spacing);

	a {
		text-decoration: underline;
	}
}

table :where(p, h2, h3) {
	margin-top: 1.5em;
}

th,
td {
	border: var(--table-row-border);
	padding: var(--table-cell-padding-inline) var(--table-cell-padding-block);
	text-align: left;
	vertical-align: top;
	color: var(--ink-secondary);
}

th {
	background-color: var(--table-header-background);
	color: var(--table-header-color);
	font-weight: 600;
}

/* Horizontal scroll on narrow viewports rather than crushed columns */
@media (width < 700px) {
	table {
		display: block;
		overflow-x: auto;
	}
}

/**
 * Prose tables — automatic when a table sits inside <text-content>.
 *
 * Body-font typography, comfortable density. Restores the "table inside
 * flowing prose" feel for resources, blog posts, etc., without the author
 * needing to opt out.
 */
text-content table {
	--table-density: 1;
	--table-font-size: 0.8rem;

	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/**
 * Density override — for the rare case you want the tighter look on a
 * specific table even outside the default scope, or want the comfortable
 * look on a data table.
 */
table[data-density='compact'] {
	--table-density: 0.7;
	--table-font-size: 0.9em;
}

table[data-density='comfortable'] {
	--table-density: 1;
	--table-font-size: 0.8rem;
}

/**
 * Admin context — historically scoped via body.admin-tool. Now redundant
 * with the new default (data look is the baseline) but kept for the
 * `width: 100%` fill, which admin tables rely on to span the full
 * dashboard column.
 */
body.admin-tool table {
	width: 100%;
}