/*
 * Print styles, linked with media="print" in index.html.
 *
 * While printing only `#print-root` is shown: the container that js/ui/export.js builds just before it calls
 * window.print(), with one <section class="print-page"> per page holding the puzzles (<article
 * class="print-item">: a header line, then the board as a vector picture). Everything else is hidden, so no
 * control can reach the paper.
 *
 * Paper: the margins are set here; the size is left to the printer (A4 or Letter). A page is laid out for
 * the smaller of the two printable areas, 186 mm x 250 mm, so the same plan fits both. Puzzles per page
 * (data-per-page): 1 = 1 column x 1 row, 2 = 1 x 2, 4 = 2 x 2, 6 = 2 x 3.
 *
 * Colour: the board pictures carry their own colours (light palette, dark lines and ink). This file only
 * needs the paper itself: the system colours Canvas / CanvasText with a forced light colour scheme, so a
 * dark or high-contrast theme never prints light text on white. No colour literals, no theme tokens.
 */

@page {
  margin: 12mm;
}

@media print {
  :root,
  :root[data-theme] {
    color-scheme: light !important;
  }

  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    color: CanvasText !important;
  }

  body > *:not(#print-root) {
    display: none !important;
  }

  #print-root,
  #print-root[hidden] {
    display: block !important;
    font-family: var(--sg-font-family);
    font-size: 11pt;
    line-height: 1.25;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-page {
    display: flex;
    flex-direction: column;
    height: 250mm;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
  }

  .print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .print-page__title {
    flex: none;
    margin: 0 0 4mm;
    font-size: 15pt;
    line-height: 1.2;
    text-align: center;
  }

  .print-page__grid {
    display: grid;
    flex: 1 1 0;
    min-height: 0;
    gap: 6mm;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .print-page[data-columns="2"] .print-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .print-page[data-rows="2"] .print-page__grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .print-page[data-rows="3"] .print-page__grid {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .print-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-item__head {
    flex: none;
    margin: 0 0 2mm;
    text-align: center;
  }

  .print-item__title {
    margin: 0;
    font-size: 12pt;
    font-weight: 700;
    line-height: 1.2;
  }

  .print-item__meta {
    margin: 0;
    font-size: 9pt;
  }

  .print-page[data-per-page="1"] .print-item__title {
    font-size: 16pt;
  }

  .print-page[data-per-page="1"] .print-item__meta {
    font-size: 11pt;
  }

  .print-page[data-per-page="4"] .print-item__title,
  .print-page[data-per-page="6"] .print-item__title {
    font-size: 10.5pt;
  }

  .print-page[data-per-page="4"] .print-item__meta,
  .print-page[data-per-page="6"] .print-item__meta {
    font-size: 8pt;
  }

  .print-item__board {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }
}