/*
 * CalcolaPizza - printed recipe sheet. Loaded with media="print": it weighs nothing on screen.
 *
 * The sheet is a document designed for paper, not the screen printed: ink on white, no dark fills,
 * colour carries no information (it works the same in black and white and without printed backgrounds).
 * The red accent appears only as the rule under the title and the bar on the yeast row.
 *
 * Colours are custom properties, overridable like the screen ones:
 *
 *   --cp-print-bg          sheet background                      #FFFFFF
 *   --cp-print-ink         text and numbers                      #1F1F1F
 *   --cp-print-muted       secondary text                        #5A5349
 *   --cp-print-faint       labels, footer                        #756C5F
 *   --cp-print-line        hairlines                             #D8CFBD
 *   --cp-print-line-light  schedule hairlines                    #EDE6D8
 *   --cp-print-write       lines to write on                     #DCD4C4
 *   --cp-print-box         tick box border                       #B3A891
 *   --cp-print-cut         cut line of the compact sheet         #C9BFAB
 *   --cp-print-accent      title rule and yeast bar only         #D6453D
 *   --cp-print-fill        totals box, only if backgrounds print  #F7F3EC
 */

@page {
	size: A4 portrait;
	margin: 0 !important; /* A theme's @page margin would shrink the sheet. */
}

/* While printing, only the sheet: the theme's page is hidden. !important only to beat the host theme. */
html.cp-printing,
html.cp-printing body {
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
}

html.cp-printing body > :not(.cp-print-root) {
	display: none !important;
}

html.cp-printing .cp-print-root {
	display: block;
	padding: 0;
	border-radius: 0;
	background: var(--cp-print-bg);
	container-type: normal;
}

.cp-print-root {
	--cp-print-bg: #fff;
	--cp-print-ink: #1f1f1f;
	--cp-print-muted: #5a5349;
	--cp-print-faint: #756c5f;
	--cp-print-line: #d8cfbd;
	--cp-print-line-light: #ede6d8;
	--cp-print-write: #dcd4c4;
	--cp-print-box: #b3a891;
	--cp-print-cut: #c9bfab;
	--cp-print-accent: #d6453d;
	--cp-print-fill: #f7f3ec;
}

/* Elements the screen reset does not cover: nothing inherited from the host theme. */
.cp-print-root :is(h1, header, footer, ol) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	list-style: none;
}

.cp-print-root .cp-print {
	color: var(--cp-print-ink);
	font-family: var(--cp-font);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

/* One A4 page. A hair under 297 mm, so rounding never spills a blank second page. */
.cp-print-root .cp-print-page {
	width: 210mm;
	height: 296.5mm;
	overflow: hidden;
	break-after: avoid;
	break-inside: avoid;
}

.cp-print-root .cp-print-full {
	display: flex;
	flex-direction: column;
	padding: 54px 56px 46px;
}

/* When a filter adds phases, the lines for notes give way first; everything else keeps its size. */
.cp-print-root .cp-print-full > * {
	flex-shrink: 0;
}

.cp-print-root .cp-print-full > .cp-print-notes {
	flex-shrink: 1;
	min-height: 0;
	overflow: hidden;
}

/* Typography */
.cp-print-root :is(.cp-print-title, .cp-print-num, .cp-print-grams, .cp-print-time, .cp-print-mark, .cp-print-other-grams) {
	font-family: var(--cp-font-display);
	font-weight: 700;
}

.cp-print-root .cp-print-title {
	font-size: 33px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

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

.cp-print-root .cp-print-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cp-print-faint);
	white-space: nowrap;
}

.cp-print-root .cp-print-faint {
	font-size: 11.5px;
	color: var(--cp-print-faint);
}

/* Header and rules */
.cp-print-root .cp-print-head {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.cp-print-root .cp-print-titles {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.cp-print-root .cp-print-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	padding-top: 3px;
	white-space: nowrap;
}

.cp-print-root .cp-print-mark {
	font-size: 14px;
}

.cp-print-root .cp-print-mark span {
	color: var(--cp-print-accent);
}

/* Zone for an add-on's logo: bounded, so a tall logo never pushes the sheet off its page. */
.cp-print-root .cp-print-zone {
	display: block;
	max-height: 64px;
	overflow: hidden;
}

.cp-print-root .cp-print-compact .cp-print-zone {
	max-height: 40px;
}

.cp-print-root .cp-print-zone:empty {
	display: none;
}

.cp-print-root .cp-print-zone :is(img, svg) {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 64px;
}

.cp-print-root .cp-print-compact .cp-print-zone :is(img, svg) {
	max-height: 40px;
}

.cp-print-root .cp-print-rule-ink {
	height: 0;
	margin-top: 14px;
	border-top: 2px solid var(--cp-print-ink);
}

.cp-print-root .cp-print-rule-accent {
	width: 92px;
	height: 0;
	margin-bottom: 20px;
	border-top: 2px solid var(--cp-print-accent);
}

/* Borders, not backgrounds: the sheet must work when the browser does not print backgrounds. */
.cp-print-root .cp-print-params {
	display: flex;
	border: 1px solid var(--cp-print-line);
	border-radius: 3px;
}

.cp-print-root .cp-print-params > div {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 14px;
}

.cp-print-root .cp-print-params > div + div {
	border-left: 1px solid var(--cp-print-line);
}

.cp-print-root .cp-print-params dd {
	font-size: 17px;
	white-space: nowrap;
}

/* Section heading: label, hairline, note */
.cp-print-root .cp-print-section {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 26px 0 8px;
}

.cp-print-root .cp-print-line {
	flex-grow: 1;
	align-self: center;
	border-top: 1px solid var(--cp-print-line);
}

.cp-print-root .cp-print-section .cp-print-faint {
	font-size: 10.5px;
	white-space: nowrap;
}

/* Ingredients */
.cp-print-root .cp-print-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--cp-print-line);
}

.cp-print-root .cp-print-row--yeast {
	margin-left: -14px;
	padding-left: 12px;
	border-left: 2px solid var(--cp-print-accent);
}

.cp-print-root .cp-print-box {
	align-self: center;
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	border: 1px solid var(--cp-print-box);
	border-radius: 2px;
}

.cp-print-root .cp-print-name {
	flex-grow: 1;
	font-size: 15px;
	font-weight: 600;
}

.cp-print-root .cp-print-pct {
	width: 62px;
	text-align: right;
	font-size: 12px;
	color: var(--cp-print-faint);
}

.cp-print-root .cp-print-grams {
	width: 96px;
	text-align: right;
	font-size: 25px;
	white-space: nowrap;
}

.cp-print-root .cp-print-other {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 9px 2px 0;
	font-size: 12.5px;
	color: var(--cp-print-muted);
}

.cp-print-root .cp-print-other > span:first-child {
	flex-grow: 1;
}

.cp-print-root .cp-print-stage strong {
	flex-shrink: 0;
	color: var(--cp-print-ink);
}

.cp-print-root .cp-print-other-grams {
	width: 96px;
	text-align: right;
	font-size: 14px;
	color: var(--cp-print-ink);
}

/* Totals: a hairline box, the light fill is only a bonus when backgrounds print. */
.cp-print-root .cp-print-totals {
	display: flex;
	gap: 28px;
	margin-top: 18px;
	padding: 13px 16px;
	border: 1px solid var(--cp-print-line);
	border-radius: 4px;
	background: var(--cp-print-fill);
}

.cp-print-root .cp-print-totals > div {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.cp-print-root .cp-print-totals .cp-print-totals-last {
	margin-left: auto;
}

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

.cp-print-root .cp-print-totals dd {
	font-size: 16px;
}

/* Schedule */
.cp-print-root .cp-print-section--schedule {
	margin-top: 28px;
}

.cp-print-root .cp-print-schedule li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 9px 2px;
	border-bottom: 1px solid var(--cp-print-line-light);
}

.cp-print-root .cp-print-time {
	width: 58px;
	flex-shrink: 0;
	font-size: 16px;
	white-space: nowrap;
}

.cp-print-root .cp-print-time small {
	display: block;
	vertical-align: baseline;
	line-height: 1.1;
	font-family: var(--cp-font);
	font-size: 9.5px;
	font-weight: 600;
	color: var(--cp-print-muted);
}

.cp-print-root .cp-print-phase {
	width: 128px;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
}

.cp-print-root .cp-print-detail {
	flex-grow: 1;
	font-size: 12.5px;
	color: var(--cp-print-muted);
}

.cp-print-root .cp-print-write {
	align-self: flex-end;
	flex-shrink: 0;
	width: 84px;
	margin-bottom: 3px;
	border-top: 1px solid var(--cp-print-write);
}

.cp-print-root .cp-print-hint {
	padding: 7px 2px 0 76px;
	font-size: 10.5px;
	color: var(--cp-print-faint);
}

/* Notes: four lines to write on */
.cp-print-root .cp-print-section--notes {
	margin: 24px 0 12px;
}

.cp-print-root .cp-print-notes {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cp-print-root .cp-print-notes span {
	display: block;
	border-top: 1px solid var(--cp-print-write);
}

/* Footer, anchored at the bottom */
.cp-print-root .cp-print-foot {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--cp-print-line);
	font-size: 10px;
	color: var(--cp-print-faint);
}

.cp-print-root .cp-print-foot span:first-child {
	flex-grow: 1;
}

/* Compact: two identical half sheets (210 x 148 mm) with a dashed cut line between them. */
.cp-print-root .cp-print-half {
	display: flex;
	flex-direction: column;
	height: 50%;
	padding: 40px 48px 34px;
	overflow: hidden;
}

.cp-print-root .cp-print-half + .cp-print-half {
	border-top: 1px dashed var(--cp-print-cut);
}

.cp-print-root .cp-print-head--inline {
	align-items: baseline;
	gap: 16px;
}

.cp-print-root .cp-print-compact .cp-print-title {
	font-size: 24px;
}

.cp-print-root .cp-print-compact .cp-print-subtitle {
	flex-grow: 1;
	font-size: 12.5px;
}

.cp-print-root .cp-print-compact .cp-print-mark {
	font-size: 12.5px;
	white-space: nowrap;
}

.cp-print-root .cp-print-compact .cp-print-faint {
	font-size: 11px;
	white-space: nowrap;
}

.cp-print-root .cp-print-compact .cp-print-rule-ink {
	margin-top: 10px;
}

.cp-print-root .cp-print-compact .cp-print-rule-accent {
	width: 72px;
	margin-bottom: 18px;
}

.cp-print-root .cp-print-columns {
	display: flex;
	gap: 36px;
	flex-grow: 1;
	min-height: 0;
}

.cp-print-root .cp-print-main {
	flex-grow: 1;
	min-width: 0;
}

.cp-print-root .cp-print-side {
	width: 232px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cp-print-root .cp-print-compact .cp-print-section {
	margin: 0 0 4px;
}

.cp-print-root .cp-print-compact .cp-print-section .cp-print-faint {
	font-size: 10px;
}

.cp-print-root .cp-print-compact .cp-print-row {
	gap: 12px;
	padding: 9px 2px;
}

.cp-print-root .cp-print-compact .cp-print-row--yeast {
	margin-left: -12px;
	padding-left: 10px;
}

.cp-print-root .cp-print-compact .cp-print-name {
	font-size: 14px;
}

.cp-print-root .cp-print-compact .cp-print-pct {
	width: 52px;
	font-size: 11.5px;
}

.cp-print-root .cp-print-compact .cp-print-grams {
	width: 86px;
	font-size: 22px;
}

.cp-print-root .cp-print-compact .cp-print-other {
	padding-top: 7px;
	font-size: 11.5px;
}

.cp-print-root .cp-print-compact .cp-print-other-grams {
	width: 86px;
	font-size: 13px;
}

.cp-print-root .cp-print-list > div {
	display: flex;
	align-items: baseline;
	padding: 7px 0;
	border-bottom: 1px solid var(--cp-print-line-light);
}

.cp-print-root .cp-print-list > div:last-child {
	border-bottom: 0;
}

.cp-print-root .cp-print-list dt {
	flex-grow: 1;
	font-size: 12.5px;
	color: var(--cp-print-muted);
}

.cp-print-root .cp-print-list dd {
	font-size: 15px;
	white-space: nowrap;
}

.cp-print-root .cp-print-totals--stacked {
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
	padding: 10px 12px;
}

.cp-print-root .cp-print-totals--stacked > div {
	justify-content: space-between;
}

.cp-print-root .cp-print-totals--stacked dt {
	font-size: 11.5px;
}

.cp-print-root .cp-print-totals--stacked dd {
	font-size: 14px;
}

.cp-print-root .cp-print-compact .cp-print-foot {
	margin-top: 14px;
	padding-top: 0;
	border-top: 0;
	font-size: 9.5px;
}

/*
 * Ctrl+P without the Print button: not the designed sheet, only a fallback so paper is not wasted.
 * The recipe panel in ink on white, without controls. The theme's page around it still prints.
 */
html:not(.cp-printing) .cp-root :is(.cp-presets, .cp-controls, .cp-actions, .cp-print-panel, .cp-dock) {
	display: none !important;
}

html:not(.cp-printing) .cp-root {
	/* Ink on white whatever the screen theme: a dark theme would print light text on paper. */
	--cp-ink: #1f1f1f;
	--cp-muted: #5a5349;
	--cp-line: #d8cfbd;
	--cp-accent-text: #b4372f;
	padding: 0;
	background: none;
}

html:not(.cp-printing) .cp-root .cp-layout {
	display: block;
}

html:not(.cp-printing) .cp-root .cp-result {
	--cp-panel: #fff;
	--cp-panel-row: #fff;
	--cp-panel-bar: #eee;
	--cp-panel-ink: #1f1f1f;
	--cp-panel-muted: #5a5349;
	--cp-panel-accent: #f0c9c5;
	position: static;
	border: 1px solid var(--cp-print-line, #d8cfbd);
}
