:root{--ink:#202b26;--muted:#546151;--paper:#f5f6f1;--line:#d6ddce;--accent:#dce89b;--soft:#eef2e6}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 Arial,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button,a,input,select,textarea{touch-action:manipulation}[hidden]{display:none!important}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #758d30;outline-offset:3px}.shell{max-width:1440px;margin:auto;width:calc(100% - 64px)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.topbar{display:flex;align-items:center;gap:24px;justify-content:space-between;padding:25px 0;border-bottom:1px solid var(--line)}.brand{font-size:27px;letter-spacing:-1px;font-weight:800;line-height:1}.brand span{display:block;font-size:10px;letter-spacing:1.6px;margin-top:10px;font-weight:500}.local-badge{display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:8px 14px;border-radius:30px;font-size:14px}.local-badge i{width:7px;height:7px;border-radius:50%;background:#718d31}.back-link{font-size:16px}.intro{padding:32px 0 22px}.eyebrow{font-size:12px;letter-spacing:1.4px;font-weight:700;margin:0 0 10px;color:var(--muted)}h1{font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:-1.5px;line-height:1.15;margin:0 0 12px}h2{font-size:26px;font-weight:500;letter-spacing:-.5px;margin:0;line-height:1.25}h3{font-size:21px;font-weight:600;margin:0;line-height:1.3}p{margin-top:0}.intro>p:last-child{margin:0;color:var(--muted)}label{display:block;font-size:16px;font-weight:600}input,select,textarea{display:block;width:100%;min-width:0;min-height:50px;margin-top:8px;padding:12px;background:#fff;border:1px solid #b8c2af;border-radius:6px;font-size:18px}input:read-only{background:#f2f4ed;color:var(--muted)}textarea{min-height:94px;resize:vertical}fieldset{border:0;margin:0;padding:0;min-width:0}legend{font-size:16px;font-weight:600;margin-bottom:12px}summary{cursor:pointer;font-size:17px;font-weight:600;min-height:48px;line-height:1.5;padding:12px 0}summary span{font-size:14px;font-weight:400;color:var(--muted);margin-left:12px}.project-meta{border-bottom:1px solid var(--line)}.project-top{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px 0 20px}.save-state{font-size:14px;color:var(--muted);margin:12px 0 22px}.workspace{display:grid;gap:28px}.editor,.project-panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;min-width:0;scroll-margin-top:20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.panel-heading .eyebrow{margin-bottom:8px}.setup-step{padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--line)}.step-heading{display:flex;gap:12px;align-items:center;margin-bottom:15px}.step-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--ink);color:#fff;font-size:16px;font-weight:700}.step-intro{color:var(--muted);font-size:15px;margin-bottom:18px}.product-line{display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:center;gap:24px}.segmented{display:flex;gap:8px}.segmented button,.leaf-tabs button{min-height:50px;background:#f5f7f0;border:1px solid #b8c2af;border-radius:6px;padding:10px 14px;flex:1;font-size:16px}.segmented [aria-pressed=true],.leaf-tabs [aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.product-kinds button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:68px;font-size:17px;font-weight:600}.product-kinds svg{height:34px;width:34px;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none}.hint{font-size:14px;color:var(--muted);font-weight:400;line-height:1.5;margin:10px 0 0}.dimensions-bar{display:grid;grid-template-columns:1fr 1fr 1.65fr .85fr;gap:18px;align-items:start}.dimensions-bar>*{min-width:0}.dimensions-bar input{font-size:21px}.section-count-entry{display:grid;grid-template-columns:minmax(65px,1fr) auto;gap:8px;align-items:end}.button{display:inline-flex;justify-content:center;align-items:center;gap:14px;border:1px solid var(--ink);border-radius:6px;padding:12px 20px;min-height:50px;font-size:16px;font-weight:600}.primary{background:var(--ink);color:#fff}.secondary{background:#fff}.button:not(:disabled):hover{background:#3b4b40;color:#fff}.section-count-entry .button{padding:12px 14px}.quiet{background:none;border:0;border-bottom:1px solid #b8c2af;padding:10px 0;min-height:48px;font-size:15px}.quiet:hover{color:#52662c}.visual-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:24px}.preview-panel{padding:22px;background:#eef2e7;border:1px solid #d1dac6;border-radius:8px;min-width:0;position:sticky;top:16px}.preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.preview-top .eyebrow{margin:0}.view-label{font-size:14px;color:var(--muted)}.canvas-help{font-size:15px;margin:12px 0;color:#3b4c35}.drawing{background:radial-gradient(ellipse at 50% 70%,#fff,#eef2e5 80%);border:1px solid #d6dece;border-radius:6px;height:390px;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:16px 0}.drawing svg{display:block;width:100%;height:100%}.drawing [role=button]{cursor:pointer}.preview-bottom h2{font-size:23px}.preview-bottom p{font-size:15px;line-height:1.55;color:var(--muted);margin:10px 0 0}.drawing-note{border-top:1px solid #c9d4bc;padding-top:14px;margin:16px 0 0;font-size:14px;color:var(--muted)}.leaf-settings{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;min-width:0}.leaf-settings>legend{font-size:20px;padding:0 7px}.leaf-settings>.hint:first-of-type{margin:0 0 12px}.leaf-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;max-height:170px;overflow-y:auto;padding:3px}.leaf-tabs button{flex:1 0 28%;font-size:15px;padding:9px 5px;white-space:nowrap}.selected-leaf{font-size:17px;font-weight:700;margin:16px 0 12px}.opening-modes{display:grid;gap:9px}.opening-modes button{display:block;text-align:left;background:#f7f8f3;border:1px solid #b8c2af;border-radius:6px;min-height:68px;padding:11px 13px}.opening-modes strong{display:block;font-size:17px;font-weight:600}.opening-modes span{display:block;font-size:14px;margin-top:3px;color:var(--muted)}.opening-modes [aria-pressed=true]{background:#e6edce;border:2px solid #4e6533;padding:10px 12px}.opening-modes [aria-pressed=true] strong:before{content:'✓ ';color:#3a502a}.direction-settings{margin-top:18px}.opening-help{margin-top:14px}.section-measure{border-top:1px solid var(--line);margin-top:18px}.section-measure summary{font-size:15px}.appearance-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}.colour-choices{display:flex;flex-wrap:wrap;gap:10px}.colour-choices button{display:flex;align-items:center;gap:9px;min-height:52px;border:1px solid #b8c2af;background:#fff;border-radius:6px;padding:10px 14px;font-size:16px}.colour-choices [aria-pressed=true]{background:#e6edce;border:2px solid #4e6533;padding:9px 13px}.colour-choices i{display:block;width:22px;height:22px;flex-shrink:0;border:1px solid #87917e;border-radius:50%;background:var(--swatch)}.colour-choices .oak{background:repeating-linear-gradient(90deg,#a77030,#b78947 3px,#d3aa68 5px)}.finish-step{margin-bottom:0}.advanced-settings{border-bottom:1px solid var(--line);padding:10px 0;margin:0 0 24px}.advanced-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0}.field{margin-bottom:20px}.optional{font-size:14px;font-weight:400;color:var(--muted);margin-left:8px}.add-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end}.add-row .add-button{width:100%;min-height:56px}.error{background:#fff0ea;border-left:3px solid #a64331;color:#8b3025;padding:13px;margin-bottom:16px;font-size:15px}.fold-preview{border-top:1px solid #c9d4bc;margin-top:18px;padding-top:16px}.fold-preview h3{font-size:16px}.fold-preview svg{display:block;width:100%;max-height:155px;margin:12px 0}.project-count{border-radius:30px;white-space:nowrap;background:var(--accent);font-size:16px;padding:7px 14px}.empty-state{padding:25px;background:var(--soft);border:1px dashed #b6c5a7;border-radius:6px;color:var(--muted)}.empty-state strong{display:block;color:var(--ink);font-size:19px;margin-bottom:8px}.empty-state p{margin:0;font-size:16px}.project-item{display:grid;grid-template-columns:125px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--line)}.project-item.is-editing{background:#f1f5e7;outline:1px solid #b8c891;border-radius:5px;padding:24px 12px}.item-thumb{height:140px;width:125px;background:#f0f3e8;display:flex;align-items:center}.item-thumb svg{width:100%;height:100%}.item-detail{min-width:0}.item-detail p{font-size:16px;color:var(--muted);margin:8px 0;overflow-wrap:anywhere}.item-detail h3{font-size:22px}.item-spec summary{font-size:15px;min-height:44px;padding:8px 0}.item-spec p{font-size:14px}.item-actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px}.item-actions button{font-size:15px}.remove{color:#914535}.project-total{display:flex;justify-content:space-between;gap:24px;padding:24px 0;border-top:1px solid var(--line)}.project-total strong{display:block;font-size:26px;font-weight:500}.project-total small{font-size:15px;color:var(--muted)}.no-price{font-size:16px;color:var(--muted)}.project-actions{display:flex;flex-wrap:wrap;gap:12px 24px}.action-status{font-size:15px;color:#41592e;margin:12px 0 0;min-height:22px}.local-note{margin:24px 0;font-size:14px;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0;font-size:14px;color:var(--muted)}.skip{position:absolute;top:-100px}.skip:focus{top:0;padding:12px;background:#fff;z-index:10}dialog{width:calc(100% - 32px);max-width:520px;border:1px solid var(--line);border-radius:8px;padding:26px;color:var(--ink)}dialog::backdrop{background:#202b2688}dialog p{font-size:16px;color:var(--muted);margin:16px 0}.dialog-actions{display:flex;justify-content:end;flex-wrap:wrap;gap:12px}#export-dialog{max-width:760px}#export-content{height:320px;max-height:45vh;font:14px/1.6 monospace;white-space:pre;margin-bottom:20px;overflow:auto}
@media(max-width:1050px){.shell{width:calc(100% - 40px)}.editor,.project-panel{padding:22px}.product-line{grid-template-columns:1fr}.product-line>label{max-width:280px}.dimensions-bar{grid-template-columns:1fr 1fr;gap:18px}.visual-workspace{grid-template-columns:minmax(0,1fr) 300px;gap:18px}.preview-panel{padding:18px}.drawing{height:350px}.product-kinds button{font-size:16px;padding:10px}.preview-top{align-items:start;flex-direction:column;gap:4px}.appearance-grid{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:760px){.shell{width:calc(100% - 28px)}.topbar{flex-wrap:wrap;gap:14px;padding:20px 0}.brand{font-size:24px}.brand span{font-size:9px}.local-badge{font-size:12px;padding:7px 10px}.back-link{font-size:15px}.intro{padding:26px 0 18px}.intro>p:last-child{font-size:16px}.editor,.project-panel{padding:18px}.panel-heading{align-items:start;flex-wrap:wrap;margin-bottom:22px}.panel-heading h2{font-size:24px}.setup-step{padding-bottom:22px;margin-bottom:22px}.step-heading h3{font-size:20px}.product-kinds{display:grid;grid-template-columns:1fr 1fr}.product-kinds [data-kind=panorama]{grid-column:1/-1}.product-line>label{max-width:none}.product-kinds button{min-height:62px}.dimensions-bar{gap:16px 12px}.dimensions-bar label{font-size:15px}.dimensions-bar input{font-size:20px;padding:11px 10px}.dimensions-bar>div{grid-column:1/-1;grid-row:2}.section-count-entry{grid-template-columns:1fr auto}.visual-workspace{display:flex;flex-direction:column;gap:22px}.preview-panel{position:static;width:100%;padding:15px}.preview-top{flex-direction:row;align-items:center}.preview-top .eyebrow{font-size:11px}.view-label{font-size:12px}.drawing{height:310px}.preview-bottom h2{font-size:21px}.leaf-settings{width:100%;padding:16px}.leaf-tabs button{font-size:16px;min-height:50px}.opening-modes{grid-template-columns:1fr}.opening-modes button{min-height:70px}.appearance-grid,.advanced-grid,.add-row,.project-top{grid-template-columns:1fr;gap:20px}.finish-step{margin-bottom:0}.advanced-settings summary span{display:block;margin-left:0;margin-top:4px}.optional{display:block;margin:4px 0}.project-item{grid-template-columns:80px minmax(0,1fr);gap:15px}.item-thumb{width:80px;height:110px}.item-detail h3{font-size:20px}.item-detail p{font-size:15px}.item-actions{gap:12px 18px}.item-actions button{font-size:14px}.project-actions{display:grid;grid-template-columns:1fr;gap:12px}.project-actions .button{width:100%}.project-actions .quiet{text-align:left;justify-self:start}.project-total{gap:16px}.project-total strong{font-size:24px}.project-total small{font-size:14px}.project-meta summary span{display:block;margin-left:0}footer{flex-wrap:wrap}.fold-preview svg{max-height:125px}#export-dialog .dialog-actions{display:grid;grid-template-columns:1fr 1fr}#export-link{grid-column:1/-1}#export-dialog .button{padding:12px 10px;min-width:0}}
@media(max-width:360px){.drawing{height:260px}.preview-top{flex-direction:column;align-items:start}.product-kinds svg{width:28px;height:28px}.product-kinds button{gap:7px;font-size:16px}.project-item{grid-template-columns:1fr}.item-thumb{display:none}.editor,.project-panel{padding:15px}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}


/* Original two-column arrangement, with current interactive controls. */
html{scroll-behavior:auto}body{font-size:15px}.shell{max-width:1280px}h1{font-size:36px;letter-spacing:-1px}h2{font-size:27px}h3{font-size:18px}label,legend{font-size:14px}input,select,textarea{font-size:16px;min-height:46px;padding:11px 12px;border-radius:3px}.intro{padding:30px 0 24px}.workspace{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);align-items:start;gap:24px}.editor,.project-panel{padding:24px;border-radius:0}.preview-column{min-width:0;display:grid;gap:24px}.preview-panel{position:static;padding:24px;border-radius:0}.preview-top{flex-direction:row;align-items:center}.preview-top .eyebrow{font-size:12px}.preview-bottom h2{font-size:27px;display:block}.preview-bottom p{font-size:14px}.drawing{height:430px;border-radius:0}.canvas-help{font-size:13px}.drawing-note{font-size:13px}.classic-meta{padding:20px 24px;background:#e9eedf;border:0;margin-bottom:28px}.project-top{padding:0;gap:24px}.save-state{margin:12px 0 0;font-size:12px}.edit-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:24px;gap:0 12px}.edit-bar .eyebrow{width:100%}.edit-bar h2{margin:0}.edit-bar .quiet{margin-left:auto;min-height:36px}.item-name-field{margin-bottom:24px}.item-name-field .optional{display:none}.product-picker{background:none;border:0;padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--line)}.product-line{grid-template-columns:1fr;gap:18px}.product-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px}.product-kinds button{min-height:48px;font-size:15px;font-weight:400;border-radius:3px}.product-kinds svg{display:none}.product-kinds [data-kind=panorama]{grid-column:1/-1}.product-line>label{max-width:none}.step-heading{margin-bottom:12px}.step-intro{font-size:12px;margin-bottom:12px}.dimensions-bar{grid-template-columns:1fr 1fr;gap:16px}.dimensions-bar input{font-size:16px}.dimensions-bar>div{grid-column:1;grid-row:2}.section-count-entry{grid-template-columns:1fr}.section-count-entry .button{min-height:36px;padding:6px 10px;font-size:13px}.button{font-size:14px;border-radius:3px;min-height:46px}.quiet{font-size:13px}.setup-step{padding-bottom:24px;margin-bottom:24px}.opening-step .step-heading{display:none}.leaf-settings{padding:16px;background:#f4f6ed;border-radius:0}.leaf-tabs{gap:6px;padding:0}.leaf-tabs button{font-size:13px;min-height:40px;border-radius:3px;flex-basis:28%}.selected-leaf{font-size:14px;margin:12px 0}.classic-hidden-directions{display:none!important}.section-measure{margin:16px 0 0;padding-top:16px}.opening-help{font-size:12px}.appearance-grid{grid-template-columns:1fr;gap:20px}.colour-choices{gap:7px}.colour-choices button{min-height:40px;padding:8px 10px;font-size:13px;border-radius:3px}.colour-choices [aria-pressed=true]{padding:7px 9px}.colour-choices i{width:17px;height:17px}.advanced-settings{margin-bottom:24px}.advanced-settings summary{font-size:15px}.advanced-settings summary span{display:block;margin:0;font-size:12px}.advanced-grid{grid-template-columns:1fr 1fr;gap:16px}.advanced-grid>label:last-child{grid-column:1/-1}.hint{font-size:12px}.add-row{grid-template-columns:1fr;gap:0}.add-row .add-button{min-height:48px}.project-count{font-size:13px}.project-item{grid-template-columns:90px minmax(0,1fr);gap:16px}.item-thumb{width:90px;height:120px}.item-detail h3{font-size:18px}.item-detail p,.no-price{font-size:14px}.project-total strong{font-size:24px}.project-actions{gap:10px 18px}.project-panel h2{font-size:27px}.empty-state strong{font-size:17px}.empty-state p{font-size:14px}.size-handle{touch-action:none;cursor:ew-resize}.size-handle[data-adjust=height]{cursor:ns-resize}.size-handle[data-adjust=corner]{cursor:nwse-resize}.size-handle:hover circle,.size-handle:focus-visible circle{fill:#627c32;stroke:#dce89b}.drawing.is-adjusting,.drawing svg{user-select:none}
@media(max-width:1050px){.shell{width:calc(100% - 40px)}.workspace{gap:20px;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}.editor,.project-panel,.preview-panel{padding:20px}.drawing{height:360px}.preview-top{flex-direction:row}.preview-bottom h2{font-size:24px}}
@media(max-width:760px){.shell{width:calc(100% - 28px)}h1{font-size:30px}.workspace{grid-template-columns:1fr;gap:20px}.editor{padding:18px}.preview-panel{padding:16px}.drawing{height:340px}.project-top{grid-template-columns:1fr;gap:18px}.classic-meta{padding:18px;margin-bottom:20px}.intro{padding:24px 0 20px}.preview-top{flex-direction:row}.view-label{font-size:12px}.dimensions-bar>div{grid-column:1;grid-row:2}.preview-bottom h2{font-size:23px}.advanced-grid{grid-template-columns:1fr 1fr}.leaf-tabs button{min-height:44px;font-size:14px}.segmented button,.colour-choices button{min-height:44px}.project-actions .button{width:100%}.optional{display:inline}.preview-column{gap:20px}}
@media(max-width:360px){.drawing{height:280px}.preview-top{flex-direction:column;align-items:start}.project-item{grid-template-columns:1fr}.item-thumb{display:none}}
.drawing .size-handle{opacity:1;transition:opacity .18s ease}.drawing.handles-fading .size-handle{opacity:.35;transition:opacity .25s ease}.drawing.handles-hidden .size-handle{opacity:0;pointer-events:none;transition:opacity .7s ease}.drawing.handles-hidden .size-handle:focus-visible,.drawing.handles-fading .size-handle:focus-visible{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.drawing .size-handle{transition:none}}

@media(min-width:761px){.preview-column{position:sticky;top:16px}}
@media(max-width:760px){.workspace{display:flex;flex-direction:column}.preview-column{display:contents}.preview-panel{order:2;width:100%}.editor{order:1;width:100%}.project-panel{order:3;width:100%}}

.split-section-controls{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:14px 0}.split-section-controls h3{font-size:15px}.split-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.split-buttons button{border:1px solid #b8c2af;border-radius:3px;background:#fff;padding:10px 8px;min-height:44px;font-size:13px}.split-buttons button:hover:not(:disabled){background:#e6edce}.split-section-controls #partition-settings{margin:14px 0}.size-handle[data-axis=y]{cursor:ns-resize}.leaf-tabs{max-height:190px}.selected-leaf{font-size:15px}

/* Section actions are always visible, independent of fading resize arrows. */
.drawing{position:relative}.canvas-section-tools{position:absolute;z-index:2;top:12px;left:12px;display:flex;align-items:center;gap:7px;max-width:calc(100% - 24px);padding:6px 8px;background:#fffef4f2;border:1px solid #c3cfb4;border-radius:8px;box-shadow:0 2px 8px #20302012}.canvas-part-label{font-size:13px;white-space:nowrap}.canvas-round{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;border:1px solid #9aaa86;border-radius:50%;background:#314a27;color:white;font-size:28px;line-height:1;touch-action:manipulation}.canvas-round:hover:not(:disabled){background:#567435}.canvas-round:disabled{background:#e1e6dc;color:#748169;opacity:1}.canvas-undo{border:0;background:transparent;font-size:12px;padding:8px 4px;min-height:44px;text-decoration:underline}.canvas-add-menu{position:absolute;top:100%;left:0;width:230px;max-width:calc(100vw - 65px);padding:12px;background:#fff;border:1px solid #a9bb96;border-radius:6px;box-shadow:0 6px 18px #20302020;margin-top:7px}.canvas-add-menu p{font-size:13px;font-weight:600;margin:0 0 8px}.canvas-add-menu button{width:100%;min-height:44px;text-align:left;padding:10px;font-size:14px;border:1px solid #b8c2af;border-radius:3px;background:#f4f7ed;margin-top:7px}.canvas-add-menu button:hover:not(:disabled){background:#e4eccb}@media(max-width:760px){.canvas-section-tools{top:8px;left:8px;gap:5px;padding:4px 6px}.canvas-part-label{font-size:12px}.canvas-undo{font-size:12px}} 

/* Compact actions follow the selected pane, like the size handles. */
.canvas-section-tools{flex-direction:column;gap:4px;width:44px;max-width:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none;align-items:center}.canvas-round{position:relative;isolation:isolate;background:transparent;border:0;width:44px;height:44px;font-size:24px}.canvas-round:before{content:'';position:absolute;inset:6px;border-radius:50%;background:#314a27;border:2px solid #fff;z-index:-1}.canvas-round:hover:not(:disabled){background:transparent}.canvas-round:hover:not(:disabled):before{background:#567435}.canvas-round:disabled{background:transparent;color:#748169}.canvas-round:disabled:before{background:#e1e6dc}.canvas-undo{position:absolute;z-index:2;left:8px;bottom:8px;background:#fffef4e6;border-radius:3px;padding:8px;min-height:44px}.canvas-add-menu{margin:0;right:auto;max-width:none;text-align:left}.canvas-add-menu p{white-space:normal}.canvas-add-menu button{white-space:normal}@media(max-width:760px){.canvas-section-tools{gap:4px;padding:0}.canvas-round{width:44px;height:44px}}

.canvas-visibility{position:absolute;z-index:3;right:8px;top:8px}.canvas-visibility svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.drawing.size-handles-off .dimension-control{opacity:0!important;pointer-events:none!important;transition:none!important}

.leaf-settings.selection-cleared>.split-section-controls,.leaf-settings.selection-cleared>label,.leaf-settings.selection-cleared>.section-measure,.leaf-settings.selection-cleared>.opening-help{display:none}

/* Dimensions and pane edges are direct manipulation targets, without arrow buttons. */
.drawing .size-handle{opacity:1;transition:none;touch-action:none}
.drawing .section-edge .resize-line{opacity:.65}
.drawing .size-handle:hover .resize-line,.drawing .size-handle:focus-visible .resize-line,.drawing.is-adjusting .section-edge .resize-line{stroke:#4c7229;stroke-width:5;opacity:1}
.drawing .size-handle:focus-visible{outline:none}
.drawing .dimension-control text{cursor:inherit}

/* Keep editable dimensions outside the SVG, next to their corresponding axes. */
.drawing-stage{position:relative}
.drawing-stage .drawing{height:480px}
.drawing-stage .drawing>svg{position:absolute;left:104px;top:0;width:calc(100% - 104px);height:calc(100% - 96px)}
.canvas-size-field{position:absolute;z-index:2;font-size:13px;line-height:1.35;text-align:center;width:100px}
.canvas-size-field input{font-size:16px;font-weight:600;min-height:44px;margin:6px 0 0;padding:8px;border:1.5px solid #809a5b;background:#fff;border-radius:5px;text-align:center}
.canvas-size-field input:focus{border-color:#436829;box-shadow:0 0 0 2px #a9bd7a55}
.canvas-size-field span{display:block;font-weight:400;font-size:11px;margin-top:4px;color:#617354}
.canvas-size-height{left:4px;top:calc((100% - 96px)/2 - 40px)}
.canvas-size-width{left:calc(50% + 52px);bottom:12px;transform:translateX(-50%);width:148px}
.canvas-size-error{position:absolute;left:110px;right:8px;bottom:0;font-size:11px;line-height:1.2;color:#a52a20;margin:0;background:#fff8f2}
.drawing .dimension-control .resize-line{stroke:#537236;stroke-width:3}
@media(max-width:760px){
 .drawing-stage .drawing{height:440px}
 .drawing-stage .drawing>svg{left:0;top:96px;width:100%;height:calc(100% - 192px)}
 .canvas-size-height{left:8px;top:8px;width:106px}
 .canvas-size-width{left:50%;bottom:8px}
 .canvas-size-error{left:8px;right:8px;bottom:0}
}

.drawing.size-handles-off .canvas-annotation{display:none;pointer-events:none}

/* Original dimension labels remain on the drawing; editing opens on demand. */
.drawing-stage .drawing{height:430px}
.drawing-stage .drawing>svg{left:0;top:0;width:100%;height:100%}
.canvas-size-field{width:140px;padding:10px;background:#fffef8;border:1px solid #a5b68d;border-radius:6px;box-shadow:0 4px 12px #26382b20;z-index:4;text-align:center;transform:none;bottom:auto}
.canvas-size-field span{font-size:11px}
.drawing .dimension-value{cursor:text}
.drawing .dimension-value:hover text,.drawing .dimension-value:focus-visible text{fill:#395722;text-decoration:underline}
.canvas-size-error{left:8px;bottom:0;right:8px}
@media(max-width:1050px){.drawing-stage .drawing{height:360px}}
@media(max-width:760px){.drawing-stage .drawing{height:340px}.drawing-stage .drawing>svg{left:0;top:0;width:100%;height:100%}}
@media(max-width:360px){.drawing-stage .drawing{height:280px}}

.drawing.size-handles-off .alignment-guide{display:none}

/* Clean view hides annotations while pane edges remain draggable. */
.drawing.size-handles-off .section-edge .resize-line{opacity:0}
.drawing.size-handles-off .section-edge:hover .resize-line,.drawing.size-handles-off .section-edge:focus-visible .resize-line,.drawing.size-handles-off.is-adjusting .section-edge .resize-line{opacity:1}

/* Keep the drawing under the finger; scroll outside it. */
.drawing,.drawing>svg{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.drawing .dimension-control{cursor:pointer}
.drawing.is-adjusting,.drawing.is-adjusting .dimension-control{cursor:grabbing}
@media(max-width:760px){.preview-panel{padding:14px}.drawing .section-edge .resize-line{stroke-width:6}.canvas-help{font-size:13px}}

.drawing .dimension-value{cursor:pointer}
.dimensions-bar{grid-template-columns:repeat(2,minmax(0,1fr))}

.mobile-preview-slot:empty{display:none}
@media(max-width:760px){.mobile-preview-slot{margin:0 -18px 24px}.mobile-preview-slot .preview-panel{border-left:0;border-right:0;margin:0;width:100%}}


.selected-settings-top:empty,.opening-home{display:none}.selected-settings-top .opening-step{margin-top:20px}.fold-preview svg{max-height:240px}.fold-preview{margin-bottom:18px}@media(max-width:760px){.fold-preview svg{max-height:180px}}

/* Accurate desktop selection: pane interiors click; only narrow edge strips resize. */
.drawing [data-leaf]{cursor:pointer}.drawing .edge-hover{fill:none;stroke:#729334;stroke-width:4;pointer-events:none;vector-effect:non-scaling-stroke}
.drawing .section-edge .resize-line{opacity:.2;stroke-width:2}.drawing.is-adjusting .section-edge .resize-line{opacity:.7}
.fold-settings{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.fold-settings select{max-width:100%}.fold-warning{font-size:13px;line-height:1.6;color:#865219;background:#fff6e7;border-left:3px solid #ca9a45;padding:10px 12px;margin:12px 0}.fold-limits{font-size:12px;line-height:1.6;margin:12px 0}.fold-limits summary{cursor:pointer;font-weight:600}.fold-limits p{margin:10px 0}.fold-limits a{color:inherit}
@media(pointer:fine){.drawing .section-edge .resize-hit{cursor:inherit}.drawing .section-edge{cursor:inherit}}

.drawing.hovering-edge-x [data-leaf],.drawing.hovering-edge-x .section-edge{cursor:ew-resize}.drawing.hovering-edge-y [data-leaf],.drawing.hovering-edge-y .section-edge{cursor:ns-resize}

/* Selection promotes settings once; the panel then scrolls with the page. */
@media(min-width:761px){
 .selected-settings-top:not(:empty){position:static;max-height:none;overflow:visible;background:#fff;border:1px solid var(--line);margin-bottom:24px;scroll-margin-top:16px}
 .selected-settings-top .opening-step{margin:0;padding:0;border:0}
 .selected-settings-top .step-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:14px 16px 10px;margin:0;background:#eef2e7}
 .selected-settings-top .step-heading h3{font-size:16px}.selected-settings-top .section-settings-close{font-size:12px;min-height:30px;padding:4px 0}
 .selected-settings-top .leaf-settings{border:0;padding:14px 16px}.selected-settings-top #leaf-tabs,.selected-settings-top .leaf-settings>.hint:first-of-type{display:none}
 .selected-settings-top .selected-leaf{margin:0 0 12px;font-size:14px}.selected-settings-top .section-measure{margin:0 0 16px;padding:0 0 14px;border-top:0;border-bottom:1px solid var(--line)}
 .selected-settings-top .section-measure>label{margin-bottom:12px}.selected-settings-top .opening-help{font-size:12px}
}

/* Confirm the current construction beside its live preview. */
.preview-add-row{display:block;margin-top:16px}.preview-add-row .add-button{gap:10px;min-height:48px}
.add-check{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.preview-add-row .hint{font-size:13px;margin-top:8px}

/* Compact project summary below the live preview; drawings open on request. */
.project-sheet-help{margin:-8px 0 20px}.project-sheet-grid>.empty-state{grid-column:1/-1}.project-panel{scroll-margin-top:18px}.preview-column{align-self:start}#export-dialog{max-width:1060px}

.preview-column{position:static}
#export-dialog[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden}#drawing-sheet-preview{flex:1;min-height:0}#export-text-label{min-height:0;overflow:auto}#export-dialog .dialog-actions{flex-shrink:0}#export-help{font-size:14px;margin:12px 0}#export-status{min-height:0}#export-status:empty{display:none}@media(max-width:760px){#export-dialog{padding:18px}#export-dialog h2{font-size:22px}#export-dialog .dialog-actions{display:flex;flex-wrap:wrap;justify-content:space-between}#export-dialog .dialog-actions .button{flex:1}#drawing-sheet-preview{margin:8px 0 14px}}

/* Keep headings at the top and all controls on the same baseline. */
.advanced-grid{align-items:stretch}.advanced-grid>label{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0;margin:0}.advanced-grid .advanced-label{display:block;line-height:1.45}.advanced-grid select{margin:0;width:100%;min-height:48px}

#photo-dialog{max-width:1000px}#photo-dialog[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden}.photo-preview{overflow:auto;min-height:0;flex:1;margin:12px 0}.photo-preview img{display:block;width:100%;height:auto;border:1px solid #ccd4c5;user-select:auto;-webkit-touch-callout:default}#photo-dialog .dialog-actions{flex-shrink:0}#photo-note{font-size:14px;margin:10px 0}#photo-status:empty{display:none}.photo-pages{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:13px}.photo-pages .button{font-size:13px;padding:10px}#photo-dialog .dialog-actions{gap:10px}@media(max-width:760px){#photo-dialog{padding:18px}#photo-dialog h2{font-size:22px}#photo-dialog .dialog-actions .button{flex:1;font-size:13px;padding:11px 12px}.photo-pages .button{font-size:12px;padding:9px 7px}.photo-pages span{white-space:nowrap}}

/* Quantity belongs to the complete product, separate from section controls. */
.quantity-choice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:16px;padding-top:4px}
.quantity-choice>label{margin:0;font-size:14px;flex:1 1 160px}
.quantity-choice-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.quantity-choice-controls>button{width:44px;min-height:44px;padding:0;border:1px solid #9aaa86;border-radius:3px;background:#fff;color:#203026;font-size:24px;cursor:pointer;touch-action:manipulation}
.quantity-choice-controls>button:hover:not(:disabled){background:#e4eccb}.quantity-choice-controls>button:disabled{opacity:.45;cursor:default}
.quantity-choice-value{display:flex;align-items:center;gap:6px}.quantity-choice-value input{width:66px;min-height:44px;margin:0;text-align:center;padding:8px 3px;-moz-appearance:textfield;appearance:textfield}
.quantity-choice-value input::-webkit-inner-spin-button,.quantity-choice-value input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.quantity-choice-value span{font-size:14px}.quantity-choice>#quantity-hint{flex-basis:100%;margin:0;font-size:12px}

/* Phone-only, nonmodal section editor. The drawing remains interactive. */
.mobile-section-sheet{display:none}
@media(max-width:760px){
 body.mobile-section-open{padding-bottom:300px}
 .mobile-section-sheet:not([hidden]){display:block;position:fixed;z-index:8;left:8px;right:8px;bottom:0;max-height:calc(100dvh - 24px);overflow:auto;background:#fff;border:1px solid #b8c6aa;border-radius:12px 12px 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -5px 24px #20302625}
 .mobile-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
 .mobile-section-header h3{margin:0;font-size:16px}.mobile-section-header .button{min-height:44px;padding:8px 16px;font-size:14px;flex-shrink:0}
 .mobile-section-sheet .section-measure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0}
 .mobile-section-sheet .section-measure label{margin:0;min-width:0;font-size:13px;line-height:1.4}
 .mobile-section-sheet .section-measure input{width:100%;min-height:46px;margin:6px 0 0;font-size:18px;padding:9px 10px}
 .mobile-section-sheet .section-measure>.hint{display:none}
 .mobile-section-opening{display:block;margin:10px 0 0;font-size:13px;line-height:1.4}
 .mobile-section-opening select{width:100%;min-height:46px;margin:6px 0 0;padding:9px 10px;font-size:16px}
 .drawing{scroll-margin-top:12px}
}



/* Explicit dialog height prevents Safari from collapsing the drawing area. */
#export-dialog.is-project-sheet[open]{height:calc(100dvh - 32px);max-height:900px}
.export-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.export-dialog-header h2{margin:0}.export-dialog-header #close-export{min-height:44px;padding:8px 12px;flex-shrink:0}
#export-dialog.is-project-sheet #drawing-sheet-preview{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:12px 0;}
#export-dialog.is-project-sheet #export-help{flex-shrink:0;font-size:13px;margin:10px 0 0}
#export-dialog.is-project-sheet>.dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#export-dialog.is-project-sheet>.dialog-actions .button{min-height:44px;min-width:0;padding:10px 8px;font-size:13px;grid-column:auto}
#project-whatsapp{grid-column:1/-1!important}.whatsapp-button{background:#235b3a;color:#fff;border:1px solid #235b3a}.whatsapp-button:hover{background:#17452b;color:#fff}
#whatsapp-actions{flex-shrink:0;margin-bottom:10px}#whatsapp-actions p{font-size:13px;line-height:1.5;margin:8px 0}#whatsapp-actions .button{width:100%;min-height:44px;font-size:13px;padding:10px;margin-top:6px}
@media(max-width:760px){
 #export-dialog.is-project-sheet[open]{width:calc(100% - 20px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:14px;border-radius:10px}
 #export-dialog.is-project-sheet .sheet-drawing{height:250px}.export-dialog-header h2{font-size:22px}.export-dialog-header #close-export{font-size:12px}
 #photo-dialog[open]{height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}#photo-dialog .photo-preview{flex:1 1 auto;overflow:auto}
}

/* Scroll the page from the drawing; only resize grips capture touch drags. */
@media(max-width:760px){
 .drawing,.drawing>svg{touch-action:pan-y pinch-zoom}
 .drawing .size-handle{touch-action:none}
 .mobile-section-sheet{transition:transform .28s ease,opacity .28s ease}
 .mobile-section-sheet.is-closing{transform:translateY(calc(100% + 16px));opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.mobile-section-sheet{transition:none}}

.project-actions .clear-project{color:#8a302d;border-color:#bd8d87}

#add-quantity-dialog{width:min(440px,calc(100% - 24px));padding:24px;border:1px solid #b8c6aa;border-radius:10px;max-height:calc(100dvh - 24px);overflow:auto}
#add-quantity-dialog::backdrop{background:#20302670}
#add-quantity-dialog h2{font-size:23px;line-height:1.3;margin:0 0 8px}
#add-quantity-dialog .quantity-choice{display:block;margin:24px 0}
#add-quantity-dialog .quantity-choice-controls{justify-content:center;gap:16px;margin:12px 0}
#add-quantity-dialog .quantity-choice-controls>button{width:52px;min-height:52px;font-size:27px}
#add-quantity-dialog .quantity-choice-value input{width:90px;min-height:52px;font-size:24px}
#add-quantity-dialog .dialog-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:12px}
#add-quantity-dialog .dialog-actions .button{min-height:48px;padding:10px;font-size:14px}
.added-notice{width:max-content;position:fixed;z-index:40;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translate(-50%,-12px);opacity:0;pointer-events:none;max-width:calc(100% - 24px);padding:13px 20px;background:#275738;color:#fff;border:1px solid #6c9473;border-radius:8px;box-shadow:0 5px 20px #20302630;font-size:15px;line-height:1.4;text-align:center;transition:opacity .2s ease,transform .2s ease}
.added-notice:empty{display:none}.added-notice.is-visible{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.added-notice{transition:none}}

/* Native HTML capture zones prevent vertical edge drags becoming page scrolls. */
.touch-resize-target{position:absolute;z-index:1;touch-action:none;background:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.canvas-section-tools{z-index:2}

.project-actions .price-placeholder{width:100%}.price-placeholder .button{width:100%}.price-placeholder .hint{margin:6px 0 0;text-align:center;font-size:12px}

/* Clear, compact icons; touch targets stay 44px on phones. */
.canvas-round .equal-width-icon,.canvas-history svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.canvas-history{position:absolute;z-index:3;left:8px;top:8px;display:flex;gap:4px}
.canvas-history .canvas-round:disabled{color:#77816f}
.canvas-history .canvas-round:disabled:before{background:#e1e6dc;border-color:#f8faf5}
.canvas-round:focus-visible{outline:2px solid #718d34;outline-offset:1px;border-radius:50%}

/* Tall products get enough room to show true proportions on a phone. */
@media(max-width:760px){.drawing-stage .drawing.tall-product{height:430px}}
@media(max-width:360px){.drawing-stage .drawing.tall-product{height:390px}}
