@layer base {
	/* LuCI tables are div soup (.table/.tr/.th/.td), display roles assigned by hand. */
	.tr { display: table-row; }
	.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
	.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }

	.table {
		display: table;
		width: 100%;
		margin-bottom: var(--fs-space-4);
		padding: 0;
		font-size: var(--fs-type);
		border-collapse: collapse;
		position: relative;
	}

	/* Separator on the ROW (theme/30-tables.css), not the cell — else doubled and squares off
	 * the frame's rounded corner (issue #7). */
	.table .th, .table .td {
		display: table-cell;
		vertical-align: middle;
		padding: var(--fs-space-2) var(--fs-space-3);
		text-align: start;
	}

	/* Containment default, not the data-table floor: docs/css.md "Tables: overflow-wrap follows
	 * the tier, not the file". First column is a label too; exempt once carded (.fs-stacked .td,
	 * theme/30-tables.css). */
	.table .td { overflow-wrap: anywhere; }
	.table .th,
	.table .tr > .td:first-child { overflow-wrap: break-word; }

	.table .tr:first-child .th {
		padding-top: var(--fs-space-2);
		font-weight: var(--fs-weight-bold);
		vertical-align: top;
	}

	/* Out-of-flow, static position (never `bottom: 0`): docs/css.md "Tables: the empty-table
	 * placeholder must not pin to the table's bottom" (issue #36). */
	.tr.placeholder {
		height: calc(3em + var(--fs-space-4));
	}

	.tr.placeholder > .td {
		position: absolute;
		inset-inline: 0;
		text-align: center;
		line-height: 3em;
		padding-block: var(--fs-space-2); /* two --fs-space-2 = the row height above, one number */
	}

	/* Physical: border-block-start/-end need a browser-floor support decision first. */
	.tr.drag-over-above {
		border-top: 2px solid var(--fs-accent);
	}

	.tr.drag-over-below {
		border-bottom: 2px solid var(--fs-accent);
	}
}