/*
 * rooster/plan-card (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 plan card,
 * complete on its own: the card (1rem corners, the line colour, the card surface, 1.5rem inside, a column whose foot
 * holds the button), the badge on the top edge, the name, the price line, the note, the ticked features (Lucide's
 * check, a mask of this sheet), the full-width button (filled for the plan to pick: the contrast colour on a light
 * page, the family's on a dark one; else outlined), and the plan to pick's ring and shadow in the family's colour.
 * 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";

/*
 * 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-plan-card) {
	--wp--custom--rooster-one--ink: light-dark(#212222, #eff0f0);
	--wp--custom--rooster-one--ink-2: light-dark(#3d454e, #d1d6db);
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
	--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--blue: light-dark(#1e63ce, #8eb4ee);
	--wp--custom--rooster-one--brand: #1e63ce;
	--wp--custom--rooster-one--green: #61a00a;
	--wp--custom--rooster-one--red: #d90b0e;
	--wp--custom--rooster-one--amber: #feac03;
	--wp--custom--rooster-one--green-wash: light-dark(#edf5e9, rgb(126 183 97 / 16%));
	/* The green and amber inks a little darker than the legacy's (#3a7f18, #9e6c04): 4.5:1 and more on their washes. */
	--wp--custom--rooster-one--green-ink: light-dark(#357a11, #c6f0b2);
	--wp--custom--rooster-one--red-wash: light-dark(#fdeded, rgb(232 48 48 / 16%));
	--wp--custom--rooster-one--red-ink: light-dark(#d90b0e, #f9888a);
	--wp--custom--rooster-one--amber-wash: light-dark(#fef6e4, rgb(232 176 48 / 16%));
	--wp--custom--rooster-one--amber-ink: light-dark(#966500, #fae0a8);
	--wp--custom--rooster-one--blue-wash: light-dark(#eaf3fe, rgb(48 131 232 / 16%));
	--wp--custom--rooster-one--volume-line: light-dark(#dbe6f5, rgb(55 116 200 / 45%));
	--wp--custom--rooster-one--volume: light-dark(#f7fafd, rgb(71 140 209 / 16%));
	--wp--custom--rooster-one--volume-ink: light-dark(#14407f, #b0cbf3);
	--wp--custom--rooster-one--line-soft: light-dark(#e8ecf0, rgb(255 255 255 / 12%));
	--wp--custom--rooster-one--dot: light-dark(#d5dbe3, rgb(117 137 163 / 16%));
	--wp--custom--rooster-one--brand-deep: #164ea6;
}

.rooster-plan-card {
	--rooster-plan-card-fam: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	--rooster-plan-card-strong: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
	--rooster-plan-card-text: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	--rooster-plan-card-muted: var(--wp--preset--color--muted, light-dark(#45556c, #90a1b9));
	--rooster-plan-card-page: var(--wp--preset--color--bg, light-dark(#ffffff, #020618));
	--rooster-plan-card-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;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%)));
	border-radius: 1rem;
	background: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
	font-size: 1rem;
	line-height: 1.5;
	color: var(--rooster-plan-card-text);
	overflow-wrap: normal;
	word-break: normal;
}

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

.rooster-plan-card.is-highlighted {
	border-color: var(--rooster-plan-card-fam);
	box-shadow: 0 0 0 1px var(--rooster-plan-card-fam), 0 20px 25px -5px rgb(15 23 43 / 5%), 0 8px 10px -6px rgb(15 23 43 / 5%);
}

.rooster-plan-card__badge {
	position: absolute;
	top: -0.75rem;
	left: 1.5rem;
	padding: 0.125rem 0.75rem;
	border-radius: 999px;
	background: light-dark(var(--rooster-plan-card-strong), var(--rooster-plan-card-fam));
	color: var(--rooster-plan-card-page);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
}

.rooster-plan-card .rooster-plan-card__name {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: normal;
	text-wrap: wrap;
	color: var(--rooster-plan-card-strong);
}

/* The plan's line under its name (the page agents' gaps, package C: the Panel and credits landings' tier tags). */
.rooster-plan-card .rooster-plan-card__intro {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--rooster-plan-card-muted);
}

.rooster-plan-card .rooster-plan-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0.75rem 0 0;
}

.rooster-plan-card__amount {
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--rooster-plan-card-strong);
}

.rooster-plan-card__period {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--rooster-plan-card-muted);
}

.rooster-plan-card .rooster-plan-card__note {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--rooster-plan-card-muted);
}

.rooster-plan-card__features {
	display: grid;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.625;
}

/* A group's heading over the features that follow it (`## Name`: the Panel landing's feature groups), 1.25rem over it. */
.rooster-plan-card .rooster-plan-card__group {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	letter-spacing: normal;
	text-wrap: wrap;
	color: var(--rooster-plan-card-strong);
}

.rooster-plan-card .rooster-plan-card__group + .rooster-plan-card__features {
	margin-top: 0.5rem;
}

.rooster-plan-card__features li {
	display: flex;
	gap: 0.5rem;
	margin: 0;
}

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

.rooster-plan-card__foot {
	margin-top: auto;
	padding-top: 1.5rem;
}

.rooster-plan-card .rooster-plan-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--rooster-plan-card-strong) 15%, transparent);
	border-radius: 0.5rem;
	background: light-dark(var(--wp--preset--color--bg, #ffffff), transparent);
	color: var(--rooster-plan-card-strong);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 150ms, background-color 150ms, border-color 150ms;
}

.rooster-plan-card .rooster-plan-card__cta:hover {
	border-color: color-mix(in srgb, var(--rooster-plan-card-strong) 30%, transparent);
	background: color-mix(in srgb, var(--rooster-plan-card-strong) 5%, transparent);
}

.rooster-plan-card .rooster-plan-card__cta:focus-visible {
	outline: 2px solid var(--rooster-plan-card-fam);
	outline-offset: 2px;
}

.rooster-plan-card.is-highlighted .rooster-plan-card__cta {
	border: 0;
	background: light-dark(var(--rooster-plan-card-strong), var(--rooster-plan-card-fam));
	color: var(--rooster-plan-card-page);
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
}

.rooster-plan-card.is-highlighted .rooster-plan-card__cta:hover {
	background: light-dark(color-mix(in srgb, var(--rooster-plan-card-strong) 85%, var(--rooster-plan-card-page)), var(--rooster-plan-card-strong));
}

/*
 * The tier (order 2: the legacy Rooster One landing's `.r1-tier`): 14 px corners, 24 px inside, a column; the tone's
 * 4 px top rule in the light scheme (a 1 px border and a 3 px inset band, so the geometry is the same in both schemes;
 * the dark scheme shows the line colour all round, as the legacy's darkened twin drew it); the name as a tag stretched
 * across the card, the tagline 17 px, the price 52 px at 800 beside its 15 px period on one baseline, the note 13 px
 * muted with its bold in the brand blue, the volume table in its tinted box (12.5 px, the head muted and right-aligned
 * but the first column, a discount 80 % in green, the fine print 11.5 px), the dotted features 13.5 px with their
 * hairlines, the button 15 px semibold at the full width 20 px under them. The template's own palette as custom tokens
 * (`--wp--custom--rooster-one--*`) with the legacy's light and dark values as fallbacks.
 */
.rooster-plan-card.rooster-plan-card--tier {
	--rooster-plan-card-tier-ink: var(--wp--custom--rooster-one--ink);
	--rooster-plan-card-tier-text: var(--wp--custom--rooster-one--ink-2);
	--rooster-plan-card-tier-mute: var(--wp--custom--rooster-one--mute);
	--rooster-plan-card-tier-line: var(--wp--custom--rooster-one--line);
	--rooster-plan-card-tier-surface: var(--wp--custom--rooster-one--surface);
	--rooster-plan-card-tier-blue: var(--wp--custom--rooster-one--blue);
	--rooster-plan-card-tier-brand: var(--wp--custom--rooster-one--brand);
	--rooster-plan-card-tier-tone: var(--rooster-plan-card-tier-brand);
	padding: 24px;
	border: 1px solid var(--rooster-plan-card-tier-line);
	border-top-color: light-dark(var(--rooster-plan-card-tier-tone), var(--rooster-plan-card-tier-line));
	border-radius: 14px;
	background: var(--rooster-plan-card-tier-surface);
	box-shadow: inset 0 3px 0 0 light-dark(var(--rooster-plan-card-tier-tone), transparent);
	color: var(--rooster-plan-card-tier-text);
}

/*
 * The tier to pick (the page agents' gaps, package C): ringed in its tone all round in both schemes (the plan card's
 * ring and shadow), the top band kept; its badge on the top edge as the card's, filled with the tone and the text on
 * it (white or black from the fill's lightness; a family's on-accent).
 */
.rooster-plan-card.rooster-plan-card--tier.is-highlighted {
	border-color: var(--rooster-plan-card-tier-tone);
	box-shadow: inset 0 3px 0 0 light-dark(var(--rooster-plan-card-tier-tone), transparent), 0 0 0 1px var(--rooster-plan-card-tier-tone), 0 20px 25px -5px rgb(15 23 43 / 5%), 0 8px 10px -6px rgb(15 23 43 / 5%);
}

.rooster-plan-card--tier .rooster-plan-card__badge {
	left: 24px;
	background: var(--rooster-plan-card-tier-tone);
	color: oklch(from var(--rooster-plan-card-tier-tone) clamp(0, (0.62 - l) * 1000, 1) 0 0);
}

/* A group's heading in the dotted features: 13.5 px bold in the ink, 12 px over it. */
.rooster-plan-card.rooster-plan-card--tier .rooster-plan-card__group {
	margin: 12px 0 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--rooster-plan-card-tier-ink);
}

.rooster-plan-card--tier.is-tone-success {
	--rooster-plan-card-tier-tone: var(--wp--custom--rooster-one--green);
}

.rooster-plan-card--tier.is-tone-danger {
	--rooster-plan-card-tier-tone: var(--wp--custom--rooster-one--red);
}

.rooster-plan-card--tier.is-tone-warning {
	--rooster-plan-card-tier-tone: var(--wp--custom--rooster-one--amber);
}

/*
 * The tag: the tier's name, its one heading (package G: an h<level>, the page's own heading look undone: the body's face,
 * the card's ink unless its tone colours it, the words wrapping as the span's did).
 */
.rooster-plan-card--tier .rooster-plan-card__tag {
	display: block;
	margin: 0 0 12px;
	padding: 3px 8px;
	border-radius: 4px;
	font-family: inherit;
	font-size: 10.5px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	text-wrap: wrap;
	color: var(--rooster-plan-card-tier-text);
}

.rooster-plan-card--tier .rooster-plan-card__tag.is-tone-success {
	background: var(--wp--custom--rooster-one--green-wash);
	color: var(--wp--custom--rooster-one--green-ink);
}

.rooster-plan-card--tier .rooster-plan-card__tag.is-tone-danger {
	background: var(--wp--custom--rooster-one--red-wash);
	color: var(--wp--custom--rooster-one--red-ink);
}

.rooster-plan-card--tier .rooster-plan-card__tag.is-tone-warning {
	background: var(--wp--custom--rooster-one--amber-wash);
	color: var(--wp--custom--rooster-one--amber-ink);
}

.rooster-plan-card--tier .rooster-plan-card__tag.is-tone-one {
	background: var(--wp--custom--rooster-one--blue-wash);
	color: var(--rooster-plan-card-tier-blue);
}

/* The tagline: a line under the name since package G, in the heading face it had as the legacy's h3. */
.rooster-plan-card--tier .rooster-plan-card__tagline {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.5;
	text-wrap: wrap;
	color: var(--rooster-plan-card-tier-ink);
}

.rooster-plan-card--tier .rooster-plan-card__figure {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 6px 0 4px;
	line-height: 1;
}

.rooster-plan-card--tier .rooster-plan-card__sum {
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--rooster-plan-card-tier-ink);
}

.rooster-plan-card--tier .rooster-plan-card__per {
	font-size: 15px;
	color: var(--rooster-plan-card-tier-mute);
}

.rooster-plan-card--tier .rooster-plan-card__lead {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--rooster-plan-card-tier-mute);
}

.rooster-plan-card--tier .rooster-plan-card__lead.is-before-volume {
	margin-bottom: 6px;
}

.rooster-plan-card--tier .rooster-plan-card__lead.is-first {
	margin: 10px 0 16px;
}

.rooster-plan-card--tier .rooster-plan-card__lead strong {
	font-weight: 600;
	color: var(--rooster-plan-card-tier-blue);
}

.rooster-plan-card--tier .rooster-plan-card__volume {
	margin: 14px 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--wp--custom--rooster-one--volume-line);
	border-radius: 10px;
	background: var(--wp--custom--rooster-one--volume);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--custom--rooster-one--volume-ink);
}

.rooster-plan-card--tier .rooster-plan-card__caption {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--rooster-plan-card-tier-blue);
}

.rooster-plan-card--tier .rooster-plan-card__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 12.5px;
	line-height: 1.5;
}

.rooster-plan-card--tier .rooster-plan-card__table :is(th, td) {
	padding: 2px 0;
	border: 0;
	background: none;
	text-align: right;
	vertical-align: middle;
}

.rooster-plan-card--tier .rooster-plan-card__table th {
	padding: 0 0 4px;
	font-weight: 600;
	color: var(--rooster-plan-card-tier-mute);
}

.rooster-plan-card--tier .rooster-plan-card__table :is(th, td):first-child {
	text-align: left;
}

.rooster-plan-card--tier .rooster-plan-card__off {
	font-size: 0.8em;
	color: var(--wp--custom--rooster-one--green-ink);
}

.rooster-plan-card--tier .rooster-plan-card__fine {
	margin: 8px 0 0;
	font-size: 11.5px;
}

.rooster-plan-card--tier .rooster-plan-card__dots {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rooster-plan-card--tier .rooster-plan-card__dots li {
	position: relative;
	margin: 0;
	padding: 8px 0 8px 16px;
	border-bottom: 1px solid var(--wp--custom--rooster-one--line-soft);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--rooster-plan-card-tier-text);
}

/* The last item's hairline: none in the light scheme, kept in the dark (the legacy's darkened rule outranked its own
   :last-child rule); transparent rather than absent, so the geometry is the same in both schemes. */
.rooster-plan-card--tier .rooster-plan-card__dots li:last-child {
	border-bottom-color: light-dark(transparent, var(--wp--custom--rooster-one--line-soft));
}

.rooster-plan-card--tier .rooster-plan-card__dots li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--custom--rooster-one--dot);
}

.rooster-plan-card--tier .rooster-plan-card__dots strong {
	font-weight: 600;
	color: var(--rooster-plan-card-tier-ink);
}

.rooster-plan-card--tier .rooster-plan-card__button {
	display: block;
	width: 100%;
	margin: 20px 0 0;
	padding: 13px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
}

.rooster-plan-card--tier .rooster-plan-card__button.is-primary {
	background: var(--rooster-plan-card-tier-brand);
	color: #ffffff;
}

.rooster-plan-card--tier .rooster-plan-card__button.is-primary:hover {
	background: var(--wp--custom--rooster-one--brand-deep);
}

.rooster-plan-card--tier .rooster-plan-card__button.is-outline {
	border: 1px solid var(--rooster-plan-card-tier-line);
	background: var(--rooster-plan-card-tier-surface);
	color: var(--rooster-plan-card-tier-text);
}

.rooster-plan-card--tier .rooster-plan-card__button:focus-visible {
	outline: 2px solid var(--rooster-plan-card-tier-brand);
	outline-offset: 2px;
}

/* The words a screen reader hears after a button that opens a new tab (package E2), out of sight. */
.rooster-plan-card--tier .rooster-plan-card__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/*
 * 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,
 * the tag's words the family's text shade no lighter than OKLCH 0.45 in the light scheme (4.5:1 on the tint).
 */

.rooster-plan-card--tier[class*="is-style-accent-"] {
	--rooster-plan-card-tier-tone: var(--wp--preset--color--accent, #1e63ce);
}

.rooster-plan-card--tier[class*="is-style-accent-"] .rooster-plan-card__badge {
	color: var(--wp--preset--color--on-accent, #ffffff);
}

.rooster-plan-card--tier .rooster-plan-card__tag[class*="is-style-accent-"] {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 14%, transparent);
	color: light-dark(oklch(from var(--wp--preset--color--accent-text, #1e63ce) min(l, 0.45) c h), var(--wp--preset--color--accent-text, #8eb4ee));
}

/*
 * A family's tone on the tier (the page agents' gaps, package G): its button, its volume box and its note's bold follow
 * the tone as its tag and rule do (the Panel landing's teal Pro tier): the button on the family's accent with the text
 * on it (the theme's on-accent), darker or lighter under the pointer away from that text; the volume box the accent at
 * 4 % (16 % in the dark scheme) behind a hairline of it at 18 % (45 %), its words the accent's text shade deepened to
 * OKLCH 0.35 (lifted to 0.85 in the dark scheme), its caption and the note's bold the text shade no lighter than
 * OKLCH 0.5 in the light scheme. Rooster One's own tone, an untoned tier and the semantic tones (the Rooster One
 * template's green, red and amber tiers of get-rooster-one, approved) keep the brand blue.
 */
.rooster-plan-card--tier[class*="is-style-accent-"]:not(.is-tone-one) {
	--rooster-plan-card-tier-brand: var(--wp--preset--color--accent, #1e63ce);
	--rooster-plan-card-tier-blue: light-dark(oklch(from var(--wp--preset--color--accent-text, #1e63ce) min(l, 0.5) c h), var(--wp--preset--color--accent-text, #8eb4ee));
	--wp--custom--rooster-one--volume: light-dark(color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 4%, #ffffff), color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 16%, transparent));
	--wp--custom--rooster-one--volume-line: light-dark(color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 18%, #ffffff), color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 45%, transparent));
	--wp--custom--rooster-one--volume-ink: light-dark(oklch(from var(--wp--preset--color--accent-text, #1e63ce) min(l, 0.35) c h), oklch(from var(--wp--preset--color--accent-text, #8eb4ee) max(l, 0.85) c h));
}

.rooster-plan-card--tier[class*="is-style-accent-"]:not(.is-tone-one) .rooster-plan-card__button.is-primary {
	color: var(--wp--preset--color--on-accent, #ffffff);
}

.rooster-plan-card--tier[class*="is-style-accent-"]:not(.is-tone-one) .rooster-plan-card__button.is-primary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 82%, oklch(from var(--wp--preset--color--on-accent, #ffffff) calc(1 - l) 0 0));
}