/* the hidden attribute must win over any display rule below */
[hidden]{display:none !important}
/* ============================================================
   AerialQuote DeckIQ — stage 1 (shape editor + design review).
   Uses the site's tokens from styles.css, so light and dark both work.
   Desktop first (dragging corners wants a mouse), every tool works by
   touch too: 44px hit targets, pinch to zoom, one finger pans.
   ============================================================ */
.iqWrap{max-width:none; margin:0 auto; padding:22px 28px 70px}
/* 13 Oct: the page uses the whole window — a design tool wants the room; the rest of the site keeps its column */
.iqWrap{--line-2:#3A4F80; --ink-3:#8DA0C4}
html[data-mode="light"] .iqWrap{--line-2:#8FA3C8; --line:#B9C8E2; --ink-2:#2E3C5C; --ink-3:#4A5A7E; --mint:#0C9A6A; --amber:#B97600}
html[data-mode="light"] .iqSteps button.done{color:#0C9A6A; border-color:rgba(12,154,106,.55); background:rgba(12,154,106,.08)}
html[data-mode="light"] .buyBox .tier .pr,html[data-mode="light"] .buyBox .okLine{color:#0C9A6A}
/* 18j (Jared): the header was ~220 px of title and paragraph above the map. Now one row on a first visit,
   and a slim bar once there's a design (the long text folds behind "What is DeckIQ?"). */
.iqHead{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between; margin:-8px 0 12px}
.dqHeadTx{flex:1 1 420px; min-width:0}
.dqTitleRow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px}
.iqHead h1{font-size:clamp(24px,2.4vw,32px); font-weight:800; margin:0; line-height:1.1}
.iqHead p{margin:4px 0 0; color:var(--ink-2); max-width:80ch; font-size:15px; line-height:1.45}
.iqBadge{display:inline-block; font:800 11px/1 Figtree,sans-serif; letter-spacing:.14em; color:#1A1203;
  background:var(--amber); padding:5px 8px; border-radius:6px}
.dqHeadProg{display:none; font:700 14px/1 Figtree,sans-serif; color:var(--ink-2)}
.dqHeadProg.full{color:var(--mint)}
.dqWhat{display:none; font:600 13.5px/1 Figtree,sans-serif; color:var(--brand-2, #6E9CFF); background:none; border:0; padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
html[data-mode="light"] .dqWhat{color:#2F6BFF}
.dqMore{display:none}
.iqHead.dqSlim .iqBadge,.iqHead.dqSlim .dqTag{display:none}
.iqHead.dqSlim .dqHeadProg,.iqHead.dqSlim .dqWhat{display:inline-block}
/* 21 Oct (Jared): the progress bar in the header (computer); the phone keeps it in the panel */
.dqTitleRow{flex-wrap:nowrap}
.iqHead.dqSlim .dqHeadProg{display:grid; gap:4px; flex:1 1 220px; min-width:160px; max-width:520px; font:700 12.5px/1.2 Figtree,sans-serif; color:var(--mint)}
.dqHeadProg .bar{display:block; height:8px; border-radius:99px; background:rgba(18,226,154,.14); overflow:hidden}
.dqHeadProg .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#0FB57E,#12E29A); transition:width .35s ease}
.dqHeadProg small{font:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
html[data-mode="light"] .iqHead.dqSlim .dqHeadProg{color:#0B8A5E}
@media (max-width:1000px){ .iqHead.dqSlim .dqHeadProg{display:none} .dqTitleRow{flex-wrap:wrap} }
@media (min-width:1001px){ #iqPanel .iqStick{display:none} }
.iqRail button.dqTool{color:var(--ink-2); font-weight:600}
/* 28 Oct: Save on the rail — cyan with an amber dot while there are changes the account doesn't have */
.iqRail button.dqTool.dqSaveTool.un{color:var(--cy, #26E8FF); font-weight:800}
.iqRail .dqUnsaved{position:absolute; top:4px; right:8px; width:8px; height:8px; border-radius:50%; background:#FFB42A; box-shadow:0 0 6px rgba(255,180,42,.8)}
html[data-mode="light"] .iqRail button.dqTool.dqSaveTool.un{color:#007FA8}
.iqRail .dqCount{font-style:normal; position:absolute; top:3px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:grid; place-items:center; background:#3B82F6; color:#fff; font:800 10px/1 Figtree,sans-serif}
.iqHead.dqSlim h1{font-size:clamp(20px,1.9vw,26px)}
.iqHead.dqSlim .iqAddr input{padding:9px 12px; font-size:15.5px}
.iqHead.dqSlim.dqOpen .dqMore{display:block}
@media (max-width:700px){ .iqHead{margin-top:4px} }
.iqAddr{position:relative; display:flex; gap:8px; flex:1 1 380px; max-width:560px}
.iqAddr input{flex:1; min-width:0; background:var(--panel); border:2px solid var(--line-2); border-radius:12px;
  padding:13px 14px; font:600 17px/1.2 Figtree,sans-serif; color:var(--ink)}
.iqAc{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; background:var(--panel);
  border:1px solid var(--line-2); border-radius:12px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.45)}
.iqAc button{display:block; width:100%; text-align:left; border:0; background:transparent; padding:11px 14px; cursor:pointer; color:var(--ink)}
.iqAc button:hover,.iqAc button.on{background:rgba(110,156,255,.12)}
.iqAc b{display:block; font-weight:700; font-size:15px} .iqAc i{font-style:normal; font-size:13px; color:var(--ink-3)}
.iqAc .by{font-size:11px; color:var(--ink-3); padding:6px 14px; text-align:right}
html[data-mode="light"] .iqAddr input,html[data-mode="light"] .iqAc,html[data-mode="light"] .iqTplMenu,html[data-mode="light"] .iqPop,html[data-mode="light"] .svgWrap{background:#fff}
html[data-mode="light"] .iqAc{box-shadow:0 18px 40px rgba(10,20,45,.18)}

/* ---------- the gate ---------- */
.iqGate{display:grid; place-items:center; min-height:46vh}
.iqGateCard{max-width:560px; background:var(--card); border:1px solid var(--line-2); border-radius:18px; padding:26px; text-align:center}
.iqGateCard h1{font-size:34px; margin:4px 0 8px}
.iqGateCard p{color:var(--ink-2); font-size:16px; margin:0}
.iqGateCard .rowBtns{justify-content:center}

.legal{font-size:13px; line-height:1.5; color:#FFD79A; background:rgba(255,176,32,.07);
  border:1px solid rgba(255,176,32,.42); border-radius:10px; padding:9px 11px}
.legal b{color:#FFC861}
html[data-mode="light"] .legal{color:#6B4A07; background:#FFF8E8; border-color:#F1C46B}
html[data-mode="light"] .legal b{color:#5A3C00}

/* ---------- the app: stage (map + board) + panel ---------- */
.iqApp{display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,600px); border:1px solid var(--line-2);
  border-radius:18px; overflow:hidden; overflow:clip; background:var(--card)}
.iqStage{display:grid; grid-template-rows:minmax(260px,38%) minmax(300px,1fr); min-height:760px; background:#04060C}
.iqMap{position:relative; min-height:300px; background:#04060C; border-bottom:1px solid var(--line-2)}
#iqMap{position:absolute; inset:0}
.iqMapMsg{display:flex; justify-content:center; padding:18px; text-align:center}
.iqMapMsg span{background:rgba(5,9,18,.88); color:#C9D6EE; border:1px solid rgba(110,156,255,.45); border-radius:12px; padding:11px 16px;
  font-size:14.5px; line-height:1.5; box-shadow:0 10px 30px rgba(0,0,0,.45); max-width:520px}
.iqMapMsg b{color:#fff}
.iqPh{position:absolute; inset:0; z-index:3; background:#070C18; overflow:hidden}
.iqPh img{display:block; width:100%; height:auto; opacity:.55}
.iqPh .iqMapMsg{position:absolute; left:0; right:0; bottom:10px; margin:0; padding:0 14px}   /* 17 Oct: pinned to the bottom — below the poster it was cut off on shorter map boxes */
.iqMap.live .iqPh{display:none}
.iqMapBar{position:absolute; left:12px; right:12px; top:12px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; z-index:5; pointer-events:none}
.iqMapBar > *{pointer-events:auto}
.iqTools{display:flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:13px; background:rgba(5,9,18,.88); border:1.5px solid rgba(110,156,255,.5);
  box-shadow:0 8px 24px rgba(0,0,0,.4); backdrop-filter:blur(6px)}
.iqTools button{border:0; background:transparent; color:#DDE6FA; font:700 15px/1 Figtree,sans-serif; padding:10px 14px; border-radius:9px; cursor:pointer; min-height:38px}
.iqTools button:hover{background:rgba(110,156,255,.16)}
.iqTools button.on,.iqTools button[aria-pressed="true"]{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); color:#fff}
.iqTools button:disabled{opacity:.4; cursor:default; background:transparent}
.iqTools button.nudge{animation:iqPulse 1.1s ease-in-out infinite; box-shadow:0 0 0 2px rgba(255,176,32,.9)}
@keyframes iqPulse{0%,100%{box-shadow:0 0 0 2px rgba(255,176,32,.9)} 50%{box-shadow:0 0 0 7px rgba(255,176,32,0)}}
.iqTip{background:rgba(5,9,18,.86); color:#EDF2FF; border:1px solid rgba(110,156,255,.35); border-radius:11px; padding:9px 12px;
  font-size:14px; line-height:1.4; max-width:480px; backdrop-filter:blur(6px)}
.iqTip b{color:#FFD79A}
.iqTip.flash{animation:iqFlash .9s ease-in-out 3}
@keyframes iqFlash{50%{border-color:#FFB020; box-shadow:0 0 0 3px rgba(255,176,32,.35)}}
.iqSideLab{position:absolute; transform:translate(-50%,-50%); background:#0A1120; color:#EDF2FF; border:1.5px solid rgba(255,255,255,.4);
  border-radius:10px; padding:4px 9px 5px; font:800 13px/1.15 Figtree,sans-serif; white-space:nowrap; pointer-events:none; text-align:center}
.iqSideLab b{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.iqSideLab span{display:block}
.iqSideLab.house{background:#FFB020; color:#1A1203; border-color:#FFB020}

/* ---------- the shape board ---------- */
.iqBoardBox{position:relative; min-height:300px; background:var(--panel); display:grid; grid-template-rows:auto 1fr}
.iqBoardBar{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; padding:10px 64px 0 12px; position:relative; z-index:4}   /* room on the right for the full-window button, so no tool sits under it */
@media(max-width:1000px){ .iqBoardBar{padding-right:12px} }
.iqTools.dark{background:rgba(8,13,26,.92)}
html[data-mode="light"] .iqTools.dark{background:#FFFFFF; border-color:var(--line-2)}
html[data-mode="light"] .iqTools.dark button{color:var(--ink-2)}
html[data-mode="light"] .iqTools.dark button.on,html[data-mode="light"] .iqTools.dark button[aria-pressed="true"]{color:#fff}
.iqBoardBar .iqTip{font-size:13px; padding:8px 11px; max-width:520px}
.iqBoard{position:relative; min-height:280px; overflow:hidden; touch-action:none; cursor:grab}
.iqBoard.dragging{cursor:grabbing}
.iqBoard svg{display:block; width:100%; height:100%; position:absolute; inset:0; user-select:none; -webkit-user-select:none}
.iqBoard .grid line{stroke:rgba(110,156,255,.09)} .iqBoard .grid line.five{stroke:rgba(110,156,255,.18)}
/* light mode: a white sheet with blue-gray grid lines, like paper on a drafting board */
html[data-board="drafting"] .iqBoardBox,html[data-board="drafting"] .iqBoard,html[data-board="drafting"] .iqReviewDraw .iqBoard{background:#FFFFFF}
html[data-board="drafting"] .iqBoard .grid line{stroke:rgba(47,107,255,.13)} html[data-board="drafting"] .iqBoard .grid line.five{stroke:rgba(47,107,255,.28)}
html[data-board="drafting"] .iqBoard .lab rect{fill:#FFFFFF; stroke:#2B3D66} html[data-board="drafting"] .iqBoard .lab text{fill:#080E20}
html[data-board="drafting"] .iqBoard .lab.ang rect{fill:#F4F7FD; stroke:#6E9CFF} html[data-board="drafting"] .iqBoard .lab.ang text{fill:#1741C4}
html[data-board="drafting"] .iqBoard .lab.house rect{fill:#FFB020; stroke:#B97600} html[data-board="drafting"] .iqBoard .lab.house text{fill:#1A1203}
html[data-board="drafting"] .iqBoard .lab.num rect{fill:#2F6BFF; stroke:#1741C4} html[data-board="drafting"] .iqBoard .lab.num text{fill:#fff}
html[data-board="drafting"] .iqBoard .deck{fill:rgba(255,107,26,.18)}
html[data-board="drafting"] .iqBoard .deck.ghost{fill:rgba(62,76,107,.08); stroke:rgba(62,76,107,.6)}
html[data-board="drafting"] .iqBoard .vtx{fill:#fff}
html[data-board="drafting"] .iqBoard .houseLab{fill:#9A6300}
html[data-board="drafting"] .iqBoard .edgeSel{stroke:#1741C4}
html[data-board="drafting"] .iqBoard .scale line{stroke:#3E4C6B} html[data-board="drafting"] .iqBoard .scale text{fill:#3E4C6B}
.iqBoard .house{fill:url(#iqHatch); stroke:#FFB020; stroke-width:1.2}
.iqBoard .houseLab{font:800 10.5px/1 Figtree,sans-serif; letter-spacing:.14em; fill:#FFB020}
.iqBoard .deck{fill:rgba(255,107,26,.22); stroke:#FF6B1A; stroke-width:2.5; stroke-linejoin:round}
.iqBoard .deck.ghost{fill:rgba(167,183,214,.08); stroke:rgba(167,183,214,.6); stroke-dasharray:6 5; stroke-width:1.5; cursor:pointer}
.iqBoard .ledger{stroke:#FFB020; stroke-width:6; stroke-linecap:butt; fill:none; opacity:.95}
.iqBoard .edgeHit{stroke:transparent; stroke-width:22; fill:none; cursor:pointer}
.iqBoard .edgeHit.curve{stroke-width:26}
.iqBoard .edgeSel{stroke:#fff; stroke-width:4; fill:none; stroke-dasharray:7 5; pointer-events:none}
.iqBoard .vtx{fill:#fff; stroke:#FF6B1A; stroke-width:3; cursor:move}
.iqBoard .vtx.house{stroke:#FFB020}
.iqBoard .vtx.sel{fill:#FFB020; stroke:#fff}
.iqBoard .vtxHit{fill:transparent; cursor:move}
.iqBoard .lab{pointer-events:none}
/* a label's <g class="lab house"> also matches .house above, so the text inherited an orange 1.2px stroke and read as hollow — never stroke label text */
.iqBoard .lab text, .iqMini .lab text, .keyMap .lab text{stroke:none} .iqBoard g.lab.house, .iqMini g.lab.house, .keyMap g.lab.house{fill:none; stroke:none}
.iqBoard .lab rect{fill:#0A1120; stroke:rgba(255,255,255,.35); stroke-width:1; rx:6}
.iqBoard .lab text{font:700 12.5px/1 "IBM Plex Mono",monospace; fill:#EDF2FF}
.iqBoard .lab.house rect{fill:#FFB020; stroke:#FFB020} .iqBoard .lab.house text{fill:#1A1203}
.iqBoard .lab.ang rect{fill:rgba(10,17,32,.9); stroke:rgba(110,156,255,.5)} .iqBoard .lab.ang text{fill:#A8C4FF; font-size:11px}
.iqBoard .lab.num rect{fill:#2F6BFF; stroke:#6E9CFF} .iqBoard .lab.num text{fill:#fff; font-family:Figtree,sans-serif; font-weight:800}
.iqBoard .lab.sel rect{stroke:#fff; stroke-width:2}
.iqBoard .scale line{stroke:var(--ink-2); stroke-width:2} .iqBoard .scale text{font:700 11px/1 Figtree,sans-serif; fill:var(--ink-2)}
.iqBoard .north text{font:800 12px/1 Figtree,sans-serif; fill:var(--ink-3)} .iqBoard .north path{fill:var(--ink-3)}
.iqBoard .empty text{font:600 15px/1.4 Figtree,sans-serif; fill:var(--ink-3); text-anchor:middle}
.iqBoard .dragLab rect{fill:#FF6B1A; stroke:#fff} .iqBoard .dragLab text{fill:#fff}
.iqTplMenu{position:absolute; left:12px; top:58px; z-index:30; background:var(--panel); border:1px solid var(--line-2); border-radius:14px; padding:10px;
  display:grid; grid-template-columns:repeat(3,112px); gap:8px; box-shadow:0 18px 40px rgba(0,0,0,.45)}
.iqTplMenu button{border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); border-radius:11px; padding:8px 8px 9px; cursor:pointer; display:grid; gap:4px; text-align:center}
html[data-mode="light"] .iqTplMenu button{background:#F4F7FD}
.iqTplMenu button:hover{border-color:var(--blue-lit)}
.iqTplMenu svg{width:88px; height:60px; display:block; margin:0 auto}
.iqTplMenu svg path{fill:rgba(255,107,26,.25); stroke:#FF6B1A; stroke-width:1.5; vector-effect:non-scaling-stroke}
.iqTplMenu svg line{stroke:#FFB020; stroke-width:3; vector-effect:non-scaling-stroke}
.iqTplMenu b{font:700 13px/1.2 Figtree,sans-serif} .iqTplMenu small{font-size:11px; color:var(--ink-3); line-height:1.3}
.iqTplMenu .all{grid-column:1/-1; font-size:12px; color:var(--ink-3); text-align:left; padding:2px 4px}


/* ---------- the panel ---------- */
.iqPanel{padding:16px; display:grid; gap:12px; align-content:start; border-left:1px solid var(--line)}
.iqStick{display:grid; gap:8px}
.iqSteps{display:flex; flex-wrap:wrap; gap:6px}
.iqSteps button{font:700 13.5px/1 Figtree,sans-serif; padding:8px 11px; border-radius:99px; border:1.5px solid var(--line-2); color:var(--ink-2); background:transparent; cursor:pointer}
.iqSteps button:hover{border-color:#6E9CFF; color:var(--ink)}
.iqSteps button.done{color:var(--mint); border-color:rgba(18,226,154,.5); background:rgba(18,226,154,.08)}
.iqProg{display:grid; gap:6px}
.iqProg .bar{height:8px; border-radius:99px; background:rgba(110,156,255,.14); overflow:hidden}
.iqProg .bar{background:rgba(18,226,154,.14)}
.iqProg .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#0FB57E,#12E29A); transition:width .35s ease}
.iqProg span{font-size:14px; color:var(--ink-2); line-height:1.4}
.iqProg b{color:var(--mint)}
.q{background:var(--panel-2); border:1.5px solid var(--line-2); border-radius:14px; padding:14px; display:grid; gap:10px}
html[data-mode="light"] .q{background:#F4F7FD}
.q h3{font:700 19px/1.25 Outfit,sans-serif; letter-spacing:-.01em; margin:0}
.q h4{font:800 14.5px/1.2 Figtree,sans-serif; color:var(--ink); text-transform:uppercase; letter-spacing:.08em; margin:18px 0 8px; padding-top:12px; border-top:1.5px solid var(--line-2)}   /* 14 Oct: a section break you can see */
.q h4:first-child, .q .qHead + h4, .q p + h4.tight{margin-top:8px; padding-top:0; border-top:0}
.q p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.45}
.q p.note{font-size:14px; color:var(--ink-3)}
.q.off{opacity:.45; pointer-events:none}
.q.ok{border-color:rgba(18,226,154,.35)}
.q.sel{border-color:rgba(255,176,32,.6); box-shadow:0 0 0 1px rgba(255,176,32,.25) inset}
.qHead{display:flex; align-items:center; justify-content:space-between; gap:10px} .qHead>h3{flex:1 1 auto}
.okBtn{flex:none; font:700 14px/1 Figtree,sans-serif; color:#fff; background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border:0; border-radius:8px; padding:7px 11px; cursor:pointer}
.okDone{flex:none; font:700 13.5px/1 Figtree,sans-serif; color:var(--mint)}
.seg{display:flex; flex-wrap:wrap; gap:4px; background:rgba(5,9,18,.35); border:1.5px solid var(--line-2); border-radius:12px; padding:4px}
html[data-mode="light"] .seg{background:#E9EEF8}
.seg button{border:0; background:transparent; color:var(--ink-2); font:700 15px/1.2 Figtree,sans-serif; padding:9px 11px; border-radius:9px; cursor:pointer; text-align:left; flex:1 1 auto}
.seg button small{display:block; font-weight:500; font-size:12.5px; opacity:.8; margin-top:2px}
.seg button[aria-pressed="true"]{color:#fff; background:linear-gradient(180deg,#6E9CFF,#2F6BFF)}
.dims{display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px}
.fld{display:grid; gap:5px; align-content:start}
.fld label{font:700 12.5px/1.2 Figtree,sans-serif; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
.fld input,.fld select{background:var(--panel); color:var(--ink); border:1.5px solid var(--line-2); border-radius:9px;
  padding:10px; font:600 16px/1.2 Figtree,sans-serif; width:100%; min-width:0}
html[data-mode="light"] .fld input,html[data-mode="light"] .fld select{background:#fff}
.fld small{font-size:13px; color:var(--ink-3)}
.fld.wide{grid-column:1/-1}
.ftin{display:grid; grid-template-columns:1fr 1fr; gap:6px} .ftin > span{position:relative} .ftin input{padding-right:30px}
.ftin i{position:absolute; right:10px; top:50%; transform:translateY(-50%); font:600 12px/1 Figtree,sans-serif; color:var(--ink-3); font-style:normal; pointer-events:none}
.btnRow{display:flex; flex-wrap:wrap; gap:6px}
.btnRow button,.iqSmall{border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); font:700 14.5px/1 Figtree,sans-serif; padding:10px 13px; border-radius:9px; cursor:pointer; min-height:40px}
html[data-mode="light"] .btnRow button,html[data-mode="light"] .iqSmall{background:#fff}
.btnRow button:hover,.iqSmall:hover{border-color:var(--blue-lit)}
.btnRow button.pri{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border:0; color:#fff}
.btnRow button.warn{border-color:rgba(255,90,110,.5); color:#FF9CA9}
.btnRow button[aria-pressed="true"]{background:rgba(255,176,32,.16); border-color:var(--amber)}
.tgl{display:flex; align-items:center; gap:10px; font:600 14px/1.3 Figtree,sans-serif; cursor:pointer}
.tgl input{width:20px; height:20px; accent-color:#FFB020}
.lvls{display:grid; grid-template-columns:minmax(0,1fr); gap:6px}   /* 21r: never wider than the card */
.lvl{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"r n x" "r h x" "r m x"; gap:4px 10px; align-items:center; border:1.5px solid var(--line-2); background:var(--panel); border-radius:10px; padding:8px 10px}
html[data-mode="light"] .lvl{background:#fff}
.lvl.on{border-color:#FF6B1A}
.lvl input[type=radio]{grid-area:r; width:18px; height:18px; accent-color:#FF6B1A}
.lvl .nm{grid-area:n} .lvl .nm input{width:100%; background:transparent; border:0; border-bottom:1px dashed var(--line-2); color:var(--ink); font:700 14.5px/1.2 Figtree,sans-serif; padding:3px 0}
.lvl .ht{grid-area:h; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-3)}
.lvl .ht input{width:52px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:7px; color:var(--ink); font:600 13.5px/1 Figtree,sans-serif; padding:6px 7px}
.lvl .ms{grid-area:m; font:600 12px/1.3 "IBM Plex Mono",monospace; color:var(--ink-3)}
.lvl .x{grid-area:x; border:0; background:transparent; color:var(--ink-3); font-size:16px; cursor:pointer; padding:6px}
.lvl .x:hover{color:#FF5A6E}
.stAdd{border:1px dashed var(--line-2); background:transparent; color:var(--ink-2); font:700 13.5px/1 Figtree,sans-serif; padding:10px; border-radius:10px; cursor:pointer}
.stAdd:hover{border-color:var(--blue-lit); color:var(--ink)}

/* the outputs card */
.ans{background:var(--panel); border:1px solid rgba(110,156,255,.4); border-radius:16px; padding:15px; box-shadow:0 0 40px -18px rgba(47,107,255,.6)}
html[data-mode="light"] .ans{background:#fff}
.ans .qq{font:600 13px/1.3 Figtree,sans-serif; color:var(--ink-3)}
.ans .big{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:3px}
.ans .big b{font:600 36px/1 "IBM Plex Mono",monospace; color:var(--blue-lit)}
.ans .big span{font:700 16px/1.2 Figtree,sans-serif}
.ans .s{margin-top:6px; color:var(--ink-2); font-size:14px; line-height:1.45}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.tile{border:1.5px solid var(--line-2); border-radius:12px; padding:10px 11px; min-width:0}
.tile .tl{font:700 11.5px/1 Figtree,sans-serif; letter-spacing:.1em; color:var(--ink-3)}
.tile .tv{font:600 18px/1.25 "IBM Plex Mono",monospace; margin-top:5px; overflow-wrap:anywhere}
.tile.amber{border-color:var(--line-2)}   /* was a gold outline on the headline tile — read as a warning, dropped 14 Oct */
.tile.mint{border-color:rgba(18,226,154,.45)} .tile.mint .tl,.tile.mint .tv{color:var(--mint)}
.flags{display:grid; gap:6px; margin-top:12px}
.flag{font-size:13px; line-height:1.45; border-radius:10px; padding:8px 10px; border:1px solid var(--line-2); color:var(--ink-2)}
.flag.review{color:#FFD79A; background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.5)}
.flag.warn{color:#FFC2CA; background:rgba(255,90,110,.08); border-color:rgba(255,90,110,.5)}
.flag.amber{color:#FFD79A; background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.5)}   /* 1 Nov: a thing to do (seal the laps), not an engineer's */
html[data-mode="light"] .flag.review{color:#6B4A07; background:#FFF8E8}
html[data-mode="light"] .flag.amber{color:#6B4A07; background:#FFF8E8}
html[data-mode="light"] .flag.warn{color:#9B1C1C; background:#FFF1F2; border-color:#F3A5AE}   /* 22j (Jared): the dark-mode pink was unreadable on white */
.nextBox{margin-top:12px; font-size:13px; color:var(--ink-3); border-top:1px dashed var(--line-2); padding-top:10px; line-height:1.45}

/* ---------- design review ---------- */
.iqSec{margin-top:34px}
.iqSec > h2{font:800 clamp(22px,2.4vw,30px)/1.15 Outfit,sans-serif; margin-bottom:6px}
.iqSec > p.sub{font-size:16px; margin:0 0 14px}
.kick{font:700 12px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:8px}
.iqReviewGrid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:14px}
@media(max-width:1000px){ .iqReviewGrid{grid-template-columns:1fr} }
.card2{background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:15px; display:grid; gap:12px; align-content:start; min-width:0}
.svgWrap{overflow-x:auto; border-radius:10px; position:relative; background:var(--panel)}
.svgWrap svg{display:block; width:100%; height:auto}
.iqReviewDraw .iqBoard svg{height:100%}
.iqReviewDraw .iqBoard{position:relative; min-height:520px; height:min(72vh,760px); border-radius:10px; overflow:hidden; background:var(--panel); cursor:default}
.rvTbl{width:100%; border-collapse:collapse; font-size:13.5px}
.rvTbl th{text-align:left; font:700 11px/1.2 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:6px 6px; border-bottom:1px solid var(--line-2)}
.rvTbl td{padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:top}
.rvTbl td.n{font:600 13px/1.2 "IBM Plex Mono",monospace; white-space:nowrap}
.rvTbl tr.sel td{background:rgba(255,176,32,.12)}
.rvTbl tr{cursor:pointer} .rvTbl tr:hover td{background:rgba(110,156,255,.08)}
.rvTbl .pill{display:inline-block; font:700 10.5px/1 Figtree,sans-serif; letter-spacing:.06em; padding:4px 7px; border-radius:99px; background:rgba(110,156,255,.14); color:var(--blue-ink); text-transform:uppercase}
.rvTbl .pill.house{background:rgba(255,176,32,.2); color:#FFC861}
html[data-mode="light"] .rvTbl .pill.house{color:#6B4A07}
.rvTbl .pill.curve{background:rgba(18,226,154,.16); color:var(--mint)}
.card2 h3{font:700 17px/1.25 Outfit,sans-serif; margin:0}
.card2 .lvTabs{display:flex; flex-wrap:wrap; gap:6px}
.card2 .lvTabs button{font:700 12.5px/1 Figtree,sans-serif; padding:7px 10px; border-radius:99px; border:1px solid var(--line-2); color:var(--ink-2); background:transparent; cursor:pointer}
.card2 .lvTabs button[aria-pressed="true"]{color:#fff; background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border-color:transparent}
.rowBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* the phone's small drawing */
.iqMini{background:var(--panel); border:1px solid var(--line-2); border-radius:12px; height:220px; position:relative; overflow:hidden}
html[data-mode="light"] .iqMini{background:#fff}
.iqMini svg{display:block; width:100%; height:100%}
.iqMini .grid line{stroke:rgba(110,156,255,.09)} .iqMini .grid line.five{stroke:rgba(110,156,255,.18)}
.iqMini .house{fill:url(#iqHatch); stroke:#FFB020; stroke-width:1.2} .iqMini .houseLab{font:800 10px/1 Figtree,sans-serif; letter-spacing:.14em; fill:#FFB020}
.iqMini .deck{fill:rgba(255,107,26,.22); stroke:#FF6B1A; stroke-width:2.5; stroke-linejoin:round} .iqMini .ledger{stroke:#FFB020; stroke-width:5; fill:none}
.iqMini .lab rect{fill:#0A1120; stroke:rgba(255,255,255,.35); rx:6} .iqMini .lab text{font:700 11px/1 "IBM Plex Mono",monospace; fill:#EDF2FF}
.iqMini .lab.house rect{fill:#FFB020} .iqMini .lab.house text{fill:#1A1203} .iqMini .lab.ang{display:none} .iqMini .scale{display:none}
html[data-mode="light"] .iqMini .lab rect{fill:#fff; stroke:#2B3D66} html[data-mode="light"] .iqMini .lab text{fill:#080E20}
/* railing-edge picker and stair rows (re-deck) */
.sides{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px}
.sides button{display:grid; gap:2px; text-align:left; border:1px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:10px; padding:8px 9px; cursor:pointer}
html[data-mode="light"] .sides button{background:#fff}
.sides button b{font-size:13.5px} .sides button .len{font:600 12px/1 "IBM Plex Mono",monospace; color:var(--ink-3)} .sides button i{font:700 11px/1 Figtree,sans-serif; color:var(--ink-3); font-style:normal; text-transform:uppercase; letter-spacing:.06em}
.sides button[aria-pressed="true"]{border-color:var(--amber); background:rgba(255,176,32,.12)} .sides button[aria-pressed="true"] i{color:var(--amber)}
.stSets{display:grid; gap:6px}
.stSet{display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"t s x" "t m x"; align-items:center; gap:4px 10px; border:1px solid var(--line-2); background:var(--panel); border-radius:10px; padding:8px 10px}
html[data-mode="light"] .stSet{background:#fff}
.stSet > b{grid-area:t; font-size:13.5px} .stSet .stSides{grid-area:s} .stSet > small{grid-area:m; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-3)}
.stSet .stSides select,.stSet input{background:var(--panel-2); border:1px solid var(--line-2); border-radius:7px; color:var(--ink); font:600 13px/1.2 Figtree,sans-serif; padding:6px 7px}
.stSet .seg{padding:2px} .stSet .seg button{padding:6px 8px; font-size:12.5px}
.stDel{grid-area:x; border:0; background:transparent; color:var(--ink-3); font-size:16px; cursor:pointer; padding:6px} .stDel:hover{color:#FF5A6E}
/* the shopping list */
.bomHead{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:flex-end; justify-content:space-between; margin-bottom:14px}
.bomHead h2{font:800 clamp(22px,2.4vw,30px)/1.15 Outfit,sans-serif; margin-bottom:6px} .bomHead p.sub{font-size:15px; margin:0; color:var(--ink-2)}
.bomPrice{text-align:right} .bomPrice b{display:block; font:600 28px/1.1 "IBM Plex Mono",monospace; color:var(--mint)} .bomPrice span{font-size:13px; color:var(--ink-3)}
.shop{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.grp{background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:14px; min-width:0}
.grp h3{font:700 16px/1.25 Outfit,sans-serif; margin:0 0 8px; display:flex; justify-content:space-between; gap:10px} .grp h3 span{font:600 12px/1.3 Figtree,sans-serif; color:var(--ink-3)}
.grp p.note{margin:0 0 8px; font-size:13px; color:var(--ink-3); line-height:1.45}
.item{display:grid; grid-template-columns:44px 1fr; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.4}
.item b{font:600 14px/1.4 "IBM Plex Mono",monospace; color:var(--blue-lit); text-align:right} .item small{display:block; font-size:12.5px; color:var(--ink-3)}
.flag.note{color:var(--ink-2)}
/* pop-ups + toast */
.iqBack{position:fixed; inset:0; background:rgba(3,5,12,.66); display:grid; place-items:center; padding:16px; z-index:200}
.iqPop{width:min(540px,100%); max-height:86vh; overflow:auto; background:var(--panel); border:1px solid var(--line-2); border-radius:18px; padding:18px}
.iqPop h3{margin:0 0 6px; font:800 20px/1.25 Outfit,sans-serif}
.iqPop p{margin:0 0 10px; color:var(--ink-2); font-size:14.5px}
.iqPop .x{float:right; border:0; background:rgba(140,170,230,.12); color:var(--ink); width:34px; height:34px; border-radius:9px; cursor:pointer}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#0A1120; color:#EDF2FF; border:1px solid rgba(110,156,255,.45);
  padding:11px 16px; border-radius:12px; z-index:300; font-size:14.5px; box-shadow:0 10px 30px rgba(0,0,0,.5); max-width:92vw}
.srOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- desktop: the stage stays in view while the panel scrolls ---------- */
@media (min-width:1001px){
  .iqStage{position:sticky; top:76px; align-self:start; height:calc(100vh - 96px); min-height:620px; max-height:1000px}
  /* 18 Oct (Jared): TWO scrollbars. The step panel stays put beside the stage and
     scrolls on its own; the page scrollbar moves on to the build sheet, the list
     and the plan set below. A re-render that shrinks the panel can't move the page. */
  .iqPanel{position:sticky; top:76px; align-self:start; height:calc(100vh - 96px); min-height:360px; max-height:1000px; overflow-y:auto; scrollbar-width:thin; scrollbar-gutter:stable}
  .iqPanel .iqStick{position:sticky; top:-16px; z-index:30; background:var(--card); margin:-16px -16px 4px; padding:12px 16px 10px; border-bottom:1px solid var(--line); box-shadow:0 10px 18px -12px rgba(0,0,0,.6)}
  .iqApp{align-items:start}
}
/* ---------- phone / tablet: one column, Satellite | Shape tabs ---------- */
@media (max-width:1000px){
  .iqApp{grid-template-columns:1fr}
  /* the phone gets the sky and the numbers; the board is a desktop tool */
  .iqStage{grid-template-rows:1fr; min-height:0; height:min(68vh,620px)}
  .iqBoardBox{display:none}
  #iqReview{display:none}
  .iqMap{border-bottom:0}
  .iqPanel{border-left:0; border-top:1px solid var(--line)}
  .iqStick{position:sticky; top:var(--navH,60px); z-index:30; background:var(--card); margin:-16px -16px 0; padding:10px 16px 10px; border-bottom:1px solid var(--line)}
  .iqStick .iqSteps{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .iqStick .iqSteps::-webkit-scrollbar{display:none}
  .iqStick .iqSteps button{flex:none}
  .iqTplMenu{grid-template-columns:repeat(2,1fr); left:10px; right:10px}
  .iqBoardBar .iqTip{display:none}
}
@media (max-width:520px){
  .iqWrap{padding:14px 12px 60px}
  .ans .big b{font-size:30px}
  .iqTools button{padding:10px 11px; font-size:13px}
}

/* ---------- print: the shopping list only ---------- */
@media print{
  nav,.mobileMenu,footer,.iqHead,.iqAppGrid,#iqReview,.legal:not(#iqBom .legal),.iqBack,.toast,.iqSmall,.rowBtns{display:none !important}
  body{background:#fff; color:#000} .iqWrap{padding:0; max-width:none}
  #iqBom{display:block !important} .grp,.item,.bomHead{break-inside:avoid; border-color:#999} .item b{color:#000} .bomPrice b{color:#000}
  .shop{grid-template-columns:1fr 1fr} .rvTbl td,.rvTbl th{border-color:#ccc}
}

/* ---------- stage 2: the frame on the board ---------- */
.iqBoard .frame{pointer-events:none}
.iqBoard .frame .joist{stroke:rgba(255,255,255,.42); stroke-width:1.6; stroke-linecap:butt}
.iqBoard .frame .joist.end{stroke-width:3; stroke:rgba(255,255,255,.6)}
.iqBoard .frame .joist.short{stroke:#FF9F43}
.iqBoard .frame .beam{stroke:#FFB020; stroke-linecap:butt; opacity:.92}
.iqBoard .frame .beam.mid{stroke:#F7C65C; stroke-dasharray:14 6}
.iqBoard .frame .post{fill:#101827; stroke:#FFB020; stroke-width:2}
.iqBoard .frame .post.rimPost{stroke:#FF9F43}
/* 28y: the upper deck's posts through the lower deck, in their collars */
.iqBoard .frame .dqThru{fill:none; stroke:#4FC3F7; stroke-width:1.5; stroke-dasharray:3 2} .iqBoard .frame .dqThru.bad{stroke:#E5484D}
.iqBoard .frame .post.thruPost{stroke:#4FC3F7}
html[data-board="drafting"] #iqSvg .frame .dqThru{stroke:#1F6FB2} html[data-board="drafting"] #iqSvg .frame .post.thruPost{stroke:#1F6FB2}
.lvl .dqUpper{display:flex; align-items:center; flex-wrap:wrap; gap:4px; grid-column:2; grid-row:4; font-size:12.5px}
.iqBoard .lab.beam rect{fill:#2A2208; stroke:#FFB020} .iqBoard .lab.beam text{fill:#FFD98A}
html[data-board="drafting"] .iqBoard .frame .joist{stroke:rgba(15,23,42,.32)}
html[data-board="drafting"] .iqBoard .frame .joist.end{stroke:rgba(15,23,42,.5)}
html[data-board="drafting"] .iqBoard .frame .post{fill:#fff; stroke:#B97600}
html[data-board="drafting"] .iqBoard .frame .beam{stroke:#E39A00}
html[data-board="drafting"] .iqBoard .lab.beam rect{fill:#FFF8E8; stroke:#B97600} html[data-board="drafting"] .iqBoard .lab.beam text{fill:#5A3C00}
.iqAdv{margin:10px 0 0; border:1px solid var(--line-2); border-radius:12px; padding:8px 12px; background:var(--bg-2, rgba(255,255,255,.03))}
.iqAdv summary{cursor:pointer; font:600 14px Figtree,sans-serif; color:var(--ink-2); padding:4px 0}
.iqAdv .dims{margin-top:8px; grid-template-columns:repeat(2,1fr)}
.iqAdv select{width:100%; min-height:40px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg-1, transparent); color:var(--ink-1); padding:6px 10px; font:500 14px Figtree,sans-serif}
.frList{margin:10px 0 4px; padding:0 0 0 18px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.frList li{margin:0 0 4px} .frList b{color:var(--ink-1)}
.tile .ts{font-size:12px; color:var(--ink-3); margin-top:2px; line-height:1.3}
@media print{ .iqBoard .frame .joist{stroke:#555} .iqBoard .frame .post{fill:#fff; stroke:#000} .iqBoard .frame .beam{stroke:#000} }

/* posts and beams the owner can move */
.iqBoard .frameHits .postHit{fill:transparent; cursor:grab}
.iqBoard .frameHits .beamHit{stroke:transparent; stroke-width:14; cursor:ns-resize}
.iqBoard .frame .post.locked{stroke:#12E29A}
.iqBoard .frame .beam.moved{stroke:#12E29A}
.iqBoard.dragging .frameHits{pointer-events:none}

/* Move: the whole level follows the pointer */
.lockNote{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 2px;padding:8px 10px;border-radius:10px;border:1.5px solid rgba(18,226,154,.55);background:rgba(18,226,154,.12);color:var(--ink);font-size:.93em} .lockNote .iqSmall{margin-left:auto}
.iqBoard.locked .vtxHit{cursor:not-allowed} .iqBoard.locked .vtx{opacity:.55}
.iqBoard.moveMode{cursor:move} .iqBoard.moveMode .deck{cursor:move}
.iqBoard.moveMode .edgeHit,.iqBoard.moveMode .vtxHit,.iqBoard.moveMode .frameHits{pointer-events:none}

/* segments with three or four choices: equal columns, no orphan */
.seg.cols3{display:grid; grid-template-columns:repeat(3,1fr)} .seg.cols4{display:grid; grid-template-columns:repeat(4,1fr)}
.seg.cols3 button,.seg.cols4 button{min-width:0}
/* picture tiles for the edge and corner tools */
.picks{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; margin:4px 0 10px}
.picks button{display:grid; justify-items:center; gap:5px; padding:10px 6px; border:1.5px solid var(--line-2); border-radius:10px; background:transparent; color:var(--ink-2); font:700 13px/1.2 Figtree,sans-serif; cursor:pointer; text-align:center}
.picks button svg{color:var(--blue-lit, #6E9CFF)}
.picks button:hover{border-color:#6E9CFF; color:var(--ink)}
.picks button[aria-pressed="true"]{border-color:#6E9CFF; background:rgba(47,107,255,.16); color:var(--ink)}
.picks button.warn{color:#FF6B6B} .picks button.warn svg{color:#FF6B6B}
/* Expand: the map or the board fills the window */
.iqApp.maxMap .iqStage,.iqApp.maxBoard .iqStage{position:fixed; inset:0; z-index:160; height:100vh; max-height:none; min-height:0; grid-template-rows:1fr; background:#04060C}
.iqApp.maxMap .iqBoardBox,.iqApp.maxBoard .iqMap{display:none}
.iqApp.maxBoard .iqBoardBox{height:100%}
html.iqMaxed{overflow:hidden}
html[data-mode="light"] .iqApp.maxBoard .iqStage{background:#FFFFFF}
/* the maximize corner button: arrows out of a corner; an × once it is full window */
.iqMax{position:absolute; top:10px; right:10px; z-index:40; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(110,156,255,.35); background:rgba(5,9,18,.88); color:#E7ECF7; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35)}
.iqMax:hover{border-color:#6E9CFF; color:#fff}
.iqMax .ic{display:none} .iqMax.on .ix{display:none} .iqMax.on .ic{display:block}
.iqMax.on{border-color:#6E9CFF; background:linear-gradient(180deg,#6E9CFF,#2F6BFF); color:#fff}
.iqBoardBox{position:relative}
html[data-mode="light"] .iqMax{background:#FFFFFF; border-color:var(--line-2); color:var(--ink-2)} html[data-mode="light"] .iqMax.on{color:#fff; background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border-color:#2F6BFF}
.iqMax{width:42px; height:42px; border-width:1.5px} .iqMax svg{width:20px; height:20px}
@media(max-width:1000px){ .iqMax{display:none} }

/* the edge and corner list */
.elist{display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 2px}
.elist button{font:700 13.5px/1 "IBM Plex Mono",monospace; padding:9px 11px; border-radius:8px; border:1.5px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer}
.elist button small{font:500 11px/1 Figtree,sans-serif; color:var(--ink-3); margin-left:4px}
.elist button.house{border-color:rgba(255,176,32,.5); color:#FFD98A}
.elist button:hover{border-color:#6E9CFF; color:var(--ink)}
.elist button[aria-pressed="true"]{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border-color:#2F6BFF; color:#fff} .elist button[aria-pressed="true"] small{color:rgba(255,255,255,.8)}
/* the dock on the maximized board */
.iqDock{display:none}
.iqApp.maxBoard .iqDock{display:block; position:absolute; top:64px; right:14px; bottom:14px; width:min(380px, 40vw); overflow:auto; z-index:45; background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:12px 14px; box-shadow:0 14px 40px rgba(0,0,0,.45)}
.iqDock[hidden]{display:none !important}
.iqDock .dSteps{display:grid; gap:6px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.iqDock .dSteps button[data-go]{text-align:left; font:700 13px/1 Figtree,sans-serif; padding:8px 10px; border-radius:9px; border:1px solid var(--line-2); color:var(--ink-3); background:transparent}
.iqDock .dSteps button.done{color:var(--mint); border-color:rgba(18,226,154,.5); background:rgba(18,226,154,.08)}
.iqDock .q{margin:0; padding:0; border:0; background:transparent}

/* NOT TO CODE: the red stamp on the board, the badge on the card, the chip, the dock box */
.iqBoard .codeStamp{cursor:pointer}
.iqBoard .codeStamp rect{fill:#E3170A; stroke:#A30D04; stroke-width:3; opacity:.93}
.iqBoard .codeStamp rect.inner{fill:none; stroke:#FDE8E8; stroke-width:3; stroke-dasharray:none; opacity:.9}
.iqBoard .codeStamp text{fill:#FDE8E8; font-family:Outfit,Figtree,sans-serif; font-weight:900; letter-spacing:.06em; paint-order:stroke; stroke:#A30D04; stroke-width:2px}
.iqBoard .codeStamp text.sub{font-weight:700; letter-spacing:.02em; stroke-width:1px}
.codeBadge{display:inline-block; font:900 11px/1 Outfit,Figtree,sans-serif; letter-spacing:.06em; color:#FDE8E8; background:#E3170A; border:2px solid #FDE8E8; outline:2px solid #E3170A; border-radius:6px; padding:5px 8px; margin-left:8px; transform:rotate(-4deg); vertical-align:middle}
.codeNo{font:700 12px/1 Figtree,sans-serif; color:#FF6B6B}
.q.bad{border-color:rgba(227,23,10,.7); box-shadow:0 0 0 1px rgba(227,23,10,.35) inset}
.iqSteps button.bad,.iqDock .dSteps button.bad{color:#FF6B6B; border-color:rgba(255,107,107,.6); background:rgba(227,23,10,.14)}
.dockStamp{background:#E3170A; color:#FDE8E8; border:2px solid #FDE8E8; outline:2px solid #E3170A; border-radius:10px; padding:10px 12px; margin-bottom:10px; cursor:pointer}
.dockStamp b{display:block; font:900 18px/1 Outfit,Figtree,sans-serif; letter-spacing:.06em}
.dockStamp span{font:600 12px/1.3 Figtree,sans-serif; opacity:.9}
.dockStamp ul{margin:8px 0 0; padding-left:16px; font:500 12px/1.4 Figtree,sans-serif}
.dockStamp.quiet{background:rgba(227,23,10,.18); color:#FFB4B4; border-color:rgba(227,23,10,.5); outline:0}

/* v20261013v — engineering required (the owner carried on with a frame that is not to code) */
.iqBoard .engStamp rect{fill:rgba(227,23,10,.92); stroke:#FDE8E8; stroke-width:2}
.iqBoard .engStamp text{fill:#FDE8E8; font-family:Outfit,Figtree,sans-serif; font-weight:900; letter-spacing:.08em}
.iqSmall.warn{border-color:rgba(255,107,107,.6); color:#FF6B6B}
.codeNo .iqSmall.warn{margin-left:6px; vertical-align:middle}
.flag.eng{color:#FDE8E8; background:#E3170A; border-color:#FDE8E8; font-weight:600}
.dockStamp.eng{outline-color:#A30D04}

/* ---- 13 Oct (3a): picture toolbar, which-edge-is-which, the dock's way out of NOT TO CODE ---- */
.iqTools.iconTools{gap:2px}
.iqTools.iconTools button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 6px 5px; min-width:46px; min-height:52px; font:700 11px/1 Figtree,sans-serif}
.iqApp.maxBoard .iqTools.iconTools button{min-width:56px; padding:7px 9px 6px; font-size:11.5px}
.iqTools.iconTools button svg{width:22px; height:22px; flex:none}
.iqTools.iconTools button span{white-space:nowrap}
.iqBoard .edgeHov{stroke:#12E29A; stroke-width:7; fill:none; opacity:.85; pointer-events:none; stroke-linecap:round}
.iqBoard .vtxHov{fill:none; stroke:#12E29A; stroke-width:4; pointer-events:none}
html[data-board="drafting"] .iqBoard .edgeHov,html[data-board="drafting"] .iqBoard .vtxHov{stroke:#0C9A6A}
.dockFix{margin-top:10px; padding-top:10px; border-top:1px solid rgba(253,232,232,.35); display:grid; gap:6px}
.dockFix b{font:800 13px/1 Figtree,sans-serif; letter-spacing:0}
.dockFix button{font:700 13px/1.2 Figtree,sans-serif; text-align:left; padding:9px 10px; border-radius:8px; border:1px solid rgba(253,232,232,.6); background:rgba(0,0,0,.18); color:#FDE8E8; cursor:pointer}
.dockFix button:hover{background:rgba(0,0,0,.32)}
.dockFix button:disabled{opacity:.45; cursor:default}
.dockFix button.warn{border-style:dashed}
.dockFix small{font:500 12px/1.35 Figtree,sans-serif; opacity:.9}
.dockStamp{cursor:default}
.okJust{margin-top:6px; padding:10px 12px; border-radius:9px; background:rgba(18,226,154,.12); border:1px solid rgba(18,226,154,.5); color:var(--mint); font:700 13.5px/1.2 Figtree,sans-serif; display:flex; justify-content:space-between; align-items:center; gap:8px}
.okJust button,.linkBtn{border:0; background:transparent; color:#6E9CFF; font:700 13px/1 Figtree,sans-serif; text-decoration:underline; cursor:pointer; padding:0}
.toast button{margin-left:12px; border:1px solid rgba(110,156,255,.6); background:transparent; color:#9DBBFF; font:700 13px/1 Figtree,sans-serif; padding:6px 10px; border-radius:7px; cursor:pointer}
/* ---- stage 3 on the board: boards, railings, stairs ---- */
.iqBoard .boards line{stroke:rgba(255,214,170,.20); stroke-width:1; pointer-events:none}
.iqBoard .boards line.sq{stroke:rgba(255,214,170,.45)}
.iqBoard .boards line.border{stroke:rgba(255,176,32,.55); stroke-width:1.4}
.iqBoard .boards line.breaker{stroke:rgba(255,176,32,.75); stroke-width:var(--bw,4); opacity:.45}
html[data-board="drafting"] .iqBoard .boards line{stroke:rgba(120,72,30,.22)} html[data-board="drafting"] .iqBoard .boards line.border{stroke:rgba(150,90,10,.6)}
.iqBoard .finish{pointer-events:none}
.iqBoard .rail{fill:none; stroke:#6E9CFF; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.iqBoard .rpost{fill:#6E9CFF; stroke:#0A1120; stroke-width:1.2}
.iqBoard .stair{fill:rgba(110,156,255,.18); stroke:#6E9CFF; stroke-width:2}
.iqBoard .stair.sel{fill:rgba(110,156,255,.34); stroke:#fff}
.iqBoard .tread{stroke:#6E9CFF; stroke-width:1.2; opacity:.8}
.iqBoard .spad{fill:rgba(160,170,190,.14); stroke:rgba(160,170,190,.55); stroke-width:1.2; stroke-dasharray:5 4}
.iqBoard .stairHit{fill:transparent; cursor:grab; pointer-events:all}
.iqBoard .lab.stairLab rect{fill:#2F6BFF; stroke:#1741C4} .iqBoard .lab.stairLab text{fill:#fff}
html[data-board="drafting"] .iqBoard .rail,html[data-board="drafting"] .iqBoard .stair,html[data-board="drafting"] .iqBoard .tread{stroke:#1741C4}
html[data-board="drafting"] .iqBoard .rpost{fill:#2F6BFF; stroke:#fff}
.stSet.stBig{display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:none; gap:10px 12px; align-items:center; position:relative}
.stSet.stBig > *{grid-area:auto}
.stSet.stBig > b{grid-column:1; white-space:nowrap} .stSet.stBig > .stSides{grid-column:2; position:static} .stSet.stBig > .stDel{grid-column:3; position:static}
.stSet.stBig .stRow{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 14px}
.stSet.stBig .stRow label{display:grid; gap:4px; font:700 11.5px/1.2 Figtree,sans-serif; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.stSet.stBig .stRow .seg{margin:0}
.stSet.stBig .inl{display:flex; align-items:center; gap:4px; text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-2)}
.stSet.stBig .inl input{width:76px}
.stSet.stBig > .stSum{grid-column:1/-1; display:block; color:var(--ink-2); font:600 12.5px/1.4 Figtree,sans-serif}
.stSet.stBig.on{border-color:#6E9CFF}
.cutGrp .rvTbl td{font-size:13px}

/* ============================================================
   Stage 3b: the plan set — the viewer on the page, the letter-size
   landscape sheets (shared look with the Deck Designer's set), the
   buy box, the watermarks and the print rules.
   ============================================================ */
#iqPlans .viewer{background:#20283A; border-radius:14px; padding:18px 12px; margin-top:12px; position:relative}
#iqPlans .viewer .vScroll{overflow:hidden}
#iqPlans .sheetFit{transform-origin:top left}
/* 18i: zoom the preview — the bar, the scrolling frame once zoomed, and full screen */
.dqVSize{position:relative; overflow:hidden}
#iqPlans .viewer .vScroll.zoomed{overflow:auto; cursor:grab; overscroll-behavior:contain; border-radius:6px}
#iqPlans .viewer .vScroll.zoomed.grabbing{cursor:grabbing; user-select:none}
.dqZoomBar{display:flex; justify-content:flex-end; gap:6px; margin:-6px 4px 10px}
.dqZoomBar button{font:700 13px/1 Figtree,sans-serif; color:#E6ECF8; min-width:36px; height:32px; padding:0 11px; border-radius:99px; border:1px solid #3A4766; background:#2A3450; cursor:pointer}
.dqZoomBar button[data-zoom="in"], .dqZoomBar button[data-zoom="out"]{font-size:18px; padding:0}
.dqZoomBar button[data-zoom="fit"]{min-width:58px}
.dqZoomBar button:hover:not(:disabled){border-color:#6E9CFF}
.dqZoomBar button:disabled{opacity:.35; cursor:default}
.dqZoomBar button[aria-pressed="true"]{background:#2F6BFF; border-color:#2F6BFF; color:#fff}
#iqPlans .viewer.dqFull{position:fixed; inset:0; z-index:9000; margin:0; border-radius:0; padding:14px 12px 10px; overflow:hidden}
#iqPlans .viewer.dqFull .pages{margin-top:10px}
html.dqNoScroll, html.dqNoScroll body{overflow:hidden}
@media (max-width:560px){ .dqZoomBar button span{display:none} }
.pages{display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap}
.pages button{font:700 12.5px/1 Figtree,sans-serif; color:#C9D4EC; padding:8px 11px; border-radius:99px; border:1px solid #3A4766; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.pages button.on{background:#2F6BFF; color:#fff; border-color:#2F6BFF}
.pages button i{font-style:normal; font-size:10px; opacity:.75}
.pages button.paid i{color:#12E29A; opacity:1}
.vArrow{position:absolute; top:calc(50% - 40px); z-index:3; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  font:700 30px/1 Figtree,sans-serif; color:#fff; background:linear-gradient(180deg,#6E9CFF,#2F6BFF); box-shadow:0 8px 20px rgba(0,0,0,.35);
  display:grid; place-items:center; padding:0 0 4px; transition:opacity .2s, transform .15s}
.vArrow:hover:not(:disabled){transform:scale(1.07)}
.vArrow:disabled{opacity:.28; cursor:default; box-shadow:none}
.vArrow.prev{left:10px} .vArrow.next{right:10px}
/* the buy box beside the viewer */
.buyGrid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; margin-top:14px}
@media (max-width:1000px){ .buyGrid{grid-template-columns:minmax(0,1fr)} .buyGrid > *{min-width:0} }   /* 21s: the 1008 px sheet (scaled only on screen) can't widen a phone */
.buyBox{background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:16px; display:grid; gap:10px}
.buyBox h3{font:800 19px/1.2 Outfit,sans-serif; margin:0}
.buyBox p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.45}
.buyBox .tierRow{display:grid; gap:8px}
.buyBox .tier{display:grid; grid-template-columns:1fr auto; gap:2px 12px; border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; text-align:left; background:transparent; color:var(--ink); cursor:pointer; font:inherit}
.buyBox .tier:hover{border-color:var(--blue-lit)}
.buyBox .tier b{font:800 15px/1.25 Figtree,sans-serif} .buyBox .tier .pr{grid-row:span 2; font:800 20px/1 Outfit,sans-serif; color:#12E29A; align-self:center}
.buyBox .tier span{font-size:12.5px; color:var(--ink-3)}
.buyBox .tier .pr s{font-size:13px; font-weight:700; color:var(--ink-3); margin-left:2px}
.buyBox .tier .pr small{display:block; font:700 10.5px/1.2 Figtree,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; text-align:right}
.buyBox .ownerRow{display:grid; gap:4px; font-size:12.5px; color:var(--ink-3)}
.buyBox .ownerRow input{font:inherit; font-size:14px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px; max-width:360px}
.buyBox .engNote.lockNote{border-color:rgba(255,176,32,.55); background:rgba(255,176,32,.09); color:var(--ink)}
html[data-mode="light"] .buyBox .engNote.lockNote{color:var(--ink); border-color:#B97600; background:rgba(255,176,32,.12)}
.sheet .titleBlock dd small{display:block; font-weight:500; font-size:9.5px; color:var(--pInk2); margin-top:1px}
.sheet .titleBlock .builder{border-top:1px solid var(--pLine); padding-top:5px}
.buyBox .tier.have{border-color:rgba(18,226,154,.5); background:rgba(18,226,154,.06); cursor:default}
.buyBox .tier.have .pr{font-size:13px; color:#12E29A}
.buyBox .ack{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink-2); line-height:1.4}
.buyBox .ack input{margin-top:2px; width:18px; height:18px; accent-color:#12E29A}
.buyBox .fine{font-size:12px; color:var(--ink-3)}
.buyBox .okLine{font-size:13.5px; color:#12E29A; font-weight:700}
.buyBox .engNote{border:1px solid rgba(227,23,10,.5); background:rgba(227,23,10,.08); color:#FF9CA9; border-radius:10px; padding:9px 11px; font-size:13px; line-height:1.4}
html[data-mode="light"] .buyBox .engNote{color:#B3140A}
.lotRow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; font-size:13px; color:var(--ink-3)}

/* ---------- the sheet (letter, landscape, 1008 × 758) ---------- */
.sheet{--pInk:#0B1630; --pInk2:#46577A; --pLine:#C9D3E6;
  width:1008px; height:758px; background:#fff; color:var(--pInk); position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) 214px; font:400 12px/1.4 Figtree,Arial,sans-serif; box-shadow:0 20px 50px rgba(0,0,0,.45)}
.sheetMain{padding:14px 14px 10px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; min-height:0}
.sheetMain h4{margin:0; font:800 12.5px/1 Figtree,sans-serif; letter-spacing:.12em; color:var(--pInk2); text-transform:uppercase}
.sBody{display:grid; gap:8px; min-height:0}
.sheet .box{border:1.5px solid var(--pInk); padding:7px 8px; display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden}
.sheet .box .t{font:800 10.5px/1 Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; display:flex; justify-content:space-between; gap:8px}
.sheet .box .t span{font-weight:600; letter-spacing:0; text-transform:none; color:var(--pInk2)}
.sheet .box > svg{flex:1 1 auto; min-height:0; width:100%; height:100%; display:block}
.sheet .notes{margin:0; padding-left:14px; font-size:10.3px; line-height:1.4}
.sheet .notes.tight,.sheet .box.tight .notes{font-size:9.1px; line-height:1.3}
.sheet .notes .red{color:#E3170A; font-weight:700} .sheet .notes .rv{color:#B3140A}
.sheet .pTable{width:100%; border-collapse:collapse; font-size:9.8px}
.sheet .pTable td,.sheet .pTable th{padding:2px 3px; border-bottom:1px solid var(--pLine); color:var(--pInk); vertical-align:top; text-align:left}
.sheet .pTable th{font:800 8.5px/1 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--pInk2); padding-bottom:3px}
.sheet .pTable td:first-child{color:#1F55D6; font:600 9.8px "IBM Plex Mono",monospace; white-space:nowrap; text-align:right; width:28px}
.sheet .pTable .sm{color:var(--pInk2); font-size:8.6px}
.sheet .pTable.sch td:first-child{text-align:left; width:70px; color:var(--pInk); font:700 9.2px Figtree,sans-serif; white-space:normal}
.sheet .pTable.sch td{font-size:9.2px; padding:2px 3px} .sheet .pTable.sch td:nth-child(2){white-space:nowrap; font:600 9.2px "IBM Plex Mono",monospace}
.sheet .pTable.sch7 td{font-size:9.2px} .sheet .pTable.sch7 td:first-child{width:18px}
.sheet .pTable.idx td:first-child{width:14px} .sheet .pTable.idx td:nth-child(2){font-weight:700} .sheet .pTable.idx td:last-child{color:var(--pInk2)}
.sheet .pTable.cut td:first-child{width:26px} .sheet .pTable.cut td{font-size:9.2px; padding:1.5px 3px}
.sheet .pList{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:start; font-size:9.4px; min-height:0; overflow:hidden}
.sheet .pList .pTable td{font-size:9.2px; padding:1.5px 3px} .sheet .pList .pTable td:first-child{font-size:9.2px}
.sheet .pCol{display:grid; gap:8px; align-content:start}
.sheet .pWarn{border:2px solid var(--pInk); padding:5px 8px; font:800 9.5px/1.3 Figtree,sans-serif; letter-spacing:.05em; text-transform:uppercase; text-align:center}
.sheet .pWarn.eng{border-color:#E3170A; color:#E3170A}
.sheet .priceLine{font-size:11px; color:var(--pInk2)} .sheet .priceLine b{font:800 15px/1 Outfit,sans-serif; color:var(--pInk)} .sheet .priceLine span{display:block; font-size:9.5px; margin-top:2px}
/* 30 Oct: the parts list as one table (option A) and the Pro estimate (option C) */
.sheet .bomBody{grid-template-rows:auto minmax(0,1fr) auto; gap:6px}
.sheet .bomWrap{min-height:0; overflow:hidden; grid-row:2}
.sheet .bomBody > .priceLine,.sheet .bomBody > .estHead{grid-row:1} .sheet .bomBody > .estFoot{grid-row:3}
:is(.sheet,.mPage) .bomT{width:100%; border-collapse:collapse; table-layout:fixed; font:400 9.6px/1.15 Figtree,Arial,sans-serif}
:is(.sheet,.mPage) .bomT th{font:700 8px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; text-align:left; color:var(--pInk2); border-bottom:1.3px solid var(--pInk); padding:3px 4px}
:is(.sheet,.mPage) .bomT td{padding:1.5px 4px; border-bottom:.8px solid var(--pLine); vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
:is(.sheet,.mPage) .bomT tbody tr:nth-child(even):not(.bGrp):not(.bSub) td{background:#F5F8FB}
:is(.sheet,.mPage) .bomT .bck{width:15px} :is(.sheet,.mPage) .bomT td.bck i{display:block; width:8px; height:8px; border:1.1px solid var(--pInk); border-radius:1.5px}
:is(.sheet,.mPage) .bomT .bn{width:22px; text-align:right; font:600 9px/1.1 "IBM Plex Mono",monospace; color:var(--pInk2)}
:is(.sheet,.mPage) .bomT .bq{width:40px; text-align:right; font:700 10.5px/1.1 "IBM Plex Mono",monospace}
:is(.sheet,.mPage) .bomT .bu{width:38px; color:var(--pInk2)}
:is(.sheet,.mPage) .bomT .bit{width:35%} :is(.sheet,.mPage) .bomT td.bit{font-weight:600}
:is(.sheet,.mPage) .bomT .buf{width:auto} :is(.sheet,.mPage) .bomT td.buf{white-space:normal; font-size:9px; color:var(--pInk2); line-height:1.15}
:is(.sheet,.mPage) .bomT .bph{width:96px} :is(.sheet,.mPage) .bomT td.bph{white-space:normal; line-height:1}
:is(.sheet,.mPage) .bomT .bm{width:66px; text-align:right; font:600 9.5px/1.1 "IBM Plex Mono",monospace}
:is(.sheet,.mPage) .bomT.pro .bit{width:auto}
:is(.sheet,.mPage) .bomT tr.bGrp td{background:#E8EEF5; font:800 9px/1.1 Figtree,sans-serif; letter-spacing:.06em; text-transform:uppercase; border-bottom:1.2px solid var(--pInk); padding:2.2px 4px}
:is(.sheet,.mPage) .bomT tr.bGrp span{font:500 9px Figtree,sans-serif; text-transform:none; letter-spacing:0; color:var(--pInk2); margin-left:8px}
:is(.sheet,.mPage) .bomT tr.bSub td{font:700 9px "IBM Plex Mono",monospace; text-align:right; border-bottom:1.2px solid var(--pInk)}
:is(.sheet,.mPage) .bPh{display:inline-block; font:700 7px/1 Figtree,sans-serif; font-style:normal; padding:.8px 4px; border-radius:99px; border:.7px solid; margin:0 2px 0 0; vertical-align:middle}
:is(.sheet,.mPage) .bPh.f{color:#7A4B00} :is(.sheet,.mPage) .bPh.fr{color:#0B5F8F} :is(.sheet,.mPage) .bPh.d{color:#5B3A8F} :is(.sheet,.mPage) .bPh.r{color:#8F2F2F} :is(.sheet,.mPage) .bPh.s{color:#24702F}
:is(.sheet,.mPage) .bPh.rf,:is(.sheet,.mPage) .bPh.gz,:is(.sheet,.mPage) .bPh.pg{color:#8A5A14} :is(.sheet,.mPage) .bPh.tb,:is(.sheet,.mPage) .bPh.lt,:is(.sheet,.mPage) .bPh.bn,:is(.sheet,.mPage) .bPh.sk,:is(.sheet,.mPage) .bPh.o{color:#46577A}
.mPage .mBom{min-height:0; overflow:hidden; flex:1}
.sheet .estHead{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1.3px solid var(--pInk)}
.sheet .estHead div{padding:4px 6px; border-right:.8px solid var(--pLine); min-width:0} .sheet .estHead div:last-child{border-right:0}
.sheet .estHead span{display:block; font:600 7.5px "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--pInk2)} .sheet .estHead b{font:700 10px Figtree,sans-serif; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sheet .estFoot{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:14px; align-items:end}
.sheet .estSig{display:grid; grid-template-columns:1fr 1fr; gap:12px} .sheet .estSig div span{font:600 7.5px "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--pInk2)}
.sheet .estSig div i{display:block; height:24px; border-bottom:1.2px solid var(--pInk)} .sheet .estSig small{font-size:8px; color:var(--pInk2)}
.sheet .estSig p{grid-column:1/-1; margin:0; font-size:8px; color:var(--pInk2)}
.sheet .estTot{border-collapse:collapse; width:100%} .sheet .estTot td{padding:2.5px 6px; border-bottom:.8px solid var(--pLine); font:600 10px Figtree,sans-serif} .sheet .estTot td:last-child{text-align:right; font-family:"IBM Plex Mono",monospace}
.sheet .estTot tr.g td{font:800 12.5px Figtree,sans-serif; border-top:1.6px solid var(--pInk); border-bottom:1.6px solid var(--pInk)} .sheet .estTot tr.g td:last-child{font-family:"IBM Plex Mono",monospace}
.sheet .titleBlock{border-left:2px solid var(--pInk); padding:14px 12px; display:flex; flex-direction:column; gap:8px; font-size:11px; min-height:0}
.sheet .titleBlock .logo{font:800 18px/1 Outfit,sans-serif} .sheet .titleBlock .logo small{display:block; font:800 10px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--pInk2); margin-top:4px}
.sheet .titleBlock dl{margin:0; display:grid; gap:5px}
.sheet .titleBlock dt{font:800 8.5px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pInk2)}
.sheet .titleBlock dd{margin:2px 0 0; font-weight:600; font-size:10.5px; line-height:1.3}
.sheet .titleBlock .disc{font-size:8.6px; line-height:1.36; color:var(--pInk2); border-top:1px solid var(--pLine); padding-top:7px}
.sheet .titleBlock .disc b{color:var(--pInk)}
.sheet .titleBlock .ver{font:600 8.5px/1 "IBM Plex Mono",monospace; color:var(--pInk2)}
.sheet .titleBlock .engTag{border:2px solid #E3170A; color:#E3170A; font:800 9px/1.3 Figtree,sans-serif; padding:5px 6px; letter-spacing:.03em}
.sheet .sheetNo{margin-top:auto; border-top:2px solid var(--pInk); padding-top:8px; font:800 28px/1 Outfit,sans-serif}
.sheet .sheetNo small{display:block; font:700 9.5px/1.2 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--pInk2); margin-top:4px}
.sheet .wm{position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; z-index:3}
.sheet .wm span{transform:rotate(-28deg); font:900 60px/1.15 Figtree,sans-serif; letter-spacing:.06em; color:rgba(210,50,74,.16); text-align:center; white-space:nowrap}
.sheet .wm.eng span{color:rgba(227,23,10,.2); font-size:54px; transform:rotate(-28deg) translateY(-110px)}
.sheet .wm.eng + .wm span{transform:rotate(-28deg) translateY(90px)}
/* cover */
.sheet .coverBody{grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1.25fr) minmax(0,1fr)}
.sheet .coverBody .plan{grid-column:1/-1}
.sheet .boardsBody{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
.sheet .boardsBody > .box:first-child{grid-column:1/-1}
.sheet .cutsBox .cuts{grid-template-columns:repeat(2,minmax(0,1fr))}
.sheet .cover .tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px}
.sheet .cover .tiles div{border:1px solid var(--pLine); border-radius:6px; padding:6px 7px}
.sheet .cover .tiles b{display:block; font:800 15px/1.1 Outfit,sans-serif} .sheet .cover .tiles span{font-size:9px; color:var(--pInk2); letter-spacing:.06em; text-transform:uppercase}
.sheet .cover .pr{margin:7px 0 0; font-size:10.5px; color:var(--pInk2)} .sheet .cover .pr b{font:800 15px/1.2 Outfit,sans-serif; color:var(--pInk)} .sheet .cover .pr span{font-size:9px}
/* framing sheet */
.sheet .frameBody{grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr) minmax(0,1.05fr); grid-template-rows:minmax(0,1.5fr) minmax(0,1fr)}
.sheet .pTable.hw td{font-size:8.3px; line-height:1.2; padding:1.5px 3px} .sheet .pTable.hw td:first-child{width:22px} .sheet .pTable.hw b{font-size:8.8px}
.sheet .frameBody .plan{grid-column:1/-1}
.sheet .foundBody{grid-template-rows:minmax(0,1.9fr) minmax(0,1fr)}
/* roof sheet (stage 4): a taller bottom row, the section wider */
.sheet .roofBody{grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
.sheet .roofBody .plan{grid-column:1/3} .sheet .roofBody .rnotes{grid-column:3} .sheet .roofBody .rsec{grid-column:1} .sheet .roofBody .rsch{grid-column:2/4}
.sheet .roofBody .pTable.sch td{font-size:8.4px; line-height:1.2}
.sheet .legend{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:8.8px; color:var(--pInk2); margin-top:4px; align-items:center}
.sheet .legend i{display:inline-block; width:14px; height:3px; margin-right:4px; vertical-align:middle}
.sheet .legend i.sq{width:7px; height:7px; background:#0B1630} .sheet .legend i.ci{width:8px; height:8px; border:1px dashed #46577A; border-radius:50%} .sheet .legend i.da{height:0; border-top:1.5px dashed #46577A}
.sheet .sched{overflow:hidden}
/* decking sheet */
.sheet .cuts{display:grid; gap:6px; align-content:start; overflow:hidden}
.sheet .cutBox .t{margin-bottom:3px}
/* details sheet */
.sheet .detBody{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr)}
.sheet .pTable.sch7 th,.sheet .pTable.sch7 td{white-space:nowrap} .sheet .pTable.sch7 td:nth-child(2){white-space:normal}
/* 20261102i: the stringer layout sheet (one per distinct cut flight) */
.sheet .strBody{grid-template-columns:minmax(0,1fr) minmax(0,.72fr) minmax(0,1.3fr); grid-template-rows:minmax(0,.8fr) minmax(0,1.25fr)}
.sheet .strBody .strBoard{grid-column:1/-1}
.sheet .strCols{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sheet .pTable.strMk td,.sheet .pTable.strMk th{white-space:nowrap; font-size:9px; padding:1.5px 3px}
.sheet .pTable.strMk td:first-child{width:16px} .sheet .pTable.strMk td:nth-child(2),.sheet .pTable.strMk td:nth-child(3){font-family:"IBM Plex Mono",monospace}
.mPage .strCols{display:grid; grid-template-columns:1fr 1fr; gap:8px} .mPage .mTwo.strTwo{grid-template-columns:1fr 1.1fr; align-items:stretch}
.mPage .mTbl.strMk td{padding:1.5px 4px} .mPage .mTbl.strMk td:first-child{color:var(--pAcc); width:18px}
.sheet .strNote{margin-top:4px; padding-left:0; list-style:none; font-size:8.8px; color:var(--pInk2)}
/* 20261102l: the patio's sheets (deckiq-patio-plan.js): the plan with its legend, keynotes and notes; the details and the parts list */
.sheet .ptBody{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.sheet .ptCol{display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0}
.sheet .ptCol > .box{flex:0 0 auto} .sheet .ptCol > .box:last-child{flex:1 1 auto}
.sheet .ptLeg{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.sheet .ptLeg li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:6px; align-items:center; font-size:9.1px; line-height:1.25}
.sheet .ptLeg .mono{font-family:"IBM Plex Mono",monospace; font-weight:600}
/* 20261102q: the patios' legend under the site plan (A1): a patio a row, the edge kinds two to a row */
.sheet .ptSiteLegBox{flex:0 0 auto; border-top:1px solid var(--pLine, #C9D3E6); margin-top:4px; padding-top:4px}
.sheet .ptSiteLegBox > b{display:block; font:800 9px/1 Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px}
.sheet .ptSiteLeg{grid-template-columns:1fr 1fr; column-gap:10px; row-gap:2px}
.sheet .ptSiteLeg li{grid-template-columns:30px minmax(0,1fr); gap:5px; font-size:8.6px; line-height:1.2}
.sheet .ptSiteLeg li.w{grid-column:1/-1}
.sheet .ptSiteKn{font:800 8px/13px Figtree,sans-serif; font-style:normal; width:13px; height:13px; border:1.1px solid var(--pInk); border-radius:50%; text-align:center; justify-self:center}
.sheet .ptKeys{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.sheet .ptKeys li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:5px; font-size:9.1px; line-height:1.28}
.sheet .ptKeys i{font:800 8.4px/14px Figtree,sans-serif; font-style:normal; width:14px; height:14px; border:1.1px solid var(--pInk); border-radius:50%; text-align:center}
.sheet .ptDBody{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); grid-template-rows:minmax(0,.8fr) minmax(0,1.2fr)}
.sheet .ptSecBox > svg{flex:1 1 auto} .sheet .ptSecBox .notes{flex:0 0 auto; margin-top:4px}
.sheet .ptDBody .ptCol > .box{flex:1 1 0}
.sheet .ptPartsBox{overflow:hidden}
:is(.sheet,.mPage) .bomT.ptParts .bit{width:50%} :is(.sheet,.mPage) .bomT.ptParts td.bit{white-space:normal; line-height:1.12}
.sheet .bomT.ptParts td{padding:1.2px 4px} .sheet .bomT.ptParts td.buf{font-size:8.6px; line-height:1.1}
/* the stage for printing and the emailed PDF */
#printRoot{display:none}
.pdfStage{position:fixed; left:-20000px; top:0; width:1008px; z-index:-1}
.pdfStage .sheet{box-shadow:none; margin:0 0 20px}
.freeNote{display:none}
@media print{
  @page{size:letter landscape; margin:.25in}
  html,body{background:#fff !important}
  body.printSet > *:not(#printRoot){display:none !important}
  body.printSet #printRoot{display:block !important}
  #printRoot .sheet{box-shadow:none; page-break-after:always; break-after:page; transform:none !important}
  #printRoot .sheet:last-child{page-break-after:auto; break-after:auto}
  /* the free tier printing the list: a note where the drawings would be */
  #iqBom .freeNote{display:block; border:2px solid #000; padding:12px 14px; margin:0 0 16px; font:700 14px/1.4 Figtree,sans-serif; color:#000; break-inside:avoid}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ---------- 13 Oct: the Deck shape tiles and the edges-and-corners key map ---------- */
.picks.tools{grid-template-columns:repeat(4,minmax(0,1fr))}
.picks.tools button:disabled{opacity:.35; cursor:default}
.keyRow{display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch}   /* 14 Oct: no mini map — the main board is the picture; the legend lights it up */
.elist .egrp{flex-basis:100%; font:700 11px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 -2px} .elist .egrp:first-child{margin-top:0}
.keyMap{height:170px; border:1.5px solid var(--line-2); border-radius:10px; background:#0A1120; position:relative; overflow:hidden}
.keyMap svg{width:100%; height:100%; display:block}
.keyMap .deck{fill:rgba(255,107,26,.22); stroke:#FF6B1A; stroke-width:2.5; stroke-linejoin:round}
.keyMap .house{fill:url(#iqHatch); stroke:rgba(255,176,32,.6); stroke-width:1}
.keyMap .ledger{stroke:#FFB020; stroke-width:4} .keyMap .houseLab{display:none}
.keyMap .grid{display:none}
.keyMap .lab rect{fill:#0A1120; stroke:rgba(255,255,255,.45); stroke-width:1; rx:6} .keyMap .lab text{font:700 12px/1 "IBM Plex Mono",monospace; fill:#EDF2FF}
.keyMap .lab.house rect{fill:#FFB020; stroke:#FFB020} .keyMap .lab.house text{fill:#1A1203}
.keyMap .lab.num rect{fill:#2F6BFF; stroke:#2F6BFF} .keyMap .lab.num text{fill:#fff}
.keyMap .frame,.keyMap .finish,.keyMap .boards,.keyMap .engStamp,.keyMap .codeStamp{display:none}
html[data-mode="light"] .keyMap{background:#fff}
html[data-mode="light"] .keyMap .deck{fill:rgba(255,107,26,.18)}
html[data-mode="light"] .keyMap .lab rect{fill:#fff; stroke:#2B3D66} html[data-mode="light"] .keyMap .lab text{fill:#080E20}
html[data-mode="light"] .keyMap .lab.house rect{fill:#FFB020; stroke:#B97600} html[data-mode="light"] .keyMap .lab.house text{fill:#1A1203}
html[data-mode="light"] .keyMap .lab.num rect{fill:#2F6BFF; stroke:#1741C4} html[data-mode="light"] .keyMap .lab.num text{fill:#fff}
.keyLegend{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; align-content:center}
@media (max-width:560px){ .keyLegend{grid-template-columns:1fr} } .keyLegend>small{grid-column:1/-1}
.keyLegend button{display:grid; grid-template-columns:auto 1fr; gap:1px 9px; align-items:center; font-size:13.5px; color:var(--ink-3); line-height:1.25; text-align:left; background:transparent; border:1.5px solid transparent; border-radius:10px; padding:4px 6px; cursor:pointer; font-family:inherit}
.keyLegend button:hover{border-color:var(--line-2)}
.keyLegend button[aria-pressed="false"]{opacity:.45} .keyLegend button[aria-pressed="false"] i{filter:grayscale(1)} .keyLegend button[aria-pressed="false"] b{text-decoration:line-through}
.keyLegend > small{color:var(--ink-3); font-size:12px; padding-left:6px}
.keyLegend b{color:var(--ink); font-size:14.5px} .keyLegend span{grid-column:2}
.keyLegend i{grid-row:span 2; font:800 13px/1 "IBM Plex Mono",monospace; font-style:normal; width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
.keyLegend .kL{background:#FFB020; color:#1A1203} .keyLegend .kE{background:#0A1120; color:#fff; border:1.5px solid rgba(255,255,255,.45)} .keyLegend .kC{background:#2F6BFF; color:#fff}
html[data-mode="light"] .keyLegend .kE{background:#fff; color:#080E20; border-color:#2B3D66}
.elist button.house{border-color:rgba(255,176,32,.7); color:var(--amber)}
@media (max-width:560px){ .picks.tools{grid-template-columns:repeat(2,minmax(0,1fr))} .keyRow{grid-template-columns:1fr} }
html[data-mode="light"] .lvl input,html[data-mode="light"] .stSet input,html[data-mode="light"] .q input[type="number"],html[data-mode="light"] .q input[type="text"],html[data-mode="light"] .q select{background:#fff; color:var(--ink)}

/* ---------- 13 Oct: info icons, picture tiles, the pulsing Confirm, light-mode fixes ---------- */
.infoBtn{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--blue-lit); background:rgba(47,107,255,.14); color:var(--blue-lit); font:800 12px/1 "IBM Plex Mono",monospace; cursor:pointer; vertical-align:middle; margin-left:4px; padding:0}
.infoBtn:hover{background:#2F6BFF; color:#fff; border-color:#2F6BFF}
html[data-mode="light"] .infoBtn{color:#1741C4; border-color:#1741C4; background:rgba(47,107,255,.08)}
.q h4 .infoBtn,.q h3 .infoBtn{margin-left:6px}
.iqPop.wide{width:min(760px,100%)}
.infoBody h3{font:800 26px/1.2 Outfit,sans-serif; margin:0 0 12px}
.infoBody p{font-size:18px; line-height:1.55; color:var(--ink); margin:0 0 12px}
.infoBody p b{color:var(--ink)}
.infoPic{margin:0 0 14px; border:1.5px solid var(--line-2); border-radius:12px; overflow:hidden; background:#F6EEE4}
.infoPic svg{display:block; width:100%; height:auto; max-height:320px}
.picPair{display:grid; grid-template-columns:1fr 1fr; gap:2px} .picPair svg{width:100%; height:auto}
/* picture tiles */
.picks.pics{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px}
.picks.pics button{padding:7px 7px 9px; gap:5px; position:relative; align-content:start}
.picks.pics button b{font:700 13.5px/1.2 Figtree,sans-serif; color:var(--ink)}
.picks.pics button small{font:500 11.5px/1.25 Figtree,sans-serif; color:var(--ink-3)}
.picks.pics button[aria-pressed="true"]{border-color:#2F6BFF; background:rgba(47,107,255,.14); box-shadow:0 0 0 1.5px #2F6BFF inset}
.pic{display:block; position:relative; width:100%; border-radius:7px; overflow:visible}
.pic > svg{display:block; width:100%; height:auto; border-radius:7px; border:1px solid rgba(0,0,0,.12)}
.pic > img{display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; border-radius:7px; border:1px solid rgba(0,0,0,.12)}   /* 23h: tiles rendered by the 3D engine */
.pic .zoom{display:none; position:absolute; right:calc(100% + 14px); top:-8px; width:320px; z-index:60; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.45); border:2px solid #2F6BFF; background:#fff; pointer-events:none}
.pic .zoom svg{display:block; width:100%; height:auto; border-radius:10px}
.pic:hover .zoom,.picks.pics button:hover .zoom{display:block}
#iqDock .pic .zoom{right:auto; left:calc(100% + 14px)}
.picRow{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center}
.picRow .pic{width:150px}
.picRow .tgl small{display:block; font-weight:500; color:var(--ink-3); font-size:12.5px; margin-top:3px}
@media (max-width:560px){ .picRow{grid-template-columns:1fr} .picRow .pic{width:100%} }
/* the next step's Confirm pulses so nobody misses it */
.okBtn.next{animation:iqNext 1.4s ease-in-out infinite; box-shadow:0 0 0 0 rgba(18,226,154,.7); background:linear-gradient(180deg,#19E6A0,#0FB57E); font-size:15px; padding:9px 14px}
@keyframes iqNext{0%,100%{box-shadow:0 0 0 0 rgba(18,226,154,.7)} 50%{box-shadow:0 0 0 7px rgba(18,226,154,0)}}
@media (prefers-reduced-motion:reduce){ .okBtn.next{animation:none; box-shadow:0 0 0 3px rgba(18,226,154,.6)} }
/* light mode: the blue primary buttons stay blue (the white-button rule above was winning) */
html[data-mode="light"] .btnRow button.pri{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); color:#fff; border:0}
html[data-mode="light"] .btnRow button.warn{background:#fff; color:#B3140A; border-color:rgba(227,23,10,.5)}
.rowBtns .note{align-self:center; font-size:13.5px; color:var(--ink-3)}

/* ---- stage 4: the hot-tub pad and the roof on the board ---- */
.tile.red{border-color:rgba(255,92,92,.5)} .tile.red .tl,.tile.red .tv{color:#FF5C5C}
html[data-mode="light"] .tile.red .tl,html[data-mode="light"] .tile.red .tv{color:#C62828}
.iqBoard .extras .tubPatch{fill:rgba(18,226,154,.07); stroke:rgba(18,226,154,.5); stroke-width:1.4; stroke-dasharray:6 4}
.iqBoard .extras .tubJoist{stroke:rgba(18,226,154,.55); stroke-width:1.4}
.iqBoard .extras .tubBeam{stroke:#12E29A; stroke-linecap:butt; opacity:.95}
.iqBoard .extras .tubPost{fill:#101827; stroke:#12E29A; stroke-width:2}
.iqBoard .extras .tub{fill:rgba(110,156,255,.22); stroke:#6E9CFF; stroke-width:3}
.iqBoard .extras .tub.eng{stroke:#FF5C5C; fill:rgba(255,92,92,.16)}
.iqBoard .tubHit{fill:transparent; cursor:grab; pointer-events:all}
.iqBoard .frame .kneeBrace{stroke:#FFB020; stroke-width:2.4; stroke-dasharray:4 3; stroke-linecap:round}
.iqBoard .frame .kneeBrace.heavy{stroke-width:3.6}
html[data-board="drafting"] .iqBoard .frame .kneeBrace{stroke:#B97600}
.iqBoard .lab.tubLab rect{fill:#0A1120; stroke:#6E9CFF} .iqBoard .lab.tubLab text{fill:#A8C4FF}
.iqBoard .extras.roof .roofDrip{fill:none; stroke:#C77DFF; stroke-width:2.2; stroke-dasharray:10 6}
.iqBoard .extras.roof .rafter{stroke:rgba(199,125,255,.45); stroke-width:1.2}
.iqBoard .extras.roof .roofHeader{stroke:#C77DFF; stroke-linecap:butt}
.iqBoard .extras.roof .roofRidge{stroke:#C77DFF; stroke-linecap:butt; stroke-dasharray:16 6}
.iqBoard .extras.roof .roofPost{fill:#101827; stroke:#C77DFF; stroke-width:2.4}
.iqBoard .lab.roofLab rect{fill:#0A1120; stroke:#C77DFF} .iqBoard .lab.roofLab text{fill:#E3C6FF}
html[data-board="drafting"] .iqBoard .extras .tubPost,html[data-board="drafting"] .iqBoard .extras.roof .roofPost{fill:#fff}
html[data-board="drafting"] .iqBoard .extras .tubBeam,html[data-board="drafting"] .iqBoard .extras .tubJoist{stroke:#0C9A6A}
html[data-board="drafting"] .iqBoard .extras .tubPost{stroke:#0C9A6A}
html[data-board="drafting"] .iqBoard .extras.roof .roofDrip,html[data-board="drafting"] .iqBoard .extras.roof .roofHeader,html[data-board="drafting"] .iqBoard .extras.roof .roofRidge,html[data-board="drafting"] .iqBoard .extras.roof .roofPost{stroke:#7B2FBE}
html[data-board="drafting"] .iqBoard .extras.roof .rafter{stroke:rgba(123,47,190,.4)}
html[data-board="drafting"] .iqBoard .lab.tubLab rect,html[data-board="drafting"] .iqBoard .lab.roofLab rect{fill:#fff}
html[data-board="drafting"] .iqBoard .lab.tubLab text{fill:#1741C4} html[data-board="drafting"] .iqBoard .lab.roofLab text{fill:#7B2FBE}

/* ---- the 3D view (stage 4): the whole window, over the page ---- */
.iq3d{position:fixed; inset:0; z-index:100000; background:var(--bg); display:grid; grid-template-rows:auto minmax(0,1fr) auto; color:var(--ink)}
.iq3d .bar{display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1.5px solid var(--line-2); background:var(--panel)}
.iq3d .bar b{font:800 18px/1 Outfit,sans-serif}
.iq3d .h3d{color:var(--ink-3); font-size:13.5px; flex:1 1 auto}
.iq3d .views{display:flex; gap:6px}
.iq3d .views button{font:700 13px/1 Figtree,sans-serif; padding:8px 12px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--panel-2); color:var(--ink); cursor:pointer}
.iq3d .views button:hover{border-color:var(--blue)}
.iq3d .x{width:38px; height:38px; border-radius:10px; border:1.5px solid var(--line-2); background:var(--panel-2); color:var(--ink); font-size:18px; cursor:pointer}
.iq3d .stage{position:relative; min-height:0; overflow:hidden}
.iq3d .stage canvas{width:100%; height:100%; display:block; touch-action:none; cursor:grab}
.iq3d .stage canvas:active{cursor:grabbing}
.iq3d .note{margin:0; padding:8px 16px; font-size:13px; color:var(--ink-3); border-top:1.5px solid var(--line-2); background:var(--panel); min-height:34px}
.iq3d .loading{position:absolute; inset:0; display:grid; place-items:center; font:700 16px Figtree,sans-serif; color:var(--ink-2)}
/* 23a (overnight item 13): "Loading 3D…" over the view while it builds, a small spinner, on top of the canvas */
.iq3d .dqLoad3d{z-index:6; background:var(--panel); grid-auto-flow:column; gap:10px; align-content:center; justify-content:center}
.iq3d .dqLoad3d > i{width:18px; height:18px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--blue); animation:dqSpin .8s linear infinite}
/* 23h (Jared): the loader — a claw hammer driving a nail, twelve nails ticking round a ring every 3 s; one color, outline style */
.dqLoader{display:grid; justify-items:center; gap:8px; color:var(--blue)}
.dqLoader svg{width:120px; height:120px; overflow:visible}
.dqLoader b{font:700 15px Figtree,sans-serif; color:var(--ink)}
.dqLoader .lqRing{fill:none; stroke:var(--line-2); stroke-width:2; stroke-dasharray:2 6.4}
.dqLoader .lqT{fill:currentColor; transform-box:fill-box; transform-origin:center; opacity:0; animation-duration:1.5s; animation-timing-function:linear; animation-iteration-count:infinite}   /* 23i: longhands, so each .lqTn keeps its own keyframes (the shorthand reset them and no nail ever showed); the ring closes every 1.5 s */
.dqLoader .lqArm g, .dqLoader .lqNail, .dqLoader .lqLine{fill:var(--panel); stroke:currentColor; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round}
.dqLoader .lqNail{fill:none} .dqLoader .lqTip{fill:currentColor; stroke-width:1.4}
.dqLoader .lqMask{fill:var(--panel)}   /* hides the nail as it sinks into the board line */
.dqLoader .lqArm{transform-origin:52px 110px; animation:lqSwing .5s cubic-bezier(.55,0,.9,.4) infinite}
.dqLoader .lqNail{animation:lqSink 3s steps(6, end) infinite}
@keyframes lqSwing{0%{transform:rotate(-34deg)} 70%{transform:rotate(0)} 78%{transform:rotate(-3deg)} 100%{transform:rotate(-34deg)}}
@keyframes lqSink{from{transform:translateY(0)} to{transform:translateY(7px)}}
@keyframes lqT0{0%,0.00%{opacity:0; transform:scale(.3)} 2.00%{opacity:1; transform:scale(1.15)} 4.00%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT0{animation-name:lqT0}
@keyframes lqT1{0%,8.33%{opacity:0; transform:scale(.3)} 10.33%{opacity:1; transform:scale(1.15)} 12.33%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT1{animation-name:lqT1}
@keyframes lqT2{0%,16.67%{opacity:0; transform:scale(.3)} 18.67%{opacity:1; transform:scale(1.15)} 20.67%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT2{animation-name:lqT2}
@keyframes lqT3{0%,25.00%{opacity:0; transform:scale(.3)} 27.00%{opacity:1; transform:scale(1.15)} 29.00%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT3{animation-name:lqT3}
@keyframes lqT4{0%,33.33%{opacity:0; transform:scale(.3)} 35.33%{opacity:1; transform:scale(1.15)} 37.33%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT4{animation-name:lqT4}
@keyframes lqT5{0%,41.67%{opacity:0; transform:scale(.3)} 43.67%{opacity:1; transform:scale(1.15)} 45.67%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT5{animation-name:lqT5}
@keyframes lqT6{0%,50.00%{opacity:0; transform:scale(.3)} 52.00%{opacity:1; transform:scale(1.15)} 54.00%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT6{animation-name:lqT6}
@keyframes lqT7{0%,58.33%{opacity:0; transform:scale(.3)} 60.33%{opacity:1; transform:scale(1.15)} 62.33%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT7{animation-name:lqT7}
@keyframes lqT8{0%,66.67%{opacity:0; transform:scale(.3)} 68.67%{opacity:1; transform:scale(1.15)} 70.67%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT8{animation-name:lqT8}
@keyframes lqT9{0%,75.00%{opacity:0; transform:scale(.3)} 77.00%{opacity:1; transform:scale(1.15)} 79.00%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT9{animation-name:lqT9}
@keyframes lqT10{0%,83.33%{opacity:0; transform:scale(.3)} 85.33%{opacity:1; transform:scale(1.15)} 87.33%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT10{animation-name:lqT10}
@keyframes lqT11{0%,91.67%{opacity:0; transform:scale(.3)} 93.67%{opacity:1; transform:scale(1.15)} 95.67%,96%{opacity:1; transform:scale(1)} 100%{opacity:0}} .dqLoader .lqT11{animation-name:lqT11}
.workRow .dqLoader svg{width:64px; height:64px}
@media (prefers-reduced-motion:reduce){ .dqLoader .lqArm, .dqLoader .lqNail{animation:none} .dqLoader .lqT{animation:none; opacity:1} }
@keyframes dqSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .iq3d .dqLoad3d i{animation:none} }

/* ---- stage 4: the options gallery and saved versions ---- */
.optGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:8px}
.opt{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:6px 10px; border:1.5px solid var(--line-2); border-radius:12px; padding:10px; background:rgba(110,156,255,.07); color:var(--ink); align-items:start}
html[data-mode="light"] .opt{background:#fff; border-color:#8FA3C8}
.opt .pic{width:64px; height:48px; border-radius:8px; overflow:hidden; border:1.5px solid var(--line); background:#fff} .opt .pic svg{width:100%; height:100%; display:block}
.opt .ob{display:grid; gap:2px; min-width:0} .opt .ob b{font-size:16px; color:var(--ink)} .opt .ob small{color:var(--ink-2); font-size:13px; line-height:1.35}
.opt .delta{font:700 17px/1.2 "IBM Plex Mono",monospace; color:var(--amber); margin-top:4px} .opt .delta i{font:600 12px/1.3 Figtree,sans-serif; color:var(--ink-2); display:block}
.opt .delta.less{color:var(--mint)}
.opt .ob em{font-style:normal; font-size:12px; color:var(--ink-3); line-height:1.35}
.opt .tag{display:inline-block; font:800 10.5px/1 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#FF5C5C; border:1.5px solid rgba(255,92,92,.5); border-radius:999px; padding:4px 8px; width:max-content; margin-top:3px}
.opt.eng{border-color:rgba(255,92,92,.4)}
.opt > button{grid-column:1/-1; font:700 13.5px/1 Figtree,sans-serif; padding:9px 12px; border-radius:999px; border:1.5px solid var(--blue); background:transparent; color:var(--blue); cursor:pointer}
.opt > button:hover{background:var(--blue); color:#fff}
.vsRow{display:flex; gap:8px; margin:8px 0 10px} .vsRow input{flex:1 1 auto; min-width:0; font:600 15px Figtree,sans-serif; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line-2); background:transparent; color:var(--ink)}
html[data-mode="light"] .vsRow input{background:#fff}
.vsRow button.pri{font:700 14px/1 Figtree,sans-serif; padding:10px 14px; border-radius:999px; border:0; background:linear-gradient(135deg,var(--blue),#2F6BFF); color:#fff; cursor:pointer; white-space:nowrap}
.vsTable{width:100%; border-collapse:collapse; font-size:14px} .vsTable th{text-align:left; font:800 11px/1 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:4px 6px}
.vsTable td{padding:7px 6px; border-top:1.5px solid var(--line); vertical-align:middle} .vsTable td small{display:block; color:var(--ink-3); font-size:12px} .vsTable td.num{font-family:"IBM Plex Mono",monospace; white-space:nowrap}
.vsTable tr.on td{background:rgba(110,156,255,.08)} .vsTable input{width:18px; height:18px; accent-color:var(--blue)}
.cmpBox{margin-top:12px; border:1.5px solid var(--line-2); border-radius:12px; padding:10px 12px; background:rgba(110,156,255,.07); color:var(--ink)}
html[data-mode="light"] .cmpBox{background:#fff}
.cmpBox h4{margin:0 0 6px} .cmpBox h4 span{color:var(--amber); font-family:"IBM Plex Mono",monospace} .cmpBox h4 span.less{color:var(--mint)}
.cmpTable{width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:8px} .cmpTable th{text-align:left; font-weight:700; padding:4px 6px; color:var(--ink-2); width:28%} .cmpTable td{padding:4px 6px; border-top:1px solid var(--line)}
.cmpTable thead th{font:800 11px/1 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.cmpTable tr.diff td{color:var(--ink); font-weight:700} .cmpTable tr.diff th{color:var(--amber)}
.cmpTable.list th{font-weight:500; width:70%}
/* the plan-set status line: stays until the next action (a toast goes by too fast while the PDF builds) */
.buyBox .planStatus{margin-top:10px; border-radius:10px; padding:10px 12px; font-size:14px; line-height:1.45; font-weight:600; display:flex; gap:8px; align-items:flex-start}
.buyBox .planStatus.busy{border:1.5px solid var(--line-2); background:var(--panel-2); color:var(--ink-2)}
.buyBox .planStatus.ok{border:1.5px solid rgba(18,226,154,.55); background:rgba(18,226,154,.12); color:var(--mint)}
.buyBox .planStatus.err{border:1.5px solid rgba(255,92,92,.55); background:rgba(255,92,92,.1); color:#FF9CA9}
html[data-mode="light"] .buyBox .planStatus.ok{background:rgba(12,154,106,.1); color:#0C7A54} html[data-mode="light"] .buyBox .planStatus.err{color:#B3140A}
.buyBox .planStatus .spin{flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%; border:2.5px solid var(--line-2); border-top-color:var(--blue); animation:iqSpin .8s linear infinite}
@keyframes iqSpin{to{transform:rotate(360deg)}}
.buyBox .btnRow button:disabled{opacity:.55; cursor:wait}

/* drafting leaders on the board: a label moved to the margin points back at what it describes */
.iqBoard .labels{pointer-events:none} .iqBoard .leader{stroke:rgba(237,242,255,.7); stroke-width:1.2; stroke-dasharray:3 3} .iqBoard .leaderDot{fill:#EDF2FF; stroke:#0A1120; stroke-width:1}
html[data-board="drafting"] .iqBoard .labels{pointer-events:none} .iqBoard .leader{stroke:rgba(8,14,32,.6)} html[data-board="drafting"] .iqBoard .leaderDot{fill:#080E20; stroke:#fff}

/* composite color swatches */
.swatches{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px}
.swatches button{display:grid; justify-items:center; gap:4px; width:74px; padding:6px 4px; border:1.5px solid var(--line-2); border-radius:10px; background:transparent; color:var(--ink-2); cursor:pointer; font:600 11px/1.15 Figtree,sans-serif}
.swatches button i{display:block; width:40px; height:28px; border-radius:6px; border:1px solid rgba(0,0,0,.25)}
.swatches button[aria-pressed="true"]{border-color:var(--blue); color:var(--ink); box-shadow:0 0 0 2px rgba(110,156,255,.35)}
.swatches button:hover{border-color:var(--blue)}
/* the 3D bar in light mode (the overlay lives on body, outside the DeckIQ tokens) */
html[data-mode="light"] .iq3d{background:#F4F7FD; color:#080E20}
html[data-mode="light"] .iq3d .bar,html[data-mode="light"] .iq3d .note{background:#fff; border-color:#B9C8E2; color:#080E20}
html[data-mode="light"] .iq3d .h3d,html[data-mode="light"] .iq3d .note{color:#2E3C5C}
html[data-mode="light"] .iq3d .views button,html[data-mode="light"] .iq3d .x{background:#fff; color:#080E20; border-color:#8FA3C8}
.iq3d .views button[aria-pressed="false"]{opacity:.55; text-decoration:line-through}
/* the step chips are sticky: a card scrolled to stops below them */
.iqPanel .q{scroll-margin-top:200px}

/* ---- guided reveal: later steps fold to their title; the step that wants you is marked ---- */
.iqPanel .q.later{opacity:.72; border-style:dashed; padding-top:12px; padding-bottom:12px}
.iqPanel .q.later > :not(.qHead):not(h3):not(.laterNote){display:none}
.iqPanel .q.later .qHead .okBtn, .iqPanel .q.later .qHead .okDone, .iqPanel .q.later .qHead .iqSmall{display:none}
.iqPanel .q.later .qHead, .iqPanel .q.later > h3{margin-bottom:0}
.iqPanel .laterNote{margin:4px 0 0; font-size:13px; color:var(--ink-3)}
.iqPanel .q.wants{box-shadow:inset 4px 0 0 #FFB020}
.iqPanel .wantNote{margin:2px 0 10px; font-size:13.5px; color:var(--ink-2); padding:7px 10px; border-radius:8px; background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.45)}
.iqSteps button.now{background:rgba(255,176,32,.16); border-color:#FFB020; color:var(--ink); font-weight:700; animation:iqNowPulse 1.6s ease-in-out infinite}
@keyframes iqNowPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.55)} 50%{box-shadow:0 0 0 4px rgba(255,176,32,0)}}
@media (prefers-reduced-motion:reduce){ .iqSteps button.now{animation:none} }

/* the dock has more below: a fade and a bobbing cue, gone at the bottom */
.iqApp.maxBoard .iqDock.more::after{content:"▼ more below"; position:fixed; right:14px; bottom:14px; width:min(380px, 40vw); box-sizing:border-box; border-radius:0 0 14px 14px; display:block; padding:26px 0 8px; text-align:center; font:700 12px/1 Figtree,sans-serif; color:var(--ink-2); background:linear-gradient(180deg, rgba(0,0,0,0), var(--card) 55%); pointer-events:none; animation:iqBob 1.3s ease-in-out infinite}
@keyframes iqBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){ .iqApp.maxBoard .iqDock.more::after{animation:none} }

/* zoom buttons on the board, like the map's */
.iqZoom{position:absolute; right:14px; bottom:18px; z-index:40; display:grid; gap:4px}
.iqZoom button{width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line-2); background:var(--card); color:var(--ink); font:800 22px/1 Figtree,sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18)}
.iqZoom button:hover{border-color:#6E9CFF}
.iqApp.maxBoard .iqZoom{right:calc(min(380px, 40vw) + 32px)}   /* clear of the dock */
@media (max-width:1000px){ .iqZoom{display:none} }
/* the current step's card inside the dock */
.iqDock .dockCard .q{margin:10px 0 0; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:14px; background:var(--panel-2)} .iqDock .dockCard .q.wants{box-shadow:inset 4px 0 0 #FFB020}
.lvl .ht .eq{font-style:normal; color:var(--ink-3); margin:0 4px}

/* the Confirm that follows you down a long card */
#iqFollow{position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border-radius:999px; background:var(--card); border:1.5px solid var(--line-2); box-shadow:0 12px 34px rgba(0,0,0,.28)}
#iqFollow span{font:700 14px/1 Figtree,sans-serif; color:var(--ink-2)} #iqFollow span::before{content:"▲ "; color:#FFB020}
#iqFollow .okBtn{margin:0}
/* 21t (Jared): on a phone the Confirm follows you too: a bar across the bottom */
@media (max-width:1000px){ #iqFollow{left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); border-radius:16px; justify-content:space-between; padding:8px 8px 8px 14px}
  #iqFollow span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0} #iqFollow .okBtn{flex:none} }

.hintLine{display:block; margin:-4px 0 6px 30px; font-size:12.5px; color:var(--ink-3); line-height:1.4}

/* ---------- stage 5: openings in the deck (a tree well) ---------- */
.iqBoard .frame .joist.header{stroke:#7EC8FF; stroke-width:4; opacity:.95}
html[data-board="drafting"] .iqBoard .frame .joist.header{stroke:#1F55D6}
.iqBoard .holes{pointer-events:none}
.iqBoard .hole{fill:#0B1220; stroke:#DCE6F7; stroke-width:1.6}
.iqBoard .hole.sel{stroke:#12E29A; stroke-width:2.6}
.iqBoard .hole.bad{stroke:#FF5C5C; stroke-dasharray:6 4}
.iqBoard .treeCrown{fill:rgba(18,226,154,.1); stroke:#12E29A; stroke-width:1.2; stroke-dasharray:3 2}
.iqBoard .treeTrunk{fill:#9A5B22}
.iqBoard .holeHit{fill:transparent; cursor:grab; pointer-events:all}
.iqBoard .lab.holeLab rect{fill:#0A1120; stroke:#DCE6F7} .iqBoard .lab.holeLab text{fill:#EDF2FF}
html[data-board="drafting"] .iqBoard .hole{fill:#fff; stroke:#0B1630}
html[data-board="drafting"] .iqBoard .hole.sel{stroke:#0C9A6A}
html[data-board="drafting"] .iqBoard .treeCrown{stroke:#0B8F61; fill:rgba(11,143,97,.08)}
html[data-board="drafting"] .iqBoard .lab.holeLab rect{fill:#fff; stroke:#0B1630} html[data-board="drafting"] .iqBoard .lab.holeLab text{fill:#0B1630}
.warnLine{margin:4px 0 8px; padding:8px 10px; border-radius:10px; border:1.5px solid rgba(255,92,92,.55); background:rgba(255,92,92,.1); font-size:.93em}
.q .red{color:#FF5C5C} html[data-mode="light"] .q .red{color:#C62828}

/* ---------- the tour: where everything lives, once every step is confirmed ---------- */
.iqPop .tour h3{font:800 24px/1.2 Outfit,sans-serif; margin:0 0 6px}
.iqPop .tour > p{color:var(--ink-2); margin:0 0 14px; font-size:15.5px}
.tourGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.tourGrid button{display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left; padding:12px 14px; border-radius:14px; border:2px solid var(--line-2); background:var(--panel-2); color:var(--ink); cursor:pointer; font:inherit}
.tourGrid button:hover{border-color:var(--mint); background:rgba(18,226,154,.08)}
.tourGrid button b{font:800 16px/1.2 Outfit,sans-serif}
.tourGrid button span{font-size:13.5px; line-height:1.4; color:var(--ink-2)}
@media (max-width:560px){ .tourGrid{grid-template-columns:1fr} }

/* ---------- the gate: review, list and plan set fold until every step is confirmed ---------- */
.gateBar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border-radius:14px; border:1.5px dashed var(--line-2); background:var(--panel); color:var(--ink-2); font-size:15px}
.gateBar b{font:800 18px/1 Outfit,sans-serif; color:var(--amber); white-space:nowrap}
.gateBar span{flex:1; min-width:240px}
.gateBar .iqSmall{margin-left:auto}

/* ---------- what is behind the wall (the ledger question at Shape confirm) ---------- */
.wallAsk h3 small{font:600 14px/1.2 Figtree,sans-serif; color:var(--ink-3)}
.tourGrid.walls button svg{color:var(--amber); margin-bottom:2px}
.tourGrid.walls button:nth-child(5){grid-column:1/-1}
.wallHow{margin-top:4px; font-size:14px; color:var(--ink-2)} .wallHow summary{cursor:pointer; font-weight:700; color:var(--ink)} .wallHow ul{padding-left:18px; margin:8px 0 0} .wallHow li{margin:6px 0; line-height:1.45}
.wallLine{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}

/* ============================================================
   6u — the workspace refresh (16 Oct 2026). A better flow in the SAME look:
   steps down the left (icons + words), the tool tiles in one column on the
   right, a 2D board / Split / 3D choice over the work area, +/− buttons on
   the edges, doors and windows on the house wall, the walk path, a status
   pill, and Light / Dark / Blueprint. Everything below reuses the existing
   colors, tile look and label style; nothing above was restyled.
   ============================================================ */
.iqRail,.iqTileCol{display:none}
@media (min-width:1001px){
  .iqApp{grid-template-columns:82px minmax(380px,460px) minmax(0,1fr) 84px; grid-template-areas:"rail panel stage tiles"}
  .iqRail{grid-area:rail; display:grid; align-content:start; gap:4px; padding:10px 6px; position:sticky; top:76px; align-self:start; max-height:calc(100vh - 96px); overflow-y:auto; scrollbar-width:none}
  .iqRail::-webkit-scrollbar{display:none}
  .iqPanel{grid-area:panel; border-left:1px solid var(--line); border-right:1px solid var(--line)}
  .iqStage{grid-area:stage}
  .iqTileCol{grid-area:tiles; display:block; position:sticky; top:76px; align-self:start; height:calc(100vh - 96px); min-height:620px; max-height:1000px; overflow-y:auto; scrollbar-width:thin; border-left:1px solid var(--line); padding:8px 6px}
  /* the step chips stay for the phone; on a computer the rail is the step list */
  #iqPanel .iqStick .iqSteps{display:none}
}
/* the rail: one icon + word per step, the same pill border and colors as the chips it replaces */
.iqRail button{position:relative; display:grid; justify-items:center; gap:4px; padding:9px 2px 8px; border:1.5px solid transparent; border-radius:12px; background:transparent; color:var(--ink-2); font:700 11.5px/1.1 Figtree,sans-serif; cursor:pointer; text-align:center}
.iqRail button svg{width:24px; height:24px}
.iqRail button:hover{border-color:#6E9CFF; color:var(--ink)}
.iqRail button.on{border-color:#6E9CFF; background:rgba(47,107,255,.16); color:var(--ink)}
.iqRail button.now{border-color:rgba(255,176,32,.75); color:var(--ink)}
.iqRail button.now::before{content:""; position:absolute; left:-6px; top:10px; bottom:10px; width:3px; border-radius:3px; background:#FFB020}
.iqRail button .ck{position:absolute; top:3px; right:6px; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font:800 10px/1 Figtree,sans-serif; background:var(--mint); color:#04140E}
.iqRail button.bad .ck{background:#E3170A; color:#fff}
.iqRail button.done{color:var(--mint)}
.iqRail button:disabled{opacity:.45; cursor:default; border-color:transparent; background:transparent}
.iqRail button .lk{position:absolute; top:3px; right:6px; font-size:11px}
.iqRail hr{border:0; border-top:1px solid var(--line); margin:4px 8px}

/* the tile column: the same tiles, stacked; a rule between the always-on ones and the step's own */
.iqTileCol .iqTools.iconTools{flex-direction:column; flex-wrap:nowrap; align-items:stretch; padding:5px; gap:3px}
.iqTileCol .iqTools.iconTools button{min-width:0; width:100%}
.iqTileCol .iqTools.iconTools button span{white-space:normal; line-height:1.1}
.iqTileCol .tileDiv{border:0; border-top:1.5px solid var(--line-2); margin:5px 4px; width:auto}
.iqTileCol .moreTiles[aria-expanded="true"]{color:var(--ink)}
.iqTileCol button[hidden]{display:none !important}
@media (max-width:1000px){ .iqTileCol,.iqRail,.iqWork{display:none !important} }
/* 26 Oct: the step cards as a drawer (Jared's option A, "push"): folded, the panel column goes to 0 and the board
   takes the width; the tab on the board's left edge and any step on the rail bring it back */
.dqFoldTab{display:none}
@media (min-width:1001px){
  .iqApp{transition:grid-template-columns .26s ease}
  .iqApp.dqFold{grid-template-columns:82px 0 minmax(0,1fr) 84px}
  .iqApp.dqFold .iqPanel{visibility:hidden; overflow:hidden; padding:0; border:0}
  .iqWork{position:relative}
  .dqFoldTab{display:grid; place-items:center; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:7; width:20px; height:62px; padding:0;
    border:1.5px solid var(--line-2); border-left:0; border-radius:0 10px 10px 0; background:var(--card); color:#6E9CFF; cursor:pointer; box-shadow:4px 0 12px rgba(0,0,0,.18)}
  .dqFoldTab b{font:800 18px/1 Figtree,sans-serif}
  .dqFoldTab:hover{color:var(--ink); border-color:#6E9CFF}
  .iqApp.maxMap .dqFoldTab,.iqApp.maxBoard .dqFoldTab{display:none}
}
@media (prefers-reduced-motion:reduce){ .iqApp{transition:none} }

/* the work area under the map: the workspace bar, then the board and/or the 3D pane */
.iqWork{display:grid; grid-template-rows:auto minmax(0,1fr); min-height:300px; min-width:0; background:var(--panel)}
.iqWsBar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:8px 10px; border-bottom:1px solid var(--line-2); background:var(--card); position:relative; z-index:6}
.iqSeg{display:inline-flex; border:1.5px solid var(--line-2); border-radius:11px; overflow:hidden; background:var(--panel-2)}
.iqSeg button{border:0; background:transparent; color:var(--ink-2); font:700 13px/1 Figtree,sans-serif; padding:8px 12px; cursor:pointer; min-height:34px}
.iqSeg button + button{border-left:1.5px solid var(--line-2)}
.iqSeg button:hover{color:var(--ink)}
.iqSeg button[aria-pressed="true"]{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); color:#fff}
.iqSeg.sm button{font-size:12px; padding:7px 10px; min-height:30px}
.iqPill{border:1.5px solid rgba(18,226,154,.55); background:rgba(18,226,154,.1); color:var(--mint); font:700 13px/1 Figtree,sans-serif; padding:8px 12px; border-radius:99px; cursor:pointer; min-height:34px}
.iqPill.bad{border-color:rgba(255,107,107,.75); background:rgba(227,23,10,.14); color:#FF6B6B}
html[data-mode="light"] .iqPill.bad{color:#C8102E; border-color:#E3170A; background:#FFF0F0}
.iqPanes{display:grid; grid-template-columns:minmax(0,1fr); min-height:0; min-width:0}
.iqPanes.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.iqPanes.only3d > .iqBoardBox{display:none}
.iqPanes > .iqBoardBox{min-height:0; min-width:0}
/* the 3D view as a pane: the same bar, buttons and note as the pop-up it was, in the work area */
.iq3d.pane{position:relative; inset:auto; z-index:5; min-height:0; min-width:0; border-left:1.5px solid var(--line-2)}
.iq3d.pane[hidden]{display:none}
.iq3d.pane .bar{padding:7px 10px; gap:8px; flex-wrap:wrap}
.iq3d.pane .bar b{font-size:15px}
.iq3d.pane .h3d{display:none}
.iq3d.pane .views{flex-wrap:wrap; gap:4px; margin-left:auto}
.iq3d.pane .views button{padding:7px 10px; font-size:12px}
.iq3d.pane .x{width:32px; height:32px; font-size:15px}
.iq3d.pane .note{font-size:12px; padding:6px 10px; min-height:0}
.iq3d .stage{grid-row:2; grid-column:1}
.iq3dChips{grid-row:2; grid-column:1; position:relative; pointer-events:none; overflow:hidden; z-index:2}
.iq3dChips .eChip{position:absolute; transform:translate(-50%,-50%); pointer-events:auto}
.iqApp.maxBoard .iqWork{height:100%}
.iqApp.maxBoard .iqTileCol{display:block; position:fixed; left:10px; top:70px; bottom:12px; height:auto; min-height:0; max-height:none; z-index:170; border:0; padding:0; width:76px}
.iqApp.maxBoard .iqBoardBar{padding-left:96px}

/* the +/− buttons on the edges: the existing label pill shape, mint to add, red to take away */
.eChip{font:800 12px/1 Figtree,sans-serif; padding:6px 9px; border-radius:99px; border:1.5px solid #fff; cursor:pointer; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.35)}
.eChip.add,.iqBoard .chip.add{text-transform:none} .eChip.add{background:#0FB57E; color:#fff}
.eChip.rem{background:#E3170A; color:#fff}
.iqBoard .chips{pointer-events:auto}
.iqBoard .chip{cursor:pointer}
.iqBoard .chip rect{stroke:#fff; stroke-width:1.5}
.iqBoard .chip.add rect{fill:#0FB57E} .iqBoard .chip.rem rect{fill:#E3170A}
.iqBoard .chip text{font:800 11.5px/1 Figtree,sans-serif; fill:#fff; pointer-events:none}
.iqBoard .chip:hover rect{stroke-width:2.5}
.iqBoard .edgeBad{stroke:#FF3B30; stroke-width:4; stroke-dasharray:8 6; fill:none; pointer-events:none}
.iqBoard .lab.bad rect{fill:#E3170A; stroke:#fff} .iqBoard .lab.bad text{fill:#fff; font-family:Figtree,sans-serif; font-weight:800; font-size:11px}
/* Railings · Walls · Stairs: what the edge buttons do */
.rmode{margin:2px 0 8px}
.rmode .seg button svg{display:block; margin:0 auto 4px}

/* doors and windows on the house wall: plan symbols in the board's own line style */
.iqBoard .door .gap{fill:var(--panel); stroke:none}
html[data-board="drafting"] .iqBoard .door .gap{fill:#fff}
.iqBoard .door .jamb{stroke:#FFB020; stroke-width:2.5}
.iqBoard .door .leaf{stroke:var(--ink); stroke-width:2; fill:none}
.iqBoard .door .swing{stroke:var(--ink-2); stroke-width:1.2; fill:none; stroke-dasharray:4 3}
.iqBoard .door .panel{stroke:var(--ink); stroke-width:2.4; fill:none}
.iqBoard .door .glass{stroke:#6E9CFF; stroke-width:1.6; fill:none}
.iqBoard .door.sel .leaf,.iqBoard .door.sel .panel,.iqBoard .door.sel .glass{stroke:#6E9CFF; stroke-width:3}
.iqBoard .door.bad .leaf,.iqBoard .door.bad .panel{stroke:#FF3B30}
.iqBoard .doorHit{fill:transparent; cursor:ew-resize}
.iqBoard .lab.doorLab rect{fill:var(--card); stroke:#6E9CFF} .iqBoard .lab.doorLab text{fill:var(--ink)}
.dRows{display:grid; gap:8px; margin:6px 0 4px}
.dRow.on{background:rgba(47,107,255,.08)}
.sidings{display:flex; flex-wrap:wrap; gap:6px}
.sidings button{width:34px; height:34px; border-radius:9px; border:2px solid var(--line-2); cursor:pointer; padding:0}
.sidings button[aria-pressed="true"]{border-color:#6E9CFF; box-shadow:0 0 0 2px rgba(110,156,255,.45)}
/* the walk path: orange footprints */
.iqBoard .walk{pointer-events:none}
.iqBoard .walk .fp{fill:#FF6B1A; stroke:none; opacity:.92}
.iqBoard .walk .fpTo{font:800 11px/1 Figtree,sans-serif; fill:#FF6B1A; letter-spacing:.04em}

/* Blueprint: navy sheet, white lines, yellow accents — tokens on the board and 3D only; NOT TO CODE stays red */
html[data-iqtheme="blueprint"] .iqBoardBox,html[data-iqtheme="blueprint"] .iqBoard{background:#0E2D5E}
html[data-iqtheme="blueprint"] .iqBoard .grid line{stroke:rgba(255,255,255,.10)} html[data-iqtheme="blueprint"] .iqBoard .grid line.five{stroke:rgba(255,255,255,.22)}
html[data-iqtheme="blueprint"] .iqBoard .deck{fill:rgba(255,255,255,.06); stroke:#FFFFFF}
html[data-iqtheme="blueprint"] .iqBoard .deck.ghost{fill:rgba(255,255,255,.03); stroke:rgba(255,255,255,.55)}
html[data-iqtheme="blueprint"] .iqBoard .house{stroke:#FFD23F} html[data-iqtheme="blueprint"] .iqBoard .houseLab{fill:#FFD23F}
html[data-iqtheme="blueprint"] .iqBoard .ledger{stroke:#FFD23F}
html[data-iqtheme="blueprint"] .iqBoard .vtx{fill:#0E2D5E; stroke:#FFFFFF} html[data-iqtheme="blueprint"] .iqBoard .vtx.house{stroke:#FFD23F} html[data-iqtheme="blueprint"] .iqBoard .vtx.sel{fill:#FFD23F}
html[data-iqtheme="blueprint"] .iqBoard .lab rect{fill:#0E2D5E; stroke:rgba(255,255,255,.85)} html[data-iqtheme="blueprint"] .iqBoard .lab text{fill:#FFFFFF}
html[data-iqtheme="blueprint"] .iqBoard .lab.house rect{fill:#FFD23F; stroke:#FFD23F} html[data-iqtheme="blueprint"] .iqBoard .lab.house text{fill:#0E2D5E}
html[data-iqtheme="blueprint"] .iqBoard .lab.ang rect{fill:#0E2D5E; stroke:#9CC3FF} html[data-iqtheme="blueprint"] .iqBoard .lab.ang text{fill:#CFE0FF}
html[data-iqtheme="blueprint"] .iqBoard .lab.beam rect{fill:#0E2D5E; stroke:#FFD23F} html[data-iqtheme="blueprint"] .iqBoard .lab.beam text{fill:#FFD23F}
html[data-iqtheme="blueprint"] .iqBoard .lab.bad rect{fill:#E3170A; stroke:#fff} html[data-iqtheme="blueprint"] .iqBoard .lab.bad text{fill:#fff}
html[data-iqtheme="blueprint"] .iqBoard .frame .joist{stroke:rgba(255,255,255,.45)} html[data-iqtheme="blueprint"] .iqBoard .frame .joist.end{stroke:rgba(255,255,255,.7)}
html[data-iqtheme="blueprint"] .iqBoard .frame .beam{stroke:#FFD23F} html[data-iqtheme="blueprint"] .iqBoard .frame .post{fill:#0E2D5E; stroke:#FFD23F}
html[data-iqtheme="blueprint"] .iqBoard .scale line{stroke:#fff} html[data-iqtheme="blueprint"] .iqBoard .scale text{fill:#fff}
html[data-iqtheme="blueprint"] .iqBoard .edgeSel{stroke:#FFD23F}
html[data-iqtheme="blueprint"] .iqBoard .door .gap{fill:#0E2D5E} html[data-iqtheme="blueprint"] .iqBoard .door .leaf,html[data-iqtheme="blueprint"] .iqBoard .door .panel{stroke:#fff}
html[data-iqtheme="blueprint"] .iqBoard .lab.doorLab rect{fill:#0E2D5E; stroke:#9CC3FF} html[data-iqtheme="blueprint"] .iqBoard .lab.doorLab text{fill:#fff}
html[data-iqtheme="blueprint"] .iqBoard .walk .fp{fill:#FFD23F} html[data-iqtheme="blueprint"] .iqBoard .walk .fpTo{fill:#FFD23F}
html[data-iqtheme="blueprint"] .iqBoard .empty text{fill:rgba(255,255,255,.75)}
/* 6u fit and finish: light-mode controls, a compact tile column, the pane note and tip out of the way */
html[data-mode="light"] .iqSeg{background:#fff} html[data-mode="light"] .iqSeg button{color:var(--ink-2)} html[data-mode="light"] .iqSeg button[aria-pressed="true"]{color:#fff}
html[data-mode="light"] .iqWsBar{background:#F4F7FD}
html[data-mode="light"] .iqWork{background:#fff}
@media (min-width:1001px){
  .iqStage{grid-template-rows:minmax(220px,32%) minmax(320px,1fr)}
  .iqTileCol .iqTools.iconTools button{min-height:46px; padding:5px 4px 4px; gap:3px}
  .iqTileCol .iqTools.iconTools button svg{width:20px; height:20px}
}
.iq3d.pane .note{display:none}
.iqPanes.split .iqBoardBar .iqTip{display:none}
.iqBoardBar .iqTip{font-size:12.5px; padding:7px 10px; max-width:420px}
/* a toast never blocks the board under it: the text lets taps through, only its Undo button takes them */
.toast{pointer-events:none} .toast button{pointer-events:auto}
.picks.doorTiles{grid-template-columns:repeat(4,minmax(0,1fr))}

.iqBoard .chip text{text-transform:none; letter-spacing:0}
.iq3d.pane .bar > b{display:none}
.iq3d.pane .views{margin-left:0; flex:1 1 auto}
.iq3d.pane .views button{padding:6px 8px; font-size:11.5px}
.iq3d.pane .stage{padding:0; display:block}   /* the site-wide .stage padding would offset the canvas from the edge buttons laid over it */
.iq3d.pane .bar{flex-wrap:nowrap; align-items:flex-start}
.iq3d.pane .bar .x{flex:none}
/* the step card copied into the full-window dock reads in light mode too (Light is the default now) */
html[data-mode="light"] .iqDock .dockCard .q{background:#F4F7FD}
#iqViewSeg[hidden]{display:none}
/* 16 Oct (Jared): the map toolbar sized down so it stops covering the map; tips put away on a tap, a round i brings them back */
@media (min-width:1001px){
  .iqMapBar{left:10px; right:110px; top:10px; gap:6px}
  #iqMapTools{padding:3px; gap:2px; border-radius:10px; border-width:1px}
  #iqMapTools button{font-size:12.5px; padding:5px 9px; min-height:28px; border-radius:7px}
  .iqMapBar .iqTip,.iqBoardBar .iqTip{font-size:12.5px; padding:6px 10px; max-width:380px}
}
.iqTipBtn{position:absolute; top:12px; right:62px; z-index:40; width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(110,156,255,.6); background:rgba(5,9,18,.88); color:#E7ECF7; font:800 15px/1 Georgia,serif; font-style:italic; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35); display:grid; place-items:center}
.iqTipBtn:hover{border-color:#6E9CFF; color:#fff}
.iqTipBtn[hidden]{display:none}
html[data-mode="light"] .iqTipBtn{background:#fff; color:var(--ink-2); border-color:var(--line-2)}
.iqBoardBox > .iqTipBtn{top:14px; right:64px}
@media (max-width:1000px){ .iqMap > .iqTipBtn{right:12px} }
@media (min-width:1001px){ .iqStage{grid-template-rows:minmax(240px,32%) minmax(320px,1fr)} .iqStage > .iqMap{min-height:0; overflow:hidden} }   /* the map fits its row instead of running under the work area */
/* 16 Oct (Jared): light mode, at the root. The site never redefines --panel / --panel-2 for light mode, so every DeckIQ
   card, pop-up tile, picker and bar built on them stayed navy with dark text on it. On this page they get light values
   (deckiq.css loads only on /deckiq); Dark and Blueprint keep the navy ones. */
html[data-mode="light"]{--panel:#FFFFFF; --panel-2:#EEF2FA}
html[data-mode="light"] .rvTbl .pill{color:#1741C4; background:rgba(47,107,255,.10)}
html[data-mode="light"] .ans .big b,html[data-mode="light"] .item b{color:#1741C4}
html[data-mode="light"] .okJust button,html[data-mode="light"] .linkBtn{color:#1741C4}
html[data-mode="light"] .iq3d .stage{background:#EAF0FA}
/* 16 Oct (Jared): a dropdown in a row of small fields ("Which side moves") was cut off. A field with a dropdown takes the
   whole row, and the dropdown the whole field, so its words always show — laptop or wide screen. */
.dims > .fld:has(> select){grid-column:1/-1}
.fld select{width:100%; min-width:0}
@media (min-width:1001px){ .iqApp{grid-template-columns:82px minmax(360px,min(500px,32vw)) minmax(0,1fr) 84px} }   /* the panel gives room back to the board on a laptop */
/* laptops (short screens): the tile column packs tighter so every tile of the step fits without scrolling */
@media (min-width:1001px) and (max-height:960px){
  .iqTileCol{padding:6px 5px}
  .iqTileCol .iqTools.iconTools{gap:1px; padding:4px}
  .iqTileCol .iqTools.iconTools button{min-height:35px; padding:3px 3px 2px; gap:2px; font-size:10px}
  .iqTileCol .iqTools.iconTools button svg{width:18px; height:18px}
  .iqTileCol .tileDiv{margin:3px 4px}
  .iqRail button{padding:6px 2px 5px; font-size:10.5px} .iqRail button svg{width:21px; height:21px}
  /* 21 Oct: New design, Saved decks and Report a problem sit under Plans now — packed so they show on a laptop */
  .iqRail{gap:2px} .iqRail button{padding:4px 2px 4px; gap:2px} .iqRail button svg{width:19px; height:19px}
  .iqRail button.dqTool{padding:3px 2px; font-size:10px} .iqRail button.dqTool svg{width:17px; height:17px}
}
.houseLock[aria-pressed="true"]{border-color:rgba(18,226,154,.6); background:rgba(18,226,154,.12); color:var(--mint)}
.q.houseLocked{padding-bottom:10px}
/* 16 Oct: one card at a time on a computer — the rail picks the step, back / next walk them */
.iqPanel [data-step].stepOff{display:none !important}
.iqPanel .stepNav{display:flex; justify-content:space-between; gap:8px; margin:-2px 0 4px}
.iqPanel .stepNav .iqSmall{font-weight:600}
/* 16 Oct: the picture tiles are big enough on their own (no hover zoom). The one small detail drawing that keeps
   its zoom (fascia) opens to the right, over the board — the panel sits on the left now, so the left was under the rail. */
@media (min-width:1001px){ .iqPanel .pic .zoom{right:auto; left:calc(100% + 14px)} }
/* 16 Oct round 4: the what-if cards stack in the panel instead of running under the board */
.iqPanel{grid-template-columns:minmax(0,1fr)}
.iqPanel .optGrid{grid-template-columns:minmax(0,1fr)}
.picks.pics button small{font-size:12.5px; color:var(--ink-2)}
/* the finished deck in 3D, full window, with the steps along the top */
.iqApp.max3d .iqStage{position:fixed; inset:0; z-index:160; height:100vh; max-height:none; min-height:0; grid-template-rows:1fr; background:var(--bg)}
.iqApp.max3d .iqMap,.iqApp.max3d .iqWsBar,.iqApp.max3d #iqBoardBox{display:none}
.iqApp.max3d .iqWork{height:100%; display:grid; grid-template-rows:minmax(0,1fr)}
.iqApp.max3d .iqPanes{height:100%; grid-template-columns:minmax(0,1fr)}
.iqApp.max3d .iq3d.pane{border-left:0; height:100%}
.iqApp.max3d .iq3d.pane .bar{flex-wrap:wrap; padding:10px 14px}
.iqApp.max3d .iq3d.pane .bar > b{display:block; font-size:17px}
.iqApp.max3d .iq3d.pane .x{width:40px; height:40px; font-size:18px}
.iq3dSteps{flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-top:6px; border-top:1px solid var(--line)}
.iq3dSteps[hidden]{display:none}
.iq3dSteps span{font:700 13px/1 Figtree,sans-serif; color:var(--ink-2); margin-right:4px}
.iq3dSteps button{font:700 12.5px/1 Figtree,sans-serif; padding:8px 11px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--card); color:var(--ink); cursor:pointer}
.iq3dSteps button:hover{border-color:#6E9CFF}
html.iqFollowOn .toast{bottom:86px}
/* 16 Oct: benches and planters on the board — the hot tub's look, warm wood instead of blue */
.iqBoard .furns .furn{stroke-width:2.2; stroke-linejoin:round}
.iqBoard .furns .furn.bench{fill:rgba(200,140,70,.30); stroke:#C88A44}
.iqBoard .furns .furn.planter{fill:rgba(200,140,70,.28); stroke:#A8743A}
.iqBoard .furns .furnSoil{fill:rgba(46,160,90,.45); stroke:#2E8F5A; stroke-width:1.2}
.iqBoard .furns .furnSlat{stroke:#C88A44; stroke-width:1; opacity:.8}
.iqBoard .furns .furn.on{stroke:#2F6BFF; stroke-width:3}
.iqBoard .furnHit{fill:transparent; cursor:grab; pointer-events:all}
.iqBoard .lab.furnLab rect{fill:#0A1120; stroke:#C88A44} .iqBoard .lab.furnLab text{fill:#F2C690}
html[data-board="drafting"] .iqBoard .lab.furnLab rect{fill:#FFF7EC} html[data-board="drafting"] .iqBoard .lab.furnLab text{fill:#7A4A12}
.picks.furnTiles{grid-template-columns:repeat(2,minmax(0,1fr))}

/* stage 6b: the shopping list as a spreadsheet */
.bomCsv{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:4px 0 12px; font-size:12.5px; color:var(--ink-3)}
.bomCsv span{max-width:70ch}
@media print{ .bomCsv{display:none} }
/* round 2: plan ID, revision and the QR to /verify on the title block */
.sheet .titleBlock .issue{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; border-top:1px solid var(--pLine); padding-top:7px}
.sheet .titleBlock .issue .qr{display:block}
.sheet .titleBlock .issue dt{font:800 8.5px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pInk2)}
.sheet .titleBlock .issue dd{margin:2px 0 5px; font-weight:700; font-size:10.5px}
.sheet .titleBlock .issue dd.code{font:700 12px/1 "IBM Plex Mono",monospace; letter-spacing:.06em}
.sheet .titleBlock .issue small{display:block; font-size:8.4px; color:var(--pInk2); overflow-wrap:anywhere; min-width:0}
.sheet .titleBlock .issue > div{min-width:0}

/* 17 Oct (6b): "Get quotes on this design" — the homeowner's quotes side by side, a pro's quote form */
#iqQuotes .dqCard{background:var(--panel-2); border:1.5px solid var(--line-2); border-radius:14px; padding:14px 16px; margin-top:12px; display:grid; gap:10px}
#iqQuotes .dqCard.won{border-color:rgba(18,226,154,.55); background:rgba(18,226,154,.06)}
#iqQuotes .dqCard.off{opacity:.72}
#iqQuotes .dqSec{width:100%; max-width:560px; border-collapse:collapse; font-size:14px}
#iqQuotes .dqSec caption{text-align:left; font-weight:700; font-size:13px; color:var(--ink-2); padding-bottom:4px}
#iqQuotes .dqSec th{text-align:left; font-weight:500; padding:5px 0; border-top:1px solid var(--line)}
#iqQuotes .dqSec td{text-align:right; font-variant-numeric:tabular-nums; padding:5px 0; border-top:1px solid var(--line)}
#iqQuotes .dqSec tr.sub th,#iqQuotes .dqSec tr.sub td{color:var(--ink-3); font-size:13px}
#iqQuotes .dqSec tr.tot th,#iqQuotes .dqSec tr.tot td{font-weight:800; border-top:1.5px solid var(--line-2)}
#iqQuotes .dqGood{margin-top:-4px!important}
#iqQuotes .dqCard p{margin:0; line-height:1.5}
#iqQuotes .dqStatus{margin-top:10px; font-size:14.5px; color:var(--ink-2)}
#iqQuotes .dqStatus b{color:var(--ink)}
#iqQuotes .dqHead{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap}
#iqQuotes .dqHead b{font:800 17px/1.25 Figtree,sans-serif; display:block}
#iqQuotes .dqLic,#iqQuotes .dqMeta{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
#iqQuotes .dqPrice{text-align:right} #iqQuotes .dqPrice b{font:800 26px/1 Outfit,sans-serif; color:#12E29A} #iqQuotes .dqPrice span{display:block; font-size:12px; color:var(--ink-3)}
html[data-mode="light"] #iqQuotes .dqPrice b{color:#0C9A6A}
#iqQuotes .dqNote{font-style:italic; color:var(--ink-2)}
#iqQuotes .dqOuts{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:620px}
#iqQuotes .dqOut{margin:0; background:var(--panel); border:1px solid var(--line-2); border-radius:10px; padding:6px}
#iqQuotes .dqOut svg{display:block; width:100%; height:auto; max-height:170px}
#iqQuotes .dqOut path.mine{fill:rgba(255,176,32,.16); stroke:#FFB020; stroke-width:2}
#iqQuotes .dqOut path.theirs{fill:rgba(255,107,26,.16); stroke:#FF6B1A; stroke-width:2}
#iqQuotes .dqOut figcaption{font-size:12px; color:var(--ink-3); text-align:center; margin-top:2px}
#iqQuotes .dqTbl{width:100%} #iqQuotes .dqTbl td:first-child{color:var(--ink-3)}
#iqQuotes .dqTbl tr.diff td{background:rgba(255,176,32,.10)} #iqQuotes .dqTbl tr.diff td:last-child{font-weight:700}
#iqQuotes .dqContact{display:grid; gap:4px; font-size:14px}
#iqQuotes .dqContact div{display:grid; grid-template-columns:90px 1fr; gap:8px} #iqQuotes .dqContact span{color:var(--ink-3)} #iqQuotes .dqContact em{font-style:normal; font-size:12px; color:var(--ink-3)}
#iqQuotes .dqForm{display:grid; gap:10px}
#iqQuotes .dqForm label{display:grid; gap:4px; font-size:13px; color:var(--ink-3)}
#iqQuotes .dqForm input,#iqQuotes .dqForm textarea{font:500 15px/1.4 Figtree,sans-serif; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:9px; padding:9px 10px}
#iqQuotes .dqMoney{display:flex; align-items:center; gap:6px; font:800 18px/1 Outfit,sans-serif; color:var(--ink)} #iqQuotes .dqMoney input{max-width:180px; font:700 18px/1 'IBM Plex Mono',monospace}
#iqQuotes .dqSent{margin-top:12px; display:grid; gap:4px; font-size:13.5px}
#iqQuotes .dqSent div{display:grid; grid-template-columns:1fr auto 130px; gap:10px; border-top:1px solid var(--line-2); padding-top:4px} #iqQuotes .dqSent em{font-style:normal; color:var(--ink-3)}
@media (max-width:700px){ #iqQuotes .dqOuts{grid-template-columns:1fr} }
@media print{ #iqQuotes{display:none !important} }
/* 17 Oct: the homeowner's copy of an accepted design — the pro's plan, read-only */
.buyBox .engNote.lockNote.mirrorNote{display:block; line-height:1.45}
.buyBox .mirrorLine{padding:8px 10px; border-radius:10px; border:1px solid var(--line-2); background:rgba(18,226,154,.06)}
.buyBox .mirrorLine .iqSmall{margin-left:6px}

/* 17 Oct: the builder's logo in the title block (a data URL from their account; never an outside link) */
.sheet .titleBlock .builder .bLogo{display:block; max-width:100%; max-height:34px; width:auto; height:auto; margin:2px 0 4px; object-fit:contain}

/* 17 Oct: "Start on a blank lot" (stage 8, part A) */
.iqPop.wide .lotGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:10px; margin-top:12px}
.lotSub{margin:14px 0 6px; font:700 13px/1.2 Figtree,sans-serif; color:var(--ink-2)}
.lotSub small{font-weight:500; color:var(--ink-3); margin-left:4px}
/* 26 Oct: the 3D houses in the blank-lot picker — a picture tile each, "coming soon" until its preset exists */
.houseGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px}   /* 27 Oct night: nine houses, five across on a laptop */
.houseTile{display:grid; gap:2px; justify-items:start; text-align:left; padding:6px 6px 8px; border-radius:12px; border:1px solid var(--line-2); background:var(--panel-2,rgba(255,255,255,.03)); color:var(--ink); cursor:pointer; font:500 12px/1.3 Figtree,sans-serif}
button.houseTile:hover,button.houseTile:focus-visible{border-color:var(--amber,#FFB020); outline:none}
.houseTile img,.houseTile .hPh{width:100%; aspect-ratio:2.1; object-fit:cover; border-radius:8px; background:var(--line-2); display:block; margin-bottom:3px}
.houseTile .hPh{background:repeating-linear-gradient(45deg,var(--line-2) 0 8px,transparent 8px 16px)}
.houseTile b{font-size:13px}
.houseTile small{color:var(--ink-3)}
.houseTile.soon{opacity:.55; cursor:default}
/* 26 Oct: a preset house's colors, driveway and its own windows and doors (House step) */
.hColors{display:grid; gap:4px}
.hcRow{display:grid; grid-template-columns:84px 1fr; align-items:center; gap:6px}
.hcRow>span:first-child{font-size:12px; color:var(--ink-2)}
.hcSw{display:flex; flex-wrap:wrap; gap:5px}
.hSw{width:24px; height:24px; border-radius:7px; border:2px solid var(--line-2); cursor:pointer; padding:0; background:transparent; color:var(--ink); font:600 11px/1 Figtree,sans-serif}
.hSw.txt{width:auto; padding:0 7px}
.hSw[aria-pressed="true"]{border-color:#6E9CFF; box-shadow:0 0 0 2px rgba(110,156,255,.45)}
.hDrive{display:flex; justify-content:space-between; align-items:center; margin:10px 0 2px; font-size:13px; cursor:pointer}
.hOpen{border-top:1px solid var(--line-2); margin-top:10px; padding-top:8px; font-size:13px}
.hOpen summary{cursor:pointer; font-weight:600}
.hoRow{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:3px 0; font-size:12.5px}
.hoRow i{font-style:normal; color:var(--ink-3)}
.hoRow em{font-style:normal; font-size:11.5px; color:var(--amber-ink,#B26A00)}
.hoRow.off>span{text-decoration:line-through; color:var(--ink-3)}
.lotCard{display:grid; gap:3px; justify-items:start; text-align:left; padding:10px; border-radius:12px; border:1px solid var(--line-2); background:var(--panel-2,rgba(255,255,255,.03)); color:var(--ink); cursor:pointer; font:500 13px/1.35 Figtree,sans-serif}
.lotCard:hover,.lotCard:focus-visible{border-color:var(--amber,#FFB020); outline:none}
.lotCard svg{width:100%; height:auto; max-height:72px; margin-bottom:4px}
.lotCard b{font-size:14px}
.lotCard small{color:var(--ink-2)}
.lotCard i{font-style:normal; font-size:12px; color:var(--ink-3)}
.lotCard .lh{fill:#7D8798} .lotCard .lg{fill:rgba(76,160,90,.18); stroke:rgba(76,160,90,.5)}
.lotCard .ld{fill:rgba(255,176,32,.28); stroke:#FFB020; stroke-width:1.4}
.lotCard .lo{stroke:#4F8BFF; stroke-width:3; stroke-linecap:round} .lotCard .lw{stroke:#BFE3FF; stroke-width:2; stroke-linecap:round}
.lotState{max-width:300px}
.lotStart{margin:8px 0 10px; padding:9px 11px; border:1px dashed var(--line-2); border-radius:10px; font-size:13.5px; line-height:1.45; color:var(--ink-2)}
.lotStart b{color:var(--ink)} .lotStart .iqSmall{margin-left:4px}
.lotNote{margin:0 0 10px; padding:8px 10px; border-radius:10px; background:rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.4); font-size:13.5px; line-height:1.45}
.iqTplMenu .lotsBtn{border-style:dashed}

/* 17 Oct: the deck gallery entry (stage 8) — shown only when the gallery is on */
.galleryRow{margin-top:12px; padding:10px 12px; border:1px dashed var(--line-2); border-radius:12px; display:grid; gap:4px; font-size:13.5px; line-height:1.45}
.galleryRow span{color:var(--ink-2)}
.galleryIn{display:flex; gap:8px; margin-top:4px}
.galleryIn input{flex:1; min-width:0; background:var(--panel); color:var(--ink); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px; font:500 14px Figtree,sans-serif}

/* 17 Oct: "+ New design" rides in the sticky progress row, so it shows on every step */
.iqProg .iqNew{justify-self:start; white-space:nowrap}
/* 18 Oct: Report a problem, next to + New design; the copy-of-a-reported-design banner; the note box */
.iqProg .iqProgBtns{display:flex; gap:8px; flex-wrap:wrap; justify-self:start}
.iqProg .iqProb{white-space:nowrap; font-weight:600; color:var(--ink-2)}
.iqInspect{margin:0 0 12px; padding:12px 16px; border-radius:12px; border:1.5px solid #FFB020; background:rgba(255,176,32,.12); color:var(--ink); font-size:14.5px; line-height:1.45}
#iqPopB .probNote{width:100%; box-sizing:border-box; font:500 15px Figtree,sans-serif; padding:10px 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink); margin:6px 0 10px}

/* ---------- the build manual (17 Oct): letter, portrait, 768 × 1008 ---------- */
.mPage{--pInk:#0B1630; --pInk2:#46577A; --pLine:#C9D3E6; --pAcc:#1F55D6; --pSoft:#F3F6FB;
  width:768px; height:1008px; background:#fff; color:var(--pInk); position:relative; overflow:hidden; box-sizing:border-box;
  padding:22px 26px 0; display:flex; flex-direction:column; gap:9px; font:400 11.5px/1.42 Figtree,Arial,sans-serif; box-shadow:0 20px 50px rgba(0,0,0,.45)}
.mPage *{box-sizing:border-box}
.mPage > *{flex-shrink:0}
.mPage .wm{position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; z-index:3}
.mPage .wm span{transform:rotate(-55deg); font:900 46px/1.2 Figtree,sans-serif; letter-spacing:.05em; color:rgba(210,50,74,.15); text-align:center; white-space:nowrap}
.mPage .wm.eng span{color:rgba(227,23,10,.2); transform:rotate(-55deg) translateY(-120px)}
.mHead{display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--pInk); padding-bottom:6px}
.mBrand{font:800 13px/1 Figtree,sans-serif; letter-spacing:.02em} .mBrand small{font-weight:600; color:var(--pInk2); margin-left:6px; letter-spacing:.08em; text-transform:uppercase; font-size:9.5px}
.mWhere{font:600 10.5px/1 Figtree,sans-serif; color:var(--pInk2)}
.mTitle{display:flex; align-items:baseline; gap:10px}
.mTitle h1{margin:0; font:800 23px/1.1 Figtree,sans-serif; letter-spacing:-.01em; color:var(--pInk)}
.mStep{font:800 10px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--pAcc); padding:5px 8px; border-radius:4px; white-space:nowrap}
.mLead{margin:0; font-size:12.2px; line-height:1.5; color:var(--pInk)}
.mNums{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px}
.mNums .n{background:var(--pSoft); border:1px solid var(--pLine); border-radius:8px; padding:7px 9px}
.mNums .n b{display:block; font:800 19px/1.1 "IBM Plex Mono",monospace; color:var(--pAcc); letter-spacing:-.02em}
.mNums .n span{display:block; font-size:9.8px; color:var(--pInk2); margin-top:2px; line-height:1.25}
.mBox{border:1.5px solid var(--pInk); border-radius:6px; padding:7px 10px 8px; min-width:0}
.mBox h2{margin:0 0 5px; font:800 9.6px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pInk)}
.mBox.tight{padding:6px 10px} .mBox.hand{border-style:dashed}
.mHand{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:3px 14px}
.mHand li{display:grid; grid-template-columns:12px 30px 1fr; gap:6px; align-items:start; font-size:10.3px; line-height:1.3; border-bottom:1px solid var(--pLine); padding-bottom:3px}
.mHand i{width:11px; height:11px; border:1.5px solid var(--pInk); border-radius:2px; margin-top:1px}
.mHand b{font:700 10.5px "IBM Plex Mono",monospace; color:var(--pAcc); text-align:right}
.mHand span{font-weight:700} .mHand small{display:block; font-weight:400; color:var(--pInk2); font-size:9px; line-height:1.25}
.mSteps{margin:0; padding-left:18px; font-size:10.8px; line-height:1.38} .mSteps li{margin:0 0 2px} .mSteps li::marker{font-weight:800; color:var(--pAcc)}
.mChecks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; font-size:10.5px; line-height:1.35}
.mChecks li{display:flex; gap:7px; align-items:flex-start} .mChecks i,.mPage .tick i,.mSign i{flex:0 0 auto; width:11px; height:11px; border:1.5px solid var(--pInk); border-radius:2px; display:inline-block; margin-top:1px}
.mTbl{width:100%; border-collapse:collapse; font-size:10.4px}
.mTbl th{font:800 8.5px/1.1 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--pInk2); text-align:left; padding:2px 4px 3px; border-bottom:1.5px solid var(--pInk)}
.mTbl td{padding:2.5px 4px; border-bottom:1px solid var(--pLine); vertical-align:top}
.mTbl td:first-child{font-weight:700; white-space:nowrap}
.mTbl:not(.hand):not(.glance):not(.toc):not(.log):not(.tk):not(.cuts):not(.loads) td:not(:first-child){font-family:"IBM Plex Mono",monospace; font-size:10px}
.mTbl.hand td:first-child{font:700 11px "IBM Plex Mono",monospace; color:var(--pAcc); text-align:right; width:34px}
.mTbl.hand small{display:block; color:var(--pInk2); font-size:9.3px; line-height:1.3}
.mTbl .tick{width:16px; text-align:center}
.mTbl.glance td:first-child{color:var(--pInk2); font-weight:600; width:86px} .mTbl.glance td{font-size:11px}
.mTbl.toc td{font-size:11px; padding:3px 4px} .mTbl.toc td:nth-child(2){color:var(--pAcc); font-weight:700; width:52px} .mTbl.toc td:last-child{text-align:right; color:var(--pInk2); width:30px}
.mTbl.log td{height:30px}
.mDraw{margin:0; border:1px solid var(--pLine); border-radius:6px; padding:4px; background:#fff; min-height:0}
.mDraw svg{display:block; width:100%; height:auto; max-height:var(--dh,none)}
.mDraw figcaption{font-size:9.5px; color:var(--pInk2); padding:2px 4px 0}
.mTwo{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mCoverGrid{display:grid; grid-template-columns:1.25fr 1fr; gap:9px; align-items:start}
.mCols{margin:0; font-size:10.5px; line-height:1.5; color:var(--pInk)}
.mWarn{margin:0; border:1.5px solid #E3170A; background:#FFF1EF; color:#8E0F06; border-radius:6px; padding:7px 10px; font-size:11px; line-height:1.4}
.mFine{margin:0 0 4px; font-size:9.8px; color:var(--pInk2); line-height:1.4}
.mSign{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:10.5px; border-top:1.5px dashed var(--pInk2); padding-top:7px; margin-top:auto; color:var(--pInk)}
.mSign span:first-child{font-weight:800; display:flex; gap:6px; align-items:center}
.mLines{display:flex; flex-direction:column} .mLines i{display:block; height:22px; border-bottom:1px solid var(--pLine)}
.mFoot{margin:auto -26px 0; padding:8px 26px 12px; border-top:1.5px solid var(--pInk); display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; background:var(--pSoft)}
.mSign + .mFoot{margin-top:6px}
.mDisc{font-size:8.6px; line-height:1.35; color:var(--pInk2)} .mDisc b{color:var(--pInk)}
.mMore{display:flex; gap:7px; align-items:center; font-size:8.6px; line-height:1.3; color:var(--pInk2)} .mMore svg{width:54px; height:54px} .mMore b{color:var(--pInk); font-weight:700}
.mNo{font:800 13px/1 "IBM Plex Mono",monospace; color:var(--pInk)}
.mPage.eng .mHead{border-bottom-color:#E3170A}
.pdfStage .mPage{box-shadow:none; margin:0 0 20px}
.mPage.dense{gap:6px; font-size:10.6px} .mPage.dense .mSteps{font-size:10px; line-height:1.3} .mPage.dense .mChecks,.mPage.dense .mHand li{font-size:9.6px} .mPage.dense .mTbl{font-size:9.6px} .mPage.dense .mTbl td{padding:1.5px 4px} .mPage.dense .mNums .n{padding:5px 8px} .mPage.dense .mNums .n b{font-size:16px} .mPage.dense .mBox{padding:5px 9px 6px}
.mPage.dense2{gap:5px; font-size:10px} .mPage.dense2 .mSteps{font-size:9.3px; line-height:1.26} .mPage.dense2 .mChecks,.mPage.dense2 .mHand li{font-size:9px} .mPage.dense2 .mHand small{font-size:8.3px} .mPage.dense2 .mTbl{font-size:9px} .mPage.dense2 .mTbl td{padding:1px 4px} .mPage.dense2 .mNums .n{padding:4px 7px} .mPage.dense2 .mNums .n b{font-size:15px} .mPage.dense2 .mBox{padding:4px 8px 5px} .mPage.dense2 .mTitle h1{font-size:20px}
.mBrand{display:flex; align-items:center; gap:6px} .mBrand svg{flex:0 0 auto}   /* 18k (Jared): full color — at 55% it printed washed out */
/* 17 Oct: the faint brand down the outside edge of every page (a rotated line, so html2canvas draws it too) */
.mEdge{position:absolute; top:0; right:0; width:16px; height:100%; overflow:hidden; pointer-events:none; z-index:2}
.mEdge span{position:absolute; left:16px; top:6px; width:1400px; transform-origin:0 0; transform:rotate(90deg); white-space:nowrap;
  font:700 7.6px/16px Figtree,Arial,sans-serif; letter-spacing:.32em; text-transform:uppercase; color:rgba(31,85,214,.2)}
.mTwo.wide{grid-template-columns:1fr 1fr; align-items:stretch}
.mTwo.stair{grid-template-columns:1fr 1.5fr; align-items:stretch} .mTwo.stair .mDraw:first-child{display:flex; flex-direction:column; justify-content:center}
.mTwo.post{grid-template-columns:2.1fr 1fr; align-items:stretch} .mTwo.post .mDraw:last-child{display:flex; flex-direction:column; justify-content:center}
/* the front page */
.mPage.front{padding-top:0; gap:11px}
.fBand{margin:0 -26px; padding:18px 26px 16px; display:flex; align-items:center; gap:12px; color:#fff;
  background:linear-gradient(120deg,#0B1630 0%,#132A6B 58%,#1F55D6 100%)}
.fBand svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.fWord{display:flex; flex-direction:column; line-height:1} .fWord b{font:800 23px/1 Figtree,sans-serif; letter-spacing:-.01em}
.fWord span{margin-top:4px; font:800 10.5px/1 Figtree,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:#9FBEFF}
.fKind{margin-left:auto; text-align:right; font:800 13px/1.1 Figtree,sans-serif; letter-spacing:.22em; text-transform:uppercase}
.fKind small{display:block; margin-top:5px; font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.04em; text-transform:none; color:#C9D8FF}
.fTitle h1{margin:4px 0 2px; font:800 34px/1.05 Figtree,sans-serif; letter-spacing:-.02em; color:var(--pInk)}
.fTitle p{margin:0; font-size:12.5px; color:var(--pInk2)} .fTitle p b{color:var(--pInk)}
.fHero{position:relative; height:372px; border-radius:12px; overflow:hidden; border:1px solid var(--pLine);
  background:radial-gradient(120% 90% at 50% 0%,#F3F7FF 0%,#E3ECFB 70%,#D5E1F7 100%); display:grid; place-items:center}
.fHero img{width:100%; height:100%; object-fit:cover; display:block} .fHero svg{width:94%; height:auto; max-height:300px}
.fTag{position:absolute; left:12px; bottom:12px; background:rgba(11,22,48,.82); color:#fff; font:700 10px/1 Figtree,sans-serif; letter-spacing:.06em; padding:7px 10px; border-radius:20px}
.fRow{display:grid; grid-template-columns:1.05fr 1.6fr; gap:10px; align-items:stretch}
.fTool{margin:0; border:1px solid var(--pLine); border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column}
.fChrome{display:flex; align-items:center; gap:4px; padding:5px 8px; background:#EEF2F8; border-bottom:1px solid var(--pLine)}
.fChrome i{width:7px; height:7px; border-radius:50%; background:#C9D3E6} .fChrome i:first-child{background:#F2857E} .fChrome i:nth-child(2){background:#F5C451} .fChrome i:nth-child(3){background:#6CCB7E}
.fChrome span{margin-left:6px; font:600 8.5px/1 "IBM Plex Mono",monospace; color:var(--pInk2)}
.fTool img{display:block; width:100%; height:164px; object-fit:cover; object-position:30% 50%}
.fTool figcaption{padding:6px 9px 8px; font-size:9.6px; line-height:1.35; color:var(--pInk2)} .fTool figcaption b{color:var(--pInk)}
.fPics{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.fPics figure{margin:0; position:relative; border-radius:8px; overflow:hidden; height:112px; background:var(--pSoft)}
.fPics img{width:100%; height:100%; object-fit:cover; display:block}
.fPics figcaption{position:absolute; left:0; right:0; bottom:0; padding:12px 7px 5px; font:700 9px/1.1 Figtree,sans-serif; color:#fff; background:linear-gradient(transparent,rgba(11,22,48,.78))}
.fInside{border:1.5px solid var(--pInk); border-radius:8px; padding:8px 11px 9px}
.fInside h2{margin:0 0 6px; font:800 9.6px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.fInside ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:4px 10px}
.fInside li{display:flex; gap:6px; align-items:center; font-size:10.6px; font-weight:600}
.fInside li b{flex:0 0 auto; width:17px; height:17px; border-radius:50%; background:var(--pAcc); color:#fff; display:grid; place-items:center; font:800 9px/1 Figtree,sans-serif}
.mSign .mLogQr{margin-left:auto; display:flex; align-items:center; gap:6px; font-weight:400} .mSign .mLogQr svg{width:60px; height:60px; flex:0 0 auto}
.mSign .mLogQr small{font-size:8.6px; line-height:1.25; color:var(--pInk2)} .mSign .mLogQr small b{display:block; color:var(--pInk); font-size:9px}
.mLogNote{display:flex; gap:9px; align-items:center; background:var(--pSoft); border:1px solid var(--pLine); border-radius:8px; padding:6px 9px; font-size:11px!important}
.mLogNote svg{width:56px; height:56px; flex:0 0 auto}
@page manualPg{size:letter portrait; margin:.25in}
@page manualLand{size:letter landscape; margin:.25in}
@media print{
  #printRoot .mPage{page:manualPg; box-shadow:none; page-break-after:always; break-after:page; transform:none !important}
  #printRoot .mPage.land{page:manualLand}
  #printRoot .mPage:last-child{page-break-after:auto; break-after:auto}
}
/* night 24: the reference pages — load schedule, elevations, cut list, the hard steps, the landscape takeoff */
.mPage.land{width:1008px; height:768px} .mPage.land .wm{overflow:hidden}
.mStep.ref{background:var(--pInk)}
.mPage .red{color:#D2324A}
.mTbl.loads td small,.mTbl.cuts td small{font-family:Figtree,Arial,sans-serif; color:var(--pInk2); font-size:9px}
.mTbl tr.over td{background:#FFF1EF; color:#8E0F06} .mTbl tr.over td:first-child{box-shadow:inset 3px 0 0 #D2324A}
.mTbl tr.odd td{background:#FFF8E6}
.mTbl tfoot td{border-top:1.5px solid var(--pInk); border-bottom:none; padding-top:3px}
.mTbl.loads td:nth-child(n+3):not(:nth-child(7)){text-align:right} .mTbl.loads th:nth-child(n+3):not(:nth-child(7)){text-align:right}
.mTbl.loads td:nth-child(n+3){font-family:"IBM Plex Mono",monospace; font-size:10px}
.mTbl.cuts{table-layout:fixed} .mTbl.cuts th:nth-child(1){width:34px} .mTbl.cuts th:nth-child(2){width:36%} .mTbl.cuts th:nth-child(3){width:21%}
.mTbl.cuts td:first-child{text-align:right; font-family:"IBM Plex Mono",monospace; white-space:normal} .mTbl.cuts td:nth-child(3){font-family:"IBM Plex Mono",monospace; font-size:10px}
.mTbl.cuts + .mTbl.cuts,.mTbl.cuts + .mStrCut,.mStrCut + .mTbl.cuts{margin-top:7px}
.mTbl.cuts.corners th:nth-child(1){width:54px} .mTbl.cuts.corners th:nth-child(2){width:14%} .mTbl.cuts.corners th:nth-child(3){width:52%}
.mFineList{margin:0; padding-left:15px; font-size:9.8px; line-height:1.4; color:var(--pInk2)} .mFineList b{color:var(--pInk)}
.mStrCut{display:grid; grid-template-columns:300px 1fr; gap:8px; align-items:start; border:1px solid var(--pLine); border-radius:6px; padding:5px; margin:6px 0}
.mStrCut h3,.mDetTx h3,.mTkG h3{margin:0 0 4px; font:800 11px/1.2 Figtree,sans-serif; color:var(--pInk)}
.mStrCut .mTbl.glance td:first-child{width:72px}
.mDets{display:grid; gap:8px}
.mDet{display:grid; grid-template-columns:260px 1fr; gap:10px; border:1.5px solid var(--pInk); border-radius:6px; padding:7px; align-items:start}
.mDetPic{border:1px solid var(--pLine); border-radius:5px; overflow:hidden; background:#F7F8FA; min-height:120px; display:grid; place-items:center}
.mDetPic img,.mDetPic svg{display:block; width:100%; height:auto; max-height:170px; object-fit:contain}
.mDetPic .noPic{font:600 10px/1.3 Figtree,sans-serif; color:var(--pInk2); padding:20px; text-align:center}
.mDetTx h3 b{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--pAcc); color:#fff; font-size:10.5px; margin-right:7px}
.mTk{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:start; min-height:0}
.mTkG{margin:0 0 8px; break-inside:avoid}
.mTkG h3{border-bottom:1.5px solid var(--pInk); padding-bottom:2px; font-size:10px; letter-spacing:.06em; text-transform:uppercase}
.mTbl.tk{font-size:9.6px} .mTbl.tk td{padding:1.5px 3px} .mTbl.tk td:nth-child(2){font-family:"IBM Plex Mono",monospace; text-align:right; width:30px; font-weight:700; color:var(--pAcc)}
.mTbl.tk td:nth-child(3){font-family:Figtree,Arial,sans-serif; font-size:9.6px} .mTbl.tk td small{display:block; color:var(--pInk2); font-size:8.4px; line-height:1.25}
.mTbl.tk td:nth-child(n+4){font-size:9px; text-align:right; white-space:nowrap}
.mPage.dense .mTbl.tk td:nth-child(3){font-size:9px} .mPage.dense .mTbl.tk td small{font-size:8px} .mPage.dense .mTkG{margin-bottom:5px}
.mPage.dense2 .mTbl.tk td:nth-child(3){font-size:8.4px} .mPage.dense2 .mTbl.tk td small{font-size:7.6px; line-height:1.15} .mPage.dense2 .mTbl.tk td{padding:1px 3px}
.mPage.dense .mTbl.cuts,.mPage.dense .mTbl.loads{font-size:9.4px} .mPage.dense2 .mTbl.cuts,.mPage.dense2 .mTbl.loads{font-size:8.8px}
.mPage.dense .mDet{padding:5px; gap:8px} .mPage.dense2 .mDet .mSteps{font-size:9.2px}

/* the plan set / build manual toggle above the viewer (17 Oct) */
.viewTabs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
/* 18 Oct (Jared): big picture buttons, so the two views read as things to click */
.viewTabs button{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; font:800 18px/1.2 Figtree,sans-serif; color:var(--ink); text-align:left; padding:16px 18px; border-radius:14px; border:2px solid var(--line-2); background:var(--card); cursor:pointer; position:relative; transition:border-color .15s, transform .15s, box-shadow .15s}
.viewTabs button svg{width:44px; height:44px; color:#2F6BFF; flex:none}
.viewTabs button small{display:block; font-weight:600; font-size:13.5px; color:var(--ink-3); margin-top:3px}
.viewTabs button .vtGo{font:700 13px/1 Figtree,sans-serif; color:#2F6BFF; padding:8px 12px; border-radius:99px; border:1.5px solid rgba(47,107,255,.45); white-space:nowrap}
.viewTabs button:hover{border-color:#6E9CFF; transform:translateY(-1px); box-shadow:0 6px 18px -10px rgba(47,107,255,.6)}
.viewTabs button.on{border-color:#2F6BFF; background:rgba(47,107,255,.14); box-shadow:inset 0 0 0 1px #2F6BFF; transform:none}
.viewTabs button.on .vtGo{background:#2F6BFF; color:#fff; border-color:#2F6BFF}
.viewTabs button em{position:absolute; top:-9px; right:14px; font:800 10px/1 Figtree,sans-serif; font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:#06281C; background:#12E29A; padding:3px 6px; border-radius:99px}
.viewTabs + .viewer{margin-top:8px}
.buyBox .manRow{display:grid; gap:6px; border-top:1px solid var(--line-2); padding-top:10px}
.buyBox .logRow{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin-top:2px}
.buyBox .logBtn{font:700 13.5px/1 Figtree,sans-serif; padding:9px 12px; border-radius:9px; border:1px solid var(--line-2); color:var(--ink); text-decoration:none; background:var(--card)}
.buyBox .logBtn:hover{border-color:var(--blue-lit, #6E9CFF)} .buyBox .logLine{font-size:12.5px; color:var(--ink-3)} .buyBox .logLine b{color:var(--ink)}
.buyBox .manRow > b{font:800 15px/1.2 Figtree,sans-serif} .buyBox .manRow > span{font-size:13px; color:var(--ink-3); line-height:1.45}
@media (max-width:560px){ .viewTabs{grid-template-columns:1fr} .viewTabs button{padding:12px 14px; font-size:16px} .viewTabs button svg{width:36px; height:36px} }
/* 18 Oct: the "Working on it" box while the PDFs are built and sent */
.workRow{display:flex; align-items:center; gap:12px; margin:10px 0 12px; padding:12px 14px; border-radius:12px; background:rgba(47,107,255,.10); border:1px solid rgba(47,107,255,.35); font-weight:700; color:var(--ink)}
.workRow .spin{flex:none; width:22px; height:22px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--blue); animation:iqSpin .8s linear infinite}
/* 18 Oct: Move on map —a grab hand over the deck, a closed hand while dragging */
#iqMap.deckGrab, #iqMap.deckGrab *{cursor:grab !important}
#iqMap.deckGrabbing, #iqMap.deckGrabbing *{cursor:grabbing !important}
/* 18 Oct: QR codes sit above the watermark; in the viewer a click shows one big enough to scan off the screen */
.mPage svg.qr, .sheet svg.qr{position:relative; z-index:4}
#iqSheetFit svg.qr{cursor:zoom-in}
.qrBig{display:grid; place-items:center; padding:12px; background:#fff; border-radius:12px; margin:8px auto; width:max-content}
.qrBig svg{width:min(280px,70vw); height:auto}
.qrLink{text-align:center; word-break:break-all}
.galleryMore summary{cursor:pointer; font-weight:700; color:var(--ink-2)}
.galleryMore .galleryContest{display:block; margin-top:4px}

/* 17 Oct (Jared): the three ways to start pulse until one is used; a deck with no map behind it folds the map away */
@keyframes iqPulse{0%{box-shadow:0 0 0 0 rgba(255,176,32,.8)} 70%{box-shadow:0 0 0 12px rgba(255,176,32,0)} 100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
.iqFresh #iqAddr{animation:iqPulse 2.4s ease-out infinite; border-color:#FFB020}
.iqFresh #iqMapMsg [data-act="lots"]{animation:iqPulse 2.4s ease-out .4s infinite}
.iqFresh #iqMapMsg [data-act="shapes"]{animation:iqPulse 2.4s ease-out .8s infinite}
.iqFresh #iqBoardTools [data-act="templates"]{animation:iqPulse 2.4s ease-out .8s infinite; outline:2px solid rgba(255,176,32,.85); outline-offset:1px}
#iqBoardTools [data-act="templates"].iqPoint{animation:iqPulse .8s ease-out 3}
#iqMapMsg [data-act="shapes"]{margin:0 2px}
@media (prefers-reduced-motion:reduce){ .iqFresh #iqAddr,.iqFresh #iqMapMsg [data-act],.iqFresh #iqBoardTools [data-act="templates"],#iqBoardTools [data-act="templates"].iqPoint{animation:none; outline:2px solid #FFB020; outline-offset:2px} }
.iqApp:not(.maxMap) .iqStage.noMap{grid-template-rows:1fr !important}
.iqApp:not(.maxMap) .iqStage.noMap > .iqMap{display:none}

/* 17 Oct (Jared): questions about the shape dock to the left with a light backdrop, so the board and its edge labels stay readable */
.iqBack.side{background:rgba(3,5,12,.22); place-items:center start; padding-left:max(16px,2vw)}
.iqBack.side .iqPop.side{width:min(520px,36vw); max-height:92vh; box-shadow:0 24px 70px rgba(0,0,0,.45)}
.iqPop.side [data-hov]:hover,.iqPop.side [data-hov]:focus-visible{border-color:#12E29A; box-shadow:0 0 0 2px rgba(18,226,154,.35)}
@media (max-width:1100px){ .iqBack.side{place-items:center; background:rgba(3,5,12,.5)} .iqBack.side .iqPop.side{width:min(540px,100%)} }
@keyframes iqEdgeLit{0%,100%{opacity:.95} 50%{opacity:.45}}
.iqBoard .edgeHov{stroke-width:9; animation:iqEdgeLit 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .iqBoard .edgeHov{animation:none} }

/* 20 Oct (Jared): bracing under the joists on the board — diagonal 2×6s dashed, midspan rows solid and draggable */
.iqBoard .frame .diagBrace{stroke:#7FD3FF; stroke-width:2.2; stroke-dasharray:7 5; stroke-linecap:round; opacity:.9}
.iqBoard .frame .midRow{stroke:#C08BFF; stroke-width:4; stroke-linecap:round}
.iqBoard .frame .midRow.bridge,.iqBoard .frame .midRow.xwood{stroke-dasharray:3 3}
.iqBoard .frame .midRow.sel{stroke:#12E29A}
.iqBoard .frame .midRow.blk{stroke-width:5; stroke-linecap:butt}
.iqBoard .frame .pfJoist{stroke:#C08BFF; stroke-width:2.4}
.iqBoard .frame .pfBlock{stroke:#C08BFF; stroke-width:4; stroke-linecap:butt}
.iqBoard .frame .pfBlock.pfCorner{stroke-width:5.5}
html[data-board="drafting"] .iqBoard .frame .pfJoist,html[data-board="drafting"] .iqBoard .frame .pfBlock{stroke:#7A3FD1}
html[data-board="drafting"] .iqBoard .frame .diagBrace{stroke:#1F7FBF}
html[data-board="drafting"] .iqBoard .frame .midRow{stroke:#7A3FD1}
.iqBoard .frameHits .rowHit{stroke:transparent; stroke-width:16; cursor:ns-resize; pointer-events:stroke}
@media print{ .iqBoard .frame .diagBrace{stroke:#000} .iqBoard .frame .midRow{stroke:#000} }
.dqRows{display:grid; gap:6px; margin-top:4px}
.dqRow{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; border:1.5px solid var(--line-2); background:var(--panel); border-radius:10px; padding:6px 10px; font-size:13.5px; color:var(--ink-2)}
.dqRow span{font:700 13.5px Figtree,sans-serif; color:var(--ink)}
.dqRow input{width:68px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:7px; color:var(--ink); font:600 13.5px/1 Figtree,sans-serif; padding:6px 7px; margin-right:4px}
.dqRow .x{border:0; background:transparent; color:var(--ink-3); font-size:16px; cursor:pointer; padding:6px}
.dqRow .x:hover{color:#FF5A6E}
/* the hover tip on a choice (segHtml's 4th item) */
.dqTip{position:fixed; z-index:200; max-width:300px; background:var(--panel); color:var(--ink); border:1.5px solid var(--line-2); border-radius:10px; padding:9px 11px;
  font:500 13px/1.45 Figtree,sans-serif; box-shadow:0 10px 28px rgba(0,0,0,.28); pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s}
.dqTip.on{opacity:1; transform:none}
html[data-mode="light"] .dqTip{background:#fff}
/* 20 Oct: a gazebo off the deck — its own floor and joists */
.iqBoard .extras.gazebo .gzFloor{fill:rgba(199,125,255,.10); stroke:none}
.iqBoard .extras.gazebo .gzJoist{stroke:rgba(255,255,255,.38); stroke-width:1.4}
html[data-board="drafting"] .iqBoard .extras.gazebo .gzJoist{stroke:rgba(15,23,42,.3)}
.iqBoard .extras.gazebo .stair{fill:rgba(77,163,255,.18); stroke:#4DA3FF; stroke-width:1.5}
/* 20 Oct (Jared): the Weather dials — a speedometer; all the way left is Auto */
.dqDials{display:grid; gap:4px}
.dqDial{display:grid; justify-items:center; gap:0; padding:6px 8px 10px; border:1.5px solid var(--line-2); border-radius:14px; background:var(--panel); cursor:pointer; touch-action:none; user-select:none; max-width:280px; margin:4px auto 0; width:100%}
.dqDial:focus-visible{outline:3px solid #4DA3FF; outline-offset:2px}
.dqDial svg{width:100%; height:auto; display:block}
.dqDial b{font:800 13px Figtree,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-top:-4px}
.dqDial .trk{fill:none; stroke:var(--line-2); stroke-width:10; stroke-linecap:round}
.dqDial .redz{fill:none; stroke:rgba(255,90,110,.45); stroke-width:10}
.dqDial .val{fill:none; stroke:#3B82F6; stroke-width:10; stroke-linecap:round}
.dqDial.red .val{stroke:#FF5A6E}
.dqDial .tk{stroke:var(--ink-3); stroke-width:1.4}
.dqDial .tk.auto{stroke:#12B886; stroke-width:2.4}
.dqDial .lb{fill:var(--ink-3); font:700 10.5px Figtree,sans-serif; text-anchor:middle}
.dqDial .lb.auto{fill:#0C9A6A}
.dqDial .ndl{stroke:var(--ink); stroke-width:3.2; stroke-linecap:round}
.dqDial .hub{fill:var(--ink)}
.dqDial .big{fill:var(--ink); font:800 24px Figtree,sans-serif; text-anchor:middle}
.dqDial.red .big{fill:#FF5A6E}
.dqDial .sm{fill:var(--ink-3); font:600 11px Figtree,sans-serif; text-anchor:middle}
html[data-mode="light"] .dqDial{background:#fff}
.dqDialNote{text-align:center; margin:2px 0 6px}
/* the Pro toggle at the top of Framing */
.dqSwitch{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; border:1.5px solid rgba(255,107,26,.55); background:rgba(255,107,26,.10); cursor:pointer; margin:2px 0 4px}
.dqSwitch input{position:absolute; opacity:0; width:1px; height:1px}
.dqSwitch i{width:46px; height:26px; border-radius:13px; background:var(--line-2); position:relative; transition:background .15s}
.dqSwitch i::after{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .15s}
.dqSwitch input:checked + i{background:#FF6B1A}
.dqSwitch input:checked + i::after{transform:translateX(20px)}
.dqSwitch input:focus-visible + i{outline:3px solid #4DA3FF; outline-offset:2px}
.dqSwitch span{font-size:14px; line-height:1.4; color:var(--ink-2)} .dqSwitch span b{color:var(--ink); font-size:15px}
.dqLoads{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px}
.dqLoads .iqSmall{min-height:32px; padding:6px 10px; font-size:13px}
/* the Heights section */
.dqHts{border:1.5px solid var(--line-2); border-radius:12px; background:var(--panel); padding:8px 12px; display:grid; gap:2px}
html[data-mode="light"] .dqHts{background:#fff}
.dqHtHead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding-bottom:6px; border-bottom:1px solid var(--line); margin-bottom:4px}
.dqHtHead b{font:800 15px Figtree,sans-serif; color:var(--ink)}
.dqHtHead .ht{display:flex; gap:5px; align-items:center; font-size:12.5px; color:var(--ink-3)}
.dqHtHead .ht input{width:50px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:7px; color:var(--ink); font:600 13.5px/1 Figtree,sans-serif; padding:5px 6px}
.dqHt{display:grid; grid-template-columns:1fr auto; column-gap:10px; padding:4px 0}
.dqHt span{color:var(--ink-2); font-size:13.5px} .dqHt b{font:700 14px "IBM Plex Mono",monospace; color:var(--ink); text-align:right}
.dqHt small{grid-column:1 / -1; color:var(--ink-3); font-size:12px}
.iqRail button.extra{opacity:.92}
/* 20 Oct (Jared): the Shape summary's buttons — one tidy grid, each its own color so they stand out from the card */
.dqActs{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.dqAct{display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 12px; border-radius:11px; border:1.5px solid; font:700 14px/1.15 Figtree,sans-serif; cursor:pointer; text-align:center; text-decoration:none}
.dqAct svg{width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.dqAct.done{border-color:rgba(18,226,154,.5); background:rgba(18,226,154,.12); color:var(--mint, #12E29A); cursor:default}
.dqAct.okBtn{grid-column:auto}
.dqAct.edges{border-color:rgba(77,163,255,.6); background:rgba(77,163,255,.14); color:#7FBFFF}
.dqAct.save{border-color:rgba(255,107,26,.65); background:rgba(255,107,26,.14); color:#FF9B5E}
.dqAct.buy{border-color:rgba(18,184,134,.6); background:rgba(18,184,134,.13); color:#3FD9A8}
.dqAct.plans{border-color:rgba(192,139,255,.6); background:rgba(192,139,255,.14); color:#D2B0FF}
.dqAct.buy,.dqAct.plans{grid-column:span 1}
.dqAct:hover:not(.done){filter:brightness(1.12)}
html[data-mode="light"] .dqAct.edges{color:#1D5FA8; background:#EAF3FF} html[data-mode="light"] .dqAct.save{color:#B54708; background:#FFF1E6}
html[data-mode="light"] .dqAct.buy{color:#0B7A57; background:#E7F8F1} html[data-mode="light"] .dqAct.plans{color:#6A2BB8; background:#F3EBFF}
html[data-mode="light"] .dqAct.done{color:#0C9A6A}
@media (max-width:420px){ .dqActs{grid-template-columns:1fr} }
/* the header's My saved decks button */
.iqSmall.iqMine i{font-style:normal; display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; margin-left:4px; border-radius:10px; background:#3B82F6; color:#fff; font:800 11.5px/1 Figtree,sans-serif}
/* + New design: the choice */
.dqNewPick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 10px}
.dqNewPick button{display:grid; gap:4px; text-align:left; padding:14px; border-radius:12px; border:1.5px solid var(--line-2); background:var(--panel-2); color:var(--ink); cursor:pointer}
.dqNewPick button:hover,.dqNewPick button:focus-visible{border-color:#3B82F6; background:rgba(59,130,246,.12)}
.dqNewPick b{font:800 16px Figtree,sans-serif} .dqNewPick small{color:var(--ink-3); font-size:13px; line-height:1.35}
@media (max-width:520px){ .dqNewPick{grid-template-columns:1fr} }
/* My saved decks: the list beside the drawing of the one you point at */
.dqMine{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:14px; align-items:start}
.dqMineList{display:grid; gap:6px; max-height:min(60vh, 460px); overflow:auto; padding-right:2px}
.dqMineRow{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px 12px; border:1.5px solid var(--line-2); border-radius:11px; background:var(--panel-2); cursor:pointer}
.dqMineRow b{display:block; font:700 14.5px/1.25 Figtree,sans-serif; color:var(--ink)} .dqMineRow small{display:block; color:var(--ink-3); font-size:12.5px; margin-top:2px}
.dqMineRow.hov,.dqMineRow:focus-visible{border-color:#3B82F6; background:rgba(59,130,246,.10); outline:none}
.dqMineRow.on em{font-style:normal; color:#12B886; font:700 12.5px Figtree,sans-serif}
.dqMineRow .iqSmall{min-height:34px; padding:7px 12px; text-decoration:none}
.dqMinePrev{border:1.5px solid var(--line-2); border-radius:12px; background:var(--panel); padding:10px; position:sticky; top:0}
.dqMinePrev svg{width:100%; height:auto; display:block}
.dqMinePrev .lv{fill:rgba(255,107,26,.18); stroke:#FF6B1A; stroke-width:2} .dqMinePrev .lv.up{fill:rgba(77,163,255,.2); stroke:#4DA3FF}
.dqMinePrev .hs{stroke:#E39A00; stroke-width:5; stroke-linecap:round; opacity:.7}
.dqMineFacts{display:grid; gap:3px; font-size:13.5px; color:var(--ink-2)} .dqMineFacts b{color:var(--ink)} .dqMineFacts span{color:var(--ink-3); font-size:12.5px}
@media (max-width:640px){ .dqMine{grid-template-columns:1fr} .dqMinePrev{position:static; order:-1} }
.dqMineFacts p{margin:4px 0 0; font-size:14px}
.dqNewPick .keep{grid-column:1 / -1}
.dqNewPick .keep{grid-column:1 / -1}
/* 20 Oct (b): the address's own number on a dial; the engineer note under it */
.dqDial .here{stroke:#12B886; fill:#12B886; stroke-width:2.4}
.dqDial .dqHere{color:#0C9A6A; font:700 12px Figtree,sans-serif; margin-top:2px}
.dqRedNote{max-width:280px; margin:6px auto 0; text-align:center}
/* 20 Oct (Jared): the DeckIQ agreement, before anything else */
.dqTermsBack{position:fixed; inset:0; z-index:400; background:rgba(5,9,20,.72); display:grid; place-items:center; padding:16px}
.dqTerms{width:min(720px,100%); max-height:calc(100vh - 32px); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; gap:12px; background:#fff; color:#0B1222; border-radius:16px; padding:20px 22px; box-shadow:0 30px 80px rgba(0,0,0,.5); font-family:Figtree,sans-serif}
html[data-mode="dark"] .dqTerms{background:#0F1729; color:#EDF2FF}
.dqTerms h3{margin:0; font:800 21px/1.2 Figtree,sans-serif}
.dqTermsSum{margin:0; padding-left:18px; display:grid; gap:4px; font-size:14.5px; line-height:1.4}
.dqTermsBody{overflow:auto; border:1px solid rgba(120,140,180,.45); border-radius:10px; padding:4px 14px 10px; font-size:13.5px; line-height:1.5; min-height:120px}
.dqTermsBody h4{margin:12px 0 4px; font:800 13px Figtree,sans-serif; letter-spacing:.04em; text-transform:uppercase}
.dqTermsBody p{margin:0 0 6px}
.dqTermsOk{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; font-size:14.5px; font-weight:600; cursor:pointer}
.dqTermsOk input{width:20px; height:20px; margin-top:1px; accent-color:#2F6BFF}
.dqTerms .btnRow{display:flex; gap:10px; align-items:center}
.dqTerms .pri{background:#2F6BFF; color:#fff; border:0; border-radius:10px; padding:12px 18px; font:800 15px Figtree,sans-serif; cursor:pointer}
.dqTerms .pri:disabled{opacity:.45; cursor:not-allowed}
.dqTerms a.iqSmall{text-decoration:none}
/* 20 Oct (Jared): the Code button; builder's notes folded; Build like a Pro */
.codeBtn{display:inline-flex; align-items:center; gap:4px; border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink-2); font:800 11px/1 "IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; padding:4px 7px; border-radius:6px; cursor:pointer; vertical-align:middle}
.codeBtn::before{content:"§"; font-weight:800}
.codeBtn:hover{border-color:#3B82F6; color:#3B82F6}
.dqNotes{margin-top:6px} .dqNotes summary{cursor:pointer; font:700 13.5px Figtree,sans-serif; color:var(--ink-2); padding:6px 0}
.dqSwitch span{display:grid; gap:2px} .dqSwitch .dqProBig{font:800 19px/1.15 Figtree,sans-serif; color:var(--ink)} .dqSwitch small{font-size:13.5px; color:var(--ink-2)}
.dqCodeLine{margin:4px 0 0; text-align:center}
/* 20 Oct (Jared, standing rule): blue notes fold into a small round (i) where they stood */
.iqPanel .dqNoteHid{display:none !important}
.iqPanel .dqNoteBtn{display:inline-grid; margin:2px 0; justify-self:start; align-self:start}
.dqNotePop .flag, .dqNotePop .note{margin:0 0 8px; display:block}
/* 21r: phone/tablet, a design open with no map: no empty-map placeholder */
.iqStage.dqPhNoMap{display:none}
/* 21s (Jared): phone. New design, Saved and Report are one row of three, an icon and a word each */
@media (max-width:1000px){
  .iqProg .iqProgBtns{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); justify-self:stretch; gap:6px}
  .iqProg .iqProgBtns .iqSmall{justify-self:stretch; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 6px; white-space:nowrap; min-width:0}
  .iqProg .iqProgBtns svg{width:16px; height:16px; flex:none}
  .iqProg .iqProgBtns i{font-style:normal}
  /* before there is a deck: no step chips or 0% bar, just the buttons */
  .iqStick.dqPre .iqSteps, .iqStick.dqPre .iqProg > .bar, .iqStick.dqPre .iqProg > span:not(.iqProgBtns){display:none}
  /* the start card: shapes three across, no notes under them */
  .dqStart .dims{margin:8px 0 10px; gap:8px}
  .dqStart .dims .fld{padding:8px 10px}
  .dqStart .dims .fld label{font-size:11px}
  .iqTplMenu.dqTpl3{position:static; box-shadow:none; padding:0; border:0; background:transparent; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  .iqTplMenu.dqTpl3 button{padding:6px 4px}
  .iqTplMenu.dqTpl3 svg{width:100%; max-width:72px; height:44px}
  .iqTplMenu.dqTpl3 b{font-size:12px}
}
/* 21t (Jared): iPhone Safari zooms into any box typed in under 16px and stays zoomed; 16px stops it */
@media (max-width:1000px){ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{font-size:16px !important} }
/* 21t: four choices in a row don't fit a phone ("Automatic" spilled out of its tile): two by two */
@media (max-width:560px){ .seg.cols4{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 21t: the chip of the step on screen gets a blue ring (it also slides to the middle of the strip) */
.iqSteps button.on{box-shadow:0 0 0 2px #3B82F6}
/* 21v (Jared): the 3D view gets the same full-window button as the board, over its top-right corner */
.iq3d .stageWrap{position:relative; min-height:0; display:grid; grid-template-rows:minmax(0,1fr); grid-row:2; grid-column:1}   /* 21x: in the picture's row, under the edge chips (21v left it in a row of its own: a squeezed picture) */
.iq3d .stageWrap > .stage{min-height:0; grid-row:1}   /* its own one row inside the wrapper */
/* 21w (Jared): the button sits in the 3D bar's top-right corner, beside its ✕ (it floated over the picture) */
.iq3d .bar .iq3dMax{position:static; margin-left:auto; flex:none; width:32px; height:32px}
.iq3d .bar .iq3dMax + .x{margin-left:0}
.iqApp.max3d .iq3d .bar .iq3dMax{width:40px; height:40px}
.iq3d:not(.pane) .iq3dMax{display:none}   /* the old overlay 3D already fills the window */
/* the 3D view's own + and − (the board has them), bottom right of the picture */
.iq3d .iq3dZoom{right:12px; bottom:12px}
/* 21v: the walkway from the deck to a gazebo, on the board */
.iqBoard .extras.gazebo .gzWalk{fill:rgba(200,160,106,.35); stroke:#B08850; stroke-width:1.5}
/* 21x: the full-window board's step list marks the step whose card is open below it */
.iqDock .dSteps button.on{box-shadow:0 0 0 2px #3B82F6}
/* 21y (Jared): Boards run — a picture of each choice on hover: the house wall, the joists, the boards over them */
.seg[data-seg="fr_boards"]{position:relative}
.dqRunPic{display:none; position:absolute; z-index:60; left:50%; top:calc(100% + 8px); transform:translateX(-50%); width:220px; padding:8px 8px 6px; background:var(--card); border:1.5px solid var(--line-2); border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.25); pointer-events:none; text-align:center}
.seg[data-seg="fr_boards"] button:hover .dqRunPic, .seg[data-seg="fr_boards"] button:focus-visible .dqRunPic{display:block}
.dqRunPic svg{display:block; width:100%; height:auto}
.dqRunPic small{display:block; margin-top:4px; font:600 12px/1.3 Figtree,sans-serif; color:var(--ink-2); opacity:1}
.dqRunPic .hw{fill:#B9BFC9} .dqRunPic text{font:800 10px Figtree,sans-serif; fill:#3C4350; letter-spacing:.08em}
.dqRunPic .jst line{stroke:#5C3D1E; stroke-width:2.5; stroke-dasharray:6 4} .dqRunPic .jst .bm{stroke:#3B2410; stroke-width:6; stroke-dasharray:none}   /* under the boards: drawn dashed over them */
.dqRunPic .bds line{stroke:#E2B27A; stroke-width:6.5} .dqRunPic .edge{fill:none; stroke:#2F6BFF; stroke-width:2}
@media (hover:none){ .dqRunPic{display:none !important} }
/* 21y (Jared): the full-window 3D view gets the side panel too (steps in progress colors, the bar, the step's card) */
.iqApp.max3d .iq3d .iqDock{display:block; position:absolute; top:14px; right:14px; bottom:14px; width:min(380px, 40vw); overflow:auto; z-index:45; background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:12px 14px; box-shadow:0 14px 40px rgba(0,0,0,.35)}
.iqApp.max3d .iq3d .iqDock[hidden]{display:none}
.iqApp.max3d .iq3dZoom{right:calc(min(380px, 40vw) + 32px)}   /* clear of the panel */
/* 22c: the panel folds to a tab; the connections list sits on the left in full window, clear of the panel */
.dqDockTab{display:none}
.iqApp.max3d .dqDockTab,.iqApp.maxBoard .dqDockTab{display:grid; place-items:center; position:absolute; z-index:46; top:30px; right:calc(min(380px, 40vw) + 14px); min-width:28px; height:44px; padding:0 8px;
  border:1px solid var(--line-2); border-right:0; border-radius:10px 0 0 10px; background:var(--card); color:var(--ink); font:800 15px/1 Figtree,sans-serif; cursor:pointer; box-shadow:-6px 6px 18px rgba(0,0,0,.18)}
.iqApp.maxBoard .dqDockTab{top:80px}
.dqDockTab[hidden]{display:none !important}
html.iqDockMin .iqApp .iqDock{display:none !important}
html.iqDockMin .iqApp.max3d .dqDockTab,html.iqDockMin .iqApp.maxBoard .dqDockTab{right:14px; border-right:1px solid var(--line-2); border-radius:10px; font-size:13.5px}
html.iqDockMin .iqApp.max3d .iq3dZoom{right:14px}
.iq3d .dqConn{right:auto; left:10px}   /* 28 Oct (Jared): on the left under the stamp (placeConn() sets its top), clear of the zoom and Move */
.iqApp.max3d .dqConn{right:auto; left:14px; top:14px; bottom:14px}
.iq3dZoom .mv{display:grid; place-items:center}
.iq3dZoom .mv[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
/* the step that wants you next, amber like the step chips */
.iqDock .dSteps button.now{background:rgba(255,176,32,.16); border-color:#FFB020; color:var(--ink)}

/* 22a: the framing and connectors view — layout A (Jared, 21 Oct): a side list with picture tiles, a hover card, a close-up */
.iq3d .stageWrap{position:relative}
.iq3d .views button.dqFrameBtn{opacity:1; text-decoration:none}
.iq3d .views button.dqFrameOn,html[data-mode] .iq3d .views button.dqFrameOn{background:var(--blue); border-color:var(--blue); color:#fff}
.dqConn{position:absolute; top:10px; right:10px; bottom:10px; width:300px; max-width:calc(100% - 20px); overflow:auto; z-index:4; background:var(--panel); color:var(--ink);
  border:1.5px solid var(--line-2); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); font-family:Figtree,sans-serif}
.dqConn h4{margin:0; padding:12px 10px 6px 14px; font:800 15px/1.2 Outfit,sans-serif; display:flex; align-items:baseline}
.dqConn h4 .x{all:unset; cursor:pointer; margin-left:8px; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font:700 18px/1 Figtree,sans-serif; color:#fff; background:var(--blue); box-shadow:0 2px 6px rgba(47,107,255,.35); align-self:center}   /* 25 Oct (Jared): a button, not text */
.dqConn h4 .x:hover{background:#1741C4; color:#fff}
.dqConn h4 small{margin-left:auto; font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-3)}
.dqConn ul{list-style:none; margin:0; padding:0 8px 10px}
.dqConn li.grp{padding:10px 6px 3px; font:700 10.5px/1 Figtree,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.dqConn li button{all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; padding:5px 6px; border-radius:10px; cursor:pointer; border:1.5px solid transparent}
.dqConn li button:hover{background:var(--panel-2)}
.dqConn li button.on{border-color:#FF7A1A; background:rgba(255,122,26,.10)}
.dqConn li img{width:60px; height:44px; border-radius:7px; background:var(--panel-2); flex:none; object-fit:cover}
.dqConn .nm{flex:1; min-width:0}
.dqConn .nm b{display:block; font-size:13.5px; line-height:1.2}
.dqConn .nm span{display:block; font:600 11px/1.3 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dqConn .ct{font:700 14px/1 "IBM Plex Mono",ui-monospace,monospace}
.dqCuHead{display:flex; align-items:center; gap:8px; padding:10px 10px 6px}
.dqCuHead .x{width:30px; height:30px; border-radius:8px; border:0; background:var(--blue); color:#fff; font:700 17px/1 Figtree,sans-serif; cursor:pointer; flex:none; box-shadow:0 2px 6px rgba(47,107,255,.35)} .dqCuHead .x:hover{background:#1741C4}
.dqCuHead .t{flex:1; min-width:0}
.dqCuHead .t b{display:block; font-size:14.5px}
.dqCuHead .t span{font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace; color:#E8620E}
.dqCuHead .step{display:flex; align-items:center; gap:4px; font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-3); white-space:nowrap}
.dqCuHead .step button{width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); cursor:pointer}
.dqCuView{position:relative; height:230px; margin:0 10px; border-radius:10px; overflow:hidden; background:var(--panel-2)}
.dqCuCanvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
.dqCuDims{position:absolute; inset:0; pointer-events:none}
.dqCuDims span{position:absolute; transform:translate(-50%,-50%); background:var(--panel); color:var(--ink); border:1px solid var(--line-2); border-radius:6px; padding:1px 6px; font:600 11px/1.4 "IBM Plex Mono",ui-monospace,monospace; white-space:nowrap}
.dqXray{position:absolute; left:8px; bottom:8px; z-index:1; border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:8px; padding:4px 9px; font:700 12px/1 Figtree,sans-serif; cursor:pointer}
.dqXray.on{background:var(--blue); border-color:var(--blue); color:#fff}
.dqCuBig{position:absolute; right:8px; top:8px; z-index:1; width:30px; height:30px; border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:8px; font:700 16px/1 Figtree,sans-serif; cursor:pointer}
/* 25 Oct: the close-up big — the card widens over the 3D and the view takes most of its height */
.dqConn.big{width:min(820px, calc(100% - 20px))}
.dqConn.big .dqCuView{height:max(300px, min(66vh, calc(100% - 190px)))}
.dqTurn{position:absolute; right:8px; bottom:8px; font-size:11px; color:var(--ink-3); background:var(--panel); border-radius:6px; padding:2px 6px; pointer-events:none}
.dqSpecs{padding:8px 12px 0; font-size:13px; line-height:1.4}
.dqSpecs p{margin:0 0 6px}
.dqSpecs p.bad{color:#E8132B; font-weight:700}
.dqCuFoot{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:2px 12px 12px}
.dqCuFoot .codeBtn{border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:8px; padding:4px 10px; font:700 12px/1 Figtree,sans-serif; cursor:pointer}
.dqCode{font-size:12px; color:var(--ink-3); line-height:1.4}
.dqHover{position:absolute; pointer-events:none; z-index:5; background:var(--panel); color:var(--ink); border:1.5px solid var(--line-2); border-left:4px solid #FF7A1A; border-radius:10px; padding:7px 10px; max-width:250px; box-shadow:0 8px 20px rgba(0,0,0,.25); font-family:Figtree,sans-serif}
.dqHover b{display:block; font-size:13.5px}
.dqHover .m{display:block; font:600 11.5px/1.3 "IBM Plex Mono",ui-monospace,monospace; color:#E8620E}
.dqHover .f{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}

/* 22b: the catalog drawer (layout B, Jared 22 Oct): a line in the card opens it over the 2D board or the left of the 3D */
.dqCatRow{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; margin:0 0 6px; padding:10px 12px; border:1.5px solid var(--blue);
  border-radius:12px; cursor:pointer; background:rgba(37,99,235,.06); font-family:Figtree,sans-serif; color:var(--ink)}
.dqCatRow b{font-size:14px} .dqCatRow .s{font-size:13px; color:var(--ink-3); flex:1} .dqCatRow .go{font:700 13px Figtree,sans-serif; color:var(--blue); margin-left:auto}
.dqCatRow:hover{background:rgba(37,99,235,.12)}
.dqCat{position:fixed; z-index:180; display:grid; grid-template-columns:150px 1fr; overflow:hidden; background:var(--panel); color:var(--ink); font-family:Figtree,sans-serif;
  border:1.5px solid var(--line-2); border-radius:16px; box-shadow:0 18px 48px rgba(0,0,0,.28)}
.dqCat[hidden]{display:none}
.dqCatSide{display:flex; flex-direction:column; gap:6px; padding:12px 10px; border-right:1.5px solid var(--line); background:var(--panel-2); overflow:auto}
.dqCatSide > b{font:800 15px Outfit,sans-serif; margin:2px 4px 8px}
.dqCatSide button{all:unset; box-sizing:border-box; padding:10px; border-radius:10px; border:1.5px solid var(--line); background:var(--panel); font:700 14px Figtree,sans-serif; cursor:pointer}
.dqCatSide button.on{border-color:var(--blue); background:rgba(37,99,235,.08)}
.dqCatMain{padding:14px; overflow:auto}
.dqCatHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.dqCatHead b{font:800 18px Outfit,sans-serif}
.dqCatHead .done{border:0; border-radius:999px; background:var(--blue); color:#fff; padding:8px 16px; font:700 13px Figtree,sans-serif; cursor:pointer}
.dqCat .picks.pics{grid-template-columns:repeat(auto-fill, minmax(104px, 1fr))}
.dqCat .picks.pics.lights{grid-template-columns:repeat(auto-fill, minmax(96px, 1fr))}
.dqCat .picks.pics button small{font-size:11.5px}
.dqCat h4{margin:14px 0 6px}
.dqCatFx{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 6px}
.dqCatFx span{border-radius:999px; padding:5px 10px; font:600 12.5px Figtree,sans-serif; border:1.5px solid var(--line-2); background:var(--panel-2)}
.dqCatFx span.warn{border-color:#B97600; color:#B97600}
.dqCatTm{margin:8px 0 0; font-size:11.5px; color:var(--ink-3)}
.dqCat.phone{inset:0; border-radius:0; grid-template-columns:1fr; grid-template-rows:auto 1fr}
.dqCat.phone .dqCatSide{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1.5px solid var(--line)}
.dqCat.phone .dqCatSide > b{width:100%; margin-bottom:2px}
.dqCat.phone .dqCatSide button{padding:8px 12px}

/* 22d: railing styles under the type; the rail drawer holds only the lights */
.q h5.dqSub{margin:10px 0 6px; font:700 13px/1.2 Figtree,sans-serif; color:var(--ink)}
.dqCat.lightsOnly{grid-template-columns:1fr}

/* 22e (Jared): × folds the connections list to a tab; a pointing hand over a connector */
.dqConn.min{bottom:auto; width:auto; overflow:visible; background:none; border:0; box-shadow:none}
.dqConnTab{all:unset; box-sizing:border-box; padding:10px 14px; border-radius:10px; background:var(--card); color:var(--ink); border:1px solid var(--line-2); font:800 13.5px/1 Figtree,sans-serif; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.iq3d .stage.dqHot canvas{cursor:pointer}

/* 22e (Jared): drag the deck in 3D: lengths on the pieces, the corner menu, the pointer over a handle */
.dqDims{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden}
.dqDims .dim{position:absolute; transform:translate(-50%,-50%); font:600 12.5px/1 "IBM Plex Mono",ui-monospace,monospace; color:#fff; white-space:nowrap; padding:4px 7px; border-radius:7px; background:rgba(15,23,42,.62)}
.dqDims .dim.house{opacity:.85; font-size:12px}
.dqDims .dim.hot{background:#FF7A1A; box-shadow:0 3px 10px rgba(0,0,0,.35); font-size:13.5px}
.dqDims .dim.ang{font-size:11.5px; background:rgba(15,23,42,.8)}
.dqDims .dim.ang.sq,.dqDims .dim.snap{background:#16a34a; font-size:11.5px}
.dqDims .dim.hgt{transform:translate(0,-50%); background:#0f172a}
.dqDims .dim.hgt.hot{background:#FF7A1A}
.iq3d .stage.dqGrab canvas{cursor:move}
.iq3d .stage.dqLift canvas{cursor:ns-resize}
.dqCornerMenu{position:absolute; z-index:5; transform:translate(-50%, calc(-100% - 18px)); background:var(--panel); color:var(--ink); border:1.5px solid var(--line-2); border-radius:14px; padding:8px; box-shadow:0 10px 26px rgba(0,0,0,.3); display:flex; gap:6px; align-items:stretch}
.dqCornerMenu[hidden]{display:none}
.dqCornerMenu .pic{all:unset; box-sizing:border-box; cursor:pointer; width:62px; border-radius:10px; border:1.5px solid var(--line-2); padding:5px 4px 4px; text-align:center; font:700 11px/1.1 Figtree,sans-serif; color:var(--ink)}
.dqCornerMenu .pic:hover{border-color:var(--blue)}
.dqCornerMenu .pic.on{border-color:#FF7A1A; background:rgba(255,122,26,.10)}
.dqCornerMenu .pic svg{display:block; width:46px; height:46px; margin:0 auto 3px}
.dqCornerMenu .x{all:unset; cursor:pointer; align-self:flex-start; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; font-size:17px; color:var(--ink-3)}
/* 22g: the beam-row layout tiles on the Framing card, one line each */
.dqRowTiles{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px}
.dqRowTile{font:inherit; font-size:13px; padding:7px 10px; border-radius:10px; border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); cursor:pointer; text-align:left}
.dqRowTile.on{border-color:#FF6B1A; background:rgba(255,107,26,.12); font-weight:700}
.dqRowTile.no{opacity:.6}
.dqSwitch.dqEng{border-color:var(--line-2); background:transparent; padding:8px 12px}

/* 22h (Jared): a click on a piece of lumber in the framing view: its size and length */
.dqMember{pointer-events:none; border-color:#FF7A1A}
.dqMember[hidden]{display:none}

/* 22i (Jared): Undo, Redo and Back to before 3D in the 3D bar */
.iq3d .views .dqUndo3d{display:inline-flex; gap:4px; margin-left:6px; padding-left:8px; border-left:1px solid var(--line-2)}
.iq3d .views .dqUndo3d button[data-3d="undo"],.iq3d .views .dqUndo3d button[data-3d="redo"]{min-width:34px; font-size:15px}

/* 22k (Jared): the deck's total, in the header between the progress bar and the address, and in the full-window 3D bar */
.dqTotal{position:relative; display:flex; flex-direction:row; align-items:center; gap:8px; flex:none}   /* the switch beside it: the slim header stays 64 px */
.dqTotal[hidden]{display:none}
.dqTotBox{display:grid; justify-items:center; gap:1px; border:1.5px solid #12B886; background:rgba(18,226,154,.10); border-radius:10px; padding:3px 12px; cursor:default; font:inherit; color:inherit}
.dqTotV{font:800 19px/1.1 Figtree,sans-serif; color:#12E29A}
.dqTotS{font:600 11.5px/1.2 Figtree,sans-serif; color:var(--ink-2); white-space:nowrap}
html[data-mode="light"] .dqTotBox{background:#E9FBF3; border-color:#0B8A5E}
html[data-mode="light"] .dqTotV{color:#087A52}
.dqTotSw{display:inline-flex; flex-direction:column; border:1px solid var(--line-2); border-radius:9px; overflow:hidden}
.dqTotSw button{font:600 11px/1 Figtree,sans-serif; padding:3px 9px; background:none; border:0; color:var(--ink-2); cursor:pointer}
.dqTotSw button[aria-pressed="true"]{background:#0B8A5E; color:#fff}
.dqTotPop{display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:60; width:300px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; padding:10px 12px; box-shadow:0 10px 28px rgba(0,0,0,.25); text-align:left}
.dqTotal:hover .dqTotPop,.dqTotal.open .dqTotPop,.dqTotal:has(input:focus) .dqTotPop{display:block}
.dqTotPop table{width:100%; border-collapse:collapse; font:500 12.5px/1.35 Figtree,sans-serif; color:var(--ink)}
.dqTotPop td{padding:2px 0}
.dqTotPop td:last-child{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.dqTotPop tr.ln td{border-top:1px solid var(--line-2); padding-top:4px; font-weight:700}
.dqTotPop tr.g td{color:#12B886; font-weight:800}
html[data-mode="light"] .dqTotPop tr.g td{color:#087A52}
.dqTotPop tr.dqTotRow td{padding:0 0 3px}
.dqTotPop tr.dqTotRow i{display:block; height:5px; border-radius:3px; background:#12B886; opacity:.75}
.dqTotPop .dqTotPro{margin-bottom:8px}
.dqTotPop input{width:42px; padding:2px 4px; font:600 12px/1.2 Figtree,sans-serif; border:1px solid var(--line-2); border-radius:6px; background:var(--panel-2, transparent); color:var(--ink); text-align:right}
.dqTotH{font:700 11px/1.3 Figtree,sans-serif; color:var(--ink-2); margin:0 0 4px; text-transform:none}
.iq3d .bar .dqTot3d{display:none; flex-direction:row; gap:8px; margin-left:auto}
.max3d .iq3d .bar .dqTot3d:not([hidden]){display:flex}
.max3d .iq3d .bar .dqTot3d + .iq3dMax{margin-left:0}
.dqTot3d .dqTotBox{padding:2px 10px}
.dqTot3d .dqTotV{font-size:17px}
.dqTot3d .dqTotPop{left:auto; right:0; transform:none}
@media (max-width:700px){ .iqHead .dqTotal{order:3} }

/* 23a (overnight item 16): a rounded corner's radius − / +, in the corner menu; the beam labels in the Framing view */
.dqCornerMenu .rad{align-self:center; padding:0 6px; font:700 13px/1.2 Figtree,sans-serif; color:var(--ink); white-space:nowrap}
.dqCornerMenu .pm{width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line-2); background:var(--panel-2); color:var(--ink); font:800 18px/1 Figtree,sans-serif; cursor:pointer}
.dqCornerMenu .pm:disabled{opacity:.4; cursor:default}
.dqDims .dim.beam{background:#2E6B3A; color:#fff}
/* 23a (overnight item 17): the crew $/hour line; whichever crew line isn't used is dimmed; hours by each part */
.dqTotPro tr.off td{opacity:.45}
/* 30 Oct: the estimate's sales tax (materials or the whole job) and deposit */
.dqTotSet .dqTaxOn{display:inline-flex; border:1px solid var(--line-2); border-radius:7px; overflow:hidden; vertical-align:middle}
.dqTotSet .dqTaxOn button{border:0; background:none; color:var(--ink-2); font:600 11.5px/1 Figtree,sans-serif; padding:4px 7px; cursor:pointer}
.dqTotSet .dqTaxOn button[aria-pressed="true"]{background:var(--blue, #2563eb); color:#fff}
.dqTotSet{font-size:12px; color:var(--ink-2); line-height:1.8; margin:-2px 0 8px; padding-top:6px; border-top:1px solid var(--line-2)}
.dqTotPop small.dqHrs{font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-3); margin-left:4px}
/* 23a (overnight item 19): the plan set's Connections sheet — a close-up beside each connection type */
.sheet .pTable.conn td{vertical-align:middle}
.sheet .pTable.conn .cuPic{width:96px; padding:3px 6px 3px 0}
.sheet .pTable.conn .cuPic img{display:block; width:90px; height:66px; object-fit:cover; border-radius:5px; background:#EEF1F5}
.sheet .pTable.conn .noPic{display:grid; place-items:center; width:90px; height:66px; border-radius:5px; background:#EEF1F5; color:var(--pInk2); font:600 8px/1.2 Figtree,sans-serif; text-align:center}
.sheet .pTable.conn td.n{font:700 11px "IBM Plex Mono",monospace; text-align:right; padding-right:8px}

/* 24a: keep the owner's joist on more beam rows, or say it can't (an amber flag, a red one when it can't) */
.dqKeep{margin:8px 0; padding:9px 11px; border-radius:10px; border:1.5px solid rgba(255,176,32,.55); background:rgba(255,176,32,.10); font-size:13.5px; line-height:1.4; color:var(--ink)}
.dqKeep.no{border-color:rgba(255,92,92,.6); background:rgba(255,92,92,.10)}
.dqKeep small{color:var(--ink-3); font-size:12.5px}
.dqKeepBtns{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.dqKeepBtns button{font:700 13px Figtree,sans-serif; padding:7px 11px; border-radius:9px; border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); cursor:pointer}
.dqKeepBtns button.go{background:#2F6BFF; border-color:#2F6BFF; color:#fff}
.dockStamp .dqKeep{color:#fff; border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.15)} .dockStamp .dqKeep small{color:rgba(255,255,255,.8)}

/* ============================================================
   drafting pass 1 (24 Oct 2026). Jared: "cant we leave it similar to this? just make the map collapsible? ... We are just
   adding in the new drafting style". Nothing moves: the map folds, the price is big and green, the code chip is a rubber
   stamp, the board styles are Drafting / Blueprint / CAD, the 3D bar's tools are one ⋯ menu, and a round ? opens help.
   ============================================================ */
/* ---- the map folds away (a computer-only control; Hide map / Show map on the map's bottom edge) ---- */
.dqMapFold{display:none}
@media (min-width:1001px){
  .dqMapFold{display:inline-flex; align-items:center; gap:5px; position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:41; border:1px solid rgba(110,156,255,.45); background:rgba(5,9,18,.88); color:#E7ECF7; font:700 12.5px/1 Figtree,sans-serif; padding:6px 13px 6px 9px; border-radius:999px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35)}
  .dqMapFold:hover{border-color:#6E9CFF; color:#fff}
  .dqMapFold svg{transition:transform .2s}
  html[data-mode="light"] .dqMapFold{background:var(--panel); color:var(--ink); border-color:var(--line-2)}
  .iqApp:not(.maxMap):not(.maxBoard):not(.max3d) .iqStage.dqMapShut:not(.noMap){grid-template-rows:40px minmax(320px,1fr) !important}
  .iqApp:not(.maxMap):not(.maxBoard):not(.max3d) .iqStage.dqMapShut:not(.noMap) > .iqMap{min-height:0; overflow:hidden; background:var(--card)}
  .iqApp:not(.maxMap) .iqMap.dqFolded > #iqMap,.iqApp:not(.maxMap) .iqMap.dqFolded > .iqPh,.iqApp:not(.maxMap) .iqMap.dqFolded > .iqMapBar,
  .iqApp:not(.maxMap) .iqMap.dqFolded > .iqMax,.iqApp:not(.maxMap) .iqMap.dqFolded > .iqTipBtn{visibility:hidden}
  .iqApp:not(.maxMap) .iqMap.dqFolded .dqMapFold{top:50%; bottom:auto; transform:translate(-50%,-50%)}
  .iqApp:not(.maxMap) .iqMap.dqFolded .dqMapFold svg{transform:rotate(180deg)}
  .iqApp:not(.maxMap) .iqMap.dqFolded::before{content:"Satellite map"; position:absolute; left:14px; top:50%; transform:translateY(-50%); font:800 11px/1 Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
  .iqApp.maxMap .dqMapFold,.iqApp.maxBoard .dqMapFold,.iqApp.max3d .dqMapFold{display:none}
}

/* ---- the price: about twice the size, green, a small label under it (header and 3D bar) ---- */
.dqTotBox{padding:3px 16px 4px; border-radius:12px; gap:0; border-color:#12B886; background:rgba(18,226,154,.10)}
.dqTotV{font:800 36px/1 Figtree,sans-serif; letter-spacing:-.02em; color:#12E29A}
.dqTotS{font:700 10.5px/1.25 Figtree,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:#8FE3C3}
html[data-mode="light"] .dqTotBox{background:#E9F8F1; border-color:#A7E3C8}
html[data-mode="light"] .dqTotV{color:#0C8A5B}
html[data-mode="light"] .dqTotS{color:#2E7D5B}
.dqTot3d .dqTotBox{padding:2px 14px 3px}
.dqTot3d .dqTotV{font-size:30px}
.iqPanes.only3d .iq3d .bar .dqTot3d:not([hidden]){display:flex}
@media (max-width:700px){ .dqTotV{font-size:30px} .dqTotS{font-size:10px} }

/* ---- the code stamp: a clean angled rubber stamp (the chip above the board and the stamp on the board) ---- */
.dqSr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.dqInk.ok{stroke:#0E8A5F} .dqInk.ok .dqInkF{fill:#0E8A5F}
.dqInk.bad{stroke:#D21F1F} .dqInk.bad .dqInkF{fill:#D21F1F}
.dqInk text,.dqInk .dqInkF{stroke:none} .dqInk .dqInkW{fill:#fff}
.iqPill.dqStamp,html[data-mode] .iqPill.dqStamp,html[data-mode] .iqPill.dqStamp.bad{position:relative; border:0; background:rgba(255,255,255,.95); padding:3px 6px; border-radius:8px; transform:rotate(-7deg); box-shadow:0 2px 8px rgba(15,26,58,.22); line-height:0; min-height:0; color:inherit}
.iqPill.dqStamp svg{display:block; height:34px; width:auto}
.iqPill.dqStamp:hover{box-shadow:0 3px 12px rgba(15,26,58,.32)}
.iqPill.dqStamp:focus-visible{outline:2px solid #2F6BFF; outline-offset:3px}
.iqPill.dqStamp.thunk{animation:dqThunk .28s cubic-bezier(.3,1.5,.5,1)}
@keyframes dqThunk{0%{transform:rotate(-7deg) scale(1.3); opacity:.15} 50%{transform:rotate(-7deg) scale(.92); opacity:1} 70%{transform:rotate(-5.5deg) translateX(-2px) scale(1.01)} 85%{transform:rotate(-8deg) translateX(1px)} 100%{transform:rotate(-7deg) scale(1)}}
.iqBoard .codeStamp rect.dqStampBg{fill:rgba(255,255,255,.95); stroke:rgba(210,31,31,.28); stroke-width:1; opacity:1}
.iqBoard .codeStamp .dqInk rect{fill:none; opacity:1}
.iqBoard .codeStamp .dqInk .dqInkF{fill:#D21F1F}
.iqBoard .codeStamp .dqInk text{stroke:none; paint-order:normal; letter-spacing:normal; font-family:Outfit,Figtree,sans-serif}
.iqBoard .codeStamp .dqInk .dqInkW{fill:#fff}
.iqBoard .codeStamp text.sub{fill:#B31515; stroke:none; paint-order:normal; font:700 12px Figtree,sans-serif; letter-spacing:.02em}
.iqBoard .dqStampInk{transform-box:fill-box; transform-origin:center}
.iqBoard .dqStampInk.thunk{animation:dqThunkG .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes dqThunkG{0%{transform:scale(1.3); opacity:.15} 50%{transform:scale(.92); opacity:1} 75%{transform:scale(1.02)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .iqPill.dqStamp.thunk,.iqBoard .dqStampInk.thunk{animation:none} }

/* ---- the 3D bar: the price, Framing, and one ⋯ menu (a bottom sheet on a phone) ---- */
.iq3d .views .dqMenuWrap{position:relative; display:inline-flex}
.iq3d.dqMenuOpen .bar{position:relative; z-index:400}   /* the open menu sits over the 3D stage's own overlays */
.iq3d .views .dq3dMenuBtn{width:38px; padding:0; display:grid; place-items:center}
.iq3d .views .dq3dMenuBtn[aria-expanded="true"],html[data-mode] .iq3d .views .dq3dMenuBtn[aria-expanded="true"]{background:rgba(47,107,255,.16); border-color:#6E9CFF; color:var(--ink)}
.iq3d .views .dq3dMenu{position:absolute; left:0; top:calc(100% + 6px); z-index:90; min-width:236px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 12px 32px rgba(15,26,58,.3); padding:5px; display:grid}
.iq3d .views .dq3dMenu[hidden]{display:none}
.iq3d .views .dq3dMenu .mi,html[data-mode] .iq3d .views .dq3dMenu .mi,html[data-mode] .iq3d .views .dq3dMenu .mi.dqFrameOn{display:flex; align-items:center; gap:10px; border:0; background:transparent; border-radius:8px; padding:8px 10px; text-align:left; font:600 14px/1.2 Figtree,sans-serif; color:var(--ink); cursor:pointer; opacity:1; text-decoration:none; min-width:0; min-height:0}
.iq3d .views .dq3dMenu .mi:hover,.iq3d .views .dq3dMenu .mi:focus-visible,html[data-mode] .iq3d .views .dq3dMenu .mi:hover,html[data-mode] .iq3d .views .dq3dMenu .mi:focus-visible{background:var(--panel-2); outline:none; box-shadow:inset 0 0 0 1.5px #BFD0FF}
.iq3d .views .dq3dMenu .mi svg{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--ink-2)}
.iq3d .views .dq3dMenu .mi[hidden]{display:none}
.iq3d .views .dq3dMenu .mi:disabled{opacity:.4; cursor:default; box-shadow:none}
.iq3d .views .dq3dMenu .mi[aria-checked="true"]::after,.iq3d .views .dq3dMenu .mi.dqFrameOn::after{content:"✓"; margin-left:auto; color:#2F6BFF; font-weight:800}
.iq3d .views .dq3dMenu hr{border:0; border-top:1px solid var(--line-2); margin:4px 2px}
@media (max-width:640px){
  .iq3d .views .dq3dMenu{position:fixed; left:0; right:0; bottom:0; top:auto; border-radius:18px 18px 0 0; max-height:78vh; overflow:auto; padding:20px 10px 22px; z-index:320}
  .iq3d .views .dq3dMenu::before{content:""; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--line-2)}
  .iq3d .views .dq3dMenu .mi{padding:12px; font-size:15px}
}

/* ---- help: the round ?, the panel, Show me's ring, the quick tour ---- */
.dqHelpBtn{width:40px; height:40px; border-radius:50%; border:1.5px solid #2F6BFF; background:var(--panel); color:#2F6BFF; font:800 18px/1 Figtree,sans-serif; cursor:pointer; display:grid; place-items:center; padding:0; box-shadow:0 2px 6px rgba(15,26,58,.14); margin:2px auto 8px}
html:not([data-mode="light"]) .dqHelpBtn{color:#A8C4FF; border-color:#6E9CFF}
.dqHelpBtn:hover{background:rgba(47,107,255,.12)}
.dqHelpBtn[aria-expanded="true"],html:not([data-mode="light"]) .dqHelpBtn[aria-expanded="true"]{background:#2F6BFF; border-color:#2F6BFF; color:#fff}
.dqHelpBtn:focus-visible{outline:2px solid #2F6BFF; outline-offset:2px}
.dqHelpPh{display:none; width:34px; height:34px; margin:0 0 0 auto; font-size:16px}
@media (max-width:1000px){ .dqHelpPh{display:grid} }
.dqHelp{position:fixed; right:16px; top:84px; bottom:16px; width:min(380px, calc(100vw - 32px)); background:var(--panel); color:var(--ink); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 18px 50px rgba(15,26,58,.32); display:flex; flex-direction:column; z-index:300; overflow:hidden; font:14px/1.45 Figtree,sans-serif; text-transform:none; letter-spacing:0}
html.iqMaxed .dqHelp{top:16px}
.dqHelp[hidden]{display:none}
.dqHelpHd{display:flex; align-items:center; gap:8px; padding:12px 12px 6px}
.dqHelpHd b{font-size:16px}
.dqHelpCtx{font-size:12px; color:#1741C4; background:rgba(47,107,255,.12); border-radius:999px; padding:2px 9px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
html:not([data-mode="light"]) .dqHelpCtx{color:#A8C4FF}
.dqHelpHd .x{margin-left:auto; border:0; background:var(--panel-2); width:30px; height:30px; flex:none; border-radius:50%; cursor:pointer; font-size:17px; line-height:1; color:var(--ink-2)}
.dqHelpSearch{display:flex; align-items:center; gap:8px; margin:4px 12px 8px; border:1.5px solid var(--line-2); border-radius:10px; padding:0 10px; background:var(--panel)}
.dqHelpSearch:focus-within{border-color:#2F6BFF; box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.dqHelpSearch svg{width:18px; height:18px; flex:none; color:var(--ink-2)}
.dqHelpSearch input{border:0; outline:0; font:16px Figtree,sans-serif; padding:9px 0; width:100%; background:transparent; color:var(--ink); min-width:0}
.dqHelpList{flex:1; overflow:auto; padding:0 12px 8px; -webkit-overflow-scrolling:touch}
.dqHelpSub{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:6px 2px}
.dqHelpNone{color:var(--ink-2); font-size:13.5px; padding:6px 2px 10px}
.dqHelpItem{border:1px solid var(--line-2); border-radius:10px; margin:0 0 6px; overflow:hidden; background:var(--panel)}
.dqHelpItem.open{border-color:#9DB5F5}
.dqHelpItem .q{display:block; width:100%; text-align:left; border:0; background:var(--panel); padding:9px 30px 9px 11px; font:600 14px/1.35 Figtree,sans-serif; cursor:pointer; position:relative; color:var(--ink)}
.dqHelpItem .q:hover{background:var(--panel-2)}
.dqHelpItem .q::after{content:"›"; position:absolute; right:11px; top:6px; color:var(--ink-2); font-size:19px; transition:transform .15s}
.dqHelpItem.open .q::after{transform:rotate(90deg)}
.dqHelpItem .a{display:none; padding:0 11px 10px; color:var(--ink-2); font-size:13.5px}
.dqHelpItem.open .a{display:block}
.dqHelpItem .a b{color:var(--ink)}
.dqHelpItem .acts{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.dqHBtn{border:1px solid var(--line-2); background:var(--panel); border-radius:9px; padding:6px 12px; font:700 13px Figtree,sans-serif; cursor:pointer; color:#1741C4}
html:not([data-mode="light"]) .dqHBtn{color:#A8C4FF}
.dqHBtn.pri,html:not([data-mode="light"]) .dqHBtn.pri{background:#2F6BFF; border-color:#2F6BFF; color:#fff}
.dqHBtn:disabled{opacity:.45; cursor:default}
.dqHelpFoot{border-top:1px solid var(--line-2); padding:9px 12px; font-size:13px; color:var(--ink-2)}
.dqLink{border:0; background:none; color:#1741C4; font:700 13px Figtree,sans-serif; text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:0}
html:not([data-mode="light"]) .dqLink{color:#A8C4FF}
.dqRing{position:fixed; z-index:400; border:3px solid #2F6BFF; border-radius:12px; pointer-events:none; animation:dqRing 1s ease-out 3}
@keyframes dqRing{0%{box-shadow:0 0 0 0 rgba(47,107,255,.47)} 100%{box-shadow:0 0 0 16px rgba(47,107,255,0)}}
.dqCoach{position:fixed; inset:0; z-index:500}
.dqSpot{position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(8,14,32,.55); outline:3px solid #2F6BFF; outline-offset:2px; transition:left .25s, top .25s, width .25s, height .25s; pointer-events:none}
.dqCoachCard{position:fixed; width:min(340px, calc(100vw - 32px)); background:var(--panel); color:var(--ink); border-radius:14px; padding:14px; box-shadow:0 18px 50px rgba(15,26,58,.4); font:14px/1.45 Figtree,sans-serif; transition:left .25s, top .25s}
.dqCoachCard .n{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:8px}
.dqCoachCard .dots{display:flex; gap:4px} .dqCoachCard .dots i{width:6px; height:6px; border-radius:50%; background:var(--line-2)} .dqCoachCard .dots i.on{background:#2F6BFF}
.dqCoachCard p{margin:6px 0 12px; font-size:15px}
.dqCoachCard .row{display:flex; align-items:center; gap:8px} .dqCoachCard .row .sp{flex:1}
@media (max-width:640px){
  .dqHelp{top:auto; left:0; right:0; bottom:0; width:auto; height:min(80vh, 620px); border-radius:18px 18px 0 0}
  .dqCoachCard{left:16px !important; right:16px; width:auto}
}
@media (prefers-reduced-motion:reduce){ .dqRing{animation:none} .dqSpot,.dqCoachCard{transition:none} .dqMapFold svg{transition:none} }

/* ---- the board styles: Drafting (light), Blueprint, CAD (dark). The drafter's marks take the --dq-* colors ---- */
#iqBoard{--dq-ink:#111827; --dq-dim:#374151; --dq-lab:#111827; --dq-joist:#6B7280; --dq-pier:#4B5563; --dq-paper:#FFFFFF; --dq-tag:#2F6BFF}
html:not([data-board="drafting"]) #iqBoard{--dq-ink:#FFFFFF; --dq-dim:#4FD1E8; --dq-lab:#7CFC9A; --dq-joist:#8D99A6; --dq-pier:#C792EA; --dq-paper:#1C2026; --dq-tag:#FF9F1C}
html[data-iqtheme="blueprint"] #iqBoard{--dq-ink:#FFFFFF; --dq-dim:#D5E5FF; --dq-lab:#FFFFFF; --dq-joist:rgba(255,255,255,.62); --dq-pier:#BFD6FF; --dq-paper:#0E2D5E; --dq-tag:#FFD23F}
#iqSvg .dqMarks{pointer-events:none}
#iqSvg .dqDim line{stroke:var(--dq-dim); stroke-width:.8}
#iqSvg .dqDim .dqExt{stroke-width:.7}
#iqSvg .dqDim.dqTot .dqDl{stroke-width:1.2}
#iqSvg .dqArr{fill:var(--dq-dim)}
#iqSvg .dqSl{stroke:var(--dq-dim); stroke-width:1.6; display:none}
html:not([data-board="drafting"]) #iqSvg .dqArr{display:none}
html:not([data-board="drafting"]) #iqSvg .dqSl{display:inline}
#iqSvg .dqDim text{font:600 11px Figtree,sans-serif; fill:var(--dq-dim); paint-order:stroke; stroke:var(--dq-paper); stroke-width:4px; stroke-linejoin:round}
#iqSvg .dqDim.dqTot text{font-weight:800; font-size:12px}
#iqSvg .dqDim.dqSm text{font-size:10px}
#iqSvg .dqDim.dqCant text{font-weight:800}
#iqSvg .dqSpan line{stroke:var(--dq-lab); stroke-width:1}
#iqSvg .dqSpan .dqArr{fill:var(--dq-lab)} #iqSvg .dqSpan .dqSl{stroke:var(--dq-lab)}
#iqSvg .dqPier{fill:none; stroke:var(--dq-pier); stroke-width:1.1; stroke-dasharray:4 3}
#iqSvg .dqPostX{stroke:var(--dq-ink); stroke-width:.9; fill:none}
#iqSvg .dqHex polygon{fill:var(--dq-paper); stroke:var(--dq-tag); stroke-width:1.2}
#iqSvg .dqHex text{font:800 10px Figtree,sans-serif; fill:var(--dq-tag)}
#iqSvg .dqTBox{fill:var(--dq-paper); stroke:var(--dq-ink); stroke-width:1.4}
#iqSvg .dqTBRule{stroke:var(--dq-ink); stroke-width:.8}
#iqSvg .dqTBT{font:800 13px Figtree,sans-serif; letter-spacing:.08em; fill:var(--dq-ink)}
#iqSvg .dqTBK{font:800 9.5px Figtree,sans-serif; letter-spacing:.14em; fill:var(--dq-dim)}
#iqSvg .dqTBS{font:600 10.5px Figtree,sans-serif; letter-spacing:.03em; fill:var(--dq-dim)}
/* 25 Oct (e, clean drawings): beam tags, numbered keynotes, the legend's text, a dot at each post in a run of equal bays */
#iqSvg .dqBTag rect{fill:var(--dq-paper); stroke:var(--dq-ink); stroke-width:1.2}
#iqSvg .dqBTag text{font:800 10.5px Figtree,sans-serif; fill:var(--dq-ink)}
#iqSvg .dqBTag.bad rect{stroke:var(--dq-bad)} #iqSvg .dqBTag.bad text{fill:var(--dq-bad)}
#iqSvg .dqKeys{pointer-events:none}   /* the keynotes and beam tags never catch a drag meant for the stairs or tub under them */
#iqSvg .dqKey circle{fill:var(--dq-ink); stroke:var(--dq-paper); stroke-width:1.5}
#iqSvg .dqKey text{font:800 10.5px Figtree,sans-serif; fill:var(--dq-paper)}
#iqSvg .dqLegT{font:600 11.5px Figtree,sans-serif; fill:var(--dq-ink)}
#iqSvg .dqTickDot{fill:var(--dq-dim)}
#iqSvg .dqLegJ{stroke:var(--dq-joist); stroke-width:1.4}
#iqSvg .dqMarks .dqLegHit{fill:transparent; pointer-events:all; cursor:pointer}
#iqSvg .dqLegChev{fill:none; stroke:var(--dq-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
#iqSvg .lab.dqJl rect{fill:var(--dq-paper); stroke:none; opacity:.92}
#iqSvg .lab.dqJl text{fill:var(--dq-lab); font-size:11.5px}
/* Drafting: black and gray line weights on white — a heavy outline and ledger, medium dashed drop beams, thin joists */
html[data-board="drafting"] #iqSvg .grid{display:none}
html[data-board="drafting"] #iqSvg .deck{fill:rgba(17,24,39,.025); stroke:#111827; stroke-width:3; stroke-linejoin:miter}
html[data-board="drafting"] #iqSvg .deck.ghost{fill:rgba(17,24,39,.03); stroke:#9CA3AF; stroke-width:1.2}   /* a fill, so a tap on the other level still picks it */
html[data-board="drafting"] #iqSvg .ledger{stroke:#111827; stroke-width:4.5; opacity:1}
html[data-board="drafting"] #iqSvg .house.dqH{fill:url(#iqHatchD); stroke:#111827; stroke-width:2}
html[data-board="drafting"] #iqSvg .hatchB{fill:#FFFFFF} html[data-board="drafting"] #iqSvg .hatchL{stroke:#6B7280}
html[data-board="drafting"] #iqSvg .houseLab{fill:#111827}
html[data-board="drafting"] #iqSvg .frame .joist{stroke:#6B7280; stroke-width:.9}
html[data-board="drafting"] #iqSvg .frame .joist.end{stroke:#111827; stroke-width:2}
html[data-board="drafting"] #iqSvg .frame .joist.header{stroke:#111827; stroke-width:2.4}
html[data-board="drafting"] #iqSvg .frame .beam,html[data-board="drafting"] #iqSvg .frame .beam.mid{stroke:#1F2937; stroke-dasharray:12 4; opacity:1; stroke-width:2.4px !important}
html[data-board="drafting"] #iqSvg .frame .post{fill:#FFFFFF; stroke:#111827; stroke-width:1.5}
html[data-board="drafting"] #iqSvg .frame .kneeBrace{stroke:#4B5563}
html[data-board="drafting"] #iqSvg .lab rect{fill:#FFFFFF; stroke:#CBD2DC}
html[data-board="drafting"] #iqSvg .lab text{fill:#111827}
html[data-board="drafting"] #iqSvg .lab.house rect{fill:#FFFFFF; stroke:#111827} html[data-board="drafting"] #iqSvg .lab.house text{fill:#111827}
html[data-board="drafting"] #iqSvg .lab.beam rect{fill:#FFFFFF; stroke:none} html[data-board="drafting"] #iqSvg .lab.beam text{fill:#2F6BFF}
html[data-board="drafting"] #iqSvg .lab.stairLab rect{fill:#FFFFFF; stroke:#111827} html[data-board="drafting"] #iqSvg .lab.stairLab text{fill:#111827}
html[data-board="drafting"] #iqSvg .rail{stroke:#374151; stroke-width:2.2; opacity:1}
html[data-board="drafting"] #iqSvg .rpost{fill:#111827; stroke:#FFFFFF}
html[data-board="drafting"] #iqSvg .stair{fill:#FFFFFF; stroke:#111827; stroke-width:1.6}
html[data-board="drafting"] #iqSvg .tread{stroke:#111827; stroke-width:1; opacity:1}
html[data-board="drafting"] #iqSvg .spad{fill:rgba(107,114,128,.06); stroke:#111827; stroke-dasharray:none; stroke-width:1.2}
html[data-board="drafting"] #iqSvg .boards line{stroke:rgba(17,24,39,.10)} html[data-board="drafting"] #iqSvg .boards line.border{stroke:rgba(17,24,39,.35)}
html[data-board="drafting"] #iqSvg .vtx{fill:#FFFFFF; stroke:#111827; stroke-width:2} html[data-board="drafting"] #iqSvg .vtx.house{stroke:#111827}
html[data-board="drafting"] #iqSvg .vtx.sel{fill:#2F6BFF; stroke:#FFFFFF}
html[data-board="drafting"] #iqSvg .scale line{stroke:#111827} html[data-board="drafting"] #iqSvg .scale text{fill:#111827}
/* Blueprint: the existing navy sheet; the drop beams dashed, the house hatched in white */
html[data-iqtheme="blueprint"] #iqSvg .frame .beam{stroke-dasharray:12 4; stroke-width:2.4px !important}
html[data-iqtheme="blueprint"] #iqSvg .house.dqH{fill:url(#iqHatchD)}
html[data-iqtheme="blueprint"] #iqSvg .hatchB{fill:#0E2D5E} html[data-iqtheme="blueprint"] #iqSvg .hatchL{stroke:rgba(255,255,255,.5)}
/* CAD: layer colors on a dark sheet — white outline, yellow beams, gray joists, purple piers, cyan dimensions, green notes */
html:not([data-board="drafting"]):not([data-iqtheme]) #iqBoardBox,html:not([data-board="drafting"]):not([data-iqtheme]) #iqBoard{background:#1C2026}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .grid line{stroke:rgba(255,255,255,.05)} html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .grid line.five{stroke:rgba(255,255,255,.10)}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .deck{fill:rgba(255,255,255,.02); stroke:#FFFFFF; stroke-width:2.4}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .ledger{stroke:#FFFFFF}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .house.dqH{fill:url(#iqHatchD); stroke:#FFFFFF; stroke-width:1.6}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .hatchB{fill:#1C2026} html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .hatchL{stroke:#8D99A6}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .houseLab{fill:#E8F0F7}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .frame .joist{stroke:#8D99A6; stroke-width:1}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .frame .joist.end{stroke:#FFFFFF; stroke-width:1.8}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .frame .beam,html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .frame .beam.mid{stroke:#FFE14D; stroke-dasharray:12 4; opacity:1; stroke-width:2.4px !important}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .frame .post{fill:#1C2026; stroke:#C792EA}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .lab rect{fill:#1C2026; stroke:rgba(255,255,255,.25)}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .lab text{fill:#E8F0F7}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .lab.beam rect{fill:#1C2026; stroke:none} html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .lab.beam text{fill:#FFE14D}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .rail{stroke:#4FD1E8} html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .rpost{fill:#4FD1E8}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .stair{fill:rgba(79,209,232,.08); stroke:#4FD1E8} html:not([data-board="drafting"]):not([data-iqtheme]) #iqSvg .tread{stroke:#4FD1E8}

/* ============================================================
   drafting pass 2 (24 Oct 2026): edit mode on the board, the fix card, the views (Rails, Board blocking, Tape), the drawers.
   Same page layout: the toolbar sits in the board's own top bar, the cards float over the board.
   ============================================================ */
#iqBoard{--dq-acc:#2F6BFF; --dq-mk:#2F6BFF; --dq-bad:#E3170A; --dq-t3:#0891B2; --dq-t6:#E8710A}
html[data-iqtheme="blueprint"] #iqBoard{--dq-acc:#FFD23F; --dq-mk:#FFD23F; --dq-bad:#FF6B6B; --dq-t3:#7FE3FF; --dq-t6:#FF9F43}
html:not([data-board="drafting"]):not([data-iqtheme]) #iqBoard{--dq-acc:#FF9F1C; --dq-mk:#FF9F1C; --dq-bad:#FF4D4D; --dq-t3:#4FD1E8; --dq-t6:#FF5EC4}
.iqSeg.dqBView[hidden],.dqTapeBtn[hidden]{display:none}
.dqTapeBtn{border:1.5px solid var(--line-2); background:var(--panel-2); color:var(--ink-2); font:700 13px/1 Figtree,sans-serif; padding:8px 12px; border-radius:11px; cursor:pointer; min-height:34px}
.dqTapeBtn[aria-pressed="true"]{background:#E8710A; border-color:#E8710A; color:#fff}
/* the edit toolbar, in the board's top bar */
.iqBoardBar .iqTip.dqHide{display:none}
.dqEditBar{display:flex; flex-wrap:wrap; align-items:center; gap:3px; padding:4px; border-radius:12px; background:var(--panel); border:1.5px solid var(--line-2); box-shadow:0 6px 20px rgba(15,26,58,.18); max-width:100%}
.dqEditBar[hidden]{display:none}
.dqEditBar > button,.dqEMenuWrap > button{display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--ink); font:700 12.5px/1 Figtree,sans-serif; padding:7px 9px; border-radius:8px; cursor:pointer; min-height:32px}
.dqEditBar > button:hover,.dqEMenuWrap > button:hover{background:var(--panel-2)}
.dqEditBar button[aria-pressed="true"],.dqEMenuWrap > button[aria-pressed="true"]{background:rgba(47,107,255,.14); color:#1741C4; box-shadow:inset 0 0 0 1.5px #6E9CFF}
html:not([data-mode="light"]) .dqEditBar button[aria-pressed="true"]{color:#A8C4FF}
.dqEditBar button:disabled{opacity:.4; cursor:default}
.dqEditBar .dqEDone{margin-left:auto; background:#2F6BFF; color:#fff}
.dqEditBar .dqEDone:hover{background:#1741C4}
.dqEMode{display:inline-flex; border:1.5px solid var(--line-2); border-radius:9px; overflow:hidden; margin-right:4px}
.dqEMode button{border:0; background:transparent; color:var(--ink-2); font:800 12px/1 Figtree,sans-serif; padding:7px 10px; cursor:pointer}
.dqEMode button[aria-pressed="true"]{background:#0F1A3A; color:#fff; box-shadow:none}
html:not([data-mode="light"]) .dqEMode button[aria-pressed="true"]{background:#2F6BFF}
.dqEMenuWrap{position:relative; display:inline-flex}
.dqEMenu{position:absolute; left:0; top:calc(100% + 6px); z-index:60; min-width:220px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 12px 32px rgba(15,26,58,.3); padding:5px; display:grid}
.dqEMenu.wide{min-width:300px}
.dqEMenu button{display:grid; gap:2px; text-align:left; border:0; background:transparent; color:var(--ink); font:600 13px/1.3 Figtree,sans-serif; padding:8px 10px; border-radius:8px; cursor:pointer}
.dqEMenu button:hover,.dqEMenu button:focus-visible{background:var(--panel-2); outline:none}
.dqEMenu button small{color:var(--ink-2); font-weight:600; font-size:12px}
.dqEMenu button:disabled{opacity:.45; cursor:default}
.dqETgl{display:inline-flex; align-items:center; gap:5px; font:600 12px/1.2 Figtree,sans-serif; color:var(--ink-2); padding:0 6px}
.dqEditBar select{font:600 12px Figtree,sans-serif; padding:4px; border-radius:7px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink)}
.iqBoardBox.dqEditing .iqBoardBar{padding-right:64px}
.iqBoard.dqEdit[data-etool="edit:beam"],.iqBoard.dqEdit[data-etool="edit:block"],.iqBoard.dqEdit[data-etool="edit:joist"],.iqBoard.dqEdit[data-etool="edit:pier"],.iqBoard.dqEdit[data-etool="edit:post"],.iqBoard.dqEdit[data-etool="edit:cc"],.iqBoard.dqEdit[data-etool^="mark:"]:not([data-etool="mark:select"]){cursor:crosshair}
.iqBoard.dqEdit[data-etool="edit:del"],.iqBoard.dqEdit[data-etool="mark:del"]{cursor:not-allowed}
/* the cards over the board */
.dqFixCard,.dqSelCard,.dqSideCard{position:absolute; z-index:42; background:var(--panel); color:var(--ink); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 12px 30px rgba(15,26,58,.22); font:13px/1.4 Figtree,sans-serif}
.dqFixCard[hidden],.dqSelCard[hidden],.dqSideCard[hidden],.dqDimIn[hidden]{display:none}
.dqFixCard{right:12px; top:62px; width:min(360px, 44%); max-height:calc(100% - 140px); overflow:auto; padding:10px 12px; border-color:rgba(227,23,10,.45)}
.dqFixHd{display:flex; align-items:center; gap:8px; margin-bottom:6px} .dqFixHd b{color:#C8102E; font:800 14px Figtree,sans-serif; letter-spacing:.02em}
html:not([data-mode="light"]) .dqFixHd b{color:#FF6B6B}
.dqFixHd .dqLink{margin-left:auto}
.dqFixLead{margin:2px 0 4px; font-weight:700}
.dqFixW{margin:0 0 6px; padding-left:16px; color:var(--ink-2); font-size:12.5px}
.dqFixW1{margin:8px 0 4px; font-size:12.5px; color:var(--ink-2)}
.dqFixS{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.dqFixS li{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:9px; padding:6px 8px}
.dqFixS li span:first-child{font-size:12.5px}
.dqFixP{font:700 12px "IBM Plex Mono",monospace; color:var(--ink-2); white-space:nowrap} .dqFixP.up{color:#B97600} .dqFixP.dn{color:#0C9A6A}
.dqFixS button{border:0; border-radius:8px; background:#2F6BFF; color:#fff; font:800 12px Figtree,sans-serif; padding:6px 10px; cursor:pointer}
.dqFixNone,.dqFixFoot{font-size:12px; color:var(--ink-2); margin:6px 0 0}
.dqFixCard .dqKeep{margin-top:8px}
.dqSelCard{left:12px; bottom:14px; width:min(330px, 46%); padding:10px 12px}
.dqSelHd{display:flex; align-items:center; gap:8px} .dqSelHd b{font:800 13.5px Figtree,sans-serif}
.dqSelHd .x,.dqDimIn .x{margin-left:auto; border:0; background:var(--panel-2); width:26px; height:26px; border-radius:50%; cursor:pointer; color:var(--ink-2); font-size:15px; line-height:1}
.dqSelInfo{margin:4px 0 8px; color:var(--ink-2); font-size:12.5px} .dqSelInfo .dqBad{color:#E3170A}
.dqSelRow{display:flex; align-items:center; gap:8px; margin:5px 0} .dqSelRow > span{width:56px; font-weight:700; font-size:12px; color:var(--ink-2)}
.dqSelSeg{display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--line-2); border-radius:9px; overflow:hidden}
.dqSelSeg button{border:0; border-left:1px solid var(--line-2); background:transparent; color:var(--ink); font:700 12px Figtree,sans-serif; padding:6px 9px; cursor:pointer}
.dqSelSeg button:first-child{border-left:0} .dqSelSeg button[aria-pressed="true"]{background:#2F6BFF; color:#fff}
.dqSelBtns{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.dqSelBtns button{border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:9px; font:700 12px Figtree,sans-serif; padding:6px 10px; cursor:pointer}
.dqSelBtns button:hover{border-color:#6E9CFF}
.dqSelFoot{margin:6px 0 0; font-size:11.5px; color:var(--ink-3)}
.dqSideCard{right:12px; top:62px; width:min(300px, 40%); max-height:calc(100% - 150px); overflow:auto; padding:8px 10px}
.iqBoardBox.dqEditing > .iqTipBtn{display:none}
.dqSideHd b{font:800 13px Figtree,sans-serif}
.dqSched{width:100%; border-collapse:collapse; margin-top:4px; font-size:12px}
.dqSched th{text-align:left; color:var(--ink-3); font-weight:700; padding:3px 4px; border-bottom:1px solid var(--line-2)}
.dqSched td{padding:4px; border-bottom:1px solid var(--line)}
.dqSched tr[data-rsrow]{cursor:pointer} .dqSched tr[data-rsrow]:hover td{background:rgba(47,107,255,.08)} .dqSched tr.on td{background:rgba(47,107,255,.16); color:#1741C4; font-weight:700}
html:not([data-mode="light"]) .dqSched tr.on td{color:#A8C4FF}
.dqSideFoot{font-size:11.5px; color:var(--ink-3); margin:6px 0 0}
.dqKey{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; font-size:12px}
.dqKey .sw,.dqSched .sw{display:inline-block; width:18px; height:6px; border-radius:2px; margin-right:6px; vertical-align:middle; background:#1F2937}
.dqKey .sw.pf{background:#2F6BFF} .dqKey .sw.pfj{background:#2F6BFF; height:3px} .dqKey .sw.pfc{background:#7A3FD1} .dqKey .sw.br{background:#B97600}
/* 2 Nov: the key's (i) sits at the end of its line; the detail drawing in its pop-up */
.dqKey li{display:flex; align-items:center; gap:0} .dqKey li .infoBtn{margin-left:6px; flex:none}
.dqBlkPic{background:#fff; border:1px solid #D7DCE3; border-radius:6px; padding:4px; margin:0 0 10px} .dqBlkPic svg{display:block; width:100%; height:auto; max-height:260px} .dqKey .sw.mr{background:#6B7280} .dqKey .sw.ff{background:#0C9A6A} .dqSched .sw.t3{background:#0891B2} .dqSched .sw.t6{background:#E8710A}
.dqDimIn{position:absolute; z-index:60; display:flex; gap:4px; align-items:center; padding:5px; background:var(--panel); border:1.5px solid #2F6BFF; border-radius:10px; box-shadow:0 10px 24px rgba(15,26,58,.25)}
.dqDimIn input{width:130px; font:16px Figtree,sans-serif; padding:5px 7px; border:1px solid var(--line-2); border-radius:7px; background:var(--panel); color:var(--ink)}
.dqDimIn button[data-di="ok"]{border:0; border-radius:7px; background:#2F6BFF; color:#fff; font:800 12.5px Figtree,sans-serif; padding:7px 10px; cursor:pointer}
@media (max-width:1000px){ .dqEditBar,.dqFixCard,.dqSelCard,.dqSideCard{display:none !important} }
/* the board's new marks */
#iqSvg .dqHits{pointer-events:auto}
#iqSvg .dqDimHit{fill:var(--dq-acc); fill-opacity:.07; stroke:var(--dq-acc); stroke-opacity:.5; stroke-dasharray:2 2; cursor:text}
#iqSvg .dqDimHit:hover{fill-opacity:.16}
#iqSvg .dqDim.dqLive line{stroke:var(--dq-acc); stroke-width:1.3} #iqSvg .dqDim.dqLive .dqArr{fill:var(--dq-acc)} #iqSvg .dqDim.dqLive .dqSl{stroke:var(--dq-acc)}
#iqSvg .dqDim.dqLive text{fill:var(--dq-acc); font-weight:800; font-size:12px}
#iqSvg .dqCcRing circle{fill:none; stroke:var(--dq-acc); stroke-width:2} #iqSvg .dqCcRing path{stroke:var(--dq-acc); stroke-width:1} #iqSvg .dqCcRing.hover circle{stroke-dasharray:3 2}
#iqSvg .dqBadJ{stroke:var(--dq-bad); stroke-width:3}
#iqSvg .dqAddJ{stroke:var(--dq-acc); stroke-width:1.8}
#iqSvg .dqJHit,#iqSvg .dqBrkHit{stroke:transparent; stroke-width:12; cursor:pointer; pointer-events:stroke}
.dqSideHd{display:flex; align-items:center; gap:6px} .dqSideMin{margin-left:auto; border:0; background:var(--panel-2); width:24px; height:24px; border-radius:50%; cursor:pointer; color:var(--ink-2); font:800 14px/1 Figtree,sans-serif}
.dqSideCard.min > :not(.dqSideHd){display:none}
#iqSvg .dqJHit:hover,#iqSvg .dqBrkHit:hover{stroke:var(--dq-bad); stroke-opacity:.25}
#iqSvg .frame .beam.bad,html[data-mode] #iqSvg .frame .beam.bad{stroke:var(--dq-bad)}
#iqSvg .frame .post.bad,html[data-mode] #iqSvg .frame .post.bad{stroke:var(--dq-bad); fill:rgba(227,23,10,.12)}
#iqSvg .frame .beam.sel,html[data-mode] #iqSvg .frame .beam.sel{stroke:var(--dq-acc); stroke-dasharray:none}
#iqSvg .frame .post.sel,html[data-mode] #iqSvg .frame .post.sel{stroke:var(--dq-acc); stroke-width:3}
#iqSvg .frame .post.hand.helical{rx:50%}
#iqSvg .dqHex.bad polygon{stroke:var(--dq-bad)} #iqSvg .dqHex.bad text{fill:var(--dq-bad)}
#iqSvg .dqTape{stroke-opacity:.55; stroke-linecap:butt} #iqSvg .dqTape.t3{stroke:var(--dq-t3)} #iqSvg .dqTape.t6{stroke:var(--dq-t6)}
#iqSvg .lab.dqTapeLab text{fill:var(--dq-t6)}
/* the Rails view */
.iqBoard.dqRailsView #iqSvg .finish .rail,.iqBoard.dqRailsView #iqSvg .finish .rpost{display:none}
#iqSvg .dqRimJ{stroke:var(--dq-ink); stroke-width:1} #iqSvg .dqRimJ.dbl{stroke-dasharray:6 3}
#iqSvg .dqRs .vis{stroke:var(--dq-ink); stroke-width:2.6; stroke-linecap:round}
#iqSvg .dqRs.own .vis{stroke-dasharray:8 3}
#iqSvg .dqRsHit{stroke:transparent; stroke-width:16; cursor:pointer; pointer-events:stroke}
#iqSvg .dqRs.hov .vis,#iqSvg .dqRs.on .vis{stroke:var(--dq-acc); stroke-width:4}
#iqSvg .dqRails{pointer-events:auto}
#iqSvg .dqDim.dqOn text{fill:var(--dq-acc); font-weight:800}
#iqSvg .dqGp rect{fill:var(--dq-ink); stroke:var(--dq-paper); stroke-width:1.5} #iqSvg .dqGpHit{fill:transparent; cursor:pointer; pointer-events:all} #iqSvg .dqGp.on rect{fill:var(--dq-acc)}
#iqSvg .dqTieBlk{stroke:var(--dq-acc); stroke-width:4.5} #iqSvg .dqTie{fill:var(--dq-paper); stroke:var(--dq-acc); stroke-width:1.4}
#iqSvg .lab.dqTieLab text,#iqSvg .lab.dqCall text{font-size:11px}
/* the Board blocking view */

#iqSvg .dqBlk{stroke:var(--dq-ink); stroke-width:3} #iqSvg .dqBlk.pf{stroke:#2F6BFF} #iqSvg .dqBlk.br{stroke:#B97600}
#iqSvg .dqBlk.pfj{stroke:#2F6BFF; stroke-width:2} #iqSvg .dqBlk.pfc{stroke:#7A3FD1; stroke-width:4}
#iqSvg .dqBlkX polygon{fill:var(--dq-paper, #fff); stroke:var(--dq-ink); stroke-width:1.2} #iqSvg .dqBlkX line{stroke:var(--dq-ink); stroke-width:1}
html[data-iqtheme="blueprint"] #iqSvg .dqBlk.pf,html:not([data-board="drafting"]) #iqSvg .dqBlk.pf{stroke:#7FB0FF}
#iqSvg .dqBrk{stroke:#B97600; stroke-width:5; stroke-opacity:.6} #iqSvg .dqBrk.bad{stroke:var(--dq-bad); stroke-dasharray:6 4; stroke-opacity:1}
#iqSvg .dqFlat{stroke:#0C9A6A; stroke-width:6; stroke-opacity:.75}
#iqSvg .dqBlocks{pointer-events:none}
/* markup */
#iqSvg .dqMarkup{pointer-events:auto}
#iqSvg .dqMkL{stroke:var(--dq-mk); stroke-width:1.8; fill:none} #iqSvg .dqMkF{fill:var(--dq-mk)}
#iqSvg .dqMkT{font:700 12.5px Figtree,sans-serif; fill:var(--dq-mk); paint-order:stroke; stroke:var(--dq-paper); stroke-width:4px; stroke-linejoin:round}
#iqSvg .dqMkG.on .dqMkL{stroke-width:3} #iqSvg .dqMkG.on .dqMkT{text-decoration:underline}
#iqSvg .dqMkHit{stroke:transparent; fill:transparent; stroke-width:14; cursor:pointer; pointer-events:all}
#iqSvg .dqDim.dqMkDim line{stroke:var(--dq-mk)} #iqSvg .dqDim.dqMkDim text{fill:var(--dq-mk)} #iqSvg .dqDim.dqMkDim .dqArr{fill:var(--dq-mk)}
/* the drawers (the 22b catalog drawer's look) */
.dqDrawerBack{position:fixed; inset:0; z-index:250; background:rgba(8,14,32,.18); opacity:0; transition:opacity .2s}
.dqDrawerBack.open{opacity:1}
.dqDrawer{position:fixed; z-index:251; top:16px; right:16px; bottom:16px; width:min(460px, calc(100vw - 32px)); background:var(--panel); color:var(--ink); font:14px/1.4 Figtree,sans-serif; border:1.5px solid var(--line-2); border-radius:16px; box-shadow:0 18px 48px rgba(0,0,0,.28); display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; transform:translateX(calc(100% + 28px)); transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.dqDrawer.open{transform:none}
.dqDrawerMain{padding:14px; overflow:auto}
.dqDrawerHead{display:flex; align-items:flex-start; gap:8px; margin-bottom:6px} .dqDrawerHead b{font:800 17px Figtree,sans-serif; display:block} .dqDrawerHead span{color:var(--ink-2); font-size:13px}
.dqDrawerHead .x{margin-left:auto; border:0; background:var(--panel-2); width:30px; height:30px; flex:none; border-radius:50%; cursor:pointer; font-size:16px; color:var(--ink-2)}
.dqDrawer h4{margin:14px 0 6px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.dqDrawer .dqDwTiles{grid-template-columns:repeat(auto-fill, minmax(118px, 1fr))}
.dqDrawer small.dqDwP{font:700 12px "IBM Plex Mono",monospace; color:#B97600}
.dqDwNote{font-size:12.5px; color:var(--ink-2); margin:4px 0}
.dqDwAll{display:flex; align-items:center; gap:8px; margin-top:14px; font-weight:700}
.dqDrawer .swatches button{border:0; background:none; cursor:pointer; display:grid; justify-items:center; gap:3px; color:var(--ink-2); font-size:11px}
.dqDrawer .swatches button span{display:block; width:48px; height:32px; border-radius:8px; box-shadow:0 0 0 1.5px var(--line-2)}
.dqDrawer .swatches button[aria-pressed="true"] span{box-shadow:0 0 0 3px #2F6BFF}
.dqDrawerFoot{border-top:1.5px solid var(--line-2); display:flex; align-items:center; gap:8px; padding:10px 12px; flex-wrap:wrap}
.dqDrawerFoot .sp{flex:1}
.dqDwTot{font-size:13px; color:var(--ink-2)} .dqDwTot b{color:var(--ink)}
.dqDrawerFoot .cancel{border:1.5px solid var(--line-2); background:var(--panel); border-radius:999px; padding:8px 14px; font:700 13px Figtree,sans-serif; cursor:pointer; color:var(--ink)}
.dqDrawerFoot .ok{border:0; border-radius:999px; background:#2F6BFF; color:#fff; padding:9px 18px; font:800 13.5px Figtree,sans-serif; cursor:pointer}
@media (max-width:640px){ .dqDrawer,.dqDrawer.phone{top:auto; left:0; right:0; bottom:0; width:auto; height:min(82vh, 640px); border-radius:18px 18px 0 0; transform:translateY(calc(100% + 20px))} .dqDrawer.open{transform:none} }
.dqDrawer.phone{top:auto; left:0; right:0; bottom:0; width:auto; height:min(82vh, 640px); border-radius:18px 18px 0 0; transform:translateY(calc(100% + 20px))} .dqDrawer.phone.open{transform:none}
@media (prefers-reduced-motion:reduce){ .dqDrawer,.dqDrawerBack{transition:none} }

/* ===== 24c (Jared: "the page is too busy"; the mockup he approved) ===== */
/* the code stamp rides in the header beside the progress bar, sized to the slim row */
html[data-mode] .dqTitleRow .iqPill.dqStamp,.dqTitleRow .iqPill.dqStamp{flex:none; padding:1px 4px; border-radius:6px; transform:rotate(-4deg); box-shadow:0 1px 5px rgba(15,26,58,.2)}
html .dqTitleRow .iqPill.dqStamp svg{height:22px; width:auto}
.iqHead.dqSlim .dqTitleRow .dqWhat{white-space:nowrap}
.iqHead.dqSlim .dqHeadProg:has(+ .iqPill:not([hidden])){min-width:110px}   /* room for the stamp */
/* the map bar on one row: Undo, Clear and Lock as icons, short words on the rest */
#iqMapTools button{white-space:nowrap}
#iqMapTools .dqIcoBtn{display:inline-grid; place-items:center}
#iqMapTools .dqIcoBtn svg{display:block; width:18px; height:18px}
@media (min-width:1001px){
  #iqMapTools{flex-wrap:nowrap}
  #iqMapTools .dqIcoBtn{padding:5px 7px}
}
/* the board style as three icons at the top right of the board, beside the (i) and the full-window button */
.dqStyleSeg{position:absolute; top:12px; right:112px; z-index:40; display:flex; gap:2px; padding:3px; border-radius:10px; border:1.5px solid rgba(110,156,255,.35); background:rgba(5,9,18,.88); box-shadow:0 4px 14px rgba(0,0,0,.35)}
.iqTipBtn[hidden] + .dqStyleSeg{right:62px}
.dqStyleSeg button{width:30px; height:30px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#C9D4EA; cursor:pointer}
.dqStyleSeg button svg{display:block; width:18px; height:18px}
.dqStyleSeg button:hover{background:rgba(110,156,255,.16); color:#fff}
.dqStyleSeg button[aria-pressed="true"]{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); color:#fff}
.dqStyleSeg button:focus-visible{outline:2px solid #6E9CFF; outline-offset:1px}
html[data-mode="light"] .dqStyleSeg{background:var(--panel); border-color:var(--line-2); box-shadow:0 4px 14px rgba(15,26,58,.12)}
html[data-mode="light"] .dqStyleSeg button{color:var(--ink-2)}
html[data-mode="light"] .dqStyleSeg button:hover{color:var(--ink)}
html[data-mode="light"] .dqStyleSeg button[aria-pressed="true"]{color:#fff}
@media (min-width:1001px){ .iqBoardBar,.iqBoardBox.dqEditing .iqBoardBar{padding-right:170px} }   /* room for the full-window button, the (i) and the style icons */
@media (max-width:1000px){ .dqStyleSeg,.iqTipBtn[hidden] + .dqStyleSeg{right:12px} }
/* Board blocking: no deck boards, and the sheet shows through inside the deck (no grid there in Blueprint or CAD) */
#iqBoard.dqBlocksView #iqSvg .deck:not(.ghost){fill:var(--dq-paper)}

/* ===== 24d (Jared: "maximize space in 3D") ===== */
/* the normal page with 3D picked: the board's view buttons and the 3D bar's price are the board's and the header's */
.iqWork:has(.iqPanes.only3d) #iqBViewSeg,.iqWork:has(.iqPanes.only3d) #iqTapeBtn{display:none}
.iqApp:not(.max3d) #iq3dTotal{display:none !important}
/* full-window 3D: the steps are icons in the bar, with the progress */
.dq3dSteps{display:none}
.iqApp.max3d .dq3dSteps:not([hidden]){display:flex; align-items:center; gap:10px; flex:1 1 auto; justify-content:center; min-width:0}
.dq3dSteps button{position:relative; width:44px; height:44px; flex:none; display:grid; place-items:center; padding:0; border:1.5px solid var(--line-2); border-radius:11px; background:transparent; color:var(--ink-2); cursor:pointer}
.dq3dSteps button svg{width:24px; height:24px}
.dq3dSteps button:hover{border-color:#6E9CFF; color:var(--ink)}
.dq3dSteps button.done{color:var(--mint); border-color:rgba(18,226,154,.45)}
.dq3dSteps button.now{border-color:#FFB020; color:var(--ink)}
.dq3dSteps button.bad{border-color:#E3170A; color:#E3170A}
.dq3dSteps button.on{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border-color:#2F6BFF; color:#fff}
.dq3dSteps button .ck{position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font:800 10px/1 Figtree,sans-serif; font-style:normal; background:#12B886; color:#fff}
.dq3dSteps button.bad .ck{background:#E3170A}
.dq3dProg{display:flex; align-items:center; gap:6px; margin-left:8px; font:700 12px/1 Figtree,sans-serif; color:var(--ink-2)}
.dq3dProg .dq3dFill{display:block; width:70px; height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; padding:0; border:0}
.dq3dProg .dq3dFill i{display:block; height:100%; background:var(--mint)}
.dq3dProg.full{color:var(--mint)}
@media (max-width:1440px){ .iqApp.max3d .dq3dSteps:not([hidden]){gap:6px} .dq3dSteps button{width:38px; height:38px} .dq3dSteps button svg{width:21px; height:21px} }
@media (max-width:1180px){ .iqApp.max3d .dq3dSteps:not([hidden]){gap:3px} .dq3dSteps button{width:30px; height:30px} .dq3dSteps button svg{width:17px; height:17px} .dq3dProg .dq3dFill{width:44px} }
@media (max-width:980px){ .iqApp.max3d .dq3dSteps .dq3dProg{display:none} }
/* the step card: only while a step (or an edge or corner) is open, sized to what it holds, Confirm at its foot */
.iqApp.max3d .iq3d .iqDock.dq3dCard{bottom:auto; max-height:calc(100% - 28px); padding-top:0}
.iqApp.max3d .iqDock[hidden] ~ .iq3dZoom,.iqApp.max3d .stageWrap:not(:has(.iqDock:not([hidden]))) .iq3dZoom{right:14px}
.dq3dHd{position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 -14px; padding:10px 10px 8px 14px; background:var(--card); border-bottom:1px solid var(--line)}
.dq3dHd b{font:800 16px/1.2 Outfit,sans-serif}
.dq3dX{width:30px; height:30px; flex:none; border:1px solid var(--line-2); border-radius:8px; background:transparent; color:var(--ink); font:400 22px/1 Figtree,sans-serif; cursor:pointer}
.dq3dX:hover{border-color:#6E9CFF}
.dq3dCard .dockCard .qHead .okBtn{display:none}   /* the one at the foot follows the scroll */
.dq3dFoot{position:sticky; bottom:-12px; z-index:3; margin:10px -14px -12px; padding:10px 14px 12px; background:var(--card); border-top:1px solid var(--line)}
.dq3dFoot .okBtn{width:100%}
/* the stamp under "3D view" */
.dq3dStamp{display:none}
html .iqApp.max3d .iqPill.dq3dStamp:not([hidden]){display:block; position:absolute; top:14px; left:16px; z-index:44}
.iqApp.max3d .iqPill.dq3dStamp svg{height:45px; width:auto}   /* Jared, 24 Oct: 1.5x */
/* the full-window board hides the header too: its own stamp, first in the board's bar (the fit keeps the deck under the bar) */
.dqBoardStamp{display:none}
html .iqApp.maxBoard .iqPill.dqBoardStamp:not([hidden]){display:block; flex:none; margin:2px 6px 0 0}
.iqApp.maxBoard .iqPill.dqBoardStamp svg{height:45px; width:auto}
/* 24f (Jared): the page's stamp right under 2D board / Split / 3D, the full window's size (deckiq.js placeStamp() sets its top) */
.iqWork{position:relative}
html[data-mode] .iqWork > .iqPill.dqWsStamp.dqStamp:not([hidden]),html .iqWork > .iqPill.dqWsStamp:not([hidden]){display:block; position:absolute; left:16px; top:56px; z-index:7}
html .iqPill.dqWsStamp svg{height:45px; width:auto}
.iqApp:not(.maxBoard) .iqWork:has(> #iqPill:not([hidden])) .iqPanes:not(.only3d) .iqBoardBox:not(.dqEditing) .iqBoardBar{padding-left:var(--dq-stamp-w, 240px)}
.iqWork:has(.iqPanes:not(.only3d) .iqBoardBox.dqEditing) > #iqPill{display:none !important}   /* editing the framing: the fix card says it, as on the board */
.iqWork:has(#iq3dMenu:not([hidden])) > #iqPill{visibility:hidden}   /* the 3D bar's ⋯ menu drops over it */
.dq3dCard .dockCard .qHead h3{display:none}
.iqApp.max3d .stageWrap:has(.dq3dStamp:not([hidden])) .dqConn{top:62px}   /* the connections list starts under the stamp */   /* the card's own title is in its sticky head */
/* 25 Oct (Jared): the connections panel's × is a blue button, not text — past the 3D bar's .x rules in either mode */
html[data-mode] .iq3d .dqConn h4 .x,html[data-mode] .iq3d .dqCuHead .x{background:var(--blue); color:#fff; border:0; box-shadow:0 2px 6px rgba(47,107,255,.35); border-radius:8px; width:30px; height:30px; font:700 17px/1 Figtree,sans-serif}
html[data-mode] .iq3d .dqConn h4 .x:hover,html[data-mode] .iq3d .dqCuHead .x:hover{background:#1741C4; color:#fff}
/* 25 Oct (Jared, option A): the Framing button, bigger, with an icon and what it does */
.iq3d .views button.dqFrameBtn,html[data-mode] .iq3d .views button.dqFrameBtn{display:inline-flex; align-items:center; gap:8px; height:auto; min-height:42px; padding:5px 12px 5px 7px; border:2px solid var(--blue); border-radius:12px; background:var(--panel); color:var(--blue); font:800 14px/1.05 Figtree,sans-serif; text-align:left; cursor:pointer}
.iq3d .views button.dqFrameBtn .ic{width:28px; height:28px; flex:none}
.iq3d .views button.dqFrameBtn small{display:block; font:600 11px/1.2 Figtree,sans-serif; color:var(--ink-3); margin-top:2px}
.iq3d .views button.dqFrameBtn.dqFrameOn,html[data-mode] .iq3d .views button.dqFrameBtn.dqFrameOn{background:var(--blue); color:#fff}
.iq3d .views button.dqFrameBtn.dqFrameOn small{color:#DCE6FF}
@media (max-width:760px){.iq3d .views button.dqFrameBtn small{display:none} .iq3d .views button.dqFrameBtn{min-height:36px; font-size:13px} .iq3d .views button.dqFrameBtn .ic{width:22px; height:22px}}
/* 25 Oct (Jared): the fascia picker — finish tiles drawn by the 3D, then color chips like a paint card */
.dqTrimH{margin:14px 0 6px; font:800 13px/1 Figtree,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:6px}
.dqTrimChips{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0 4px}
.dqTrimChips button{display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:5px; border:1.5px solid var(--line-2); border-radius:10px; background:var(--panel); color:var(--ink); cursor:pointer; text-align:left}
.dqTrimChips button i{display:block; height:30px; border-radius:6px; background:linear-gradient(160deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.22) 100%), var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), inset 0 -3px 0 rgba(0,0,0,.12)}
.dqTrimChips button b{font:700 11.5px/1.15 Figtree,sans-serif}
.dqTrimChips button[aria-pressed="true"]{border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,107,255,.22)}
.dqTrimLine{margin:6px 0 2px; font-size:12.5px; color:var(--ink-3)}
/* 25 Oct (Jared: "it still doesn't look like something you can click"): an on/off switch on the Framing viewer's title line */
.iq3d .views button.dqFrameBtn .tl{display:flex; align-items:center; gap:10px}
.iq3d .views button.dqFrameBtn .dqSw{position:relative; flex:none; width:34px; height:19px; border-radius:999px; background:#C3CDDD; box-shadow:inset 0 1px 2px rgba(0,0,0,.18); transition:background .15s}
.iq3d .views button.dqFrameBtn .dqSw::after{content:""; position:absolute; left:2px; top:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .15s}
.iq3d .views button.dqFrameBtn.dqFrameOn .dqSw{background:rgba(255,255,255,.95)}
.iq3d .views button.dqFrameBtn.dqFrameOn .dqSw::after{left:17px; background:var(--blue)}
.iq3d .views button.dqFrameBtn:not(.dqFrameOn):hover .dqSw{background:#AEBAD0}

/* ============================================================
   25 Oct (g, Jared picked card design B of DeckIQ\mockups\tighter-cards-20261025.html): tighter step cards. Every choice
   is a small box with a check mark, two or three to a row; check toggles are boxes too; smaller section heads; the
   strength and slump side by side. Today's picture tiles stay where the picture helps (patterns, railings, risers).
   ============================================================ */
.q{gap:8px}
.q h4{font:800 12px/1.2 Figtree,sans-serif; letter-spacing:.09em; color:var(--ink-2); margin:12px 0 4px; padding-top:10px}
.q .seg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; background:none; border:0; padding:0}
.q .seg.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.q .seg.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
.q .seg button{display:grid; grid-template-columns:16px minmax(0,1fr); column-gap:8px; align-items:start; text-align:left; border:1.5px solid var(--line-2); border-radius:8px; background:var(--panel); color:var(--ink); font:600 13.5px/1.25 Figtree,sans-serif; padding:7px 9px; min-width:0}
.q .seg button::before{content:''; grid-row:1 / span 2; width:16px; height:16px; box-sizing:border-box; border:1.5px solid #A0AEC0; border-radius:4px; margin-top:1px; background:var(--panel)}
.q .seg button small{grid-column:2; font:500 11.5px/1.25 Figtree,sans-serif; color:var(--ink-3); opacity:1; margin-top:1px}
.q .seg button:hover{border-color:#6E9CFF}
.q .seg button[aria-pressed="true"]{border-color:#2F6BFF; background:rgba(47,107,255,.09); color:var(--ink)}
.q .seg button[aria-pressed="true"]::before{border-color:#2F6BFF; background:#2F6BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.q .seg button svg{grid-column:2}
.q .rmode .seg button{display:block; text-align:center} .q .rmode .seg button::before{display:none}
.q .stSet .seg{grid-template-columns:repeat(3,minmax(0,1fr))} .q .stSet .seg button{padding:6px 8px; font-size:12.5px}
/* 26 Oct: on a phone three check-box tiles to a row left "Automatic" a hair too wide for its tile; a little less padding fits it */
@media (max-width:600px){ .q .seg button{column-gap:6px; padding:7px 7px} }
.q .tgl{border:1.5px solid var(--line-2); border-radius:8px; padding:7px 9px; font:600 13.5px/1.3 Figtree,sans-serif; background:var(--panel)}
.q .tgl input{width:16px; height:16px; accent-color:#2F6BFF; flex:none}
.q .tgl:has(input:checked){border-color:#2F6BFF; background:rgba(47,107,255,.09)}
html .q .dims .fld, html .q .fld{background:none; border:0; padding:0; border-radius:0; box-shadow:none; font-size:inherit}   /* the site-wide .fld box (styles.css) is for inputs, not these wrappers */
.q .fld label{font-size:11.5px}
.q .fld input,.q .fld select{padding-block:7px}
.dims.dqPair{grid-template-columns:minmax(0,1fr) 92px} .dims.dqPair > .fld:has(> select){grid-column:auto}
.stWin{margin-left:8px; font-size:12.5px; color:var(--ink-3)} .stWin input{width:64px}
/* the add-ons: one line each, the name and a price button (Jared's version 1: Add in red, Save in green); the details on hover */
.dqAoLead{margin:0; font-size:13.5px; color:var(--ink-2)}
.dqAo{display:grid}
.dqAoRow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 2px; border-top:1px solid var(--line)}
.dqAoRow:first-child{border-top:0}
.dqAoRow .n{font:600 14px/1.3 Figtree,sans-serif; color:var(--ink); min-width:0}
.dqAoRow .tag{font:800 10px/1 Figtree,sans-serif; font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:#C81E1E; margin-left:6px}
.dqAoRow button{font:700 13px/1 Figtree,sans-serif; border-radius:7px; padding:8px 10px; border:1.5px solid; background:var(--panel); cursor:pointer; white-space:nowrap; min-width:112px; text-align:center; font-variant-numeric:tabular-nums}
.dqAoRow button.up{color:#C81E1E; border-color:#F3B4B4} .dqAoRow button.up:hover{background:#FDECEC}
.dqAoRow button.dn{color:#067A4E; border-color:#A7E3C8} .dqAoRow button.dn:hover{background:#E8F8F0}
html:not([data-mode="light"]) .dqAoRow button.up{color:#FF8A8A; border-color:rgba(255,138,138,.45)} html:not([data-mode="light"]) .dqAoRow button.dn{color:#4ADE9B; border-color:rgba(74,222,155,.45)}

/* the tool switcher at the left of the board's bar (26 Oct): one yard, every designer a tool; Deck is on */
.dqLayers{padding-right:10px;margin-right:2px;border-right:1px solid var(--line-2)}
.dqLayers button{display:inline-grid;place-items:center;padding:6px 8px}
.dqLayers button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dqLayers button.soon{opacity:.6}
.dqLayers button.soon:hover{opacity:1}
.dqLayerPop{position:fixed;z-index:120;width:290px;padding:12px 14px;border-radius:12px;background:var(--card);color:var(--ink);border:1px solid var(--line-2);box-shadow:0 18px 44px -16px rgba(0,0,0,.45);font-size:13.5px}
.dqLayerPop b{display:block;font-size:15px;margin-bottom:4px}
.dqLayerPop p{margin:4px 0 0}
.dqLayerPop .mut{color:var(--ink-3);font-size:12.5px}
.dqLayerSoon{font:700 10px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line-2);border-radius:99px;padding:2px 6px;vertical-align:2px}

/* 27 Oct: Quick shape, reference shapes on the yard (dashed, not priced) */
.dqLayers .dqQuick{display:inline-flex;gap:6px;border-style:dashed}
.dqQuickT{font-size:12.5px;font-weight:600}
.dqLayerPop.wide{width:330px}
.dqRefKind{margin-top:8px}
.dqRefKind>span{font-weight:600;font-size:13px}
.dqRefKind i{font-style:normal;color:var(--ink-3);font-weight:500;font-size:12px}
.dqRefRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.dqRefRow button{font:600 12.5px Figtree,sans-serif;padding:5px 9px;border-radius:8px;border:1px solid var(--line-2);background:none;color:var(--ink);cursor:pointer}
.dqRefRow button:hover{border-color:#2F6BFF;color:#2F6BFF}
.iqBoard .dqRef polygon:not(.dqRefHit){fill:rgba(224,138,0,.08);stroke:#C77800;stroke-width:1.6;stroke-dasharray:7 5}
.iqBoard .dqRef.wall polygon:not(.dqRefHit){fill:rgba(120,113,108,.35);stroke:#78716C}
.iqBoard .dqRef.edge polygon:not(.dqRefHit){fill:rgba(185,162,138,.45);stroke:#9C8670}
.iqBoard .dqRef text{font:700 10px "IBM Plex Mono",monospace;letter-spacing:.04em;fill:#9A5B00;pointer-events:none}
.iqBoard .dqRefHit{fill:transparent;stroke:transparent;stroke-width:10;cursor:grab;pointer-events:all}

/* 27 Oct: the owner's house as boxes on the board (the House step drags them), and its rows on the House card */
.iqBoard .dqWing{fill:url(#iqHatch); fill-opacity:.7; stroke:#FFB020; stroke-width:1.4}
.iqBoard .dqWings.edit .dqWing{stroke-width:2}
.iqBoard .dqWing.sel{stroke-width:3}
.iqBoard .dqWingLab{font:800 10px/1 Figtree,sans-serif; letter-spacing:.12em; fill:#FFB020; pointer-events:none}
html[data-board="drafting"] .iqBoard .dqWingLab{fill:#9A6300}
.iqBoard .dqWingHit{fill:transparent; stroke:none; cursor:grab; pointer-events:all}
.iqBoard .dqWingEdge{stroke:transparent; stroke-width:12; pointer-events:stroke}
.iqBoard .dqWingEdge:hover{stroke:rgba(255,176,32,.55)}
.hwStart{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:2px 0 8px}
.hwStart small{color:var(--ink-3); font-size:12px}
.hwCredit{display:block; color:var(--ink-3); font-size:11px; margin:-4px 0 8px}
.hwRows{display:grid; gap:6px; margin-top:8px}
.hwRow .seg button{min-width:44px}
.stSet.stBig .stRow label.hwGar{display:flex; align-items:center; gap:6px; align-self:end; padding-bottom:8px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--ink-2)}
.hwGar input{margin:0}
.hwAdd{margin-top:8px}
.hcRow select{font:500 13px Figtree,sans-serif; padding:4px 6px; border-radius:7px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink)}
.hwSize{font-weight:500; color:var(--ink-3); font-size:12px; margin-left:6px; white-space:nowrap}
.hwRow .seg{justify-self:start; width:fit-content}

/* 27 Oct (Jared, ss3): the step rail is a <nav>, so it took the site header's z-index 80 and slid over the header at the end
   of the design area; it scrolls under the header now. The panel keeps room at its bottom for the Confirm that follows. */
.iqRail{z-index:5}
html.iqFollowOn #iqPanel{padding-bottom:76px}
/* 27 Oct: the how-to animation for drawing the house (the (i) on "Your house in 3D") */
.dqHow{display:block; width:100%; max-width:440px; margin:0 auto 12px}
.dqHow .hwBg{fill:var(--panel-2); stroke:var(--line-2)}
.dqHow .hwHouse{fill:url(#hwHatch); stroke:#FFB020; stroke-width:1.6}
.dqHow .hwSnap{fill:none; stroke:#22D3EE; stroke-width:3}
.dqHow .hwEdge{stroke:#22D3EE; stroke-width:4; stroke-linecap:round}
.dqHow .hwDeck{fill:rgba(255,107,26,.16); stroke:#FF6B1A; stroke-width:1.6}
.dqHow .hwLedger{stroke:#FFB020; stroke-width:3}
.dqHow .hwLab{font:800 8.5px Figtree,sans-serif; letter-spacing:.1em; fill:#C77800}
.dqHow .hwDeckLab{fill:#E05A0C}
.dqHow .hwCap{font:700 12px Figtree,sans-serif; fill:var(--ink)}
.dqHow .hwCur path{fill:#fff; stroke:#111; stroke-width:1.2; stroke-linejoin:round}
.dqHow .hwWallL{fill:#C9D6C2; stroke:#7D8C78} .dqHow .hwWallR{fill:#AFBEA8; stroke:#7D8C78}
.dqHow .hwRoof{fill:#4A3A30; stroke:#2E241E} .dqHow .hwRoof2{fill:#3A2D25}
.dqHow .hwWin{fill:#2B3D66; stroke:#fff; stroke-width:1}
.dqHow .hwDeckIso{fill:#B9773F; stroke:#7A4A22}
.hwWatch{font-size:13px}
.dqHow .hwGarage{fill:#EEEEEA; stroke:#7D8C78} .dqHow .hwDeckEdge{fill:#7A4A22}
/* 27 Oct (20261029a): the small × on what comes off in one tap (sheds, stairs, the gazebo, the extras), on the board and in
   3D. It fades in while the pointer is over the picture, so a still or a print stays clean; a tap asks first */
.dqRmLayer{position:absolute; inset:0; pointer-events:none; z-index:4}
.iq3dChips.dqRmLayer{position:relative; inset:auto; z-index:3}
.dqRmX{position:absolute; transform:translate(-50%,-50%); pointer-events:auto; width:24px; height:24px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--panel,#fff); color:#E3170A; border:1.5px solid rgba(227,23,10,.55); box-shadow:0 2px 8px rgba(0,0,0,.25); opacity:0; transition:opacity .15s}
.iqBoard:hover .dqRmX, .iq3d:hover .dqRmX, .dqRmX:focus-visible{opacity:.92}
.dqRmX:hover{opacity:1; background:#E3170A; color:#fff; border-color:#fff}
@media (hover:none){ .dqRmX{opacity:.85} }
/* 27 Oct (20261029a): Save and compare on a phone — the name and the button stack, the button fits the card (Safari ran it off the edge) */
.vsRow{flex-wrap:wrap}
.vsRow input{flex:1 1 160px}
.vsRow button.pri{max-width:100%; white-space:normal; line-height:1.25; text-align:center}
@media (max-width:520px){ .vsRow input, .vsRow button.pri{flex:1 1 100%} }
/* the leave box: Save / Don't save / Cancel on one row when they fit */
.btnRow.dqLeaveRow{flex-wrap:wrap}
/* 27 Oct (20261029a, Jared: no way to the 2D board or the 3D on a phone): 2D plan and 3D view under the steps; each opens full
   screen over the page with a bar to switch between them and ×. The 2D plan is to look at (drag, pinch); 3D starts as a still */
.dqPhViews{display:none}
.dqPhBar,.dqPhShot{display:none}
@media (max-width:1000px){
  .dqPhViews{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:6px; margin-top:8px}
  .dqPhViews .iqSmall{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 6px; white-space:nowrap; min-width:0}
  .dqPhViews svg{flex:none}
  html.dqPhLock, html.dqPhLock body{overflow:hidden}
  #iq.dqPhOn .iqStage.dqPhNoMap{display:block !important; height:0; min-height:0}   /* no map on the page: the stage stays out of the way, its work area still opens */
  #iq.dqPhOn .iqWork{display:flex !important; flex-direction:column; position:fixed; inset:0; z-index:1200; min-height:0; background:#FFFFFF !important}   /* over Night shift's transparent work area */
  html[data-mode="dark"] #iq.dqPhOn .iqWork{background:#0A1120 !important}
  #iq.dqPhOn .dqPhBar{display:flex; align-items:center; gap:8px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom:1px solid var(--line); background:var(--card); flex:none}
  #iq.dqPhOn .dqPhBar .sp{flex:1}
  #iq.dqPhOn .dqPhX{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-2); background:transparent; color:var(--ink); font:400 24px/1 Figtree,sans-serif; cursor:pointer}
  #iq.dqPhOn .iqWsBar, #iq.dqPhOn .dqFoldTab, #iq.dqPhOn #iqPill, #iq.dqPhOn .iqMax, #iq.dqPhOn .iqBoardBox > .iqTipBtn, #iq.dqPhOn .iqBoardBar, #iq.dqPhOn .dqStyleSeg, #iq.dqPhOn .iq3d [data-3d="close"]{display:none !important}
  #iq.dqPhOn .iqPanes{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr)}
  #iq.dqPh-board .iqBoardBox{display:grid; grid-template-rows:minmax(0,1fr); height:100%; min-height:0}
  #iq.dqPh-board .iqBoard{height:100%; min-height:0}
  #iq.dqPh-board .iqBoardBox .iqZoom{display:flex}
  #iq.dqPh-board .iq3d.pane, #iq.dqPh-shot .iq3d.pane{display:none !important}
  #iq.dqPh-shot .iqBoardBox, #iq.dqPh-3d .iqBoardBox{display:none !important}
  #iq.dqPh-shot .iqPanes{display:none}
  #iq.dqPh-shot .dqPhShot{display:flex; flex-direction:column; flex:1; min-height:0}
  .dqPhShot .dqPhImg{flex:1; min-height:0; position:relative; display:grid; place-items:center; padding:10px; text-align:center}
  .dqPhShot .dqPhImg img{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain; border-radius:12px; display:block}
  .dqPhShot .dqPhAct{display:grid; gap:6px; justify-items:center; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); text-align:center}
  .dqPhShot .dqPhAct .pri{font:700 16px/1 Figtree,sans-serif; padding:13px 28px; border-radius:999px; border:0; background:linear-gradient(135deg,var(--blue),#2F6BFF); color:#fff; cursor:pointer}
  .dqPhShot .dqPhAct small{color:var(--mut,#8A93A6); font-size:12px}
  #iq.dqPh-3d .iq3d.pane{height:100%; min-height:0; border-left:0; grid-template-rows:auto minmax(0,1fr)}
  #iq.dqPh-3d .iq3d .stageWrap, #iq.dqPh-3d .iq3d .stage{height:100%}
  #iq.dqPh-3d .iq3d .iq3dMax, #iq.dqPh-3d .iq3d .dq3dSteps, #iq.dqPh-3d .iq3d .note{display:none !important}
}

/* 20261029a: ready-made stair layouts (picture tiles you drag onto a deck edge) and the platform controls */
.dqSS{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:4px 0 10px}
.dqSSt{display:grid; justify-items:center; gap:3px; padding:6px 4px 7px; border:1px solid var(--line-2,#d5dbe5); border-radius:10px; background:var(--panel-2,#f7f9fc); color:var(--ink); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.dqSSt:hover{border-color:var(--blue,#22C9F0); box-shadow:0 0 0 1px var(--blue,#22C9F0) inset, 0 6px 18px -10px rgba(34,201,240,.8)}
.dqSSt.on{border-color:var(--blue,#22C9F0); background:rgba(34,201,240,.12); box-shadow:0 0 0 1.5px var(--blue,#22C9F0) inset}
.dqSSt b{font:700 11px/1.2 Figtree,Inter,sans-serif; color:var(--ink); text-align:center}
.dqSSt svg,.dqSSGhost svg,.dqPfSet > b svg{width:100%; max-width:84px; height:auto; display:block}
.dqSSt svg *,.dqSSGhost svg *,.dqPfSet svg *{vector-effect:non-scaling-stroke}
.dqSS svg .dk,.dqSSGhost svg .dk,.dqPfSet svg .dk{fill:rgba(34,201,240,.08); stroke:var(--blue,#22C9F0); stroke-width:1.4}
.dqSS svg .hs,.dqSSGhost svg .hs,.dqPfSet svg .hs{stroke:var(--ink-3,#8EA0BE); stroke-width:3}
.dqSS svg .pf,.dqSSGhost svg .pf,.dqPfSet svg .pf{fill:rgba(34,201,240,.26); stroke:var(--blue-lit,#7DF3FF); stroke-width:1.6}
.dqSS svg .fl,.dqSSGhost svg .fl,.dqPfSet svg .fl{fill:rgba(34,201,240,.14); stroke:var(--blue,#22C9F0); stroke-width:1.3}
.dqSS svg line,.dqSSGhost svg line,.dqPfSet svg line{stroke:var(--blue,#22C9F0); stroke-width:1}
html[data-mode="light"] .dqSS svg .pf,html[data-mode="light"] .dqPfSet svg .pf{stroke:var(--blue-deep,#07809E)}
.dqSSGhost{position:fixed; z-index:9999; width:84px; padding:4px; border-radius:10px; background:var(--panel,#0A1120); border:1px solid var(--blue,#22C9F0); box-shadow:0 10px 30px -8px rgba(34,201,240,.7); transform:translate(-50%,-60%); pointer-events:none; opacity:.95}
html.dqSSArm #iqBoard,html.dqSSArm #iq3dStage{cursor:crosshair !important; outline:2px dashed var(--blue,#22C9F0); outline-offset:-2px}
.dqPfSet > b{display:flex; align-items:center; gap:8px}
.dqPfSet > b svg{width:44px}
.dqPf{border-top:1px solid var(--line,#e6eaf0); padding-top:6px; margin-top:6px}
.dqPfR{width:100%; accent-color:var(--blue,#22C9F0); margin:2px 0}
@media (max-width:420px){ .dqSS{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 20261029a: a platform's flights on the board while another level is picked: ghosted like its outline */
#iqSvg .stair.ghost{opacity:.55; stroke-dasharray:4 3} #iqSvg .tread.ghost{opacity:.45}
.stSet.stBig.dqPfSet .dqPf{grid-column:1/-1; min-width:0}
.stSet.stBig.dqPfSet .dqPf .stRow{align-items:end}
.q .stSet.dqPfSet .seg{grid-template-columns:repeat(2,minmax(0,1fr))}
.stSet.stBig.dqPfSet .inl input[data-pfw],.stSet.stBig.dqPfSet .inl input[data-pfd]{width:58px}
.stSet.stBig.dqPfSet > .stDel{justify-self:end}
.stSet.stBig.dqPfSet > b{grid-column:1/3}
.dqSS svg .pd,.dqSSGhost svg .pd,.dqPfSet svg .pd{fill:rgba(142,160,190,.35); stroke:var(--ink-3,#8EA0BE); stroke-width:1}
/* 20261030q: the § Code button beside the (i), no box around it (Jared, 30 Oct) */
.dqIcRow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0}
.dqIcRow > .infoBtn{margin:0}
.note.dqCodeOnly{background:none!important; border:0!important; box-shadow:none!important; padding:0!important; margin:6px 0}
/* 20261030q: Show Deck / Roof / Both on the Framing board */
.dqLayerSeg{align-items:center}
.dqLayerSeg .dqSegLab{font:700 10.5px/1 "JetBrains Mono","IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:0 6px 0 8px}
.roofMarks .roofPost{opacity:.85}
/* 20261030q: the parts list on the page is the plan set's table (bomTable), full width, readable size; a card per line on a phone */
.pgBom{margin:14px 0 6px}
.pgBomChips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.pgBomChip{font:700 13px/1 Figtree,sans-serif; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:999px; padding:8px 12px; cursor:pointer; min-height:36px}
.pgBomChip span{font:600 12px/1 "JetBrains Mono","IBM Plex Mono",monospace; color:var(--ink-3); margin-left:3px}
.pgBomChip[aria-pressed="true"]{background:var(--ink); color:var(--panel); border-color:var(--ink)} .pgBomChip[aria-pressed="true"] span{color:inherit; opacity:.75}
.pgBomWrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.pgBom .bomT{width:100%; border-collapse:collapse; font:500 14px/1.35 Figtree,sans-serif; color:var(--ink)}
.pgBom .bomT th{font:700 11px/1 "JetBrains Mono","IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; text-align:left; color:var(--ink-3); padding:10px; border-bottom:1.5px solid var(--ink); white-space:nowrap}
.pgBom .bomT td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.pgBom .bomT td.bck{width:18px} .pgBom .bomT td.bck i{display:block; width:14px; height:14px; border:1.5px solid var(--ink-3); border-radius:3px; margin-top:2px}
.pgBom .bomT .bn{width:34px; text-align:right; font:600 13px/1.35 "JetBrains Mono","IBM Plex Mono",monospace; color:var(--ink-3)}
.pgBom .bomT .bq{width:52px; text-align:right; font:700 14px/1.35 "JetBrains Mono","IBM Plex Mono",monospace}
.pgBom .bomT .bu{width:56px; font:500 12px/1.35 "JetBrains Mono","IBM Plex Mono",monospace; color:var(--ink-3)}
.pgBom .bomT .bit{font-weight:700; min-width:220px}
.pgBom .bomT .buf{color:var(--ink-2); font-size:13px}
.pgBom .bomT .bph{white-space:nowrap; width:1%}
.pgBom .bomT .bm{text-align:right; white-space:nowrap; font:600 13px/1.35 "JetBrains Mono","IBM Plex Mono",monospace}
.pgBom .bomT tr.bGrp td{background:var(--panel-2, rgba(127,160,190,.08)); padding:9px 10px; border-bottom:1px solid var(--line)}
.pgBom .bomT tr.bGrp b{font:700 12px/1 "JetBrains Mono","IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.pgBom .bomT tr.bGrp span{font:500 12.5px/1 Figtree,sans-serif; color:var(--ink-3); margin-left:10px}
.pgBom .bomT tr.bSub td{text-align:right; font:700 13px/1.35 Figtree,sans-serif}
.pgBom .bomT tr.bNote td{font-size:13px; color:var(--ink-2); background:var(--panel-2, rgba(127,160,190,.06)); padding:8px 10px 10px 62px}
.pgBom .bPh{display:inline-block; font:700 10.5px/1 "JetBrains Mono","IBM Plex Mono",monospace; font-style:normal; letter-spacing:.04em; padding:3px 8px; border-radius:999px; border:1px solid currentColor; margin:0 3px 2px 0}
.pgBom .bPh.f{color:#8A4B06} .pgBom .bPh.fr{color:#0B5F8F} .pgBom .bPh.d{color:#5B3A8F} .pgBom .bPh.r{color:#9B2C2C} .pgBom .bPh.s{color:#24702F}
.pgBom .bPh.rf,.pgBom .bPh.gz,.pgBom .bPh.pg{color:#8A5A14} .pgBom .bPh.o,.pgBom .bPh.tb,.pgBom .bPh.lt,.pgBom .bPh.bn,.pgBom .bPh.sk{color:var(--ink-3)}
html:not([data-mode="light"]) .pgBom .bPh.f{color:#FFC46B} html:not([data-mode="light"]) .pgBom .bPh.fr{color:#7CC7FF} html:not([data-mode="light"]) .pgBom .bPh.d{color:#C4A5FF}
html:not([data-mode="light"]) .pgBom .bPh.r{color:#FF9A9A} html:not([data-mode="light"]) .pgBom .bPh.s{color:#7EE29A} html:not([data-mode="light"]) :is(.pgBom .bPh.rf,.pgBom .bPh.gz,.pgBom .bPh.pg){color:#F2C17A}
.bInfo{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink-3); background:var(--panel); color:var(--ink); font:italic 700 11px/1 Georgia,serif; cursor:pointer; vertical-align:middle; margin-left:4px; padding:0}
.bInfo[aria-expanded="true"]{background:var(--ink); color:var(--panel)}
@media (max-width:700px){
  .pgBom .bomT thead{display:none}
  .pgBom .bomT tr{display:grid; grid-template-columns:auto auto 1fr; gap:2px 8px; padding:8px 10px; border-bottom:1px solid var(--line)}
  .pgBom .bomT td{border:0; padding:0}
  .pgBom .bomT td.bck,.pgBom .bomT td.bn{display:none}
  .pgBom .bomT td.bit{grid-column:3} .pgBom .bomT td.buf,.pgBom .bomT td.bph,.pgBom .bomT td.bm{grid-column:1 / -1}
  .pgBom .bomT tr.bGrp,.pgBom .bomT tr.bSub,.pgBom .bomT tr.bNote{display:block} .pgBom .bomT tr.bNote td{padding:6px 0 0}
}
/* 20261030q: Match my house on the roof card */
.dqMatchHouse{display:inline-flex; align-items:center; gap:8px; margin:8px 0 4px; font:700 13.5px/1.2 Figtree,sans-serif; border:1.5px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:10px; padding:9px 12px; cursor:pointer; min-height:40px}
.dqMatchHouse i{width:18px; height:18px; border-radius:5px; background:var(--c); box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.dqMatchHouse[aria-pressed="true"]{border-color:#22D3EE; box-shadow:0 0 0 3px rgba(34,211,238,.22)}