/*
 * Criteria List. A centred heading over a numbered list.
 */

.cobell-criteria__header {
	max-width: 64rem;
	margin-inline: auto;
	text-align: center;
}

/*
 * The homepage register's eyebrow is block-level, and this is worth 10px of
 * dead space above it.
 *
 * `.cobell-eyebrow` is `inline-flex`, so it sits on a line box and takes the
 * container's 1.6 leading as half-leading above the 15px label. That is right
 * for SummerPriorityCriteria, which the reference writes `inline-flex` by hand
 * — and wrong for EligibilityEditorial, which routes through `SectionHeader`
 * and gets `flex items-center justify-center` on its centred branch.
 *
 * Same split, and the same override, as the steps block's display register.
 * Nothing about the eyebrow itself looks different, which is why it reads as a
 * padding bug in a header that declares the right padding.
 */
.cobell-criteria:not( .cobell-criteria--ledger ) .cobell-criteria__header .cobell-eyebrow {
	display: flex;
	justify-content: center;
}

/*
 * The largest headline on the homepage — 84px against the 48px the shared
 * heading token was giving every section. Leading is looser than the theme's
 * 0.92 because this one is centred and breaks to two lines.
 *
 * The base is EligibilityEditorial's own ramp, `clamp(2.5rem, 6vw, 5.25rem)`,
 * and `--ledger` carries SummerPriorityCriteria's below. It used to be the
 * other way round — the ledger's ramp sat on the base and the homepage had no
 * override at all, so the page's largest headline ran a whole register small at
 * every width: 28 against live's 40 at 390, 41 against 61 at 1024, and 48
 * against 84 at 1440, while the comment above it named the 84 it was not
 * drawing. The note beside the `--ledger` block said size "already agreed",
 * which was true of summer and was checked on summer only.
 */
.cobell-criteria__heading {
	margin: 0;
	font-size: clamp( 2.5rem, 6vw, 5.25rem );
	line-height: 0.95;
	letter-spacing: var( --wp--custom--heading-tracking );
	text-wrap: balance;
}

/*
 * Serif italic, not the sans body face. This is the reference's editorial
 * subhead register and it is what sets the criteria sections apart from the
 * plain intro copy elsewhere on the site.
 */
.cobell-criteria__intro {
	max-width: 36rem;
	margin: 1.5rem auto 0;
	color: var( --cobell-body-color );
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --cobell-body-size );
	font-style: italic;
	line-height: 1.625;
}


.cobell-criteria__list {
	margin: 5rem auto 0;
	padding: 0;
	max-width: 64rem;
	/* The ordinal comes from the list itself; the visible numeral is the
	   decorative span inside each item, so the marker is suppressed. */
	list-style: none;
}

.cobell-criteria__item {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: var( --wp--preset--spacing--40 );
	align-items: start;
}

/*
 * Upright, not italic. The reference sets the numerals in roman and the
 * subhead in italic; both were the wrong way round here, which is why the list
 * read as handwritten and the subhead as plain.
 *
 * Terracotta holds at this size: 30px is large text under WCAG, where the
 * threshold is 3:1, and terracotta on cream is 3.15:1.
 */
/*
 * Two registers, and the reference treats their figures differently — which is
 * the part that reads as a different typeface rather than a different size.
 *
 * Default is SummerPriorityCriteria's ledger marker: a large italic terracotta
 * figure on its own leading, tabular so a stack of them aligns. The ramp is
 * live's own — sampled at 1920/1700/1440/1280/1024/900/768/500, where K holds
 * at 0.026 to five places wherever it is fluid, with a 1.75rem floor below
 * ~1077 and a 2.5rem cap above ~1538.
 *
 * This register was previously a 12px clay marker on 0.229em of tracking, which
 * was the homepage's small-label treatment rather than anything live does here.
 * Terracotta on cream is 3.15:1; at 28px and up that is large text under 1.4.3
 * and clears its 3:1 threshold, where clay at 70% failed 12px's 4.5:1 at 2.83:1.
 */
.cobell-criteria__numeral {
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.75rem, 2.6vw, 2.5rem );
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	color: var( --wp--preset--color--terracotta );
	font-variant-numeric: tabular-nums;
}

/*
 * The homepage checklist is the other register: a large upright terracotta
 * numeral that pairs with the box beside it. Figures are the font's own
 * proportional set, not tabular — Warbler Display draws those noticeably
 * narrower and differently shaped, and forcing tabular here was what made "01"
 * render 42px wide against live's 27px.
 */
.cobell-criteria--interactive .cobell-criteria__numeral {
	font-size: 1.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	color: var( --wp--preset--color--terracotta );
	font-variant-numeric: normal;
}

.cobell-criteria__text {
	font-size: 0.875rem;
	line-height: 1.625;
}

@media ( min-width: 48rem ) {
	.cobell-criteria__text {
		font-size: 1rem;
	}
}

/* Interactive checklist ---------------------------------------------------- */

/*
 * The self-assessment variant. The whole row is the control, so the target is
 * the full width of the tile rather than a 32px box — the reference does the
 * same and it matters most on touch.
 */
/*
 * Two axes, matching the reference. Narrow: marker beside the copy. From 48rem
 * the column is narrow enough that the marker sits above instead.
 *
 * The numeral and the box are one unit either way — they read as a single
 * marker rather than two stacked ornaments, which is what a four-child grid
 * was producing.
 */
.cobell-criteria__control {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--40 );
	width: 100%;
	cursor: pointer;
}

.cobell-criteria__marker {
	display: flex;
	flex: none;
	align-items: center;
	gap: 1rem;
}

.cobell-criteria__control .cobell-criteria__text {
	flex: 1;
	padding-top: 0.25rem;
}

@media ( min-width: 48rem ) {
	.cobell-criteria__control {
		flex-direction: column;
	}

	.cobell-criteria__control .cobell-criteria__text {
		flex: none;
		padding-top: 0;
	}
}

/*
 * The input carries the state, the focus and the keyboard behaviour; the box
 * beside it is what gets painted. Taken out of the flow rather than hidden with
 * display:none or visibility:hidden, either of which would make it
 * unfocusable.
 */
.cobell-criteria__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* The ring has to be drawn on the box, since the control it belongs to is a
   single clipped pixel. */
.cobell-criteria__input:focus-visible ~ .cobell-criteria__marker .cobell-criteria__box {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 4px;
}

/*
 * The box. Springy on the way in — the reference's own easing curve, which
 * overshoots slightly before settling and is what makes a tick feel like a
 * tick rather than a state change.
 */
.cobell-criteria__box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	/* The theme sets no global border-box, so without this the 2px border is
	   added to the 2rem and the box renders 36px against the reference's 32. */
	box-sizing: border-box;
	width: 2rem;
	height: 2rem;
	border: 2px solid color-mix( in srgb, var( --wp--preset--color--forest ) 30%, transparent );
	border-radius: 0.375rem;
	background-color: var( --wp--preset--color--cream );
	color: transparent;
	transition:
		transform 300ms cubic-bezier( 0.34, 1.56, 0.64, 1 ),
		background-color 300ms ease,
		border-color 300ms ease,
		color 300ms ease;
}

.cobell-criteria__tick {
	width: 1rem;
	height: 1rem;
	transform: scale( 0.5 );
	opacity: 0;
	transition:
		transform 300ms cubic-bezier( 0.34, 1.56, 0.64, 1 ),
		opacity 200ms ease;
}

.cobell-criteria__control:hover .cobell-criteria__marker .cobell-criteria__box {
	transform: scale( 1.05 ) rotate( -2deg );
	border-color: color-mix( in srgb, var( --wp--preset--color--terracotta ) 70%, transparent );
}

/*
 * Checked. Cream on terracotta is 3.15:1, which the tick clears as a graphical
 * object under WCAG 1.4.11 — it is a 2px glyph, not text, and the state itself
 * is announced by the native input rather than carried by the colour.
 */
.cobell-criteria__input:checked ~ .cobell-criteria__marker .cobell-criteria__box {
	transform: scale( 1.1 ) rotate( -3deg );
	border-color: var( --wp--preset--color--terracotta );
	background-color: var( --wp--preset--color--terracotta );
	color: var( --wp--preset--color--cream );
}

.cobell-criteria__input:checked ~ .cobell-criteria__marker .cobell-criteria__box .cobell-criteria__tick {
	transform: scale( 1 );
	opacity: 1;
}

/* A ticked row recedes so the unticked ones are what the eye is left with. */
.cobell-criteria__input:checked ~ .cobell-criteria__marker .cobell-criteria__numeral {
	color: color-mix( in srgb, var( --wp--preset--color--terracotta ) 55%, transparent );
}

.cobell-criteria__input:checked ~ .cobell-criteria__text {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
}

.cobell-criteria__numeral,
.cobell-criteria__text {
	transition: color 300ms ease;
}

/*
 * The interactive rows carry the clipped input plus the marker and the copy, so
 * the item grid steps aside and the control does the placing itself. The input
 * is absolutely positioned and takes no space.
 */
.cobell-criteria--interactive .cobell-criteria__item {
	display: block;
}

@media ( min-width: 48rem ) {
	.cobell-criteria--interactive.cobell-criteria--columns .cobell-criteria__control {
		gap: var( --wp--preset--spacing--30 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-criteria__box,
	.cobell-criteria__tick,
	.cobell-criteria__numeral,
	.cobell-criteria__text {
		transition: none;
	}

	.cobell-criteria__control:hover .cobell-criteria__marker .cobell-criteria__box,
	.cobell-criteria__input:checked ~ .cobell-criteria__marker .cobell-criteria__box {
		transform: none;
	}
}

/*
 * Ledger. Hairline above every row and one below the last, so the stack reads
 * as a connected list. Flows into two columns where there is room; the flow is
 * column-major, so reading down a column keeps the stated order.
 */
/*
 * SummerPriorityCriteria's header is a register apart from
 * EligibilityEditorial's, on four properties that move together: the heading is
 * 400 on a 1.0 leading against the homepage's bold on 0.95, it runs a whole
 * register smaller, and the intro is the sans body face upright rather than the
 * serif italic subhead. Tracking already agreed. Verified against live at
 * 1440/1024/768/390.
 *
 * The size is here rather than on the base because this is the exception: the
 * homepage instance is the one the base describes. Read the other way round it
 * looks like agreement, because summer measures correct either way — which is
 * how the homepage went unmeasured.
 *
 * Scoped to the layout rather than added as a field: the block serves exactly
 * two reference components and the layout already tells them apart.
 */
.cobell-criteria--ledger .cobell-criteria__heading {
	font-size: clamp( 1.75rem, 4vw, 3rem );
	font-weight: 400;
	line-height: 1;
}

.cobell-criteria--ledger .cobell-criteria__intro {
	font-family: var( --wp--preset--font-family--sans );
	font-style: normal;
}

/*
 * The wrapper's own 1.5rem owns the space above and below. `.cobell-prose` does
 * not reset the UA's 1em paragraph margin, so a single-paragraph intro was
 * adding 18px on each side and pushing the list 18px below live's 80px.
 *
 * Scoped to the ledger rather than fixed on `.cobell-criteria__intro`: the same
 * doubling is live on the homepage checklist, but live's copy there differs from
 * ours so there is nothing to measure the corrected gap against. Worth a pixel
 * diff of the homepage as its own change.
 */
.cobell-criteria--ledger .cobell-criteria__intro > :first-child {
	margin-top: 0;
}

.cobell-criteria--ledger .cobell-criteria__intro > :last-child {
	margin-bottom: 0;
}

.cobell-criteria--ledger .cobell-criteria__list {
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}

/*
 * Row rhythm is live's literal `gap-6 py-8 md:gap-7 md:py-9`, not a spacing
 * preset — `--wp--preset--spacing--40` is 1rem, which left the row 41px short of
 * live's 126 once the numeral grew to its real size.
 */
.cobell-criteria--ledger .cobell-criteria__item {
	gap: 1.5rem;
	padding-block: 2rem;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	break-inside: avoid;
}

/* Live breaks to two columns at its own `md`, 768px, not 896. */
@media ( min-width: 48rem ) {
	.cobell-criteria--ledger .cobell-criteria__item {
		gap: 1.75rem;
		padding-block: 2.25rem;
	}

	.cobell-criteria--ledger .cobell-criteria__list {
		columns: 2;
		column-gap: 3rem;
	}
}

/*
 * Columns. Open tiles with no rules. Sized by content rather than a fixed
 * three, so a set of two or four still fills the row evenly.
 */
.cobell-criteria--columns .cobell-criteria__list {
	display: grid;
	gap: 2.5rem;
	padding-top: 3rem;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}

@media ( min-width: 48rem ) {
	/*
	 * Live's `md:grid-cols-3` — three tracks from md, not a content-sized count.
	 *
	 * `auto-fit` with a 15rem floor cannot reach three until about 1000px, so
	 * between 768 and there the checklist stood two-up against live's three and
	 * the section ran 47px tall. It agreed at 1440, which is where it was
	 * checked. A fixed three behaves the same as live for any number of items —
	 * four wrap to 3+1 on both, two leave a track empty on both — so nothing is
	 * lost by stating it, and the register has one instance in any case.
	 */
	.cobell-criteria--columns .cobell-criteria__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 2rem;
	}

	.cobell-criteria--columns .cobell-criteria__item {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--30 );
	}
}

.cobell-criteria__footnote {
	max-width: 44rem;
	margin: var( --wp--preset--spacing--50 ) auto 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.6;
	text-align: center;
}

/*
 * Two classes. `.cobell-buttons` in the theme stylesheet declares its own
 * margin-top at the same one-class weight, and that file loads after every
 * block stylesheet — so this rule tied and lost, and live's `mt-16` was being
 * drawn as the shared token's 1.5rem. Fourth block to hit this; steps and
 * spotlight were two of the others, and the tell is always that the value in
 * the block reads correct.
 */
.cobell-criteria .cobell-criteria__buttons {
	margin-top: 4rem;
	justify-content: center;
}

.cobell-section--dark .cobell-criteria__intro,
.cobell-section--dark .cobell-criteria__footnote {
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 88%, transparent );
}

.cobell-section--dark .cobell-criteria__numeral {
	color: var( --wp--preset--color--flame );
}

.cobell-section--dark .cobell-criteria--ledger .cobell-criteria__list,
.cobell-section--dark .cobell-criteria--ledger .cobell-criteria__item,
.cobell-section--dark .cobell-criteria--columns .cobell-criteria__list {
	border-color: color-mix( in srgb, var( --wp--preset--color--cream ) 20%, transparent );
}