/* Shed Planner — additions to the shared planner styles (styles.css). */

/* ③ Size: common width × depth chips */
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:transparent;border-radius:20px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--ink-2);font-family:"JetBrains Mono",monospace}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.chip.on::before{content:"✓ "}

/* doors & windows editor */
.openings{display:grid;gap:8px}
.op-card{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:8px 10px;display:grid;gap:8px}
.op-head{display:flex;align-items:center;gap:8px}
.op-head b{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:11px;flex:none}
.op-head select{flex:1}
.op-x{border:0;background:transparent;font-size:18px;line-height:1;color:var(--ink-3);cursor:pointer;padding:2px 6px;border-radius:6px}
.op-x:hover{color:var(--err);background:var(--line)}
.op-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.op-f{display:grid;gap:3px;font-size:12px;color:var(--ink-2)}
.op-f em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3)}
.op-f .inp input{padding:5px 6px}
.op-c{grid-column:1/-1}
.op-cw{display:flex;gap:6px;align-items:center}
.op-cw .inp{flex:1}
.op-mid{padding:5px 9px;font-size:12px}
.op-mid.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.op-add{display:flex;gap:6px;flex-wrap:wrap}
.op-add .btn{padding:6px 10px;font-size:12px}
.openings .hint{font-size:11px;color:var(--ink-3);margin:0}

/* one-click fixes under a fit-check message */
.fixes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.btn.fix{padding:4px 10px;font-size:12px;background:var(--panel);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));color:var(--accent);font-weight:600}
.btn.fix:hover{border-color:var(--accent)}
@media print{.fixes{display:none}}

/* drawings (SVG, drawn by draw.js) */
:root{--wood-fill:#f1dcb8;--wood-fill-2:#e6c693;--wood-stroke:#6b4e2e;--pt-fill:#d9d3a7;--sid-fill:#c9d4c7;--roof-fill:#6d7076;--conc-fill:#d5d1c9;--hw:#0e6f8f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--wood-fill:#5b4a33;--wood-fill-2:#7a6142;--wood-stroke:#e2c79c;--pt-fill:#5a5839;--sid-fill:#46564a;--roof-fill:#8b8f96;--conc-fill:#55534f;--hw:#5cc3e6}}
:root[data-theme="dark"]{--wood-fill:#5b4a33;--wood-fill-2:#7a6142;--wood-stroke:#e2c79c;--pt-fill:#5a5839;--sid-fill:#46564a;--roof-fill:#8b8f96;--conc-fill:#55534f;--hw:#5cc3e6}
.plans-card .plans{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
.plans-note{grid-column:1/-1;margin:0}
svg.plan{width:100%;height:auto;display:block;max-height:520px}
.zoom-body svg.plan{width:100%;height:100%;max-height:none}
svg.plan rect,svg.plan line,svg.plan polygon,svg.plan circle,svg.plan path,svg.plan polyline{vector-effect:non-scaling-stroke}
svg.plan .fr{fill:var(--wood-fill);stroke:var(--wood-stroke);stroke-width:.8}
svg.plan .pt{fill:var(--pt-fill);stroke:var(--wood-stroke);stroke-width:.8}
svg.plan .osb{fill:var(--wood-fill-2);stroke:var(--wood-stroke);stroke-width:.6}
svg.plan .sid{fill:var(--sid-fill);stroke:var(--ink-3);stroke-width:.8}
svg.plan .trim{fill:var(--panel);stroke:var(--ink-3);stroke-width:.8}
svg.plan .door{fill:color-mix(in srgb,var(--sid-fill) 70%,var(--ink));stroke:var(--ink-3);stroke-width:.8}
svg.plan .gls{fill:#cfe6f0;stroke:var(--ink-3);stroke-width:.6}
svg.plan .rf,svg.plan .rfm{fill:var(--roof-fill);stroke:var(--ink-2);stroke-width:.8}
svg.plan .conc,svg.plan .blk{fill:var(--conc-fill);stroke:var(--ink-3);stroke-width:.8}
svg.plan .grav{fill:color-mix(in srgb,var(--conc-fill) 60%,transparent);stroke:var(--ink-3);stroke-width:.5;stroke-dasharray:3 2}
svg.plan .stl{fill:#555;stroke:#222;stroke-width:.5}
/* connector marks (draw.js hwSym) */
svg.plan .hwm{fill:var(--hw);stroke:var(--panel);stroke-width:.8}
svg.plan .hwo{fill:var(--panel);stroke:var(--hw);stroke-width:1.4}
svg.plan .hwu{fill:none;stroke:var(--hw);stroke-width:2.2}
svg.plan .hwl{stroke:var(--hw);stroke-width:1.2}
svg.plan .ground{stroke:var(--ink-3);stroke-width:1.4}
svg.plan .hid{fill:none;stroke:var(--ink-3);stroke-width:.8;stroke-dasharray:4 3}
svg.plan .cut{stroke:var(--err);stroke-width:1.4}
svg.plan .dim{stroke:var(--accent);stroke-width:1}
svg.plan .floorfill{fill:var(--panel-2);stroke:none}
svg.plan .wallband{fill:color-mix(in srgb,var(--wood-fill) 45%,transparent);stroke:var(--wood-stroke);stroke-width:.6}
svg.plan .glassline{stroke:#5aa7c9;stroke-width:2}
svg.plan .surf{fill:none;stroke:var(--ink-2);stroke-width:1.2}
svg.plan .pc{fill:color-mix(in srgb,var(--sid-fill) 55%,transparent);stroke:var(--ink-2);stroke-width:.8}
svg.plan .pc.full{fill:var(--sid-fill)}
svg.plan .hole{fill:var(--panel);fill-opacity:.85;stroke:var(--err);stroke-width:.8;stroke-dasharray:4 3}
svg.plan text{fill:var(--ink);font-family:"JetBrains Mono",monospace;paint-order:stroke;stroke:var(--panel-2);stroke-linejoin:round}
svg.plan text.dt{fill:var(--accent);font-weight:600}
svg.plan text.lbl{fill:var(--ink-2)}
svg.plan text.pcl{fill:var(--ink);font-weight:600}

/* lumber cutting diagrams */
.buy{display:grid;gap:14px}
.mat-block{border:1px solid var(--line);border-radius:10px;padding:12px}
.mat-block h4{margin:0 0 6px;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mat-block h4 span{font-weight:400;color:var(--ink-3);font-size:12px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2);margin:2px 0 8px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:11px;height:11px;border-radius:3px;border:1px solid var(--wood-stroke)}
.legend .off-sw{background:repeating-linear-gradient(45deg,transparent 0 3px,color-mix(in srgb,var(--ink-3) 35%,transparent) 3px 4px)}
.board-row{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:center;margin-bottom:4px}
.board-row small{font:11px "JetBrains Mono",monospace;color:var(--ink-3);white-space:nowrap}
.board{display:flex;height:22px;border:1px solid var(--wood-stroke);border-radius:3px;overflow:hidden;background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--ink-3) 20%,transparent) 4px 5px)}
.board .pc{flex:0 1 auto;font:10px "JetBrains Mono",monospace;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;color:#2a2118;min-width:0}
.board .kerf{flex:none;width:1px;background:var(--wood-stroke)}
.board .off{flex:1;font:10px "JetBrains Mono",monospace;display:flex;align-items:center;justify-content:center;color:var(--ink-3);overflow:hidden;white-space:nowrap}

/* sheet layouts */
.sheet-block{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:14px}
.sheet-block:last-child{margin-bottom:0}
.sheet-title{margin:0 0 10px;font-size:14px}
.sheet-title small{font-weight:400;color:var(--ink-3)}
.sheet-block .plans{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sheet-block .note{margin:10px 0 8px}
.sheets{display:flex;gap:10px;flex-wrap:wrap}
.sheets figure{margin:0;text-align:center}
.sheets figcaption{font-size:11px;color:var(--ink-3)}
.sheets svg{height:120px;width:auto;display:block}
.sheets .sheet{fill:none;stroke:var(--wood-stroke);stroke-width:.8;vector-effect:non-scaling-stroke}
.sheets rect:not(.sheet){fill:color-mix(in srgb,var(--sid-fill) 55%,transparent);stroke:var(--ink-2);stroke-width:.6;vector-effect:non-scaling-stroke}
.sheets rect.full{fill:var(--sid-fill)}
.sheets text{font-family:"JetBrains Mono",monospace;fill:var(--ink)}

.stats.boxed{border:1px solid var(--line);border-radius:10px;margin-bottom:14px}
.stats.boxed .stat{border-top:0}
.note-inline{color:var(--ink-3);font-size:12px;font-weight:400}
ol.steps b{display:block}
@media print{.plans-card .plans,.sheet-block .plans{grid-template-columns:1fr 1fr}.sheet-block,.mat-block{break-inside:avoid}}

/* step-by-step build view */
.bstep{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr);gap:16px;align-items:start}
@media (max-width:900px){.bstep{grid-template-columns:1fr}}
#buildViewer{position:relative;height:min(52vh,460px);min-height:300px;border-radius:10px;overflow:hidden;background:linear-gradient(var(--viewer-top),var(--viewer-bot));touch-action:none}
#buildViewer canvas{display:block;width:100%;height:100%;cursor:grab}
#buildViewer canvas:active{cursor:grabbing}
#buildViewer .labels{display:none}
.bstep-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bstep-nav span{font:600 13px "JetBrains Mono",monospace;color:var(--ink-2)}
.bstep-dots{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 4px}
.bstep-dots button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);font:600 11px "JetBrains Mono",monospace;color:var(--ink-3);cursor:pointer;padding:0}
.bstep-dots button.done{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.bstep-dots button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bstep-side h3{margin:10px 0 6px;font-size:16px}
#bText p{margin:0 0 8px;font-size:13px;color:var(--ink-2)}
#bText p b{display:block;color:var(--ink);font-size:13px}
#bText .bcount{font-size:12px;color:var(--ink-3)}
@media print{.build-card{display:none}}

/* Paint colours: swatches, a "Default" chip and any colour */
.paint-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.paint-sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--c);cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px var(--panel)}
.paint-sw:not([data-v=""]){font-size:0}
.paint-sw[data-v=""]{width:auto;border-radius:14px;padding:0 10px 0 26px;font:600 11.5px Inter,system-ui,sans-serif;color:var(--ink-2);background:linear-gradient(90deg,var(--c) 0 18px,var(--panel-2) 18px)}
.paint-sw.on{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--panel),0 0 0 2px var(--accent)}
.paint-sw[data-v=""].on{color:var(--accent)}
.paint-row input[type=color]{width:40px;height:30px;padding:0 2px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer}