/* ═══════════════════════════════════════════════════════════════════════
   Plant room wall plan — Ocho Rios
   Engineering-drawing palette: paper ground, ink linework, one hue per
   electrical circuit. Containment is drawn as physical grey channels and
   circuits are routed inside them.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#EDEFED; --paper:#FFFFFF; --sunk:#E3E7E4;
  --ink:#14181A; --ink2:#464F52; --ink3:#727C7F;
  --rule:#CFD5D0; --rule2:#B4BCB6;
  --pv:#2F6F9E; --bat:#36764D; --grid:#B2660F; --load:#8A4A9E;
  --comm:#5F6A6D; --earth:#6E7F2E; --crit:#9A2A24;
  --pv-soft:#D7E5EF; --bat-soft:#D9E8DE; --grid-soft:#F3E2C8;
  --load-soft:#EBDCF0; --comm-soft:#DFE4E4; --earth-soft:#E6EBD4;
  --ink-soft:#E3E7E4; --crit-soft:#F1D9D7;
  --shadow:rgba(20,24,26,.10);
  --plastic:#DCE0DE; --plastic2:#B3BAB6; --plastic-lt:#F2F4F2; --plastic-ink:#2B3134;
  --metal:#939DA1; --metal2:#6B7579; --metal-lt:#C3CBCD;
  --copper:#B4712F; --copper2:#8A5220; --gold:#C8A23C;
  --ok:#2F8A4C; --no:#9A2A24; --win:#F4F7F4;
  --f-disp:"Archivo",system-ui,sans-serif;
  --f-body:"Source Serif 4",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --hdr:58px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#13171A; --paper:#1C2125; --sunk:#242B2F;
  --ink:#EAEEEC; --ink2:#AEB8BA; --ink3:#7F8A8D;
  --rule:#333C40; --rule2:#45504F;
  --pv:#6AB4E2; --bat:#68C089; --grid:#E5A93F; --load:#C98FDC;
  --comm:#939EA1; --earth:#B6C96A; --crit:#E3837C;
  --pv-soft:#1D3A4C; --bat-soft:#1E3A2A; --grid-soft:#45330F;
  --load-soft:#392540; --comm-soft:#2B3337; --earth-soft:#2F3A1A;
  --ink-soft:#242B2F; --crit-soft:#431D1A;
  --shadow:rgba(0,0,0,.45); color-scheme:dark;
  --plastic:#394347; --plastic2:#272E32; --plastic-lt:#4E585D; --plastic-ink:#EAEEEC;
  --metal:#8A9498; --metal2:#5E686C; --metal-lt:#B0B9BC;
  --copper:#C07C42; --copper2:#92562A; --gold:#D4B150;
  --ok:#49B468; --no:#E3837C; --win:#161A1D;

}}
:root[data-theme="dark"]{
  --bg:#13171A; --paper:#1C2125; --sunk:#242B2F;
  --ink:#EAEEEC; --ink2:#AEB8BA; --ink3:#7F8A8D;
  --rule:#333C40; --rule2:#45504F;
  --pv:#6AB4E2; --bat:#68C089; --grid:#E5A93F; --load:#C98FDC;
  --comm:#939EA1; --earth:#B6C96A; --crit:#E3837C;
  --pv-soft:#1D3A4C; --bat-soft:#1E3A2A; --grid-soft:#45330F;
  --load-soft:#392540; --comm-soft:#2B3337; --earth-soft:#2F3A1A;
  --ink-soft:#242B2F; --crit-soft:#431D1A;
  --shadow:rgba(0,0,0,.45); color-scheme:dark;
  --plastic:#394347; --plastic2:#272E32; --plastic-lt:#4E585D; --plastic-ink:#EAEEEC;
  --metal:#8A9498; --metal2:#5E686C; --metal-lt:#B0B9BC;
  --copper:#C07C42; --copper2:#92562A; --gold:#D4B150;
  --ok:#49B468; --no:#E3837C; --win:#161A1D;

}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);
  font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%;overflow-wrap:break-word}
.wrap{max-width:1560px;margin:0 auto;padding:0 16px 64px}

/* ── app bar ─────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1.5px solid var(--ink);
  display:flex;align-items:center;gap:10px;min-height:var(--hdr);padding:8px 0}
.bar .brand{font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:-.01em;
  white-space:nowrap}
.bar .brand span{display:block;font-family:var(--f-mono);font-size:9.5px;font-weight:400;
  letter-spacing:.09em;color:var(--ink3);text-transform:uppercase}
.bar .sp{flex:1}
.srch{position:relative;flex:0 1 300px;min-width:0}
.srch input{width:100%;font-family:var(--f-mono);font-size:12px;padding:7px 10px;
  border:1.5px solid var(--rule2);border-radius:3px;background:var(--paper);color:var(--ink)}
.srch input:focus{outline:none;border-color:var(--ink2)}
.res{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:52vh;overflow:auto;
  background:var(--paper);border:1.5px solid var(--ink2);border-radius:3px;
  box-shadow:0 14px 34px var(--shadow);display:none;z-index:50}
.res.on{display:block}
.res button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:8px 11px;border-bottom:1px solid var(--rule);font-family:var(--f-body);
  font-size:13px;color:var(--ink);line-height:1.35}
.res button:hover,.res button:focus{background:var(--sunk);outline:none}
.res b{font-family:var(--f-disp);font-size:12.5px;display:block}
.res i{font-family:var(--f-mono);font-size:10px;font-style:normal;color:var(--ink3);
  letter-spacing:.05em;text-transform:uppercase}
.res .none{padding:10px 11px;font-family:var(--f-mono);font-size:11px;color:var(--ink3)}

.btn{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 11px;border:1.5px solid var(--rule2);border-radius:3px;background:var(--paper);
  color:var(--ink2);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink2);color:var(--ink)}
.btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ── breadcrumb ──────────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 0 10px;color:var(--ink3)}
.crumb button{border:0;background:none;cursor:pointer;color:var(--ink2);padding:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  border-bottom:1px solid var(--rule2)}
.crumb button:hover{color:var(--ink);border-color:var(--ink)}
.crumb .here{color:var(--ink);font-weight:500;border:0}
.crumb .sep{color:var(--rule2)}

/* ── headings & prose ────────────────────────────────────────────── */
h1{font-family:var(--f-disp);font-size:clamp(20px,3.6vw,28px);font-weight:700;
  letter-spacing:-.015em;margin:0 0 4px;text-wrap:balance}
.dek{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink3);
  margin:0 0 16px;text-transform:uppercase}
h2.sec{font-family:var(--f-disp);font-size:17px;font-weight:700;letter-spacing:-.01em;
  margin:34px 0 10px;padding-bottom:6px;border-bottom:1.5px solid var(--ink)}
.panel{background:var(--paper);border:1.5px solid var(--rule2);border-radius:3px;padding:16px 18px}
.panel h3{font-family:var(--f-disp);font-size:15px;font-weight:700;margin:0 0 9px;
  letter-spacing:-.005em}
.panel h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);margin:18px 0 7px;padding-bottom:4px;border-bottom:1px solid var(--rule)}
.panel h4:first-child{margin-top:0}
.panel p{margin:0 0 9px}
.panel p:last-child{margin-bottom:0}
.tagline{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);margin:-4px 0 10px}

.alarm{border:1.5px solid var(--crit);background:var(--crit-soft);border-radius:3px;
  padding:14px 16px;margin:0 0 18px}
.alarm h2{font-family:var(--f-disp);font-size:15px;font-weight:700;margin:0 0 7px;color:var(--ink)}
.alarm p{margin:0 0 8px}
.alarm p:last-child{margin-bottom:0}
.stack{font-family:var(--f-mono);font-size:11.5px;line-height:1.75;white-space:pre;
  overflow-x:auto;background:var(--paper);border:1px solid var(--rule2);border-radius:3px;
  padding:11px 13px;margin:10px 0}
.danger{border-left:3px solid var(--crit);background:var(--crit-soft);padding:10px 13px;
  border-radius:0 3px 3px 0;margin:0 0 14px;font-size:14.5px}
.danger b.lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;display:block;
  text-transform:uppercase;color:var(--crit);margin-bottom:4px}
.warn{border-left:3px solid var(--grid);background:var(--grid-soft);padding:10px 13px;
  border-radius:0 3px 3px 0;margin:0 0 14px;font-size:14.5px}

/* ── circuit rail ────────────────────────────────────────────────── */
.rail{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.rail .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-right:3px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.04em;padding:5px 9px;border:1.5px solid var(--rule2);border-radius:3px;
  background:var(--paper);color:var(--ink2);cursor:pointer}
.chip .sw{width:11px;height:11px;border-radius:2px;flex:none}
.chip[data-l=pv] .sw{background:var(--pv)} .chip[data-l=bat] .sw{background:var(--bat)}
.chip[data-l=grid] .sw{background:var(--grid)} .chip[data-l=load] .sw{background:var(--load)}
.chip[data-l=comm] .sw{background:var(--comm)} .chip[data-l=earth] .sw{background:var(--earth)}
.chip[aria-pressed="false"]{opacity:.42}
.chip[aria-pressed="true"]{border-color:var(--ink2);color:var(--ink)}

/* ── drawing stage with pan/zoom ─────────────────────────────────── */
.stage{position:relative;background:var(--paper);border:1.5px solid var(--rule2);
  border-radius:3px;overflow:hidden;touch-action:none}
.stage svg{display:block;width:100%;height:clamp(340px,62vh,720px)}
.stage.plan svg{height:clamp(260px,42vh,480px)}
.zoom{position:absolute;top:9px;right:9px;display:flex;flex-direction:column;gap:4px;z-index:5}
.zoom button{width:34px;height:34px;border:1.5px solid var(--rule2);background:var(--paper);
  color:var(--ink2);border-radius:3px;cursor:pointer;font-family:var(--f-mono);font-size:15px;
  line-height:1;display:grid;place-items:center;padding:0}
.zoom button:hover{border-color:var(--ink2);color:var(--ink)}
.zoom button.wide{width:34px;font-size:9px;letter-spacing:.04em}
.hint{position:absolute;left:9px;bottom:9px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;padding:3px 7px;pointer-events:none;z-index:5}
.capt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink3);
  margin:7px 0 0;line-height:1.5}

/* nodes */
.node,.tnode,.ip{cursor:pointer}
.node .box,.tnode rect,.ip rect{transition:filter .14s,opacity .14s}
.node:hover .box,.node:focus .box{filter:brightness(1.07) saturate(1.12)}
.node:focus,.tnode:focus,.ip:focus{outline:none}
.node:focus .box,.tnode:focus rect+rect,.ip:focus rect{stroke-width:6}
.node.sel .box,.tnode.sel rect+rect{stroke-width:7}
.ip:hover rect,.ip:focus rect{filter:brightness(1.1)}
.ip.sel rect{stroke-width:4.5}
.layer.off{display:none}
.flow{stroke-dasharray:46 26;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-72}}
@media (prefers-reduced-motion:reduce){.flow{animation:none;opacity:.85}}

/* ── interior cutaway ────────────────────────────────────────────── */
.cutwrap{margin:18px 0 0}
svg.inner{display:block;width:100%;height:auto;background:var(--paper);
  border:1.5px solid var(--rule2);border-radius:3px;padding:10px}
svg.inner.xs{max-width:420px;margin:0 auto}
.readout{font-family:var(--f-mono);font-size:11.5px;background:var(--sunk);
  border:1px solid var(--rule2);border-left:3px solid var(--ink2);border-radius:0 3px 3px 0;
  padding:9px 12px;margin:10px 0 0;min-height:46px;line-height:1.6}
.readout b{font-family:var(--f-disp);font-size:13px;letter-spacing:.01em}
.readout em{font-style:normal;color:var(--ink3)}

/* ── tables ──────────────────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 4px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1.5px solid var(--ink2);white-space:nowrap}
td.k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.01em;white-space:nowrap}
td.k .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
tbody tr:hover{background:var(--sunk)}
.tqn{font-family:var(--f-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--crit);border:1px solid var(--crit);border-radius:2px;padding:0 3px;
  margin-left:4px;white-space:nowrap}
dl.spec{display:grid;grid-template-columns:minmax(118px,auto) 1fr;gap:5px 14px;margin:0;
  font-size:13.5px}
dl.spec dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);padding-top:2px}
dl.spec dd{margin:0}
ol.seq{margin:0;padding-left:0;list-style:none;counter-reset:s}
ol.seq li{counter-increment:s;position:relative;padding:0 0 11px 34px;font-size:14.5px}
ol.seq li::before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px;
  border:1.5px solid var(--ink2);border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:11px;color:var(--ink2)}
ul.chk{margin:0;padding-left:0;list-style:none}
ul.chk li{position:relative;padding:0 0 9px 26px;font-size:14.5px}
ul.chk li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;
  border:1.5px solid var(--ink2);border-radius:2px}
ul.notes{margin:0;padding-left:20px}
ul.notes li{margin-bottom:9px;font-size:14.5px}

/* ── detail layout ───────────────────────────────────────────────── */
.grid2{display:grid;gap:18px;margin-top:18px}
@media (min-width:1000px){.grid2{grid-template-columns:1.08fr .92fr;align-items:start}}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 13px;border-bottom:1.5px solid var(--rule2)}
.tabs button{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:7px 10px;border:0;background:none;color:var(--ink3);cursor:pointer;
  border-bottom:2.5px solid transparent;margin-bottom:-1.5px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--crit)}
.xref{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0 0}
.xref button{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;padding:4px 8px;
  border:1.5px solid var(--rule2);border-radius:3px;background:var(--paper);color:var(--ink2);
  cursor:pointer}
.xref button:hover{border-color:var(--ink2);color:var(--ink)}
.empty{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3);letter-spacing:.03em;
  line-height:1.7}

/* ── install mode ────────────────────────────────────────────────── */
.prog{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.prog .bar2{flex:1;height:5px;background:var(--sunk);border-radius:3px;overflow:hidden}
.prog .bar2 i{display:block;height:100%;background:var(--bat);transition:width .25s}
.stepnav{display:flex;gap:8px;margin:16px 0 0}
.order{display:grid;gap:7px;margin:0 0 4px}
.order button{display:flex;gap:11px;align-items:baseline;text-align:left;width:100%;
  padding:9px 12px;border:1.5px solid var(--rule2);border-radius:3px;background:var(--paper);
  cursor:pointer;color:var(--ink);font-family:var(--f-body);font-size:14px}
.order button:hover{border-color:var(--ink2)}
.order button[aria-current="true"]{border-color:var(--crit);background:var(--crit-soft)}
.order .n{font-family:var(--f-mono);font-size:11px;color:var(--ink3);flex:none;min-width:20px}
.order .t{flex:1}
.order .t b{font-family:var(--f-disp);font-size:14px;display:block}
.order .t span{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;color:var(--ink3);
  text-transform:uppercase}

footer{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);border-top:1.5px solid var(--ink);margin-top:34px;padding-top:12px;
  line-height:1.8}
.hide{display:none !important}

/* ── print: take it to site on paper ────────────────────────────── */
@media print{
  :root{--bg:#fff;--paper:#fff}
  .bar,.zoom,.hint,.rail,.tabs,.srch,.stepnav,.crumb button{display:none !important}
  .stage svg{height:auto;max-height:none}
  .panel{border-color:#999;break-inside:avoid}
  body{font-size:11pt}
  .hide{display:block !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   The popover. Hover a box on the drawing and the inside of it comes up
   anchored to it, with the cables drawn entering and every terminal
   labelled. Click to pin it so you can poke around inside.
   On a phone there is nowhere to float, so it becomes a bottom sheet.
   ═══════════════════════════════════════════════════════════════════════ */
.pop{position:fixed;z-index:60;width:min(880px,calc(100vw - 24px));
  max-height:min(86vh,900px);overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--paper);border:1.5px solid var(--ink2);border-radius:4px;
  box-shadow:0 18px 50px var(--shadow),0 2px 8px var(--shadow);
  padding:14px 16px 16px;display:none;font-size:14px}
.pop.on{display:block}
.pop.pin{border-color:var(--crit);border-width:2px}
.pop .ph{display:flex;align-items:flex-start;gap:10px;margin:0 0 9px;
  padding-bottom:7px;border-bottom:1.5px solid var(--ink)}
.pop .ph h3{font-family:var(--f-disp);font-size:15px;font-weight:700;margin:0;flex:1;
  letter-spacing:-.005em;line-height:1.25}
.pop .ph .sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);display:block;margin-top:2px;font-weight:400}
.pop .ph button{border:1.5px solid var(--rule2);background:var(--paper);color:var(--ink2);
  width:26px;height:26px;border-radius:3px;cursor:pointer;flex:none;font-size:14px;
  line-height:1;display:grid;place-items:center;padding:0;font-family:var(--f-mono)}
.pop .ph button:hover{border-color:var(--ink2);color:var(--ink)}
.pop .pinmsg{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 9px}
.pop table{min-width:0;font-size:12.5px}
.pop th{font-size:9px}
.pop td{padding:6px 7px}
.pop td.k{font-size:10.5px;white-space:normal}
.pop .tagline{margin:-2px 0 8px}
.pop ol.seq li,.pop ul.chk li{font-size:13.5px}
.pop svg.inner{padding:7px}
/* the interiors carry real device detail now; below this width the
   breaker markings stop being readable, so let it scroll sideways */
.pop .innerwrap{overflow-x:auto}
/* a circuit line is clickable: a wide transparent stroke under it is the hit
   target, and the whole group lifts on hover so it is obvious it is live */
.run{cursor:pointer}
.run:hover polyline:not([stroke="transparent"]),
.run:focus-visible polyline:not([stroke="transparent"]){stroke-width:13}
.run:focus-visible{outline:none}
.run.sel polyline:not([stroke="transparent"]){stroke-width:15}
svg.inner.run{background:var(--paper)}
.pop .innerwrap svg.inner{min-width:620px}
.pop .danger,.pop .warn{font-size:13.5px;padding:9px 11px}
.pop .capt{font-size:9.5px}
.pop h4{margin:15px 0 6px}
.pop .readout{font-size:11px;padding:8px 10px}
.pop .arrow{position:fixed;width:12px;height:12px;background:var(--paper);
  border-left:1.5px solid var(--ink2);border-top:1.5px solid var(--ink2);
  transform:rotate(-45deg);z-index:61;display:none}
.pop.on + .arrow{display:block}

@media (max-width:760px){
  .pop{left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    width:100vw;max-width:100vw;max-height:84vh;border-radius:12px 12px 0 0;
    border-width:2px 0 0;padding-bottom:28px}
  .pop .arrow{display:none !important}
  .pop .ph{position:sticky;top:0;background:var(--paper);z-index:2;padding-top:2px}
}
@media print{.pop{display:none !important}}

/* ═══════════════════════════════════════════════════════════════════════
   Roof plan additions. Everything above is shared with the wall plan.
   ═══════════════════════════════════════════════════════════════════════ */

/* layer switch swatches — the roof's layers, not the wall's circuits */
.chip[data-l=surface] .sw{background:var(--ink2)}
.chip[data-l=modules] .sw{background:linear-gradient(90deg,var(--pv) 0 25%,
  var(--load) 25% 50%,var(--grid) 50% 75%,var(--bat) 75% 100%)}
.chip[data-l=strings] .sw{background:linear-gradient(90deg,var(--pv) 0 25%,
  var(--load) 25% 50%,var(--grid) 50% 75%,var(--bat) 75% 100%)}
.chip[data-l=bonding] .sw{background:var(--earth)}
.chip[data-l=containment] .sw{background:var(--rule2)}
.chip[data-l=dims] .sw{background:var(--ink3)}
.chip[data-s] .sw{border-radius:50%}
.chip[data-s=s1] .sw{background:var(--pv)} .chip[data-s=s2] .sw{background:var(--load)}
.chip[data-s=s3] .sw{background:var(--grid)} .chip[data-s=s4] .sw{background:var(--bat)}

/* pass / fail cells */
td.ok,.ok{color:var(--ok)} td.no,.no{color:var(--no)}
td.ok b,td.no b{font-family:var(--f-mono);font-size:11.5px}
tfoot td{border-top:1.5px solid var(--ink);font-weight:600}
tr.now td{background:var(--earth-soft)}
tr.now td:first-child::after{content:' \2190 drawn'; font-family:var(--f-mono);
  font-size:9px;letter-spacing:.06em;color:var(--earth)}

/* the detail SVGs that sit in a panel rather than the popover */
.innerwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.innerwrap svg{min-width:0}
#detail .innerwrap svg,.pop .innerwrap svg{min-width:560px}

/* the what-if bar */
.whatif{display:grid;gap:10px;margin:0 0 12px;background:var(--paper);
  border:1.5px solid var(--rule2);border-radius:3px;padding:12px 14px}
.whatif .row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.whatif .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink3);min-width:132px}
.whatif input[type=range]{flex:0 1 220px;accent-color:var(--pv)}
.whatif .val{font-family:var(--f-mono);font-size:11.5px;color:var(--ink);min-width:54px}
.whatif .why{font-family:var(--f-mono);font-size:10px;color:var(--ink3);letter-spacing:.03em;
  flex:1 1 220px;min-width:0}

/* a numbered list of open questions */
ol.asks{counter-reset:a;list-style:none;padding:0;margin:0}
ol.asks li{counter-increment:a;position:relative;padding:0 0 12px 34px;margin:0 0 12px;
  border-bottom:1px solid var(--rule)}
ol.asks li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
ol.asks li::before{content:counter(a,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--f-mono);font-size:11px;color:var(--crit)}
ol.asks b{font-family:var(--f-disp)}

@media (min-width:1080px){ .grid2{grid-template-columns:1.15fr .85fr} }

/* the roof plan is wide and needs the height */
#dwg{height:clamp(420px,74vh,860px)!important}