.roof-map { padding:1.2rem; background:#eef5f0; border-bottom:1px solid #bfd1c5; }
.roof-map label, #roofForm label { display:block; font-weight:700; margin-bottom:.4rem; color:#163c2a; }
.roof-map input { width:100%; padding:.8rem; background:#fff; color:#153628; border:1px solid #759582; border-radius:8px; font:inherit; }
.roof-small, #roofForm small { display:block; font-size:.88rem; line-height:1.5; color:#405349; }
#roofForm h3 { margin:1.3rem 0 .6rem; color:#0d4f36; }
#roofForm .sizing-grid { gap:1rem; }
#roofForm .ceg-field input, #roofForm .ceg-field select { width:100%; min-width:0; }
#roofForm .ceg-field small { margin-top:.35rem; }
.roof-layout { margin:1rem 0; }
#roofPlan { width:100%; max-height:400px; background:#fff; border-radius:12px; }
#roofPlan[hidden], #roofOut[hidden] { display:none; }
.roof-layout figcaption { font-size:.85rem; line-height:1.5; margin:.4rem 0; color:#fff; }
#roofOut textarea { width:100%; min-height:160px; color:#143326; background:#fff; }
.roof-method { margin:2rem 0; padding:1.2rem; border:1px solid #c0d6c8; border-radius:14px; background:#fff; }
.roof-method p { max-width:80ch; }
#roofOut { scroll-margin-top:120px; }
.roof-limit { padding:.8rem; border:1px solid #a8c9b8; border-radius:8px; }
@media(max-width:600px) { .roof-map {padding:1rem;} #roofForm .sizing-grid {grid-template-columns:1fr;} }
.roof-map [hidden], .roof-energy [hidden], #roofSolarResult[hidden] {display:none;}
.roof-map .roof-check {display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0;cursor:pointer;}
.roof-map .roof-check input {width:24px;height:24px;flex:0 0 24px;margin:0;accent-color:#0d4f36;}
.roof-help {padding:.8rem 0;margin-bottom:1rem;}
.roof-help summary {cursor:pointer;min-height:44px;font-weight:700;}
.roof-map .sizing-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
.roof-map .btn {min-height:44px;white-space:normal;}
#roofPositionStatus, #roofSolarStatus {font-weight:700;line-height:1.5;}
#roofSolarStatus {color:#174b34;}
.roof-energy {margin-top:1rem;border-top:1px solid #bad0c2;padding-top:.6rem;}
.roof-energy select,.roof-energy input {width:100%;max-width:100%;min-height:44px;padding:.7rem;font:inherit;border:1px solid #759582;border-radius:8px;background:#fff;color:#163c2a;}
.roof-energy details {margin:1rem 0;padding:.8rem;background:#eef5f0;color:#163c2a;border-radius:8px;}
.roof-energy summary {cursor:pointer;font-weight:700;min-height:44px;}
.roof-energy details label {margin-top:1rem;}
#roofSolarResult {margin:1.2rem 0;padding:1rem;background:#f5faf6;color:#173e2b;border-radius:12px;overflow-wrap:anywhere;}
#roofSolarResult h3,#roofSolarResult p,#roofSolarResult a {color:#173e2b;}
#roofSolarResult a {text-decoration:underline;}
.roof-months {width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;table-layout:fixed;}
.roof-months caption {text-align:left;font-weight:700;padding:.6rem 0;}
.roof-months th,.roof-months td {padding:.7rem .4rem;border-bottom:1px solid #bdd1c5;text-align:right;overflow-wrap:normal;hyphens:none;}
.roof-months th:first-child {text-align:left;}
.roof-months thead th {font-size:.85rem;background:#e0eee5;}
.roof-months tbody th {font-weight:500;}
@media(max-width:420px) {.roof-map .sizing-grid {grid-template-columns:1fr;} #roofSolarResult {padding:.65rem;} .roof-months {font-size:.8rem;} .roof-months thead th {font-size:.75rem;} .roof-months th,.roof-months td {padding:.7rem .15rem;}}
.roof-photo {margin:1rem 0;padding:1rem;border:1px solid #bad3c3;background:#f1f8f3;color:#173e2b;border-radius:12px;}
.roof-photo [hidden],.roof-photo[hidden] {display:none!important;}
.roof-photo h3,.roof-photo p,.roof-photo label {color:#173e2b;}
.roof-photo label {display:block;font-weight:700;margin:.5rem 0;}
.roof-photo input {max-width:100%;min-width:0;}
#roofPhotoFile {width:100%;font-size:.9rem;}
#roofPhotoCanvas {display:block;width:100%;height:auto;max-height:none;cursor:crosshair;background:#d7e3da;margin-top:1rem;outline-offset:3px;}
.roof-photo .roof-check {display:flex;gap:.7rem;align-items:flex-start;}
.roof-photo .roof-check input {width:24px;height:24px;flex:0 0 24px;accent-color:#0d4f36;}
.roof-photo ol {padding-left:1.3rem;}
.roof-photo li {margin:.5rem 0;}
.roof-photo input[type=range] {width:100%;min-height:44px;}
.roof-photo button {white-space:normal;min-height:44px;}