@font-face{font-family:Figtree;src:url('../assets/figtree.woff2');font-weight:300 900;font-display:swap}
:root{font-family:Figtree,Arial,sans-serif;color:#17382c;background:#f0f1eb;--tone-ground:#f0f1eb;--model-ground:#f0f1eb;--model-structure:#d9d9d0;--model-cut:#3b433b;--accent:#1f6b4f;--chart-1:#358077;--chart-2:#c88c55;--chart-3:#b09c30;--chart-4:#388bac;--chart-5:#b75145;--chart-7:#8f6949;--chart-8:#389b9d;--chart-muted:#929a9d}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select,summary{font:inherit;color:inherit;font-size:12px}button,select{background:#fafbf6;border:1px solid #d6ded0;border-radius:20px;min-height:38px;padding:7px 13px;cursor:pointer}button:hover,summary:hover{background:#e2e8da}button:focus-visible,select:focus-visible,summary:focus-visible,#stage:focus-visible{outline:2px solid #1f6b4f;outline-offset:-2px}button[aria-pressed=true]{background:#17382c;color:white;border-color:#17382c}[hidden]{display:none!important}
#stage,#labels{position:absolute;inset:0}#stage canvas{display:block;touch-action:none}#labels{pointer-events:none;overflow:hidden}.top{position:absolute;top:19px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.top>*{pointer-events:auto}.identity{padding:14px 17px;background:#fafbf6ed;border:1px solid #d6ded0;border-radius:14px;backdrop-filter:blur(8px)}.identity strong{font-size:15px;font-weight:600;display:block}.identity span{font-size:11px;color:#6a7862;display:block;margin-top:4px}#fullscreen{width:40px;height:40px;padding:0;font-size:19px}
.controls{position:absolute;bottom:38px;left:20px;right:20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}.controls>*{pointer-events:auto}.floorLabel{font-size:11px;background:#fafbf6f2;border:1px solid #d6ded0;border-radius:24px;padding-left:14px;display:flex;align-items:center;gap:5px}.floorLabel select{border:0;background:transparent;max-width:145px;font-size:12px}.segments{display:flex;gap:2px;background:#fafbf6f2;padding:4px;border:1px solid #d6ded0;border-radius:26px}.segments button{border:0;padding:7px 12px;min-height:30px;font-size:11px}.zoom{margin-left:auto;display:flex;gap:4px;padding:4px;background:#fafbf6f2;border:1px solid #d6ded0;border-radius:28px}.zoom button{font-size:21px;width:36px;min-height:36px;border:0;padding:0}.zoom button:last-child{font-size:23px}details{position:relative}summary{list-style:none;border:1px solid #d6ded0;background:#fafbf6f2;border-radius:24px;padding:11px 17px;cursor:pointer}summary::-webkit-details-marker{display:none}.layerBody{position:absolute;bottom:51px;left:0;background:#fafbf6;padding:18px;min-width:220px;border:1px solid #d6ded0;border-radius:16px;box-shadow:0 12px 35px #17382c16;display:grid;gap:13px;max-height:calc(100vh - 180px);overflow-y:auto;overscroll-behavior:contain}.layerBody label{font-size:13px;display:flex;gap:8px;align-items:center}.layerBody input{accent-color:#1f6b4f;width:15px;height:15px}.layerBody select{max-width:100%}
.bottom{position:absolute;bottom:14px;left:22px;right:22px;display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#6e7d65;pointer-events:none}.room{font-size:9px;text-align:center;color:#41493d;text-shadow:0 1px 2px #fffffff0,0 -1px 2px #fffffff0;line-height:1.15}.roomName{max-width:110px}.roomArea{font-size:8px;color:#68725f}.home,.level{font-size:11px;padding:3px 7px;background:#fafbf6;border-radius:9px}.homeProbable{border:1px solid #9caf99}#status{position:absolute;top:100px;left:22px;max-width:calc(100% - 44px);font-size:13px;background:#fafbf6;padding:10px 14px;border-radius:12px}
#selection{position:absolute;top:100px;right:20px;max-width:290px;padding:22px 38px 18px 20px;background:#fafbf6f5;border:1px solid #d6ded0;border-radius:18px;box-shadow:0 12px 35px #17382c14}#selection h2{font-size:17px;font-weight:550;margin:0 0 10px}#selection p{font-size:13px;line-height:1.65;margin:0 0 14px}#closeSelection{position:absolute;right:7px;top:7px;border:0;font-size:20px;background:none;padding:2px;width:28px;min-height:28px}#planExport{font-size:12px;background:#1f6b4f;color:#fff;border-color:#1f6b4f}
.hero-view{--tone-ground:#f3f2eb;--model-ground:#f3f2eb;background:#f3f2eb}.hero-view .top,.hero-view .bottom,.hero-view #labels,.hero-view #selection,.hero-view .controls>*:not(.zoom){display:none!important}.hero-view .controls{bottom:72px;left:auto;right:28px}.hero-view .zoom{background:#f8f8f0cc}.hero-view #status{top:45%;left:30%;background:transparent}.hero-view #stage{bottom:55px}
.roomName,.roomArea{display:block}.roomName{max-width:76px;line-height:1.25}.compact-labels .roomArea{display:none}.compact-labels .roomName{font-size:9px}
@media(max-width:650px){.top{top:12px;left:12px;right:12px}.identity{padding:10px 13px}.identity strong{font-size:13px}.identity span{font-size:10px}.controls{bottom:42px;left:12px;right:12px;gap:5px}.segments{order:6}.segments button{font-size:10px;padding:7px 10px}.detail-button{order:7;font-size:11px}.zoom{margin-left:auto}.zoom button{width:31px;min-height:31px}.bottom{left:14px;right:14px;bottom:12px;font-size:9px;line-height:1.5}.bottom>span:first-child{max-width:230px}.bottom>span:last-child{display:none}.floorLabel{padding-left:10px}.floorLabel select{max-width:105px}.layerBody{left:auto;right:-40px}.room{font-size:8px}.roomArea{font-size:7px}#selection{right:12px;top:90px;max-width:250px}.hero-view .controls{right:16px;bottom:72px}}


#stage{z-index:0}#labels{z-index:1}.top,.controls,.bottom,#status,#selection{z-index:3}

/* Adapted from the app's FloorPicker, Island and Chip components. */
.floor-rail{position:absolute;z-index:3;right:20px;top:82px;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:104px;max-height:calc(100% - 190px);overflow-y:auto;padding:8px;background:#fafbf6e8;border:1px solid #d6ded0;border-radius:18px;box-shadow:0 6px 22px #17382c0a;backdrop-filter:blur(14px);scrollbar-width:thin;scrollbar-color:#c4cfbb transparent;overscroll-behavior:contain}
.floor-rail button{flex:none;min-height:32px;padding:5px 9px;font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;border:1px solid transparent;background:transparent;border-radius:999px;user-select:none}
.floor-rail button:hover{background:#e8ede1;border-color:#d4ddca}.floor-rail button[aria-pressed=true]{color:#1f6b4f;background:#dce8d6;border-color:transparent}.floor-rail button[aria-pressed=true]:hover{border-color:#739764}.floor-rail button:focus-visible{outline-offset:-2px}
#selection{top:auto;bottom:100px;left:20px;right:auto}
.hero-view .floor-rail{display:none!important}
@media(max-width:650px){.floor-rail{top:85px;left:12px;right:12px;width:auto;max-height:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:4px;padding:5px;border-radius:22px;scroll-padding-inline:5px}.floor-rail button{min-height:34px;padding:6px 12px}.floor-rail button:first-child{margin-right:3px}#selection{top:auto;bottom:145px;left:12px;right:auto;max-width:min(290px,calc(100% - 24px))}#status{top:140px}.hero-view #status{top:45%}}

#stage:focus,#stage:focus-visible,#stage canvas:focus{outline:none}
html[data-interactive="true"] #stage:focus-visible:not([data-pointer-focus])::after{content:'Modell aktiv · + / − zoomar · R återställer';position:absolute;top:20px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);padding:8px 12px;border-radius:12px;background:#17382c;color:#fff;font-size:11px;line-height:1.5;text-align:center;pointer-events:none;z-index:2}
@media(max-width:650px){html[data-interactive="true"] #stage:focus-visible:not([data-pointer-focus])::after{top:142px}html.hero-view[data-interactive="true"] #stage:focus-visible:not([data-pointer-focus])::after{top:16px}}