/* Keep the rooftop editor inside the same light dashboard frame as Today. */
body[data-planner-view="roof"],
body[data-planner-view="roof"] .main,
body[data-planner-view="roof"] #roofView{background:#e8eef8}
body[data-planner-view="roof"] .sidebar,
body[data-planner-view="roof"] .topbar{display:none}
body[data-planner-view="roof"] .main{max-width:none;min-height:100vh;margin:0;padding:0}
#roofView{min-height:100vh;margin:0;padding:0 0 56px;color:#243454;color-scheme:light;--rooftop-frame:#e8eef8}
#roofView .rooftop-banner{height:clamp(230px,22vw,315px);margin:0}
#roofView .banner-copy{left:max(5vw,calc((100vw - 1300px)/2))}
#roofView .banner-roof-link{right:max(5vw,calc((100vw - 1300px)/2))}
#roofView .dashboard-content{margin-bottom:0}
#roofView .roof-heading{margin:2px 0 18px}
#roofView .roof-heading .eyebrow{color:#7e8aa2}
#roofView .roof-heading h1{margin:6px 0 4px;color:#253456;font-size:clamp(23px,2.3vw,32px);font-weight:660;letter-spacing:-.045em}
#roofView .roof-heading .muted{color:#7d8ca6}
#roofView .roof-heading .storage-pill{border-color:#d9e2ef;background:#fff;color:#576b89}
#roofView .roof-layout{gap:12px}
#roofView .surface{border:1px solid #d6deec;border-radius:9px;background:#fff;box-shadow:0 5px 15px #6880ad12}
#roofView .roof-main{padding:14px}
#roofView .roof-scene{border-radius:6px}
#roofView .surface-heading h2,#roofView .settings-card h2,#roofView .visibility-card h2,#roofView .unlock-card strong{color:#28395b}
#roofView .surface .eyebrow{color:#5266b5}
#roofView .muted,#roofView .scene-help,#roofView .scene-under,#roofView .privacy-note,#roofView .unlock-card p{color:#7585a0}
#roofView .scene-under b{color:#344bb6}
#roofView .inventory-wrap{border-top-color:#e0e7f1}
#roofView .inventory-item{border-color:#d8e1ed;background:#f7f9fd;color:#334662}
#roofView .inventory-item:hover,#roofView .inventory-item.selected{border-color:#6477cf;background:#edf1fd}
#roofView .inventory-item .quantity,#roofView .inventory-empty{color:#8090a8}
#roofView .inventory-empty{border-color:#d8e1ed}
#roofView .field-label{color:#50627f}
#roofView .roof-settings select{border:1px solid #d7e0eb;border-radius:7px;background:#f8faff;color:#2a3b5b}
#roofView .divider-line{background:#e0e6f0}
#roofView .color-options button{border-color:#cbd6e6}
#roofView .color-options button[aria-pressed=true]{outline-color:#4054bd}
#roofView .unlock-icon{background:#eef1ff;color:#4258bd}
@media(max-width:540px){#roofView{padding-bottom:78px}#roofView .rooftop-banner{height:230px}#roofView .roof-heading{align-items:flex-start}#roofView .roof-main{padding:10px}}