/* Print view and recipe cards (task 823.7). The Print menu, the recipe page's own print styles (Ctrl+P on a recipe), and
   the print view (?print=page|4x6|3x5): a screen preview of the paper plus the printed result. Card sizes, padding and
   type here match CARDS in src/printkit.js; change both together. Paper size for cards: print-4x6.css / print-3x5.css. */

/* ---- the Print menu (recipe page, saved collection, meal plan) ---- */
.print-menu { position: relative; display: inline-block; }
.print-menu > summary { list-style: none; cursor: pointer; }
.print-menu > summary::-webkit-details-marker { display: none; }
.print-menu > summary::after { content: "▾"; margin-left: .4em; font-size: .8em; }
.print-pop { position: absolute; z-index: 25; left: 0; top: calc(100% + 6px); min-width: 250px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.print-pop a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--link); font-weight: 700; text-decoration: none; }
.print-pop a:hover, .print-pop a:focus-visible { background: var(--surface-2); }
.print-pop a span { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; }
.print-pop p { margin: 6px 12px; }
.print-pop .print-last { display: block; font: italic 400 .8rem var(--sans); color: var(--muted); }
.saved-print { margin-top: 10px; }
.plan-tools .print-pop { left: auto; right: 0; }
.print-foot { display: none; }

/* ---- Ctrl+P on a recipe page: just the recipe ---- */
@page { margin: .5in; }
@media print {
  .site-header, .site-footer, .offline-bar, .skip, .crumbs, .cta-row, .recipe .art, .variation-tabs, .swap, .swap-hint, .tools, .mine, .gear-section,
  .reviews, .flash, .recipe .meta-row, .print-menu { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 10.5pt; line-height: 1.4; }
  a { color: inherit !important; text-decoration: none !important; }
  .recipe .wrap, .recipe.wrap { max-width: none; padding: 0; }
  .recipe.section { padding: 0; }
  .recipe-head { display: block; }
  .recipe .display { font-size: 20pt; margin: 0 0 4pt; }
  .recipe .lede { font-size: 10pt; margin: 0 0 4pt; }
  .recipe .eyebrow { margin: 0; font-size: 8.5pt; }
  .recipe .facts { margin: 4pt 0 8pt; padding: 4pt 0; gap: 2pt 18pt; border-color: #999; }
  .recipe-grid { grid-template-columns: 34% 1fr; gap: 18pt; margin-top: 6pt; }
  .recipe .panel { border: 0; box-shadow: none; padding: 0; background: none; }
  .recipe .panel h2 { font-size: 13pt; }
  .ing-list li { padding: 2pt 0; border-bottom: 0; break-inside: avoid; }
  .step-list li { break-inside: avoid; padding: 0 0 4pt 22pt; }
  .step-list li::before { width: auto; height: auto; background: none; font: 700 10.5pt/1.4 var(--sans); }
  .step-list p, .step-list .step-p { font-size: 10.5pt; margin: 0; }
  .recipe .eyebrow, .recipe .lede, .recipe .note, .recipe .muted, .recipe .ing-group, .facts dt { color: #333 !important; }
  .safe-temp { background: none; padding: 0; font-weight: 600; }
  .badge-inline { display: none; }
  .print-foot { display: flex; justify-content: space-between; align-items: center; gap: 12pt; margin-top: 12pt; padding-top: 4pt; border-top: 1px solid #999; font-size: 8pt; color: #333; break-inside: avoid; }
  .print-foot img { width: .9in; height: .9in; order: 3; }
}

/* ---- the print view: a screen preview of the paper ---- */
.print-view { background: #e9e4dc; color: #1a1410; }
.print-bar { max-width: 980px; margin: 0 auto; padding: 18px 20px 6px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.print-bar p { margin: 0; }
.pb-back { flex-basis: 100%; }
.pb-back a { color: #8f3311; font-weight: 600; }
.pb-title { flex-basis: 100%; margin: 0; font-size: 1.6rem; color: #1a1410; }
.pb-layouts { background: #fff; border-color: #c9bba8; }
.pb-layouts a { padding: 8px 14px; color: #3d2f22; text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.pb-layouts a[aria-current] { background: #2b2118; color: #fff; }
.pb-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pb-form label { font-weight: 600; }
.pb-form input, .pb-form select { background: #fff; color: #1a1410; border-color: #c9bba8; }
.pb-form input { width: 5em; }
.pb-form .btn.ghost { color: #8f3311; }
.pb-tip { flex-basis: 100%; color: #4e4134 !important; }
.print-view .muted { color: #4e4134; }
.print-out { padding: 16px 12px 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.print-out > * { flex-shrink: 0; background: #fff; color: #000; box-shadow: 0 2px 10px rgba(40, 25, 10, .18); }

/* the one-page sheet (v2, task 823.54): header with the QR code, ingredients in two columns across the page, then steps */
/* max-height/border-radius: site.css also has a .sheet (the bottom-sheet dialog, max-height 88vh), which clipped long pages here. */
.sheet { width: 8.5in; max-width: 100%; max-height: none; border-radius: 0; box-sizing: border-box; padding: .5in; font: 10.5pt/1.4 var(--sans); }
.sheet h1, .sheet h2, .sheet h3 { color: #000; }
.ps-head { display: flex; gap: 12pt; align-items: flex-start; }
.ps-head-text { flex: 1; min-width: 0; }
.ps-eyebrow { margin: 0; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: #444; }
.ps-title { font: 700 20pt/1.15 var(--serif); margin: 2pt 0 4pt; }
.ps-summary { margin: 0 0 4pt; font-size: 9.5pt; color: #333; }
.ps-qr { flex: none; margin: 0; width: .95in; text-align: center; }
.ps-qr svg { display: block; width: .95in; height: .95in; }
.ps-qr figcaption { font-size: 6.5pt; color: #444; line-height: 1.1; }
.ps-facts { display: flex; flex-wrap: wrap; gap: 2pt 18pt; margin: 4pt 0 8pt; padding: 4pt 0; border-block: 1px solid #999; }
.ps-facts dt { font-size: 7pt; text-transform: uppercase; letter-spacing: .08em; color: #555; font-weight: 700; }
.ps-facts dd { margin: 0; font-weight: 600; }
.ps-ing-block h2, .ps-steps-block h2 { font: 700 12.5pt var(--serif); margin: 0 0 3pt; }
.ps-ing-cols { columns: 2; column-gap: 22pt; }
.ps-ing-cols h3 { font: 700 7.5pt var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #444; margin: 0; padding-top: 5pt; break-after: avoid; }
.ps-ing-cols h3:first-child { padding-top: 0; }
.ps-ing { list-style: none; padding: 0; margin: 0; }
.ps-ing li { padding: 1pt 0 1pt 1em; text-indent: -1em; break-inside: avoid; }
.ps-ing .ps-group { font: 700 7.5pt var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #444; text-indent: 0; padding-left: 0; }
.ps-steps-block { margin-top: 8pt; }
.ps-steps { margin: 0; padding-left: 1.4em; }
.ps-steps li { margin-bottom: 3pt; break-inside: avoid; }
.ps-steps li::marker { font-weight: 700; }
.ps-safe { margin: 5pt 0 0; font-weight: 600; font-size: 9pt; }
.ps-notes { margin-top: 8pt; padding-top: 5pt; border-top: 1px solid #bbb; font-size: 9pt; columns: 2; column-gap: 20pt; }
.ps-notes p { margin: 0 0 4pt; break-inside: avoid; }
.ps-mine { column-span: all; }
.ps-nutr { margin: 8pt 0 0; padding-top: 5pt; border-top: 1px solid #bbb; font-size: 8pt; line-height: 1.35; color: #222; break-inside: avoid; }
.sheet.denser .ps-nutr { margin-top: 5pt; padding-top: 3pt; font-size: 7.2pt; line-height: 1.25; }
.sheet.denser .ps-nutr + .ps-foot { margin-top: 6pt; }
.ps-foot { display: flex; justify-content: space-between; margin-top: 10pt; padding-top: 4pt; border-top: 1px solid #999; font-size: 8pt; color: #333; }
.sheet.dense { font-size: 9.5pt; line-height: 1.3; }
.sheet.dense .ps-steps li { margin-bottom: 2pt; }
.sheet.dense .ps-title { font-size: 17pt; }
.sheet.denser { font-size: 8.6pt; line-height: 1.25; }
.sheet.denser .ps-steps li { margin-bottom: 1.5pt; }
.sheet.denser .ps-title { font-size: 15pt; }
.sheet.denser .ps-qr, .sheet.denser .ps-qr svg { width: .85in; }
.sheet.denser .ps-qr svg { height: .85in; }
.sheet.denser .ps-summary, .sheet.denser .ps-notes { font-size: 8.1pt; }
/* Large print: big type, never squeezed; long recipes run onto another page. */
.sheet.large { font-size: 14pt; line-height: 1.45; }
.sheet.large .ps-title { font-size: 26pt; }
.sheet.large .ps-summary, .sheet.large .ps-notes, .sheet.large .ps-safe { font-size: 13pt; }
.sheet.large .ps-eyebrow, .sheet.large .ps-facts dt, .sheet.large .ps-ing-cols h3 { font-size: 10.5pt; }
.sheet.large .ps-ing-block h2, .sheet.large .ps-steps-block h2 { font-size: 17pt; }
.sheet.large .ps-steps li { margin-bottom: 7pt; }
.sheet.large .ps-qr, .sheet.large .ps-qr svg { width: 1.15in; }
.sheet.large .ps-qr svg { height: 1.15in; }
.sheet.large .ps-qr figcaption { font-size: 9pt; }
.sheet.large .ps-nutr, .sheet.large .ps-foot { font-size: 10.5pt; }
.sheet.large .ps-notes { columns: 1; }

/* the cards: each side is one printed page */
.card-side { box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; font-family: var(--sans); }
.card-4x6 { width: 6in; height: 4in; padding: .22in; font-size: 8.5pt; line-height: 1.22; }
.card-3x5 { width: 5in; height: 3in; padding: .19in; font-size: 8pt; line-height: 1.2; }
.cs-head { flex: none; border-bottom: 1px solid #777; padding-bottom: 2pt; margin-bottom: 4pt; }
.cs-title { margin: 0; font: 700 12pt/1.13 var(--serif); }
/* card 1's front: the QR code back to the recipe at the header's right (CARDS[].qr in printkit.js reserves its height) */
.cs-qr { float: right; width: .62in; height: .62in; margin: -.04in -.04in 2pt 8pt; }
.card-3x5 .cs-qr { width: .56in; height: .56in; }
.cs-head.has-qr { display: flow-root; }
.card-3x5 .cs-title { font-size: 11pt; }
.cs-meta { margin: 1pt 0 0; font-size: 7.5pt; color: #333; }
.cs-body { flex: 1; min-height: 0; overflow: hidden; }
.card-side .ps-ing { columns: 2; column-gap: 12pt; }
.card-side .ps-ing li { padding: 0 0 0 .9em; text-indent: -.9em; break-inside: avoid; }
.card-side .ps-ing .ps-group { padding: 1.5pt 0 0; text-indent: 0; font-size: 6.8pt; break-after: avoid; }
.cs-steps { margin: 0; padding-left: 1.9em; }
.cs-steps li { margin-bottom: 2.5pt; }
.card-3x5 .cs-steps li { margin-bottom: 2pt; }
.cs-steps li::marker { font-weight: 700; }
.cs-steps li.cont::marker { color: #888; }
.cs-steps .cs-note { list-style: none; font-weight: 600; }
.cs-foot { flex: none; display: flex; justify-content: space-between; gap: 8pt; margin-top: 3pt; font-size: 6.5pt; color: #444; }
.cs-blank { margin: auto; color: #999; font-size: 8pt; }

@media print {
  .print-bar { display: none !important; }
  html, body.print-view { background: #fff !important; }
  .print-out { display: block; padding: 0; }
  .print-out > * { box-shadow: none !important; }
  .print-page .sheet, .print-large .sheet { width: auto; padding: 0; }
  .sheet.next { break-before: page; }
  .card-side { break-after: page; break-inside: avoid; }
  .card-side:last-child { break-after: auto; }
  .cs-blank { visibility: hidden; }
}
@media (max-width: 640px) {
  .print-out { align-items: flex-start; overflow-x: auto; }
  .sheet { padding: 18px; }
  .ps-ing-cols { columns: 1; }
}
/* A recipe's photo, only when "Include the photo" is ticked (task 833; off by default). */
.ps-photo { flex: none; width: 1.9in; height: 1.3in; object-fit: cover; border-radius: 4pt; }
.pb-photo { display: inline-flex; gap: .35em; align-items: center; }
@media print { .recipe-photo, .photo-strip { display: none !important; } }