.design-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.design-layout .calculator-controls { background: var(--cream, #f5f4eb); }
.design-layout .calculator-results { position: sticky; top: 100px; }
.design-layout details { margin: 16px 0; }
.design-layout summary { cursor: pointer; font-weight: 700; padding: 14px 0; min-height: 44px; }
.design-layout h3 { margin: 24px 0 10px; }
.design-layout p, .design-layout li { overflow-wrap: anywhere; }
.design-layout li { margin: 10px 0; }
.design-roof-row { margin-top: 20px; }
.design-roof-drawings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.design-roof-drawings figure { margin: 0; }
.design-roof-drawings svg { width: 100%; max-height: 220px; display: block; background: #e5ebe2; border: 1px solid #aac0ad; }
.design-roof-drawings rect { fill: #193c30; stroke: #f5f4eb; stroke-width: 0.015; }
.design-roof-drawings figcaption { font-size: 13px; padding-top: 8px; }
.design-layout input, .design-layout select { min-height: 44px; font-size: 16px; }
.design-layout button { min-height: 44px; }
.design-layout button:disabled { opacity: .5; cursor: not-allowed; }
@media(max-width: 900px) { .design-layout { grid-template-columns: 1fr; gap: 20px; } .design-layout .calculator-results { position: static; } }
@media(max-width: 480px) { .design-roof-drawings { grid-template-columns: 1fr; } }