/*
	.table__scroll is the horizontal-scroll boundary, not .table itself — a
	real comparison table (row headers + several data columns) is exactly
	the kind of wide content that can't just reflow on a narrow viewport the
	way prose does, so it scrolls in its own container instead of forcing
	the whole page wider.
*/
.table__scroll {
	overflow-x: auto;
}

.table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	/* Matches Benefits' own card text (var(--card-text-font-size), 20px) —
	   set once here so every cell (row/column headers and data alike)
	   inherits the same size, rather than repeating it on both th and td. */
	font-size: var(--card-text-font-size);
	/*
		table-layout stays auto (the default) on purpose — fixed layout only
		reads an explicit <length>/<percentage> on a <col> or a first-row
		cell, never actual content, so there's no fixed-layout way to shrink
		the row header column to its own text (confirmed: both "width: 1%"
		and "width: max-content" on a fixed-layout <col> were ignored and
		every column split evenly instead).

		Under auto layout, "width: 1%" on th[scope="row"] IS a genuine
		content-sizing trick, not a literal fraction: 1% is far smaller than
		the row header text's own min-content width (kept on one line by
		white-space: nowrap below), so the browser falls back to that
		min-content width for the column instead. The data columns then
		divide the rest of the table's width between themselves — auto
		layout has no way to GUARANTEE those columns land perfectly even the
		way table-layout: fixed would, so an unusually long column header or
		data cell can still widen its own column; accepted trade-off for
		getting the row header column's own sizing right.
	*/
	& th[scope="row"] {
		width: 1%;
		white-space: nowrap;
	}

	& th,
	& td {
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--color-border);
	}

	/* Every row's own first/last cell loses its outer vertical border, so
	   the table reads as open-sided (no left/right edge) while every other
	   border — including every row's own top/bottom rule and the internal
	   column dividers — stays. :first-child/:last-child, not nth-child on
	   <td>, since the row header (<th scope="row">) is always the actual
	   first cell and the last data column is always the actual last cell,
	   regardless of how many columns this table has (1-6, see table.php). */
	& tr > :first-child {
		border-left: none;
	}

	& tr > :last-child {
		border-right: none;
	}

	/* Zebra striping — odd data rows only (not the header rows above them).
	   A plain background-color on the <tr> paints behind every cell in
	   that row, th included; .bg-highlight cells (below) still win where
	   they're set, since an explicit background on the cell itself is more
	   specific than the row's own. color-mix, not the opacity property —
	   opacity would also fade the row's own text/icons/borders, not just
	   the fill. 50%, by request, same technique --color-border (tokens.css)
	   already uses for its own translucent value. */
	& tbody tr:nth-child(odd) {
		background-color: color-mix(in srgb, var(--color-tint-bg) 50%, transparent);
	}

	/* Row headers (left column) and column headers read as labels, not
	   data, but now share the same left alignment as everything else in
	   this table — no more centred/left split. */
	& th {
		font-weight: var(--font-weight-medium);
	}

	/* The icon (Yes/No) or text a cell holds should sit centred vertically,
	   not just left via the table's own text-align. */
	& td {
		vertical-align: middle;

		& svg {
			display: inline-block;
			width: 1.25rem;
			height: 1.25rem;
		}
	}

	/* .bg-highlight (layout.css) supplies its own background-color + color;
	   only the parts specific to sitting inside a table cell belong here. */
	& td.bg-highlight {
		font-weight: var(--font-weight-medium);
	}

	/*
		Icon cells (table.php's table__cell--icon modifier — any cell set to
		Icon: Yes/No, not Text) get a fixed minimum column width, so an
		icon-only column doesn't visually drift wider/narrower from table to
		table purely because of what else happens to share that column — an
		icon has no text content to size a column from the way a label does.

		width, not min-width: the table stays table-layout: auto (see this
		file's own docblock above on th[scope="row"]), and the spec doesn't
		define min-width on a table cell at all — but width on a cell in an
		auto-layout table already behaves as a minimum, not a fixed size, so
		this still lets a genuinely wider sibling cell grow the column past
		it. (.is-all-icons below is the one case that needs a real fixed
		width instead, which is why it overrides this to width: auto and
		fixes the TABLE's own layout instead — see that rule.)
	*/
	& td.table__cell--icon {
		width: var(--table-icon-column-width);
		text-align: center;
	}

	/*
		When EVERY body cell in the table is an icon (table.php works this
		out — header rows don't count), there's no text content anywhere to
		size columns from in the first place, so splitting them evenly reads
		better than every column sitting at the same fixed minimum with
		leftover space pushed arbitrarily onto whichever column happens to
		come last. table-layout: fixed is what actually makes an auto-layout
		table split evenly; it also means the icon cells' own width above
		would now set a literal (not minimum) width, fighting the even split,
		so it's reset to auto here.
	*/
	&.is-all-icons {
		table-layout: fixed;

		& td.table__cell--icon {
			width: auto;
		}

		/*
			th[scope="row"]'s own "width: 1%" (above) is an auto-layout-only
			content-sizing trick — under table-layout: fixed it would instead
			be read literally, collapsing the row header column to almost
			nothing. Resetting it to auto alongside the icon cells above means
			every column here has no explicit width at all, so fixed layout's
			own algorithm splits the table evenly across all of them,
			including the row header.
		*/
		& th[scope="row"] {
			width: auto;
			white-space: normal;
		}
	}
}