.layout-page { font-family: system-ui, sans-serif; color: #193c31; background: #f4f7f3; }
.layout-page header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.2rem 5vw; background: white; border-bottom: 1px solid #dce5dc; }
.layout-page main { max-width: 1450px; padding: 2rem 5vw; margin: auto; }
.layout-page h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.layout-page a { color: #16664c; }
.layout-page .layout-eyebrow { font-size: .75rem; letter-spacing: .1em; color: #16664c; font-weight: 750; }
.roof-layout-editor { padding: 1.2rem; border: 1px solid #d9e3d7; border-radius: .8rem; background: white; }
.roof-layout-editor h3 { font-size: 1.1rem; margin-top: .8rem; }
.roof-layout-editor label { display: block; font-size: .85rem; margin: .7rem 0; }
.roof-layout-editor .layout-toolbar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.roof-layout-editor .layout-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 .8rem; align-items: end; }
.roof-layout-editor .layout-fields button { margin: .7rem 0; }
.roof-layout-editor .layout-workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 1.2rem; }
.roof-layout-editor .layout-drawing { min-width: 0; }
.roof-layout-editor svg { display: block; width: 100%; height: 470px; border: 1px solid #bdcfc2; background: #f5f8f4; touch-action: none; }
.roof-layout-editor [data-layout-status], .roof-layout-editor [data-layout-save-note], .roof-layout-editor li { overflow-wrap: anywhere; }
.roof-layout-editor [data-layout-status] { min-height: 1.5rem; color: #805b16; }
.roof-layout-editor .layout-roof { fill: #e4e9e0; stroke: #688273; stroke-width: .06; fill-rule: evenodd; }
.roof-layout-editor .layout-restriction { fill: #f3c7bc; stroke: #a94430; stroke-width: .05; fill-rule: evenodd; }
.roof-layout-editor .layout-module { stroke-width: .04; cursor: move; }
.roof-layout-editor .layout-module[aria-selected="true"] { stroke: #b57008; stroke-width: .12; }
.roof-layout-editor .layout-module:focus { outline: none; stroke: #b57008; stroke-width: .12; }
.roof-layout-editor .layout-hard-stop { color: #a32a20; font-weight: 600; }
.roof-layout-editor :focus-visible { outline: 3px solid #bc7a12; outline-offset: 2px; }
@media (max-width: 900px) { .roof-layout-editor .layout-workspace { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 450px) { .roof-layout-editor { padding: .8rem; } .roof-layout-editor .layout-fields { grid-template-columns: minmax(0, 1fr); } .roof-layout-editor svg { height: 350px; } }