/* ============================================================
   WASTE AUDIT FIELD GUIDE — skeleton draft v0.1
   Palette: safety amber on asphalt & concrete; stream colors
   Type: Barlow Condensed (signage) / Public Sans / IBM Plex Mono
   ============================================================ */
:root{
  --bg:#F2F4F1;
  --surface:#FCFDFB;
  --surface2:#E8EBE6;
  --ink:#212729;
  --muted:#5D686C;
  --line:#C7CDC7;
  --line-strong:#9AA39E;
  --accent:#E09112;
  --accent-ink:#8F5D07;
  --accent-soft:#F7E8CB;
  --rec:#2F6C99;
  --org:#4E7D3A;
  --lf:#68727A;
  --haz:#B23A2F;
  --haz-ink:#9C2F25;
  --badge-fg:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181C1E;
    --surface:#21272A;
    --surface2:#2A3134;
    --ink:#E7EAE5;
    --muted:#9CA7A9;
    --line:#394245;
    --line-strong:#525E62;
    --accent:#EFAF3F;
    --accent-ink:#EFAF3F;
    --accent-soft:#3A3022;
    --rec:#5D9CC9;
    --org:#7FAE63;
    --lf:#8B959B;
    --haz:#D96A5C;
    --haz-ink:#D96A5C;
    --badge-fg:#181C1E;
  }
}
:root[data-theme="dark"]{
  --bg:#181C1E;
  --surface:#21272A;
  --surface2:#2A3134;
  --ink:#E7EAE5;
  --muted:#9CA7A9;
  --line:#394245;
  --line-strong:#525E62;
  --accent:#EFAF3F;
  --accent-ink:#EFAF3F;
  --accent-soft:#3A3022;
  --rec:#5D9CC9;
  --org:#7FAE63;
  --lf:#8B959B;
  --haz:#D96A5C;
  --haz-ink:#D96A5C;
  --badge-fg:#181C1E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
}
a{color:var(--accent-ink)}
img,svg{max-width:100%}

/* ---------- draft banner ---------- */
.draftbar{
  background:var(--ink);
  color:var(--bg);
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 16px;
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
}
.draftbar b{color:var(--accent)}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.rail{
  border-right:2px solid var(--line);
  background:var(--surface);
}
.rail-inner{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:26px 0 40px}
.brand{padding:0 22px 20px;border-bottom:2px solid var(--line);margin-bottom:14px}
.brand .mark{
  display:inline-block;background:var(--accent);color:#212729;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;margin-bottom:10px;
}
.brand h1{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:26px;line-height:1.1;text-transform:uppercase;
  letter-spacing:.02em;
}
.brand p{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
nav.toc a{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 22px;text-decoration:none;color:var(--muted);
  font-size:13.5px;font-weight:600;border-left:3px solid transparent;
}
nav.toc a .n{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  color:var(--muted);min-width:22px;
}
nav.toc a:hover{color:var(--ink);background:var(--surface2)}
nav.toc a.active{color:var(--ink);border-left-color:var(--accent);background:var(--surface2)}
nav.toc a.active .n{color:var(--accent-ink)}
main{min-width:0}
.wrap{max-width:920px;margin:0 auto;padding:0 40px}

/* ---------- sections ---------- */
section.sec{padding:64px 0 72px;border-top:2px solid var(--line)}
section.sec:first-of-type{border-top:none}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  margin-bottom:10px;
}
h2{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:clamp(30px,4vw,42px);line-height:1.05;
  text-transform:uppercase;letter-spacing:.015em;text-wrap:balance;
  margin-bottom:16px;
}
h3{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.03em;
  margin:36px 0 10px;
}
h4{font-size:15px;font-weight:700;margin:20px 0 6px}
p.lede{font-size:17.5px;max-width:62ch}
.sec p{max-width:68ch}
.sec p + p{margin-top:10px}
ul.plain{margin:10px 0 0 18px;max-width:64ch}
ul.plain li{margin-bottom:6px}

/* ---------- asset placeholders ---------- */
.ph{
  position:relative;
  border:2px dashed var(--line-strong);
  background:
    repeating-linear-gradient(45deg,transparent 0 14px,
      color-mix(in srgb,var(--line) 30%,transparent) 14px 15px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:34px 24px 24px;margin:22px 0;
  min-height:170px;
}
.ph.tall{min-height:260px}
.ph.short{min-height:110px;padding-top:28px}
.ph .cap{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.5;
  color:var(--muted);max-width:52ch;
}
.ph .cap b{color:var(--ink);font-weight:600}
.badge{
  position:absolute;top:0;left:0;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--badge-fg);padding:3px 9px;
}
.badge.photo{background:var(--accent);color:#212729}
.badge.diagram{background:var(--rec)}
.badge.form{background:var(--org)}
.badge.video{background:var(--lf)}
.badge.inter{background:var(--haz)}

/* ---------- tabs (ICI vs curbside) ---------- */
.tabs{margin:26px 0 0;border:2px solid var(--line-strong);background:var(--surface)}
.tabbar{display:flex;border-bottom:2px solid var(--line-strong)}
.tabbar button{
  appearance:none;border:none;background:transparent;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:11px 18px;border-right:2px solid var(--line-strong);
}
.tabbar button:hover{color:var(--ink)}
.tabbar button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.tabbar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabpanel{padding:20px 22px 24px}
.tabpanel[hidden]{display:none}
.tabpanel p{font-size:15px}

/* ---------- callouts ---------- */
.callout{border:2px solid var(--line-strong);margin:24px 0;background:var(--surface)}
.callout .head{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;
  background:var(--surface2);color:var(--ink);
}
.callout .body{padding:14px 16px 16px;font-size:15px}
.callout.haz{border-color:var(--haz)}
.callout.haz .head{background:var(--haz);color:#fff}
.callout.note .head{background:var(--accent);color:#212729}

/* ---------- cards & grids ---------- */
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:22px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px}
.card{background:var(--surface);border:2px solid var(--line);padding:16px 16px 18px}
.card h4{margin:10px 0 4px;font-size:15px}
.card p{font-size:13.5px;color:var(--muted);line-height:1.5}
.card .spec{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent-ink);
  margin-top:8px;display:block;
}
.card .ph{margin:0;min-height:110px;padding:26px 12px 14px}
.card .ph .cap{font-size:11px}

/* ---------- stream chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:2px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;padding:6px 12px 6px 8px;
}
.chip .dot{width:12px;height:12px;display:inline-block}

/* ---------- process flow (hero) ---------- */
.flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:6px 2px 14px;margin-top:26px}
.flow .step{
  min-width:104px;flex:1;border:2px solid var(--line-strong);background:var(--surface);
  padding:10px 10px 12px;position:relative;margin-right:26px;
}
.flow .step:last-child{margin-right:0;border-color:var(--accent);background:var(--accent-soft)}
.flow .step::after{
  content:"→";position:absolute;right:-24px;top:50%;transform:translateY(-50%);
  color:var(--line-strong);font-size:16px;font-weight:700;
}
.flow .step:last-child::after{content:none}
.flow .k{
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--accent-ink);
  letter-spacing:.1em;display:block;margin-bottom:3px;
}
.flow .t{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;
  text-transform:uppercase;letter-spacing:.03em;display:block;line-height:1.1;
}
.flow .d{font-size:11px;color:var(--muted);line-height:1.35;display:block;margin-top:4px}

/* ---------- hero ---------- */
.hero{padding:56px 0 60px}
.hero h2{font-size:clamp(38px,5.5vw,58px);max-width:16ch}
.hero .sub{font-size:18px;color:var(--muted);max-width:56ch;margin-top:8px}
.netlify-pack-dl{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin:22px 0 8px;padding:16px 18px;
  border:2px solid var(--ink);background:var(--accent);
}
a.dl{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 18px;
  background:var(--ink);color:var(--bg);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
}
a.dl:hover{background:var(--accent-ink);color:#fff}
.dl-note{
  font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.45;
  color:#212729;max-width:42ch;
}
.pathcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:34px}
.pathcard{border:2px solid var(--line-strong);background:var(--surface);padding:20px 20px 22px}
.pathcard .tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:3px 8px;display:inline-block;
}
.pathcard h3{margin:12px 0 6px;font-size:24px}
.pathcard p{font-size:14px;color:var(--muted)}

/* ---------- steps (sort sequence) ---------- */
.steps{counter-reset:step;margin-top:8px}
.stepRow{
  display:grid;grid-template-columns:52px minmax(0,1.1fr) minmax(0,1fr);
  gap:18px;border:2px solid var(--line);background:var(--surface);
  padding:18px;margin-top:14px;align-items:start;
}
.stepRow .num{
  counter-increment:step;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;
  color:var(--accent-ink);line-height:1;
}
.stepRow .num::before{content:counter(step,decimal-leading-zero)}
.stepRow h4{margin:0 0 4px;font-size:16px}
.stepRow p{font-size:14px;color:var(--muted)}
.stepRow .ph{margin:0;min-height:120px;padding:26px 14px 14px}
.stepRow .ph .cap{font-size:11px}

/* ---------- formulas ---------- */
.formula{
  border:2px solid var(--line);background:var(--surface);
  padding:14px 18px;margin-top:14px;
  overflow-x:auto;
}
.formula .name{font-weight:700;font-size:14.5px}
.formula code{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:13.5px;
  color:var(--accent-ink);margin:6px 0 4px;white-space:nowrap;
}
.formula .why{font-size:13px;color:var(--muted)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;margin-top:18px;border:2px solid var(--line)}
table{border-collapse:collapse;width:100%;background:var(--surface);font-size:14px}
th{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;
  background:var(--surface2);padding:9px 12px;border-bottom:2px solid var(--line);
}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
td .dot{width:11px;height:11px;display:inline-block;margin-right:7px;vertical-align:baseline}

/* ---------- svg diagrams ---------- */
.diagram{border:2px solid var(--line);background:var(--surface);padding:20px;margin:22px 0;overflow-x:auto}
.diagram .dcap{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);
  margin-top:12px;line-height:1.5;
}
.diagram svg text{font-family:'IBM Plex Mono',monospace}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--line);padding:34px 0 60px;margin-top:20px}
footer p{font-size:12.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .layout{display:block}
  .rail{border-right:none;border-bottom:2px solid var(--line)}
  .rail-inner{position:static;max-height:none;padding:18px 0 0}
  .brand{padding-bottom:14px}
  nav.toc{display:flex;overflow-x:auto;padding:6px 10px}
  nav.toc a{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;padding:8px 12px}
  nav.toc a.active{border-bottom-color:var(--accent)}
  .wrap{padding:0 20px}
  .stepRow{grid-template-columns:44px minmax(0,1fr)}
  .stepRow .ph{grid-column:1 / -1}
}

/* ============ multi-page additions (v0.2) ============ */
section.sec{border-top:none;padding:48px 0 56px}
.pager{display:flex;justify-content:space-between;gap:16px;border-top:2px solid var(--line);padding:22px 0 8px}
.pager a{
  text-decoration:none;border:2px solid var(--line-strong);background:var(--surface);
  padding:10px 16px;max-width:46%;
}
.pager a .k{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;
}
.pager a .t{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:18px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink);display:block;
}
.pager a:hover{border-color:var(--accent)}
.pager .next{margin-left:auto;text-align:right}
.sources{border-top:2px solid var(--line);padding:18px 0 0;margin-top:8px}
.sources h5{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.sources ol{margin-left:18px}
.sources li{font-size:12.5px;color:var(--muted);margin-bottom:4px}

/* ============ chart system (validated palette) ============ */
:root{
  --c-org:#55813B;   /* compostable */
  --c-rec:#2B6DA3;   /* recyclable */
  --c-res:#A5661F;   /* residual / mixed */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-org:#6BA349; --c-rec:#4A8FC7; --c-res:#B87614;
  }
}
:root[data-theme="dark"]{ --c-org:#6BA349; --c-rec:#4A8FC7; --c-res:#B87614; }

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:24px 0 4px}
.tile{background:var(--surface);border:2px solid var(--line);padding:14px 16px 12px}
.tile .v{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.tile .v small{font-size:19px;font-weight:600;color:var(--muted)}
.tile .l{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
.tile .src{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);opacity:.85;display:block;margin-top:6px;letter-spacing:.04em}

.fig{background:var(--surface);border:2px solid var(--line);padding:22px 22px 18px;margin:24px 0}
.fig .ftitle{font-weight:700;font-size:16px}
.fig .fsub{font-size:13px;color:var(--muted);margin-top:2px;margin-bottom:16px}
.fig .fnote{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5}

.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.legend i{width:12px;height:12px;display:inline-block}

/* summary strip (single stacked bar) */
.strip{display:flex;height:44px;margin:6px 0 6px}
.strip>div{position:relative;border-right:2px solid var(--surface)}
.strip>div:last-child{border-right:none}
.strip .sl{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding-left:10px;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;
}
.strip .sl b{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:.02em}
.strip .sl small{font-size:10.5px;opacity:.92}
.strip-axis{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);margin-bottom:2px}

/* horizontal bar rows */
.hbars{margin-top:4px}
.hrow{display:grid;grid-template-columns:150px 1fr 52px;align-items:center;gap:10px;padding:4px 0}
.hrow .hl{font-size:13px;font-weight:600;text-align:right;line-height:1.25}
.hrow .track{position:relative;height:20px;background:color-mix(in srgb,var(--line) 32%,transparent)}
.hrow .bar{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0}
.hrow .hv{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hrow:hover .track{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:640px){
  .hrow{grid-template-columns:110px 1fr 46px}
  .hrow .hl{font-size:11.5px}
}

/* country row labels for stat tiles */
.rowlab{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:22px;border-bottom:2px solid var(--line);padding-bottom:4px;
}
.rowlab b{color:var(--accent-ink)}
.tiles{margin-top:12px}

/* ============ calculator & details (v0.3) ============ */
.calc{border:2px solid var(--line-strong);background:var(--surface);margin:24px 0}
.calc .chead{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;
  background:var(--ink);color:var(--bg);
}
.calc .cbody{padding:18px 20px 20px}
.calc label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px;
}
.calc label:first-child{margin-top:0}
.calc select,.calc input[type="number"]{
  width:100%;max-width:520px;padding:9px 10px;font-family:'Public Sans',system-ui,sans-serif;
  font-size:14px;color:var(--ink);background:var(--bg);
  border:2px solid var(--line-strong);border-radius:0;
}
.calc select:focus-visible,.calc input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.calc .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.calc .cpanel{border:2px solid var(--line);padding:14px 16px 16px;background:var(--bg)}
.calc .cpanel h4{margin:0 0 4px;font-size:14.5px}
.calc .cpanel .hint{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.calc .result{
  border-left:4px solid var(--accent);background:var(--surface2);
  padding:10px 14px;margin-top:12px;font-size:14px;line-height:1.5;
}
.calc .result b{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.calc .result .sub{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.calc .cnote{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:14px;line-height:1.5}
details.mathbox{border:2px solid var(--line);background:var(--surface);margin:20px 0;padding:0}
details.mathbox summary{
  cursor:pointer;padding:10px 16px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  list-style-position:inside;
}
details.mathbox summary:hover{color:var(--ink)}
details.mathbox[open] summary{border-bottom:2px solid var(--line)}
details.mathbox .mathin{padding:6px 18px 18px}

/* ============ photo glossary (v0.4) ============ */
.glossary{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:20px}
.gtile{background:var(--surface);border:2px solid var(--line);display:flex;flex-direction:column}
.gtile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface2);
  border-bottom:4px solid var(--line);color:var(--muted);font-size:11px;text-align:center;padding:0}
.gtile.s-rec img{border-bottom-color:var(--rec)}
.gtile.s-org img{border-bottom-color:var(--org)}
.gtile.s-res img{border-bottom-color:var(--lf)}
.gtile.s-haz img{border-bottom-color:var(--haz)}
.gtile .gcap{padding:8px 10px 4px;font-size:12.5px;font-weight:700;line-height:1.25}
.gtile .gtier{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;padding:0 10px}
.gtile .gsrc{padding:2px 10px 8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px}
.gtile .gsrc a{color:var(--muted);text-decoration:none}
.gtile .gsrc a:hover{color:var(--accent-ink);text-decoration:underline}



/* ---------- filled field photographs ---------- */
.shot{
  margin:22px 0;
  background:var(--surface);
  border:2px solid var(--line);
  overflow:hidden;
}
.shot img,.shot video{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--surface2);
  vertical-align:middle;
}
.shot.r43 img,.shot.r43 video,.card .shot img,.card .shot video,.stepRow .shot img,.stepRow .shot video{
  aspect-ratio:4/3;
}
.shot figcaption{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  padding:10px 14px 12px;
}
.shot figcaption b{color:var(--ink);font-weight:600}
.card .shot{margin:0 0 4px}
.stepRow .shot{margin:0}
.photostrip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin:22px 0;
}
.photostrip .shot{margin:0}
.ba-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:22px 0;
}
.ba-grid .shot{margin:0}
.ba-kicker{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink);
  padding:8px 14px 0;
}
@media (max-width:640px){
  .ba-grid{grid-template-columns:1fr}
}
ul.plain{list-style:disc}

/* ---------- form previews & downloads ---------- */
.formprev{
  margin:0 0 8px;
  border:2px solid var(--line);
  background:#fff;
  overflow:hidden;
}
.formprev a{display:block}
.formprev img{
  width:100%;
  aspect-ratio:8.5/11;
  object-fit:cover;
  object-position:top center;
  display:block;
  background:#f4f4f0;
}
.formprev.land img{aspect-ratio:11/8.5}
.formprev.wide img{aspect-ratio:16/10;object-fit:cover}
.form-actions{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:10px;
}
a.dl-mini{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:6px 12px;
  background:var(--org);color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
}
a.dl-mini:hover{filter:brightness(1.08)}
a.dl-mini.xlsx{background:var(--rec)}
a.dl-mini.docx{background:var(--accent);color:#212729}
.card .spec a{color:var(--accent-ink);font-weight:600}

.chartpair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.chartcard{border:2px solid var(--line);background:var(--surface);padding:14px 16px 16px}
.chartcard .tag{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;display:inline-block;padding:3px 8px;margin-bottom:8px
}
.chartcard .do{background:var(--org);color:#fff}
.chartcard .dont{background:var(--haz);color:#fff}
.chartcard h4{margin:4px 0 10px}
.chartcard p{font-size:13px;color:var(--muted)}
.hbar{display:flex;height:28px;margin:6px 0}
.hbar>i{display:block}
.badpie{
  width:140px;height:140px;border-radius:50%;
  background:conic-gradient(var(--c-org) 0 34%, var(--c-rec) 34% 61%, var(--c-res) 61% 100%);
  transform:perspective(240px) rotateX(52deg);margin:8px auto 12px;
  box-shadow:0 12px 0 color-mix(in srgb,var(--ink) 18%,transparent);
}
@media (max-width:700px){
  .chartpair{grid-template-columns:1fr}
}
#auditcalc .cgrid input[type="number"]{max-width:140px}
#auditcalc table td input{
  width:100%;max-width:110px;padding:6px 8px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  color:var(--ink);background:var(--bg);border:2px solid var(--line-strong);
}

/* ============ form mock (v0.5) ============ */
.formdoc{border:2px solid var(--ink);margin:22px 0;background:var(--surface)}
.formdoc .fhead{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  background:var(--ink);color:var(--bg);padding:8px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
}
.formdoc .fmeta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-bottom:2px solid var(--line);font-size:12.5px;
}
.formdoc .fmeta div{padding:7px 12px;border-right:1px solid var(--line)}
.formdoc .fmeta b{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);
  display:block;text-transform:uppercase;letter-spacing:.08em}
.formdoc .fmeta .fill{font-family:'IBM Plex Mono',monospace;color:var(--accent-ink)}
.formdoc table{font-size:13px}
.formdoc td.fill{font-family:'IBM Plex Mono',monospace;color:var(--accent-ink);font-variant-numeric:tabular-nums;text-align:right}
.formdoc tr.total td{border-top:2px solid var(--ink);font-weight:700}
.formdoc .fnotebar{padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);border-top:2px solid var(--line)}

/* ============ external tool embed (v0.5) ============ */
.embed{border:2px solid var(--line-strong);background:var(--surface);margin:22px 0}
.embed .ehead{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;background:var(--ink);color:var(--bg);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
}
.embed .ehead a{color:var(--accent);text-decoration:none}
.embed .ehead a:hover{text-decoration:underline}
.embed iframe{width:100%;height:860px;border:none;display:block;background:var(--surface2)}
.embed .efallback{padding:10px 14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.embed .ebody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0}
.embed .edesc{padding:18px 20px}
.embed .edesc p{font-size:14px;max-width:none}
.embed .edesc ol{margin:10px 0 0 18px;font-size:13.5px}
.embed .edesc li{margin-bottom:6px}
.embed .elaunch{
  display:inline-block;margin-top:16px;text-decoration:none;
  background:var(--accent);color:#212729;border:2px solid var(--accent-ink);
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;
}
.embed .elaunch:hover{background:var(--accent-ink);color:#fff}
.embed .emock{
  border-left:2px solid var(--line);background:var(--surface2);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;justify-content:center;
}
.embed .emock .mtile{
  background:var(--surface);border:2px solid var(--line);padding:10px 14px;
}
.embed .emock .mtile .mv{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;color:var(--muted);
}
.embed .emock .mtile .ml{font-size:11.5px;color:var(--muted)}
.embed .emock .mnote{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
  text-align:center;letter-spacing:.05em;
}
@media (max-width:760px){ .embed .ebody{grid-template-columns:1fr} .embed .emock{border-left:none;border-top:2px solid var(--line)} }

/* ============ analysis worksheet ============ */
.ws td, .ws th{padding:6px 8px;vertical-align:middle}
.ws input[type="number"]{
  width:84px;padding:6px 6px;text-align:right;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);
  background:var(--bg);border:2px solid var(--line-strong);border-radius:0;
  font-variant-numeric:tabular-nums;
}
.ws input[type="number"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ws select{
  padding:5px 6px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:0;
}
.ws .pct{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right;min-width:64px}
.ws tr.wtotal td{border-top:2px solid var(--ink);font-weight:700;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.wsbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.wsbtns button{
  appearance:none;cursor:pointer;border:2px solid var(--line-strong);background:var(--surface);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:9px 14px;
}
.wsbtns button:hover{border-color:var(--accent)}
.wsbtns button.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wsbtns button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ws-msg{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent-ink);margin-top:8px;min-height:16px}
tr.wtotal td{font-weight:700;background:var(--surface2)}
.tblwrap a[download]{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* ============ analysis worksheet (v0.6) ============ */
.ws td, .ws th{padding:6px 8px;vertical-align:middle}
.ws input[type="number"]{
  width:84px;padding:6px 6px;text-align:right;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);
  background:var(--bg);border:2px solid var(--line-strong);border-radius:0;
  font-variant-numeric:tabular-nums;
}
.ws input[type="number"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ws select{
  padding:5px 6px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:0;
}
.ws .pct{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right;min-width:64px}
.ws tr.wtotal td{border-top:2px solid var(--ink);font-weight:700;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.wsbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.wsbtns button{
  appearance:none;cursor:pointer;border:2px solid var(--line-strong);background:var(--surface);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:9px 14px;
}
.wsbtns button:hover{border-color:var(--accent)}
.wsbtns button.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wsbtns button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ws-msg{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent-ink);margin-top:8px;min-height:16px}

/* ============ tool launch panel (v0.6) ============ */