/* the hidden attribute must win over any display rule below */
[hidden]{display:none !important}
/* ============================================================
   AerialQuote — Deck Designer page.  Uses the site's tokens from
   styles.css, so light and dark mode both work.
   ============================================================ */
.dzWrap{max-width:1320px; margin:0 auto; padding:22px 20px 70px}
.dzHead{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:flex-end; justify-content:space-between; margin-bottom:16px}
.dzHead h1{font-size:clamp(28px,3.4vw,40px); font-weight:800}
.dzHead p{margin:6px 0 0; color:var(--ink-2); max-width:70ch; font-size:16px}
.dzNew{display:inline-block; font:800 11px/1 Figtree,sans-serif; letter-spacing:.14em; color:#1A1203;
  background:var(--amber); padding:5px 8px; border-radius:6px; margin-bottom:8px}
.dzAddr{position:relative; display:flex; gap:8px; flex:1 1 380px; max-width:560px}
.dzAddr input{flex:1; min-width:0; background:var(--panel); border:1px solid var(--line-2); border-radius:12px;
  padding:13px 14px; font:500 16px/1.2 Figtree,sans-serif; color:var(--ink)}
.dzAc{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)}
.dzAc button{display:block; width:100%; text-align:left; border:0; background:transparent; padding:11px 14px; cursor:pointer; color:var(--ink)}
.dzAc button:hover,.dzAc button.on{background:rgba(110,156,255,.12)}
.dzAc b{display:block; font-weight:700; font-size:15px} .dzAc i{font-style:normal; font-size:13px; color:var(--ink-3)}
.dzAc .by{font-size:11px; color:var(--ink-3); padding:6px 14px; text-align:right}

.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: map + panel ---------- */
.dzApp{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr); border:1px solid var(--line-2);
  border-radius:18px; overflow:hidden; overflow:clip; background:var(--card)}
.dzMap{position:relative; min-height:620px; background:#04060C}
#dzMap{position:absolute; inset:0}
.dzMapMsg{display:flex; justify-content:center; padding:18px; text-align:center}
.dzMapMsg 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}
.dzMapMsg b{color:#fff}
/* until a house is loaded the map box shows the Deck Designer picture, not a black hole */
.dzPh{position:absolute; inset:0; z-index:3; background:#070C18; overflow:hidden}
.dzPh img{display:block; width:100%; height:auto}
.dzPh .dzMapMsg{margin-top:-58px; position:relative}
.dzMap.live .dzPh{display:none}
.dzMapBar{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}
/* the map tools, locked to the top of the map like the main tool */
.dzTools{display:flex; gap:4px; padding:5px; border-radius:13px; background:rgba(5,9,18,.88); border:1px solid rgba(110,156,255,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.4); backdrop-filter:blur(6px)}
.dzTools button{border:0; background:transparent; color:#DDE6FA; font:700 14px/1 Figtree,sans-serif; padding:10px 16px; border-radius:9px; cursor:pointer}
.dzTools button:hover{background:rgba(110,156,255,.16)}
.dzTools button.on{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); color:#fff}
.dzTools button:disabled{opacity:.4; cursor:default; background:transparent}
.dzMapBar > *{pointer-events:auto}
.dzTip{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:440px; backdrop-filter:blur(6px)}
.dzTip b{color:#FFD79A}
.dzMapBtns{position:absolute; left:12px; bottom:12px; display:flex; gap:8px; z-index:5; flex-wrap:wrap}
.dzMapBtns button{border:1px solid rgba(255,255,255,.25); background:rgba(5,9,18,.86); color:#EDF2FF; font:700 13.5px/1 Figtree,sans-serif;
  padding:11px 13px; border-radius:10px; cursor:pointer}
.dzMapBtns button.pri{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border:0}
.dzSideLab{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}
.dzSideLab b{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.dzSideLab span{display:block}
.dzSideLab.house{background:#FFB020; color:#1A1203; border-color:#FFB020}

.dzPanel{padding:16px; display:grid; gap:12px; align-content:start; border-left:1px solid var(--line); max-height:none}
.dzSteps{display:flex; flex-wrap:wrap; gap:6px}
.dzSteps button{font:700 12px/1 Figtree,sans-serif; padding:6px 9px; border-radius:99px; border:1px solid var(--line-2); color:var(--ink-3); background:transparent; cursor:pointer}
.dzSteps button:hover{border-color:#6E9CFF; color:var(--ink)}
.dzSteps button.done{color:var(--mint); border-color:rgba(18,226,154,.4)}
.q{background:var(--panel-2); border:1px solid var(--line-2); border-radius:14px; padding:13px; display:grid; gap:9px}
html[data-mode="light"] .q{background:#F4F7FD}
.q h3{font:700 16.5px/1.25 Outfit,sans-serif; letter-spacing:-.01em}
.q p{margin:0; color:var(--ink-2); font-size:14px; line-height:1.45}
.q.off{opacity:.45; pointer-events:none}
.seg{display:flex; flex-wrap:wrap; gap:4px; background:rgba(5,9,18,.35); border:1px 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:600 13.5px/1.2 Figtree,sans-serif; padding:9px 11px; border-radius:9px; cursor:pointer; text-align:left}
.seg button small{display:block; font-weight:500; font-size:11.5px; opacity:.75; 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(110px,1fr)); gap:8px}
.fld{display:grid; gap:5px}
.fld label{font:700 11.5px/1.2 Figtree,sans-serif; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
.fld input,.fld select,.fld textarea{background:var(--panel); color:var(--ink); border:1px solid var(--line-2); border-radius:9px;
  padding:10px; font:600 15px/1.2 Figtree,sans-serif; width:100%; min-width:0}
.fld textarea{font-weight:500; font-size:14px; line-height:1.4; resize:vertical}
.fld small{font-size:12px; color:var(--ink-3)}
.fld .chg{border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset}
.fld.wide{grid-column:1/-1}
.sides{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.sides button{border:1px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:10px; padding:9px 10px;
  text-align:left; cursor:pointer; font:600 13.5px/1.25 Figtree,sans-serif}
.sides button b{display:block; color:var(--blue-lit); font-size:12px; letter-spacing:.04em}
.sides button .len{display:block; font-weight:700; font-size:15px; margin:2px 0 1px}
.sides button i{display:block; font-style:normal; font-weight:500; font-size:12px; color:var(--ink-3)}
.sides button[aria-pressed="true"]{border-color:var(--amber); background:rgba(255,176,32,.08)}
.loads{display:grid; gap:6px}
.loads button{display:grid; grid-template-columns:1fr auto; gap:2px 10px; text-align:left; border:1px solid var(--line-2); background:var(--panel);
  color:var(--ink); border-radius:11px; padding:10px 11px; cursor:pointer}
.loads button b{font-size:14.5px} .loads button span{grid-column:1; font-size:12.5px; color:var(--ink-3); line-height:1.35}
.loads button em{grid-row:1/3; grid-column:2; align-self:center; font:600 13px/1 "IBM Plex Mono",monospace; font-style:normal; color:var(--ink-2)}
.loads button[aria-pressed="true"]{border-color:var(--blue-lit); background:rgba(47,107,255,.12)}
.warnBox{font-size:13px; line-height:1.45; color:#FFD79A; background:rgba(255,176,32,.08); border:1px dashed rgba(255,176,32,.55); border-radius:10px; padding:9px 11px}
html[data-mode="light"] .warnBox{color:#6B4A07; background:#FFF8E8}
.outBox{font-size:13.5px; line-height:1.45; color:#FFC2CA; background:rgba(255,90,110,.08); border:1px solid rgba(255,90,110,.5); border-radius:10px; padding:10px 12px}
html[data-mode="light"] .outBox{color:#7A1020; background:#FFF0F2}

/* answer 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)}
.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 38px/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:1px solid var(--line-2); border-radius:12px; padding:9px 10px; min-width:0}
.tile .tl{font:700 10.5px/1 Figtree,sans-serif; letter-spacing:.1em; color:var(--ink-3)}
.tile .tv{font:600 16.5px/1.25 "IBM Plex Mono",monospace; margin-top:5px; overflow-wrap:anywhere}
.tile.mint{border-color:rgba(18,226,154,.45)} .tile.mint .tl,.tile.mint .tv{color:var(--mint)}
.acts{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px}
.acts button{border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); border-radius:11px; padding:10px 6px;
  font:700 13.5px/1.2 Figtree,sans-serif; cursor:pointer; display:grid; justify-items:center; gap:4px}
.acts button svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.acts button.pri{background:linear-gradient(180deg,#6E9CFF,#2F6BFF); color:#fff; border:0}
.acts button:disabled{opacity:.45; cursor:default}
.ans .legal{margin-top:12px}
.rows{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.rows button{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; width:100%; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink); padding:11px 13px; font:600 14.5px/1.3 Figtree,sans-serif; cursor:pointer; text-align:left}
.rows button:last-child{border-bottom:0}
.rows .rv{font:600 13px/1 "IBM Plex Mono",monospace; color:var(--ink-2)}

/* ---------- below the app ---------- */
.dzSec{margin-top:34px}
.dzSec > h2{font:800 clamp(22px,2.4vw,30px)/1.15 Outfit,sans-serif; margin-bottom:6px}
.dzSec > 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}
.draw{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); gap:14px}
.dcard{background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:13px; display:grid; gap:8px; align-content:start; min-width:0}
.dcard h3{font:700 17px/1.2 Outfit,sans-serif}
.dcard p{margin:0; font-size:13.5px; color:var(--ink-3)}
.svgWrap{overflow-x:auto; border-radius:10px; position:relative; cursor:zoom-in}
.svgWrap svg{display:block; width:100%; height:auto; min-width:440px}
@media (max-width:600px){ .svgWrap::after{content:"Tap the drawing to see it full screen"; display:block; font-size:11.5px; color:var(--ink-3); padding:6px 2px 0; position:sticky; left:0} }
.shop{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:12px; align-items:start}
.grp{background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:13px; min-width:0}
.grp h3{font:700 16px/1.2 Outfit,sans-serif; display:flex; justify-content:space-between; gap:8px; margin-bottom:4px}
.grp h3 span{font:500 12px/1.3 "IBM Plex Mono",monospace; color:var(--ink-3)}
.grp .note{font-size:12.5px; color:var(--ink-3); margin:0 0 6px}
.item{display:grid; grid-template-columns:52px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line)}
.item b{font:600 14px/1.3 "IBM Plex Mono",monospace; color:var(--blue-lit); text-align:right}
.item div{font-size:14px; line-height:1.35}
.item small{display:block; color:var(--ink-3); font-size:12.5px; margin-top:2px}
.rowBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* site plan + revisions */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:14px}
@media(max-width:900px){ .two{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}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:10px}
.chk{display:grid; gap:8px}
.chk div{display:grid; grid-template-columns:22px 1fr; gap:8px; font-size:14px; color:var(--ink-2); line-height:1.4}
.chk i{font-style:normal; font-weight:800}
.chk .ok i{color:var(--mint)} .chk .bad i{color:var(--amber)}
.chk b{color:var(--ink)}
.diff{width:100%; border-collapse:collapse; font-size:13.5px}
.diff td{padding:6px 4px; border-bottom:1px solid var(--line); color:var(--ink-2)}
.diff td.n{font-family:"IBM Plex Mono",monospace; text-align:right; white-space:nowrap; color:var(--ink)}
.diff tr.up td.n{color:var(--amber)} .diff tr.new td.n{color:var(--mint)} .diff tr.gone td{text-decoration:line-through; opacity:.7}

/* permit set */
.buy{background:var(--card); border:1px solid rgba(110,156,255,.45); border-radius:16px; padding:18px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px}
@media(max-width:820px){ .buy{grid-template-columns:1fr} }
.buy h3{font:800 21px/1.2 Outfit,sans-serif; margin:0 0 6px}
.buy .pr{font:600 30px/1 "IBM Plex Mono",monospace; color:var(--blue-lit); margin:6px 0 10px}
.buy ul{margin:0 0 12px; padding-left:18px; display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
.buy .fine{font-size:12.5px; color:var(--ink-3); margin-top:8px}
.buy .refund{margin-top:12px; font-size:13.5px; line-height:1.5; color:#BFF5DF; background:rgba(18,226,154,.08); border:1px solid rgba(18,226,154,.35); border-radius:10px; padding:10px 12px}
html[data-mode="light"] .buy .refund{color:#05543A; background:#EAFBF4}
.buy.out{border-color:rgba(255,176,32,.55)}
.scope h4{margin:0 0 8px; font:800 12px/1 Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.ack{display:grid; gap:10px; background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:15px; margin-top:12px}
.ack label{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14px; line-height:1.5; color:var(--ink-2); cursor:pointer}
.ack input{width:18px; height:18px; margin-top:2px; accent-color:var(--blue)}
.viewer{background:#20283A; border-radius:14px; padding:18px 12px; margin-top:12px; position:relative}
.viewer .vScroll{overflow:hidden}
.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}
.pages button.on{background:#2F6BFF; color:#fff; border-color:#2F6BFF}

/* ---------- the printed sheet (letter, landscape) ---------- */
.sheetFit{transform-origin:top left}
.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) 222px; font:400 12px/1.4 Figtree,Arial,sans-serif; box-shadow:0 20px 50px rgba(0,0,0,.45)}
.sheetMain{padding:16px 16px 12px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:9px; 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:9px; min-height:0}
.box{border:1.5px solid var(--pInk); padding:7px 8px; display:flex; flex-direction:column; min-height:0; min-width:0}
.box .t{font:800 10.5px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px}
.box svg{flex:1 1 auto; min-height:0; width:100%; height:100%; display:block}
.notes{margin:0; padding-left:15px; font-size:10.5px; line-height:1.42}
.box.tight .notes{font-size:9.3px; line-height:1.3}
.pTable{width:100%; border-collapse:collapse; font-size:10px}
.pTable td{padding:2px 3px; border-bottom:1px solid var(--pLine); color:var(--pInk); vertical-align:top}
.pTable td:first-child{color:#1F55D6; font:600 10px "IBM Plex Mono",monospace; white-space:nowrap; text-align:right; width:30px}
.pList{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:start; font-size:10px}
.pCol{display:grid; gap:8px; align-content:start}
.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}
.titleBlock{border-left:2px solid var(--pInk); padding:16px 13px; display:flex; flex-direction:column; gap:9px; font-size:11.5px; min-height:0}
.titleBlock .logo{font:800 18px/1 Outfit,sans-serif}
.titleBlock dl{margin:0; display:grid; gap:6px}
.titleBlock dt{font:800 9px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pInk2)}
.titleBlock dd{margin:2px 0 0; font-weight:600}
.titleBlock .disc{font-size:9.2px; line-height:1.38; color:var(--pInk2); border-top:1px solid var(--pLine); padding-top:8px}
.titleBlock .disc b{color:var(--pInk)}
.revTbl{width:100%; border-collapse:collapse; font-size:9.5px}
.revTbl td{border-top:1px solid var(--pLine); padding:3px 2px; vertical-align:top; color:var(--pInk)}
.revTbl td:first-child{font-weight:800; width:16px}
.sheetNo{margin-top:auto; border-top:2px solid var(--pInk); padding-top:8px; font:800 30px/1 Outfit,sans-serif}
.sheetNo small{display:block; font:700 10px/1.2 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--pInk2); margin-top:4px}
.revStamp{display:inline-block; margin-left:8px; padding:2px 6px; border:2px solid #D2324A; color:#D2324A; font:800 10px/1 Figtree,sans-serif; letter-spacing:.08em; vertical-align:middle}
.wm{position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; z-index:3}
.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}

/* modal */
.dzBack{position:fixed; inset:0; background:rgba(3,5,12,.66); display:grid; place-items:center; padding:16px; z-index:200}
.dzBack[hidden]{display:none}
.dzPop{width:min(540px,100%); max-height:86vh; overflow:auto; background:var(--panel); border:1px solid var(--line-2); border-radius:18px; padding:18px}
.dzPop h3{margin:0 0 6px; font:800 20px/1.25 Outfit,sans-serif}
.dzPop p{margin:0 0 10px; color:var(--ink-2); font-size:14.5px}
.dzPop .opt{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; border:1px solid var(--line-2); border-radius:12px; padding:12px; margin-top:8px;
  cursor:pointer; background:transparent; color:var(--ink); text-align:left; width:100%}
.dzPop .opt b{font:700 15px/1.25 Figtree,sans-serif} .dzPop .opt span{grid-column:2; font-size:13px; color:var(--ink-3)}
.dzPop .opt i{grid-row:span 2; font-style:normal; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(110,156,255,.14); color:var(--blue-lit); font-weight:800}
.dzPop .x{float:right; border:0; background:rgba(140,170,230,.12); color:var(--ink); width:34px; height:34px; border-radius:9px; cursor:pointer}
.line{display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.line b{font:600 13.5px/1.35 "IBM Plex Mono",monospace; color:var(--ink); text-align:right}
.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)}

/* desktop: the map stays in view while the questions scroll beside it */
@media (min-width:981px){
  .dzMap{position:sticky; top:76px; align-self:start; height:calc(100vh - 96px); min-height:520px; max-height:900px}
}
@media (max-width:980px){
  .dzApp{grid-template-columns:1fr}
  .dzMap{min-height:56vh}
  .dzPanel{border-left:0; border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .dzWrap{padding:14px 12px 60px}
  .acts{grid-template-columns:repeat(3,1fr)}
  .ans .big b{font-size:32px}
}

/* ---------- print: only the plan set (or the list) ---------- */
#printRoot{display:none}
@media print{
  @page{size:letter landscape; margin:.25in}
  html,body{background:#fff !important}
  body > *:not(#printRoot){display:none !important}
  #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}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
.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}
/* light mode: the site's --panel stays dark, so lighten it inside this page */
html[data-mode="light"] .dzWrap, html[data-mode="light"] .dzPop{--panel:#FFFFFF; --panel-2:#F4F7FD}
html[data-mode="light"] .dzAc{background:#fff}
html[data-mode="light"] .dzMap{background:#DDE4F1}


/* the permit-set demand button (launch only) */
.vote{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap;
  border:1px solid rgba(255,176,32,.55); background:rgba(255,176,32,.08); border-radius:16px; padding:16px 18px}
.vote > div:first-child{display:grid; gap:3px; min-width:min(100%, 260px); flex:1}
.vote b{font-size:16px; color:var(--ink)}
.vote span{font-size:14px; color:var(--ink-2)}
.vote .btn{white-space:normal; text-align:center}
.vote.done{border-color:rgba(18,226,154,.5); background:rgba(18,226,154,.07)}
.voteBtns{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:820px){ .dzPh .dzMapMsg{margin-top:0; padding:12px} .dzMapMsg span{font-size:13.5px} }

/* full-screen drawings */
.fsBtn{position:absolute; right:8px; top:8px; z-index:2; font:700 12.5px/1 Figtree,sans-serif; color:#EDF2FF; background:rgba(5,9,18,.82);
  border:1px solid rgba(110,156,255,.45); border-radius:8px; padding:7px 10px; pointer-events:none; opacity:.85; transition:opacity .2s}
.svgWrap:hover .fsBtn{opacity:1; border-color:#6E9CFF}
.dzLb{position:fixed; inset:0; z-index:500; background:#070C18; display:flex; flex-direction:column}
.dzLb.lightBg{background:#FFFFFF}
.dzLbTop{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(110,156,255,.25); background:#0A1120; color:#EDF2FF}
.dzLbTop b{font:700 17px/1.2 Figtree,sans-serif}
.dzLbBtns{display:flex; gap:8px}
.dzLbBtns button{font:700 14px/1 Figtree,sans-serif; color:#EDF2FF; background:rgba(110,156,255,.14); border:1px solid rgba(110,156,255,.45);
  border-radius:10px; padding:10px 14px; cursor:pointer}
#dzLbX{font-size:18px; padding:8px 14px; background:#2F6BFF; border-color:#2F6BFF}
.dzLbBody{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; cursor:zoom-out}
.dzLbBody svg{display:block; width:100%; height:100%; max-width:100%; max-height:100%; cursor:zoom-in}
.dzLb.zoom .dzLbBody{display:block}
.dzLb.zoom .dzLbBody svg{width:200%; height:auto; max-width:none; max-height:none; cursor:zoom-out}
@media (max-width:600px){ .dzLb.zoom .dzLbBody svg{width:320%} .fsBtn{display:none} }

/* deck board pattern picker */
.pats{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px}
.pats button{display:grid; justify-items:start; gap:3px; text-align:left; border:1px solid var(--line-2); background:var(--panel); color:var(--ink);
  border-radius:10px; padding:9px 10px; cursor:pointer; font:600 13px/1.2 Figtree,sans-serif}
.pats button svg{width:48px; height:32px; margin-bottom:3px}
.pats button small{font-weight:500; font-size:11.5px; color:var(--ink-3)}
.pats button[aria-pressed="true"]{border-color:#6E9CFF; background:rgba(47,107,255,.16); box-shadow:inset 0 0 0 1px #6E9CFF}
.q .note{margin:0; font-size:12.5px; color:var(--ink-3)}

/* progress gauge + per-question confirm */
.dzProg{display:grid; gap:6px}
.dzProg .bar{height:8px; border-radius:99px; background:rgba(110,156,255,.14); overflow:hidden}
.dzProg .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#2F6BFF,#6E9CFF); transition:width .35s ease}
.dzProg.full .bar i{background:linear-gradient(90deg,#0FB57E,#12E29A)}
.dzProg span{font-size:12.5px; color:var(--ink-3); line-height:1.4}
.dzProg b{color:var(--ink)}
.dzProg.full b{color:var(--mint)}
.qHead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.qHead h3{margin:0}
.okBtn{flex:none; font:700 12.5px/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 12px/1 Figtree,sans-serif; color:var(--mint)}
.q.ok{border-color:rgba(18,226,154,.35)}
.q.off .okBtn{display:none}
/* several sets of stairs */
.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}
.stSet > b{grid-area:t; font-size:13.5px}
.stSides{grid-area:s; display:flex; gap:4px; flex-wrap:wrap}
.stSides button{border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font:600 12.5px/1 Figtree,sans-serif; padding:7px 9px; border-radius:8px; cursor:pointer}
.stSides button[aria-pressed="true"]{color:#fff; background:linear-gradient(180deg,#6E9CFF,#2F6BFF); border-color:transparent}
.stSet small{grid-area:m; font-size:11.5px; color:var(--ink-3)}
.stDel{grid-area:x; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:14px}
.stDel:hover{border-color:#E5566B; color:#E5566B}
.stAdd{justify-self:start; border:1px dashed rgba(110,156,255,.6); background:transparent; color:var(--blue-lit, #8FB0FF); font:700 13px/1 Figtree,sans-serif; padding:10px 12px; border-radius:10px; cursor:pointer}

/* nudges: people skip instructions, so the next thing to do flashes */
@keyframes dzGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,0)} 50%{box-shadow:0 0 0 4px rgba(255,176,32,.55)}}
.dzTip.flash{border-color:#FFB020; animation:dzGlow 1.3s ease-in-out infinite}
#dzTools button.nudge{animation:dzGlow 1.1s ease-in-out infinite; background:rgba(255,176,32,.22); color:#FFD79A}
.dzSideLab.stair{background:#FFB020; color:#1A1203; border-color:#FFB020}
.dzSideLab.stair.flash{animation:dzGlow 1.1s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ .dzTip.flash, #dzTools button.nudge, .dzSideLab.stair.flash{animation:none} }
/* off-screen stage for building the emailed PDF */
.pdfStage{position:fixed; left:-20000px; top:0; width:1008px; z-index:-1}
.pdfStage .sheet{box-shadow:none; margin:0 0 20px}

/* decks-designed tally */
.dzCount{display:inline-flex; align-items:center; gap:8px; margin:10px 0 0; font-size:14.5px; color:var(--ink-2, #A7B7D6)}
.dzCount b{font:700 16px/1 "IBM Plex Mono","Courier New",monospace; color:#12E29A}
.dzCount i{width:8px; height:8px; border-radius:50%; background:#12E29A; box-shadow:0 0 0 0 rgba(18,226,154,.6); animation:dzLive 2s ease-out infinite}
@keyframes dzLive{0%{box-shadow:0 0 0 0 rgba(18,226,154,.55)} 70%{box-shadow:0 0 0 8px rgba(18,226,154,0)} 100%{box-shadow:0 0 0 0 rgba(18,226,154,0)}}
@media (prefers-reduced-motion: reduce){ .dzCount i{animation:none} }

/* sheet viewer arrows: blue like the buttons, faded at either end */
.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}
@media (max-width:600px){ .vArrow{width:38px; height:38px; font-size:24px; top:auto; bottom:62px} }
.qSub{margin:12px 0 6px;font:700 13.5px/1.2 Outfit,sans-serif;color:var(--ink,#0F1A2E)}
/* the stairs bubble on the map is a drag handle */
.dzSideLab.grab{pointer-events:auto; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; padding:6px 12px 7px; z-index:3}
.dzSideLab.grab.drag{cursor:grabbing; transform:translate(-50%,-50%) scale(1.08); box-shadow:0 8px 24px rgba(0,0,0,.5)}
.stSet.hit{animation:dzHit 1.6s ease-out}
@keyframes dzHit{0%,30%{box-shadow:0 0 0 3px #12E29A; border-color:#12E29A}100%{box-shadow:0 0 0 0 transparent}}
/* phone + tablet: the checklist and % bar ride along at the top while you scroll */
.dzStick{display:grid; gap:8px}
@media (max-width:980px){
  .dzStick{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); box-shadow:0 10px 18px -14px rgba(0,0,0,.6)}
  .dzStick .dzSteps{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .dzStick .dzSteps::-webkit-scrollbar{display:none}
  .dzStick .dzSteps button{flex:none}
  .dzStick .dzProg span{font-size:12px}
}
@media (prefers-reduced-motion: reduce){ .stSet.hit{animation:none} }
/* each set of stairs: how high the deck is right there */
.stSet{grid-template-areas:"t s x" "t m x" "h h h"}
.stH{grid-area:h; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; border-top:1px solid var(--line); padding-top:8px; margin-top:4px}
.stH label{font-size:12.5px; font-weight:700; color:var(--ink-2)}
.stH span{display:flex; align-items:center; gap:4px}
.stH input{width:56px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line-2); border-radius:8px; padding:7px 8px; font:600 14px/1 Figtree,sans-serif}
.stH i{font-style:normal; font-size:12px; color:var(--ink-3); margin-right:4px}
.stH em{font-style:normal; font-size:12px; color:var(--mint, #12E29A); font-weight:600; flex-basis:100%}
.stSet.wait{border-color:#FFB020; animation:dzGlow 1.1s ease-in-out infinite}
.stSet .mv{color:#FFB020}
@media (prefers-reduced-motion: reduce){ .stSet.wait{animation:none} }