/* ============================================================================
   content-compat-v2.css — ADDITIVE. Loaded only by v2-converted interior pages,
   after style-v2.css.

   WHY THIS FILE EXISTS
   The interior pages' article bodies are SME-reviewed NFPA 70E content and are
   copied into the v2 shell byte-for-byte — markup, classes and all. That markup
   uses component classes and custom properties defined in the ORIGINAL
   css/style.css, which v2 pages no longer load. Without this file those elements
   render unstyled (section numbers running into headings, unboxed callouts,
   an unstyled contact form).

   The alternative — rewriting classes inside the content — would mean editing
   SME-reviewed source. This file is the non-destructive option.

   NOTHING ELSE IS MODIFIED: css/style.css (legacy pages) and css/style-v2.css
   (homepage + v2 pages) are both untouched.
   ========================================================================== */

/* ---------- 1. Legacy custom-property aliases ------------------------------
   Old content references var(--sp-3), var(--radius), etc. Map them onto the v2
   scale so inline styles inside preserved markup keep working.
--------------------------------------------------------------------------- */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;
  --radius:10px;
  --paper-line:var(--line);
  --heading:var(--ink);
  --body-muted:var(--mut);
  --accent:var(--gold);
  --sans:var(--fb); --cond:var(--fh); --mono:var(--fm);
  --danger:var(--red);      --danger-ink:#8f2a1e; --danger-bg:#fdf2f0; --danger-line:#f0c6be;
  --warn-accent:var(--amber); --warn-ink:#8a5410; --warn-bg:#fdf7ec;   --warn-line:#eed9b0;
  --safe:var(--green);      --safe-ink:#146340;  --safe-bg:#eff8f3;   --safe-line:#bfe2d0;
  --info:var(--blue);       --info-ink:#1c48a8;  --info-bg:#eef3fe;   --info-line:#c5d6f8;
}

/* ---------- 2. Numbered section headings ----------------------------------
   Content ships <h2 class="sec"><span class="num">01</span>Title</h2>.
   Without this the number is glued to the heading text.
--------------------------------------------------------------------------- */
.prose h2.sec{display:flex;align-items:baseline;gap:12px}
.prose h2.sec .num{
  font-family:var(--fm);font-size:15px;font-weight:600;color:var(--gold2);
  flex:0 0 auto;letter-spacing:.02em}

/* ---------- 3. Field notes ------------------------------------------------ */
.prose .fieldnotes{
  border:2px dashed var(--warn-line);background:var(--warn-bg);
  border-radius:var(--radius);padding:20px 22px;margin:24px 0}
.prose .fieldnotes .co-hd{
  display:flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:700;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--warn-ink);margin-bottom:6px}
.prose .fieldnotes p{margin:0;color:var(--warn-ink);font-style:italic}

/* ---------- 4. Callout head/badge (used by later waves) -------------------
   style-v2.css already styles .callout and its variants; these two children
   come from the legacy markup and are not covered there.
--------------------------------------------------------------------------- */
.prose .callout .co-hd{
  display:flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:700;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.prose .callout.danger .co-hd{color:var(--danger-ink)}
.prose .callout.warn   .co-hd{color:var(--warn-ink)}
.prose .callout.safe   .co-hd{color:var(--safe-ink)}
.prose .callout.info   .co-hd{color:var(--info-ink)}
.prose .co-badge{
  width:18px;height:18px;border-radius:4px;flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--fm);font-weight:700;
  font-size:12px;color:#fff}
.prose .callout.danger .co-badge{background:var(--danger)}
.prose .callout.warn   .co-badge{background:var(--warn-accent)}
.prose .callout.safe   .co-badge{background:var(--safe)}
.prose .callout.info   .co-badge{background:var(--info)}

/* ---------- 5. Checklist -------------------------------------------------- */
.prose ul.checklist{list-style:none;margin:16px 0 32px;padding:0}
.prose ul.checklist li{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px 12px 44px;margin-bottom:8px;position:relative;
  font-size:15px;min-height:44px}
.prose ul.checklist li::before{
  content:"";position:absolute;left:14px;top:13px;width:18px;height:18px;
  border:2px solid var(--safe);border-radius:4px;background:var(--safe-bg)}
.prose ul.checklist li::after{
  content:"";position:absolute;left:19px;top:15px;width:6px;height:11px;
  border:solid var(--safe);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.prose ul.checklist li strong{color:var(--ink)}

/* ---------- 6. Panel ------------------------------------------------------ */
.prose .panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;margin:24px 0;box-shadow:var(--sh)}
.prose .panel-hd{
  font-family:var(--fh);font-weight:700;font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin:0 0 14px;
  display:flex;align-items:center;gap:10px}
.prose .panel-hd .bar{
  width:4px;height:16px;background:var(--gold);border-radius:2px;flex:0 0 auto}
.prose .panel>p:last-child{margin-bottom:0}

/* ---------- 7. Link grid -------------------------------------------------- */
.prose .linkgrid{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 32px}
.prose .linkgrid a,
.prose button.linkgrid{
  font-family:var(--fb);font-weight:600;font-size:14.5px;text-decoration:none;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px 14px;min-height:40px;
  display:inline-flex;align-items:center}
.prose .linkgrid a:hover,
.prose button.linkgrid:hover{border-color:var(--gold);color:var(--gold2)}

/* ---------- 8. Form controls inside content ------------------------------- */
.prose select,
.prose input,
.prose textarea{
  font-family:var(--fb);font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:40px}
.prose select:focus,
.prose input:focus,
.prose textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold)}

/* ---------- 9. Contact form ----------------------------------------------- */
.prose .cform{max-width:640px;margin:16px 0 28px}
.prose .cform label{
  display:block;font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.prose .cform input,
.prose .cform select,
.prose .cform textarea{display:block;width:100%;margin-top:6px}
.prose .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prose .cf-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px}
.prose .cf-btn{
  background:var(--gold);color:var(--navy2);font-family:var(--fh);font-weight:700;
  font-size:1rem;letter-spacing:.02em;padding:11px 22px;border:0;border-radius:8px;
  cursor:pointer;min-height:44px}
.prose .cf-btn:hover{background:var(--gold2);color:#fff}
.prose .cf-btn:disabled{opacity:.6;cursor:default}
.prose .cf-status{margin-left:12px;font-size:.85rem;color:var(--mut)}

@media (max-width:640px){
  .prose .cf-row{grid-template-columns:1fr}
  .prose h2.sec{gap:9px}
}

/* ---------- 10. Print ----------------------------------------------------- */
@media print{
  .prose .panel,.prose .fieldnotes{box-shadow:none}
}

/* ============================================================================
   11. Content-engine article components
   The /nfpa-70e/ pages and /resources/single-line-diagrams/ were published as
   standalone documents with their own inline stylesheet and no site chrome.
   Converting them drops that inline CSS, so their components are restyled here
   in the v2 language. Markup is preserved byte-for-byte.
   ========================================================================== */

/* in-page contents box */
.prose .toc{
  background:var(--line2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 24px;margin:24px 0}
.prose .toc b{
  display:block;font-family:var(--fh);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--mut);margin-bottom:10px;font-weight:700}
.prose .toc ol{margin:0;padding-left:22px}
.prose .toc li{margin:5px 0}
.prose .toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.prose .toc a:hover{color:var(--gold2);border-bottom-color:var(--gold)}

/* callouts using <div class="l"> as the label (engine markup) */
.prose .callout,
.prose .warn{
  background:var(--info-bg);border:1px solid var(--info-line);
  border-left:4px solid var(--info);border-radius:var(--radius);
  padding:18px 22px;margin:24px 0}
.prose .warn{
  background:var(--warn-bg);border-color:var(--warn-line);
  border-left-color:var(--warn-accent)}
.prose .callout>.l,
.prose .warn>.l{
  font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--info);margin-bottom:6px}
.prose .warn>.l{color:var(--warn-ink)}
.prose .callout p,
.prose .warn p{margin:.35em 0}
.prose .callout p:last-child,
.prose .warn p:last-child{margin-bottom:0}

/* trailing note / cross-link paragraphs */
.prose .quiet{
  color:var(--mut);font-size:15px;border-top:1px solid var(--line);
  padding-top:18px;margin-top:36px}
.prose .quiet a{font-weight:700;color:var(--gold2)}
.prose .updated{color:var(--mut2);font-size:13.5px;font-family:var(--fm)}
.prose .foot{color:var(--mut);font-size:14px;border-top:1px solid var(--line);
  padding-top:18px;margin-top:32px}

/* FAQ definition blocks */
.prose .faq{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
.prose .faq h3{font-family:var(--fh);font-size:20px;margin:1.4em 0 .3em}
.prose .faq dt{font-weight:700;color:var(--ink);margin-top:16px}
.prose .faq dd{margin:4px 0 0;color:var(--ink2)}

/* bare tables (engine pages use <table>, not table.data) */
.prose table{
  border-collapse:collapse;width:100%;margin:22px 0;font-size:15px;
  background:var(--card);border-radius:var(--radius);overflow:hidden}
.prose th,.prose td{
  border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.prose th{
  background:var(--line2);font-family:var(--fh);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}

/* diagrams and symbol grids (/resources/single-line-diagrams/) */
.prose .diagram{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:20px 12px 10px;margin:24px 0;text-align:center}
.prose .diagram svg{max-width:100%;height:auto;margin:0 auto}
.prose .diagram .cap{font-size:13px;color:var(--mut);margin:10px 0 6px}
.prose .symgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;margin:24px 0}
.prose .sym{
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px 13px;
  background:var(--card)}
.prose .sym svg{display:block;margin:0 auto 10px}
.prose .sym b{display:block;font-family:var(--fh);font-size:15px;color:var(--ink);margin-bottom:4px}
.prose .sym p{margin:0;font-size:13.5px;line-height:1.5;color:var(--mut)}

/* engine CTA block + secondary button variant */
.prose .cta{
  background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:28px 30px;margin:32px 0}
.prose .cta h2{color:#fff;margin:0 0 8px}
.prose .cta h2.sec .num{color:var(--gold)}
.prose .cta p{color:rgba(255,255,255,.82);margin:0 0 14px}
.prose .cta a{color:var(--gold)}
.prose .btn.alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
.prose .cta .btn.alt{color:#fff;border-color:rgba(255,255,255,.35)}

/* crumbs left inside body copy on engine pages */
.prose .crumbs{color:var(--mut);font-size:13px}
.prose .crumbs a{color:var(--mut)}

@media (max-width:640px){
  .prose .symgrid{grid-template-columns:1fr}
  .prose table{font-size:14px}
  .prose th,.prose td{padding:9px 10px}
}

/* ---------- 12. Responsive tables ------------------------------------------
   content-compat-v2.js wraps bare <table> elements in .tbl-wrap; these rules
   make that wrapper scroll instead of widening the page on a phone.
--------------------------------------------------------------------------- */
.prose .tbl-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  margin:22px 0;border-radius:var(--radius)}
.prose .tbl-wrap>table{margin:0;min-width:520px}
.prose .tbl-wrap:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:640px){
  .prose .tbl-wrap>table{min-width:480px}
}

/* ============================================================================
   13. Site-wide content components  (added 2026-08-12 after a full-site audit)

   The first pass of this file was written from the four Wave 1 pages, so it only
   covered what those four used. A sweep of all 92 pages found 16 more component
   classes that css/style.css styled and style-v2.css does not — including the
   statistic blocks and case-study boxes on 60 and 53 pages respectively. Without
   these they render as flat unstyled text.
   ========================================================================== */

/* ---- sub-headings -------------------------------------------------------- */
.prose h3.sub{
  font-family:var(--fh);font-weight:600;font-size:21px;letter-spacing:.02em;
  color:var(--ink);margin:32px 0 8px}

/* ---- legacy table scroller (same job as .tbl-wrap) ----------------------- */
.prose .table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  margin:22px 0;border-radius:var(--radius)}
.prose .table-wrap>table{margin:0;min-width:520px}

/* ---- statistic blocks (state + industry pages) --------------------------- */
.prose .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}
.prose .stat{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:var(--radius);padding:20px 22px}
.prose .stat:nth-child(2){border-left-color:var(--amber)}
.prose .stat:nth-child(3){border-left-color:var(--blue)}
.prose .stat:nth-child(4){border-left-color:var(--ink)}
.prose .stat .num{
  font-family:var(--fh);font-weight:700;font-size:36px;line-height:1;color:var(--ink);
  display:block}
.prose .stat .lbl{font-size:14px;color:var(--mut);margin-top:6px;display:block}

/* the numbered-heading rule in §2 must not capture .stat .num */
.prose .stat h2.sec .num{font-size:36px}

/* ---- case-study entries -------------------------------------------------- */
.prose .case{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:16px 0}
.prose .case h4{font-family:var(--fh);font-size:18px;margin:0 0 6px;color:var(--ink)}
.prose .case p{font-size:15px;margin:0 0 14px;color:var(--ink2)}
.prose .case p:last-child{margin-bottom:0}
.prose .case-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.prose .case-meta .loc{
  font-family:var(--fh);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:.01em}
.prose .conn{
  font-size:14.5px;color:var(--mut);border-top:1px solid var(--line2);
  padding-top:10px;margin:12px 0 0}
.prose .case .conn{margin:12px 0 0}
.prose .conn strong{color:var(--ink)}

/* ---- scenario callouts --------------------------------------------------- */
.prose .scenario{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--blue);
  border-radius:var(--radius);padding:20px 22px;margin:16px 0}
.prose .scenario:nth-of-type(2){border-left-color:var(--amber)}
.prose .scenario:nth-of-type(3){border-left-color:var(--red)}
.prose .scenario .sc-hd{
  font-family:var(--fh);font-weight:700;font-size:19px;color:var(--ink);
  margin:0 0 6px;letter-spacing:.01em}
.prose .scenario p{margin:0;font-size:15px;color:var(--ink2)}

/* ---- two-column link-card grid (states / tools / industries indexes) ----- */
.prose ul.tools{
  list-style:none;margin:16px 0 32px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prose ul.tools li{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;margin:0}
.prose ul.tools li:hover{border-color:var(--gold)}
.prose ul.tools li a{
  font-family:var(--fh);font-weight:700;font-size:17.5px;letter-spacing:.01em;
  text-decoration:none;color:var(--ink);display:block;padding:13px 15px 4px;
  min-height:24px}
.prose ul.tools li a:hover{color:var(--gold2)}
.prose ul.tools li p{font-size:13.5px;color:var(--mut);margin:0;padding:0 15px 13px}
.prose ul.tools li a:only-child{padding:14px 15px;min-height:46px}

/* ---- bulleted lists ------------------------------------------------------ */
.prose ul.bullets{margin:8px 0 24px;padding-left:22px;list-style:disc}
.prose ul.bullets li{margin-bottom:8px}
.prose ul.bullets li strong{color:var(--ink)}

/* ---- inline code --------------------------------------------------------- */
.prose td .code,
.prose .inline-code{
  font-family:var(--fm);font-size:13px;color:var(--danger-ink);
  background:var(--danger-bg);border:1px solid var(--danger-line);
  border-radius:4px;padding:1px 5px}

/* ---- article reference map (the guide) ----------------------------------- */
.prose ul.refmap{
  list-style:none;margin:16px 0 32px;padding:0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--card)}
.prose ul.refmap li{
  display:flex;gap:16px;align-items:baseline;padding:12px 15px;
  border-top:1px solid var(--line2);margin:0}
.prose ul.refmap li:first-child{border-top:0}
.prose ul.refmap li:hover{background:var(--line2)}
.prose ul.refmap .art{
  font-family:var(--fm);font-weight:600;font-size:13.5px;color:#fff;background:var(--ink);
  border-radius:5px;padding:4px 9px;flex:0 0 auto;min-width:54px;text-align:center}
.prose ul.refmap .desc{flex:1 1 auto}
.prose ul.refmap .desc strong{color:var(--ink)}
.prose ul.refmap a{text-decoration:none;color:var(--ink);font-weight:600}
.prose ul.refmap a:hover{color:var(--gold2)}

/* ---- source line under statistics (never had styling; give it some) ------ */
.prose .inc-src{
  font-size:13px;color:var(--mut2);font-family:var(--fm);
  margin:8px 0 24px;line-height:1.5}

/* ============================================================================
   14. Touch targets
   Apple and Google both call for ~44px minimum. Link lists and in-table links
   render at 19px by default, which is a miss on a phone.
   ========================================================================== */
@media (max-width:700px){
  .prose ul.tools{grid-template-columns:1fr;gap:8px}
  .prose ul.tools li a{padding:15px 16px 5px}
  .prose ul.tools li a:only-child{padding:15px 16px;min-height:46px}
  .prose ul.tools li p{padding:0 16px 15px}
  .prose .stats{grid-template-columns:1fr}
  .prose td a,
  .prose th a{display:inline-block;padding:11px 0;min-height:44px}
  .prose li>a:only-child{display:inline-block;padding:11px 0;min-height:44px}
  .prose .linkgrid a,
  .prose button.linkgrid{min-height:44px;padding:11px 16px}
  .prose .case,
  .prose .scenario,
  .prose .stat,
  .prose .panel{padding:16px 17px}
}