/* Mark progress without hiding or reducing the contrast of cooking instructions. */
.cooking-check { font-size: 14px; margin-top: 14px; min-width: 172px; }
.cooking-check[aria-pressed="true"] { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--accent); }
.cooking-steps > .is-done::before { content: "\2713"; font-size: 20px; }

.recipe-heading { background: var(--tomato); color: var(--on-tomato); padding: 24px; border: 0; border-radius: var(--radius-lg); --focus: var(--on-tomato); }
.recipe-heading .eyebrow, .recipe-heading .intro, .recipe-heading .recipe-meta dt { color: inherit; }
.recipe-heading .back-link { color: var(--tomato); background: var(--surface); padding-inline: 16px; border-radius: var(--radius-md); margin-bottom: 12px; }
.recipe-heading .recipe-meta div { border-color: currentColor; }
.cooking-steps p { color: var(--ink); }
.cooking-check[aria-pressed="true"] { color: var(--ok-ink); }
.recipe-heading h1::before { content: ""; display: block; width: 32px; height: 32px; margin-bottom: 12px; background: currentColor; }

@media print {
  .cooking-check, #cooking-progress { display: none; }
  .recipe-heading { background: var(--surface); color: var(--ink); }
}
.recipe-heading h1, .ingredient-check span, .cooking-steps p, .family-note p { overflow-wrap: anywhere; }
.recipe-heading .recipe-source { font-size: 14px; overflow-wrap: anywhere; }
.recipe-heading .recipe-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }