/* ClosetTools editor (templates/closet/app.html). The brief is in docs/closettools-plan.md: a calm shop drawing,
   the elevation is the one strong thing; T4B blue only for the selection and the primary action. */
.closetPage{
  --ct-page:#f3f4f5;--ct-paper:#fbfbfa;--ct-wall:#e9ecee;--ct-ink:#1d2a33;--ct-muted:#5c6973;--ct-dim:#6b7780;
  --ct-line:#d5dade;--ct-sel:var(--pt-accent,#326b98);--ct-bad:var(--pt-danger,#a8323c);--ct-warn:#8a5a12;
  --ct-cond:'Barlow Semi Condensed','Arial Narrow',var(--pt-font);
  background:var(--ct-page);color:var(--ct-ink);
}
/* The editor fills the window under the header; the drawing scales to fit instead of scrolling. */
body.closetPage{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.closetPage>.wrap{max-width:none;padding:0;margin:0;flex:1;min-height:0;display:flex;flex-direction:column}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ct{display:flex;flex-direction:column;flex:1;min-height:0}
.ct button{font:inherit;cursor:pointer}
.ct input,.ct select{font:inherit;color:inherit}

/* toolbar */
.ctBar{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--ct-line);background:var(--ct-paper);flex-wrap:wrap}
.ctBarMain{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ctName input{border:1px solid transparent;background:transparent;border-radius:6px;padding:6px 8px;font-weight:600;font-size:16px;width:13em;max-width:40vw}
.ctName input:hover{border-color:var(--ct-line)}
.ctName input:focus{border-color:var(--ct-sel);background:#fff;outline:none}
.ctSystem{border:1px solid var(--ct-line);background:#fff;border-radius:6px;padding:6px 10px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ctSystem .ctSwatch{width:22px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.3)}
.ctQuiet{border:1px solid var(--ct-line);background:#fff;border-radius:6px;padding:6px 12px;color:var(--ct-ink)}
.ctQuiet:hover,.ctSystem:hover{border-color:var(--ct-dim)}
.ctQuiet[aria-pressed="true"]{background:var(--ct-ink);color:#fff;border-color:var(--ct-ink)}
.ctPrimary{border:1px solid var(--ct-sel);background:var(--ct-sel);color:#fff;border-radius:6px;padding:6px 14px;font-weight:600}
.ctPrimary:hover{filter:brightness(.92)}
.ctPrimary[disabled],.ctQuiet[disabled]{opacity:.5;cursor:default}
.ctWalls{display:flex;gap:2px;align-items:flex-end;margin-left:8px}
.ctWalls button{border:0;background:transparent;padding:8px 10px 6px;border-bottom:2px solid transparent;font:600 15px/1 var(--ct-cond);color:var(--ct-muted);letter-spacing:.01em}
.ctWalls button[aria-selected="true"]{color:var(--ct-ink);border-bottom-color:var(--ct-ink)}
.ctWalls button .ctBad{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ct-bad);margin-left:5px;vertical-align:middle}
.ctActions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* three columns */
.ctBody{flex:1;display:grid;grid-template-columns:200px minmax(0,1fr) 320px;min-height:0}
.ctDialog [hidden]{display:none}
.ctParts,.ctEstimate{background:var(--ct-paper);padding:16px;overflow:auto}
.ctParts{border-right:1px solid var(--ct-line)}
.ctEstimate{border-left:1px solid var(--ct-line)}
.ctParts h2,.ctEstimate h2{font-size:13px;font-weight:600;color:var(--ct-muted);margin:0 0 8px}
.ctPalette{display:grid;grid-template-columns:1fr;gap:6px}
.ctPart{display:flex;align-items:center;gap:10px;border:1px solid var(--ct-line);background:#fff;border-radius:6px;padding:6px 8px;text-align:left;touch-action:none;user-select:none;-webkit-user-select:none}
.ctPart:hover{border-color:var(--ct-dim)}
.ctPart svg{width:44px;height:30px;flex:none}
.ctPart span{font-size:13px;line-height:1.25}
.ctPart small{display:block;color:var(--ct-muted);font-size:12px}
.ctHint{font-size:12px;color:var(--ct-muted);margin:12px 0 0;line-height:1.4}

/* drawing */
.ctStage{display:flex;flex-direction:column;min-width:0;min-height:0}
.ctDrawing,.ct3d{flex:1;min-height:0;position:relative;overflow:hidden}
.ctDrawing svg{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.ct3d canvas{display:block;width:100%!important;height:100%!important}
.ctDim{font-family:var(--ct-cond);font-weight:500;fill:var(--ct-dim)}
.ctDimBig{font-family:var(--ct-cond);font-weight:600;fill:var(--ct-ink)}
.ctDimBad{fill:var(--ct-bad)}
.ctDimLine{stroke:var(--ct-dim);stroke-width:.6;fill:none;vector-effect:non-scaling-stroke}
.ctItem{cursor:grab}
.ctItem.isSel>.ctShape{stroke:var(--ct-sel);stroke-width:2.5;vector-effect:non-scaling-stroke}
.ctItem.isBad>.ctShape{stroke:var(--ct-bad);stroke-width:2;vector-effect:non-scaling-stroke}
.ctUpright{cursor:ew-resize}
.ctUpright:hover .ctUprightBar,.ctUpright.isSel .ctUprightBar{fill:var(--ct-sel)}
.ctBayHit{fill:transparent;cursor:pointer}
.ctBayHit.isSel{fill:rgba(50,107,152,.06);stroke:var(--ct-sel);stroke-width:1.2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.ctAddBay{cursor:pointer}
.ctAddBay rect{fill:transparent;stroke:var(--ct-dim);stroke-dasharray:5 4;stroke-width:1;vector-effect:non-scaling-stroke}
.ctAddBay:hover rect{stroke:var(--ct-sel);fill:rgba(50,107,152,.05)}
.ctAddBay text{font-family:var(--pt-font);font-weight:500;fill:var(--ct-muted)}
.ctClear{fill:none;stroke:var(--ct-dim);stroke-width:.8;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;opacity:.6}
.ctClear.isBad{stroke:var(--ct-bad);opacity:1}
.ctGhost{opacity:.55;pointer-events:none}
.ctOpening{cursor:move}
.ctOpening.isSel rect{stroke:var(--ct-sel);stroke-width:2}
.ct.isDragging,.ct.isDragging *{cursor:grabbing!important}

/* inspector */
.ctInspector{border-top:1px solid var(--ct-line);background:var(--ct-paper);padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:52px;font-size:14px}
.ctInspector strong{font-weight:600}
.ctInspector label{display:inline-flex;align-items:center;gap:6px;color:var(--ct-muted)}
.ctInspector input[type=number]{width:5.5em;border:1px solid var(--ct-line);border-radius:6px;padding:5px 6px;background:#fff;color:var(--ct-ink)}
.ctInspector select{border:1px solid var(--ct-line);border-radius:6px;padding:5px 6px;background:#fff}
.ctSeg{display:inline-flex;border:1px solid var(--ct-line);border-radius:6px;overflow:hidden}
.ctSeg button{border:0;background:#fff;padding:5px 10px}
.ctSeg button+button{border-left:1px solid var(--ct-line)}
.ctSeg button[aria-pressed="true"]{background:var(--ct-ink);color:#fff}
.ctLink{border:0;background:none;color:var(--ct-sel);padding:4px 0;text-decoration:underline;text-underline-offset:2px}
.ctRemove{border:1px solid var(--ct-line);background:#fff;color:var(--ct-bad);border-radius:6px;padding:5px 10px;margin-left:auto}
.ctInspector .ctNote{color:var(--ct-muted);font-size:13px}

/* estimate */
.ctTotal{font:600 34px/1.05 var(--ct-cond);letter-spacing:-.01em;margin:0}
.ctSplit{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:10px 0 0;font-size:14px}
.ctSplit dt{color:var(--ct-muted)}
.ctSplit dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ctRate{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ct-muted);margin:8px 0 0}
.ctRate input{width:4.5em;border:1px solid var(--ct-line);border-radius:6px;padding:4px 6px;background:#fff}
.ctPriceNote{font-size:12px;color:var(--ct-muted);line-height:1.45;margin:10px 0 0}
.ctIssues{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.ctIssues li button{all:unset;cursor:pointer;display:block;font-size:13px;line-height:1.4;padding:6px 8px;border-radius:6px;border:1px solid}
.ctIssues .error button{color:var(--ct-bad);border-color:#e7c3c6;background:#fbf2f3}
.ctIssues .warn button{color:var(--ct-warn);border-color:#ead7b5;background:#fcf7ee}
.ctIssues li button:focus-visible{outline:2px solid var(--ct-sel)}
.ctOk{font-size:13px;color:var(--ct-muted);margin:14px 0 0}
.ctPartsList{margin:18px 0 0}
.ctPartsList details{border-top:1px solid var(--ct-line);padding:8px 0}
.ctPartsList summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:14px;list-style:none}
.ctPartsList summary::-webkit-details-marker{display:none}
.ctPartsList summary::before{content:'';width:7px;height:7px;border:solid var(--ct-dim);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);margin:5px 4px 0 0;flex:none;transition:transform .15s}
.ctPartsList details[open] summary::before{transform:rotate(45deg)}
.ctPartsList summary span:first-of-type{flex:1}
.ctPartsList table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.ctPartsList td{padding:4px 0;vertical-align:top;border-bottom:1px solid #eceef0}
.ctPartsList td small{display:block;color:var(--ct-muted)}
.ctPartsList td.n{text-align:right;white-space:nowrap;padding-left:8px;font-variant-numeric:tabular-nums}
.ctTag{font-size:11px;color:var(--ct-muted);border:1px solid var(--ct-line);border-radius:3px;padding:0 3px;margin-left:4px;white-space:nowrap}

.ctStatus{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ct-ink);color:#fff;padding:8px 14px;border-radius:6px;font-size:14px;margin:0;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px)}
.ctStatus.isOn{opacity:1}

/* dialogs */
.ctDialog{border:1px solid var(--ct-line);border-radius:10px;padding:0;width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);color:var(--ct-ink);background:var(--ct-paper)}
.ctDialog::backdrop{background:rgba(29,42,51,.45)}
.ctDialog form,.ctDialog .ctDialogIn{padding:20px 22px;display:grid;gap:14px}
.ctDialog h2{margin:0;font-size:20px}
.ctDialog p{margin:0;color:var(--ct-muted);font-size:14px;line-height:1.45}
.ctDialog label{display:grid;gap:4px;font-size:13px;color:var(--ct-muted)}
.ctDialog input,.ctDialog textarea,.ctDialog select{border:1px solid var(--ct-line);border-radius:6px;padding:8px;background:#fff;color:var(--ct-ink);font:inherit;font-size:15px}
.ctDialog .ctRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ctDialog .ctFoot{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.ctDialog .ctFoot .ctNote{margin-right:auto;font-size:13px;color:var(--ct-muted)}
.ctClose{position:absolute;right:10px;top:10px;border:0;background:none;font-size:22px;line-height:1;color:var(--ct-muted);padding:4px 8px}
.ctShapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ctShapes button,.ctSystems button{border:1px solid var(--ct-line);background:#fff;border-radius:8px;padding:10px;text-align:left;display:grid;gap:6px;color:var(--ct-ink)}
.ctShapes button[aria-pressed="true"],.ctSystems button[aria-pressed="true"]{border-color:var(--ct-sel);box-shadow:inset 0 0 0 1px var(--ct-sel)}
.ctShapes svg{width:100%;height:56px}
.ctShapes span{font-size:14px;font-weight:600}
.ctSystems{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ctSystems strong{font-size:14px}
.ctSystems small{font-size:12px;color:var(--ct-muted);line-height:1.35}
.ctFinishes{display:flex;flex-wrap:wrap;gap:8px}
.ctFinishes button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ct-line);border-radius:6px;background:#fff;padding:6px 10px}
.ctFinishes button[aria-pressed="true"]{border-color:var(--ct-sel);box-shadow:inset 0 0 0 1px var(--ct-sel)}
.ctFinishes i{width:18px;height:18px;border-radius:3px;border:1px solid rgba(0,0,0,.2);display:inline-block}
.ctFieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.ctFieldset legend{font-size:13px;font-weight:600;color:var(--ct-ink);padding:0;margin-bottom:6px}
.ctMenu{position:absolute;z-index:30;background:#fff;border:1px solid var(--ct-line);border-radius:8px;padding:6px;min-width:240px;display:grid}
.ctMenu button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;display:flex;justify-content:space-between;gap:12px}
.ctMenu button:hover,.ctMenu button:focus-visible{background:#eef1f3}
.ctMenu small{color:var(--ct-muted)}
.ctMenu hr{border:0;border-top:1px solid var(--ct-line);margin:4px 0}
.ctResult img{width:100%;border-radius:6px;display:block}
.ctLinkBox{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--ct-line);border-radius:6px;padding:8px 10px;font-size:14px;word-break:break-all}
.ctError{color:var(--ct-bad)!important}

/* tablet and phone */
@media (max-width:1100px){
  body.closetPage{height:auto;overflow:auto}
  .ctDrawing,.ct3d{flex:none;height:min(70vh,640px)}
  .ctBody{grid-template-columns:170px minmax(0,1fr)}
  .ctEstimate{grid-column:1/-1;border-left:0;border-top:1px solid var(--ct-line)}
}
@media (max-width:760px){
  .ctBar{padding:8px 12px;gap:8px}
  .ctBarMain{width:100%}
  .ctName input{width:auto;flex:1;max-width:none}
  .ctBarMain .ctName{flex:1;display:flex}
  .ctWalls{margin-left:0;overflow-x:auto;max-width:100%}
  .ctActions{margin-left:0;width:100%}
  .ctActions button{flex:1;padding:8px 6px}
  .ctBody{display:flex;flex-direction:column}
  .ctStage{order:1}
  .ctParts{order:2;border-right:0;border-top:1px solid var(--ct-line);padding:12px}
  .ctParts h2{display:none}
  .ctPalette{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}
  .ctPart{flex:none;flex-direction:column;gap:4px;padding:6px;width:86px;text-align:center}
  .ctPart small{display:none}
  .ctEstimate{order:3}
  .ctDrawing,.ct3d{height:min(62vh,125vw);min-height:320px}
  .ctShapes{grid-template-columns:repeat(2,1fr)}
  .ctInspector{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){.ctStatus,.ctPartsList summary::before{transition:none}}