/* Print rules only — this sheet is linked with media="print".
   The spread's own typography lives in app.css so the on-screen preview and the
   paper agree; here we only take the app chrome away and cut the pages. */

@page {
  size: A4 portrait;
  margin: 12mm;
}

/* app chrome never prints */
.skip-link,
.topbar,
.tabbar,
.rail,
.toast-host,
.sheet-backdrop {
  display: none !important;
}

.shell {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
}

.main {
  min-height: 0 !important;
  padding: 0 !important;
}

.print {
  max-width: none !important;
  padding: 0 !important;
}

/* the controls are for the screen; the sheet is what goes on paper */
.print-head,
.print-tools,
.print-status {
  display: none !important;
}

.print-preview {
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
}

.print-sheet {
  width: 100% !important;
  transform: none !important;
}

.sheet-block {
  break-before: page;
}

/* the grid opens the sheet; only FACES and NUMBERS start a fresh page */
.sheet-block:first-of-type {
  break-before: auto;
}

.sheet-day {
  break-after: avoid;
}

/* the row is the unit that stays whole; a day may split between its rows */
.sheet-row,
.sheet-number,
.face {
  break-inside: avoid;
}

/* ---- single photo -------------------------------------------------------- */

/* the page is cut to the photo's own size by an injected @page rule */
body.is-printing-single > .app {
  display: none !important;
}

.print-single {
  position: static;
  left: auto;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.print-single-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}