/* Printable report (A4). Everything but #report is hidden; levels carry their
   number as well as colour so the page reads in black and white too. */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > *:not(#report) { display: none !important; }
  .report { display: block !important; }

  .r-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #111; padding-bottom: 8pt; margin-bottom: 10pt; }
  .r-brand { font-family: var(--display); font-size: 10pt; letter-spacing: .02em; color: #555; }
  .r-brand em { font-style: italic; color: var(--p3); }
  .r-head h1 { font-family: var(--display); font-weight: 400; font-size: 24pt; letter-spacing: -.02em; line-height: 1.1; margin: 2pt 0; }
  .r-head p { font-size: 11pt; color: #333; }
  .r-gen { font-size: 9pt; color: #666; }

  .r-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6pt; margin-bottom: 8pt; }
  .r-tiles div { border: 1px solid #ccc; border-radius: 6pt; padding: 6pt 8pt; font-size: 8.5pt; color: #444; }
  .r-tiles span { display: block; font-family: var(--display); font-size: 18pt; color: #111; line-height: 1.1; }

  .r-legend { display: flex; flex-wrap: wrap; gap: 4pt 12pt; font-size: 8.5pt; margin-bottom: 10pt; align-items: center; }
  .r-legend span { display: inline-flex; align-items: center; gap: 4pt; }
  .r-legend i { display: inline-grid; place-items: center; width: 13pt; height: 13pt; border-radius: 3pt; font-style: normal; font-weight: 700; font-size: 8pt; border: 1px solid #bbb; }
  .r-legend .lvl-1 i { background: var(--p1); border-color: var(--p1); }
  .r-legend .lvl-2 i { background: var(--p2); border-color: var(--p2); color: #fff; }
  .r-legend .lvl-3 i { background: var(--p3); border-color: var(--p3); color: #fff; }
  .r-legend .med u { width: 14pt; height: 3pt; background: var(--c); border-radius: 2pt; }

  .r-sec { margin-top: 12pt; }
  .r-sec h2 { font-family: var(--display); font-weight: 500; font-size: 13pt; margin-bottom: 6pt; border-bottom: 1px solid #ddd; padding-bottom: 3pt; }
  .avoid { break-inside: avoid; }
  .r-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14pt; }
  .r-chart { width: 100%; }
  .r-chart svg { height: auto; }
  .chart .trend-line { animation: none; stroke-dashoffset: 0; }
  .chart .hit { display: none; }

  .r-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10pt 12pt; }
  .pm { break-inside: avoid; }
  .pm-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 9.5pt; margin-bottom: 3pt; }
  .pm-h b { font-family: var(--display); font-weight: 500; font-size: 11pt; }
  .pm-h span { color: #555; font-size: 8.5pt; }
  .pw, .pg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5pt; }
  .pw span { font-size: 7pt; text-align: center; color: #777; }
  .pc { position: relative; aspect-ratio: 1; border: 1px solid #ddd; border-radius: 2.5pt; font-size: 6.5pt; color: #666; }
  .pc.pad { border: 0; }
  .pc.out { background: #f4f4f4; border-color: #eee; color: #bbb; }
  .pc .pd { position: absolute; top: 1pt; left: 2pt; }
  .pc b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10pt; font-weight: 700; color: #111; padding-top: 2pt; }
  .pc.lvl-1 { background: var(--p1); border-color: var(--p1); }
  .pc.lvl-2 { background: var(--p2); border-color: var(--p2); }
  .pc.lvl-2 b, .pc.lvl-2 .pd, .pc.lvl-3 b, .pc.lvl-3 .pd { color: #fff; }
  .pc.lvl-3 { background: var(--p3); border-color: var(--p3); }
  .pc em { position: absolute; top: 0; right: 1pt; font-size: 6pt; font-style: normal; color: var(--c); }
  .pc.lvl-2 em, .pc.lvl-3 em { color: #fff; }
  .pc u { position: absolute; left: 0; right: 0; bottom: 0; height: 2pt; background: var(--c); }

  table.data { font-size: 9pt; }
  table.data th { padding: 4pt 6pt; }
  table.data td { padding: 4pt 6pt; }
  .r-meds .sw { display: inline-block; width: 7pt; height: 7pt; border-radius: 50%; margin-right: 5pt; }
  .r-notes td:first-child { white-space: nowrap; width: 1%; }
  .r-notes td.lvl-1 b, .r-notes td.lvl-2 b, .r-notes td.lvl-3 b { display: inline-grid; place-items: center; width: 14pt; height: 14pt; border-radius: 3pt; }
  .r-notes td.lvl-1 b { background: var(--p1); }
  .r-notes td.lvl-2 b { background: var(--p2); color: #fff; }
  .r-notes td.lvl-3 b { background: var(--p3); color: #fff; }
  .r-notes tr { break-inside: avoid; }
  .mix-row { grid-template-columns: 70pt 1fr 50pt; font-size: 9pt; }
  .r-foot { margin-top: 14pt; padding-top: 6pt; border-top: 1px solid #ccc; font-size: 8pt; color: #666; }
}