#roof-guide-dialog{width:min(1120px,calc(100% - 32px));max-width:1120px;max-height:90vh;padding:28px;border:1px solid #E5E7EB;border-radius:12px;color:#1A1A1A;background:#FFFFFF;font:18px/1.6 Arial,sans-serif;box-sizing:border-box;overflow:auto}
#roof-guide-dialog::backdrop{background:rgba(0,0,0,.55)}
.roof-guide-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.roof-guide-top h2{font:600 30px/1.3 Arial,sans-serif;margin:0}.roof-guide-top button{font-size:28px;min-width:48px;min-height:48px;border:1px solid #E5E7EB;background:#FFFFFF;color:#1A1A1A;border-radius:6px}
.roof-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}.roof-choice{display:flex;flex-direction:column;align-items:stretch;gap:10px;border:2px solid #E5E7EB;padding:14px;background:#FFFFFF;color:#1A1A1A;border-radius:8px;text-align:left;cursor:pointer;font-family:Arial,sans-serif}.roof-choice:hover,.roof-choice:focus-visible{border-color:#0057B8}.roof-choice[aria-pressed=true]{border-color:#0057B8;background:#F8F9FA}.roof-choice svg{display:block;width:100%;height:auto;background:#F8F9FA;border-radius:5px}.roof-choice strong{font-size:20px;line-height:1.4}.roof-choice span{font-size:17px;line-height:1.6}.roof-choice b{font-size:17px;color:#0057B8}.roof-guide-note{padding:16px;border-left:3px solid #0057B8;background:#F8F9FA}.roof-guide-sources{font-size:15px}.roof-guide-sources a{color:#0057B8}.roof-green{display:flex;align-items:flex-start;gap:12px;padding:18px;border:1px solid #E5E7EB;border-radius:8px;font-size:18px}.roof-green input{width:24px;height:24px;flex-shrink:0;accent-color:#0057B8;margin-top:3px}
.trade-schematic .roof-open{display:block;padding:12px 16px;margin-top:14px;border:1px solid #0057B8;border-radius:6px;background:#FFFFFF;color:#0057B8;cursor:pointer;font:600 17px/1.5 Arial,sans-serif}.trade-schematic .roof-selection{font-size:18px;color:#0057B8;margin:10px 0}.trade-schematic .roof-mode{font-size:18px;font-weight:600;color:#1A1A1A}
@media(max-width:850px){.roof-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#roof-guide-dialog{width:calc(100% - 20px);padding:18px;max-height:90dvh}.roof-guide-grid{grid-template-columns:minmax(0,1fr)}.roof-guide-top h2{font-size:25px}.roof-choice svg{max-height:220px}.roof-choice strong{font-size:21px}.roof-choice span{font-size:18px}}
@media print{#roof-guide-dialog{display:none!important}.roof-open{display:none!important}}
.roof-dimension-info{display:flex!important;flex-direction:column;gap:9px;margin:14px 0;padding:14px 0 0;border-top:1px solid #E5E7EB;color:#1A1A1A;font:400 18px/1.6 Arial,sans-serif}
.roof-dimension-info>strong{font:600 18px/1.5 Arial,sans-serif;color:#0057B8}
.roof-dimension-info>span{display:block;font:400 17px/1.6 Arial,sans-serif;color:#1A1A1A}
.roof-dimension-info .roof-area-rule{font-weight:600}
.roof-dimension-info .roof-measure-note{font-size:15px;color:#54595F}
.roof-measure{stroke-width:1.4}.roof-extension{stroke-width:1;stroke-dasharray:3 3;opacity:.8}
.roof-dimension-letter{letter-spacing:0}
.trade-schematic figcaption>.roof-dimension-info{margin:16px 0}
.trade-schematic figcaption>.roof-dimension-info>span{font-size:18px}
.trade-schematic figcaption>.roof-dimension-info>.roof-measure-note{font-size:16px;color:#54595F}
@media(max-width:600px){.roof-choice svg{max-height:none}.roof-dimension-info>span{font-size:18px}}