/*
 * rooster/fact-list (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 hero's figures, complete on
 * its own: the grid, the family-coloured rule, the value and the label, and the term hidden for sight but read
 * (the legacy's sr-only, its own rule here). 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: 40rem (sm). Compiled by build/blocks-css.mjs.
 */

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

/*
 * The Rooster One template's palette, defined here for this recipe (the legacy's light and dark pairs): nothing
 * reads an undefined custom property. `:where()`: a block's tone (its own sheet) re-maps the brand over it.
 */
:where(.rooster-fact-list) {
	--wp--custom--rooster-one--line: light-dark(#d5dbe3, rgb(255 255 255 / 12%));
	--wp--custom--rooster-one--surface: light-dark(#ffffff, rgb(255 255 255 / 4%));
	--wp--custom--rooster-one--ink: light-dark(#212222, #eff0f0);
	--wp--custom--rooster-one--ink-2: light-dark(#3d454e, #d1d6db);
	--wp--custom--rooster-one--hairline: light-dark(#d5dbe3, rgb(117 137 163 / 16%));
	--wp--custom--rooster-one--red-ink: light-dark(#d90b0e, #f9888a);
	--wp--custom--rooster-one--green-figure: light-dark(#61a00a, #d7faa7);
	--wp--custom--rooster-one--blue: light-dark(#1e63ce, #8eb4ee);
	--wp--custom--rooster-one--amber-figure: light-dark(#a87200, #fae0a7);
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
}

.rooster-fact-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	box-sizing: border-box;
	padding: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	overflow-wrap: normal;
	word-break: normal;
	margin-block-end: 0;
}

.rooster-fact-list__item {
	box-sizing: border-box;
	margin: 0;
	padding-left: 0.75rem;
	border-left: 2px solid var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
}

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

.rooster-fact-list .rooster-fact-list__value {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-fact-list .rooster-fact-list__label {
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	line-height: 1.375;
	color: var(--wp--preset--color--muted, light-dark(#45556c, #90a1b9));
}

@media (min-width: 40rem) {
	.rooster-fact-list--count-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.rooster-fact-list--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rooster-fact-list--count-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * The counters and the tally (order 2: the legacy Rooster One landing's `.r1-counters` and `.r1-tally`): cells on the
 * card surface joined by 1 px hairlines, the values 800 tight in their tones, the labels 10.5 / 10 px upper-case in
 * the muted grey; the legacy's breakpoints of the window (1000 and 720 px). The template's own palette as custom
 * tokens (`--wp--custom--rooster-one--*`) with the legacy's light and dark values as fallbacks.
 */
.rooster-fact-list.rooster-fact-list--counters,
.rooster-fact-list.rooster-fact-list--tally {
	--rooster-fact-list-line: var(--wp--custom--rooster-one--line);
	--rooster-fact-list-surface: var(--wp--custom--rooster-one--surface);
	--rooster-fact-list-tone: var(--wp--custom--rooster-one--ink);
	gap: 0;
	margin: 0;
	border: 1px solid var(--rooster-fact-list-line);
	overflow: hidden;
	color: var(--wp--custom--rooster-one--ink-2);
}

.rooster-fact-list.rooster-fact-list--counters {
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	border-radius: 14px;
	background: var(--wp--custom--rooster-one--hairline);
}

.rooster-fact-list.rooster-fact-list--tally {
	display: flex;
	border-radius: 12px;
}

.rooster-fact-list--counters .rooster-fact-list__item,
.rooster-fact-list--tally .rooster-fact-list__item {
	padding: 20px 16px;
	border: 0;
	background: var(--rooster-fact-list-surface);
}

.rooster-fact-list--tally .rooster-fact-list__item {
	flex: 1;
	padding: 14px 16px;
	border-right: 1px solid var(--rooster-fact-list-line);
}

.rooster-fact-list--tally .rooster-fact-list__item:last-child {
	border-right: 0;
}

.rooster-fact-list--counters .rooster-fact-list__item.is-tone-danger,
.rooster-fact-list--tally .rooster-fact-list__item.is-tone-danger {
	--rooster-fact-list-tone: var(--wp--custom--rooster-one--red-ink);
}

.rooster-fact-list--counters .rooster-fact-list__item.is-tone-success,
.rooster-fact-list--tally .rooster-fact-list__item.is-tone-success {
	--rooster-fact-list-tone: var(--wp--custom--rooster-one--green-figure);
}

.rooster-fact-list--counters .rooster-fact-list__item.is-tone-one,
.rooster-fact-list--tally .rooster-fact-list__item.is-tone-one {
	--rooster-fact-list-tone: var(--wp--custom--rooster-one--blue);
}

.rooster-fact-list--counters .rooster-fact-list__item.is-tone-warning,
.rooster-fact-list--tally .rooster-fact-list__item.is-tone-warning {
	--rooster-fact-list-tone: var(--wp--custom--rooster-one--amber-figure);
}

.rooster-fact-list--counters .rooster-fact-list__value,
.rooster-fact-list--tally .rooster-fact-list__value {
	margin: 0 0 6px;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--rooster-fact-list-tone);
}

.rooster-fact-list--tally .rooster-fact-list__value {
	margin: 0 0 5px;
	font-size: 28px;
}

.rooster-fact-list--counters .rooster-fact-list__label,
.rooster-fact-list--tally .rooster-fact-list__label {
	margin: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--custom--rooster-one--mute);
}

.rooster-fact-list--tally .rooster-fact-list__label {
	font-size: 10px;
}

@media (max-width: 1000px) {
	.rooster-fact-list.rooster-fact-list--counters {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 720px) {
	.rooster-fact-list.rooster-fact-list--counters {
		grid-template-columns: repeat(2, 1fr);
	}

	.rooster-fact-list.rooster-fact-list--tally {
		flex-wrap: wrap;
	}

	.rooster-fact-list--tally .rooster-fact-list__item {
		flex: 1 1 50%;
	}
}

/*
 * A family's tone on an item (the block library's tones, BRIEF-2026-11-01-BLOCK-LIBRARY.md): the item carries the
 * theme's is-style-accent-<slug>, so the accent presets inside it are the family's; its rule and its tag take them.
 */

.rooster-fact-list--counters .rooster-fact-list__item[class*="is-style-accent-"],
.rooster-fact-list--tally .rooster-fact-list__item[class*="is-style-accent-"] {
	--rooster-fact-list-tone: var(--wp--preset--color--accent-text, light-dark(#1e63ce, #8eb4ee));
}

/* A semantic tone on a list's figure: its rule in the palette's colour (a family's is its accent class). */
.rooster-fact-list[class*="rooster-fact-list--count-"] .rooster-fact-list__item.is-tone-success {
	--wp--preset--color--accent: var(--wp--preset--color--success, light-dark(#15803d, #4ade80));
}

.rooster-fact-list[class*="rooster-fact-list--count-"] .rooster-fact-list__item.is-tone-warning {
	--wp--preset--color--accent: var(--wp--preset--color--warning, light-dark(#b45309, #fbbf24));
}

.rooster-fact-list[class*="rooster-fact-list--count-"] .rooster-fact-list__item.is-tone-danger {
	--wp--preset--color--accent: var(--wp--preset--color--danger, light-dark(#b91c1c, #f87171));
}

.rooster-fact-list[class*="rooster-fact-list--count-"] .rooster-fact-list__item.is-tone-neutral {
	--wp--preset--color--accent: var(--wp--preset--color--muted, light-dark(#525252, #a3a3a3));
}

/*
 * A figure's caption (`Value | Label | tone | caption`): a small line over the value, upper-case and muted (the legacy
 * Rooster Zero page's "Target" over each budget: 12 px, 600, wider tracking); 10 px in the counters and the tally,
 * as their labels.
 */
.rooster-fact-list .rooster-fact-list__caption {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, light-dark(#45556c, #90a1b9));
}

.rooster-fact-list--counters .rooster-fact-list__caption,
.rooster-fact-list--tally .rooster-fact-list__caption {
	margin: 0 0 6px;
	font-size: 10px;
	letter-spacing: 0.07em;
	line-height: 1.4;
	color: var(--wp--custom--rooster-one--mute);
}

/*
 * The bars (the legacy LANSA page's hidden relations, `.lx-bars`): a bordered panel of rows on the card surface, 14 px
 * corners, 8 px over and 22 px aside; each row 11 px over and under, divided by a soft line: the value 20 px 800 in the
 * tone's ink at the left (74 px, right-aligned), the label 13.5 px with its 6 px track under it, the fill the tone's
 * accent as wide as the line's share (`--rooster-bar`, the one inline style), the aside 11.5 px muted at the right
 * (92 px); below 720 px of the window (the legacy's) the value 58 px and the aside under the label.
 */
.rooster-fact-list.rooster-fact-list--bars {
	--rooster-fact-list-soft: color-mix(in srgb, var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%))) 70%, transparent);
	display: block;
	margin: 0;
	padding: 8px 22px;
	border: 1px solid var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%)));
	border-radius: 14px;
	background: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
}

.rooster-fact-list--bars .rooster-fact-list__item {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) 92px;
	grid-template-areas: "value what aside";
	gap: 14px;
	align-items: center;
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--rooster-fact-list-soft);
}

.rooster-fact-list--bars .rooster-fact-list__item:last-child {
	border-bottom: 0;
}

.rooster-fact-list--bars .rooster-fact-list__what {
	grid-area: what;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-fact-list.rooster-fact-list--bars .rooster-fact-list__value {
	grid-area: value;
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.5;
	text-align: right;
	color: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
}

.rooster-fact-list--bars .rooster-fact-list__aside {
	grid-area: aside;
	margin: 0;
	font-size: 11.5px;
	line-height: 1.5;
	text-align: right;
	color: var(--wp--preset--color--muted, light-dark(#45556c, #90a1b9));
}

.rooster-fact-list--bars .rooster-fact-list__bar {
	display: block;
	height: 6px;
	margin-top: 6px;
	border-radius: 3px;
	background: var(--rooster-fact-list-soft);
	overflow: hidden;
}

.rooster-fact-list--bars .rooster-fact-list__bar::before {
	content: "";
	display: block;
	width: var(--rooster-bar, 0%);
	height: 100%;
	border-radius: 3px;
	background: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
}

@media (max-width: 720px) {
	.rooster-fact-list--bars .rooster-fact-list__item {
		grid-template-columns: 58px minmax(0, 1fr);
		grid-template-areas: "value what" ". aside";
	}

	.rooster-fact-list--bars .rooster-fact-list__aside {
		text-align: left;
	}
}