/*
 * rooster/compare-table (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (brief of 31 Oct 2026, package 1; the landing parity brief): the comparison table on
 * computers (full width inside its section, a thin row rule and no card around it, the first column semibold, the
 * highlighted columns tinted with the accent's wash and their heads in the accent colour, the marks an icon plus hidden
 * words, the soon pill, a group row in its tone), the per-plan sections on phones (each feature a row: its name at the
 * left, the plan's value at the right), and the scroll region. Compiled by build/blocks-css.mjs to style.css.
 */

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

/* ---------- the table (computers; phones in scroll mode) ---------- */

.rooster-compare-table--table,
.rooster-compare-table__table {
	@apply w-full text-sm text-fg;
	border-collapse: collapse;
}

.rooster-compare-table__caption {
	@apply text-sm text-muted;
	caption-side: bottom;
	padding-block: var(--wp--preset--spacing--3);
	text-align: start;
}

.rooster-compare-table th,
.rooster-compare-table td {
	@apply px-s4 py-s3;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: start;
	vertical-align: middle;
}

.rooster-compare-table th {
	font-weight: 600;
}

.rooster-compare-table thead th {
	border-bottom-width: 2px;
}

.rooster-compare-table tbody tr:last-child th,
.rooster-compare-table tbody tr:last-child td {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.rooster-compare-table td:not(.is-text) {
	text-align: center;
}

.rooster-compare-table .is-highlighted {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 8%, var(--wp--preset--color--bg));
}

.rooster-compare-table thead .is-highlighted {
	color: var(--wp--preset--color--accent-text);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* A group heading row (the subtle wash across the row), and the note under the table. */
/* A group's name with its icon before it: 16 px, 8 px apart (the legacy LMS comparison's section rows). */
.rooster-compare-table .rooster-compare-table__group-name {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.rooster-compare-table .rooster-compare-table__group-icon {
	flex: none;
	color: var(--wp--preset--color--accent-text, light-dark(#1e63ce, #8eb4ee));
}

.rooster-compare-table__group th {
	background-color: var(--wp--preset--color--subtle);
	padding-block: var(--wp--preset--spacing--2);
}

/*
 * A group in its tone (`# Name | icon | tone`; the legacy LMS comparison's section rows): the row on the tone's tint
 * (the accent at 16 % over the surface: a dim tint on a dark one), its words in the tone's ink, kept readable on that
 * tint (no lighter than oklch 0.45 on a light surface, no darker than 0.78 on a dark one: a text shade made for the page
 * can fall under 4.5:1 on its own wash; the warning's is its ink, warning-ink, theme 1.3.8), a 4 px rule at its start
 * in the tone. 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.
 * Relative colours: a browser without them draws the row untinted in the text colour.
 */
.rooster-compare-table .is-tone-success {
	--rooster-compare-tone: var(--wp--preset--color--success);
	--rooster-compare-tone-text: var(--rooster-compare-tone);
}

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

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

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

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

.rooster-compare-table__group[class*="is-tone-"] > th,
li.rooster-compare-table__group[class*="is-tone-"] {
	background-color: rgb(from var(--wp--preset--color--accent) r g b / 16%);
	color: light-dark(oklch(from var(--wp--preset--color--accent-text) min(l, 0.45) c h), oklch(from var(--wp--preset--color--accent-text) max(l, 0.78) c h));
	border-inline-start: 4px solid var(--wp--preset--color--accent);
}

.rooster-compare-table__note {
	@apply m-0 mt-s3 text-sm text-muted;
}

/* A mark's note, on its own second line (the legacy's `<br><span class="lmsl-small">`). */
.rooster-compare-table__value {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* ---------- the marks ---------- */

.rooster-compare-table .rooster-mark {
	vertical-align: middle;
}

.rooster-compare-table .is-yes .rooster-mark {
	color: var(--wp--preset--color--success);
}

.rooster-compare-table .is-no .rooster-mark {
	color: var(--wp--preset--color--muted);
}

/* The partial mark is a mark drawn in the warning's ink (the palette's warning-ink, theme 1.3.8; warning stays the fills'). */
.rooster-compare-table .is-partial .rooster-mark {
	color: var(--wp--preset--color--warning-ink, light-dark(#896610, #fbbf24));
}

/*
 * Soon: a pill with its words (the legacy's `.lmsl-soon`: 12 px, bold) on the warning's tint (the fill: warning at
 * 16 %), its words the warning's ink (warning-ink, theme 1.3.8: 4.5:1 on the page and on the subtle surface), on a
 * light surface no lighter than oklch 0.45 as every tone's words on their own tint (the ink reads 4.49 and 4.10 on
 * the tint over white and over subtle); the dark scheme's ink as it is on the dim tint.
 */
.rooster-compare-table__soon {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background-color: rgb(from var(--wp--preset--color--warning) r g b / 16%);
	color: light-dark(oklch(from var(--wp--preset--color--warning-ink, #896610) min(l, 0.45) c h), var(--wp--preset--color--warning-ink, #fbbf24));
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

/* ---------- phones: one section per plan ---------- */

.rooster-compare-table--stack {
	@apply grid gap-s5;
}

.rooster-compare-table--stack .rooster-compare-table__caption {
	margin: 0;
	padding: 0;
}

.rooster-compare-table__plan {
	@apply p-s5 rounded-card bg-bg;
	border: 1px solid var(--wp--preset--color--line);
}

.rooster-compare-table__plan.is-highlighted {
	border-color: var(--wp--preset--color--accent);
}

.rooster-compare-table__plan-name {
	@apply m-0 mb-s3 text-lg;
	line-height: var(--wp--custom--rooster--leading--heading);
	font-weight: 600;
}

.rooster-compare-table__list {
	@apply m-0 p-0 list-none grid text-sm;
}

/* A feature: its name at the left, the plan's value at the right (at its own width, up to 55 %, wrapping inside it). */
.rooster-compare-table__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) fit-content(55%);
	gap: 0 var(--wp--preset--spacing--3);
	align-items: start;
	padding-block: var(--wp--preset--spacing--2);
	border-top: 1px solid var(--wp--preset--color--line);
	overflow-wrap: break-word;
}

.rooster-compare-table__list > :first-child,
.rooster-compare-table__group + * {
	border-top: 0;
}

.rooster-compare-table__item.is-no {
	color: var(--wp--preset--color--muted);
}

.rooster-compare-table__cell {
	text-align: end;
}

.rooster-compare-table__cell > .rooster-mark {
	margin-inline-end: 0.25rem;
}

/* A group in the plan's list: the table's group row, across the list. */
li.rooster-compare-table__group {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	background-color: var(--wp--preset--color--subtle);
	font-weight: 600;
}

.rooster-compare-table__item + .rooster-compare-table__group {
	margin-top: var(--wp--preset--spacing--3);
}

/* ---------- phones: the scroll region ---------- */

/*
 * The region is its cells' containing block (position: relative), so it clips what they position too: the marks'
 * words for a screen reader (`.screen-reader-text`, absolutely positioned) sat at their place in the wide table, outside
 * a static region's clip, and widened the phone's page to the table's width (get-rooster-lms' rivals table: 846 px at
 * 390, package T).
 */
.rooster-compare-table--scroll {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--wp--custom--rooster--shape--card);
}

.rooster-compare-table--scroll:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.rooster-compare-table--scroll .rooster-compare-table__table {
	min-width: 36rem;
}