/* Roof-only layout; fields and centred result hierarchy use calculator.css. */
.cp-page-content--tool .entry-content>.cp-roof{grid-column:1 / -1}
.cp-roof .cp-form{width:100%;max-width:760px;margin-inline:auto;padding-bottom:24px;box-sizing:border-box}
.cp-roof .cp-mode-options{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.cp-page .cp-roof .cp-help{min-height:54px}
.cp-page .cp-roof .cp-error{min-height:54px}
.cp-page .entry-content .cp-roof p{margin:0}
.cp-page .entry-content .cp-roof h2{font-size:21px;line-height:1.25;margin:0}
.cp-page .entry-content .cp-roof h3{margin:0}
.cp-roof-geometry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--cp-line);margin:20px 0 0;padding-top:16px;text-align:center}
.cp-roof-geometry dt{font-size:12px;line-height:1.5;min-height:72px;color:var(--cp-muted)}
.cp-roof-geometry dd{margin:0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-height:56px}
.cp-roof-figure{margin:24px 0 16px}
.cp-roof-figure svg{display:block;width:100%;height:auto;aspect-ratio:560/210}
.cp-roof-annotations{width:100%;max-width:620px;margin-inline:auto;padding:0 8px;box-sizing:border-box}
.cp-page .cp-roof-annotations p{margin:0;font-family:inherit;line-height:1.5;overflow-wrap:anywhere}
.cp-page .cp-roof-annotations .cp-diagram-heading{text-align:center;font-size:15px;font-weight:600;color:var(--cp-ink);min-height:45px}
.cp-diagram-measures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:44px;align-items:start;text-align:center;font-size:13px;color:var(--cp-muted);font-variant-numeric:tabular-nums}
.cp-diagram-dimensions{display:grid;gap:6px;min-height:70px;padding-top:12px;text-align:center;font-size:13px;color:var(--cp-muted);font-variant-numeric:tabular-nums}
.cp-roof-figure figcaption{margin-top:12px;text-align:center}
@media(max-width:480px){.cp-diagram-measures{gap:8px;min-height:60px}.cp-diagram-dimensions{min-height:96px}.cp-page .cp-roof-annotations .cp-diagram-heading{min-height:48px;font-size:14px}}
.cp-roof-figure figcaption,.cp-roof-note{font-size:12px;color:var(--cp-muted);line-height:1.6}
@media(max-width:480px){.cp-roof .cp-form{padding-inline:12px}.cp-roof .cp-result-card{padding-inline:12px}.cp-roof-geometry{gap:6px}.cp-roof-geometry dd{font-size:17px}.cp-roof-geometry dt{font-size:11px}}