/* Printing (Export → Every screen, saved as PDF from the print dialog): only the print sheet
   shows, the flowchart first and then one built screen per page. */

.print-sheet { display: none; }

@media print {
  @page { margin: 12mm; }
  html, body { height: auto !important; overflow: visible !important; background: #ffffff !important; }
  .app { display: block !important; height: auto !important; overflow: visible !important; background: #ffffff !important; }
  .app > :not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; color: #1c2230; font-family: var(--ui); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-page { display: flex; flex-direction: column; align-items: center; gap: 8mm; padding-top: 2mm; break-after: page; page-break-after: always; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-page h1, .print-page h2 { margin: 0; font-family: var(--display); font-weight: 700; }
  .print-page h1 { font-size: 24pt; }
  .print-page h2 { font-size: 16pt; }
  .print-page p { margin: 0; font-size: 10.5pt; color: #474e5f; }
  .print-flow { width: 100%; display: flex; justify-content: center; }
  .print-shot { display: flex; justify-content: center; }
}