/* ==========================================================================
   BreatheOS — printed report.
   Loaded with media="print", so these rules only apply to the print pipeline
   (including "Save as PDF"). The app itself is hidden; the report subtree
   built by js/report.js is what goes on the page.
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 14mm 12mm;
}

/* --- hide the application shell ---------------------------------------- */
.app,
.tabbar,
.topbar,
.sheet-host,
.toast-host,
.boot { display: none !important; }

body::before { display: none !important; }

html, body {
  background: #fff !important;
  color: #14181d !important;
  font-size: 10pt;
  line-height: 1.45;
}

.report {
  display: block !important;
  font-family: 'Poppins', system-ui, sans-serif;
  color: #14181d;
  /* Chart fills and status pills carry meaning — keep them in the output. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.report * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* Icons elsewhere default to 1.15em; report charts must fill their column. */
.rp-chart svg { width: 100%; height: auto; display: block; }

/* --- header ------------------------------------------------------------- */
.rp-head { border-bottom: 1.5pt solid #14181d; padding-bottom: 8pt; margin-bottom: 14pt; }

.rp-head__brand {
  display: flex; align-items: center; gap: 6pt;
  font-size: 9.5pt; font-weight: 600; letter-spacing: .02em; color: #0F7A63;
}
.rp-mark {
  width: 11pt; height: 11pt; border-radius: 50%; display: inline-block;
  background:
    radial-gradient(circle at 50% 50%, #0F7A63 0 26%, transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 0 52%, #0F7A63 53% 68%, transparent 70%);
}

.rp-title { font-size: 20pt; font-weight: 600; letter-spacing: -.02em; margin: 6pt 0 10pt; }

.rp-meta { display: flex; flex-wrap: wrap; gap: 4pt 22pt; margin: 0 0 8pt; }
.rp-meta div { min-width: 0; }
.rp-meta dt { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; }
.rp-meta dd { margin: 1pt 0 0; font-size: 10pt; font-weight: 500; }

.rp-note {
  font-size: 8pt; line-height: 1.5; color: #4b5563; margin: 6pt 0 0; max-width: 62em;
}
.rp-note-cell { font-size: 8pt; color: #374151; }

/* --- sections ----------------------------------------------------------- */
.rp-section { margin: 0 0 16pt; }
.rp-avoid-break { break-inside: avoid; page-break-inside: avoid; }

.rp-section h2 {
  font-size: 11.5pt; font-weight: 600; margin: 0 0 8pt;
  padding-bottom: 3pt; border-bottom: .75pt solid #d1d5db;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10pt;
}
.rp-h2note { font-size: 8pt; font-weight: 400; color: #6b7280; }
.rp-section h3 { font-size: 9pt; font-weight: 600; color: #374151; margin: 0 0 5pt; }

.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16pt; align-items: start; }

/* --- metric grid -------------------------------------------------------- */
.rp-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt; }

.rp-metric {
  border: .75pt solid #d1d5db; border-radius: 4pt; padding: 6pt 7pt;
  break-inside: avoid;
}
.rp-metric--flag { border-color: #C0342B; background: #fdf3f2; }
.rp-metric__label {
  display: block; font-size: 7.5pt; text-transform: uppercase;
  letter-spacing: .06em; color: #6b7280;
}
.rp-metric__value {
  display: block; font-size: 15pt; font-weight: 600; letter-spacing: -.02em; margin-top: 2pt;
  font-variant-numeric: tabular-nums;
}
.rp-metric--flag .rp-metric__value { color: #C0342B; }
.rp-metric__unit { font-size: 8pt; font-weight: 500; color: #6b7280; letter-spacing: 0; }
.rp-metric__note { display: block; font-size: 7.5pt; color: #6b7280; margin-top: 1pt; }

/* --- tables ------------------------------------------------------------- */
.rp-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.rp-table th {
  text-align: left; font-weight: 600; font-size: 7.5pt;
  text-transform: uppercase; letter-spacing: .05em; color: #4b5563;
  border-bottom: .75pt solid #9ca3af; padding: 3pt 5pt 3pt 0;
}
.rp-table td { padding: 3.5pt 5pt 3.5pt 0; border-bottom: .5pt solid #e5e7eb; vertical-align: top; }
.rp-table tr { break-inside: avoid; page-break-inside: avoid; }
.rp-num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-status-col { text-align: right; white-space: nowrap; }
.rp-table--compact td { padding: 2.5pt 5pt 2.5pt 0; }
.rp-table--log { font-size: 8pt; }
.rp-table--log thead { display: table-header-group; }   /* repeat header across pages */

.rp-pill {
  display: inline-block; padding: 1pt 6pt; border-radius: 8pt;
  font-size: 7.5pt; font-weight: 600;
  background: #e8f5f1; color: #0F7A63; border: .5pt solid #9fd3c6;
}
.rp-pill--flag { background: #fdeceb; color: #C0342B; border-color: #e8a9a4; }

.rp-sev {
  display: inline-block; min-width: 13pt; text-align: center;
  padding: .5pt 3pt; border-radius: 3pt; font-weight: 600; font-size: 7.5pt; color: #fff;
}
.rp-sev--1 { background: #0F7A63; }
.rp-sev--2 { background: #4E8C2B; }
.rp-sev--3 { background: #B07A00; }
.rp-sev--4 { background: #C25E17; }
.rp-sev--5 { background: #C0342B; }

.rp-empty { font-size: 8.5pt; color: #6b7280; font-style: italic; margin: 0; }

/* --- charts ------------------------------------------------------------- */
/* Charts are a 340-unit viewBox scaled to their container. Left unbounded on a
   186mm page they scale ~2x and their axis labels end up larger than the body
   copy — cap the width so the type stays in proportion. */
.rp-chart { margin: 2pt 0 4pt; max-width: 132mm; }
.rp-two .rp-chart { max-width: none; }

.rp-legend {
  display: flex; gap: 14pt; font-size: 8pt; color: #4b5563; margin: 2pt 0 0;
}
.rp-legend i { display: inline-block; width: 7pt; height: 7pt; border-radius: 1.5pt; margin-right: 4pt; }

/* --- footer ------------------------------------------------------------- */
.rp-foot {
  margin-top: 18pt; padding-top: 8pt; border-top: .75pt solid #d1d5db;
  font-size: 7.5pt; color: #4b5563; break-inside: avoid;
}
.rp-foot p { margin: 0 0 3pt; }
.rp-foot strong { color: #14181d; }