@layer reset, base, layout, components, pages, utilities, print;

/*
 * Printing a recipe at home: just the recipe, as scaled and converted on
 * screen, in two columns on plain paper. App chrome, buttons, timers and
 * notes are left off, and a missing photo leaves no placeholder.
 *
 * Printing the shopping list: what's left to buy, by aisle, in columns,
 * with an empty box to tick in pen.
 */
@layer print {
  @media print {
    @page { margin: 0.55in 0.6in; }

    body, .panel, .source-box { background: #fff !important; }
    body { font-size: 11pt; }
    .screen-only, .sidebar, .mobile-bar, .tabbar, .breadcrumb, .flash, .recipe-tags, .recipe-actions,
    .gallery__thumbs, .gallery__caption, .segmented, .stepper, .servings, .checkbox, .ingredient-tick, .ingredient-list__hint, .ingredients-panel form > button,
    .ingredients-panel .link-button, .method__step .chip, .keep-awake, .source-box .link-button, .source-box__icon,
    .gallery:not(:has(img)) { display: none !important; }

    .app { display: block; background: none; min-height: 0; height: auto; overflow: visible; }
    .main { padding: 0; gap: 14pt; overflow: visible; }

    .recipe-hero { display: grid; grid-template-columns: minmax(0, 1fr) 2.1in; gap: 0.3in; align-items: start; }
    .recipe-hero:not(:has(.gallery img)) { grid-template-columns: minmax(0, 1fr); }
    .recipe-hero .gallery { order: 2; }
    .gallery__main { height: 1.7in; aspect-ratio: auto; border-radius: 6pt; }
    .recipe-hero__info { gap: 8pt; padding: 0; }
    .recipe-title { font-size: 24pt; }
    .recipe-description { font-size: 11pt; max-width: none; }
    .recipe-byline { font-size: 10pt; }
    .stat-row { border-color: #ccc; }
    .stat-row > div { padding: 5pt 0 5pt 12pt; }
    .stat-row dt { font-size: 8.5pt; }
    .stat-row dd { font-size: 11pt; }
    .source-box { padding: 0; background: none; }
    .source-box__title { font-size: 9.5pt; }
    .source-box__detail { font-size: 8.5pt; }

    .recipe-body { display: grid; grid-template-columns: 2.3in minmax(0, 1fr); gap: 0.35in; margin-top: 4pt; }
    .recipe-body > .stack { --stack-gap: 10pt !important; }
    .panel { padding: 0; border: 0; border-radius: 0; gap: 8pt; }
    .ingredients-panel { position: static; }
    .panel__title--serif, .section-title--lg { font-size: 15pt; }
    .ingredient-list li { min-height: 0; padding: 2pt 0; border: 0; }
    .ingredient-list label { padding: 0; font-size: 10pt; gap: 8pt; }
    .ingredient-list li:has(.ingredient-tick:checked) label { text-decoration: none; color: inherit; }

    .method { gap: 9pt; }
    .method__step { gap: 10pt; break-inside: avoid; }
    .method__step p { font-size: 10.5pt; line-height: 1.45; }
    .method__number { font-size: 16pt; width: 18pt; }

    .recipe-about { padding: 0; border: 0; margin-top: 4pt; }
    .shopping { display: block; }
    .shopping__aside, .shopping .page-head .row, .store-bar, .add-item, .shopping-line__stores, .shopping .chip__remove,
    .staples-toggle, .shopping-line.is-checked { display: none !important; }
    .shopping .page-title { font-size: 22pt; }
    .shopping .lede { font-size: 10pt; }
    .shopping .aisles { columns: 3; column-gap: 0.3in; margin-top: 10pt; }
    .shopping .aisle { margin-bottom: 10pt; padding: 0; border: 0; border-radius: 0; background: none; }
    .shopping .aisle__name { margin-bottom: 2pt; font-size: 8.5pt; color: #444; }
    .shopping-line { min-height: 0; padding: 2pt 0; border: 0; }
    .shopping-line label { padding: 0; }
    .shopping-line__name { font-size: 10.5pt; }
    .shopping .checkbox { display: inline-block !important; width: 10pt; height: 10pt; border: 1px solid #666; border-radius: 2pt; background: none; }
    .shopping-line__form { gap: 6pt; }

    .print-footer { margin-top: 18pt; padding-top: 6pt; border-top: 1px solid #ccc; font-size: 8pt; color: #666; }
    a { color: inherit; text-decoration: none; }
  }
}