/* ---- Page size ----
   Both pages are landscape A4. Chrome inserts a blank page whenever a
   named-page orientation changes (landscape → portrait), regardless of
   page-break settings — there is no CSS-only workaround. Landscape works
   well for both pages: the map fills it naturally, and the two order-list
   columns have more horizontal room. A single @page rule with an explicit
   break-before on #page2 gives clean 2-page output with no blank pages. */
@page { size: A4 landscape; margin: 0; }

@media print {
  /* Hide all screen-only UI */
  .no-print,
  #controls,
  #generate-btn,
  #status {
    display: none !important;
  }

  /* Reset page backgrounds */
  body {
    background: #fff;
    margin: 0;
    padding: 0;
  }

  /* Show output if it was hidden */
  #output {
    display: block !important;
  }

  /* End page 1 and start a fresh page for the order lists.
     page-break-after only on #page1 (not on #page2) so there is no
     trailing blank page after the lists. */
  #page1 {
    page-break-after: always;
  }

  /* Each print-page fills its physical page. */
  .print-page {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 8mm;
    position: relative;
    box-shadow: none;
  }

  /* Map height for landscape A4.
     194mm content height − 28mm (title + instructions) − 18mm (key strip) = 148mm map. */
  #map {
    height: 138mm !important;
    width: 100% !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Key strip below the map */
  .key-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 4px;
    padding: 4px 6px;
    border: 1px solid #bbb;
    font-size: 9px;
    line-height: 1.6;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Leaflet layers */
  .leaflet-tile,
  .leaflet-tile-container,
  .leaflet-overlay-pane,
  .leaflet-marker-pane {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Pin markers */
  .pin-wrapper,
  .pin-dot,
  .pin-label,
  .pin-label-multi {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Key box */
  .key-box {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Page 2 columns */
  .page2-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8mm;
  }

  .page2-columns--three {
    grid-template-columns: 1fr 1fr 0.55fr;
  }

  /* Order lines */
  .order-line {
    border-bottom: 1px solid #ccc;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Checkboxes — force rendering in print (browsers suppress form elements by default) */
  .check-label input[type="checkbox"] {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    width: 11px;
    height: 11px;
  }
}