/*
Visual identity of the recipe book.

The reference is a kitchen notebook rather than a magazine: warm paper, brown
ink, a serif for the names of the dishes and a small spaced caps line for
everything that is merely a fact. One accent, a burnt terracotta, and it is
spent on two things only - the quantities, which are what the page is read for,
and the single action that adds a recipe.

The type is a little larger than an application of this kind usually sets,
because it is read at arm's length with wet hands and a pan going.
*/

:root
	{
	--paper:		#F2EDE4;
	--card:			#FBF8F2;
	--ink:			#2A1F16;
	--ink-soft:		#7A6A5A;
	--rule:			#DCD3C4;
	--accent:		#A8451F;
	--accent-soft:		#F4E3D9;
	--danger:		#8E2C21;

	--font-body:		-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-display:		ui-serif, "New York", Georgia, "Times New Roman", serif;
	--font-mono:		ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--bar-height:		56px;
	--tab-height:		58px;
	--gutter:		20px;
	}

*
	{
	box-sizing: border-box;
	}

/*
The hidden attribute wins over every display rule in this file.
The browser hides such an element through its own [hidden] rule, which any rule
written here beats: .sheet below sets display flex, so without this the sheet
would stand on screen from the first paint, grey the application out, and its
Close button would appear to do nothing because turning the attribute back on
changed nothing.
*/
[hidden]
	{
	display: none !important;
	}

/*
What is drawn only on paper, and is therefore hidden on screen.
Its opposite, .no-print, lives in the print block at the foot of this file.
*/
.print-only
	{
	display: none;
	}

html, body
	{
	margin:		0;
	padding:	0;
	}

body
	{
	background:		var(--paper);
	color:			var(--ink);
	font-family:		var(--font-body);
	font-size:		17px;
	line-height:		1.5;
	-webkit-font-smoothing:	antialiased;
	overscroll-behavior-y:	none;
	}

body.is-sheet-open
	{
	overflow: hidden;
	}

/*
The bar at the top holds the wordmark and one line saying where the data stands.
*/
.app-bar
	{
	position:		fixed;
	inset:			0 0 auto 0;
	z-index:		30;
	display:		flex;
	align-items:		baseline;
	justify-content:	space-between;
	gap:			12px;
	height:			calc(var(--bar-height) + env(safe-area-inset-top));
	padding:		env(safe-area-inset-top) var(--gutter) 0;
	background:		var(--paper);
	border-bottom:		1px solid var(--rule);
	}

.wordmark
	{
	margin:			0;
	font-family:		var(--font-display);
	font-size:		22px;
	letter-spacing:		-0.01em;
	}

.wordmark span
	{
	color: var(--accent);
	}

/*
The build, sitting beside the wordmark.

It takes the look of the status line at the other end of the bar rather than the
title it stands next to, because it is the same kind of small print and reading
it as part of the name would be wrong. The font has to be named: everything in
the wordmark would otherwise inherit the display serif. The selector is nested
so that it outweighs the rule above, which colours every span with the accent.
*/
.wordmark .app-version
	{
	margin-left:	7px;
	font-family:	var(--font-body);
	font-size:	11px;
	text-transform:	uppercase;
	letter-spacing:	0.11em;
	color:		var(--ink-soft);
	}

.app-state
	{
	display:		flex;
	flex-direction:		column;
	align-items:		flex-end;
	gap:			2px;
	}

.app-status
	{
	margin:			0;
	font-size:		11px;
	text-transform:		uppercase;
	letter-spacing:		0.1em;
	color:			var(--ink-soft);
	}

/*
The line saying whether the application can be started without the network.
It is shown only while the answer is no, so a working installation says nothing.
*/
.app-offline
	{
	margin:			0;
	font-size:		10px;
	text-transform:		uppercase;
	letter-spacing:		0.09em;
	color:			var(--accent);
	}

/*
The scrolling area holding whichever screen is current.
*/
.view
	{
	padding:	calc(var(--bar-height) + env(safe-area-inset-top) + 18px) var(--gutter)
			calc(var(--tab-height) + env(safe-area-inset-bottom) + 120px);
	max-width:	760px;
	margin:		0 auto;
	}

.eyebrow
	{
	margin:			0;
	font-size:		11px;
	font-weight:		600;
	text-transform:		uppercase;
	letter-spacing:		0.12em;
	color:			var(--ink-soft);
	}

.ref
	{
	margin:			0 0 6px;
	font-family:		var(--font-mono);
	font-size:		11px;
	letter-spacing:		0.04em;
	color:			var(--accent);
	}

.mono
	{
	font-family: var(--font-mono);
	}

.empty
	{
	color:		var(--ink-soft);
	font-size:	15px;
	padding:	18px 0;
	}

/*
The empty book, which is an invitation rather than an apology.
*/
.empty-state
	{
	border:		1px solid var(--rule);
	border-left:	3px solid var(--accent);
	background:	var(--card);
	padding:	22px 18px;
	}

.empty-lead
	{
	margin:		10px 0 0;
	font-family:	var(--font-display);
	font-size:	19px;
	line-height:	1.4;
	}

/*
The search field and the category chips above the list.
*/
.list-tools
	{
	margin-bottom: 16px;
	}

.chips
	{
	display:		flex;
	flex-wrap:		wrap;
	gap:			6px;
	margin-top:		10px;
	}

.chip
	{
	appearance:	none;
	padding:	6px 11px;
	font-family:	inherit;
	font-size:	12px;
	font-weight:	600;
	letter-spacing:	0.03em;
	color:		var(--ink-soft);
	background:	var(--card);
	border:		1px solid var(--rule);
	border-radius:	999px;
	cursor:		pointer;
	}

.chip.is-current
	{
	color:		var(--paper);
	background:	var(--ink);
	border-color:	var(--ink);
	}

/*
One recipe in the list: the words on the left, a picture on the right when
there is one. The picture is fixed and the text flexes, so a row without a
picture is not a different shape from the one above it, only a wider one.
*/
.recipe-card
	{
	display:	flex;
	align-items:	stretch;
	gap:		12px;
	background:	var(--card);
	border:		1px solid var(--rule);
	padding:	14px 14px 16px;
	margin:		0 0 10px;
	cursor:		pointer;
	}

.recipe-card:active
	{
	background: var(--accent-soft);
	}

.recipe-card-text
	{
	flex:		1;
	min-width:	0;
	}

.recipe-card h3
	{
	margin:		0 0 5px;
	font-family:	var(--font-display);
	font-size:	21px;
	font-weight:	500;
	line-height:	1.2;
	}

.recipe-card-thumb
	{
	width:		78px;
	height:		78px;
	object-fit:	cover;
	flex:		0 0 auto;
	align-self:	center;
	border:		1px solid var(--rule);
	}

.recipe-summary
	{
	margin:		8px 0 0;
	font-size:	15px;
	color:		var(--ink-soft);
	}

.stars
	{
	margin:		7px 0 0;
	font-size:	13px;
	letter-spacing:	0.12em;
	color:		var(--accent);
	}

/*
The way back out of a recipe, at the head of the page rather than in the tabs:
the recipe was reached from the list and this is the door it came through.
*/
.back
	{
	appearance:	none;
	border:		none;
	background:	none;
	padding:	0 0 12px;
	font-family:	inherit;
	font-size:	12px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.11em;
	color:		var(--ink-soft);
	cursor:		pointer;
	}

.recipe-title
	{
	margin:		4px 0 8px;
	font-family:	var(--font-display);
	font-size:	30px;
	font-weight:	500;
	line-height:	1.15;
	}

.recipe-lead
	{
	margin:		0 0 10px;
	font-family:	var(--font-display);
	font-size:	18px;
	line-height:	1.4;
	color:		var(--ink-soft);
	}

.recipe-facts
	{
	margin:		0 0 16px;
	font-size:	13px;
	color:		var(--ink-soft);
	}

.recipe-photo
	{
	width:		100%;
	aspect-ratio:	4 / 3;
	object-fit:	cover;
	border:		1px solid var(--rule);
	margin-bottom:	18px;
	}

/*
The number of convives, which is the control this whole application exists for.

It is set as a stamped block rather than a form field: it is read from across the
kitchen, pressed with a floury thumb, and it changes every quantity below it. The
buttons are 44px because that is the smallest a thumb reliably hits.
*/
.servings
	{
	display:	flex;
	align-items:	center;
	flex-wrap:	wrap;
	gap:		10px;
	padding:	12px 14px;
	margin:		0 0 22px;
	background:	var(--accent-soft);
	border:		1px solid var(--rule);
	}

.stepper
	{
	display:	flex;
	align-items:	center;
	border:		1px solid var(--ink);
	background:	var(--card);
	}

.stepper button
	{
	appearance:	none;
	width:		44px;
	height:		44px;
	border:		none;
	background:	none;
	font-family:	inherit;
	font-size:	22px;
	line-height:	1;
	color:		var(--ink);
	cursor:		pointer;
	}

.stepper button:disabled
	{
	color:		var(--rule);
	cursor:		default;
	}

.stepper button:active:not(:disabled)
	{
	background:	var(--ink);
	color:		var(--paper);
	}

.stepper-value
	{
	min-width:	48px;
	text-align:	center;
	font-family:	var(--font-display);
	font-size:	26px;
	font-weight:	500;
	border-left:	1px solid var(--rule);
	border-right:	1px solid var(--rule);
	padding:	0 4px;
	line-height:	44px;
	}

.servings-word
	{
	font-size:	15px;
	color:		var(--ink-soft);
	}

/*
The way back to the recipe's own figure. It appears only once the number has
been changed, so that a recipe being read as written carries no invitation to
put right something nobody has touched.
*/
.servings-reset
	{
	appearance:	none;
	margin-left:	auto;
	padding:	7px 10px;
	font-family:	inherit;
	font-size:	11px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.08em;
	color:		var(--accent);
	background:	transparent;
	border:		1px solid var(--accent);
	cursor:		pointer;
	}

.block
	{
	margin:		0 0 26px;
	}

.block h3
	{
	margin:		0 0 10px;
	font-family:	var(--font-body);
	font-size:	11px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.13em;
	color:		var(--ink-soft);
	border-bottom:	1px solid var(--rule);
	padding-bottom:	6px;
	}

.group-name
	{
	margin:		16px 0 6px;
	font-family:	var(--font-display);
	font-size:	17px;
	font-style:	italic;
	}

.group-name:first-child
	{
	margin-top: 0;
	}

.ingredients
	{
	list-style:	none;
	margin:		0;
	padding:	0;
	}

/*
One ingredient, tappable so that it can be struck off while shopping or while
laying everything out. Nothing about that is stored: it lasts the half hour the
cooking takes, and a list that remembered it would be wrong by the next meal.
*/
.ingredient
	{
	display:		flex;
	align-items:		baseline;
	justify-content:	space-between;
	gap:			10px;
	padding:		9px 0;
	border-bottom:		1px solid var(--rule);
	cursor:			pointer;
	}

.ingredient.is-done
	{
	color:			var(--ink-soft);
	text-decoration:	line-through;
	text-decoration-color:	var(--accent);
	}

/*
The mark on a quantity that was deliberately left alone while the rest were
scaled. Without it, doubling a recipe and finding the salt unchanged reads as a
bug rather than as the right answer.
*/
.fixed
	{
	flex:		0 0 auto;
	font-size:	10px;
	text-transform:	uppercase;
	letter-spacing:	0.09em;
	color:		var(--ink-soft);
	border:		1px solid var(--rule);
	padding:	1px 5px;
	}

.steps
	{
	margin:		0;
	padding:	0 0 0 22px;
	}

.steps li
	{
	margin:		0 0 14px;
	padding-left:	4px;
	cursor:		pointer;
	}

.steps li::marker
	{
	font-family:	var(--font-mono);
	font-size:	13px;
	color:		var(--accent);
	}

.steps li.is-done
	{
	color:		var(--ink-soft);
	opacity:	0.55;
	}

.recipe-notes
	{
	margin:		0;
	white-space:	pre-wrap;
	}

.tags
	{
	display:	flex;
	flex-wrap:	wrap;
	gap:		6px;
	margin:		18px 0 0;
	}

.tag
	{
	font-size:	11px;
	text-transform:	uppercase;
	letter-spacing:	0.08em;
	color:		var(--ink-soft);
	border:		1px solid var(--rule);
	padding:	3px 8px;
	}

.recipe-source
	{
	margin:		14px 0 0;
	font-size:	13px;
	color:		var(--ink-soft);
	}

/*
The one action that matters, set as a stamped block above the tabs.
*/
.add-bar
	{
	position:	fixed;
	left:		0;
	right:		0;
	bottom:		calc(var(--tab-height) + env(safe-area-inset-bottom));
	z-index:	25;
	padding:	10px var(--gutter) 12px;
	background:	linear-gradient(to top, var(--paper) 72%, rgba(242, 237, 228, 0));
	}

.add-button
	{
	display:	block;
	width:		100%;
	max-width:	720px;
	margin:		0 auto;
	padding:	14px 16px;
	background:	var(--ink);
	color:		var(--paper);
	border:		none;
	outline:	1px solid var(--ink);
	outline-offset:	3px;
	font-family:	inherit;
	text-align:	left;
	cursor:		pointer;
	transition:	transform 120ms ease, background 120ms ease;
	}

.add-button:active
	{
	transform:	scale(0.985);
	background:	var(--accent);
	outline-color:	var(--accent);
	}

.add-label
	{
	display:	block;
	font-size:	15px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.14em;
	}

.add-sub
	{
	display:	block;
	margin-top:	3px;
	font-size:	11.5px;
	letter-spacing:	0.02em;
	opacity:	0.66;
	}

/*
The three screens of the application.
*/
.tabs
	{
	position:	fixed;
	inset:		auto 0 0 0;
	z-index:	30;
	display:	grid;
	grid-template-columns: repeat(3, 1fr);
	height:		calc(var(--tab-height) + env(safe-area-inset-bottom));
	padding-bottom:	env(safe-area-inset-bottom);
	background:	var(--card);
	border-top:	1px solid var(--rule);
	}

.tab
	{
	appearance:	none;
	border:		none;
	background:	none;
	font-family:	inherit;
	font-size:	11px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.1em;
	color:		var(--ink-soft);
	cursor:		pointer;
	}

.tab.is-current
	{
	color:		var(--accent);
	box-shadow:	inset 0 2px 0 var(--accent);
	}

/*
Forms, shared by the editor and the settings.
*/
.field
	{
	display:	block;
	margin:		0 0 16px;
	}

.field > .eyebrow
	{
	display:	block;
	margin-bottom:	6px;
	}

input[type="text"],
input[type="url"],
input[type="date"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select
	{
	width:		100%;
	padding:	11px 12px;
	font-family:	inherit;
	font-size:	16px;
	color:		var(--ink);
	background:	var(--card);
	border:		1px solid var(--rule);
	border-radius:	0;
	appearance:	none;
	}

textarea
	{
	resize: vertical;
	}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible
	{
	outline:	2px solid var(--accent);
	outline-offset:	1px;
	}

.button
	{
	appearance:	none;
	display:	inline-block;
	width:		100%;
	padding:	12px 14px;
	font-family:	inherit;
	font-size:	12px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.12em;
	color:		var(--ink);
	background:	var(--card);
	border:		1px solid var(--ink);
	cursor:		pointer;
	}

.button-primary
	{
	color:		var(--paper);
	background:	var(--accent);
	border-color:	var(--accent);
	}

.button-danger
	{
	color:		var(--danger);
	border-color:	var(--danger);
	background:	transparent;
	}

/*
Two buttons sharing a line, each taking half of it.
The columns are equal whatever the labels say, so the pair reads as one control
with two ends rather than as two buttons of unequal importance.
*/
.button-pair
	{
	display:		grid;
	grid-template-columns:	1fr 1fr;
	gap:			8px;
	}

.sheet-actions
	{
	display:	grid;
	gap:		8px;
	margin-top:	18px;
	}

.checkline
	{
	display:	flex;
	align-items:	center;
	gap:		9px;
	font-size:	15px;
	margin:		4px 0 14px;
	}

.checkline input
	{
	width:	18px;
	height:	18px;
	}

/*
The categories, all of them in view at once.

This was a <select>, and on an iPhone iOS draws one of those itself as a wheel of
about five rows: reaching the last category means scrolling a list the page has
no say over, and no amount of CSS makes it taller. Buttons are ordinary markup
and can simply be laid out to fit. Nine categories make three rows of three, so
the grid reads across in the order a meal arrives.
*/
.kind-grid
	{
	display:		grid;
	grid-template-columns:	repeat(3, 1fr);
	gap:			1px;
	background:		var(--rule);
	border:			1px solid var(--rule);
	}

.level-grid
	{
	display:		grid;
	grid-template-columns:	repeat(3, 1fr);
	gap:			1px;
	background:		var(--rule);
	border:			1px solid var(--rule);
	}

/*
The height is fixed and the type is sized against it rather than the other way
round, which is what lets the longest label be legible without the grid growing.
"Accompagnement" decides the size: at 11.5px it takes two lines on a narrow
screen, and two lines at this size and leading come to about 35px, so they sit
inside the 44px the cell already has and the box does not move.
*/
.kind
	{
	appearance:	none;
	border:		none;
	display:	flex;
	align-items:	center;
	justify-content: center;
	min-height:	44px;
	padding:	4px 5px;
	font-family:	inherit;
	font-size:	11.5px;
	font-weight:	600;
	line-height:	1.15;
	text-transform:	uppercase;
	letter-spacing:	0.03em;
	text-align:	center;
	color:		var(--ink);
	background:	var(--card);
	cursor:		pointer;
	}

.kind.is-current
	{
	color:		var(--paper);
	background:	var(--accent);
	}

/*
The three durations, side by side because they are read together.
*/
.time-row
	{
	display:		grid;
	grid-template-columns:	repeat(3, 1fr);
	gap:			8px;
	}

.time-row label
	{
	display:	block;
	}

.time-row span
	{
	display:	block;
	margin-bottom:	4px;
	font-size:	11px;
	text-transform:	uppercase;
	letter-spacing:	0.08em;
	color:		var(--ink-soft);
	}

/*
One ingredient in the editor.

Two lines rather than one. The first holds what is read - a quantity, a unit and
a name - in the order they are read in. The second holds the two things that
cannot be written into a sentence without being lost: which part of the recipe
the ingredient belongs to, and whether its quantity follows the number of people.
*/
.ing-row
	{
	border:		1px solid var(--rule);
	background:	var(--card);
	padding:	8px;
	margin-bottom:	8px;
	}

.ing-main
	{
	display:		grid;
	grid-template-columns:	64px 74px 1fr;
	gap:			6px;
	}

.ing-side
	{
	display:	flex;
	align-items:	stretch;
	gap:		6px;
	margin-top:	6px;
	}

.ing-side .ing-group
	{
	flex:		1;
	min-width:	0;
	font-size:	14px;
	padding:	8px 10px;
	}

.ing-main input
	{
	padding:	9px 8px;
	}

/*
The switch that says whether a quantity follows the number of people.
It shows what it will do rather than what it is - the accent and "xN" for one
that scales, plain and "=" for one that does not - because a switch on a phone
is read once, in passing, with the other hand full.
*/
.ing-scale,
.ing-drop
	{
	appearance:	none;
	flex:		0 0 auto;
	width:		46px;
	font-family:	inherit;
	font-size:	13px;
	font-weight:	600;
	color:		var(--ink-soft);
	background:	var(--paper);
	border:		1px solid var(--rule);
	cursor:		pointer;
	}

.ing-scale.is-current
	{
	color:		var(--paper);
	background:	var(--accent);
	border-color:	var(--accent);
	}

.ing-drop
	{
	color:		var(--danger);
	font-size:	18px;
	line-height:	1;
	}

/*
The stars, chosen by tapping the last one wanted.
*/
.stars-pick
	{
	display:	flex;
	align-items:	center;
	gap:		4px;
	}

.star
	{
	appearance:	none;
	border:		none;
	background:	none;
	padding:	4px 2px;
	font-size:	26px;
	line-height:	1;
	color:		var(--rule);
	cursor:		pointer;
	}

.star.is-current
	{
	color:		var(--accent);
	}

.star-clear
	{
	appearance:	none;
	margin-left:	auto;
	border:		none;
	background:	none;
	font-family:	inherit;
	font-size:	11px;
	text-transform:	uppercase;
	letter-spacing:	0.1em;
	color:		var(--ink-soft);
	cursor:		pointer;
	}

/*
The sheet, used for adding a recipe and for editing one.
*/
.sheet
	{
	position:	fixed;
	inset:		0;
	z-index:	60;
	display:	flex;
	align-items:	flex-end;
	}

.sheet-backdrop
	{
	position:	absolute;
	inset:		0;
	background:	rgba(42, 31, 22, 0.44);
	}

.sheet-panel
	{
	position:	relative;
	width:		100%;
	max-width:	760px;
	margin:		0 auto;
	max-height:	90vh;
	display:	flex;
	flex-direction:	column;
	background:	var(--paper);
	border-top:	3px solid var(--ink);
	animation:	rise 180ms ease-out;
	}

@keyframes rise
	{
	from	{ transform: translateY(14px); opacity: 0.4; }
	to	{ transform: translateY(0); opacity: 1; }
	}

.sheet-head
	{
	display:		flex;
	align-items:		center;
	justify-content:	space-between;
	padding:		14px var(--gutter) 10px;
	border-bottom:		1px solid var(--rule);
	}

.sheet-head h2
	{
	margin:		0;
	font-family:	var(--font-display);
	font-size:	20px;
	font-weight:	500;
	}

.sheet-close
	{
	appearance:	none;
	border:		none;
	background:	none;
	font-family:	inherit;
	font-size:	11px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.12em;
	color:		var(--ink-soft);
	cursor:		pointer;
	}

.sheet-body
	{
	padding:	16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
	overflow-y:	auto;
	}

.sheet-lead
	{
	margin:		0 0 14px;
	font-family:	var(--font-display);
	font-size:	18px;
	line-height:	1.4;
	}

.sheet-foot
	{
	margin:		14px 0 0;
	font-size:	13px;
	color:		var(--ink-soft);
	}

/*
The four ways a recipe arrives, offered as a list rather than as buttons in a
row: each one needs a line of explanation, and a row of four would give none of
them the room to carry it.
*/
.choices
	{
	display:	grid;
	gap:		1px;
	background:	var(--rule);
	border:		1px solid var(--rule);
	}

.choice
	{
	appearance:	none;
	display:	block;
	width:		100%;
	text-align:	left;
	padding:	13px 14px;
	background:	var(--card);
	border:		none;
	font-family:	inherit;
	cursor:		pointer;
	}

.choice:active
	{
	background: var(--accent-soft);
	}

.choice-name
	{
	display:	block;
	font-family:	var(--font-display);
	font-size:	18px;
	}

.choice-note
	{
	display:	block;
	margin-top:	2px;
	font-size:	12.5px;
	color:		var(--ink-soft);
	}

.spinner
	{
	width:		22px;
	height:		22px;
	margin:		6px 0 4px;
	border:		2px solid var(--rule);
	border-top-color: var(--accent);
	border-radius:	50%;
	animation:	spin 720ms linear infinite;
	}

@keyframes spin
	{
	to { transform: rotate(360deg); }
	}

/*
The document screen, which is also what the printer receives.
*/
.doc-tools
	{
	border:		1px solid var(--rule);
	background:	var(--card);
	padding:	16px;
	margin-bottom:	22px;
	}

.doc-sheet
	{
	background:	var(--card);
	border:		1px solid var(--rule);
	padding:	26px 20px 30px;
	}

.doc-head
	{
	border-bottom:	2px solid var(--ink);
	padding-bottom:	14px;
	margin-bottom:	8px;
	}

.doc-head h1
	{
	margin:		6px 0 4px;
	font-family:	var(--font-display);
	font-size:	28px;
	font-weight:	500;
	line-height:	1.15;
	}

.doc-count
	{
	margin:		0;
	font-family:	var(--font-mono);
	font-size:	11px;
	color:		var(--accent);
	}

/*
One recipe in the book. A page break is avoided inside it so that a recipe is
never split across two sheets of paper with the oven temperature on the second.
*/
.doc-entry
	{
	break-inside:	avoid;
	margin:		28px 0 0;
	padding-top:	20px;
	border-top:	1px solid var(--rule);
	}

.doc-entry h3
	{
	margin:		2px 0 6px;
	font-family:	var(--font-display);
	font-size:	22px;
	font-weight:	500;
	}

.doc-entry h4
	{
	margin:		0 0 8px;
	font-family:	var(--font-body);
	font-size:	10.5px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.13em;
	color:		var(--ink-soft);
	}

.doc-summary
	{
	margin:		0 0 8px;
	font-family:	var(--font-display);
	font-size:	16px;
	color:		var(--ink-soft);
	}

/*
The ingredients beside the steps, which is how a printed recipe is laid out and
how it is used: the left column is read once before starting and the right one
is followed. They stack on a narrow screen, where there is no room for two.
*/
.doc-columns
	{
	display:		grid;
	grid-template-columns:	1fr;
	gap:			18px;
	margin-top:		14px;
	}

@media (min-width: 620px)
	{
	.doc-columns
		{
		grid-template-columns: 1fr 1.6fr;
		gap: 26px;
		}
	}

.doc-ingredients ul
	{
	margin:		0;
	padding:	0 0 0 18px;
	font-size:	15px;
	}

.doc-ingredients li
	{
	margin-bottom: 4px;
	}

.doc-group
	{
	margin:		12px 0 4px;
	font-family:	var(--font-display);
	font-style:	italic;
	font-size:	15px;
	}

.doc-steps ol
	{
	margin:		0;
	padding:	0 0 0 20px;
	}

.doc-steps li
	{
	margin-bottom: 9px;
	}

.doc-comment
	{
	margin:		12px 0 0;
	font-size:	15px;
	white-space:	pre-wrap;
	}

.doc-source
	{
	margin:		8px 0 0;
	font-size:	12px;
	color:		var(--ink-soft);
	}

.doc-photos
	{
	display:		grid;
	grid-template-columns:	repeat(3, 1fr);
	gap:			6px;
	margin-top:		12px;
	}

.doc-photos img
	{
	width:		100%;
	aspect-ratio:	4 / 3;
	object-fit:	cover;
	border:		1px solid var(--rule);
	}

/*
The settings screen.
*/
.panel
	{
	background:	var(--card);
	border:		1px solid var(--rule);
	padding:	18px 16px;
	margin-bottom:	16px;
	}

.panel-lead
	{
	margin:		8px 0 16px;
	font-size:	14.5px;
	color:		var(--ink-soft);
	}

.facts
	{
	display:		grid;
	grid-template-columns:	auto 1fr;
	gap:			6px 16px;
	margin:			12px 0 0;
	font-size:		15px;
	}

.facts dt
	{
	font-size:	10.5px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.12em;
	color:		var(--ink-soft);
	padding-top:	4px;
	}

.facts dd
	{
	margin: 0;
	}

/*
The short confirmation shown after a change.
*/
.toast
	{
	position:	fixed;
	left:		50%;
	bottom:		calc(var(--tab-height) + env(safe-area-inset-bottom) + 84px);
	z-index:	80;
	transform:	translate(-50%, 8px);
	margin:		0;
	padding:	9px 16px;
	max-width:	calc(100% - 2 * var(--gutter));
	background:	var(--ink);
	color:		var(--paper);
	font-size:	12px;
	text-align:	center;
	text-transform:	uppercase;
	letter-spacing:	0.1em;
	opacity:	0;
	pointer-events:	none;
	transition:	opacity 180ms ease, transform 180ms ease;
	}

.toast.is-visible
	{
	opacity:	1;
	transform:	translate(-50%, 0);
	}

@media (prefers-reduced-motion: reduce)
	{
	*
		{
		animation-duration:	0.001ms !important;
		transition-duration:	0.001ms !important;
		}
	}

/*
What the printer sees: the recipe alone, on white, with no interface.

The stepper goes and a plain line takes its place, so that the sheet of paper
says what the quantities on it are for. Printing from the recipe screen gives
the figures as they were being read a moment before, which is the point: the
page is printed because the evening is for eleven.
*/
@media print
	{
	.no-print
		{
		display: none !important;
		}

	.print-only
		{
		display: block;
		}

	body
		{
		background:	#FFFFFF;
		font-size:	11pt;
		}

	.view
		{
		padding:	0;
		max-width:	none;
		}

	.servings-print
		{
		margin:		0 0 18px;
		font-size:	11pt;
		font-weight:	600;
		}

	.recipe-photo,
	.doc-photos
		{
		display: none;
		}

	.doc-sheet
		{
		border:		none;
		background:	transparent;
		padding:	0;
		}

	.ingredient
		{
		cursor: auto;
		}

	.doc-entry
		{
		break-before: page;
		}

	.doc-entry:first-of-type
		{
		break-before: auto;
		}
	}