/* The ordering flow's step content (roof, system, price, request, confirmation) and My account. The flow's layout and summary card are inlined in index.html. */
.roof-view{margin:0 0 var(--s5)}
.roof-map{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3)}
.roof-map .map-canvas{position:absolute;inset:0}
.map-status{position:absolute;left:12px;bottom:12px;margin:0;padding:8px 12px;border-radius:var(--r-sm);background:var(--paper);font-size:13px}
.roof-art{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#d9ecfb,#f4f9fd)}
.roof-art svg{display:block;width:100%;height:auto}
.roof-sky{fill:transparent}
.roof-house{fill:#fff;stroke:#c9d3cc}
.roof-plane{fill:#5d6a73}
.roof-cells rect{fill:#6f7c85;stroke:#56626a;transition:fill .25s var(--ease)}
.roof-cells rect.on{fill:#1d3b63;stroke:#9fb8d8}
.roof-door{fill:#c9d3cc}
.roof-window{fill:#d9ecfb;stroke:#c9d3cc}
.roof-art-note{margin:0;padding:0 var(--s4) var(--s3);font-size:13px;color:var(--muted);text-align:right}
.roof-caption{font-size:14px;color:var(--muted);margin-top:var(--s3)}
.panel-picker,.addon{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r)}
.panel-picker h2,.addon h2{margin-bottom:4px}
.panel-picker p,.addon p{margin:0}
.addon{margin-top:var(--s5);transition:border-color .2s,background .2s}
.addon.is-on{border-color:var(--ink);background:var(--paper-2)}
.stepper{display:flex;align-items:center;gap:var(--s3);flex:none}
.stepper output{min-width:36px;text-align:center;font:700 22px var(--disp)}
.stepper-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);font-size:20px;line-height:1;transition:border-color .2s}
.stepper-btn:hover{border-color:var(--ink)}
.choice-grid{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.choice{position:relative;display:grid;gap:6px;padding:var(--s5);border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.choice:hover{border-color:var(--ink)}
.choice.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.choice-title{font:600 18px var(--disp)}
.choice-body{font-size:14px;color:var(--ink-2)}
.price-card{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg)}
.price-table{width:100%;border-collapse:collapse;margin-bottom:var(--s4)}
.price-table th,.price-table td{padding:14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:500}
.price-table th span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.price-table td{text-align:right;white-space:nowrap;padding-left:var(--s4)}
.price-table tfoot th,.price-table tfoot td{border-bottom:0;padding-top:var(--s4);font:700 22px var(--disp)}
.order-done{outline:0}
.done-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:var(--accent);margin-bottom:var(--s5);animation:pop .4s var(--ease)}
.done-mark svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.timeline{list-style:none;margin:var(--s6) 0;padding:0;counter-reset:t}
.timeline li{position:relative;display:grid;gap:2px;padding:0 0 var(--s5) 44px;counter-increment:t}
.timeline li:before{content:counter(t);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--paper-3);font-size:13px;font-weight:700}
.timeline li:first-child:before{background:var(--accent);color:#fff}
.timeline li:not(:last-child):after{content:"";position:absolute;left:13.5px;top:32px;bottom:4px;width:1px;background:var(--line-2)}
.timeline span{color:var(--ink-2);font-size:15px}
.order-form .field-error a{color:inherit}
/* My account */
.account-page{max-width:880px}
.request-card,.empty-card,.signin-card{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);margin-bottom:var(--s4)}
.request-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.request-card-head h2{margin-bottom:4px}
.stage-chip{flex:none;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600}
.request-notes{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.request-notes h3{font:600 15px var(--text);margin-bottom:var(--s3)}
.note-item{display:grid;gap:4px;margin-bottom:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--paper-2);border-left:0}
.note-item p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.request-pay{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s4);padding:var(--s4);border-radius:var(--r);background:var(--paper-2)}
.request-pay p{margin:0}
.request-amount{font:700 24px var(--disp)}
.empty-card{text-align:left;background:var(--paper-2);border:0}
.signin-card{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4)}
.signin-card>div{flex:1 1 320px}
.signin-card p{margin:0}
.signin-card [role=alert]{flex-basis:100%}
.sk-card.request-card{height:auto}
@media(max-width:600px){.choice-grid{grid-template-columns:1fr}.panel-picker,.addon{flex-direction:column;align-items:flex-start}.request-card-head{flex-direction:column}.request-pay{flex-direction:column;align-items:flex-start}.roof-map{aspect-ratio:4/3}}
/* Planner design and checkout, in the side panel beside the map. */
.text-btn{border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--accent);text-decoration:underline;cursor:pointer}
.plan-draw{display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:var(--paper-2);font-size:14px}
.plan-draw p{margin:0}
.plan-source{margin:0;font-size:14px;color:var(--ink-2)}
.source-chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;margin-right:4px}
.tray-item{border:1px solid var(--line);border-radius:14px}
.tray-item strong{display:block;font-size:15px}
.tray-item span{font-size:12.5px;color:var(--muted)}
.tray-icon{width:36px;height:36px;border-radius:10px}
.tray-solar{background:repeating-linear-gradient(90deg,#10223f 0 7px,#dfe8f5 7px 8px),#10223f}
.tray-pw{background:#18201c;box-shadow:inset 0 0 0 3px #3a4640}
.tray-gen{background:#8a4b0f;box-shadow:inset 0 0 0 3px #b0692a}
.tray-item .stepper-btn{width:34px;height:34px}
.tray-item .stepper output{min-width:28px;font-size:18px}
.stepper-btn:disabled{opacity:.35;cursor:default}
.plan-price{padding-top:12px;border-top:1px solid var(--line);transition:opacity .2s}
.plan-price.is-busy{opacity:.7}
.plan-price-title{margin:0;display:inline-flex;align-items:center;gap:6px;font:600 15px var(--text)}
.info-btn{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);font:600 11px/1 var(--disp);font-style:italic;color:var(--muted);cursor:pointer;transition:border-color .2s,color .2s}
.info-btn:hover,.info-btn:focus-visible{border-color:var(--ink);color:var(--ink)}
.seg{display:inline-flex;padding:2px;border-radius:999px;background:var(--paper-3)}
.seg-btn{border:0;background:none;padding:4px 10px;border-radius:999px;font:500 12.5px var(--text);color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.seg-btn.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0b2a4a26}
.plan-empty{margin:0;padding:10px 12px;border-radius:10px;background:var(--paper-2);font-size:14px;color:var(--ink-2)}
.plan-cta{width:100%;margin-top:4px}
.plan-card .price-table{width:100%;border-collapse:collapse;font-size:14px}
.plan-card .price-table th,.plan-card .price-table td{padding:6px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.plan-card .price-table td{text-align:right}
.plan-card .price-table tfoot th,.plan-card .price-table tfoot td{font-weight:700;border-bottom:0}
.plan-card.order-form{gap:10px;margin:0}
.plan-card.order-form textarea{min-height:64px}
@media(max-width:760px){.planner[data-mode=design] .planner-panel,.planner[data-mode=review] .planner-panel,.planner[data-mode=details] .planner-panel,.planner[data-mode=done] .planner-panel{max-height:60%}.planner[data-mode=details] .planner-panel,.planner[data-mode=done] .planner-panel{max-height:78%}}
.choice-card{border:1.5px solid var(--line-2);border-radius:14px;background:var(--paper);font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.choice-card strong{font-size:14.5px;line-height:1.25}
.choice-card span{font-size:12px;line-height:1.35;color:var(--muted)}
.choice-card.is-on{border-color:var(--accent);background:var(--accent-soft)}
.bill-input{padding:0 12px;border:1px solid var(--line-2);border-radius:10px}
.bill-input input{border:0;outline:0;font:inherit;min-height:42px;width:100%;background:none}
.metric dt{font-size:11.5px;color:var(--muted);letter-spacing:.01em}
.metric dd{font:600 18px/1.2 var(--disp)}
.metric dd span{font:500 12px var(--text);color:var(--muted);margin-left:3px}
.metric:first-child dd{font-size:22px}
.legal{margin:4px 0 0}
.done-account{margin:8px 0 0;font-size:14px}
@media(max-width:760px){.metric dd{font-size:16px}.metric:first-child dd{font-size:18px}}
/* Sun on the property: a day, a time, and where the light and the shadows fall. */
.sun-head strong{font-size:15px}
.sun{padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.sun-days{gap:6px}
.sun-days .chip{padding:5px 11px;font-size:13px}
.sun-time,.sun-date,.slider,.bill,.array-turn{font-size:14px}
.sun-time,.sun-date{gap:4px}
.sun-read{margin:0;font-size:14px;color:var(--ink-2)}
.sun-read strong{color:var(--ink)}
.sun-plane{margin:0;font-size:13px;color:var(--muted)}
/* Saved properties: chips on the planner, cards in My account. */
.plan-saved{display:grid;gap:8px}
.plan-saved h2{font:600 14px var(--text);color:var(--muted);margin:0}
.saved-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.saved-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.saved-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-item .btn{flex:none}
.plan-save-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.plan-hint{margin:0;font-size:13px;color:var(--muted)}
.plan-accuracy{margin:0;padding:8px 10px;border-radius:10px;background:var(--accent-soft);font-size:13px;color:var(--accent-2)}
.design-block{display:grid;gap:8px;margin-top:var(--s4);padding:var(--s4);border-radius:var(--r);background:var(--paper-2)}
.design-block .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.design-block .summary-rows{margin:0}
.design-block .summary-row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.design-block .summary-row dt{color:var(--muted)}
.design-block .summary-row dd{margin:0;text-align:right}
.design-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.properties-card h2{margin-bottom:var(--s3)}
.next-step{display:grid;gap:6px}
.next-step label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;font-size:14px;cursor:pointer}
.next-step label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.next-step input{margin-top:3px}
@media(max-width:600px){.design-block .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Stub map (no browser key): a metre grid, no imagery, what the visitor draws. */
.stub-map{background:#e4eae6;overflow:hidden}
.stub-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.stub-grid line{stroke:#c9d3cc;stroke-width:1}
.stub-surface{stroke-width:2;fill-opacity:.14}
.stub-surface-roof{stroke:#ffe08a;fill:#ffd24a}
.stub-surface-yard{stroke:#3fbf6a;fill:#3fbf6a}
.stub-halo{fill:none;stroke:#ffd24a;stroke-opacity:.35;stroke-width:12}
.stub-outline{fill:#ffd24a;fill-opacity:.14;stroke:#ffe08a;stroke-width:2.5}
.stub-panel{fill:#10223f;fill-opacity:.88;stroke:#dfe8f5;stroke-width:1;cursor:pointer}
.stub-panel:hover,.stub-panel:focus-visible{fill:#1d3b63;outline:0}
.stub-draft{fill:#fff;fill-opacity:.18;stroke:#fff;stroke-width:2}
.stub-draft-dot{fill:#fff;stroke:#1c6a3f;stroke-width:1.5}
.stub-item rect{fill:#18201c;stroke:#fff;stroke-width:2}
.stub-item-generator rect{fill:#8a4b0f}
.stub-item text{font:700 12px var(--text);fill:#fff}
.stub-sun-track{fill:none;stroke:#ffd24a;stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.stub-sun{fill:#ffd24a;stroke:#fff;stroke-width:2}
.stub-shadow{fill:none;stroke:#10223f;stroke-width:3;stroke-opacity:.8}
.stub-map-scale{position:absolute;left:16px;top:16px;height:8px;border:2px solid #10223f;border-top:0;font:600 11px/1 var(--text);color:#10223f;text-indent:6px;line-height:0;padding-top:0;box-sizing:content-box}
.stub-map-scale::after{content:"no satellite imagery";display:block;margin-top:14px;font-weight:400;color:#3d4742;white-space:nowrap}
.planner-map-note{pointer-events:none}
@media(max-width:760px){.planner-map-note{top:12px;bottom:auto;left:12px;right:12px;padding:8px 10px;font-size:12.5px;line-height:1.35}.stub-map-scale{top:auto;bottom:44px}}

/* P7: the array direction control, the season chips with a custom date, the outline status, the bill note and the stub map's drag handles. */
.array-turn .stepper-btn{width:36px;height:36px;font-size:18px}
.array-turn-read{flex:1;min-width:0}
.sun-date input{min-height:40px;padding:6px 10px;border:1px solid var(--line-2);border-radius:10px;font:inherit;background:#fff;max-width:200px}
.plan-draw-count{font-weight:600;color:var(--ink)}
.bill-note{margin:0;color:var(--ink)}
.plan-help{margin:0}
.plan-help+.plan-help{margin-top:-4px}
.stub-panel.is-dragging{fill:#1d3b63;fill-opacity:.7;cursor:grabbing}
.stub-panel{cursor:grab;touch-action:none}
.stub-spoke{stroke:#1c6a3f;stroke-width:2;stroke-opacity:.9;pointer-events:none}
.stub-sun-track,.stub-sun,.stub-shadow,.stub-draft,.stub-draft-dot,.stub-halo{pointer-events:none}
.stub-outline-label{pointer-events:none}
.stub-rotator{position:absolute;left:0;top:0;width:36px;height:36px;padding:0;border:2.5px solid var(--accent);border-radius:50%;background:#fff;cursor:grab;touch-action:none;box-shadow:0 4px 12px #0b2a4a33;display:grid;place-items:center}
.stub-rotator:active{cursor:grabbing}
.stub-rotator svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stub-outline-label{font:600 11.5px var(--text);fill:#18201c;paint-order:stroke;stroke:#fffffff2;stroke-width:5px;stroke-linejoin:round}

/* P8: the "How we estimate" dialog (a bottom sheet on the phone; its privacy nanoglass comes from .glass-privacy in shell.css), and Google's attribution bar kept compact. The Google logo and the "Map data / Imagery" copyright line stay visible, as Google's terms require; the Terms link is kept small for the same reason; the keyboard-shortcuts link is off in the map options and the map-error link is hidden. */
.how-dialog{border:0;padding:0;width:100%;max-width:min(560px,calc(100vw - 32px));border-radius:18px;color:var(--ink)}
.how-body{padding:20px 22px 22px;max-height:min(80vh,720px);overflow:auto;font-size:14px;line-height:1.5}
.how-body p{margin:0 0 10px}
.how-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.how-head h2{margin:0}
.how-close{flex:none;width:36px;height:36px;padding:0;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.how-terms{margin:12px 0 0;font-size:12.5px}
.how-sources-title{margin:14px 0 6px;font:600 11.5px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.how-sources{margin:0;padding-left:18px;display:grid;gap:6px;font-size:12.5px;color:var(--ink-2)}
@media(max-width:760px){.how-dialog{margin:auto 0 0;max-width:none;border-radius:18px 18px 0 0}.how-body{max-height:86vh;padding-bottom:calc(22px + env(safe-area-inset-bottom))}}
.planner-canvas .gm-style-cc{font-size:10px!important;line-height:14px!important;height:14px!important}
.planner-canvas .gm-style-cc div,.planner-canvas .gm-style-cc a,.planner-canvas .gm-style-cc button{font-size:10px!important;color:#fff!important}
.planner-canvas .gm-style-cc>div:first-child>div{background:#0b2a4ab3!important}
.planner-canvas .gm-style-cc:has(a[href*="rapsrc"]){display:none!important}
.planner-canvas div:is([style*="right: 0px"],[style*="right:0px"],[style*="right: 0;"],[style*="right:0;"]):has(.gm-style-cc){right:16px!important;bottom:6px!important;max-width:calc(100% - 32px)}
.planner-canvas div:is([style*="left: 0px"],[style*="left:0px"],[style*="left: 0;"],[style*="left:0;"]):has(a[href*="maps.google.com"]){bottom:6px!important}
@media(max-width:760px){.planner-canvas .gm-style-cc>div:last-child{max-width:150px;overflow:hidden;text-overflow:ellipsis}.planner-canvas div:is([style*="right: 0px"],[style*="right:0px"],[style*="right: 0;"],[style*="right:0;"]):has(.gm-style-cc){bottom:26px!important}.planner-canvas div:is([style*="left: 0px"],[style*="left:0px"],[style*="left: 0;"],[style*="left:0;"]):has(a[href*="maps.google.com"]){bottom:22px!important}}

/* Demo polish (2026-09-27): one steady glow ring, a clean generator icon, radios aligned to their titles, and "Change property" on one line. */
.plan-glow-ring-2{display:none}
.plan-card-head .text-btn{flex:none;white-space:nowrap;margin-top:2px}
.tray-gen{background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6a3f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Cpath d='M7 7V5h4v2M13 10l-2.5 3.5h3L11 17'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:none}
.order-form .next-step input[type=radio]{flex:none;width:18px;height:18px;min-width:0;padding:0;border:0;margin:1px 0 0;accent-color:var(--accent)}
.order-form .next-step input[type=radio]:focus{box-shadow:none}
.next-step label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* Your roof in 3D (features/solar/roof-3d.js): one tile in the design panel. The canvas takes the OS palette through these tokens; dark theme swaps them. */
.roof3d{margin:var(--s4) 0 var(--s5);--roof3d-roof-main:#5b6470;--roof3d-roof:#454c56;--roof3d-wall:#e7e2d6;--roof3d-edge:rgba(20,24,30,.22);--roof3d-panel:#1d2f6f;--roof3d-panel-edge:rgba(255,255,255,.4);--roof3d-shadow:rgba(20,30,50,.2);--roof3d-sun:#ffc84a;--roof3d-powerwall:#f2f3f5;--roof3d-generator:#8a8f96;--roof3d-yard:#b7c49d}
:root[data-theme="dark"] .roof3d,.dark .roof3d{--roof3d-yard:#5d6b4c;--roof3d-wall:#b9b3a6;--roof3d-edge:rgba(0,0,0,.4);--roof3d-shadow:rgba(0,0,0,.35);--roof3d-panel:#2a44a0}
.roof3d-stage{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#d9ecfb 0%,#eef5fb 55%,#dfe7d6 56%,#cfdac0 100%)}
:root[data-theme="dark"] .roof3d-stage,.dark .roof3d-stage{background:linear-gradient(180deg,#1b2a3f 0%,#243449 55%,#2b3a2c 56%,#22301f 100%)}
.roof3d-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline:none}
.roof3d-canvas:active{cursor:grabbing}
.roof3d-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.roof3d-play{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-size:12px;line-height:1}
.roof3d-say{margin:var(--s3) 0 0;font-size:14px;min-height:2.6em;color:var(--ink)}
.roof3d-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
@media (prefers-reduced-motion:reduce){.roof3d-play{display:none}}

/* The workspace window is invisible, so the planner carries its own shape: one rounded card whose map and panel are opaque, and its controls follow the theme. */
.workspace-window .planner{border-radius:18px}
@media(max-width:760px){.workspace-window .planner{border-radius:14px}}
:root[data-theme=dark] .planner-zoom button{background:var(--raised)}
:root[data-theme=dark] .planner-zoom button+button{border-top-color:var(--line-2)}
:root[data-theme=dark] .planner-handle{--glass-tint:#191d20e0;--glass-shadow:-6px 0 18px #00000059}

/* The planner canvas is paper until the satellite tiles paint (VE-7). */
.planner-canvas{background:var(--paper-2)}