/* ============================================================
   Shared Export / Print — panel styles (screen) + print rules.
   Loaded site-wide via Layout. Paired with /shared/export.js
   (the PW_export panel) and src/lib/printDoc.ts (document HTML).
   ============================================================ */

/* ---- Export panel (screen only) ---- */
#pw-export-panel { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(11,26,44,.55); backdrop-filter: blur(2px); }
.pw-xbox { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(11,26,44,.30); width: 100%; max-width: 448px; padding: 24px 26px; position: relative; font-family: var(--sans); }
.pw-xbox h3 { font-size: 18px; color: var(--navy-900); margin: 0; padding-right: 22px; }
.pw-xsub { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.pw-xclose { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 16px; color: var(--ink-faint); cursor: pointer; line-height: 1; }
.pw-xclose:hover { color: var(--navy-900); }
.pw-xsec { margin-top: 18px; }
.pw-xlab { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 6px; }
.pw-xopt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; font-size: 14px; color: var(--ink); }
.pw-xopt input { accent-color: var(--gold-600); margin-top: 3px; flex: none; }
.pw-xopt b { font-weight: 600; color: var(--navy-900); }
.pw-xopt .d { font-size: 12px; color: var(--ink-faint); display: block; margin-top: 1px; line-height: 1.4; }
.pw-xpaid { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); border: 1px solid var(--gold); border-radius: 99px; padding: 1px 7px; white-space: nowrap; vertical-align: middle; }
.pw-xpaid svg { width: 8px; height: 9px; display: block; flex: none; }
.pw-xopt.locked { opacity: .6; }
.pw-xopt.locked b, .pw-xopt.locked .d { color: var(--ink-faint); }
.pw-xopt.locked input { cursor: not-allowed; }
.pw-xunlock { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--gold-600); opacity: 1; }
.pw-xunlock:hover { text-decoration: underline; }
.pw-xacts { display: flex; gap: 10px; margin-top: 22px; }
.pw-xbtn { font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 11px 16px; border-radius: 9px; cursor: pointer; border: 1.5px solid var(--navy); background: var(--navy); color: #fff; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pw-xbtn:hover { background: var(--navy-900); }
.pw-xbtn.ghost { background: #fff; color: var(--navy-900); border-color: var(--line); }
.pw-xbtn.ghost:hover { border-color: var(--navy); background: #fff; }
.pw-xbtn.locked { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }
.pw-xnote { font-size: 12px; color: var(--ink-faint); margin-top: 13px; line-height: 1.5; }
.pw-xnote a { color: var(--gold-600); font-weight: 600; }

/* ---- Print document (black & white; brand via type + the book's form) ---- */
#pw-printroot { display: none; }

@media print {
  body.pw-printing > *:not(#pw-printroot) { display: none !important; }
  body.pw-printing #pw-printroot { display: block !important; }
  @page { margin: 1.4cm; }
  html, body { background: #fff !important; }

  .pw-doc { font-family: var(--serif); color: #141414; font-size: 10.5pt; line-height: 1.5; }
  .pw-doc * { box-shadow: none !important; }

  /* masthead */
  .pw-mast { margin-bottom: 20px; }
  .pw-brand { display: flex; align-items: center; gap: 10px; border-bottom: 1.4px solid #141414; padding-bottom: 8px; }
  .pw-brand .pw-logo { height: 26px; width: auto; display: block; }
  .pw-brand .nm { font-family: var(--sans); font-weight: 800; font-size: 12pt; letter-spacing: -.01em; color: #141414; }
  .pw-brand .dt { font-family: var(--mono); font-size: 7pt; letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; margin-left: auto; }
  .pw-eyebrow { font-family: var(--mono); font-size: 8pt; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #141414; margin-top: 15px; }
  .pw-eyebrow.small { margin: 0; font-size: 7.5pt; letter-spacing: .16em; color: #6b6b6b; }
  .pw-title { font-family: var(--sans); font-weight: 800; font-size: 23pt; letter-spacing: -.02em; color: #141414; margin-top: 5px; line-height: 1.02; }

  /* ranked table — threat left, everything else centered */
  .pw-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; font-family: var(--sans); font-size: 9pt; border-top: 1.6px solid #141414; border-bottom: 1.6px solid #141414; }
  .pw-tbl th { text-align: center; padding: 7px 8px; font-family: var(--mono); font-size: 6.8pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #141414; border-bottom: 1px solid #141414; }
  .pw-tbl th.l { text-align: left; }
  .pw-tbl td { padding: 6px 8px; border-bottom: 1px solid #dcdcdc; vertical-align: top; color: #232323; font-family: var(--mono); text-align: center; }
  .pw-tbl tbody tr:last-child td { border-bottom: none; }
  .pw-tbl td.nm { font-family: var(--sans); font-weight: 700; color: #141414; text-align: left; }
  .pw-tbl td.pri { font-weight: 700; color: #141414; }
  .pw-note { font-family: var(--mono); font-size: 7.2pt; letter-spacing: .03em; color: #6b6b6b; margin-top: 10px; line-height: 1.5; }

  /* per-threat sheet */
  .pw-sheet { page-break-inside: avoid; }
  .pw-tname { font-family: var(--sans); font-weight: 800; font-size: 19pt; letter-spacing: -.02em; color: #141414; margin: 2px 0 3px; }
  .pw-tsub { font-family: var(--mono); font-size: 7.5pt; letter-spacing: .05em; color: #6b6b6b; margin-bottom: 12px; }

  /* the bordered analysis form (Ch.12) */
  .pw-form, .pw-plans { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .pw-form .fc { border: 1px solid #333; padding: 7px 9px 9px; vertical-align: top; }
  .fl { display: block; font-family: var(--mono); font-size: 7pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #141414; border-bottom: 1px solid #cfcfcf; padding-bottom: 3px; margin-bottom: 5px; }
  .ft { font-family: var(--serif); font-size: 9.5pt; color: #232323; min-height: 20px; }
  .ft.bl, .ft.nl { margin: 0; padding-left: 16px; }
  .ft.bl li, .ft.nl li { margin: 2px 0; }
  .fc.rat { text-align: center; }
  .fc.rat .big { font-family: var(--sans); font-weight: 800; font-size: 30pt; color: #141414; line-height: 1.05; margin-top: 2px; }
  .fc .mid { font-family: var(--sans); font-weight: 800; font-size: 15pt; color: #141414; margin: 1px 0 8px; }
  .wk { font-family: var(--serif); font-size: 9.5pt; color: #232323; margin: 2px 0; }
  .wk b { font-family: var(--sans); font-weight: 700; color: #141414; }

  /* the bordered plans grid (Ch.13) */
  .pw-plans { margin-top: 2px; }
  .pw-plans th { border: 1px solid #333; padding: 6px 9px; font-family: var(--mono); font-size: 7.5pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #141414; background: #f0f0f0; width: 50%; text-align: left; }
  .pw-plans td { border: 1px solid #333; padding: 7px 9px 10px; vertical-align: top; }
  .pw-plans td.ph { background: #f0f0f0; font-family: var(--mono); font-size: 7.5pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #141414; padding: 5px 9px; }

  /* mini table (category targets) */
  .pw-mini { width: 100%; border-collapse: collapse; margin-top: 4px; }
  .pw-mini th { text-align: left; font-family: var(--mono); font-size: 6.8pt; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #141414; border-bottom: 1px solid #141414; padding: 4px 7px; }
  .pw-mini th.num, .pw-mini td.num { text-align: center; font-family: var(--mono); }
  .pw-mini td { border-bottom: 1px solid #d8d8d8; padding: 4px 7px; font-family: var(--serif); font-size: 9.5pt; color: #232323; }
  .pw-mini th.num { width: 96px; }
  .pw-mini tbody tr:last-child td { border-bottom: none; }

  .pw-tag { font-family: var(--mono); font-size: 6.8pt; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; border: 1px solid #c9c9c9; border-radius: 3px; padding: 0 4px; white-space: nowrap; }
  .pw-muted { color: #9a9a9a; font-style: italic; font-family: var(--serif); }

  /* PACE plan: rung column + phonetic reference block */
  .pw-pace td:first-child { font-family: var(--sans); font-weight: 700; color: #141414; width: 74px; }
  .pw-phon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 14px; margin-top: 4px; }
  .pw-phon span { font-family: var(--serif); font-size: 9pt; color: #232323; }
  .pw-phon b { font-family: var(--mono); }

  /* Field Reference: printable card deck, two-up for cutting out */
  .pw-cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
  .pw-card { border: 1.2px solid #141414; border-radius: 8px; padding: 10px 12px 12px; break-inside: avoid; page-break-inside: avoid; }
  .pw-card .pw-cname { font-family: var(--sans); font-size: 12pt; font-weight: 800; color: #141414; margin: 0 0 2px; }
  .pw-card .pw-cblurb { font-family: var(--serif); font-size: 8.4pt; font-style: italic; color: #555; line-height: 1.35; margin-bottom: 7px; }
  .pw-card .pw-mini { margin-top: 5px; }
  .pw-card .pw-mini td, .pw-card .pw-mini th { font-size: 8.2pt; padding: 2.5px 5px; }
  .pw-card .pw-mini td.pk { font-family: var(--sans); font-weight: 700; color: #141414; white-space: nowrap; }
  .pw-blab { font-family: var(--mono); font-size: 6.6pt; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; margin-top: 7px; }
  .pw-cnote { font-family: var(--serif); font-size: 8.2pt; color: #444; line-height: 1.4; margin-top: 5px; }
  .pw-page-break { page-break-before: always; }

  /* Full-color variant of the rebuilt docs (#pw-printroot) — brand accents. */
  html.pw-exp-color .pw-doc .pw-title, html.pw-exp-color .pw-doc .pw-tname { color: var(--navy-900); }
  html.pw-exp-color .pw-doc .pw-eyebrow { color: var(--gold-600); }
  html.pw-exp-color .pw-doc .pw-brand { border-bottom-color: var(--gold-600); }
  html.pw-exp-color .pw-doc .pw-tbl { border-top-color: var(--navy-900); border-bottom-color: var(--navy-900); }
  html.pw-exp-color .pw-doc .pw-tbl th { color: var(--navy-900); border-bottom-color: var(--navy-900); }
  html.pw-exp-color .pw-doc .pw-plans th, html.pw-exp-color .pw-doc .pw-plans td.ph { background: rgba(201,151,0,.12); color: var(--navy-900); }
  html.pw-exp-color .pw-doc .pw-tbl td.pri, html.pw-exp-color .pw-doc .fc.rat .big { color: var(--gold-600); }
}

/* ============================================================
   Two-mode export — "Full color" (pw-exp-color) / "Ink-saver" (pw-exp-ink).
   The mode class is set on <html> just before window.print() OR before an
   html2canvas capture (src/lib/pagePdf.ts), so ONE set of rules drives both
   printing and the downloadable PDF. Rules live OUTSIDE @media print on
   purpose — html2canvas renders on-screen, so it needs them without a media
   query. Page-specific overrides (dark hero → white, etc.) live on each page,
   also gated on these classes.
   ============================================================ */
.pw-xseg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.pw-xseg button { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 8px 14px; border: 0; background: #fff; color: var(--ink-soft); cursor: pointer; }
.pw-xseg button + button { border-left: 1px solid var(--line); }
.pw-xseg button.on { background: var(--navy); color: #fff; }

/* generic (both modes): drop site chrome + anything marked no-print */
html.pw-exp header.nav, html.pw-exp footer, html.pw-exp .pw-noprint { display: none !important; }
html.pw-exp, html.pw-exp body { background: #fff !important; }

/* full color: force the page's own fills/gradients to render in print */
html.pw-exp-color * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ink-saver: near black-and-white — dark ink on white, and desaturate
   everything (photos, gauges, badges, chips) via a grayscale filter so the
   page prints like the clean B&W reference docs. html2canvas ignores CSS
   filters, so the PDF path grayscales its raster in src/lib/pagePdf.ts.
   Maps that must keep color can opt out with .pw-keepcolor (used on pages
   that don't put the filter on a shared ancestor). */
html.pw-exp-ink { color: #1a1a1a; }
html.pw-exp-ink body { -webkit-print-color-adjust: exact; print-color-adjust: exact; filter: grayscale(1); }

/* ============================================================
   Raw-page print (tools with a print button but no built document — printPage).
   Render the ACTUAL page as a clean, paper-friendly document: whiten the dark
   hero band and darken its light text, drop marketing/explainer sections and
   card shadows. Tools with a built document print #pw-printroot instead (the
   page is hidden in @media print), so these rules only shape raw-page prints.
   ============================================================ */
html.pw-exp .pagehead, html.pw-exp .pagehead.gridbg, html.pw-exp .gridbg { background: #fff !important; background-image: none !important; }
html.pw-exp .pagehead::before, html.pw-exp .pagehead::after, html.pw-exp .gridbg::before, html.pw-exp .gridbg::after { display: none !important; background: none !important; }
html.pw-exp .pagehead h1, html.pw-exp .pagehead h1 em, html.pw-exp .pagehead .crumb, html.pw-exp .pagehead .crumb a, html.pw-exp .pagehead .crumb b { color: #141414 !important; }
html.pw-exp .pagehead .sub, html.pw-exp .pagehead .fine, html.pw-exp .pagehead p, html.pw-exp .pagehead .dek { color: #333 !important; }
html.pw-exp .pagehead .badge { border-color: #999 !important; color: #141414 !important; background: #fff !important; }
html.pw-exp .cta, html.pw-exp section.cta, html.pw-exp .zkband { display: none !important; }
html.pw-exp .card, html.pw-exp * { box-shadow: none !important; }
/* the tool cards read better on paper with hairline borders than the screen's soft ones */
html.pw-exp .card { border-color: #cfcfcf !important; }