/* Procedural house canvas, its camera controls and the colour legend. */
.house-render { position: relative; isolation: isolate; }
.house-preview-area { z-index: 2; }
.house-preview-colors .house-door-name { flex-basis: 100%; }

.house-view-tabs{display:flex;gap:5px;padding:0 14px 12px;flex-wrap:wrap}
.house-view-tabs button{flex:1;border:1px solid #bac9b9;border-radius:9px;padding:10px 7px;min-height:44px;background:#faf9f5;font-size:11px;font-weight:750;white-space:nowrap}
.house-view-tabs button[aria-pressed=true]{background:#dcf778;border-color:#557244;color:#142b27}
#house-orbit-canvas{display:block;width:100%;height:auto;aspect-ratio:14/9;outline-offset:-3px}
#house-orbit-canvas.is-orbit{touch-action:none;cursor:grab}
#house-orbit-canvas.is-dragging{cursor:grabbing}
.house-render:has(#house-orbit-canvas:not([hidden])){background:#f0f1e8;padding-bottom:43px}
.house-render:has(#house-orbit-canvas:not([hidden])) .house-preview-area{bottom:10px;left:14px;font-size:11px}
.house-view-toolbar{display:flex;gap:6px;padding:12px 14px 0;flex-wrap:wrap}
.house-view-toolbar button{flex:1;min-width:36px;min-height:40px;border:1px solid #bac9b9;border-radius:8px;background:#faf9f5;font-size:17px;font-weight:700}
.house-view-toolbar button:last-child{font-size:11px;min-width:50px}
.house-view-toolbar button:disabled{opacity:.4;cursor:default}
.house-view-help{font-size:11px;color:#506858;padding:8px 16px 12px;line-height:1.5}
.house-roof-detail{display:flex;align-items:center;gap:12px;margin:0 14px 6px;padding:10px;background:#faf9f5;border:1px solid #d5ded3;border-radius:12px}
.house-roof-detail img{width:108px;height:70px;object-fit:cover;border-radius:7px;flex-shrink:0}
.house-roof-detail small{font-size:8px;letter-spacing:.1em;display:block;color:#60715f}
.house-roof-detail strong{display:block;font-size:12px;line-height:1.4;margin:4px 0}
.house-roof-detail span{font-size:10px;color:#536858;display:block}
.house-view-tabs button:focus-visible,.house-view-toolbar button:focus-visible{outline:3px solid #fa6b32;outline-offset:2px}
@media(max-width:1050px) and (min-width:761px){.house-view-tabs button{font-size:10px;padding-inline:5px}.house-roof-detail img{width:86px}.house-view-toolbar{gap:4px}.house-view-toolbar button{min-width:30px}}