/* The saved report: #print-report is filled by js/report-capture.js and is the only thing on the paper. */
#print-report { display: none; }

@media print {
  @page { size: A4; margin: 10mm; }
  #print-report, #print-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  /* The phone layout pins the body to the viewport (position: fixed; inset: 0); on paper that clips the report to nothing on iOS. */
  html body { position: static !important; width: auto !important; }
  body:has(#print-report:not(:empty)) > *:not(#print-report) { display: none !important; }
  #print-report { display: block; color: #1a1a2e; font: 11pt/1.4 system-ui, sans-serif; }
  #print-report h1 { font-size: 16pt; margin: 0 0 3mm; }
  #print-report .print-map { display: block; width: 100%; height: auto; border-radius: 2mm; margin-bottom: 3mm; }
  #print-report .print-no-map { color: #666; font-size: 9pt; margin-bottom: 5mm; }
  #print-report .print-dome { display: block; width: 100%; height: auto; }
  /* A phone's system font wraps more and runs taller than the desktop's, so the page has to carry some slack. */
  #print-report .month-bars { height: 90px; margin-top: 8px; }
  #print-report .print-foot { margin-top: 3mm; padding-top: 3mm; border-top: 0.3mm solid #bbb; font-size: 8.5pt; color: #444; }
  #print-report .print-foot div + div { margin-top: 1mm; }
  /* ID specificity: on a phone-width page "html.is-mobile .result-col" makes the columns display: contents, and these must not follow it. */
  html #print-report .result-col { display: block; padding: 0; background: none; margin: 0 0 3mm; }
  /* The two-column page: figure left, dome right, month chart across the bottom. Its own grid, since the screen's grid hangs on #result-content, whose id the copy does not have. */
  #print-report .print-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main dome" "bars bars"; column-gap: 6mm; row-gap: 3mm; }
  html #print-report .result-col--main { grid-area: main; }
  html #print-report .result-col--bars { grid-area: bars; }
  html #print-report .result-col--dome { grid-area: dome; }
  html #print-report .print-result .result-col { margin: 0; }
  #print-report .result-col, #print-report .result-headline, #print-report .month-bars { break-inside: avoid; }
  #print-report .hidden { display: none !important; }
  #print-report .result-uncertain { display: block !important; }
}