/* One Letter page for the fridge or the pharmacist. Colors and words both survive.
   Verified with scripts/check-print.mjs (headless Chrome) against the Phoenix example. */

@page {
  size: Letter;
  margin: 0.35in 0.45in;
}

@media print {
  html { font-size: 9pt; }
  body { background: #fff !important; color: #000 !important; line-height: 1.3; }
  main { max-width: none; padding: 0; }
  h1 { font-size: 13pt; margin: 0 0 2pt; }
  h2 { font-size: 10.5pt; margin: 4pt 0 2pt; }
  h3 { font-size: 9.5pt; margin: 0 0 1pt; }
  p { margin: 1pt 0 2pt; }
  ul { margin: 1pt 0 2pt; }

  .no-print, .site-header, .toggle-row, .info-btn, .info-panel, details.source, footer, #exampleBanner, .button, button { display: none !important; }

  .card { border: 1px solid #999; border-radius: 3pt; padding: 3pt 5pt; margin: 2pt 0; break-inside: avoid; background: #fff !important; }
  .card.warn { border: 1.5pt solid #000; }
  .card.emergency { border: 1.5pt solid #000; }
  .med-card p { margin: 0 0 1pt; }

  #heatSection { padding: 3pt 5pt; }
  .plan-header .place { font-size: 10pt; }
  .heat-week { gap: 2pt; margin: 2pt 0; grid-template-columns: repeat(7, 1fr) !important; }
  .heat-day { -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1px solid #666; padding: 1.5pt 1pt; }
  .heat-day .dow { font-size: 7.5pt; }
  .heat-day .date { font-size: 6.5pt; }
  .heat-day .word { font-size: 7pt; margin-top: 1pt; }
  .heat-label { background: #fff !important; border: 1px solid #000; padding: 1pt 4pt; font-size: 8pt; margin-top: 2pt; }

  .summary { font-size: 9.5pt; margin: 1pt 0; }
  .this-week { margin-top: 0; }
  .plain-list { padding-left: 1.1rem; }
  .plain-list li { margin: 1pt 0; }
  .badge { border: 1px solid #000; color: #000 !important; background: #fff !important; font-size: 7pt; }

  /* 911 signs in two columns */
  .signs { columns: 2; column-gap: 12pt; margin: 1pt 0 2pt; padding-left: 1rem; }
  .signs li { break-inside: avoid; margin: 0; }

  .never-stop { font-size: 10pt; border-top: 1.5pt solid #000; padding-top: 3pt; margin-top: 3pt; }
  .closing details { display: none; }
  /* Sources: one compact block. Full URLs are on the site; the printed page names the sources. */
  .sources { font-size: 6.2pt; line-height: 1.15; margin-top: 1pt; }
  .sources h2 { font-size: 7pt; margin: 2pt 0 0; }
  .sources ul { padding: 0; margin: 0; list-style: none; }
  .sources li { display: inline; margin: 0; }
  .sources li + li::before { content: " · "; }
  .sources p { margin: 1pt 0 0; font-size: 6pt; }
  .sources a::after { content: none; }
  a { color: #000; text-decoration: none; }

  /* Long medicine lists: cards flow in two columns at the normal print size. The Phoenix example (5 medicines)
     fits one page; measured, 8 to 15 medicines print on two pages without splitting a card. */
  .cards-section.many { column-count: 2; column-gap: 6pt; }
  .cards-section.many h2 { column-span: all; }
  .cards-section.many .med-card { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 3pt; }

  /* Summary, steps, and a tick box beside each pharmacist question. */
  /* Summary on the left, steps on the right, so the section costs only a few lines. */
  .next-steps { padding: 2pt 5pt; display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 10pt; }
  .next-steps > h2, .next-steps > p { grid-column: 1; }
  .next-steps > h3, .next-steps > .steps { grid-column: 2; }
  .next-steps > h3 { grid-row: 1; }
  .next-steps > .steps { grid-row: 2 / span 2; }
  .next-steps h2 { margin: 0; }
  .next-steps h3 { font-size: 9pt; margin: 0; }
  .next-steps p { margin: 0 0 1pt; }
  .next-steps .steps { margin: 0; padding-left: 12pt; }
  .next-steps .steps li { margin: 0; }
  /* A drawn tick box, not a font glyph, so it prints the same everywhere. */
  .med-card .ask::before { content: ""; display: inline-block; width: 7pt; height: 7pt; border: 1pt solid #000; margin-right: 3pt; vertical-align: -1pt; }
  /* 911 signs in three columns on paper, with tighter spacing in that box. */
  .signs { columns: 3; }
  .card.emergency { padding: 2pt 5pt; }
  .card.emergency h2 { margin: 0; }
  .card.emergency p { margin: 0 0 1pt; }
  .med-card h3 { margin-bottom: 0; }
  #planArea h2 { margin: 3pt 0 1pt; }
  /* On paper the coloured week sits right above the cards and step 3 says which days matter,
     so each card's own "This week" line is left to the screen version. */
  .med-card .this-week { display: none !important; }
  /* With saved or replayed data the summary line above the week already says it is a past heat wave,
     so the separate label is screen-only on paper. Two-column cards set a touch smaller. */
  .heat-label { display: none !important; }
  .cards-section.many .med-card { font-size: 8.4pt; line-height: 1.25; }
  .cards-section.many .med-card h3 { font-size: 9pt; }
}