/*
 * CalcolaPizza - calculator styles.
 *
 * Everything lives under .cp-root, with its own reset: the calculator does not depend on the theme.
 * To adapt it to your site, override these custom properties, for example:
 *
 *   .cp-root { --cp-accent: #2f6fb0; --cp-accent-strong: #245a91; --cp-radius: 6px; }
 *
 *   --cp-ink            main text                              #1F1F1F
 *   --cp-muted          secondary text                         #5A5349
 *   --cp-bg             calculator background                  #F7F3EC
 *   --cp-surface        card background                        #FFFDF9
 *   --cp-field          input background                       #FFFFFF
 *   --cp-on-dark        text on accent fills (buttons)         #FFFFFF
 *   --cp-on-ink         text on ink fills (active choices)     #FFFFFF
 *   --cp-accent-text    accent-coloured text (notes, limits)   #B4372F
 *   --cp-panel-scheme   colour scheme of inputs in the panel   dark
 *   --cp-line           borders                                #E3DAC9
 *   --cp-track          slider track, segmented background     #EAE0CF
 *   --cp-accent         action and active state only           #D6453D
 *   --cp-accent-strong  accent under white text, accent text   #B4372F
 *   --cp-accent-soft    background of accented chips           #FBEDEB
 *   --cp-warn-ink       warning text                           #6B4F12
 *   --cp-warn-bg        warning background                     #FBF0D9
 *   --cp-soft           yeast dose box background              #FBF6EE
 *   --cp-soft-line      yeast dose box border                  #EADFCB
 *   --cp-dough          dough disc fill                        #F1E7D6
 *   --cp-dough-line     dough disc border                      #D9CBB3
 *   --cp-fast           "fast" rising band                     #E0B463
 *   --cp-slow           "slow" rising band                     #E7D9BE
 *   --cp-ok             "comfortable" rising band              #7C9A72
 *   --cp-ok-ink         text of the comfortable band           #3F5B38
 *   --cp-panel          recipe panel background                #1F1F1F
 *   --cp-panel-row      recipe row background                  #2B2A28
 *   --cp-panel-bar      recipe row proportional bar            #3C3A36
 *   --cp-panel-ink      recipe panel text                      #F7F3EC
 *   --cp-panel-muted    recipe panel secondary text            #B9B1A4
 *   --cp-panel-accent   bar behind the yeast row (text on it)  #B4372F
 *   --cp-radius         card corners                           16px
 *   --cp-radius-small   control corners                        12px
 *   --cp-space-1 … 4    spacing scale                          6 / 12 / 20 / 28px
 *   --cp-font           text                                   system stack
 *   --cp-font-display   large numbers and titles               Fraunces (bundled)
 */

@font-face {
	font-family: "CalcolaPizza Fraunces";
	src: url("../fonts/fraunces-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.cp-root {
	--cp-ink: #1f1f1f;
	--cp-muted: #5a5349;
	--cp-bg: #f7f3ec;
	--cp-surface: #fffdf9;
	--cp-field: #ffffff;
	--cp-on-dark: #ffffff;
	--cp-on-ink: #ffffff;
	--cp-accent-text: #b4372f;
	--cp-panel-scheme: dark;
	--cp-line: #e3dac9;
	--cp-track: #eae0cf;
	--cp-accent: #d6453d;
	--cp-accent-strong: #b4372f;
	--cp-accent-soft: #fbedeb;
	--cp-warn-ink: #6b4f12;
	--cp-warn-bg: #fbf0d9;
	--cp-soft: #fbf6ee;
	--cp-soft-line: #eadfcb;
	--cp-dough: #f1e7d6;
	--cp-dough-line: #d9cbb3;
	--cp-fast: #e0b463;
	--cp-slow: #e7d9be;
	--cp-ok: #7c9a72;
	--cp-ok-ink: #3f5b38;
	--cp-panel: #1f1f1f;
	--cp-panel-row: #2b2a28;
	--cp-panel-bar: #3c3a36;
	--cp-panel-ink: #f7f3ec;
	--cp-panel-muted: #b9b1a4;
	--cp-panel-accent: #b4372f;
	--cp-radius: 16px;
	--cp-radius-small: 12px;
	--cp-space-1: 6px;
	--cp-space-2: 12px;
	--cp-space-3: 20px;
	--cp-space-4: 28px;
	--cp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--cp-font-display: "CalcolaPizza Fraunces", Georgia, "Times New Roman", serif;

	container-type: inline-size;
	background: var(--cp-bg);
	color: var(--cp-ink);
	font: 400 15px/1.4 var(--cp-font);
	font-variant-numeric: tabular-nums;
	border-radius: var(--cp-radius);
	padding: var(--cp-space-3);
	text-align: left;
}

/* Internal reset: nothing inherited from the theme. */
.cp-root *,
.cp-root *::before,
.cp-root *::after {
	box-sizing: border-box;
}

.cp-root :is(form, section, div, p, h2, h3, ul, li, dl, dt, dd, fieldset, legend, label, span, strong, output, details, summary) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	list-style: none;
	box-shadow: none;
	min-width: 0;
}

.cp-root :is(input, button, select) {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	min-height: 0;
	line-height: normal;
}

.cp-root [hidden] {
	display: none !important;
}

.cp-root .cp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cp-root :is(input, button, select, a, .cp-seg label) {
	/* The anchored recipe bar must never cover the focused control. */
	scroll-margin-bottom: 96px;
}

.cp-root :focus-visible {
	outline: 3px solid var(--cp-ink);
	outline-offset: 2px;
}

/* Layout: one column, two from 760px of available width (container, not viewport). */
.cp-root .cp-layout {
	display: grid;
	gap: var(--cp-space-3);
}

.cp-root .cp-controls {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-3);
}

@container (min-width: 760px) {
	.cp-root .cp-layout {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
		align-items: start;
	}

	.cp-root .cp-result {
		position: sticky;
		top: var(--cp-space-3);
	}
}

.cp-root .cp-card {
	background: var(--cp-surface);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	padding: var(--cp-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-2);
}

.cp-root .cp-pair {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-3);
}

.cp-root .cp-pair > * {
	flex: 1 1 220px;
}

.cp-root .cp-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-root .cp-muted {
	color: var(--cp-muted);
	font-size: 14px;
}

.cp-root .cp-display {
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
}

.cp-root .cp-field {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-1);
}

.cp-root .cp-note {
	font-size: 13px;
	font-weight: 600;
	color: var(--cp-accent-text);
}

.cp-root .cp-note:empty {
	display: none;
}

/* Presets: a row of pill buttons, the active one inked (aria-pressed). */
.cp-root .cp-presets {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-1) var(--cp-space-2);
}

.cp-root .cp-preset {
	min-height: 44px;
	padding: 0 var(--cp-space-3);
	border: 1px solid var(--cp-line);
	border-radius: 99px;
	background: var(--cp-surface);
	color: var(--cp-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.cp-root .cp-preset:hover {
	border-color: var(--cp-accent);
}

.cp-root .cp-preset[aria-pressed="true"] {
	border-color: var(--cp-ink);
	background: var(--cp-ink);
	color: var(--cp-on-ink);
}

/* Stepper */
.cp-root .cp-stepper-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-2);
}

.cp-root .cp-stepper {
	display: inline-flex;
	align-items: stretch;
	background: var(--cp-field);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-small);
	overflow: hidden;
}

.cp-root .cp-field--error .cp-stepper {
	border: 2px solid var(--cp-accent);
}

.cp-root .cp-stepper input {
	width: 5.5em;
	height: 46px;
	padding: 0 var(--cp-space-1);
	border: 0;
	border-radius: 0;
	background: var(--cp-field);
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.cp-root .cp-stepper input::-webkit-inner-spin-button,
.cp-root .cp-stepper input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cp-root .cp-stepper input:focus-visible {
	outline-offset: -3px;
}

.cp-root .cp-step {
	display: none;
	width: 44px;
	min-height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--cp-field);
	color: var(--cp-ink);
	font-size: 20px;
	cursor: pointer;
}

.cp-root.cp-js .cp-step {
	display: block;
}

.cp-root .cp-step:hover {
	background: var(--cp-bg);
}

.cp-root .cp-step:focus-visible {
	outline-offset: -3px;
}

/* Ball row */
.cp-root .cp-balls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--cp-space-3) var(--cp-space-4);
}

.cp-root .cp-balls .cp-note {
	max-width: 14em;
}

.cp-root .cp-total {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--cp-space-1);
	padding-bottom: 6px;
}

.cp-root .cp-discs {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-1);
}

.cp-root .cp-discs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 56px;
}

.cp-root .cp-disc {
	width: var(--cp-disc, 40px);
	height: var(--cp-disc, 40px);
	border-radius: 50%;
	background: var(--cp-dough);
	border: 1.5px solid var(--cp-dough-line);
	transition: width 0.15s, height 0.15s;
}

.cp-root .cp-discs-more {
	font-weight: 700;
	color: var(--cp-muted);
}

/* Segmented */
.cp-root .cp-segmented {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-2);
}

.cp-root .cp-segmented legend.cp-label {
	float: left;
}

.cp-root .cp-seg {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--cp-track);
	border-radius: var(--cp-radius-small);
}

.cp-root .cp-seg label {
	position: relative;
	display: block;
}

.cp-root .cp-seg input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.cp-root .cp-seg span {
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 15px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cp-muted);
}

.cp-root .cp-seg input:checked + span {
	background: var(--cp-ink);
	color: var(--cp-on-ink);
}

.cp-root .cp-seg input:focus-visible + span {
	outline: 3px solid var(--cp-ink);
	outline-offset: 2px;
}

/* Scale (range) */
.cp-root .cp-scale-head {
	display: flex;
	align-items: baseline;
	gap: var(--cp-space-2);
}

.cp-root .cp-scale-head .cp-label {
	flex-grow: 1;
}

.cp-root .cp-scale-value {
	font-size: 17px;
	font-weight: 700;
}

.cp-root [data-cp-field="hydration"] .cp-scale-value {
	font-family: var(--cp-font-display);
	font-size: 26px;
}

.cp-root .cp-chip {
	flex-shrink: 0;
	white-space: nowrap;
	/* Fixed width: a longer band name must not push the label to a second line. */
	min-width: 7.5em;
	text-align: center;
	padding: 4px 10px;
	border-radius: 99px;
	font-size: 13px;
	font-weight: 700;
	background: var(--cp-track);
}

.cp-root .cp-chip[data-band="very_high"] {
	background: var(--cp-warn-bg);
	color: var(--cp-warn-ink);
}

.cp-root .cp-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.cp-root .cp-range::-webkit-slider-runnable-track {
	height: 10px;
	border-radius: 99px;
	background: var(--cp-track);
}

.cp-root .cp-range::-moz-range-track {
	height: 10px;
	border-radius: 99px;
	background: var(--cp-track);
}

.cp-root .cp-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	margin-top: -9px;
	border-radius: 50%;
	background: var(--cp-field);
	border: 3px solid var(--cp-accent-text);
	box-shadow: 0 1px 4px rgba(31, 31, 31, 0.28);
}

.cp-root .cp-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cp-field);
	border: 3px solid var(--cp-accent-text);
	box-shadow: 0 1px 4px rgba(31, 31, 31, 0.28);
}

.cp-root .cp-range:focus-visible {
	outline: none;
}

.cp-root .cp-range:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var(--cp-ink);
	outline-offset: 2px;
}

.cp-root .cp-range:focus-visible::-moz-range-thumb {
	outline: 3px solid var(--cp-ink);
	outline-offset: 2px;
}

/* Ticks and band names sit under the thumb centre: the thumb (28px) never leaves the track. */
.cp-root :is(.cp-ticks, .cp-band-names) {
	position: relative;
	height: 16px;
	margin: 0 14px;
	font-size: 12px;
	color: var(--cp-muted);
}

.cp-root :is(.cp-ticks, .cp-band-names) span {
	position: absolute;
	left: calc(var(--cp-at) * 100%);
	transform: translateX(-50%);
	white-space: nowrap;
}

.cp-root .cp-band-names {
	height: 32px;
}

/* Adjacent bands can be narrow (classic is 60-65): every other name goes on a second line. */
.cp-root .cp-band-names span:nth-child(even) {
	top: 16px;
}

.cp-root .cp-band-names span {
	transform: none;
	padding-left: 4px;
	border-left: 1px solid var(--cp-line);
}

.cp-root .cp-ticks span::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -6px;
	height: 4px;
	border-left: 1px solid var(--cp-muted);
}

/* Narrow containers: the current band is in the chip, the names and the crowded tick numbers go. */
@container (max-width: 520px) {
	.cp-root .cp-band-names {
		display: none;
	}

	.cp-root .cp-ticks .cp-tick-minor {
		color: transparent;
	}
}

/* Warnings: always in the layout, shown with visibility, so nothing moves when they appear. */
.cp-root .cp-warning {
	visibility: hidden;
	padding: 8px 12px;
	border-radius: var(--cp-radius-small);
	background: var(--cp-warn-bg);
	color: var(--cp-warn-ink);
	font-size: 13px;
	line-height: 1.4;
}

.cp-root .cp-warning[data-on] {
	visibility: visible;
}

.cp-root.cp-js [data-cp-sourdough][data-off] {
	display: none;
}

.cp-root .cp-sourdough {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-1);
}

/* Yeast dose and rising band */
.cp-root .cp-dose {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--cp-space-2) var(--cp-space-3);
	padding: var(--cp-space-2) var(--cp-space-3);
	background: var(--cp-soft);
	border: 1px solid var(--cp-soft-line);
	border-radius: var(--cp-radius-small);
}

.cp-root .cp-dose-value {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cp-root .cp-dose-warnings {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-1);
}

.cp-root .cp-rising {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-1);
}

/* Log scale of equivalent hours: limit | fast | comfortable | slow | limit. Red only on the limits. */
.cp-root .cp-rising-bar {
	position: relative;
	display: block;
	height: 12px;
	border-radius: 99px;
	background: linear-gradient(
		to right,
		var(--cp-accent) 0 var(--cp-r1),
		var(--cp-fast) var(--cp-r1) var(--cp-r2),
		var(--cp-ok) var(--cp-r2) var(--cp-r3),
		var(--cp-slow) var(--cp-r3) var(--cp-r4),
		var(--cp-accent) var(--cp-r4) 100%
	);
}

.cp-root .cp-rising-mark {
	position: absolute;
	top: 50%;
	left: var(--cp-at);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cp-field);
	border: 3px solid var(--cp-ink);
	transform: translate(-50%, -50%);
	transition: left 0.15s;
}

.cp-root .cp-rising-label {
	font-size: 13px;
	color: var(--cp-muted);
}

.cp-root .cp-rising-label strong {
	white-space: nowrap;
	font-weight: 700;
}

.cp-root .cp-rising-label strong[data-band="comfortable"] {
	color: var(--cp-ok-ink);
}

.cp-root .cp-rising-label strong[data-band="limit"] {
	color: var(--cp-accent-text);
}

.cp-root.cp-js .cp-submit {
	display: none;
}

.cp-root .cp-submit,
.cp-root .cp-button {
	min-height: 48px;
	padding: 0 var(--cp-space-3);
	border: 1px solid var(--cp-panel-muted);
	border-radius: var(--cp-radius-small);
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.cp-root .cp-submit,
.cp-root .cp-button--primary {
	border-color: var(--cp-accent-strong);
	background: var(--cp-accent-strong);
	color: var(--cp-on-dark);
	font-weight: 700;
}

.cp-root .cp-submit {
	align-self: flex-start;
}

/* Recipe panel */
.cp-root .cp-result {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-3);
	padding: var(--cp-space-4);
	border-radius: var(--cp-radius);
	background: var(--cp-panel);
	color: var(--cp-panel-ink);
}

.cp-root .cp-result .cp-muted,
.cp-root .cp-result .cp-label {
	color: var(--cp-panel-muted);
}

.cp-root .cp-result :focus-visible {
	outline-color: var(--cp-panel-ink);
}

.cp-root .cp-result-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cp-space-2);
}

.cp-root .cp-result-title {
	font-family: var(--cp-font-display);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.cp-root .cp-rows {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-2);
}

.cp-root .cp-row {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cp-panel-row);
}

.cp-root .cp-row::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--cp-bar);
	background: var(--cp-panel-bar);
	transition: width 0.15s;
}

.cp-root .cp-row > * {
	position: relative;
}

.cp-root .cp-row--accent::before {
	min-width: 3px;
	background: var(--cp-panel-accent);
}

.cp-root .cp-row-name {
	flex-grow: 1;
	font-weight: 600;
}

.cp-root .cp-row-grams {
	font-family: var(--cp-font-display);
	font-size: 23px;
	font-weight: 700;
}

.cp-root .cp-row-pct {
	width: 4.5em;
	text-align: right;
	font-size: 12px;
	color: var(--cp-panel-muted);
}

/* A field scoped to some methods: its fieldset adds no box of its own. */
.cp-root .cp-scope {
	display: contents;
}

.cp-root .cp-scope[hidden] {
	display: none;
}

/* Result in stages (a method such as a biga): one box per stage, under the totals of the rows. */
.cp-root .cp-stages {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-2);
}

.cp-root .cp-stages[hidden] {
	display: none;
}

.cp-root .cp-stage {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--cp-panel-row);
}

.cp-root .cp-equivalents {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--cp-panel-row);
	font-size: 14px;
}

.cp-root .cp-totals {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cp-root .cp-totals div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.cp-root .cp-totals dt {
	color: var(--cp-panel-muted);
	font-size: 14px;
}

.cp-root .cp-totals dd {
	font-weight: 700;
}

.cp-root .cp-actions {
	display: none;
	gap: 10px;
}

.cp-root.cp-js .cp-actions {
	display: flex;
}

.cp-root .cp-actions .cp-button {
	color: var(--cp-panel-ink);
}

.cp-root .cp-actions .cp-button--primary {
	flex-grow: 1;
	color: var(--cp-on-dark);
}

/* Narrow containers: the main grams stay anchored at the bottom of the screen while scrolling the form. */
.cp-root .cp-dock {
	position: sticky;
	bottom: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cp-space-1);
	margin: 0 calc(-1 * var(--cp-space-3)) calc(-1 * var(--cp-space-3));
	padding: var(--cp-space-2) var(--cp-space-3);
	background: var(--cp-panel);
	color: var(--cp-panel-ink);
	border-radius: 0 0 var(--cp-radius) var(--cp-radius);
}

.cp-root .cp-dock > span {
	display: flex;
	flex-direction: column;
}

.cp-root .cp-dock-name {
	font-size: 12px;
	color: var(--cp-panel-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cp-root .cp-dock-grams {
	font-family: var(--cp-font-display);
	font-size: 19px;
	font-weight: 700;
}

@container (min-width: 760px) {
	.cp-root .cp-dock {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-root *,
	.cp-root *::before,
	.cp-root *::after {
		transition: none !important;
	}
}

/* Opt-in credit line (Settings, off by default). */
.cp-root .cp-credit {
	/* Clear of the anchored bar, which bleeds below the form by --cp-space-3. */
	margin-top: calc(var(--cp-space-3) + var(--cp-space-2));
	font-size: 12px;
	color: var(--cp-muted);
	text-align: right;
}

.cp-root .cp-credit a {
	color: inherit;
	text-decoration: underline;
}

/* Print panel, under the Print button (a panel, never a modal). */
.cp-root .cp-print-panel {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-2);
	padding: var(--cp-space-2) 0 0;
	border-top: 1px solid var(--cp-panel-bar);
}

.cp-root .cp-print-option {
	display: flex;
	align-items: flex-start;
	gap: var(--cp-space-2);
	min-height: 44px;
	font-size: 14px;
	cursor: pointer;
}

.cp-root .cp-print-option input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--cp-accent-strong);
	flex-shrink: 0;
}

.cp-root .cp-print-option span {
	color: var(--cp-panel-muted);
}

.cp-root .cp-print-option strong {
	color: var(--cp-panel-ink);
	font-weight: 700;
}

.cp-root .cp-print-times {
	display: flex;
	gap: var(--cp-space-2);
}

.cp-root .cp-print-caption {
	margin: 0;
	color: var(--cp-panel-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cp-root .cp-print-times {
	align-items: flex-end;
}

.cp-root .cp-print-arrow {
	align-self: flex-end;
	padding-bottom: 12px;
	color: var(--cp-panel-muted);
	font-size: 18px;
}

.cp-root .cp-print-time {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cp-root .cp-print-day {
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--cp-panel-row);
	color: var(--cp-panel-muted);
	font-size: 12px;
	font-weight: 400;
}

.cp-root .cp-print-summary {
	margin: 0;
	min-height: 2.8em;
	color: var(--cp-panel-muted);
	font-size: 13px;
}

/* The field written last is the fixed point of the pair. */
.cp-root .cp-print-start.is-anchor,
.cp-root .cp-print-bake.is-anchor {
	border-color: var(--cp-accent);
	box-shadow: 0 0 0 1px var(--cp-accent);
}

.cp-root .cp-print-start,
.cp-root .cp-print-bake {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 var(--cp-space-2);
	border: 1px solid var(--cp-panel-muted);
	border-radius: var(--cp-radius-small);
	background: var(--cp-panel-row);
	color: var(--cp-panel-ink);
	color-scheme: var(--cp-panel-scheme);
	font-size: 16px;
}

/* Satellite tools ([pizza2calc_water], [pizza2calc_pan], [pizza2calc_blend]): the calculator's cards and panel. */
.cp-root .cp-tool-value {
	font-size: 44px;
	font-variant-numeric: tabular-nums;
}

.cp-root .cp-select {
	min-height: 48px;
	width: 100%;
	padding: 0 var(--cp-space-2);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-small);
	background: var(--cp-field);
	font-size: 16px;
}

.cp-root .cp-calibrate summary,
.cp-root .cp-sources summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.cp-root .cp-sources a {
	color: inherit;
	text-decoration: underline;
}

.cp-root .cp-calibrated {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-1);
}

.cp-root.cp-js .cp-no-js {
	display: none;
}

/* The printed sheet is added to the page only while printing, and never shows on screen. */
.cp-print-root {
	display: none;
}