/* =============================================================================
 * print.css  (linked with media="print")
 *
 * Every rule here exists because of a specific way browser printing goes wrong.
 * Read the comments before "simplifying" anything.
 * ========================================================================== */

/* The keyword form is more widely understood than raw dimensions.
   Chrome and Firefox honour it. Safari largely ignores `size` and defers to
   whatever the print dialog is set to -- see README. */
@page {
  size: letter landscape;
  margin: 0;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Colour is the whole design. Without this the bands and cards print as
   white rectangles and the sheet looks nothing like the Canva original. */
html, body, .sheet, .sheet * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* ---------------------------------------------------- hide the application */

#topbar,
#app,
#toastWrap,
#modalBackdrop,
.no-print {
  display: none !important;
}

/* --------------------------------------------------------- show the sheets
 * #printRoot is parked off-screen rather than display:none, because a hidden
 * element has no layout and auto-fit could not measure it. */

.print-root {
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.print-root .sheet {
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* fixed height, never min-height: an element that exceeds the page box by a
     rounding hair emits a blank page after every sheet */
  width: 11in !important;
  height: 8.5in !important;
  overflow: hidden !important;
}

/* break-BEFORE on subsequent sheets, not break-after on every sheet --
   the latter emits a trailing blank page at the end of the job. */
.print-root .sheet + .sheet {
  break-before: page;
  page-break-before: always;
}

.print-root .sheet {
  break-inside: avoid;
  page-break-inside: avoid;
  break-after: auto;
  page-break-after: auto;
}

/* The single easiest thing to forget: without this you print a 62%-scale
   sheet in the corner of the page. */
.preview-stage,
.print-root .preview-stage {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.preview-stage > .sheet,
.print-root .preview-stage > .sheet {
  position: static !important;
  transform: none !important;
}

/* Cards must not be split across pages if anything unexpected reflows. */
.print-root .card,
.print-root .band {
  break-inside: avoid;
  page-break-inside: avoid;
}