/* Desktop-grade "Why Now?" report overlay (.wnr) — port of the field tools
   app's report component styling. In the original this CSS was injected as a
   <style> element; here it is a real stylesheet (style-src 'self'). The two
   .page blocks are US-Letter sheets — the capture units for the shared PDF —
   and the @media print block doubles as the capture compaction source via the
   engine's print-rule mirroring. */

#wnr{display:none;}
#wnr.open{display:block;}
/* The system font stack is part of the report's design (and its page-fit math):
   the tools app renders this report in SF/system type, noticeably more compact
   than the Dunbar brand font the rest of this tool inherits. line-height:normal
   matches the tools app too — its document never sets a body line-height, while
   this app's body{line-height:1.5} would otherwise inherit into every table row
   and blow the letter-page fit that the tools app's report was designed around. */
.wnr-host{position:fixed;inset:0;z-index:9999;background:#cfd6dd;overflow:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:-apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;line-height:normal;color:#10324f;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.wnr-bar{position:sticky;top:0;left:0;right:0;z-index:5;display:flex;justify-content:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 12px 12px;background:rgba(16,40,60,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.wnr-bar button{font-family:inherit;font-size:13px;font-weight:800;border:none;border-radius:10px;padding:10px 18px;cursor:pointer;}
.wnr-bar .pr{background:#bcd64a;color:#16290a;}
.wnr-bar .sec{background:rgba(255,255,255,.16);color:#fff;}
.wnr{--ink:#10324f;--ink2:#41607a;--mut:#7a8a98;--line:#e4e0d6;--navy:#103a5c;--lime:#7f9a16;--limebg:#f2f6df;--red:#c4503e;--good:#2f7d4f;}
.wnr .page{width:8.5in;min-height:11in;background:#fff;margin:18px auto;padding:.5in .55in;box-shadow:0 8px 30px rgba(0,0,0,.22);}
.wnr .rhead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--navy);padding-bottom:14px;}
.wnr .rhead .logo{height:30px;width:auto;}
.wnr .rhead .meta{text-align:right;font-size:10.5px;color:var(--mut);line-height:1.5;}
.wnr .rhead .meta b{color:var(--ink);font-size:11.5px;}
.wnr .rhead .rhtitle{text-align:right;}
/* System mono, NOT var(--mono): the Geist Mono webfont lays out with metrics the
   canvas rasterizer does not reproduce (html2canvas draws text with canvas font
   resolution), which garbled/offset every mono label in the shared PDF. The tools
   app's report uses this exact system-mono stack. */
.wnr .rhead .rheyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--lime);margin-bottom:4px;}
.wnr .rhead .rhname{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--navy);line-height:1;}
.wnr .rhead .rhname span{color:var(--lime);}
.wnr .rclient{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:16px 0 4px;padding-bottom:15px;border-bottom:1px solid var(--line);}
.wnr .rclient .rc label{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);margin-bottom:3px;}
.wnr .rclient .rc .v{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
.wnr .rclient .rpill{margin-left:auto;background:#bcd64a;color:#16290a;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:40px;padding:8px 18px;}
.wnr .htitle{font-size:26px;font-weight:800;letter-spacing:-.7px;margin:14px 0 4px;line-height:1.08;}
.wnr .hsub{font-size:13px;color:var(--ink2);margin-bottom:4px;}
.wnr .hsub b{color:var(--navy);}
.wnr .sectt{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);margin:22px 0 11px;display:flex;align-items:center;gap:9px;}
.wnr .sectt::after{content:'';flex:1;height:1px;background:var(--line);}
.wnr .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;}
.wnr .acard{border:1px solid var(--line);border-radius:12px;padding:13px 13px 11px;background:#fbfaf7;}
.wnr .acard .ck{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);}
.wnr .acard .cn{font-size:25px;font-weight:800;letter-spacing:-1px;color:var(--navy);margin:6px 0 1px;font-variant-numeric:tabular-nums;}
.wnr .acard .cl{font-size:10px;color:var(--ink2);font-weight:700;margin-bottom:9px;}
.wnr .acard .cr{display:flex;justify-content:space-between;font-size:10px;padding:3px 0;border-top:1px dotted var(--line);}
.wnr .acard .cr .l{color:var(--ink2);}
.wnr .acard .cr .v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--good);}
.wnr .acard .cr .v.dn{color:var(--red);}
.wnr .acard.best{border-color:#bcd64a;background:#f7faed;}
.wnr .acard.best .ck{color:#5f7414;}
.wnr .be{margin-top:16px;background:var(--limebg);border:1px solid #d6e29a;border-left:4px solid var(--lime);border-radius:10px;padding:13px 15px;font-size:12.5px;line-height:1.55;}
.wnr .be b{color:#5f7414;}
.wnr table.cmp{width:100%;border-collapse:collapse;font-size:11px;}
.wnr table.cmp th,.wnr table.cmp td{padding:7px 10px;text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line);}
.wnr table.cmp thead th{background:var(--navy);color:#fff;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;}
.wnr table.cmp th.l,.wnr table.cmp td.l{text-align:left;font-weight:700;color:var(--ink);}
.wnr table.cmp thead th.l{color:#fff;}
.wnr table.cmp td.today{font-weight:800;color:var(--ink);background:#eef4f8;}
.wnr table.cmp tbody tr:nth-child(even) td{background:#faf8f3;}
.wnr table.cmp tr.net td{background:var(--navy)!important;color:#fff;font-weight:800;border-bottom:none;}
.wnr table.cmp tr.net td.l{color:#fff;}
.wnr table.cmp .neg{color:var(--red);font-weight:800;}
/* Wrap guards: pin the auto table layout to the tools-app outcome (one-line
   column headers and net-row label, appreciation pills wrapping below their
   values) so small platform font-width differences can't reshuffle column
   widths and blow the letter-page fit. Text metrics are untouched. */
.wnr table.cmp thead th,.wnr table.brk thead th{white-space:nowrap;}
.wnr table.cmp tr.net td.l,.wnr table.brk tr.net td.l{white-space:nowrap;}
.wnr .apprtag{display:inline-block;margin-left:6px;font-size:8.5px;font-weight:800;color:#5f7414;background:var(--limebg);border:1px solid #d6e29a;border-radius:20px;padding:1px 6px;vertical-align:middle;}
.wnr .charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.wnr .chartbox{border:1px solid var(--line);border-radius:12px;padding:13px 13px 6px;}
.wnr .chartbox .ctt{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);margin-bottom:3px;}
.wnr .chartbox .leg{display:flex;gap:14px;font-size:9.5px;color:var(--ink2);font-weight:700;margin-bottom:2px;}
.wnr .chartbox .leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;}
.wnr .chartbox .leg .lg1{background:#1f5b86;}
.wnr .chartbox .leg .lg2{background:#9bb22f;}
.wnr .chartbox svg{display:block;max-width:100%;}
.wnr table.brk{width:100%;border-collapse:collapse;font-size:11px;margin-top:2px;}
.wnr table.brk th,.wnr table.brk td{padding:8px 12px;text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line);}
.wnr table.brk thead th{background:var(--navy);color:#fff;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;}
.wnr table.brk th.l,.wnr table.brk td.l{text-align:left;font-weight:700;color:var(--ink);}
.wnr table.brk thead th.l{color:#fff;}
.wnr table.brk tbody tr:nth-child(even) td{background:#faf8f3;}
.wnr table.brk td.pos{color:#35708f;font-weight:800;}
.wnr table.brk td.neg{color:var(--red);font-weight:800;}
.wnr table.brk tr.net td{background:var(--navy)!important;color:#fff;font-weight:800;border-bottom:none;font-size:12.5px;}
.wnr table.brk tr.net td.l{color:#fff;}
.wnr .two{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start;}
.wnr .panel{border:1px solid var(--line);border-radius:12px;padding:14px 15px;}
.wnr .panel h4{margin:0 0 9px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--navy);}
.wnr .panel .pr2{display:flex;justify-content:space-between;font-size:11.5px;padding:5px 0;border-top:1px solid var(--line);}
.wnr .panel .pr2:first-of-type{border-top:0;}
.wnr .panel .pr2 .v{font-weight:800;font-variant-numeric:tabular-nums;}
.wnr .panel .pr2 .v.red{color:var(--red);}
.wnr .panel .pr2.tot{border-top:2px solid var(--navy);margin-top:4px;padding-top:8px;}
.wnr .panel .pr2.tot span:first-child{font-weight:800;}
.wnr .lo{display:flex;gap:13px;align-items:center;margin-top:22px;padding-top:15px;border-top:1px solid var(--line);}
.wnr .lo .av{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 auto;}
.wnr .lo .av img{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block;}
.wnr .lo .nm{font-weight:800;font-size:14px;}
/* Graph job title, its own line under the name. Rendered only for an autofilled
   officer — absent under override, and absent when Graph had no jobTitle. Never
   middot-joined onto .nm: the block's own label already states the role. */
.wnr .lo .lotl{font-weight:700;font-size:11px;color:#7a8a98;margin-top:1px;}
.wnr .lo .mt{font-size:11px;color:var(--ink2);margin-top:2px;line-height:1.5;}
.wnr .comp{margin-top:14px;font-size:8.7px;line-height:1.5;color:#92a0ab;}
/* Raster capture pin — the EXACT temp style the tools app's print engine
   applied before html2canvas (8.5in x 11in sheet + the compact compliance
   footer), scoped under html.pdf-capture instead of a temp <style> element
   (style-src 'self' blocks those). Being a real stylesheet rule it also travels
   into html2canvas's clone document with no onclone work. Nothing else is
   restyled for capture: the tools app rasterizes the report as designed, and
   deviating from that (compaction, letter-spacing overrides) is what broke the
   mobile PDF — html2canvas anchors each word at its DOM x-position, so any
   capture-time restyle that changes text metrics shows up as gaps and strikes. */
html.pdf-capture #wnr .wnr .page{width:8.5in!important;min-height:11in!important;padding:.34in .46in!important;margin:0!important;box-shadow:none!important;border-radius:0!important;}
html.pdf-capture #wnr .wnr .comp{font-size:8.5px!important;line-height:1.4!important;margin-top:9px!important;}

/* Print rules are scoped to html.wnr-open (toggled by scripts/report-wnr.js
   while the overlay is mounted — in the tools app this CSS only existed while
   the report component was open). Unscoped, the hide-everything rule blanked
   DESKTOP Print/Save PDF of the pg2 report (regression found 2026-07-13).
   :not(iframe) is load-bearing: this block is mirrored under html.pdf-capture
   during capture, and html2canvas renders inside an iframe it appends to body —
   hiding that iframe zeroes every capture. */
@media print{
  html.wnr-open body > *:not(#wnr):not(iframe){display:none!important;}
  html.wnr-open .wnr-host{position:static;background:#fff;overflow:visible;}
  html.wnr-open .wnr-bar{display:none!important;}
  html.wnr-open .wnr .page{box-shadow:none;margin:0;width:auto;min-height:auto;padding:.4in .5in;}
  html.wnr-open .wnr .page + .page{page-break-before:always;}
  html.wnr-open .wnr .avoidbreak{break-inside:avoid;}
}