/*
 * The recipe page.
 *
 * Loaded ON TOP OF food.css, which owns the palette. Nothing here redefines
 * a colour: a second set of tokens is how a component ends up with two
 * disagreeing greys.
 */

.fd-recipe__cols {
	display: grid;
	/* The ingredient column is fixed-ish and the method takes the rest. On a
	   phone they stack, ingredients first, because that is the order a cook
	   reads them in. */
	grid-template-columns: minmax(min(100%, 260px), 1fr) 2fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: start;
}

@media (max-width: 720px) {
	.fd-recipe__cols { grid-template-columns: 1fr; }
}

.fd-facts {
	display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem;
	margin: 1.25rem 0; padding: 1rem 0;
	border-top: 1px solid var(--fd-line);
	border-bottom: 1px solid var(--fd-line);
}

.fd-facts > div { display: flex; flex-direction: column; gap: 0.1rem; }
.fd-facts dt { font-size: 0.72rem; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--fd-ink-faint); }
.fd-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-facts__total dd { color: var(--fd-accent); }

.fd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }

.fd-servings {
	display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
	margin: 0 0 1rem;
}

.fd-servings label { font-size: 0.8rem; text-transform: uppercase;
	letter-spacing: 0.05em; color: var(--fd-ink-soft); }
.fd-servings input {
	width: 4.5rem; font: inherit; padding: 0.35rem 0.5rem;
	border: 1px solid var(--fd-line); border-radius: var(--fd-radius-sm);
	background: var(--fd-ground); color: var(--fd-ink);
}

.fd-recipe__group {
	margin: 1.25rem 0 0.5rem; font-size: 0.8rem;
	color: var(--fd-accent); letter-spacing: 0.08em;
}

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

.fd-ing li {
	display: flex; flex-wrap: wrap; gap: 0.35rem;
	padding: 0.45rem 0; border-bottom: 1px solid var(--fd-line);
	align-items: baseline;
}

.fd-ing li.is-optional { opacity: 0.8; }
.fd-ing__amount { font-weight: 600; font-variant-numeric: tabular-nums;
	min-width: 4.5rem; }
.fd-ing__name a { text-decoration: none; }
.fd-ing__name a:hover { text-decoration: underline; }
.fd-ing__prep, .fd-ing__note { font-size: 0.85rem; color: var(--fd-ink-soft); }
.fd-ing__note::before { content: "("; }
.fd-ing__note::after { content: ")"; }
.fd-ing__optional {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--fd-ink-faint); margin-left: auto;
}

/* ⚠ AN UNPARSED LINE IS STILL A LINE. It is printed as written rather than
   hidden, because "salt and pepper to taste" is a real instruction that
   simply has no number in it. */
.fd-ing__raw { flex: 1; }

.fd-steps { list-style: none; counter-reset: fd-step; padding: 0; margin: 0; }

.fd-step {
	counter-increment: fd-step;
	position: relative;
	padding: 0 0 1.25rem 3rem;
}

.fd-step::before {
	content: counter(fd-step);
	position: absolute; left: 0; top: 0;
	width: 2rem; height: 2rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--fd-accent-soft); color: var(--fd-accent);
	font-weight: 700; font-variant-numeric: tabular-nums;
	border: 1px solid var(--fd-line);
}

.fd-step__title { margin: 0.25rem 0 0.35rem; font-size: 1rem;
	text-transform: none; letter-spacing: 0; color: var(--fd-ink); }
.fd-step__body { margin: 0 0 0.5rem; max-width: 66ch; }
.fd-step__image { border-radius: var(--fd-radius-sm); margin: 0.5rem 0;
	max-width: 420px; }

.fd-step__meta { display: flex; flex-wrap: wrap; gap: 0.5rem;
	align-items: center; margin: 0; }

.fd-timer {
	font: inherit; font-size: 0.85rem; cursor: pointer;
	padding: 0.25rem 0.7rem; border-radius: 999px;
	border: 1px solid var(--fd-accent);
	background: transparent; color: var(--fd-accent);
	font-variant-numeric: tabular-nums;
}

.fd-timer.is-running { background: var(--fd-accent); color: #fff; }
.fd-timer.is-done { background: var(--fd-warn-soft); color: var(--fd-warn);
	border-color: currentcolor; }

.fd-step__temp {
	font-size: 0.85rem; color: var(--fd-ink-soft);
	font-variant-numeric: tabular-nums;
}

.fd-table__basis { color: var(--fd-ink-faint); font-size: 0.85rem; }

.fd-chips--tight { margin: 0 0 0.5rem; }

.fd-recipe__notes { margin-top: 1.5rem; }

@media print {
	.fd-recipe__cols { grid-template-columns: 1fr; }
	.fd-actions, .fd-servings, .fd-timer { display: none; }
	.fd-hero__image { display: none; }
	.fd-step { padding-left: 2rem; }
}