/* ════════════════════════════════════════
   PDF REPORT — REPORT LAYOUT STYLES
   Always loaded (not media="print") so every rule below is part of the live
   CSSOM at all times — html2canvas clones the page into a hidden iframe to
   rasterize it, and that clone doesn't reliably pick up an async stylesheet
   swap done right before capture. Visibility is toggled instead via the
   lightweight body.exporting-pdf class (see downloadPDF() in js/app.js).
════════════════════════════════════════ */

/* Hide everything except the report, only while actively exporting */
body.exporting-pdf > *:not(#pdf-report) { display: none !important; }
body.exporting-pdf #pdf-report { display: block !important; }

@page {
  size: A4;
  margin: 0;
}

/* ── PAGE SHELL ── */
.rp-page {
  width: 210mm;
  min-height: 297mm;
  page-break-after: always;
  position: relative;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.rp-page:last-child { page-break-after: avoid; }

/* ── COVER PAGE ── */
.rp-cover {
  background: #2d5a63;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 50px;
  text-align: center;
  color: #fff;
  min-height: 297mm;
}
.rp-cover .c-logo { height: 52px; margin-bottom: 48px; }
.rp-cover .c-zone-em { font-size: 80px; margin-bottom: 16px; display: block; line-height: 1; }
.rp-cover .c-zone-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; opacity: .65; margin-bottom: 8px; }
.rp-cover .c-zone-name { font-size: 52px; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px; }
.rp-cover .c-stmt { font-size: 16px; opacity: .85; max-width: 360px; line-height: 1.7; margin-bottom: 44px; }
.rp-cover .c-score-ring { width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1); border: 3px solid rgba(255,255,255,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 44px; }
.rp-cover .c-score-ring .csn { font-size: 40px; font-weight: 700; line-height: 1; }
.rp-cover .c-score-ring .csl { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .5px; }
.rp-cover .c-divider { width: 60px; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; margin: 0 auto 28px; }
.rp-cover .c-title { font-size: 14px; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.rp-cover .c-date { font-size: 13px; opacity: .5; }
.rp-cover .c-footer { position: absolute; bottom: 32px; left: 0; right: 0; font-size: 11px; opacity: .4; text-align: center; }

/* ── INNER PAGE LAYOUT ── */
.rp-inner {
  padding: 40px 44px;
  min-height: 297mm;
  background: #f7fafa;
  display: flex;
  flex-direction: column;
}
.rp-inner.dark-bg { background: #1A2E2F; color: #fff; }
.rp-inner.green-bg { background: #226f4d; color: #fff; }

/* ── PAGE HEADER ── */
.rp-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 2px solid rgba(90,149,158,.2); }
.rp-ph .ph-logo { height: 22px; opacity: .6; }
.rp-ph .ph-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #5A959E; }
.rp-ph .ph-page { font-size: 11px; color: #8fa8a8; }
.rp-inner.dark-bg .rp-ph { border-bottom-color: rgba(255,255,255,.15); }
.rp-inner.dark-bg .rp-ph .ph-title { color: #9DB6A1; }
.rp-inner.dark-bg .rp-ph .ph-page { color: rgba(255,255,255,.4); }
.rp-inner.green-bg .rp-ph { border-bottom-color: rgba(255,255,255,.2); }
.rp-inner.green-bg .rp-ph .ph-title { color: rgba(255,255,255,.8); }

/* ── SECTION HEADER ── */
.rp-sec-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.rp-sec-hdr .sh-ic { font-size: 20px; }
.rp-sec-hdr .sh-tx { font-size: 18px; font-weight: 700; color: #1A2E2F; }
.rp-inner.dark-bg .rp-sec-hdr .sh-tx { color: #fff; }
.rp-inner.green-bg .rp-sec-hdr .sh-tx { color: #fff; }
.rp-sec-hdr .sh-line { flex: 1; height: 2px; background: rgba(90,149,158,.2); border-radius: 1px; }
.rp-inner.dark-bg .rp-sec-hdr .sh-line { background: rgba(255,255,255,.15); }
.rp-inner.green-bg .rp-sec-hdr .sh-line { background: rgba(255,255,255,.2); }

/* ── SNAPSHOT PAGE ── */
.rp-snap-summary { font-size: 16px; color: #2d4444; line-height: 1.75; margin-bottom: 20px; font-weight: 500; background: #fff; border-radius: 14px; padding: 20px 22px; border-left: 4px solid #5A959E; }
.rp-snap-insight { display: flex; gap: 14px; align-items: flex-start; background: #e8f4f6; border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; }
.rp-snap-insight .si-ic { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.rp-snap-insight .si-tx { font-size: 14px; color: #3d7178; line-height: 1.65; font-weight: 500; }

/* ── DIMENSION GRID (heatmap) ── */
.rp-dimgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.rp-dimcell { border-radius: 12px; padding: 16px 12px; text-align: center; }
.rp-dimcell.bl { background: #e8f5ee; border: 2px solid #4caf7d; }
.rp-dimcell.bm { background: #fef6e4; border: 2px solid #e8a838; }
.rp-dimcell.bh { background: #fdeaea; border: 2px solid #e07070; }
.rp-dimcell .dc-ic { font-size: 24px; margin-bottom: 6px; }
.rp-dimcell .dc-nm { font-size: 11px; font-weight: 700; color: #1A2E2F; margin-bottom: 5px; line-height: 1.3; }
.rp-dimcell.bl .dc-bd { color: #2d7a4f; } .rp-dimcell.bm .dc-bd { color: #a06a10; } .rp-dimcell.bh .dc-bd { color: #a04040; }
.rp-dimcell .dc-bd { font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* ── DIMENSION BARS ── */
.rp-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.rp-brow .rb-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rp-brow .rb-nm { font-size: 13px; font-weight: 600; color: #1A2E2F; display: flex; align-items: center; gap: 7px; }
.rp-brow .rb-bdg { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; }
.rp-brow .rb-bdg.bl { background: #e8f5ee; color: #2d7a4f; }
.rp-brow .rb-bdg.bm { background: #fef6e4; color: #a06a10; }
.rp-brow .rb-bdg.bh { background: #fdeaea; color: #a04040; }
.rp-brow .rb-track { height: 10px; background: #e2eaea; border-radius: 5px; overflow: hidden; }
.rp-brow .rb-fill { height: 100%; border-radius: 5px; }
.rp-brow .rb-fill.bl { background: #4caf7d; }
.rp-brow .rb-fill.bm { background: #e8a838; }
.rp-brow .rb-fill.bh { background: #e07070; }

/* ── STRENGTHS PAGE ── */
.rp-str-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.rp-str-card { background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); border-radius: 16px; padding: 24px 20px; }
.rp-str-card .sc-ic { font-size: 36px; margin-bottom: 10px; display: block; }
.rp-str-card .sc-nm { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.rp-str-card .sc-row { margin-bottom: 10px; }
.rp-str-card .sc-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.55); margin-bottom: 3px; }
.rp-str-card .sc-val { font-size: 13px; color: rgba(255,255,255,.9); line-height: 1.6; }

/* ── PRIORITY AREA PAGES ── */
.rp-pa-hdr { border-radius: 16px; padding: 22px 24px; margin-bottom: 20px; display: flex; align-items: center; gap: 16px; }
.rp-pa-hdr.pa1 { background: #a04040; }
.rp-pa-hdr.pa2 { background: #a06a10; }
.rp-pa-hdr.pa3 { background: #3d7178; }
.rp-pa-hdr .pah-ic { font-size: 40px; flex-shrink: 0; }
.rp-pa-hdr .pah-rank { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.rp-pa-hdr .pah-dim { font-size: 22px; font-weight: 700; color: #fff; }
.rp-pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.rp-pa-block { background: #fff; border-radius: 12px; padding: 16px 18px; }
.rp-pa-block.full { grid-column: 1 / -1; }
.rp-pa-block .pab-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #5A959E; margin-bottom: 8px; }
.rp-pa-block .pab-txt { font-size: 13px; color: #5a7272; line-height: 1.65; }
.rp-pa-block ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.rp-pa-block ul li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #2d4444; line-height: 1.5; }
.rp-pa-block ul li .li-dot { width: 6px; height: 6px; border-radius: 50%; background: #5A959E; flex-shrink: 0; margin-top: 5px; }
.rp-pa-metric { background: #24444a; border-radius: 12px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; }
.rp-pa-metric .pm-ic { font-size: 20px; flex-shrink: 0; }
.rp-pa-metric .pm-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.rp-pa-metric .pm-txt { font-size: 13px; color: #fff; font-weight: 600; line-height: 1.5; }

/* ── QUICK WINS PAGE ── */
.rp-qw-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rp-qw-item { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; }
.rp-qw-item .qwi-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #9DB6A1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 700; color: #9DB6A1; }
.rp-qw-item .qwi-txt { font-size: 14px; color: rgba(255,255,255,.9); line-height: 1.65; font-weight: 500; flex: 1; }

/* ── BACK COVER ── */
.rp-back { background: #1A2E2F; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; min-height: 297mm; padding: 60px 50px; }
.rp-back .bc-logo { height: 44px; margin-bottom: 28px; }
.rp-back .bc-name { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.rp-back .bc-tag { font-size: 13px; opacity: .55; margin-bottom: 40px; }
.rp-back .bc-divider { width: 50px; height: 2px; background: #5A959E; border-radius: 1px; margin: 0 auto 32px; }
.rp-back .bc-contacts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.rp-back .bc-link { font-size: 14px; color: rgba(255,255,255,.75); }
.rp-back .bc-socs { display: flex; gap: 16px; justify-content: center; margin-bottom: 40px; }
.rp-back .bc-soc { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.8); padding: 9px 20px; border-radius: 50px; font-size: 13px; font-weight: 600; }
.rp-back .bc-privacy { font-size: 11px; opacity: .35; max-width: 340px; line-height: 1.6; }