/*
 * The calculator, drawn after the design of 2026-09-25: an answer panel (title,
 * ring, legend, facts, notes) and the inputs as numbered steps.
 *
 * Every colour, space, size and radius is an ACSS token, so the palette in the
 * pack's acss-roles.json (and later its dark twin) restyles all of it. The two
 * values of our own are named once, below.
 *
 * Phone: the answer first, then the steps. Wide: the answer on the left, in a
 * panel running the height of the calculator, staying in view.
 *
 * ⚠️ 48px touch targets: nine in ten visits to a calculator like this are on a phone.
 */

.ov-calc {
	--ov-touch: 48px;
	--ov-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);

	display: grid;
	/* ⚠️ minmax(0, ...): a plain 1fr grows to its widest content, and on a phone the page ran off the screen. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl, 3rem);
	position: relative;
	isolation: isolate;
}

/* ⚠️ Fields and results are display: grid, which beats the browser's own [hidden] rule. */
.ov-calc [hidden],
.ov-hub [hidden] {
	display: none !important;
}

/* The theme colours <output>; the figures here are ink. */
.ov-calc output {
	color: inherit;
}

/* Small caps labels, as in the drawing. */
.ov-calc__label {
	margin: 0;
	padding: 0;
	font-family: var(--ov-mono);
	font-size: var(--text-xs, 0.75rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dark-muted, #555);
}

/* ------------------------------------------------------------ the answer panel */

.ov-calc__answer {
	display: grid;
	gap: var(--space-m, 1.5rem);
	align-content: start;
	padding-block: var(--space-l, 2rem);
}

.ov-calc__title {
	margin: 0;
	font-size: var(--h2, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.ov-calc__sentence {
	margin: 0;
	color: var(--text-dark-muted, #555);
}

/* Under the title the sentence reads as its subtitle: the panel's gap pulled in to a small one. */
.ov-calc__title + .ov-calc__sentence {
	margin-block-start: calc(var(--space-xs, 0.5rem) - var(--space-m, 1.5rem));
}

/* The ring: the timeline drawn round the headline numbers. */
.ov-calc__ring {
	position: relative;
	container-type: inline-size;
	inline-size: min(100%, 24rem);
	margin-inline: auto;
	aspect-ratio: 1;
	/* A very soft shadow under the whole ring. On this box, not the svg: the svg is turned
	   a quarter back, and its shadow would fall sideways. */
	filter: drop-shadow(0 6px 18px color-mix(in oklch, var(--neutral, #000) 9%, transparent));
}

.ov-calc__ring svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
}

.ov-calc__track,
.ov-calc__arc {
	fill: none;
	stroke-width: 9;
}

.ov-calc__track {
	stroke: var(--base-light, #e8dfd0);
}

/* Each tone and its hover shade are ACSS shades, so the dashboard sets both. */
[data-tone="strong"] {
	--ov-tone: var(--primary, #b0552a);
	--ov-tone-lit: var(--primary-hover, #8f4420);
}

[data-tone="soft"] {
	--ov-tone: var(--primary-semi-light, #e4a578);
	--ov-tone-lit: var(--primary, #b0552a);
}

[data-tone="quiet"] {
	--ov-tone: var(--base-light, #e8dfd0);
	--ov-tone-lit: color-mix(in oklch, var(--base-semi-light, #d8ccb9) 50%, var(--base-semi-dark, #9a8f80));
}

.ov-calc__arc {
	stroke: var(--ov-tone);
	cursor: default;
	transition: stroke-dasharray 0.3s, stroke-dashoffset 0.3s, opacity 0.15s, stroke 0.15s;
}

/*
 * Pointing at an arc or its legend line: that one darkens, the rest step back.
 * ⚠️ Colour only, never width: a wider arc stood proud of its neighbours at the seams.
 */
.ov-calc__arc.is-lit {
	stroke: var(--ov-tone-lit);
}

/* Pointing wins over the timer's dimming: these come after it and match as closely. */
[data-lit] .ov-calc__arc.is-lit,
[data-lit][data-timing] .ov-calc__arc.is-lit {
	stroke: var(--ov-tone-lit);
}

[data-lit] .ov-calc__arc:not(.is-lit) {
	stroke: color-mix(in oklch, var(--ov-tone) 45%, var(--base, #f4ede3));
}

[data-lit] .ov-calc__legend li:not(.is-lit) {
	opacity: 0.45;
}

.ov-calc__legend li {
	transition: opacity 0.15s;
}

.ov-calc__legend li.is-lit::before {
	background: var(--ov-tone-lit);
}

.ov-calc__ring .ov-calc__lead {
	position: absolute;
	/* Meets the band's inner edge: radius 52 less half the 9 wide stroke, of 60. */
	inset: 10.4%;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 4cqi;
	border-radius: 50%;
	background: var(--base-ultra-light, #fdfbf7);
	box-shadow: 0 1.5cqi 6cqi color-mix(in oklch, var(--neutral, #000) 10%, transparent);
	text-align: center;
}

.ov-calc__ring .ov-calc__lead .ov-calc__result {
	display: grid;
	justify-items: center;
}

/* The first headline is the big one: the time, its unit on the line below. */
.ov-calc__ring .ov-calc__lead .ov-calc__result:first-child .ov-calc__value {
	display: grid;
	font-size: 15cqi;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.04em;
}

.ov-calc__ring .ov-calc__lead .ov-calc__result:first-child [data-suffix] {
	font-size: 5.5cqi;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--text-dark-muted, #555);
}

/* The rest of the headline, the temperature, in the brand colour under a rule. */
.ov-calc__ring .ov-calc__lead .ov-calc__result + .ov-calc__result {
	padding-block-start: 4cqi;
	border-block-start: 2px solid var(--base-light, #e8dfd0);
}

.ov-calc__ring .ov-calc__lead .ov-calc__result + .ov-calc__result .ov-calc__label {
	position: absolute;
	clip-path: inset(50%);
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.ov-calc__ring .ov-calc__lead .ov-calc__result + .ov-calc__result .ov-calc__value {
	font-size: 8cqi;
	font-weight: 700;
	color: var(--primary, #b0552a);
}



.ov-calc__legend {
	display: grid;
	gap: var(--space-xs, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-calc__legend li {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
}

/* The legend's key: a small square of the segment's colour, rounded like the timer rows' dots. */
.ov-calc__legend li::before {
	content: "";
	flex: none;
	inline-size: 0.8em;
	block-size: 0.8em;
	border-radius: 2px;
	background: var(--ov-tone);
}

.ov-calc__legend li > :last-child {
	margin-inline-start: auto;
	font-family: var(--ov-mono);
	font-size: var(--text-s, 0.9rem);
	color: var(--text-dark-muted, #555);
}

.ov-calc__value {
	color: var(--text-dark, #111);
	font-size: var(--text-xl, 1.5rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

/* The facts under the ring, as cards, three to a row; the figures size to the width they have. */
.ov-calc__results {
	display: grid;
	gap: var(--space-xs, 0.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	container-type: inline-size;
}

.ov-calc__results .ov-calc__value {
	font-size: clamp(1rem, 6cqi, 1.5rem);
	/* A figure never runs out of its card: a long word wraps inside it. */
	overflow-wrap: anywhere;
}

.ov-calc__results .ov-calc__result {
	min-inline-size: 0;
}

.ov-calc__results .ov-calc__result {
	display: grid;
	gap: var(--space-3xs, 0.2rem);
	align-content: start;
	padding: var(--space-s, 1rem) var(--space-xs, 0.5rem) var(--space-s, 1rem) var(--space-s, 1rem);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--base-ultra-light, #fdfbf7);
}

.ov-calc__results .ov-calc__label {
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--text-s, 0.9rem);
}

.ov-calc__notes {
	display: grid;
	gap: var(--space-xs, 0.5rem);
	margin: 0;
	padding-inline-start: 1.2em;
	font-size: var(--text-s, 0.9rem);
	color: var(--text-dark-muted, #555);
}

/* ------------------------------------------------------------ the steps */

.ov-calc__inputs {
	display: grid;
	counter-reset: ov-step;
}

.ov-calc__step {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--space-s, 1rem);
	padding-block: var(--space-l, 2rem);
	border-block-end: var(--border, 1px solid #ddd);
	counter-increment: ov-step;
}

.ov-calc__step:last-of-type {
	border-block-end: 0;
}

.ov-calc__step::before {
	content: counter(ov-step, decimal-leading-zero);
	padding-block-start: 0.5em;
	font-family: var(--ov-mono);
	font-size: var(--text-s, 0.9rem);
	color: var(--primary, #b0552a);
}

.ov-calc__step-title {
	grid-column: 2;
	margin: 0;
	font-size: var(--h3, 1.75rem);
	letter-spacing: -0.01em;
}

/* Wording in both unit systems ("1 in thick", "2.5 cm thick"): the form's data-units shows one. */
.ov-calc[data-units="metric"] [data-sys="us"],
.ov-calc:not([data-units="metric"]) [data-sys="metric"] {
	display: none;
}

/* Every step folds by its title, with a chevron that turns; "More options" starts folded. */
.ov-calc__step > .ov-calc__fold {
	grid-column: 2;
	display: grid;
	gap: var(--space-s, 1rem);
}

.ov-calc__fold > .ov-calc__fields,
.ov-calc__fold > summary .ov-calc__step-title {
	grid-column: auto;
}

.ov-calc__fold > summary {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
	cursor: pointer;
	list-style: none;
}

.ov-calc__fold > summary::-webkit-details-marker {
	display: none;
}

.ov-calc__fold > summary::after {
	content: "";
	inline-size: 0.55em;
	block-size: 0.55em;
	margin-inline-start: 0.25em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	color: var(--primary, #b0552a);
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s;
}

.ov-calc__fold[open] > summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.ov-calc__fold > summary:hover .ov-calc__step-title {
	color: var(--primary, #b0552a);
}

.ov-calc__fields {
	grid-column: 2;
	display: grid;
	gap: var(--space-m, 1.5rem) var(--space-l, 2rem);
	/* Two columns, as drawn; one when the column is narrow (the step is a container). */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: end;
}

/* The steps' column is a container: on a narrow one (a phone) everything gives up its margins. */
.ov-calc__inputs {
	container-type: inline-size;
}

@container (max-width: 30rem) {
	.ov-calc__fields,
	.ov-calc__fields:has(.ov-calc__number) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The step number above its title rather than in a column of its own. */
	.ov-calc__step {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-2xs, 0.35rem);
	}

	.ov-calc__step-title,
	.ov-calc__fields,
	.ov-calc__step > .ov-calc__fold {
		grid-column: 1;
	}

	/* Four options two by two; three stay in a row, their labels wrapping, so none sits alone. */
	.ov-calc__toggle[data-n="4"] {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ov-timer {
		padding: var(--space-s, 1rem) var(--space-xs, 0.5rem);
	}

	.ov-timer__row {
		padding-inline: var(--space-xs, 0.5rem) var(--space-2xs, 0.35rem);
	}

	.ov-timer__icon {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}
}

/* Figures are short: weight, pieces and the units share one row, labels level along the
   top, controls along the bottom; as many columns as there are (no pieces for fries). */
.ov-calc__fields:has(.ov-calc__number) {
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	align-items: stretch;
}

.ov-calc__fields:has(.ov-calc__number) > .ov-calc__field {
	grid-template-rows: auto 1fr;
}

.ov-calc__fields:has(.ov-calc__number) > .ov-calc__field > .ov-calc__control {
	align-self: end;
}

/* A toggle closes its row, after the figures it qualifies: weight, pieces, [ oz | g ]. */
.ov-calc__fields:has(.ov-calc__number) > .ov-calc__field:has(.ov-calc__toggle) {
	order: 1;
}

/* A chip's hint sits beside its label: "Rare  out at 120°F". */
.ov-calc__chips .ov-calc__opt small {
	margin-inline-start: 0.4em;
}

/* Chip rows, the switch and a choice of rows (a cut) take the full width; numbers and toggles share a row. */
.ov-calc__fields > .ov-calc__switch,
.ov-calc__fields > .ov-calc__field[data-type="row"],
.ov-calc__fields > .ov-calc__field:has(.ov-calc__chips),
.ov-calc__fields > .ov-calc__field:has(.ov-calc__toggle:not([data-n="2"])) {
	grid-column: 1 / -1;
}

.ov-calc__field {
	display: grid;
	gap: var(--space-xs, 0.5rem);
	align-content: start;
	min-inline-size: 0;
}

/* Chips: any short list. */
.ov-calc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem);
}

.ov-calc__chips .ov-calc__opt > span {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--ov-touch);
	padding-inline: var(--space-s, 1rem);
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-circle, 999px);
	background: var(--base-ultra-light, #fdfbf7);
	color: var(--text-dark, #111);
	text-decoration: none;
	cursor: pointer;
}

.ov-calc__chips .ov-calc__opt > span {
	transition: background-color 0.15s, border-color 0.15s;
}

.ov-calc__chips .ov-calc__opt:hover input:not(:checked) + span {
	border-color: var(--primary-semi-light, #e4a578);
	background: var(--primary-ultra-light, #fdf1ec);
}

.ov-calc__chips .ov-calc__opt input:checked + span {
	border-color: var(--primary, #b0552a);
	background: var(--primary, #b0552a);
	color: var(--primary-ultra-light, #fff);
}

.ov-calc__opt {
	position: relative;
	display: flex;
	margin: 0;
}

.ov-calc__opt input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ov-calc__opt input:focus-visible + span,
.ov-calc__switch summary:focus-visible {
	outline: 2px solid var(--primary-dark, #5a2a12);
	outline-offset: 2px;
}

/* The switch to another page: one line, "FOOD  Chicken thighs  Change", opening a searchable list. */
.ov-calc__switch summary {
	display: flex;
	align-items: center;
	gap: var(--space-s, 1rem);
	min-block-size: calc(var(--ov-touch) + 8px);
	padding-inline: var(--space-m, 1.5rem);
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--base-ultra-light, #fdfbf7);
	cursor: pointer;
	list-style: none;
}

.ov-calc__switch summary::-webkit-details-marker {
	display: none;
}

.ov-calc__switch-current {
	font-size: var(--text-l, 1.25rem);
	font-weight: 700;
	color: var(--text-dark, #111);
}

.ov-calc__switch-action {
	margin-inline-start: auto;
	color: var(--primary, #b0552a);
	font-weight: 600;
}

.ov-calc__switch-action::after {
	content: "";
	display: inline-block;
	inline-size: 0.45em;
	block-size: 0.45em;
	margin-inline-start: 0.5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s;
}

.ov-calc__switch[open] .ov-calc__switch-action::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.ov-calc__switch-panel {
	margin-block-start: var(--space-xs, 0.5rem);
	padding: var(--space-m, 1.5rem);
	max-block-size: 70vh;
	overflow: auto;
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--base-ultra-light, #fdfbf7);
}

/* A two-part toggle: [ Fridge | Frozen ], the chosen half raised. */
.ov-calc__toggle {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 4px;
	border-radius: var(--radius-m, 0.75rem);
	background: var(--base-light, #e8dfd0);
}

.ov-calc__toggle .ov-calc__opt {
	flex: 1 1 0;
	min-inline-size: 0;
}

.ov-calc__toggle .ov-calc__opt > span {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-block-size: calc(var(--ov-touch) - 8px);
	padding-inline: var(--space-2xs, 0.35rem);
	border-radius: calc(var(--radius-m, 0.75rem) - 3px);
	color: var(--text-dark-muted, #555);
	flex-direction: column;
	text-align: center;
	line-height: 1.2;
	padding-block: var(--space-2xs, 0.35rem);
}

/*
 * Two options keep one line each ("No, from cold"), so toggles side by side stay level;
 * each half is at least as wide as its label (bold when chosen), equal when there is room.
 */
.ov-calc__toggle[data-n="2"] {
	grid-auto-columns: minmax(max-content, 1fr);
}

.ov-calc__toggle[data-n="2"] .ov-calc__opt > span {
	white-space: nowrap;
}

/* An option's hint, a smaller second line: "Small", then "2 to 4 quarts". */
.ov-calc__opt small {
	display: block;
	font-size: var(--text-xs, 0.75rem);
	font-weight: 400;
	opacity: 0.75;
}

.ov-calc__toggle .ov-calc__opt > span {
	transition: background-color 0.15s, color 0.15s;
}

.ov-calc__toggle .ov-calc__opt:hover input:not(:checked) + span {
	background: color-mix(in oklch, var(--base-ultra-light, #fdfbf7) 55%, transparent);
	color: var(--text-dark, #111);
}

.ov-calc__toggle .ov-calc__opt input:checked + span {
	background: var(--base-ultra-light, #fdfbf7);
	color: var(--text-dark, #111);
	font-weight: 600;
	box-shadow: 0 1px 3px color-mix(in oklch, var(--neutral, #000) 15%, transparent);
}

/* A number is a big figure on a line, its unit at the end. */
.ov-calc__control {
	position: relative;
}

.ov-calc__number {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: calc(var(--ov-touch) * 1.5);
	margin: 0;
	padding: 0 3.5rem 0 0;
	border: 0;
	border-block-end: 2px solid var(--text-dark, #111);
	border-radius: 0;
	background: transparent;
	color: var(--text-dark, #111);
	font: inherit;
	font-size: var(--h2, 2.25rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ov-calc__number:focus-visible {
	outline: none;
	border-block-end-color: var(--primary, #b0552a);
}

.ov-calc__unit {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: var(--space-xs, 0.5rem);
	font-family: var(--ov-mono);
	font-size: var(--text-s, 0.9rem);
	text-transform: uppercase;
	color: var(--text-dark-muted, #555);
	pointer-events: none;
}

/* A long or grouped list stays a dropdown, drawn like the food switch above a food page:
   the same box and chevron, the choice at body size like the switch's. */
.ov-calc__control:has(> select) {
	position: relative;
}

.ov-calc__control select {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: var(--ov-touch);
	padding-inline: var(--space-s, 1rem) calc(var(--space-s, 1rem) + 1.5em);
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--base-ultra-light, #fdfbf7);
	color: var(--text-dark, #111);
	font: inherit;
	font-size: var(--text-m, 1rem);
	font-weight: 600;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s;
}

.ov-calc__control select:hover {
	border-color: var(--primary-semi-light, #e4a578);
}

.ov-calc__control:has(> select)::after {
	content: "";
	position: absolute;
	inset-inline-end: var(--space-s, 1rem);
	inset-block-start: 50%;
	inline-size: 0.55em;
	block-size: 0.55em;
	border-inline-end: 2px solid var(--primary, #b0552a);
	border-block-end: 2px solid var(--primary, #b0552a);
	translate: 0 -70%;
	rotate: 45deg;
	pointer-events: none;
}

/* Share: the card as a preview, then ACSS buttons (btn--primary, and its outline). */
.ov-calc__share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem);
}

.ov-calc__card {
	display: block;
	flex: 1 1 100%;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1200 / 630;
	border-radius: var(--radius-m, 0.75rem);
	background: var(--base-light, #e8dfd0);
	box-shadow: 0 2px 10px color-mix(in oklch, var(--neutral, #000) 12%, transparent);
}

.ov-calc__share-btn {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	white-space: nowrap;
	cursor: pointer;
}

.ov-calc__share-btn svg {
	flex: none;
	inline-size: 1.2em;
	block-size: 1.2em;
	color: inherit; /* the theme colours every svg; these follow the button's text */
}

/* ------------------------------------------------------------ the timer */

/* While a timer runs, the step it is in stands forward on the ring. */
[data-timing] .ov-calc__arc:not(.is-now) {
	stroke: color-mix(in oklch, var(--ov-tone) 50%, var(--base, #f4ede3));
}

.ov-timer {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--space-s, 1rem);
	padding: var(--space-m, 1.5rem);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--base, #f4ede3);
}

/* The theme gives a paragraph its muted colour; the timer's words and figures are ink. */
.ov-timer p {
	margin: 0;
	color: var(--text-dark, #111);
}

/* The line saying what is happening, with sound and start over in its corner. */
.ov-timer__head {
	display: flex;
	align-items: center;
	gap: var(--space-s, 1rem);
}

.ov-timer__phase {
	font-weight: 700;
	font-size: var(--text-l, 1.25rem);
}

.ov-timer__tools {
	display: flex;
	gap: var(--space-2xs, 0.35rem);
	margin-inline-start: auto;
}

/* An icon button: ACSS's button, square and round, the icon in the text colour. */
.ov-timer__icon {
	--btn-padding-block: 0;
	--btn-padding-inline: 0;
	--btn-min-width: 0;
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	cursor: pointer;
}

/* ⚠️ The theme colours every svg; an icon takes its button's text colour, or it vanishes on a filled button. */
.ov-timer__icon svg {
	inline-size: 1.2rem;
	block-size: 1.2rem;
	color: inherit;
}

/* The clock, and beside it when it will all be ready. */
.ov-timer__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s, 1rem);
}

.ov-timer__ready {
	display: grid;
	justify-items: end;
	text-align: end;
}

.ov-timer__ready-label {
	font-family: var(--ov-mono);
	font-size: var(--text-xs, 0.75rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dark-muted, #555);
}

.ov-timer__ready strong {
	font-size: var(--h3, 1.75rem);
	line-height: 1.1;
}

.ov-timer__ready span:last-child {
	color: var(--text-dark-muted, #555);
	font-size: var(--text-s, 0.9rem);
	font-variant-numeric: tabular-nums;
}

.ov-timer__clock {
	font-family: var(--ov-mono);
	font-size: var(--h1, 3rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* The hundredths, smaller, so the seconds stay the figure you read. */
.ov-timer__cs {
	display: inline-block;
	min-inline-size: 1.6em;
	font-size: 0.45em;
	color: var(--text-dark-muted, #555);
}

/* The one line that does not tick: what comes next, and when it will all be ready. */
.ov-timer__next {
	color: var(--text-dark-muted, #555) !important;
}

/*
 * The steps: each row fills with its colour as its time passes (--p, 0 to 1),
 * done ones faded, the one in progress bold, each with its own controls.
 */
.ov-timer__steps {
	display: grid;
	gap: var(--space-2xs, 0.35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-timer__steps li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
}

.ov-timer__row {
	--p: 0;
	display: flex;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
	min-block-size: calc(var(--ov-touch) + 4px);
	padding-inline: var(--space-s, 1rem) var(--space-2xs, 0.35rem);
	border-radius: var(--radius-m, 0.75rem);
	background:
		linear-gradient(to right, color-mix(in oklch, var(--ov-tone) 30%, transparent) calc(var(--p) * 100%), transparent 0),
		var(--base-ultra-light, #fdfbf7);
}

.ov-timer__row::before {
	content: "";
	flex: none;
	inline-size: 0.7em;
	block-size: 0.7em;
	border-radius: 2px;
	background: var(--ov-tone);
}

.ov-timer__name {
	min-inline-size: 0;
}

.ov-timer__time {
	margin-inline-start: auto;
	color: var(--text-dark-muted, #555);
	font-family: var(--ov-mono);
	font-variant-numeric: tabular-nums;
}

.ov-timer__row .ov-timer__icon {
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

/* Reset, outside the row: a slot that keeps its place when it is not needed yet. */
.ov-timer__side .is-off {
	visibility: hidden;
}

.ov-timer__steps li.is-now {
	font-weight: 700;
}

.ov-timer__steps li.is-done .ov-timer__name,
.ov-timer__steps li.is-done .ov-timer__time {
	color: var(--text-dark-muted, #555);
}

/* An alert: the phase line in the brand colour, the panel pulsing twice. */
.ov-timer.is-alert .ov-timer__phase,
.ov-calc__timer.is-alert .ov-timer__phase {
	color: var(--primary, #b0552a);
}

.ov-calc__timer.is-alert .ov-timer {
	animation: ov-pulse 0.6s ease-in-out 2;
}

@keyframes ov-pulse {
	50% {
		background: var(--primary-light, #f3d9c9);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ov-calc__timer.is-alert .ov-timer {
		animation: none;
	}
}

.ov-calc.is-live .ov-calc__submit {
	display: none;
}

/* ------------------------------------------------------------ the cream panel */

/*
 * The answer's cream runs to the screen's edges on a phone.
 *
 * ⚠️ A shadow clipped to the panel's height, not a wide pseudo-element: a box
 * reaching 100vmax to the right made the page 1,170px wide on a 375px phone,
 * which then zoomed out. A shadow adds no scroll width.
 */
.ov-calc__answer {
	background: var(--base, #f4ede3);
	box-shadow: 0 0 0 100vmax var(--base, #f4ede3);
	clip-path: inset(0 -100vmax);
}

/* A page that opens with its calculator (or the home page with its hero): the cream starts right under the header, not
   below the section's padding (a band of page colour between the two). */
.brxe-section:has(> .brxe-container > .brxe-post-content > :is(.ov-calc, .ov-home):first-child) {
	padding-block-start: 0;
}

@media (min-width: 64em) {
	.brxe-post-content > .ov-calc:first-child {
		padding-block-start: var(--space-l, 2rem);
	}

	.brxe-post-content > .ov-calc:first-child::before {
		margin-block-start: calc(var(--space-l, 2rem) * -1);
	}
}

@media (min-width: 64em) {
	.ov-calc {
		grid-template-columns: minmax(20rem, 5fr) minmax(0, 7fr);
		grid-template-rows: auto;
		column-gap: var(--space-2xl, 4rem);
		align-items: start;
	}

	/*
	 * ⚠️ The cream is its own grid item, stretched to the row, so it runs the
	 * full height of the steps; the answer on top of it stays in view. One
	 * element cannot both stretch and stick.
	 */
	.ov-calc::before {
		content: "";
		z-index: -1;
		grid-column: 1;
		grid-row: 1;
		align-self: stretch;
		margin-inline-start: -100vmax;
		background: var(--base, #f4ede3);
	}

	.ov-calc__answer {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		inset-block-start: 0;
		padding-inline-end: var(--space-l, 2rem);
	}

	/* The grid item behind carries the cream here, down the whole column. */
	.ov-calc__answer {
		background: none;
		box-shadow: none;
		clip-path: none;
	}

	.ov-calc__inputs {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ------------------------------------------------------------ food and temperature pages */

/* A table in a card: rounded frame, a tinted head, a row that lights under the pointer,
   and the first column as each row's name. Scrolls inside its frame on a phone. */
.ov-table {
	margin-block: var(--space-xl, 3rem);
	overflow-x: auto;
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius, 0.5rem);
	background: var(--ov-raised, var(--white, #fff));
}

.ov-calc-table {
	inline-size: 100%;
	margin: 0;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.ov-calc-table th,
.ov-calc-table td {
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
	border: 0;
	border-block-end: var(--border, 1px solid #ddd);
	text-align: start;
	white-space: nowrap;
}

.ov-calc-table thead th {
	padding-block: var(--space-xs, 0.5rem);
	background: var(--primary-ultra-light, #fdf1ec);
	font-family: var(--ov-mono, ui-monospace, monospace);
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary, #b0552a);
}

.ov-calc-table tbody th {
	font-weight: 600;
	white-space: normal;
	color: var(--text-dark, #111);
}

.ov-calc-table tbody tr:last-child > * {
	border-block-end: 0;
}

.ov-calc-table tbody tr {
	transition: background-color 0.15s;
}

.ov-calc-table tbody tr:hover {
	background: color-mix(in oklch, var(--primary-ultra-light, #fdf1ec) 60%, transparent);
}

.ov-calc-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	column-gap: var(--space-m, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-calc-links li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-xs, 0.5rem);
	padding-block: var(--space-xs, 0.5rem);
	border-block-end: var(--border, 1px solid #ddd);
}

.ov-calc-links a {
	font-weight: 600;
}

.ov-calc-links span {
	color: var(--text-dark-muted, #555);
	font-size: var(--text-s, 0.9rem);
	white-space: nowrap;
}

/* ------------------------------------------------------------ hubs */

.ov-hub {
	display: grid;
	gap: var(--space-m, 1.5rem);
}

.ov-hub__search {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 48px;
	padding-inline: var(--space-m, 1.5rem);
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-circle, 999px);
	background: var(--base-ultra-light, #fdfbf7);
	color: var(--text-dark, #111);
	font: inherit;
	font-size: var(--text-m, 1rem);
}

.ov-hub__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem);
}

.ov-hub__chips button {
	cursor: pointer; /* The look is ACSS's: btn--primary chosen, btn--primary-light the rest. */
}

.ov-hub__heading {
	margin-block-end: var(--space-xs, 0.5rem);
	font-size: var(--h4, 1.25rem);
}

/* ------------------------------------------------- what an editor writes */

.ov-page__intro {
	display: grid;
	gap: var(--space-m, 1.5rem);
	margin-block: var(--space-l, 2rem);
}

@media (min-width: 48em) {
	.ov-page__intro:has(.ov-page__photo) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
	}
}

.ov-page__photo {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius, 0.5rem);
}

/* The page's words with the food's photo beside them; on a phone the photo comes first,
   cropped wide so it does not push the words a screen down. */
.ov-page__lede {
	display: grid;
	gap: var(--space-m, 1.5rem);
	align-items: start;
}

.ov-page__lede > .ov-page__text {
	margin: 0;
}

@media (min-width: 48em) {
	.ov-page__lede {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

@media (max-width: 47.99em) {
	.ov-page__lede > picture {
		order: -1;
	}

	.ov-page__lede .ov-page__photo {
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}
}

/* A card's photo fills its frame, as the featured image does. */
.ov-card__image picture {
	display: contents;
}


/* The video's picture is a button; the player takes its place at the same size. */
.ov-video {
	margin-block: var(--space-l, 2rem);
}

.ov-video__play,
.ov-video iframe {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius, 0.5rem);
}

.ov-video__play {
	position: relative;
	padding: 0;
	overflow: hidden;
	background: var(--neutral, #111);
	cursor: pointer;
}

.ov-video__play img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ov-video__play::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	inline-size: 4.5rem;
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--primary, #b0552a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E") center / 55% no-repeat;
	transition: scale 0.15s;
}

.ov-video__play:hover::after {
	scale: 1.08;
}

/* ------------------------------------- tips, questions and sources, under the calculator */

/* One rhythm for every section under the calculator: the same space between them, the
   same space under each heading, all from ACSS. */
.ov-page__main > .ov-page__text,
.ov-page__main > .ov-page__links,
.ov-page__main > .ov-calc-faq {
	margin-block: var(--space-xl, 3rem);
}

.ov-page__text > h3,
.ov-page__links > h3,
.ov-calc-faq > h3,
.ov-calc-sources > h3 {
	margin: 0 0 var(--space-s, 1rem);
}


/* Questions: each answer under its question, a rule between them. */
.ov-calc-faq h4 {
	margin: 0 0 var(--space-2xs, 0.35rem);
	padding-block-start: var(--space-m, 1.5rem);
	border-block-start: var(--border, 1px solid #ddd);
	font-size: var(--text-l, 1.125rem);
}

.ov-calc-faq > h3 + h4 {
	padding-block-start: 0;
	border-block-start: 0;
}

.ov-calc-faq p {
	max-inline-size: 65ch;
	margin: 0 0 var(--space-m, 1.5rem);
	color: var(--text-dark-muted, #555);
}

/* Sources: a card each, with a shield, the source, its site and when it was checked. */
.ov-calc-sources__lead {
	max-inline-size: 65ch;
	margin: 0 0 var(--space-m, 1.5rem);
	font-size: var(--text-s, 0.9rem);
	color: var(--text-dark-muted, #555);
}

.ov-sources {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: var(--space-s, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-source {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-s, 1rem);
	align-items: start;
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem) var(--space-s, 1rem) var(--space-s, 1rem);
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius, 0.5rem);
	background: var(--ov-raised, var(--white, #fff));
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ov-source:hover {
	border-color: var(--primary-semi-light, #e4a578);
	box-shadow: 0 4px 16px -8px color-mix(in oklch, var(--primary, #b0552a) 35%, transparent);
}

.ov-source__icon {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--primary-ultra-light, #fdf1ec);
	color: var(--primary, #b0552a);
}

.ov-source svg {
	inline-size: 60%;
	block-size: auto;
	color: inherit; /* the theme colours every svg; these follow their text */
}

.ov-source__fill {
	fill: currentColor;
	opacity: 0.14;
}

.ov-source__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ov-source__body {
	display: grid;
	gap: var(--space-2xs, 0.35rem);
}

.ov-source__title {
	font-weight: 600;
	line-height: 1.35;
	color: var(--text-dark, #111);
	text-decoration: none;
}

.ov-source__title:hover {
	color: var(--primary, #b0552a);
	text-decoration: underline;
}

/* The whole card is the link's to click. */
.ov-source {
	position: relative;
}

.ov-source__title::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ov-source__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs, 0.35rem) var(--space-s, 1rem);
	font-size: var(--text-xs, 0.75rem);
}

.ov-source__site {
	font-family: var(--ov-mono, ui-monospace, monospace);
	letter-spacing: 0.04em;
	color: var(--text-dark-muted, #555);
}

.ov-source__checked {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.15em 0.65em 0.15em 0.45em;
	border-radius: var(--radius-circle, 999px);
	background: color-mix(in oklch, var(--success, #2f7d4f) 12%, transparent);
	color: var(--success, #2f7d4f);
	font-weight: 600;
}

.ov-source__checked svg {
	inline-size: 1.1em;
}

.ov-page__text p {
	max-inline-size: 65ch;
	margin: 0 0 var(--space-s, 1rem);
}

/* The one page most worth going to next, as a card: "Leftover steak?" */
.ov-link-card {
	margin-block: var(--space-l, 2rem);
}

.ov-link-card a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-2xs, 0.35rem) var(--space-m, 1.5rem);
	align-items: center;
	padding: var(--space-m, 1.5rem);
	border: var(--border, 1px solid #ddd);
	border-inline-start: 4px solid var(--primary, #b0552a);
	border-radius: var(--radius, 0.5rem);
	background: var(--primary-ultra-light, #fdf1ec);
	color: var(--text-dark, #111);
	text-decoration: none;
	transition: box-shadow 0.15s, transform 0.15s;
}

.ov-link-card a:hover {
	box-shadow: 0 6px 20px -10px color-mix(in oklch, var(--primary, #b0552a) 45%, transparent);
	transform: translateY(-1px);
}

.ov-link-card__title {
	font-size: var(--text-l, 1.125rem);
	font-weight: 700;
}

.ov-link-card__text {
	grid-column: 1;
	color: var(--text-dark-muted, #555);
}

.ov-link-card__go {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	color: var(--primary, #b0552a);
}

.ov-link-card__go::after {
	content: "\2192";
	transition: translate 0.15s;
}

.ov-link-card a:hover .ov-link-card__go::after {
	translate: 0.2em 0;
}

@media (max-width: 40em) {
	.ov-link-card a {
		grid-template-columns: minmax(0, 1fr);
	}

	.ov-link-card__go {
		grid-column: 1;
		grid-row: auto;
	}
}

/* The switch above the calculator's steps: [ Cook | Reheat ], the same food in the other one. */
.ov-calc__modes {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	margin-block-end: var(--space-m, 1.5rem);
	padding: 4px;
	border-radius: var(--radius-circle, 999px);
	background: var(--base-light, #efe7dc);
}

.ov-calc__mode {
	padding: 0.55em 0.8em;
	white-space: nowrap;
	border-radius: var(--radius-circle, 999px);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--text-dark-muted, #555);
	transition: background-color 0.15s, color 0.15s;
}

.ov-calc__mode[href]:hover {
	background: color-mix(in oklch, var(--ov-raised, var(--white, #fff)) 55%, transparent);
	color: var(--text-dark, #111);
}

.ov-calc__mode[aria-current] {
	background: var(--ov-raised, var(--white, #fff));
	color: var(--primary, #b0552a);
	box-shadow: 0 1px 3px color-mix(in oklch, var(--neutral, #111) 15%, transparent);
}

/* Links as cards: a picture (the page's featured image, or its initial until it has one),
   the name, and the heat and time. */
/* As many across as the section says (--cols; --cols-phone on a phone), set by Links::cards(). */
.ov-cards {
	--gap: var(--space-s, 1rem);
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A slider: one row that swipes and snaps card by card, the next one peeking in. */
.ov-cards--slider {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--cols, 3) - 1) * var(--gap)) / (var(--cols, 3) + 0.25));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block-end: 4px; /* room for the hover lift */
}

.ov-cards--slider::-webkit-scrollbar {
	display: none;
}

.ov-cards--slider > li {
	scroll-snap-align: start;
}

@media (max-width: 40em) {
	.ov-cards {
		--gap: var(--space-xs, 0.5rem);
		grid-template-columns: repeat(var(--cols-phone, 2), minmax(0, 1fr));
	}

	.ov-cards--slider {
		grid-template-columns: none;
		grid-auto-columns: calc((100% - (var(--cols-phone, 2) - 1) * var(--gap)) / (var(--cols-phone, 2) + 0.25));
	}

}

/* The section's title with the slider's arrows beside it. */
.ov-page__links-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s, 1rem);
	margin-block-end: var(--space-s, 1rem);
}

.ov-page__links-head h3 {
	margin: 0;
}

.ov-slider__nav {
	display: flex;
	gap: var(--space-xs, 0.5rem);
}

.ov-slider__btn {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	aspect-ratio: 1;
	padding: 0;
	border: var(--border, 1px solid #ddd);
	border-radius: 50%;
	background: var(--ov-raised, var(--white, #fff));
	color: var(--primary, #b0552a);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, opacity 0.15s;
}

.ov-slider__btn svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: inherit; /* the theme colours every svg; these follow the button */
}

.ov-slider__btn:hover:not(:disabled) {
	background: var(--primary-ultra-light, #fdf1ec);
}

.ov-slider__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* A slider that fits without scrolling needs no arrows. */
.ov-slider__nav[hidden] {
	display: none;
}

.ov-card a {
	display: grid;
	align-content: start; /* beside a taller card, the words stay under the picture */
	grid-template-columns: minmax(0, 1fr); /* a long word ("tenderloin") once widened one card, and its picture grew taller than its neighbours */
	gap: var(--space-2xs, 0.35rem);
	block-size: 100%;
	padding-block-end: var(--space-s, 1rem);
	overflow: hidden;
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius, 0.5rem);
	background: var(--ov-raised, var(--white, #fff));
	color: var(--text-dark, #111);
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.ov-card a:hover {
	border-color: var(--primary-semi-light, #e4a578);
	box-shadow: 0 10px 28px -14px color-mix(in oklch, var(--primary, #b0552a) 50%, transparent);
	transform: translateY(-2px);
}

.ov-card__image {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin-block-end: var(--space-2xs, 0.35rem);
	overflow: hidden;
	background: linear-gradient(135deg, var(--primary-ultra-light, #fdf1ec), var(--base-light, #efe7dc));
}

.ov-card__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: scale 0.3s;
}

.ov-card a:hover .ov-card__image img {
	scale: 1.04;
}

.ov-card__initial {
	font-size: var(--h2, 2.5rem);
	font-weight: 700;
	color: color-mix(in oklch, var(--primary, #b0552a) 55%, transparent);
}

.ov-card__name,
.ov-card__line {
	padding-inline: var(--space-s, 1rem);
}

.ov-card__name {
	font-weight: 700;
	line-height: 1.3;
}

.ov-card__line {
	font-size: var(--text-s, 0.9rem);
	text-wrap: balance;
	color: var(--text-dark-muted, #555);
}

.ov-card__line > span {
	white-space: nowrap; /* "380°F," then "20 to 24 min", never "20 to 24" then "min" */
}

@media (max-width: 40em) {
	/* Three across on a phone: about 110px a card, so its words and padding shrink with it. */
	.ov-card a {
		gap: 0.15rem;
		padding-block-end: var(--space-xs, 0.5rem);
	}

	.ov-card__name,
	.ov-card__line {
		padding-inline: var(--space-xs, 0.5rem);
	}

	.ov-card__name {
		font-size: var(--text-s, 0.875rem);
	}

	.ov-card__line {
		font-size: min(var(--text-xs, 0.75rem), 0.75rem);
		line-height: 1.4;
	}

	.ov-card__initial {
		font-size: var(--h3, 1.75rem);
	}
}

/* "Eat at": a time to work back from, and the plan it gives. */
.ov-timer__plan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs, 0.5rem) var(--space-s, 1rem);
	margin-block: var(--space-s, 1rem);
	padding: var(--space-xs, 0.5rem) var(--space-s, 1rem);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--ov-raised, var(--white, #fff));
}

.ov-timer__plan-label {
	font-family: var(--ov-mono, ui-monospace, monospace);
	font-size: var(--text-xs, 0.75rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dark-muted, #555);
}

.ov-timer__eat {
	padding: 0.35em 0.6em;
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius, 0.5rem);
	background: var(--base-ultra-light, #fdfbf7);
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--text-dark, #111);
}

.ov-timer__plan-clear {
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--text-s, 0.9rem);
	color: var(--primary, #b0552a);
	text-decoration: underline;
	cursor: pointer;
}

.ov-timer__plan-says {
	flex-basis: 100%;
	margin: 0;
	font-weight: 600;
	color: var(--text-dark, #111);
}

.ov-timer__plan-says:empty {
	display: none;
}

/* ------------------------------------------ the page under the calculator: two columns */

/* The words, tables and links in the main column; tips and sources beside them, staying in
   view as the page scrolls. One column, the sidebar after, on a phone. */
.ov-page {
	display: grid;
	/* minmax(0, ...): a wide table scrolls in its frame instead of stretching the page. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl, 3rem);
	margin-block: var(--space-xl, 3rem);
}

@media (min-width: 64em) {
	.ov-page {
		grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
		align-items: start;
	}

	.ov-page__side {
		position: sticky;
		inset-block-start: var(--space-l, 2rem);
	}
}

.ov-page__main > :first-child {
	margin-block-start: 0;
}

.ov-page__side {
	display: grid;
	gap: var(--space-l, 2rem);
}

.ov-page__side:empty {
	display: none;
}

/* Tips and common mistakes as cards. Every icon is an ACSS boxed icon (data-icon, icon-list):
   each card only sets the --icon-* tokens, a bulb or warning by the title and a number or cross
   by each line. */
@property --ov-line {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

.ov-page__tips,
.ov-page__mistakes {
	--icon-radius: var(--radius-circle, 50%);
	--icon-border-width: 0;
	--icon-color: var(--primary, #b0552a);
	padding: var(--space-m, 1.5rem);
	border-radius: var(--radius-m, 0.75rem);
}

/* A border the colour of the card, so its content starts where the mistakes card's does. */
.ov-page__tips {
	--icon-background: var(--ov-raised, var(--white, #fff));
	border: var(--border-width, 1px) solid transparent;
	background: var(--primary-ultra-light, #fdf1ec);
}

.ov-page__mistakes {
	--icon-background: var(--primary-ultra-light, #fdf1ec);
	border: var(--border, 1px solid #ddd);
	background: var(--ov-raised, var(--white, #fff));
}

/* The title's icon is bigger than the lines' but takes their room (a negative margin each
   side), so every icon sits on one centre line and the title starts where the text does. */
.ov-page__tips > h3,
.ov-page__mistakes > h3 {
	--icon-size: 1.125rem;
	--icon-padding: 0.3rem;
	display: flex;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
	margin: 0 0 var(--space-s, 1rem);
}

.ov-page__tips > h3 > svg,
.ov-page__mistakes > h3 > svg {
	margin-inline: calc((0.875rem + 2 * 0.25rem - var(--icon-size) - 2 * var(--icon-padding)) / 2);
}

.ov-tips,
.ov-mistakes {
	--icon-list-icon-size: 0.875rem;
	--icon-padding: 0.25rem;
	--icon-list-gap: var(--space-s, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The disc sits level with the first line: half of what the line has over the disc. */
.ov-tips li,
.ov-mistakes li {
	--ov-line: 1lh;
	--icon-block-offset: calc((var(--ov-line) - var(--icon-list-icon-size) - 2 * var(--icon-padding)) / 2);
	display: flex;
	align-items: start;
	gap: var(--space-xs, 0.5rem);
	line-height: 1.5;
}

.ov-tips {
	--icon-background: var(--primary, #b0552a);
	--icon-color: var(--white, #fff);
}

/* Sources in the sidebar: one column, compact, the lead line shorter. */
.ov-page__side .ov-calc-sources > h3 {
	margin: 0 0 var(--space-xs, 0.5rem);
}

.ov-page__side .ov-calc-sources__lead {
	margin-block-end: var(--space-s, 1rem);
	font-size: var(--text-xs, 0.75rem);
}

.ov-page__side .ov-sources {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xs, 0.5rem);
}

.ov-page__side .ov-source {
	gap: var(--space-xs, 0.5rem);
	padding: var(--space-xs, 0.5rem) var(--space-s, 1rem) var(--space-xs, 0.5rem) var(--space-xs, 0.5rem);
}

.ov-page__side .ov-source__icon {
	inline-size: 2.25rem;
}

.ov-page__side .ov-source__title {
	font-size: var(--text-s, 0.9rem);
}

/* Without a ring (the oven converter), the headline figures lead the row of three, the
   time in the brand colour. */
.ov-calc__result--lead .ov-calc__value {
	font-weight: 800;
	text-wrap: balance;
}

.ov-calc__result--lead + .ov-calc__result--lead .ov-calc__value {
	color: var(--primary, #b0552a);
}

/* On a phone the two columns fall into one reading order: the page's words, its tips, the
   rest, the sources last. The columns step aside (display: contents) so each section can
   take its place. */
@media (max-width: 63.99em) {
	.ov-page__main,
	.ov-page__side {
		display: contents;
	}

	.ov-page .ov-page__main > *,
	.ov-page .ov-page__side > * {
		order: 2;
		margin-block: 0;
	}

	.ov-page__main > .ov-page__intro,
	.ov-page__main > .ov-page__lede,
	.ov-page__main > .ov-page__text {
		order: 0;
	}

	.ov-page__side > .ov-page__tips {
		order: 1;
	}

	.ov-page__side > .ov-calc-sources {
		order: 3;
	}
}

/* On a phone a table's cells wrap instead of scrolling: three short columns fit. */
@media (max-width: 40em) {
	.ov-calc-table th,
	.ov-calc-table td {
		padding-inline: var(--space-s, 1rem);
		white-space: normal;
	}
}

/* On a phone the page's title (9px) and the steps' titles (3px) stand out a little more,
   over the ACSS size they follow everywhere else. */
@media (max-width: 40em) {
	.ov-calc__title {
		font-size: calc(var(--h2, 2.25rem) + 9px);
	}

	.ov-calc__step-title {
		font-size: calc(var(--h3, 1.75rem) + 3px);
	}
}

/* "Held to 180 oz, the limit.": under a number held to its range. */
.ov-calc__field:has(> .ov-calc__held) {
	position: relative;
}

/* Under its field without taking room in the row, so the figures beside it stay level. */
.ov-calc__held {
	position: absolute;
	inset-block-start: calc(100% + var(--space-2xs, 0.35rem));
	inset-inline-start: 0;
	display: block;
	white-space: nowrap; /* one line, running under the field beside it if it must */
	font-size: var(--text-xs, 0.75rem);
	color: var(--primary, #b0552a);
}

.ov-calc__held[hidden] {
	display: none;
}

@media (max-width: 63.99em) {
	.ov-page__side > .ov-page__mistakes {
		order: 1;
	}
}

/*
 * The docked answer (calc.js, mountDock): the headline figures at the foot of a narrow screen
 * while the options are changed below the panel; a tap opens the rest. Dark on a light page,
 * as the drawing has it, and a raised panel on a dark one, where a light sheet would glare.
 */
.ov-dock {
	--dock-bg: light-dark(var(--neutral, #1d1a17), var(--base-hover, #38332c));
	--dock-ink: light-dark(var(--base-ultra-light, #fdfbf7), var(--neutral, #ece8e4));
	--dock-muted: color-mix(in oklch, var(--dock-ink) 68%, transparent);
	--dock-accent: light-dark(var(--primary-semi-light, #e4a578), var(--primary, #d9824f));
	--dock-rule: color-mix(in oklch, var(--dock-ink) 14%, transparent);
	position: fixed;
	z-index: 50;
	inset-inline: var(--space-xs, 0.5rem);
	/* Low: into the phone's safe area, but clear of the swipe bar. */
	inset-block-end: max(var(--space-2xs, 0.35rem), calc(env(safe-area-inset-bottom) - var(--space-s, 1rem)));
	max-inline-size: 36rem;
	margin-inline: auto;
	border: 1px solid var(--dock-rule);
	border-radius: var(--radius-l, 1.25rem);
	background: var(--dock-bg);
	color: var(--dock-ink);
	visibility: hidden;
	translate: 0 calc(100% + var(--space-l, 2rem));
	transition: translate 0.3s ease, visibility 0s 0.3s;
}

.ov-dock[data-up] {
	visibility: visible;
	translate: 0;
	transition: translate 0.3s ease;
}

@media (min-width: 64em) {
	.ov-dock {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ov-dock,
	.ov-dock[data-up] {
		transition: none;
	}
}

.ov-dock__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "grip grip" "main side" "line line";
	align-items: end;
	column-gap: var(--space-s, 1rem);
	inline-size: 100%;
	padding: var(--space-2xs, 0.35rem) var(--space-m, 1.5rem) var(--space-xs, 0.5rem);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ov-dock__grip {
	grid-area: grip;
	justify-self: center;
	inline-size: 2.5rem;
	block-size: 4px;
	margin-block-end: var(--space-2xs, 0.35rem);
	border-radius: 2px;
	background: var(--dock-rule);
}

.ov-dock__main,
.ov-dock__side {
	display: grid;
	min-inline-size: 0;
}

.ov-dock__main {
	grid-area: main;
	justify-items: start;
	text-align: start;
}

.ov-dock__side {
	grid-area: side;
	align-self: start; /* its label level with the headline's, the corner below left for the shrink button */
	justify-items: end;
	text-align: end;
}

.ov-dock__main[hidden],
.ov-dock__side[hidden] {
	display: none;
}

.ov-dock__label,
.ov-dock__line,
.ov-dock__figures dt {
	color: var(--dock-muted);
	font-size: var(--text-s, 0.875rem);
}

.ov-dock__value {
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	white-space: nowrap;
}

.ov-dock__main .ov-dock__value {
	color: var(--dock-accent);
	font-size: clamp(1.75rem, 8.5vw, 2.5rem);
}

.ov-dock__side .ov-dock__value {
	font-size: clamp(1.375rem, 6vw, 1.75rem);
}

.ov-dock__line {
	grid-area: line;
	justify-self: start;
	margin-block-start: 0.125rem;
	padding-inline-end: 2.5rem; /* clear of the shrink button */
	text-align: start;
}

.ov-dock[data-open] .ov-dock__line {
	display: none;
}

.ov-dock__more {
	display: grid;
	gap: var(--space-s, 1rem);
	max-block-size: 60vh;
	margin-inline: var(--space-m, 1.5rem);
	padding-block: var(--space-s, 1rem) var(--space-m, 1.5rem);
	border-block-start: 1px solid var(--dock-rule);
	overflow-y: auto;
}

.ov-dock__more[hidden] {
	display: none;
}

.ov-dock__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--space-s, 1rem);
	margin: 0;
}

.ov-dock__figures dd {
	margin: 0;
	font-size: var(--text-l, 1.25rem);
	font-weight: 800;
}

.ov-dock__steps,
.ov-dock__notes {
	display: grid;
	gap: var(--space-2xs, 0.35rem);
	margin: 0;
	padding: 0;
}

.ov-dock__steps {
	list-style: none;
}

.ov-dock__steps li {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
	font-weight: 600;
}

.ov-dock__steps li::before {
	content: "";
	flex: none;
	inline-size: 0.625rem;
	block-size: 0.625rem;
	border-radius: 2px;
	background: var(--ov-tone);
}

.ov-dock__steps li > :last-child {
	margin-inline-start: auto;
	color: var(--dock-muted);
	font-family: var(--font-mono, monospace);
	font-size: var(--text-s, 0.875rem);
	font-weight: 400;
}

.ov-dock__notes {
	padding-inline-start: 1.1em;
	color: var(--dock-muted);
	font-size: var(--text-s, 0.875rem);
}

/* Make smaller: in the corner of the line under the figures, a separate button from the bar. */
.ov-dock__shrink,
.ov-dock__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ov-dock__shrink {
	position: absolute;
	inset-inline-end: var(--space-s, 1rem);
	inset-block-end: var(--space-2xs, 0.35rem);
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border-radius: var(--radius-circle, 50%);
	background: var(--dock-rule);
}

.ov-dock svg {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

.ov-dock[data-open] .ov-dock__shrink,
.ov-dock__pill {
	display: none;
}

/* Small: the headline alone, a pill at the corner; a tap brings the bar back. */
.ov-dock[data-small] {
	inset-inline-start: auto;
	margin: 0;
	border-radius: var(--radius-circle, 999px);
}

.ov-dock[data-small] > :not(.ov-dock__pill) {
	display: none;
}

.ov-dock[data-small] .ov-dock__pill {
	display: inline-flex;
	gap: var(--space-2xs, 0.35rem);
	padding: var(--space-xs, 0.5rem) var(--space-s, 1rem);
	background: none;
	color: var(--dock-accent);
	font-weight: 800;
	white-space: nowrap;
}

.ov-dock__steps:empty,
.ov-dock__notes:empty,
.ov-dock__figures:empty {
	display: none;
}