/* Copyright (c) 2026 Andriy Bruyninckx. All rights reserved.
   Lucia web studio layout: dialog inputs left, modeller centre, results right. */
body.studio{height:100vh; overflow:hidden;}
body.studio .layout{display:flex; flex:1; min-height:0;}
/* the plugin's designed widths: sidebar 380 px, results pane ≈ 600–660 px */
body.studio aside{order:0; width:clamp(320px, 21vw, 390px); min-width:300px; flex:none;}
body.studio #modeller{order:1; flex:1; min-width:360px; display:flex; flex-direction:column; background:#fbfbfa; border-right:1px solid var(--line);}
body.studio main#outputs{order:2; display:block !important; width:clamp(460px, 33vw, 660px); min-width:420px; flex:none; overflow:auto;}
body.studio.slim main#outputs{display:block !important;}
body.studio #asideTab{display:none !important;}

#modeller button{font:inherit; font-size:12px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:6px; padding:3px 8px; cursor:pointer; white-space:nowrap;}
#modeller button:hover{border-color:var(--accent);}
#modeller button.on{background:var(--accent); border-color:var(--accent); color:#fff;}
#modeller button.danger{color:var(--bad); margin-top:6px;}
.mdbar{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--line); background:#fff;}
.mdgroup{display:flex; gap:3px; align-items:center;}
.mdgroup.right{margin-left:auto;}
.mdstoreys{display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:5px 8px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted);}
.mdlab{display:flex; align-items:center; gap:4px; margin-left:6px;}
.mdlab input{width:54px; font:inherit; padding:1px 3px;}

.mdcanvas{position:relative; flex:1; min-height:0; display:flex;}
.mdcanvas.split .mdplan, .mdcanvas.split .md3d{flex:1; min-width:0;}
.mdcanvas.split .md3d{border-left:1px solid var(--line);}
.mdcanvas.plan .mdplan{flex:1;} .mdcanvas.plan .md3d{display:none;}
.mdcanvas.v3d .md3d{flex:1;} .mdcanvas.v3d .mdplan{display:none;}
.mdplan{position:relative; overflow:hidden; cursor:crosshair;}
.md3d{position:relative; overflow:hidden; background:linear-gradient(#f4f6f8,#e9ecef);}
.md3d canvas{display:block; width:100%; height:100%;}
svg.plan{width:100%; height:100%; display:block; user-select:none; touch-action:none; background:#fbfbfa;}

svg.plan .grid{stroke:#e6e6e2; stroke-width:1; fill:none;}
svg.plan .grid.major{stroke:#d3d3cd;}
svg.plan .room{fill:#eef3f7; stroke:none;}
svg.plan .room.sel{fill:#d6e8f4;}
svg.plan .ghost{fill:none; stroke:#b9b7ae; stroke-dasharray:4 3; stroke-width:1;}
svg.plan .wall{stroke:#3b4450; stroke-width:4; stroke-linecap:square;}
svg.plan .wall.int{stroke:#9aa3ad; stroke-width:2;}
svg.plan .wall.ground{stroke:#3b4450;}
svg.plan .wall.sel{stroke:#eda100; stroke-width:5;}
svg.plan .open{stroke-width:6; stroke-linecap:butt;}
svg.plan .open.window{stroke:#59a2e8;}
svg.plan .open.door{stroke:#9a7b55;}
svg.plan .open.sel{stroke:#eda100;}
svg.plan .obst{fill:#b9b6ac; fill-opacity:.45; stroke:#8d8a80;}
svg.plan .obst.sel{stroke:#eda100; stroke-width:2;}
svg.plan text{font-size:11px; fill:var(--ink); text-anchor:middle; pointer-events:none;}
svg.plan .rlabel{font-weight:600;}
svg.plan .rsub, svg.plan .olabel, svg.plan .dim{fill:var(--muted); font-size:10.5px;}
svg.plan .handle{fill:#fff; stroke:#eda100; stroke-width:1.5;}
svg.plan .draft{fill:rgba(11,110,153,.08); stroke:var(--accent); stroke-width:1.5; stroke-dasharray:5 3;}
svg.plan .hoverwall{stroke:#eda100; stroke-width:7; stroke-opacity:.5;}
svg.plan .snap{fill:none; stroke:#eda100; stroke-width:1.5;}
svg.plan .snap.edge{stroke-dasharray:2 2;}
svg.plan .north{stroke:#e34948; stroke-width:2.5;}
svg.plan .northT{fill:#e34948; font-weight:700;}
svg.plan .scale{stroke:var(--ink); stroke-width:2;}

.mdinspector{position:absolute; top:8px; right:8px; width:210px; background:rgba(255,255,255,.96); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font-size:12px; box-shadow:0 2px 10px rgba(0,0,0,.08);}
.mdcanvas.split .mdinspector{right:auto; left:calc(50% - 218px);}
.mdinspector:empty{display:none;}
.mdinspector b{display:block; margin-bottom:5px;}
.mdinspector label{display:flex; align-items:center; gap:6px; margin:3px 0; color:var(--muted);}
.mdinspector label input, .mdinspector label select{flex:1; min-width:0; font:inherit; padding:1px 3px;}
.mdinspector label input[type=number]{width:70px; flex:none; margin-left:auto;}
.mdinspector label span{width:14px;}
.mdnote{color:var(--muted); font-size:11px; margin:5px 0 0; line-height:1.35;}
.mdlegend{position:absolute; left:8px; bottom:8px; background:rgba(255,255,255,.95); border:1px solid var(--line); border-radius:8px;
  padding:6px 9px; font-size:11px; display:none; max-width:240px;}
.mdlegend div{display:flex; align-items:center; gap:6px; margin:2px 0;}
.mdlegend i{width:12px; height:12px; border-radius:3px; display:inline-block;}
.mdstatus{display:flex; justify-content:space-between; gap:10px; padding:4px 8px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); background:#fff;}
.mdstatus span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mdpill{cursor:pointer; margin:0 !important; font-weight:600;}
.mdinspector:has(.mdpill:only-child){width:auto; padding:4px 9px;}
svg.plan .node{fill:#fff; stroke:#6b7682; stroke-width:1;}
svg.plan .node.on{fill:#eda100; stroke:#8a5d00;}
svg.plan .midh{fill:#fff; stroke:#eda100; stroke-width:1.5;}
svg.plan .midp{stroke:#b67a00; stroke-width:1.6;}
svg.plan .marquee{fill:rgba(237,161,0,.08); stroke:#eda100; stroke-dasharray:4 3;}
.md3dmarquee{position:absolute; display:none; border:1px dashed #eda100; background:rgba(237,161,0,.08); pointer-events:none;}
.md3d canvas{cursor:grab;}