.mounting-panel>summary{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;cursor:pointer;font-size:1.05rem}.mounting-panel>summary span{font-size:.85rem;color:#53615c}.mounting-panel[open]>summary{margin-bottom:16px}.mounting-detail{margin-top:14px;padding:13px 0;border-top:1px solid #d9e1dc}.mounting-detail>summary{cursor:pointer;font-weight:650}.mounting-detail>p,.mounting-detail>label,.mounting-detail>.ux-grid{margin-top:12px}.mounting-detail small,.mounting-caveat{display:block;font-size:.83rem;line-height:1.55;color:#53615c}.mounting-result{background:#edf3e7;border:1px solid #d9e1dc;border-radius:10px;padding:15px;margin-top:16px}.mounting-result p{margin:8px 0}.mounting-price-scroll{overflow:auto;margin-top:16px}.mounting-price-scroll table{width:100%;border-collapse:collapse;min-width:410px}.mounting-price-scroll th,.mounting-price-scroll td{text-align:left;padding:10px 8px;border-bottom:1px solid #d9e1dc}.mounting-price-scroll td:nth-child(2){white-space:nowrap}.mounting-price-scroll button{font-size:.8rem}.mounting-detail .aux-confirm{display:flex;align-items:flex-start;gap:10px}.mounting-detail .aux-confirm input{width:auto;flex-shrink:0}.mounting-detail input,.mounting-detail textarea{max-width:100%}@media(max-width:600px){.mounting-panel>.ux-grid,.mounting-detail .ux-grid{grid-template-columns:1fr}.mounting-panel>summary{align-items:flex-start;flex-direction:column}}
.mounting-heading{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-bottom:16px}.mounting-heading h3{margin:0}.mounting-heading span{font-size:.85rem;color:#53615c}.accessories-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;padding:16px;border:1px solid #d9e1dc;border-radius:10px;background:#f6f8f5}.accessories-summary small{display:block;color:#53615c;line-height:1.5;margin-top:5px}.accessories-summary button{flex-shrink:0}.accessories-page>.sectiontitle{align-items:flex-start;gap:16px}.accessories-page>.sectiontitle p{max-width:750px}.accessories-actions,.accessories-categories{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.accessories-actions{justify-content:space-between}.accessories-categories button[aria-pressed=true]{background:#183e32;color:#fff}.accessories-page .mounting-panel>p{line-height:1.6}.accessories-page button,.accessories-summary button{min-height:44px}@media(max-width:900px){main>nav{overflow-x:auto}main>nav button{white-space:nowrap}}@media(max-width:600px){.accessories-summary,.accessories-page>.sectiontitle{align-items:stretch;flex-direction:column}.accessories-actions{flex-direction:column}.mounting-heading{align-items:flex-start;flex-direction:column}}
.accessory-ledger{margin-top:22px}.accessory-ledger h3{margin:0}.accessory-table-scroll{overflow-x:auto;margin-top:18px}.accessory-table-scroll table{width:100%;border-collapse:collapse;min-width:800px}.accessory-table-scroll th,.accessory-table-scroll td{text-align:left;padding:12px 10px;border-bottom:1px solid #d9e1dc;vertical-align:top}.accessory-table-scroll th{font-size:.9rem}.accessory-table-scroll small{display:block;color:#53615c;line-height:1.5;margin-top:4px}.accessory-table-scroll td:first-child{min-width:240px;width:40%}.accessory-table-scroll input{min-width:90px;max-width:135px}.accessory-table-scroll label{font-size:.85rem}.accessory-amount{white-space:nowrap;font-weight:650}.accessory-totals{background:#edf3e7;padding:18px;border-radius:10px;margin:20px 0}.accessory-totals>div{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.accessory-totals strong{font-size:1.15rem}.accessory-totals p{line-height:1.5}.proposal-detail{display:flex;align-items:center;gap:10px;font-size:1rem}.proposal-detail input{width:20px;height:20px;flex-shrink:0}.printtools{flex-wrap:wrap}.printtools .proposal-detail{margin-right:auto}@media(max-width:600px){.accessory-totals>div{flex-direction:column;gap:5px}}

/* One editor becomes cards on narrow screens: keep the item beside its price. */
@media(max-width:600px){
 .accessory-table-scroll{overflow:visible;max-width:100%}
 .accessory-table-scroll table,.accessory-table-scroll tbody{display:block;min-width:0;width:100%}
 .accessory-table-scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .accessory-table-scroll tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px 0;border-bottom:1px solid #ccd7d0}
 .accessory-table-scroll td{display:block;border:0;padding:0;min-width:0;overflow-wrap:anywhere}
 .accessory-table-scroll td:first-child{grid-column:1/-1;min-width:0;width:auto}
 .accessory-table-scroll td:nth-child(4){grid-column:1/-1}
 .accessory-table-scroll td::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:600;color:#53615c;margin-bottom:5px}
 .accessory-table-scroll td:first-child::before{display:none}
 .accessory-table-scroll input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
 .accessory-table-scroll button{max-width:100%;white-space:normal}
 .accessory-table-scroll .accessory-amount{grid-column:1/-1;white-space:normal}
}

.mounting-roofs{margin:16px 0}.mounting-roof-total{margin:12px 0;padding:12px 16px}.mounting-roof-list{display:grid;gap:14px}.mounting-roof-card{border:1px solid #d9e1dc;border-radius:10px;padding:16px}.mounting-roof-card h4{margin:0 0 12px}.mounting-roof-card p{margin:8px 0}.mounting-roof-card small{color:#53615c;line-height:1.5}.mounting-result h4{margin:0 0 10px}@media(max-width:600px){.mounting-roof-card .ux-grid{grid-template-columns:1fr}.mounting-roof-card{padding:12px}.mounting-roof-card input{min-width:0;width:100%;box-sizing:border-box}}
.roof-orientation{display:block;max-width:380px;margin:16px 0;font-size:1rem}.roof-orientation select{width:100%;margin-top:6px}.roof-plan{margin-top:16px}.roof-plan-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.roof-plan-fields label{font-size:1rem;min-width:0}.roof-plan-fields input,.roof-plan-fields select{width:100%;box-sizing:border-box;margin-top:6px}.roof-plan-note{color:#53615c;font-size:.875rem;line-height:1.6}.roof-plan-metrics{display:flex;flex-wrap:wrap;gap:16px 28px;padding:14px 0;font-size:.875rem}.roof-plan-metrics b{font-size:1.25rem;margin-right:6px;color:#183e32}.roof-plan-svg{display:block;width:100%;height:auto;min-width:0;border:1px solid #d9e1dc;border-radius:10px;font-family:Arial,sans-serif}.roof-plan-status{font-size:.95rem;line-height:1.6;padding:12px 16px}.roof-plan-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.roof-plan-actions button{white-space:normal}.roof-plan .mounting-detail p{font-size:.875rem;line-height:1.6}.roof-plan .mounting-detail summary{font-size:1rem}@media(max-width:600px){.roof-plan-fields{grid-template-columns:1fr}.roof-plan-metrics{gap:10px;flex-direction:column}.roof-plan-actions{flex-direction:column}.roof-orientation{max-width:none}.roof-plan-svg{min-height:200px}.roof-plan-fields input,.roof-plan-fields select{font-size:1rem}}
/* Visual roof constructor: one selected slope, measured canvas, persistent controls. */
.roof-welcome{padding:32px}.roof-welcome .primary{margin:12px 0}.roof-panel-model{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.roof-module{background:#f4f7f3;padding:14px;border-radius:10px}.roof-overview{display:flex;align-items:center;justify-content:space-between;gap:12px}.roof-overview .mounting-roof-total{flex:1}.roof-tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 0 16px}.roof-tabs button{min-width:145px;text-align:left;flex-shrink:0;border:1px solid #cad7ce;border-radius:9px;padding:12px 14px;background:white}.roof-tabs button[aria-pressed=true]{background:#e4f3df;border:2px solid #426d37}.roof-tabs small{display:block;margin-top:5px;color:#50634e;font-size:12px}.roof-tabs .roof-add{min-width:120px;border-style:dashed}.mounting-roof-card{padding:20px!important}.roof-workbench{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:24px}.roof-controls{display:flex;flex-direction:column;gap:14px}.roof-controls input,.roof-controls select{width:100%;min-width:0}.roof-controls .roof-plan-fields{display:grid;grid-template-columns:1fr;gap:14px}.roof-drawing{min-width:0}.roof-plan-svg{display:block;width:100%;height:auto;max-height:560px;border:1px solid #ccd8ce;border-radius:10px}.roof-plan-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}.roof-plan-metrics span{display:flex;flex-direction:column;background:#f2f6f1;border-radius:8px;padding:12px;font-size:12px;gap:5px}.roof-plan-metrics b{font-size:19px;color:#29422b}.roof-draft-label{background:#fff3d8;border:1px solid #ecd5a0;padding:8px 12px;font-size:13px;border-radius:8px 8px 0 0}.roof-panel-row{cursor:pointer}.roof-panel-row.selected rect{stroke:#eaa940;stroke-width:3}.roof-panel-row:focus{outline:3px solid #dda44a}.roof-row-editor{margin-top:16px}.roof-row-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.roof-row-list{display:grid;gap:8px;margin-top:10px;max-height:310px;overflow:auto}.roof-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid #d2ddd1;border-radius:8px}.roof-row.selected{border-color:#799766;background:#f4f8ef}.roof-row>button:first-child{border:0;background:transparent;font-weight:600}.roof-stepper{display:flex;align-items:center;gap:5px}.roof-stepper input{width:65px;text-align:center;min-width:0;padding:8px}.roof-stepper label{margin:0}.roof-stepper button{min-width:36px;min-height:38px;padding:5px;font-size:20px}.roof-row>button:last-child{font-size:12px;padding:8px}.roof-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.roof-plan-status{margin-top:16px}.roof-plan-note{font-size:13px;line-height:1.5;color:#5b6c59}.accessory-saved-prices{margin-top:20px;padding:16px;background:#f5f5ef;border:1px solid #dddccc;border-radius:10px}.accessory-saved-prices li{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0}.accessory-saved-prices input{max-width:130px}.accessory-saved-prices label{flex-shrink:0}.accessory-saved-prices ul{padding:0;list-style:none}.accessory-ledger{scroll-margin-top:20px}.mounting-panel .mounting-heading{align-items:center}
@media(max-width:850px){.roof-workbench{grid-template-columns:1fr}.roof-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.roof-controls .roof-plan-fields{grid-column:1/-1;grid-template-columns:1fr 1fr}.roof-controls details,.roof-controls>p{grid-column:1/-1}.roof-plan-metrics b{font-size:17px}.roof-overview{flex-wrap:wrap}.roof-overview .mounting-roof-total{min-width:210px}.mounting-roof-card{padding:14px!important}}
@media(max-width:450px){.roof-controls{grid-template-columns:1fr}.roof-controls .roof-plan-fields{grid-template-columns:1fr}.roof-plan-metrics{gap:5px}.roof-plan-metrics span{padding:8px;font-size:11px}.roof-plan-metrics b{font-size:14px}.mounting-roof-card{padding:10px!important}.roof-row{gap:4px;padding:5px}.roof-row>button:first-child{padding:4px;font-size:12px}.roof-stepper{gap:3px}.roof-stepper input{width:49px}.roof-stepper button{min-width:31px}.roof-row>button:last-child{font-size:11px;padding:4px}.roof-row-heading strong{font-size:14px}.accessory-saved-prices li{flex-direction:column;align-items:stretch}.accessory-saved-prices input{max-width:none;width:100%}}

.accessory-price-context{display:none!important}@media(max-width:650px){.accessory-price-context{display:block!important;color:#273d32!important;font-weight:600;line-height:1.5;margin:0 0 8px!important}}

.roof-canvas-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 8px;font-size:12px}.roof-canvas-toolbar span{margin-right:auto}.roof-canvas-toolbar button{min-width:38px;min-height:38px;font-size:20px;padding:5px}.roof-canvas-viewport{overflow:auto;max-height:570px;border-radius:10px;border:1px solid #ccd8ce}.roof-canvas-viewport .roof-plan-svg{width:calc(100% * var(--roof-zoom,1));max-width:none;max-height:none;min-height:0;border:0;border-radius:0}@media(max-width:650px){.roof-canvas-viewport{max-height:420px}}
/* Free layout keeps the drawing primary; coordinates remain usable without drag. */
.roof-layout-mode{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:12px 0;border-bottom:1px solid #cdd9d0}.roof-layout-mode span{font-size:.9rem;color:#53615c}.roof-free-toolbar{display:flex;flex-wrap:wrap;gap:8px}.roof-free-toolbar button{min-height:44px}.roof-free-properties{margin-top:18px;padding:16px;background:#f0f4ef;border:1px solid #d5dfd7;border-radius:8px}.roof-free-properties h4{margin-bottom:12px}.roof-free-properties label,.roof-free-workbench>.roof-controls>label{display:block;font-size:.9rem;margin-top:12px}.roof-free-properties select,.roof-free-properties input,.roof-free-workbench>.roof-controls>label input,.roof-free-workbench>.roof-controls>label select{box-sizing:border-box;width:100%;min-width:0}.roof-free-properties .roof-plan-fields{gap:10px}.roof-nudge{display:flex;gap:8px;margin:14px 0}.roof-nudge button{flex:1;padding:8px;min-height:44px;font-size:1.2rem}.roof-delete{width:100%}.roof-free-object{cursor:grab;touch-action:none;outline:none}.roof-free-object text{pointer-events:none}.roof-free-object.selected .roof-free-body,.roof-free-object:focus .roof-free-body{stroke:#edb343;stroke-width:3}.roof-free-object.dragging{cursor:grabbing;opacity:.72}.roof-free-object.invalid .roof-free-body{stroke:#a02727;stroke-width:2.5}.roof-free-groups{padding:12px 0;border-top:1px solid #d5dfd7;margin-top:14px}.roof-free-groups strong{font-size:1rem}.roof-snap{display:flex;align-items:center;gap:6px;min-width:0;font-size:.875rem;margin-right:auto}.roof-snap input{width:18px;height:18px;flex-shrink:0}.roof-free-svg{user-select:none}.roof-free-workbench{align-items:start}@media(max-width:800px){.roof-free-workbench{display:flex;flex-direction:column}.roof-free-workbench>.roof-drawing{order:0;width:100%}.roof-free-workbench>.roof-controls{order:1;width:100%;box-sizing:border-box}.roof-free-toolbar button{flex:1}.roof-layout-mode button{width:100%}.roof-snap{width:100%}.roof-free-properties{padding:12px}}