.roof-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line,#cbd9e4);padding:0 0 12px;margin-bottom:16px}
.roof-tabs button{width:auto;font-weight:700}.roof-tabs button>.lucide{color:inherit}
.layout-design .layout-preview #layout-sketch{height:auto;display:block}
:is(#meeting-plan-mount,.meeting-roof-readonly){--roof-blue:#365875;--roof-paper:#fff;--roof-ink:#24333f;--roof-muted:#526a7c;--roof-line:#cbd9e4;--roof-wash:#edf4f9;color:var(--roof-ink)}
[data-alpine-theme=dark] #meeting-plan-mount{--roof-paper:#252b30;--roof-ink:#eff4f7;--roof-muted:#b9cbd8;--roof-line:#4b626f;--roof-wash:#253d4c}
.roof-workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;background:var(--roof-paper)}
.roof-design{min-width:0;padding:18px;background:var(--roof-wash)}
.roof-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.roof-toolbar h2{margin:0;font-size:22px}.roof-spacer{flex:1}.roof-toolbar label{display:flex;align-items:center;gap:6px;font-size:13px}
.roof-toolbar input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--roof-blue)}
.roof-toolbar button,.roof-rail>button,.roof-actions button{background:var(--roof-paper);color:var(--roof-ink);border-color:var(--roof-line)}
.roof-settings{background:var(--roof-paper)}
.roof-tabs button[aria-pressed=true],.roof-toolbar button[aria-pressed=true]{background:#365875;color:#fff;border-color:#365875}
.roof-side{text-align:center;font-size:11px;font-weight:700;padding:8px;color:var(--roof-muted)}
.roof-canvas{position:relative;isolation:isolate;width:100%;touch-action:pan-y;user-select:none}
.roof-canvas.vertical{max-width:460px;margin:auto}.roof-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.roof-piece{position:absolute;z-index:3;container-type:size;touch-action:none}
.roof-piece.plate{z-index:2}.roof-piece.selected{z-index:5}
:is(#meeting-plan-mount,.meeting-roof-readonly) .roof-piece-body{box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:3px;padding:3px;border:1px solid #648094;border-radius:4px;background:#d3e8f0;color:#233e50;cursor:grab;overflow:hidden;touch-action:none;min-height:0;min-width:0}
#meeting-plan-mount .roof-piece.locked .roof-piece-body{cursor:default}
#meeting-plan-mount .roof-piece.selected .roof-piece-body{outline:3px solid #365875;outline-offset:2px}
:is(#meeting-plan-mount,.meeting-roof-readonly) .roof-piece.solar .roof-piece-body{background:#aac9de;background-image:linear-gradient(90deg,#fff7 1px,transparent 1px),linear-gradient(#fff7 1px,transparent 1px);background-size:14% 100%,100% 20%}
:is(#meeting-plan-mount,.meeting-roof-readonly) .roof-piece.sky .roof-piece-body{background:#c5e8e9;box-shadow:inset 0 0 0 5px #ffffff80}
:is(#meeting-plan-mount,.meeting-roof-readonly) .roof-piece.ac .roof-piece-body{background:#fff;box-shadow:inset 0 0 0 4px #e8edf1;border-radius:12px}
:is(#meeting-plan-mount,.meeting-roof-readonly) .roof-piece.plate .roof-piece-body{background:#d6dce1;background-image:repeating-linear-gradient(0deg,transparent,transparent 8px,#8f9da960 8px,#8f9da960 10px);border-radius:2px}
.roof-piece-body span,.roof-piece-body small{font-size:12px;font-weight:700;line-height:1.15;max-width:100%;background:#ffffffef;color:#243746;border-radius:2px;padding:2px;overflow-wrap:anywhere}
.roof-piece-body small{font-size:11px;font-weight:400}
#meeting-plan-mount .roof-lock,#meeting-plan-mount .roof-rotate{position:absolute;padding:3px;min-height:24px;min-width:24px;width:24px;height:24px;background:#fff;color:#365875;right:3px;top:3px;border:1px solid #365875;z-index:5;border-radius:3px}
#meeting-plan-mount .roof-rotate{right:-12px;top:-16px;width:30px;height:30px;border-radius:50%}.roof-lock svg,.roof-rotate svg{width:14px;height:14px}
.roof-lift{position:absolute;z-index:1;border:2px dashed #8f6fad;background:#c9bad340;color:var(--roof-ink);display:flex;align-items:end;justify-content:center;font-size:12px;pointer-events:none}
.roof-rail{padding:0 14px 16px;min-width:0;border-left:1px solid var(--roof-line)}
.roof-rail h3{font-size:17px;padding:12px 14px;margin:0 -14px 10px;background:var(--roof-blue);color:#fff}
.roof-rail h3:not(:first-child){margin-top:20px}.roof-rail>button{width:100%;text-align:left;margin:0 0 8px;justify-content:start;gap:8px;min-width:0}.roof-rail>button span{flex:1;overflow-wrap:anywhere}
.roof-quantity{display:flex;gap:8px;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--roof-line);font-size:13px}.roof-quantity span{min-width:0;overflow-wrap:anywhere}.roof-quantity small{display:block;font-size:12px;color:var(--roof-muted)}.roof-quantity strong{font-size:17px}
.roof-inspector{border-top:1px solid var(--roof-line);padding-top:16px}.roof-inspector h3{font-size:17px;margin:0}.roof-inspector p{font-size:13px;color:var(--roof-muted)}
.roof-fields{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}.roof-fields label{flex:1 1 150px;min-width:0;display:grid;gap:5px}.roof-fields input{width:100%;min-width:0}
.roof-actions{display:flex;gap:6px;margin-top:12px}.roof-checks{margin-top:16px;background:#fff0d6;color:#754604;padding:12px}.roof-checks summary{font-weight:700}.roof-checks p{font-size:13px}
.roof-settings,.roof-setup{padding:20px 0}.roof-settings summary{font-weight:700;font-size:17px}.roof-settings textarea{width:100%;min-height:80px}.roof-setup form{max-width:680px}.roof-setup select{width:100%}
#roof-choose label{display:grid;gap:6px;margin-bottom:14px;font-weight:650}#roof-choose select{width:100%}#roof-choose p{font-size:13px}#roof-choose .roof-validation,[data-roof-notice]{color:#945206;font-weight:600}
.roof-fields input,.roof-setup select,.roof-settings textarea,#roof-choose select{min-height:44px;padding:10px;border:1px solid #bcc8d0;border-radius:4px;background:var(--roof-paper,#fff);color:var(--roof-ink,#24333f)}
.roof-piece-body .roof-short{display:none}
@container(max-width:65px){.roof-piece-body span{display:none}.roof-piece-body .roof-short{display:block}}
@container(max-width:90px){.roof-piece-body small{display:none}}
@container(max-height:60px){.roof-piece-body small{display:none}.roof-piece-body svg{display:none}}
@container(max-width:28px){.roof-piece-body span,.roof-piece-body svg{display:none}}
@media(max-width:1100px){.roof-workspace{grid-template-columns:minmax(0,1fr) 220px}}
@media(max-width:780px){.roof-workspace{grid-template-columns:1fr}.roof-rail{border-left:0;border-top:1px solid var(--roof-line)}.roof-design{padding:14px 8px}.roof-toolbar button{font-size:13px;padding:8px}.roof-toolbar h2{font-size:20px}}
@media(pointer:coarse){.roof-toolbar button,.roof-actions button,.roof-rail>button,.roof-tabs button{min-height:44px}.roof-fields input,#roof-choose input,#roof-choose select{font-size:16px}}
.meeting-roof-readonly{background:var(--roof-wash);padding:12px;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.meeting-roof-readonly .roof-canvas,.meeting-roof-readonly .roof-piece{touch-action:auto}
:is(#meeting-plan-mount,.meeting-roof-readonly).meeting-roof-readonly .roof-piece-body{touch-action:auto;cursor:default;padding:1px}
:is(#meeting-plan-mount,.meeting-roof-readonly).meeting-roof-readonly .roof-piece.plate .roof-piece-body{justify-content:flex-end}
.meeting-roof-readonly .roof-canvas.vertical{max-width:300px}
.roof-key-number{font-size:12px;line-height:16px;color:#24333f;background:#fff;padding:0 3px;border-radius:2px}
.roof-plan-key{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:12px 0 0;font-size:13px}
.roof-plan-key li{display:flex;align-items:center;gap:6px;margin:0}
.roof-plan-key b{border:1px solid #648094;min-width:20px;text-align:center;background:#fff;color:#24333f}
.roof-lift-key{width:22px;height:14px;border:2px dashed #8f6fad}
@media(max-width:500px){.meeting-roof-readonly{padding:6px}.roof-key-number{font-size:10px;line-height:12px;padding:0 1px}}
@media print{.bcs-roof-drawing{break-inside:avoid}.meeting-roof-readonly .roof-canvas.vertical{max-width:220px}}