/* 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:#fff; border-right:1px solid var(--line);}
body.studio main#outputs{order:2; display:block !important; width:clamp(520px, 36vw, 780px); min-width:460px; flex:none; overflow:auto;}
body.studio.slim main#outputs{display:block !important;}
body.studio #asideTab{display:none !important;}
/* the Overview table keeps the inputs in view (the plugin hides them): results just widen */
body.studio.wide aside{display:flex !important;}
body.studio.wide main#outputs{width:clamp(620px, 52vw, 1100px);}
/* header: the Lucia mark */
body.studio header .logo{background:none; width:26px; height:26px; border-radius:6px; overflow:hidden;}
body.studio header .logo svg{width:100%; height:100%; display:block;}
body.studio header h1{letter-spacing:-.01em;}

/* ---- toolbar: segmented groups, a bit of air */
#modeller button{font:inherit; font-size:12.5px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:8px; padding:4px 10px; height:30px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
#modeller button:hover{border-color:#b9c4cf;}
#modeller button.on{background:var(--accent); border-color:var(--accent); color:#fff;}
#modeller button.danger{color:var(--bad); margin-top:8px; width:100%; justify-content:center;}
#modeller .ic{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; flex:none;}
#modeller .ibtn{padding:0; width:30px; justify-content:center;}
.mdbar{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); background:#fff;}
.mdgroup{display:flex; gap:4px; align-items:center;}
.mdgroup.right{margin-left:auto;}
.seg{display:inline-flex; gap:2px; padding:3px; background:#f1f4f7; border-radius:10px;}
#modeller .seg button{border-color:transparent; background:transparent; height:28px; border-radius:7px; color:#46525f;}
#modeller .seg button:hover{background:#e6ebf0;}
#modeller .seg button.on{background:#fff; color:var(--ink); border-color:#dfe5eb; box-shadow:0 1px 2px rgba(20,30,40,.08);}
#modeller #mdTools button.on .ic, #modeller #mdAdd button.on .ic{stroke:var(--accent);}
.mdstoreys{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:0 14px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); background:#fff; min-height:36px;}
.mdstoreys .tabs{display:flex; gap:2px; align-self:stretch; align-items:stretch;}
#modeller .mdstoreys .tabs button{border:none; border-radius:0; background:none; height:auto; padding:0 12px; color:var(--muted); border-bottom:2px solid transparent;}
#modeller .mdstoreys .tabs button.on{color:var(--ink); border-bottom-color:var(--accent); font-weight:600;}
#modeller .mdstoreys .tabs button.add{font-size:15px; padding:0 10px;}
#modeller .mdstoreys button.link{border:none; background:none; color:var(--bad); height:auto; padding:0;}
.mdlab{display:flex; align-items:center; gap:5px;}
.mdlab.muted{color:#8995a1;}
.mdlab input{width:54px; font:inherit; padding:2px 4px; border:1px solid var(--line); border-radius:6px;}

/* ---- canvases: white, the model in the middle, controls float over it */
.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; background:#fff;}
.md3d{position:relative; overflow:hidden; background:#fff;}
.md3d canvas{display:block; width:100%; height:100%;}
svg.plan{width:100%; height:100%; display:block; user-select:none; touch-action:none; background:#fff;}
.mdfloat{position:absolute; z-index:5; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid #e3e8ed;
  border-radius:10px; box-shadow:0 2px 12px rgba(20,30,40,.07);}
.mdcolour{left:12px; top:12px; padding:0; border:none; background:none; box-shadow:none; backdrop-filter:none; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.mdcolour .seg{background:rgba(255,255,255,.92); border:1px solid #e3e8ed; box-shadow:0 2px 12px rgba(20,30,40,.07);}
.chips{display:flex; gap:4px;}
.chips:empty{display:none;}
#modeller .chips button{height:24px; padding:0 9px; font-size:11.5px; border-radius:12px; background:rgba(255,255,255,.95);}
#modeller .chips button.on{background:var(--accent); color:#fff; border-color:var(--accent);}
.mdsun{right:12px; bottom:12px; display:flex; align-items:center; gap:8px; padding:5px 8px; font-size:12px; color:var(--muted);}
#modeller .mdsun .ibtn{height:26px; width:26px; border:none;}
#modeller .mdsun .ibtn.on{background:#fff3d6; color:#b77400;}
.mdsun select{font:inherit; border:1px solid var(--line); border-radius:6px; padding:1px 3px; background:#fff;}
.mdsun input[type=range]{width:110px; accent-color:#e0a100;}
.mdsun .sunT{min-width:40px; font-variant-numeric:tabular-nums; color:var(--ink);}

svg.plan .grid{stroke:#f0f1f2; stroke-width:1; fill:none;}
svg.plan .grid.major{stroke:#e2e5e8;}
svg.plan .room{fill:#f1f5f9; stroke:none;}
svg.plan .room.sel{fill:#dcebf7;}
svg.plan .ghost{fill:none; stroke:#c3c7cc; 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 .sky{fill:rgba(89,162,232,.18); stroke:#59a2e8; stroke-width:1.5; stroke-dasharray:4 2;}
svg.plan .sky.sel{stroke:#eda100; fill:rgba(237,161,0,.18);}
svg.plan .obst{fill:#b9b6ac; fill-opacity:.4; 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;}
svg.plan .node{fill:#fff; stroke:#7b8591; stroke-width:1;}
svg.plan .node.on{fill:#d03b3b; stroke:#fff; stroke-width:1.5;}
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,.07); stroke:#eda100; stroke-dasharray:4 3;}
.md3dmarquee{position:absolute; display:none; border:1px dashed #eda100; background:rgba(237,161,0,.07); pointer-events:none; z-index:4;}

/* ---- inspector (top right) and legend (bottom left) */
.mdright{position:absolute; top:12px; right:12px; z-index:5; display:flex; flex-direction:column; align-items:flex-end; gap:8px; max-height:calc(100% - 24px);}
.mdright .mdfloat{position:static;}
.mdinspector{width:236px; padding:10px 12px; font-size:12px; overflow:auto;}
.mdinspector:empty{display:none;}
.mdinspector b{display:block; margin-bottom:2px; font-size:13px;}
.mdinspector b small{font-weight:400; color:var(--muted); font-size:11.5px;}
.mdinspector .mdnum{color:var(--muted); font-size:11.5px; margin-bottom:6px; font-variant-numeric:tabular-nums;}
.mdinspector label{display:flex; align-items:center; gap:6px; margin:4px 0; color:var(--muted);}
.mdinspector label input, .mdinspector label select{flex:1; min-width:0; font:inherit; padding:2px 5px; border:1px solid var(--line); border-radius:6px; background:#fff;}
.mdinspector label input[type=number]{width:72px; 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;}
.mdnote.warn{color:var(--warn);}
.mdpill{cursor:pointer; margin:0 !important; font-weight:600; font-size:12px !important;}
.mdinspector:has(.mdpill:only-child){width:auto; padding:6px 11px;}
.mdlegend{left:12px; bottom:12px; padding:9px 12px; font-size:11.5px; display:none; max-width:260px;}
.mdlegend b{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px;}
.mdlegend div{display:flex; align-items:center; gap:7px; margin:3px 0;}
.mdlegend i{width:12px; height:12px; border-radius:3px; display:inline-block; flex:none;}

/* ---- status: key chips */
.mdstatus{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 14px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); background:#fff;}
.mdstatus #mdHint{display:flex; flex-wrap:wrap; gap:4px 14px; overflow:hidden; max-height:20px;}
.mdstatus .key{white-space:nowrap;}
.mdstatus kbd{font:inherit; font-size:11px; background:#f1f4f7; border:1px solid #e1e6eb; border-radius:4px; padding:0 5px; margin-right:5px; color:var(--ink);}
.mdstatus #mdCursor{font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ---- model checks (pre-flight findings) */
.mdchecks{padding:0; overflow:hidden; max-width:300px;}
#modeller .mdchecks .chkpill{border:none; background:#fdf6e6; color:#7d5307; height:30px; border-radius:10px; font-weight:600;}
#modeller .mdchecks .chkpill.bad{background:#fae4e1; color:#9c2114;}
.mdchecks .ic{stroke:currentColor;}
.mdchecks.open{width:300px;}
.chkhead{display:flex; align-items:center; gap:6px; padding:6px 6px 6px 10px; background:#fdf6e6; color:#7d5307; font-size:12px;}
.chkhead.bad{background:#fae4e1; color:#9c2114;}
.chkhead b{flex:1;}
#modeller .chkhead .ibtn{width:24px; height:24px; border:none; background:transparent; color:inherit; font-size:15px;}
#modeller .chkhead .ibtn:hover{background:rgba(0,0,0,.06);}
.chkmsg{padding:9px 12px 11px; font-size:12px; line-height:1.45; color:var(--ink);}
.chkmsg a{color:var(--accent) !important;}
/* ---- isolation chip (3D, top middle) */
.mdiso{left:50%; top:12px; transform:translateX(-50%); padding:4px 6px 4px 12px; font-size:12px; display:flex; align-items:center; gap:10px; white-space:nowrap;}
#modeller .mdiso button{height:24px; padding:0 9px;}
/* ---- turn buttons */
.mdturn{display:flex; align-items:center; gap:6px; margin:6px 0 2px; color:var(--muted);}
.mdturn span{display:flex; gap:3px; margin-left:auto;}
#modeller .mdturn button{height:24px; padding:0 6px; font-size:11px;}
.key.flash{color:var(--accent); font-weight:600;}

/* ---- header ☰ menu: sections, rows */
body.studio details.menu>.menupanel{width:290px; padding:6px; border-radius:12px; box-shadow:0 10px 30px rgba(20,30,40,.16);}
body.studio .msec{padding:4px 0 6px;}
body.studio .msec + .msec{border-top:1px solid var(--line);}
body.studio .mhead{font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 8px 4px;}
body.studio .menupanel .mitem{display:block; width:100%; text-align:left; background:none; border:none; border-radius:7px; padding:7px 8px; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer;}
body.studio .menupanel .mitem:hover{background:#f1f4f7;}
body.studio .menupanel .mitem:disabled{color:var(--muted);}
body.studio .menupanel label{margin:4px 8px !important;}

/* ---- results pane (web only; the plugin keeps its look): every lettered
   chapter is a card like the sidebar's step cards (main.js wraps them) */
body.studio main#outputs{background:var(--bg); padding:14px 16px 40px;}
body.studio .mtabs{gap:8px; align-items:stretch; margin-bottom:12px;}
body.studio .mtabs .tile{border-radius:10px; background:#fff; border:1px solid var(--line); margin-bottom:0; padding:10px 12px; gap:2px;
  transition:border-color .12s, box-shadow .12s;}
body.studio .mtabs .tile b{font-size:20px; letter-spacing:-.01em;}
body.studio .mtabs .tile span{font-size:10px; letter-spacing:.07em;}
body.studio .mtabs .tile.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); margin-bottom:0;}
body.studio .mtabs .mini{border-radius:10px; background:#fff; border:1px solid var(--line); margin-bottom:0;}
body.studio .mtabs .mini.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
body.studio section.out{background:transparent; border:none; box-shadow:none; padding:0; border-radius:0;}
body.studio section.out>.ocard, body.studio section.out>div.ocard{max-width:none; padding:0; border:none;}
body.studio .chap, body.studio .out details.ocard{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:0 14px 14px; margin:0 0 12px;}
body.studio .chap>.shead, body.studio .out details.ocard>summary{display:flex; align-items:center; gap:9px; margin:0 -14px 12px; padding:10px 14px;
  border-top:none; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0;}
body.studio .out details.ocard:not([open])>summary{border-bottom:none; margin-bottom:-14px;}
body.studio .shead .note, body.studio .out details.ocard>summary .note{font-weight:400;}
body.studio .sletter{flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:700;}
/* charts use the whole card width */
body.studio .hmap{max-width:none;}
body.studio main#outputs [style*="max-width:520px"], body.studio #opSvg{max-width:none !important;}
body.studio #out-program #heatSum, body.studio #out-program #coolSum, body.studio #out-program #ventSum{max-width:none;}

/* ---- Overview table: quiet inputs (they read as values until touched),
   program defaults grey, your own values dark, grouped header */
body.studio #wideBtn, body.studio #progLegend + p.note{display:none;}
body.studio #progTable table{border-collapse:separate; border-spacing:0;}
body.studio #progTable th{padding:6px 5px; font-size:10.5px; letter-spacing:.05em; color:#5b6875; background:#f7f9fb; border-bottom:1px solid var(--line);}
body.studio #progTable tr:first-child th{background:none; color:var(--accent); font-weight:700; letter-spacing:.08em; border-bottom:none; padding:4px 5px 2px;}
body.studio #progTable td{padding:2px 4px; border-bottom:1px solid #eef1f4;}
body.studio #progTable tr:hover td{background:#f7fafc;}
body.studio #progTable td input, body.studio #progTable td select{border-color:transparent; background:transparent; padding:3px 5px; font-size:12.5px;}
body.studio #progTable td input:hover, body.studio #progTable td select:hover{border-color:var(--line); background:#fff;}
body.studio #progTable td input:focus, body.studio #progTable td select:focus{border-color:var(--accent); background:#fff;}
body.studio #progTable td input::placeholder{color:#a3adb7;}
body.studio #progTable td input[type=text]:first-child, body.studio #progTable td:nth-child(2) input{font-weight:600;}
body.studio #progTable .exp[aria-pressed=false]{filter:grayscale(1); opacity:.3;}
body.studio #progTable .exp[aria-pressed=true]{filter:grayscale(1);}
body.studio #progTable tr.total td{background:#f7f9fb; border-top:1px solid var(--ink); font-weight:700;}
body.studio #progTable tr.sel td{background:#fdf6e3 !important;}
body.studio #progLegend{font-size:11px; line-height:1.5; margin-top:8px;}

/* ---- live link to the MCP server */
.mdlive{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:8px; font-size:12px; font-weight:600;
  background:#e6f4ec; color:#14663f;}
.mdlive::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor;}
.mdlive.off{background:#f1f4f7; color:var(--muted);}

/* ---- Connect your AI (MCP) */
body.studio header .aibtn{display:inline-flex; align-items:center; gap:7px; padding:6px 12px;}
body.studio header .aibtn .ic, .cdlg .ic{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round;}
.cdlg-bg{position:fixed; inset:0; z-index:200; background:rgba(20,28,38,.32); display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px;}
.cdlg{position:relative; width:min(560px, 100%); max-height:84vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(20,30,40,.25); padding:22px 24px 18px; font-size:13px;}
.cdlg h2{font-size:17px; margin:0 0 6px;}
.cdlg .lead{color:var(--muted); margin:0 0 12px; line-height:1.5;}
.cdlg-x{position:absolute; top:10px; right:12px; border:none; background:none; font-size:20px; color:var(--muted); cursor:pointer;}
.cdlg-ok{background:#e6f4ec; color:#14663f; border-radius:8px; padding:7px 10px; font-weight:600;}
.cdlg-step{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:10px 0;}
.cdlg-step>b{display:block; font-size:13.5px; margin-bottom:6px;}
.cdlg-step p{margin:4px 0;}
.cdlg-step ol, .cdlg-step ul{margin:6px 0 0 18px; line-height:1.6;}
.cdlg-dl{display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; border-radius:8px; padding:8px 14px; margin:2px 0 4px;}
.cdlg-dl:hover{filter:brightness(1.1);}
.cdlg-cmd{display:flex; gap:6px; align-items:center; background:#f1f4f7; border-radius:8px; padding:6px 6px 6px 10px; margin:6px 0;}
.cdlg-cmd code, .cdlg-cmd pre{flex:1; background:none; padding:0; margin:0; font-size:11.5px; overflow-x:auto; white-space:pre;}
.cdlg-cmd{align-items:flex-start;}
.cdlg>.cdlg-dl{margin:4px 0 2px;}
.cdlg-cmd button{border:1px solid var(--line); background:#fff; border-radius:6px; padding:3px 10px; font:inherit; font-size:12px; cursor:pointer;}
.cdlg .muted{color:var(--muted); font-size:12px;}
.cdlg-try{color:#394653;}