/*
 * rooster/checklist (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 ticked lists,
 * complete on its own: the four layouts, the tick (Lucide's check) and the book (Lucide's book-open) as masks of this
 * sheet in the family's colour, the rows' borders and surface, the panel's wash. Colours are the theme's tokens with
 * the legacy's light and dark values as fallbacks. The breakpoint is the legacy's, of the window: 48rem (md). Compiled by
 * build/blocks-css.mjs.
 */

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

.rooster-checklist {
	--rooster-checklist-ink: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
	--rooster-checklist-fam: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	--rooster-checklist-strong: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
	--rooster-checklist-text: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	--rooster-checklist-line: var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%)));
	--rooster-checklist-surface: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
	--rooster-checklist-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");
	--rooster-checklist-book: 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='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--rooster-checklist-text);
	overflow-wrap: normal;
	word-break: normal;
	margin-block-end: 0;
}

.rooster-checklist *,
.rooster-checklist *::before,
.rooster-checklist *::after {
	box-sizing: border-box;
}

.rooster-checklist.rooster-checklist__list,
.rooster-checklist .rooster-checklist__list {
	display: grid;
	padding: 0;
	list-style: none;
}

.rooster-checklist .rooster-checklist__list {
	margin: 0;
}

.rooster-checklist li {
	margin: 0;
}

.rooster-checklist__item {
	display: flex;
}

.rooster-checklist__tick {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	background-color: var(--rooster-checklist-ink);
	-webkit-mask: var(--rooster-checklist-tick) center / contain no-repeat;
	mask: var(--rooster-checklist-tick) center / contain no-repeat;
}

/* ---------- grid: two columns of lines ---------- */

.rooster-checklist--grid {
	column-gap: 2rem;
	row-gap: 0.75rem;
}

.rooster-checklist--grid .rooster-checklist__item,
.rooster-checklist--cards .rooster-checklist__item {
	gap: 0.75rem;
	line-height: 1.625;
}

@media (min-width: 48rem) {
	.rooster-checklist--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- cards: bordered rows ---------- */

.rooster-checklist--cards {
	align-content: start;
	gap: 0.75rem;
}

.rooster-checklist--cards .rooster-checklist__item {
	padding: 1rem;
	border: 1px solid var(--rooster-checklist-line);
	border-radius: 0.75rem;
	background: var(--rooster-checklist-surface);
}

/* ---------- panel: the heading and the small lines on a wash ---------- */

.rooster-checklist--panel {
	height: 100%;
	padding: 1.5rem;
	border-radius: 1rem;
	background: light-dark(var(--wp--preset--color--subtle, light-dark(#f8fafc, #070b1d)), rgb(255 255 255 / 5%));
}

.rooster-checklist--panel .rooster-checklist__heading {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	letter-spacing: normal;
	text-wrap: wrap;
	color: var(--rooster-checklist-strong);
}

.rooster-checklist--panel .rooster-checklist__list {
	margin-top: 1rem;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.625;
}

.rooster-checklist--panel .rooster-checklist__item {
	gap: 0.625rem;
}

/* ---------- links: the manual's pages ---------- */

.rooster-checklist--links {
	gap: 0.25rem;
}

.rooster-checklist .rooster-checklist__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	font-weight: 500;
	color: var(--rooster-checklist-strong);
	text-decoration: underline;
	text-decoration-color: var(--rooster-checklist-fam);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.rooster-checklist .rooster-checklist__link:hover {
	text-decoration-color: var(--rooster-checklist-strong);
}

.rooster-checklist__book {
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--rooster-checklist-book) center / contain no-repeat;
	mask: var(--rooster-checklist-book) center / contain no-repeat;
}