/*
 * rooster/data-table (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 1): the legacy promo template's table, complete on
 * its own: the frame (1rem corners, the line colour, scrolling sideways), the table at full width and 560 px at the
 * least in the small type, the header row on a wash, the cells 1rem by 0.75rem, the rows divided by the line colour on
 * the card surface, the tick (Lucide's check, a mask of this sheet) in the family's colour, the dash muted, and the
 * cells' words for screen readers (its own rule). Colours are the theme's tokens with the legacy's light and dark values as
 * fallbacks. Compiled by build/blocks-css.mjs.
 */

@import "../../theme.css";

.rooster-data-table {
	--rooster-data-table-line: var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%)));
	--rooster-data-table-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	position: relative;
	box-sizing: border-box;
	overflow-x: auto;
	border: 1px solid var(--rooster-data-table-line);
	border-radius: 1rem;
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-data-table:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	outline-offset: 2px;
}

.rooster-data-table .rooster-data-table__table {
	width: 100%;
	min-width: 560px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	text-indent: 0;
	text-align: left;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.rooster-data-table :is(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.rooster-data-table .is-centred {
	text-align: center;
}

.rooster-data-table__head {
	background: light-dark(var(--wp--preset--color--subtle, light-dark(#f8fafc, #070b1d)), rgb(255 255 255 / 5%));
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-data-table__head th {
	font-weight: 600;
}

.rooster-data-table__body {
	background: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
}

.rooster-data-table__body tr {
	border: 0;
}

.rooster-data-table__body tr:not(:last-child) {
	border-bottom: 1px solid var(--rooster-data-table-line);
}

.rooster-data-table__body th {
	font-weight: 500;
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-data-table__body td {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
}

/*
 * A row in its tone (the line's last cell; the legacy LMS landing's `table.lmsl-split tbody th.lmsl-sec`): its heading
 * behind a 4 px rule at its start in the tone, its words in the tone's ink (no lighter than oklch 0.5 on a light
 * surface, no darker than 0.78 on a dark one, so a semantic colour reads as text; the warning's is its ink,
 * warning-ink, theme 1.3.8). A family's tone is the theme's
 * accent class on the row (its accent presets re-mapped there); a semantic tone maps them here to the palette's colour.
 */
.rooster-data-table__body .is-tone-success {
	--rooster-data-table-tone: var(--wp--preset--color--success);
	--rooster-data-table-tone-text: var(--rooster-data-table-tone);
}

.rooster-data-table__body .is-tone-warning {
	--rooster-data-table-tone: var(--wp--preset--color--warning);
	--rooster-data-table-tone-text: var(--wp--preset--color--warning-ink, light-dark(#896610, #fbbf24));
}

.rooster-data-table__body .is-tone-danger {
	--rooster-data-table-tone: var(--wp--preset--color--danger);
	--rooster-data-table-tone-text: var(--rooster-data-table-tone);
}

.rooster-data-table__body .is-tone-neutral {
	--rooster-data-table-tone: var(--wp--preset--color--muted);
	--rooster-data-table-tone-text: var(--rooster-data-table-tone);
}

.rooster-data-table__body :is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--wp--preset--color--accent: var(--rooster-data-table-tone);
	--wp--preset--color--accent-text: var(--rooster-data-table-tone-text);
}

.rooster-data-table__body [class*="is-tone-"] th {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	color: light-dark(oklch(from var(--wp--preset--color--accent-text) min(l, 0.5) c h), oklch(from var(--wp--preset--color--accent-text) max(l, 0.78) c h));
}

.rooster-data-table__yes {
	display: inline-flex;
	color: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
}

.rooster-data-table__tick {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: var(--rooster-data-table-tick) center / contain no-repeat;
	mask: var(--rooster-data-table-tick) center / contain no-repeat;
}

.rooster-data-table__no {
	color: var(--wp--preset--color--muted, light-dark(#45556c, #90a1b9));
}

.rooster-data-table .rooster-data-table__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}