.roof-section{margin-block:55px}.roof-section>p{max-width:820px}.roof-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}#roof-calculator{border:1px solid var(--line);padding:28px}#roof-calculator fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}#roof-calculator legend{font-weight:800;font-size:20px;margin-bottom:18px}#roof-calculator label{display:block;font-size:14px;margin-bottom:16px;font-weight:650}#roof-calculator input,#roof-calculator select{display:block;width:100%;margin-top:6px;min-width:0}.roof-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.roof-help,#roof-parts>p{font-size:13px}.roof-result{background:var(--petrol);border-top:5px solid var(--lime);padding:30px;color:white}.roof-result p{color:#e3edef;font-size:14px}.roof-result .eyebrow{color:var(--lime)}#roof-output p:first-child{font-size:29px;font-weight:800;color:white}.roof-price-info{border-top:1px solid #527581;padding-top:24px;margin-top:26px}.roof-price-info h3{font-size:22px}#roof-error{color:#a52323}#roof-calculator .roof-part{border-bottom:1px solid var(--line);padding-bottom:15px}.roof-remove{background:none;border:0;text-decoration:underline;color:var(--petrol)}.photo-upload{margin-block:22px;border:1px solid var(--line);padding:18px}.photo-upload legend{font-weight:800}.photo-upload p{font-size:13px}.photo-list{list-style:none;padding:0}.photo-list li{display:flex;align-items:center;gap:12px;margin:10px 0;overflow-wrap:anywhere}.photo-list img{width:70px;height:55px;object-fit:cover}.photo-list button{margin-left:auto;background:white;border:1px solid var(--line);padding:6px;font-size:12px}.photo-error{color:#a52323}.photo-list span{font-size:12px;min-width:0}@media(max-width:760px){.roof-layout{grid-template-columns:1fr}.roof-section{margin-block:35px}#roof-calculator,.roof-result{padding:22px}.roof-fields{grid-template-columns:1fr}.roof-result h3{font-size:25px}}
.roof-output-line{white-space:pre-line}
.roof-measure{margin:0 0 24px}.roof-measure img{width:100%;height:auto}.roof-measure figcaption{font-size:13px;line-height:1.6;margin-top:12px;color:var(--muted)}#roof-calculator .roof-exact-toggle{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13px}#roof-calculator .roof-exact-toggle input{width:18px;height:18px;flex:0 0 18px;margin:2px 0}#roof-known{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.roof-more{margin:5px 0 25px;border-block:1px solid var(--line);padding:16px 0}.roof-more summary{cursor:pointer;font-size:14px;font-weight:700}.roof-more fieldset{margin-top:20px!important}@media(max-width:760px){#roof-known{grid-template-columns:1fr}.roof-measure{margin-inline:-10px}.roof-measure figcaption{padding-inline:10px}}