/**
 * Opens and closes the FAQ answers rather than snapping them.
 *
 * The stylesheet next to this one is a pre-built artefact with no build step in
 * the repository, so anything not already compiled into it has to live here.
 *
 * Native <details> hides its content outright when closed, which is why a
 * height cannot simply be transitioned: there is nothing to transition from.
 * ::details-content is the part the browser reveals, and interpolate-size is
 * what lets a height animate to and from auto — without it, the only way to
 * animate this is to measure the content in JavaScript and fight the element's
 * own behaviour on every toggle.
 *
 * Browsers without either simply open the answer at once, which is what they
 * do today. Nothing is lost where the animation is not understood.
 */

@media (prefers-reduced-motion: no-preference) {
	:root {
		interpolate-size: allow-keywords;
	}

	details::details-content {
		block-size: 0;
		overflow: hidden;
		/* content-visibility has to be told to switch at the end rather than
		   at the start, or the answer vanishes before it has finished
		   closing. */
		transition:
			block-size 260ms ease,
			content-visibility 260ms allow-discrete;
	}

	details[open]::details-content {
		block-size: auto;
	}
}