.roof-diagrams{min-width:0}.diagram-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.diagram-heading h2{margin:.4rem 0}.diagram-heading select{max-width:150px}.diagram-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.diagram-tabs button{border:1px solid var(--line,#dfe5d9);border-radius:10px;padding:12px 16px;cursor:pointer;color:inherit;background:transparent}.diagram-tabs [aria-selected=true]{background:#214d3c;color:white;border-color:#214d3c}.diagram-viewport{overflow:auto;border:1px solid var(--line,#dfe5d9);border-radius:16px;background:#f1f5e9;max-height:660px}.diagram-viewport img{display:block;width:100%;min-width:360px;max-width:none;height:auto}.diagram-unavailable,.diagram-warning{padding:22px;background:#f8f0dd;color:#624925;border:1px solid #e9d9b8;border-radius:12px;margin:18px 0}.diagram-tools{margin-top:18px}.diagram-tools .button{padding:10px 14px}.roof-diagrams button:focus-visible,.diagram-viewport:focus-visible{outline:3px solid #a4c476;outline-offset:3px}@media(max-width:600px){.diagram-heading{align-items:flex-start;flex-direction:column}.diagram-tabs button{flex:1 1 40%}.diagram-viewport{max-height:420px}}