/* Print layout: portrait A4, the whole recipe uses about half the page.
   Always light — the flow SVG is rendered with the 'print' (light) theme,
   and color-scheme blocks browser auto-darkening. */
:root { color-scheme: only light; }
@page { size: A4 portrait; margin: 12mm; }

body {
  margin: 0;
  background: #fff;
  color: #26221c;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.sheet { max-width: 186mm; margin: 0 auto; padding: 8mm 0; }
h1 { margin: 0 0 2mm; font-size: 16pt; }
.stats { margin: 0 0 4mm; font-size: 9pt; color: #555; }

/* Fill the full printable width for the common wide/short flow, but shrink
   to fit a tall one instead of clipping it — a third of recipes are tall
   enough (a big ingredient-group box, a deep step chain) to overflow
   120mm at full width, and losing steps off the bottom is worse than a
   smaller diagram. width/height auto + both max- constraints scales down
   to whichever bound binds first, preserving the aspect ratio. */
.flow { max-height: 120mm; }
.flow svg { display: block; margin: 0 auto; width: auto; height: auto;
           max-width: 186mm; max-height: 120mm; }

.photo { margin-top: 4mm; text-align: right; }
.photo img { max-width: 70mm; max-height: 55mm; border-radius: 3mm; }

.no-print {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
@media print {
  .no-print { display: none; }
}

/* QR code linking back to the recipe page */
.qr { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.qr svg { width: 84px; height: 84px; }
.qr-caption { font-size: 9px; color: #555; word-break: break-all; }