/*
 * FAQ. Native <details>/<summary>, so the browser owns expand/collapse,
 * keyboard operation, and the ARIA state — there is no JavaScript here and
 * none is needed.
 */

/*
 * Spacing here is in explicit rem, not --wp--preset--spacing--*. Those tokens
 * do not carry theme.json's declared values — WordPress's default spacingScale
 * is generating the presets and its slugs collide with spacingSizes', so
 * spacing--40 arrives as 1rem where theme.json says 1.5rem. Every value below
 * is measured off live, so it has to be the value it says it is.
 */
/*
 * Live runs this section at 96 stepping to 128 where the shell is 112/128. Two
 * classes because the shell's padding comes from a stylesheet core loads after
 * every block stylesheet, so a single-class rule ties and loses.
 */
.cobell-section.cobell-faq {
	padding-block: 6rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-faq {
		padding-block: 8rem;
	}
}

/*
 * The compact register runs a deeper run-out — 128 against 96, stepping to 160
 * against 128 — because it is the closing section of a walkthrough page rather
 * than one section among several. Three classes: `.cobell-section.cobell-faq`
 * above already carries two, so a two-class rule here would only tie with it.
 */
.cobell-section.cobell-faq.cobell-faq--heading-compact {
	padding-block: 6rem 8rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-faq.cobell-faq--heading-compact {
		padding-block: 8rem 10rem;
	}
}

/*
 * The header sits on a narrower measure than the rows beneath it — 42rem inside
 * the section's 48 — so the intro breaks before the questions do. Without the
 * cap the heading and intro ran the full width of the list and the whole block
 * read a size larger than live's.
 */
.cobell-faq__header {
	margin-inline: auto;
	margin-bottom: 3.5rem;
	max-width: 42rem;
	text-align: center;
}

/*
 * Live has three FAQ components at two registers: 3rem on a 1.0 leading over a
 * 42rem measure across /scholarships, its six detail pages, /support and its five
 * audience pages, and 2.75rem on a 1.05 leading over 48rem on /how-to-apply
 * alone. Thirteen placements take the first, so it is the default; the second is
 * `heading_scale: compact`.
 *
 * The three properties are one register rather than three settings. /how-to-apply
 * carries the longest heading on the site — "FAQ: Tips and common questions about
 * applying" — and live winds the size back and lets the measure out together so
 * it lands on two lines. Either half on its own gives three.
 */
.cobell-faq__heading {
	margin: 0;
	font-size: clamp( 1.75rem, 4vw, 3rem );
	line-height: 1;
}

.cobell-faq--heading-compact .cobell-faq__header {
	max-width: 48rem;
}

.cobell-faq--heading-compact .cobell-faq__heading {
	font-size: clamp( 1.75rem, 3.4vw, 2.75rem );
	line-height: 1.05;
}

/*
 * Each register carries its own run-out under the header, and all three are on a
 * different element on live: the plus register's is `mt-14` on the list, the plain
 * chevron's `mb-12 md:mb-16` on the header, and this one's `mt-16 md:mt-20` on the
 * <ol>. So the base's flat 56px is the plus register's alone, and the numbered
 * rows were sitting 24px under a header live sets 80 clear of.
 */
.cobell-faq--numbered .cobell-faq__header {
	margin-bottom: 4rem;
}

/* And this is the one eyebrow on the site that steps. `.cobell-eyebrow`'s flat
   2rem is `mb-8`, which is what both other FAQ components write; ApplyingFAQ
   alone writes `mb-8 md:mb-10`, so everything under it stood 8px early and the
   section closed 8px short of live's. */
@media ( min-width: 48rem ) {
	.cobell-faq--numbered .cobell-faq__header {
		margin-bottom: 5rem;
	}

	.cobell-faq--numbered .cobell-eyebrow {
		margin-bottom: 2.5rem;
	}
}

/* `leading-relaxed`, declared. All three components write it; the root's 1.6 is
   close enough that it read as correct and is 0.45px a line short of live's. */
.cobell-faq__intro {
	max-width: 36rem;
	margin-top: 1.5rem;
	margin-inline: auto;
	color: var( --cobell-body-color );
	font-size: var( --cobell-body-size );
	line-height: 1.625;
}

/* The compact register's subhead is `max-w-2xl` against the plus register's
   `max-w-xl`, and a shade quieter — 70% where the other two run 75%. */
.cobell-faq--numbered .cobell-faq__intro {
	max-width: 42rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
}

/* The wysiwyg paragraph's UA margins. The top collapses into the 1.5rem above;
   the bottom has nothing to collapse against and adds 16px live does not have,
   since both reference components put mt-6 on the subhead and nothing beneath. */
.cobell-faq__intro > p:first-child {
	margin-top: 0;
}

.cobell-faq__intro > p:last-child {
	margin-bottom: 0;
}

.cobell-faq__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}

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

/* The numbered register's rules are a shade lighter than the other two's — 12%
   against 15%, which is a hair on one rule and reads across five of them. */
.cobell-faq--numbered .cobell-faq__list,
.cobell-faq--numbered .cobell-faq__item {
	border-color: color-mix( in srgb, var( --wp--preset--color--forest ) 12%, transparent );
}

.cobell-faq__summary {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 1.5rem;
	padding-block: 1.5rem;
	cursor: pointer;
	list-style: none;
}

@media ( min-width: 48rem ) {
	.cobell-faq__summary {
		gap: 2.5rem;
		padding-block: 1.75rem;
	}
}

/* Hide the platform disclosure triangles; the block draws its own indicator. */
.cobell-faq__summary::-webkit-details-marker {
	display: none;
}

.cobell-faq__summary::marker {
	content: "";
}

/*
 * The numbered register — /how-to-apply's ApplyingFAQ, the only one of live's
 * three accordions that ordinals its rows. The ordinal is not the only thing
 * that changes with it: live writes this row centred rather than top-aligned,
 * holds its gap and band flat where the plus register steps them at md, sets the
 * question on a fluid ramp rather than a step, and hands the chevron to forest
 * instead of the accent. Six properties, one class — which is what makes it a
 * register rather than a decoration, and why they all hang off `--numbered`
 * rather than a second field.
 *
 * `align-items: center` is the load-bearing one. The ordinal previously faked
 * vertical centring with `line-height: 1.9` against the plus register's
 * `align-items: start`, which lands correctly on a one-line question and drifts
 * on a two-line one.
 */
.cobell-faq--numbered .cobell-faq__summary {
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	padding-block: 1.5rem;
}

@media ( min-width: 48rem ) {
	.cobell-faq--numbered .cobell-faq__summary {
		gap: 1.5rem;
		padding-block: 1.5rem;
	}
}

/*
 * No tracking on this one. The other two registers write `tracking-[-0.01em]` on
 * their question and ApplyingFAQ writes none, so the base's -0.01em was riding
 * here as well — 0.22px a glyph, which is a whole word over the longest question
 * on the page and nothing at all on the shortest.
 */
.cobell-faq--numbered .cobell-faq__question {
	font-size: clamp( 1.125rem, 1.6vw, 1.375rem );
	line-height: 1.375;
	letter-spacing: normal;

	/* Warbler Display's axes, which live sets on this question and on no other —
	   the same pair `steps` already writes on its row title. */
	font-variation-settings: "SOFT" 50, "opsz" 72;
}

@media ( min-width: 48rem ) {
	.cobell-faq--numbered .cobell-faq__question {
		font-size: clamp( 1.125rem, 1.6vw, 1.375rem );
	}
}

/*
 * The chevron is quiet here, where the plus register's is the accent colour:
 * live gives this one forest at 55%, which composites to rgb(129,133,117) on
 * cream and measures 3.05:1 — clearing 1.4.11's 3:1 for non-text UI, so this is
 * not another entry on the contrast-exceptions list.
 *
 * Live's is a 24px svg drawing `M6 9 l6 6 l6 -6` — a 12-wide, 6-tall v centred in
 * its box. The box is what has to be 24px: it is the grid's last column, so it
 * decides where the mark's right edge lands. Inheriting the plus register's 14px
 * box put the mark 6px right of live's while the mark itself was the right size,
 * which is why this reads as correct until the two are overlaid.
 *
 * The mark is then sized in absolute pixels rather than a percentage of the box.
 * A corner-border chevron of side s draws a v that is s√2 wide and s√2/2 tall,
 * with its tips level with the square's own centre and its apex that far below —
 * so 12 wide means s = 8.49, and the square's centre has to sit 3px above the box
 * centre for the v to land centred. Percentages of a 24px box cannot express
 * that; they scaled the mark to 20px wide.
 */
.cobell-faq--numbered .cobell-faq__indicator {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
}

@media ( min-width: 48rem ) {
	.cobell-faq--numbered .cobell-faq__indicator {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* This and the open rule under it are the no-mask fallback only — the @supports
   block near the foot of this file replaces both with live's own path, which is
   what every browser that can mask actually draws. They are kept because the
   alternative fallback is a filled 24px square.

   Three classes, and that is the whole of why this works. The shared
   `.cobell-faq--chevron .cobell-faq__indicator::before` further down this file
   ties with two and wins on source order, so the percentages it sets survived and
   scaled the mark to 20px inside the new 24px box — a rule sitting right here
   that read as if it were setting the size. */
.cobell-faq.cobell-faq--numbered .cobell-faq__indicator::before {
	top: 4.76px;
	left: 7.76px;
	width: 8.49px;
	height: 8.49px;
}

/*
 * Open, fallback only — see above. Live rotates its whole svg 180° about the box
 * centre, so the v mirrors and stays put; rotating a square about its own centre
 * moves the v 6px up instead, because the apex and the tips swap ends. The
 * translate puts it back, and it is in the transform rather than in `top` so it
 * interpolates with the rotation instead of jumping. Left of the rotate, so it
 * applies in the row's axes and not in the rotated element's.
 */
.cobell-faq.cobell-faq--numbered .cobell-faq__details[open] .cobell-faq__indicator::before {
	transform: translateY( 6px ) rotate( 225deg );
}

/*
 * The ordinal. Terracotta, which is live's, and the same 10px small-caps
 * register as every eyebrow on the site.
 *
 * This one does not join the 1.4.3 exceptions list, and the reason is worth
 * stating: the span is aria-hidden inside an <ol>, so the ordinality it shows is
 * already carried by the list itself and the glyphs are decoration in the sense
 * 1.4.3 exempts. Ember is the substitute if that reading is ever rejected.
 */
.cobell-faq__index {
	min-width: 2.5rem;
	color: var( --wp--preset--color--terracotta );
	font-size: var( --wp--custom--eyebrow-size );
	font-weight: 600;

	/* 1.5, not the root's 1.6. Live's span sets no leading and inherits Tailwind's
	   1.5, so at 10px ours ran a pixel taller and put the digits half a pixel low
	   — the one thing left in this section that a pixel diff could see. */
	line-height: 1.5;
	letter-spacing: var( --wp--custom--eyebrow-tracking );
	font-variant-numeric: tabular-nums;
}

/* Live steps this at its own md breakpoint rather than scaling it fluidly —
   18px, then 20px from 48rem up — so the step is reproduced, not smoothed. */
.cobell-faq__question {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

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

/*
 * The support register. Live's three accordions do not agree on the row, and
 * the indicator field already tells them apart: the plus rows are the
 * /scholarships family, a numbered chevron is /how-to-apply, and a plain
 * chevron is /support and its audience pages. So the second register hangs off
 * the class that is already there rather than off a new field — and the eight
 * pages on the plus rows keep the values measured for them.
 *
 * Where it differs: the question is fluid rather than stepped and lands 22px at
 * 1440 against the plus rows' 20, the row breathes 32px top and bottom against
 * 28, the gap to the indicator holds at 24px instead of opening to 40, and the
 * indicator stays 14px instead of growing.
 */
/*
 * The heading shares its floor and ceiling with the plus register and differs
 * only in slope — 3.8vw against 4vw — so the two agree at 1440 and at 375 and
 * part company by about 2px everywhere between. Invisible at the widths a
 * heading is usually checked at, which is why the shared 4vw read as correct.
 */
.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__heading {
	font-size: clamp( 1.75rem, 3.8vw, 3rem );

	/*
	 * And this register alone balances. The `html` rule sets `pretty`, which only
	 * forbids a widow, so a two-line heading breaks where the measure runs out;
	 * live writes `text-balance` on FAQAccordion's h2 and on neither of the other
	 * two components, so it is the register's, not the block's.
	 */
	text-wrap: balance;
}

/*
 * And the header it sits in takes the block's full 48rem, where the plus
 * register sits its header on 42 inside the same 48. Same heading, one line
 * later — /support/institutions' runs to two lines here and one on live, which
 * reads as a type-size fault rather than a measure one because the size is
 * right. The subhead follows the measure out and drops to the blurb register
 * (15/16px on 1.7) instead of the 18px body over 36rem, and the run-out under
 * the header steps 48 → 64 against the plus register's flat 56.
 */
.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__header {
	max-width: none;
	margin-bottom: 3rem;
}

.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__intro {
	max-width: none;
	font-size: var( --wp--preset--font-size--blurb );
	line-height: 1.7;
}

@media ( min-width: 48rem ) {
	.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__header {
		margin-bottom: 4rem;
	}

	.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__intro {
		font-size: var( --wp--preset--font-size--medium );
	}
}

.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__question {
	font-size: clamp( 1.125rem, 1.8vw, 1.375rem );
	line-height: 1.2;
}

/*
 * This register aligns its row on the baseline, where the plus rows align on the
 * top edge and the numbered rows on the centre — three components, three models,
 * and it is the caret's vertical position that they decide.
 *
 * Worth stating why this is the alignment and not a length. The base sets the
 * caret `margin-top: 0.55em` against live's `mt-[0.35em]`, and at 1440 the two
 * land on the same pixel — 0.55em of a fixed 16px happens to equal live's 0.35em
 * plus the distance baseline alignment adds. That is a coincidence of one
 * viewport: live's offset moves with the question's fluid size and a fixed
 * margin does not, so at 390 the caret sat 3.2px low. Reproducing the model
 * rather than one of its outputs is what makes it hold at every width.
 *
 * The span is empty — its mark is an absolutely positioned ::before — so it has
 * no baseline of its own and the grid synthesises one from the bottom of its
 * border box. That is what live's <svg> does as a replaced element, so the two
 * agree by construction.
 */
.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__summary {
	align-items: baseline;
}

.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__indicator {
	margin-top: 0.35em;
}

@media ( min-width: 48rem ) {
	.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__summary {
		gap: 1.5rem;
		padding-block: 2rem;
	}

	.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__indicator {
		width: 0.875rem;
		height: 0.875rem;
	}
}

/*
 * The answer takes the whole column here. Live's panel is `pb-8 pr-10 md:pb-10`
 * with no cap at all, against the plus register's `pb-7 pr-12 md:pb-8 md:pr-16`
 * and its `max-w-prose` — so the base's 65ch and its 64px run-out were both
 * borrowed from the wrong component and cost this register 130px of measure.
 *
 * The symptom is not a narrow answer, because nothing draws the box: two of the
 * six pages wrapped a fifth line where live wraps four, which reads as an answer
 * set a size too large. Compare the panel's height, not its width.
 */
.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__answer {
	max-width: none;
	padding-bottom: 2rem;
	padding-right: 2.5rem;
}

@media ( min-width: 48rem ) {
	.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__answer {
		padding-bottom: 2.5rem;
		padding-right: 2.5rem;
	}
}

.cobell-faq__summary:hover .cobell-faq__question {
	color: var( --wp--preset--color--forest-deep );
}

/*
 * Indicator. Drawn in CSS rather than shipped as an SVG per row, so the open
 * state is a transform on a pseudo-element and needs no markup change.
 *
 * Colour is per register and all three are live's, verified against the
 * deployed markup rather than the reference repo: the plus rows are terracotta
 * (`text-[#d45d00]`), the plain chevron is full-strength forest
 * (`text-[#26352a]`), and the numbered chevron is forest at 55%, set further up.
 * All three were riding one ember default here — the same substitution reversed
 * for the eyebrows and the criteria marker, left behind on this block.
 *
 * Non-text UI that conveys state, so WCAG 1.4.11 wants 3:1. Terracotta on cream
 * measures 3.15:1 and forest 10.63:1, so live's own values clear it and none of
 * this joins the contrast-exceptions list.
 *
 * The approach is not here, deliberately. Each of the three registers sets its
 * own — 0.5/0.625rem, 0.35em against a baseline-aligned row, and 0 against a
 * centred one — because live puts the caret in a different place in each, and a
 * shared default is what let one register's coincidence read as the rule. The
 * 0.55em that used to sit here served none of the three.
 */
.cobell-faq__indicator {
	position: relative;
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.875rem;
}

/*
 * The plus register's approach is a length live steps at md — `mt-2 md:mt-2.5`,
 * 8px then 10px — where the base fakes it with 0.55em against a 16px inherited
 * size and lands 8.8px at both. The 1.2px matters more than it reads: the row is
 * `align-items: start`, so its height is the taller of the question's 25px line
 * box and the indicator's margin plus its 16px box, and at 8.8 the indicator
 * loses. Every row on the four /scholarships pages stood 1px short, which is 17px
 * of section on /scholarships and 8 on each detail page.
 */
.cobell-faq--plus .cobell-faq__indicator {
	color: var( --wp--preset--color--terracotta );
	margin-top: 0.5rem;
}

@media ( min-width: 48rem ) {
	.cobell-faq--plus .cobell-faq__indicator {
		margin-top: 0.625rem;
	}
}

.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__indicator {
	color: var( --wp--preset--color--forest );
}

@media ( min-width: 48rem ) {
	.cobell-faq__indicator {
		width: 1rem;
		height: 1rem;
	}
}

/* Plus that loses its vertical stroke when open. */
.cobell-faq--plus .cobell-faq__indicator::before,
.cobell-faq--plus .cobell-faq__indicator::after {
	content: "";
	position: absolute;
	background-color: currentColor;
}

.cobell-faq--plus .cobell-faq__indicator::before {
	inset-inline: 0;
	top: 50%;
	height: 1px;
	transform: translateY( -50% );
}

.cobell-faq--plus .cobell-faq__indicator::after {
	inset-block: 0;
	left: 50%;
	width: 1px;
	transform: translateX( -50% );
	transition: transform 300ms ease-out;
}

.cobell-faq--plus .cobell-faq__details[open] .cobell-faq__indicator::after {
	transform: translateX( -50% ) scaleY( 0 );
}

/* Chevron that rotates when open. */
.cobell-faq--chevron .cobell-faq__indicator::before {
	content: "";
	position: absolute;
	top: 15%;
	left: 20%;
	width: 60%;
	height: 60%;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	transform-origin: center;
	transition: transform 250ms ease;
}

.cobell-faq--chevron .cobell-faq__details[open] .cobell-faq__indicator::before {
	transform: rotate( 225deg );
}

/*
 * The plain chevron is live's own path, masked, rather than a rotated corner.
 *
 * The corner square above drew this register's v 12.83px wide against live's 10
 * and sat it 2.5px low, so the caret read as a size too big. A square can be
 * sized and placed to fix that — and it still cannot draw this mark, for two
 * reasons that only show once the box agrees:
 *
 *   - **Chrome snaps a border to whole device pixels.** The 1.5px above is used
 *     as 1px against live's flat 1.3125px stroke, so the mark carried a quarter
 *     less ink than live's at the same bounding box — 499 pixels against 673.
 *     The snapping also moves the painted square off its declared box: 7.11px
 *     declared paints as 8×7, so where the rotated ink lands can only be fitted,
 *     and nothing says a fit at one device pixel ratio holds at another.
 *   - **A border gives butt ends and a mitred corner** where live has round caps
 *     and a round join.
 *
 * So the mark is live's `M3 6 l5 5 l5 -5` in its 16-unit viewBox, scaled to the
 * 14px box by `mask-size` — the same 0.875 live scales it by — and painted with
 * `currentColor` through the mask so the per-register colour above still
 * cascades. Geometry, stroke and caps are then live's by construction, and the
 * open state is live's plain 180° about the box centre with nothing to correct.
 *
 * The whole thing sits behind `@supports` because the fallback is not a missing
 * mark, it is a **filled 14px square** — `background-color` with no mask to cut
 * it. Failing back to the corner square above costs the size defect this rule
 * fixes and nothing else.
 *
 * The numbered register keeps the corner square: its v *is* centred in its box,
 * so the rotation has nothing to cancel and it was fitted and verified against
 * live already.
 */
@supports ( mask-image: none ) or ( -webkit-mask-image: none ) {
	.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__indicator::before {
		inset: 0;
		width: auto;
		height: auto;
		border: 0;
		background-color: currentColor;
		transform: none;
		-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
		mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	.cobell-faq--chevron:not( .cobell-faq--numbered ) .cobell-faq__details[open] .cobell-faq__indicator::before {
		transform: rotate( 180deg );
	}

	/*
	 * And the numbered register's caret is live's own path too, for the same two
	 * reasons the plain one is: a border gives butt ends and a mitred corner where
	 * live's `stroke-linecap: round` gives round ones, and Chrome snaps the 1.5px
	 * border to a whole device pixel, so the mark carried a third less ink than
	 * live's at the same bounding box.
	 *
	 * Live's is `M6 9l6 6 6-6` in a 24-unit viewBox — a 12-wide, 6-tall v, which is
	 * a different mark from the plain register's `M3 6l5 5 5-5` in 16 units and not
	 * the same file scaled: 10/16 wide against 12/24, on 1.5 of 16 against 1.5 of
	 * 24. Two masks, not one.
	 *
	 * `stroke-linejoin` is left at its initial `miter`, which is live's — the
	 * reference sets only the cap on this one, where it sets both on the other.
	 *
	 * The corner square above stays as the no-mask fallback. It was fitted against
	 * live and is right to about a pixel; what it cannot do is the caps.
	 */
	.cobell-faq.cobell-faq--numbered .cobell-faq__indicator::before {
		inset: 0;
		top: 0;
		left: 0;
		width: auto;
		height: auto;
		border: 0;
		background-color: currentColor;
		transform: none;
		-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" );
		mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" );
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	/* Live's plain 180° about the box centre. The v is centred in its own box now,
	   so there is no 6px to translate back — see the rule this replaces. */
	.cobell-faq.cobell-faq--numbered .cobell-faq__details[open] .cobell-faq__indicator::before {
		transform: rotate( 180deg );
	}
}

/*
 * The answer sits a register below the question — sans, 15px stepping to 16px,
 * on a 1.7 leading and forest at 80%. The measure is capped so a long answer
 * does not run the full 48rem of the column; live caps it at max-w-prose, which
 * lands at about 65 characters.
 */
.cobell-faq__answer {
	max-width: 65ch;
	padding-bottom: 1.75rem;
	padding-right: 3rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 80%, transparent );
	font-size: 0.9375rem;
	line-height: 1.7;
}

@media ( min-width: 48rem ) {
	.cobell-faq__answer {
		padding-bottom: 2rem;
		padding-right: 4rem;
		font-size: 1rem;
	}
}

/*
 * The answer's paragraph margins. `.cobell-faq__answer` has padding-bottom, so the
 * paragraph's user-agent 1em bottom margin cannot collapse through it and lands
 * inside the padding — 16px on top of the 28 live sets. The theme has no
 * paragraph reset; live's Tailwind preflight does.
 */
.cobell-faq__answer .cobell-prose > p:first-child {
	margin-top: 0;
}

.cobell-faq__answer .cobell-prose > p:last-child {
	margin-bottom: 0;
}

/*
 * The answer indents past the ordinal column so it lines up under the question
 * rather than under the number — live writes it as
 * `pl-[calc(2.5rem+1.5rem)]`, the ordinal's min-width plus the row's gap.
 *
 * A literal 1.5rem, not `--wp--preset--spacing--40`, which resolves to 1rem here
 * and not the 1.5 theme.json's array reads as. That token indented this 8px short
 * of the question for as long as both existed.
 *
 * The rest of the register: live sets the body a shade lighter than the plus
 * register's and on a fluid ramp, and caps it at max-w-2xl rather than a
 * character measure.
 */
.cobell-faq--numbered .cobell-faq__answer {
	max-width: 42rem;
	padding-left: calc( 2.5rem + 1.5rem );

	/* `pb-6 md:pb-8`. The base's 1.75rem is the plus register's `pb-7`, and it
	   only ever showed below 48rem — the two registers agree at md. */
	padding-bottom: 1.5rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-size: clamp( 0.95rem, 1.05vw, 1.05rem );
	line-height: 1.625;
}

@media ( min-width: 48rem ) {
	.cobell-faq--numbered .cobell-faq__answer {
		/* Restated, not inherited: the rule above is two classes and the base's md
		   step is one, so without this the mobile 1.5rem would win at every width. */
		padding-bottom: 2rem;
		font-size: clamp( 0.95rem, 1.05vw, 1.05rem );
	}
}

/*
 * Open/close. ::details-content is the spec hook for the wrapper the browser
 * paints around a <details> body, and interpolate-size is what allows a
 * transition to and from height:auto. Where either is unsupported the row still
 * opens — it just snaps, which is the same result reduced-motion users get by
 * design.
 *
 * Live has three behaviours here and this block had one, applied to all of them.
 * The three are not variations on a theme; each reference component reaches its
 * disclosure a different way, and the register already names which:
 *
 *   support/FAQAccordion      the same ::details-content route, 350ms on the
 *                             height and 250ms on a fade. Reproduced exactly.
 *   scholarships/FaqAccordion nothing at all — a plain <details> that snaps.
 *   how-to-apply/ApplyingFAQ  a Web Animations height tween, 280ms on
 *                             cubic-bezier(0.2, 0.8, 0.2, 1) and no fade.
 *
 * So the animation is scoped to `--chevron`, which is exactly the two registers
 * that have one, and the numbered register restates the duration, the curve and
 * the absence of the fade. The plus register is left with no rules to inherit,
 * which is what makes /scholarships snap the way live's does.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.cobell-faq--chevron .cobell-faq__details {
		interpolate-size: allow-keywords;
	}

	.cobell-faq--chevron .cobell-faq__details::details-content {
		block-size: 0;
		opacity: 0;
		overflow: clip;
		transition:
			block-size 350ms ease,
			opacity 250ms ease,
			content-visibility 350ms allow-discrete;
	}

	.cobell-faq--chevron .cobell-faq__details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}

	@starting-style {
		.cobell-faq--chevron .cobell-faq__details[open]::details-content {
			block-size: 0;
			opacity: 0;
		}
	}

	/*
	 * The numbered register. Height only — the reference's animator tweens
	 * `height` and touches nothing else, so the fade above has to be switched off
	 * on both sides of the transition rather than merely dropped from the list.
	 * These tie with the rules above on specificity and win on source order.
	 */
	.cobell-faq--numbered .cobell-faq__details::details-content {
		opacity: 1;
		transition:
			block-size 280ms cubic-bezier( 0.2, 0.8, 0.2, 1 ),
			content-visibility 280ms allow-discrete;
	}

	@starting-style {
		.cobell-faq--numbered .cobell-faq__details[open]::details-content {
			block-size: 0;
			opacity: 1;
		}
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-faq__indicator::before,
	.cobell-faq__indicator::after {
		transition: none;
	}
}