/*
 * rooster/action-panel (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 callout and
 * closing call to action, complete on its own: the panel (1.5rem corners, slate-950 on a light page and slate-900 with
 * a white hairline on a dark one: the contrast colour and the darkest neutral), the glow (the family colour blurred
 * 64 px, 20 % on the band and 25 % centred), the content on the theme's dark palette (its Dark section class), the
 * eyebrow, the heading (30 px, 36 px from 40rem), the text, the ticked list, and the buttons (filled in the family's
 * colour, or outlined in white at 25 %), each with Lucide's arrow or external-link mark (masks of this sheet). 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-action-panel) {
	--wp--custom--rooster-one--wash-from: light-dark(#eaf3fe, rgb(48 131 232 / 16%));
	--wp--custom--rooster-one--wash-to: light-dark(#f2f6fb, rgb(80 134 201 / 16%));
	--wp--custom--rooster-one--panel: #212222;
	--wp--custom--rooster-one--ink-2: light-dark(#3d454e, #d1d6db);
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
	--wp--custom--rooster-one--ink: light-dark(#212222, #eff0f0);
	--wp--custom--rooster-one--ink-on-night: light-dark(#ffffff, #eff0f0);
	--wp--custom--rooster-one--brand: #1e63ce;
	--wp--custom--rooster-one--brand-deep: #164ea6;
	--wp--custom--rooster-one--blue: light-dark(#1e63ce, #8eb4ee);
}

.rooster-action-panel {
	--rooster-action-panel-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-action-panel-arrow: 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='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--rooster-action-panel-external: 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='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	padding: 2.5rem 1.5rem;
	border-radius: 1.5rem;
	background: light-dark(var(--wp--preset--color--contrast, #020618), var(--wp--preset--color--neutral-50, #0f172b));
	box-shadow: 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 10%));
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: normal;
	word-break: normal;
}

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

.rooster-action-panel__glow {
	position: absolute;
	width: 32rem;
	max-width: 100%;
	height: 16rem;
	right: -6rem;
	bottom: -6rem;
	border-radius: 999px;
	color-scheme: dark;
	background: color-mix(in srgb, var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1)) 20%, transparent);
	filter: blur(64px);
	pointer-events: none;
}

.rooster-action-panel .rooster-action-panel__body {
	position: relative;
	max-width: 48rem;
	color-scheme: dark;
	background: none;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
}

.rooster-action-panel :is(p, h2, h3, h4, ul, li) {
	margin: 0;
	padding: 0;
}

.rooster-action-panel .rooster-action-panel__eyebrow {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
}

.rooster-action-panel .rooster-action-panel__heading {
	margin-top: 0.75rem;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-action-panel .rooster-action-panel__text {
	margin-top: 1rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
}

.rooster-action-panel .rooster-action-panel__list {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.5rem;
	list-style: none;
	color: color-mix(in srgb, var(--wp--preset--color--fg, #f1f5f9) 60%, var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2)));
}

.rooster-action-panel__list li {
	display: flex;
	gap: 0.5rem;
}

.rooster-action-panel__tick {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	background-color: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	-webkit-mask: var(--rooster-action-panel-tick) center / contain no-repeat;
	mask: var(--rooster-action-panel-tick) center / contain no-repeat;
}

.rooster-action-panel__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 2rem;
}

.rooster-action-panel .rooster-action-panel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border-radius: 0.5rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 150ms, background-color 150ms, border-color 150ms;
}

.rooster-action-panel .rooster-action-panel__button.is-primary {
	background: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	color: var(--wp--preset--color--bg, light-dark(#ffffff, #020618));
}

.rooster-action-panel .rooster-action-panel__button.is-primary:hover {
	background: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-action-panel .rooster-action-panel__button.is-secondary {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, light-dark(#020618, #ffffff)) 25%, transparent);
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-action-panel .rooster-action-panel__button.is-secondary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, light-dark(#020618, #ffffff)) 10%, transparent);
}

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

.rooster-action-panel__arrow,
.rooster-action-panel__external {
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--rooster-action-panel-arrow) center / contain no-repeat;
	mask: var(--rooster-action-panel-arrow) center / contain no-repeat;
}

.rooster-action-panel__external {
	-webkit-mask-image: var(--rooster-action-panel-external);
	mask-image: var(--rooster-action-panel-external);
}

/*
 * A button's own icon (its line's fourth cell, the page agents' gaps package G): the theme's Lucide mask before the
 * words, in their colour, the button's gap from them (0.5rem; 8 px on the wash's link, laid out as a row only when it
 * has an icon, so a link without one keeps its box).
 */
.rooster-action-panel .rooster-action-panel__icon {
	flex: none;
}

.rooster-action-panel .rooster-action-panel__link.has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.rooster-action-panel .rooster-action-panel__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;
}

/* ---------- center: the page's closing call ---------- */

.rooster-action-panel--center {
	padding: 3rem 1.5rem;
	text-align: center;
}

.rooster-action-panel--center .rooster-action-panel__glow {
	right: auto;
	left: 50%;
	width: 36rem;
	transform: translateX(-50%);
	background: color-mix(in srgb, var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1)) 25%, transparent);
}

.rooster-action-panel--center .rooster-action-panel__body {
	max-width: none;
}

.rooster-action-panel--center .rooster-action-panel__heading {
	margin-top: 0;
}

.rooster-action-panel--center .rooster-action-panel__text {
	max-width: 42rem;
	margin-inline: auto;
}

.rooster-action-panel--center .rooster-action-panel__actions {
	justify-content: center;
}

@media (min-width: 40rem) {
	.rooster-action-panel {
		padding: 3.5rem 3rem;
	}

	.rooster-action-panel--center {
		padding: 4rem 3rem;
	}

	.rooster-action-panel .rooster-action-panel__heading {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.rooster-action-panel .rooster-action-panel__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rooster-action-panel__actions {
		flex-direction: row;
	}
}

/*
 * The Rooster One landing's panels (order 2: themes/om-portal-theme/templates/landing-rooster-one.php, `.r1-credits` and
 * `.r1-final`): 16 px corners, no glow, the page's own scheme inside. `wash`: the brand blue's soft wash (its darkened
 * twin in the dark scheme), 36 px over and 32 px aside, the eyebrow 11 px tracked 0.16em, the heading 24 to 34 px at
 * 800 10 px over the paragraphs (16 px on a 1.6 leading, their bold in the ink), the one button 15 px semibold on the
 * brand blue, 12 px over and 22 px aside. `ink`: the template's ink in both schemes (a hairline ring in the dark), 44 px
 * over and 32 px aside, centred: the heading in white (the legacy's darkened white in the dark scheme), the text 620 px
 * at most, the buttons rooster/cta-row's, the small print 22 px under them with its bold in white. The template's own
 * palette as custom tokens (`--wp--custom--rooster-one--*`) with the legacy's light and dark values as fallbacks.
 */
.rooster-action-panel.rooster-action-panel--wash,
.rooster-action-panel.rooster-action-panel--ink {
	overflow: visible;
	border-radius: 16px;
	box-shadow: none;
}

.rooster-action-panel.rooster-action-panel--wash {
	padding: 36px 32px;
	background: linear-gradient(135deg, var(--wp--custom--rooster-one--wash-from) 0%, var(--wp--custom--rooster-one--wash-to) 100%);
}

.rooster-action-panel.rooster-action-panel--ink {
	padding: 44px 32px;
	background: var(--wp--custom--rooster-one--panel);
	box-shadow: inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 22%));
	text-align: center;
}

.rooster-action-panel:is(.rooster-action-panel--wash, .rooster-action-panel--ink) .rooster-action-panel__body {
	max-width: none;
	color-scheme: inherit;
	color: var(--wp--custom--rooster-one--ink-2);
}

.rooster-action-panel--ink .rooster-action-panel__body {
	color: #ffffff;
}

.rooster-action-panel:is(.rooster-action-panel--wash, .rooster-action-panel--ink) .rooster-action-panel__kicker {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--wp--custom--rooster-one--mute);
}

.rooster-action-panel:is(.rooster-action-panel--wash, .rooster-action-panel--ink) .rooster-action-panel__title {
	margin: 0 0 10px;
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.08;
	text-wrap: wrap;
	color: var(--wp--custom--rooster-one--ink);
}

.rooster-action-panel.rooster-action-panel--ink .rooster-action-panel__title {
	margin-bottom: 12px;
	color: var(--wp--custom--rooster-one--ink-on-night);
}

.rooster-action-panel:is(.rooster-action-panel--wash, .rooster-action-panel--ink) .rooster-action-panel__para {
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.6;
}

.rooster-action-panel--wash .rooster-action-panel__para strong {
	font-weight: 600;
	color: var(--wp--custom--rooster-one--ink);
}

.rooster-action-panel.rooster-action-panel--ink :is(.rooster-action-panel__para, .rooster-action-panel__fine) {
	max-width: 620px;
	margin: 0 auto 24px;
	color: #b6bfc9;
}

.rooster-action-panel.rooster-action-panel--ink .rooster-action-panel__fine {
	margin-top: 22px;
	font-size: 12.5px;
	line-height: 1.6;
}

.rooster-action-panel--ink .rooster-action-panel__fine strong {
	font-weight: 600;
	color: #ffffff;
}

/* A link in the ink's words (the spec's `[text](url)`): their own colour, underlined, as the page's ink would not read. */
.rooster-action-panel--ink :is(.rooster-action-panel__para, .rooster-action-panel__fine) a {
	color: inherit;
}

/* Its focus in the words' own colour: the theme's ring is drawn for the page's ground, not this one. */
.rooster-action-panel--ink :is(.rooster-action-panel__para, .rooster-action-panel__fine) a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	box-shadow: none;
}

.rooster-action-panel .rooster-action-panel__line {
	margin: 0;
}

.rooster-action-panel .rooster-action-panel__link {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 10px;
	background: var(--wp--custom--rooster-one--brand);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
}

.rooster-action-panel .rooster-action-panel__link:hover {
	background: var(--wp--custom--rooster-one--brand-deep);
}

.rooster-action-panel .rooster-action-panel__link:focus-visible {
	outline: 2px solid var(--wp--custom--rooster-one--brand);
	outline-offset: 2px;
}

/*
 * The panel's icon (the page agents' gaps, package C): a Lucide icon 20 px in a 2.75rem chip with 0.75rem corners before
 * the eyebrow or the heading, 1rem over it, on every layout, centred where the panel is. On the dark panels (band,
 * center) the family colour at 20 % with the icon in its text shade (the dark palette's value); on the wash the brand at
 * 14 % with the icon in its blue; on the ink the brand at 30 % with the icon lifted to OKLCH 0.8. A tone re-maps the
 * brand (the block's own sheet), so the chip is the tone's. The words and icons drawn as text take the accent's text
 * shade (`accent-text`), never the accent itself (the page agents' gaps, package G: Zero's #c2560c reads 4.12:1 on
 * subtle); the accent stays the fills (the chip's tint, the glow, the ticks), rules and borders.
 */
.rooster-action-panel .rooster-action-panel__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 1rem;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1)) 20%, transparent);
	color: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
}

.rooster-action-panel:is(.rooster-action-panel--center, .rooster-action-panel--ink) .rooster-action-panel__chip {
	margin-inline: auto;
}

.rooster-action-panel .rooster-action-panel__glyph {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
}

.rooster-action-panel.rooster-action-panel--wash .rooster-action-panel__chip {
	background: color-mix(in srgb, var(--wp--custom--rooster-one--brand) 14%, transparent);
	color: var(--wp--custom--rooster-one--blue);
}

.rooster-action-panel.rooster-action-panel--ink .rooster-action-panel__chip {
	background: color-mix(in srgb, var(--wp--custom--rooster-one--brand) 30%, transparent);
	color: oklch(from var(--wp--custom--rooster-one--brand) 0.8 c h);
}

/*
 * A toned wash (the page agents' gaps, package C: the credits page's violet panel, its amber notice): the tone's own
 * wash (its accent at 10 % to 5 % over the surface; 16 % to 10 % in the dark scheme), a 1 px rule in the tone at 30 %
 * (an inset ring: the geometry is the untoned wash's), the eyebrow in the tone's ink (no lighter than OKLCH 0.45, no
 * darker than 0.78 in the dark: the library's readable ink), the button on the tone with the text on it (the theme's
 * on-accent for a family; white or black from the fill's lightness for a semantic tone). An untoned wash keeps the
 * brand's (get-rooster-one, approved).
 */
.rooster-action-panel--wash:is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--wp--preset--color--on-accent: oklch(from var(--wp--preset--color--accent) clamp(0, (0.62 - l) * 1000, 1) 0 0);
}

.rooster-action-panel.rooster-action-panel--wash[class*="is-tone-"] {
	background: linear-gradient(135deg, light-dark(color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent)) 0%, light-dark(color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent), color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent)) 100%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

.rooster-action-panel.rooster-action-panel--wash[class*="is-tone-"] .rooster-action-panel__kicker {
	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));
}

.rooster-action-panel.rooster-action-panel--wash[class*="is-tone-"] .rooster-action-panel__link {
	color: var(--wp--preset--color--on-accent, #ffffff);
}