/*
 * 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);
}

/* A note the tool puts in a step (`section`): the step's own fine print, across its fields. */
.ov-calc__fields > .ov-calc__note {
	grid-column: 1 / -1;
	margin: 0;
	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;
}

/* ...unless it decides which of them show (By weight | By people): it leads the step. */
.ov-calc__fields > .ov-calc__field[data-first],
.ov-calc__fields:has(.ov-calc__number) > .ov-calc__field[data-first] {
	order: -1;
	grid-column: 1 / -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. */
}

/* In a picker's list, three to a row: ACSS's 140px button minimum left room for two. */
.ov-calc__switch .ov-hub__chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ov-calc__switch .ov-hub__chips button {
	inline-size: 100%;
	min-inline-size: 0;
	padding-inline: var(--space-3xs, 0.25rem);
}

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

/* A sister site's page for the same food (Links::sister): one card, the site named on it. */
.ov-sister a {
	display: grid;
	gap: var(--space-3xs, 0.25rem);
	padding: var(--space-s, 1rem) 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(--ov-raised, var(--white, #fff));
	color: var(--text-dark, #111);
	text-decoration: none;
}

.ov-sister__site {
	font-size: var(--text-xs, 0.8rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-dark-muted, #555);
}

.ov-sister__title {
	font-size: var(--text-l, 1.15rem);
}

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

.ov-sister__go {
	font-weight: 600;
	color: var(--primary, #b0552a);
}

.ov-sister a:hover .ov-sister__title {
	color: var(--primary, #b0552a);
}

/* ------------------------------------------------- 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;
	/* ⚠️ A box that scrolls sideways clips up and down too: room inside it for the hover's lift
	   (2px up) and its shadow (about 24px down), given back by the margins so nothing moves. */
	padding-block: 6px 28px;
	margin-block: -6px -28px;
}

.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;
}

/* The line under a section title, on the home page as under a food page's card rows. */
.ov-page__links-lead {
	max-inline-size: 60ch;
	margin: var(--space-2xs, 0.35rem) 0 var(--space-m, 1.5rem);
	color: var(--text-dark-muted, #6b625a);
}

.ov-page__links-head + .ov-page__links-lead {
	margin-block-start: calc(var(--space-s, 1rem) * -0.5);
}

.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 {
	/* Dark mode turns the light shade dark, which barely shows: there the lifted primary. */
	border-color: light-dark(var(--primary-semi-light, #e4a578), var(--primary, #b0552a));
	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" */
}

/* A card without a picture on a site that asks for words (`initials: false`): its name leads, set
   in the heading face, and its line reads as the answer it is. */
.ov-card--text a {
	gap: var(--space-xs, 0.5rem);
	padding-block: var(--space-m, 1.5rem);
}

.ov-card--text .ov-card__name {
	font-family: var(--heading-font-family, inherit);
	font-size: var(--text-l, 1.25rem);
}

.ov-card--text .ov-card__line {
	font-size: var(--text-m, 1rem);
	color: var(--text-dark, #111);
}

@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. */
/* The label; the day and the time side by side, the time wide enough for its AM or PM; a date
   under them when the day is another; the plan; its calendar button, and Clear at the end. */
.ov-timer__plan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(9.5rem, auto);
	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-label,
.ov-timer__plan [data-timer-date],
.ov-timer__plan-says {
	grid-column: 1 / -1;
}

.ov-timer__plan [data-timer-on] {
	grid-row: 2;
	grid-column: 1;
}

.ov-timer__plan [data-timer-eat] {
	grid-row: 2;
	grid-column: 2;
	min-inline-size: 0;
}

.ov-timer__plan-clear {
	grid-row: 5;
	grid-column: 2;
	justify-self: end;
}

.ov-timer__plan [data-timer-date][hidden],
.ov-timer__ics[hidden] {
	display: none;
}

.ov-timer__ics {
	grid-row: 5;
	grid-column: 1;
	justify-self: start;
}

.ov-timer__plan-says {
	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;
}

/* On an occasion's menu while it is near (Occasions::strip): a line leading to its plan. */
.ov-occasion-strip {
	margin: 0;
}

.ov-occasion-strip a {
	--icon-size: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs, 0.35rem) var(--space-s, 1rem);
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--primary-ultra-light, #fdf1ec);
	color: var(--text-dark, #111);
	text-decoration: none;
}

.ov-occasion-strip svg {
	flex: none;
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
	color: var(--primary, #b0552a);
}

.ov-occasion-strip svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ov-occasion-strip strong {
	font-weight: 700;
}

.ov-occasion-strip span {
	color: var(--text-dark-muted, #555);
}

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

.ov-occasion-strip a:hover .ov-occasion-strip__go {
	text-decoration: underline;
}

/* The home page's band: a second occasion near, as a line under the first. */
.ov-occasion__next {
	margin: var(--space-xs, 0.5rem) 0 0;
	color: var(--text-dark-muted, #555);
	font-size: var(--text-s, 0.875rem);
}

/* A small button with an icon: the planner's, and Add to calendar. */
.ov-calc__extra-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
	list-style: none;
}

.ov-calc__extra-btn::-webkit-details-marker {
	display: none;
}

.ov-calc__extra-btn svg {
	inline-size: 1.1em;
	block-size: 1.1em;
}

.ov-calc__embed[open] {
	flex-basis: 100%;
	display: grid;
	gap: var(--space-xs, 0.5rem);
	padding: var(--space-s, 1rem);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--ov-raised, var(--white, #fff));
}

.ov-calc__embed[open] > summary {
	justify-self: start;
}

.ov-calc__embed p {
	margin: 0;
	font-size: var(--text-s, 0.875rem);
	color: var(--text-dark-muted, #555);
}

.ov-calc__embed-code {
	inline-size: 100%;
	padding: var(--space-xs, 0.5rem);
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius, 0.5rem);
	background: var(--base-ultra-light, #fdfbf7);
	color: var(--text-dark, #111);
	font-family: var(--font-mono, monospace);
	font-size: var(--text-xs, 0.75rem);
	resize: vertical;
}

.ov-calc__embed [data-embed-copy] {
	justify-self: start;
}

/* The page as another site's frame (Embed): the calculator alone, and its maker under it. */
body.ov-embed {
	margin: 0;
	padding: var(--space-s, 1rem);
	background: var(--base-ultra-light, #fdfbf7);
}

.ov-embed__by {
	margin: var(--space-s, 1rem) 0 0;
	text-align: end;
	font-size: var(--text-s, 0.875rem);
}

.ov-embed__by a {
	color: var(--primary, #b0552a);
	font-weight: 700;
	text-decoration: none;
}

/* A recipe card on paper: the answer, what was chosen, the plan and the link; not the form. */
.ov-calc__sheet dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.3rem 1.5rem;
	margin: 0;
}

.ov-calc__sheet dl div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-block-end: 1px solid #ccc;
}

.ov-calc__sheet dt {
	color: #555;
}

.ov-calc__sheet dd {
	margin: 0;
	font-weight: 600;
	text-align: end;
}

.ov-calc__sheet-plan {
	margin: 1rem 0 0;
	font-weight: 700;
}

.ov-calc__sheet-link {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: #555;
	word-break: break-all;
}

/* On paper: the answer, its steps and figures, what was chosen, the notes and the link, on one
   page. Not the form, the timer (a clock on paper only shows the minute it was printed) or the
   page around it. The light palette is the script's (beforeprint), so ink is dark on white. */
@page {
	margin: 1.4cm 1.6cm;
}

@media print {
	#wpadminbar,
	#brx-header,
	#brx-footer,
	.ov-site-header,
	.ov-site-footer,
	.ov-dock,
	.ov-calc__inputs,
	.ov-calc__share,
	.ov-calc__card,
	.ov-calc__timer,
	.ov-page,
	.ov-plan,
	.ov-occasion-strip,
	.ov-calc::before {
		display: none !important;
	}

	html {
		color-scheme: light;
	}

	body {
		background: #fff !important;
		color: #000;
		font-size: 10.5pt;
	}

	.ov-calc {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ov-calc__answer {
		position: static !important;
		display: grid !important;
		gap: 0.45cm !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		box-shadow: none !important;
		break-inside: avoid;
	}

	.ov-calc__title {
		font-size: 20pt !important;
		margin: 0 !important;
	}

	.ov-calc__sentence {
		margin: 0 !important;
		font-size: 12pt !important;
	}

	.ov-calc__ring {
		inline-size: 6cm !important;
	}

	/* The ticket keeps its dashed edge, the one ornament worth the ink. */
	[data-layout="ticket"] .ov-calc__answer {
		padding: 0.7cm 0.8cm !important;
		border: 1.5pt dashed var(--secondary, #b98b4e) !important;
	}

	[data-layout="ticket"] .ov-ticket__steps {
		display: block !important;
	}

	.ov-ticket__main .ov-calc__value {
		font-size: 30pt !important;
	}

	.ov-ticket__stamp .ov-calc__value {
		font-size: 22pt !important;
	}

	[data-layout="ticket"] .ov-calc__results {
		grid-template-columns: none !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0 0.4cm !important;
	}

	[data-layout="ticket"] .ov-calc__results .ov-calc__value {
		font-size: 13pt !important;
	}

	.ov-calc__notes {
		gap: 0.15cm !important;
		font-size: 9pt !important;
		color: #333 !important;
	}

	/* The sheet's parts join the answer's own column: what was chosen under the figures, the
	   notes after, the link to open it again last. */
	.ov-calc__sheet[hidden] {
		display: contents !important;
	}

	.ov-calc__notes {
		order: 1;
	}

	.ov-calc__sheet-link {
		order: 2;
		margin: 0 !important;
	}

	.ov-calc__sheet-plan {
		margin: 0 !important;
	}

	.ov-calc__sheet dl {
		grid-template-columns: repeat(auto-fit, minmax(4.5cm, 1fr));
	}
}

/* The meal planner on an occasion's page (Planner): the choices, then the plan. */
.ov-plan {
	container-type: inline-size;
	display: grid;
	gap: var(--space-m, 1.5rem);
	margin-block: var(--space-xl, 3rem) 0;
	padding: var(--space-l, 2rem);
	border-radius: var(--radius-l, 1.25rem);
	background: var(--base, #f4ede3);
}

.ov-plan h2 {
	margin: 0;
}

.ov-plan__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-m, 1.5rem);
	align-items: end;
}

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

.ov-plan__when {
	padding: 0.5em 0.6em;
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius, 0.5rem);
	background: var(--ov-raised, var(--white, #fff));
	color: var(--text-dark, #111);
	font: inherit;
}

.ov-plan__dishes {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem);
	margin: 0;
	padding: 0;
	border: 0;
}

.ov-plan__dishes legend {
	margin-block-end: var(--space-xs, 0.5rem);
	padding: 0;
}

.ov-plan__dish {
	position: relative;
	cursor: pointer;
}

.ov-plan__dish input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ov-plan__dish span {
	display: inline-block;
	padding: 0.45em 0.95em;
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-circle, 999px);
	background: var(--ov-raised, var(--white, #fff));
	color: var(--text-dark, #111);
}

.ov-plan__dish input:checked + span {
	border-color: var(--primary, #b0552a);
	background: var(--primary, #b0552a);
	color: var(--white, #fff);
}

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

.ov-plan__hint {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--text-s, 0.875rem);
	color: var(--text-dark-muted, #555);
}

.ov-plan__start {
	margin: 0 0 var(--space-s, 1rem);
	font-size: var(--text-l, 1.25rem);
	color: var(--text-dark-muted, #555);
}

.ov-plan__start strong {
	font-size: var(--h3, 1.75rem);
	color: var(--primary, #b0552a);
}

/* The chart: a row a basket on a clock scale, gridlines at each time, the meal a green line;
   the preheat a light block, the main in the primary, the sides grey, the rest a softer band. */
.ov-plan__chart {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	grid-template-rows: repeat(var(--lanes, 1), 2.75rem) auto;
	row-gap: var(--space-xs, 0.5rem);
	margin-block-end: var(--space-m, 1.5rem);
}

.ov-plan__grid {
	position: relative;
	grid-column: 2;
	grid-row: 1 / -2; /* the baskets' rows, not the scale under them: the lines stop above the times */
}

.ov-plan__line {
	position: absolute;
	inset-block: 0;
	inline-size: 1px;
	background: var(--base-semi-light, #d8ccb9);
}

.ov-plan__line--eat {
	inline-size: 2px;
	margin-inline-start: -2px;
	background: var(--success, #2f7d4f);
}

.ov-plan__line--now {
	inline-size: 2px;
	background: var(--primary, #b0552a);
	transition: left 1s linear;
}

.ov-plan__station {
	grid-column: 1;
	align-self: center;
	font-size: var(--text-s, 0.875rem);
	color: var(--text-dark-muted, #555);
}

.ov-plan__track {
	position: relative;
	grid-column: 2;
}

.ov-plan__track > span {
	position: absolute;
	inset-block: 0;
	border-radius: var(--radius-m, 0.75rem);
}

.ov-plan__warm {
	background: var(--base-light, #e8dfd0);
}

.ov-plan__rest {
	inset-block: 28% !important;
	border-radius: 0 !important;
	background: var(--primary-light, #f3d9c9);
}

.ov-plan__bar {
	overflow: hidden;
	padding-inline: 0.6em;
	background: var(--neutral-semi-dark, #7d746a);
	color: var(--base-ultra-light, #fdfbf7);
	font-size: var(--text-s, 0.875rem);
	line-height: 2.75rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: 0 0 0 1.5px var(--base, #f4ede3);
}

.ov-plan__bar[data-role="main"] {
	background: var(--primary, #b0552a);
	color: var(--white, #fff);
}

.ov-plan__scale {
	position: relative;
	grid-column: 2;
	block-size: 1.25rem;
}

.ov-plan__tick {
	position: absolute;
	translate: -50% 0;
	font-family: var(--font-mono, monospace);
	font-size: var(--text-xs, 0.75rem);
	color: var(--text-dark-muted, #555);
	white-space: nowrap;
}

.ov-plan__tick--eat {
	translate: -100% 0;
	color: var(--success, #2f7d4f);
	font-weight: 700;
}

/* While the timer runs: what to do now, and what is next, in how long. */
.ov-plan__live {
	display: grid;
	gap: var(--space-2xs, 0.35rem);
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--ov-raised, var(--white, #fff));
}

.ov-plan__live p {
	margin: 0;
}

.ov-plan__live span {
	margin-inline-end: 0.4em;
	font-family: var(--font-mono, monospace);
	font-size: var(--text-xs, 0.75rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-dark-muted, #555);
}

.ov-plan__now b {
	font-size: var(--text-l, 1.25rem);
}

.ov-plan__next time {
	margin-inline-start: 0.4em;
	font-family: var(--font-mono, monospace);
	font-weight: 700;
	color: var(--primary, #b0552a);
}

.ov-plan__steps li.is-done {
	opacity: 0.45;
}

.ov-plan__steps li.is-now {
	background: var(--primary-ultra-light, #fdf1ec);
}

.ov-plan__steps {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-plan__steps li {
	display: grid;
	grid-template-columns: 5.5rem 4.5rem minmax(0, 1fr);
	gap: var(--space-xs, 0.5rem);
	padding-block: var(--space-2xs, 0.35rem);
	border-block-end: 1px solid var(--base-light, #e8dfd0);
}

.ov-plan__steps time {
	font-family: var(--font-mono, monospace);
	font-weight: 700;
	white-space: nowrap;
}

.ov-plan__where {
	font-size: var(--text-s, 0.875rem);
	color: var(--text-dark-muted, #555);
}

.ov-plan__steps li[data-kind="hold"] > :last-child {
	color: var(--text-dark-muted, #555);
}

.ov-plan__steps li[data-kind="eat"] {
	border-block-end: 0;
	color: var(--primary, #b0552a);
	font-weight: 700;
}

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

/* Narrow: the time, and the step with its basket under it. */
@container (max-width: 30rem) {
	.ov-plan__steps li {
		grid-template-columns: 5.25rem minmax(0, 1fr);
		row-gap: 0;
	}

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

	.ov-plan__steps li > :last-child {
		grid-column: 2;
		grid-row: 1;
	}

	.ov-plan__where {
		grid-column: 2;
		grid-row: 2;
		font-size: var(--text-xs, 0.75rem);
	}

	.ov-plan__chart {
		grid-template-columns: 4rem minmax(0, 1fr);
	}
}

@media (max-width: 40em) {
	.ov-plan {
		padding: var(--space-m, 1.5rem) var(--space-s, 1rem);
	}
}

@media print {
	.ov-plan {
		display: none !important;
	}

	body.ov-print-plan .ov-calc,
	body.ov-print-plan .ov-plan__form,
	body.ov-print-plan .ov-plan__tools {
		display: none !important;
	}

	body.ov-print-plan .ov-plan {
		display: grid !important;
		padding: 0;
		background: none;
	}
}

/* A picker's list (Render: every food, every model): its options read as the hubs' links do,
   the one chosen marked; the choice spans the step, as the food pages' switch does. */
.ov-calc__fields > .ov-calc__field--pick {
	grid-column: 1 / -1;
}

.ov-calc-links button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary, #b0552a);
	font: inherit;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.ov-calc-links button:hover {
	text-decoration: underline;
}

.ov-calc-links button[aria-pressed="true"] {
	color: var(--text-dark, #111);
}

.ov-calc-links button[aria-pressed="true"]::after {
	content: "  \2713";
	color: var(--primary, #b0552a);
}

.ov-calc__switch-action {
	white-space: nowrap;
}

/* A picked row names its group too ("Chicken thighs · Bone-in, skin-on"): a size down. */
.ov-calc__field--pick .ov-calc__switch-current {
	font-size: var(--text-l, 1.25rem);
	line-height: 1.25;
}

.ov-calc__field--pick .ov-calc__switch-current small {
	display: block;
	font-size: var(--text-s, 0.875rem);
	font-weight: 500;
	color: var(--text-dark-muted, #555);
}

/* Share the card, the link, Print and Embed on one line, each as wide as its words. Where
   four do not fit, Print and Embed keep their icons and hide their words from sight only. */
.ov-calc__share {
	container-type: inline-size;
	align-items: flex-start;
	gap: 0.5rem;
}

.ov-calc__share-btn,
.ov-calc__embed {
	flex: 1 1 auto;
}

/* Inside the row, so it outweighs ACSS's button however the sheets are ordered (Embed loads
   ACSS last): ACSS gives a button a width of its own. */
.ov-calc__share .ov-calc__share-btn {
	position: relative;
	min-inline-size: 0;
	padding-inline: 0.75em;
	list-style: none;
}

.ov-calc__share-btn::-webkit-details-marker {
	display: none;
}

.ov-calc__embed:not([open]) {
	display: flex; /* its button fills it, as wide as the others */
}

@container (inline-size < 27rem) {
	.ov-calc__share-btn[data-print],
	.ov-calc__embed:not([open]) {
		flex: none;
	}

	.ov-calc__share-btn[data-print] span,
	.ov-calc__embed:not([open]) summary span {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

.ov-plan__steps b {
	font-weight: 700;
}

/* The rail: a thin line the length of each basket's row, under the pills, so the gaps between
   them read as time on the same line. The preheat sits on it, a shade stronger. */
.ov-plan__track::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block: 40%;
	border-radius: 999px;
	background: light-dark(var(--base-semi-light, #d8ccb9), var(--base-light, #4a443c));
}

.ov-plan__track > .ov-plan__warm {
	inset-block: 34%;
	background: light-dark(var(--neutral-semi-light, #b3aca4), var(--base-semi-light, #6e675e));
}

/*
 * White words on every pill, light or dark. ACSS turns --white black in dark mode and --black
 * white, so light-dark() picks the one that is white in each; the pills take a deeper shade
 * in dark mode (the semi-light shades, which the dark palette mirrors) so the white reads.
 */
.ov-plan__bar {
	background: light-dark(var(--neutral-semi-dark, #7d746a), var(--neutral-semi-light, #6b645c));
	color: light-dark(var(--white, #fff), var(--black, #fff));
}

.ov-plan__bar[data-role="main"] {
	background: light-dark(var(--primary, #b0552a), var(--primary-semi-light, #8a4a26));
	color: light-dark(var(--white, #fff), var(--black, #fff));
}

/*
 * A narrow card (four across a main column, about 140px) sizes its words to itself, as a
 * phone's three across do: "350°F, 40 to 50 min" on one line, the name in two at most.
 */
.ov-card a {
	container-type: inline-size;
}

@container (max-width: 11rem) {
	.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: 0.75rem;
		line-height: 1.4;
	}
}

/* The lines reach a little past the baskets' rows, so they show above and below the pills. */
.ov-plan__line {
	inset-block: -0.5rem;
}

/* The start's time sits from the left end, not across it. */
.ov-plan__tick--start {
	translate: 0 0;
}

/* ------------------------------------------------------------ the ticket layout */

/*
 * A site's `layout: ticket` (pulltemp, D16): the answer as a butcher's ticket instead of the
 * ring. The headline time large, the other headline figures as stamps beside it, the steps as
 * a numbered list with how long each takes, the rest of the figures as a line of facts. On a
 * wide screen the inputs come first and the ticket stands beside them. Tokens only, so each
 * site's palette carries it: the ticket is the lightest base shade, its edge the secondary.
 */
[data-layout="ticket"] .ov-calc__answer {
	background: var(--base-ultra-light, #fffcf6);
	box-shadow: none;
	clip-path: none;
	border: 2px dashed var(--secondary, #b98b4e);
	border-radius: var(--radius-s, 6px);
	padding: var(--space-m, 1.5rem);
	margin-block: var(--space-m, 1.5rem);
}

.ov-ticket {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s, 1rem);
}

.ov-ticket__main {
	flex: 1 1 12rem;
	min-inline-size: 0;
}

.ov-ticket__main .ov-calc__value,
.ov-ticket__stamp .ov-calc__value {
	font-family: var(--heading-font-family, inherit);
	font-variant-numeric: normal; /* even-width digits gape in a slab */
	letter-spacing: 0;
	font-weight: 700;
	line-height: 1;
}

.ov-ticket__main .ov-calc__value {
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}

.ov-ticket__main [data-suffix] {
	font-size: 0.55em;
	color: var(--text-dark-muted, #5e4d42);
}

/* The stamp: a bordered block, a little askew, in the site's primary. */
.ov-ticket__stamp {
	flex: none;
	padding: var(--space-xs, 0.6rem) var(--space-s, 1rem);
	border: 3px solid var(--primary, #8e2b25);
	border-radius: var(--radius-s, 6px);
	color: var(--primary, #8e2b25);
	text-align: center;
	rotate: -3deg;
}

.ov-ticket__stamp .ov-calc__label {
	color: inherit;
}

.ov-ticket__stamp .ov-calc__value {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	color: inherit;
}

.ov-ticket__main .ov-calc__result,
.ov-ticket__stamp .ov-calc__result {
	display: grid;
	gap: var(--space-3xs, 0.2rem);
}

/* The steps: numbered rows, the time each takes at the right. */
.ov-ticket__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.ov-ticket__steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr) auto;
	gap: var(--space-xs, 0.5rem);
	align-items: baseline;
	padding-block: var(--space-2xs, 0.4rem);
	border-block-start: 1px solid var(--base-semi-light, #d6c6ac);
}

.ov-ticket__steps li::before {
	content: counter(step);
	inline-size: auto;
	block-size: auto;
	background: none;
	font-family: var(--heading-font-family, inherit);
	font-weight: 700;
	color: var(--primary, #8e2b25);
}

.ov-ticket__steps li > :last-child {
	margin-inline-start: 0;
	font-size: inherit;
	font-family: var(--heading-font-family, inherit);
	font-weight: 700;
	color: var(--text-dark, #2a1d17);
}

.ov-ticket__steps li.is-now {
	background: var(--base-light, #f8f2e7);
}

/* The timer under the steps: no step number (it is not one of the form's), full width. Once it
   shows, its rows (with their play buttons) are the schedule, so the plain list steps aside. */
[data-layout="ticket"] .ov-calc__answer .ov-calc__timer {
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--space-s, 1rem) 0;
	border-block-end: 0;
}

[data-layout="ticket"] .ov-calc__answer .ov-calc__timer::before {
	content: none;
}

[data-layout="ticket"] .ov-calc__answer .ov-calc__timer > .ov-calc__fold {
	grid-column: 1;
}

[data-layout="ticket"] .ov-calc__answer .ov-calc__timer .ov-calc__step-title {
	grid-column: 1;
	font-size: var(--h4, 1.4rem);
}

[data-layout="ticket"] .ov-ticket__steps:has(~ .ov-calc__timer:not([hidden])) {
	display: none;
}

/* The other figures as a line of facts, not cards, as many to a row as fit. */
[data-layout="ticket"] .ov-calc__results {
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

[data-layout="ticket"] .ov-calc__results .ov-calc__result {
	padding: var(--space-xs, 0.5rem) 0;
	border-radius: 0;
	background: none;
	border-block-start: 1px solid var(--base-semi-light, #d6c6ac);
}

@media (min-width: 64em) {
	[data-layout="ticket"].ov-calc {
		grid-template-columns: minmax(0, 5fr) minmax(22rem, 6fr);
	}

	[data-layout="ticket"].ov-calc::before {
		content: none;
	}

	/* The inputs stay in view beside the taller ticket (stickInputs() in calc.js sets the offset). */
	[data-layout="ticket"] .ov-calc__inputs {
		grid-column: 1;
		position: sticky;
		inset-block-start: var(--ov-stick, var(--space-m, 1.5rem));
		align-self: start;
	}

	/* Not sticky: the ticket carries the plan and the timer, often taller than the screen. */
	[data-layout="ticket"] .ov-calc__answer {
		grid-column: 2;
		position: static;
		padding-inline-end: var(--space-m, 1.5rem);
		background: var(--base-ultra-light, #fffcf6);
	}
}

/* On a phone the ticket gives its width to the timer: the timer's box runs to the ticket's
   edge, and the Eat at plan stacks, or the day picker and the step rows are squeezed. */
@media (max-width: 47.99em) {
	[data-layout="ticket"] .ov-calc__answer {
		padding: var(--space-s, 1rem);
	}

	[data-layout="ticket"] .ov-calc__answer .ov-timer {
		margin-inline: calc(var(--space-s, 1rem) * -1);
		padding: var(--space-s, 1rem);
		border-radius: 0;
	}

	[data-layout="ticket"] .ov-calc__answer .ov-timer__plan {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The chart (Links::chart): a table per category, the cut's name wide enough for two lines. */
.ov-chart {
	display: grid;
	gap: var(--space-l, 2rem);
	margin-block: var(--space-l, 2rem);
}

.ov-chart__section {
	display: grid;
	gap: var(--space-s, 1rem);
}

.ov-chart__section h2 {
	margin: 0;
}

/* Longer words than a food page's table: the pull text wraps, the short figures stay whole, and
   the padding tightens so five columns fit the page's width. */
.ov-chart .ov-table {
	margin-block: 0;
}

.ov-chart .ov-calc-table th,
.ov-chart .ov-calc-table td {
	padding: var(--space-xs, 0.6rem) var(--space-s, 1rem);
}

.ov-chart .ov-calc-table tbody th {
	inline-size: 12rem;
}

.ov-chart .ov-calc-table td:nth-child(2) {
	white-space: normal;
}

/* On a phone each cut is a block, not a row of five squeezed columns: its name, the pull across
   the width, then wrap, rest and safe side by side, each with its column name (data-label). */
@media (max-width: 40em) {
	.ov-chart thead {
		display: none;
	}

	.ov-chart .ov-calc-table tbody tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-2xs, 0.35rem) var(--space-s, 1rem);
		padding: var(--space-s, 1rem);
		border-block-end: var(--border, 1px solid #ddd);
	}

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

	.ov-chart .ov-calc-table tbody th,
	.ov-chart .ov-calc-table td {
		inline-size: auto;
		padding: 0;
		border: 0;
	}

	.ov-chart .ov-calc-table tbody th,
	.ov-chart .ov-calc-table td:nth-child(2) {
		grid-column: 1 / -1;
	}

	.ov-chart .ov-calc-table td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--ov-mono, ui-monospace, monospace);
		font-size: var(--text-xs, 0.75rem);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--primary, #b0552a);
	}
}