.flow-studio{--flow-ink:#183b4a;--flow-accent:#167d83;--flow-border:#d7e2e8;color:var(--flow-ink);font-size:.875rem}.flow-studio button{min-height:34px;font-size:.875rem;line-height:1.45;letter-spacing:normal}.flow-studio button:focus-visible{outline:3px solid #208b92;outline-offset:3px}.flow-studio button:disabled{opacity:.45;cursor:not-allowed}.flow-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:0 0 16px}.flow-heading>div:first-child>span{font-size:.75rem;letter-spacing:.16em;color:#4b7888;display:block;margin-bottom:4px}.flow-heading h1{font-size:1.25rem;line-height:1.3}.flow-heading>div:last-child{display:flex;gap:7px;flex-wrap:wrap}.flow-heading button{padding:8px 12px;background:white;border:1px solid var(--flow-border);color:#365968}.flow-room{display:flex;align-items:center;gap:24px;margin-bottom:14px;padding:12px 16px;background:#fff;border:1px solid var(--flow-border);border-radius:9px;font-size:.875rem}.flow-room label{display:flex;align-items:center;gap:9px}.flow-room input{width:74px;font-size:.875rem;padding:8px;text-align:center}.flow-room>button{margin-inline-start:auto;background:#e8f3f3;color:#135b65;border:0;padding:9px 14px}.flow-workspace{display:grid;grid-template-columns:minmax(360px,1fr) 345px;gap:18px;align-items:start;direction:ltr}.flow-stage,.flow-panel{direction:rtl;min-width:0}.flow-stage{background:#eff4f7;border:1px solid #cbdce5;border-radius:12px;overflow:hidden;position:sticky;top:80px}.flow-stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #d5e2e9;flex-wrap:wrap}.flow-stage-toolbar>strong{font-size:.875rem}.flow-stage-toolbar>div{display:flex;gap:5px}.flow-stage-toolbar button{padding:6px 10px;border:1px solid #d2e0e7;background:#f5f8fa;color:#35596b;min-height:38px}.flow-canvas-wrap{position:relative}.flow-canvas-wrap canvas{display:block;width:100%;height:555px;touch-action:none}.flow-empty{position:absolute;inset:30% 8% 30%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;pointer-events:none}.flow-empty b{font-size:1.1rem;color:#254a5d}.flow-empty span{font-size:.875rem;color:#587788;max-width:290px;line-height:1.7}#flow-hotspots{position:absolute;inset:0;pointer-events:none}#flow-hotspots button{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;white-space:nowrap;font-size:.875rem;padding:8px 11px;border-radius:7px;background:#fff;color:#225569;border:1px solid #bed3df;box-shadow:0 3px 10px #16394c14;min-height:40px}#flow-hotspots [data-flow-bay].selected{background:#173f51;color:#fff;border-color:#173f51}#flow-hotspots [data-flow-grow]{background:#147f83;border-color:#147f83;color:#fff;font-weight:600}.flow-preview-label{position:absolute;left:18px;top:16px;background:#dcf2f0;color:#146367;padding:8px 12px;border-radius:6px;font-size:.875rem;pointer-events:none}.flow-bays{display:flex;gap:8px;padding:12px 14px;overflow:auto;background:#fff;border-top:1px solid #d6e3e9}.flow-bays:empty{display:none}.flow-bays button{display:grid;gap:4px;min-width:132px;text-align:right;padding:10px 12px;background:#f6f9fb;border:1px solid #d8e4ea;border-radius:7px;color:#365769}.flow-bays b{font-size:.875rem}.flow-bays span{font-size:.8125rem;color:#647e8c}.flow-bays .selected{background:#e5f2f3;border-color:#17828a}.flow-stage-hint{padding:12px 16px;background:#fff;font-size:.875rem;line-height:1.6;color:#4d6d7e;border-top:1px solid #e2ebef}.flow-panel{background:#fff;border:1px solid var(--flow-border);border-radius:12px;padding:20px;display:grid;gap:16px}.flow-panel-heading>span{font-size:.8125rem;color:#528091;display:block;margin-bottom:5px}.flow-panel-heading h2{font-size:1.05rem;line-height:1.45}.flow-panel-heading p{font-size:.875rem;line-height:1.7;color:#547281;margin-top:8px}.flow-panel label{display:grid;gap:7px;font-size:.875rem}.flow-panel select,.flow-panel input{font-size:.875rem;padding:10px;min-height:34px;border-color:#ccdce5;min-width:0;max-width:100%}.flow-base-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.flow-base{padding:9px;display:grid;gap:7px;text-align:right;border:1px solid #d7e3e9;background:white;border-radius:8px}.flow-base.active,.flow-base:hover{border-color:#13878b;background:#f1f9f8}.flow-base>div{height:93px;pointer-events:none;overflow:hidden;border-radius:5px;background:#f5f8fa}.flow-base svg{width:100%;height:100%;display:block}.flow-base svg text{display:none}.flow-base b{font-size:.875rem;line-height:1.5}.flow-base span{font-size:.8125rem;line-height:1.5;color:#5d7885}.flow-base-options{border-top:1px solid #e0e9ee;padding-top:13px}.flow-base-options summary{cursor:pointer;font-size:.875rem;line-height:1.65}.flow-base-options label{margin-top:12px}.flow-base-options p{font-size:.8125rem;line-height:1.65;color:#5c7988;margin-top:12px}.flow-link{background:transparent;border:0;color:#207083;padding:6px;text-align:right}.flow-back{background:#f0f5f8;border:0;padding:8px 12px;text-align:right;color:#527183}.flow-intent-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.flow-intent-grid button{display:grid;gap:7px;padding:16px 12px;text-align:right;background:#f2f7f9;border:1px solid #d6e4eb;border-radius:8px}.flow-intent-grid b{font-size:.875rem;color:#194859}.flow-intent-grid span{font-size:.875rem;line-height:1.5;color:#547684}.flow-section-label{font-size:.875rem;color:#597783;border-top:1px solid #dde8ed;padding-top:15px}.flow-grow-buttons{display:flex;gap:7px}.flow-grow-buttons button{flex:1;background:#1d6774;color:#fff;border:0;padding:9px 7px}.flow-variant-list{display:grid;gap:9px}.flow-variant-list button{display:grid;grid-template-columns:1fr 28px;gap:6px;padding:14px;text-align:right;background:#f5f9fa;border:1px solid #d4e3e8;border-radius:8px}.flow-variant-list button.active{border-color:#168489;background:#e8f6f3}.flow-variant-list b{font-size:.875rem;line-height:1.5}.flow-variant-list span{font-size:.875rem;color:#5b7a87;grid-column:1}.flow-variant-list i{grid-column:2;grid-row:1/3;font-style:normal;align-self:center;font-size:1.4rem;color:#328995}.flow-variant-list img{width:66px;height:60px;object-fit:contain;grid-column:2;grid-row:1/3;max-width:none;justify-self:end}.flow-variant-list button:has(img){grid-template-columns:1fr 70px}.flow-choices{display:flex;gap:6px;flex-wrap:wrap}.flow-choices button{padding:7px 10px;background:#eff5f7;border:1px solid #d9e6eb;border-radius:5px;color:#476b7b;min-height:38px;font-size:.875rem}.flow-choices button.active{background:#164958;border-color:#164958;color:#fff}.flow-accessories{max-height:330px;overflow:auto;display:grid;gap:8px;padding:2px;scrollbar-width:thin}.flow-accessories button{display:flex;align-items:center;gap:11px;text-align:right;padding:10px;background:#fff;border:1px solid #d8e5eb;border-radius:6px}.flow-accessories button.active{background:#edf8f5;border-color:#16838a}.flow-accessories img{width:66px;height:70px;object-fit:contain;flex-shrink:0}.flow-accessories>button>span{display:grid;gap:5px;min-width:0}.flow-accessories b{font-size:.875rem;line-height:1.5}.flow-accessories small{font-size:.75rem;line-height:1.5;overflow-wrap:anywhere;color:#577786}.flow-placement-options{display:grid;gap:11px;padding:15px;background:#eef7f7;border-radius:8px}.flow-placement-options h3{font-size:.875rem}.flow-proposal{padding:15px;background:#edf7f4;border:1px solid #c3dfd5;border-radius:9px;display:grid;gap:12px}.flow-proposal>div{display:flex;gap:10px;align-items:center;justify-content:space-between}.flow-proposal>div>b{font-size:.875rem}.flow-proposal>div>button{min-height:30px;width:30px;padding:0;background:transparent;border:0;font-size:1.3rem}.flow-proposal ul{list-style:none;display:grid;gap:9px;max-height:165px;overflow:auto;padding:0}.flow-proposal li{display:flex;gap:10px;align-items:start;font-size:.875rem;line-height:1.5}.flow-proposal li strong{min-width:22px;color:#11726d;direction:ltr}.flow-proposal li>span{display:grid;gap:3px}.flow-proposal li small{font-size:.75rem;color:#537971;overflow-wrap:anywhere}.flow-proposal>small{font-size:.8125rem;color:#487168}.flow-proposal.has-error{background:#fff6e9;border-color:#ead3a7}.flow-proposal p{font-size:.875rem;line-height:1.6;color:#805b27}.flow-primary{padding:12px 16px!important;background:#176971!important;color:white!important;border:0!important;font-weight:600}.flow-remove{color:#935356;background:#fff;border:1px solid #e1cece;padding:9px}.flow-bom{margin-top:18px;border:1px solid #d7e4ea;background:white;padding:20px;border-radius:10px}.flow-bom>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.flow-bom h2{font-size:1.25rem}.flow-bom p{font-size:.875rem;color:#5c7885;margin-bottom:12px}.flow-bom-row{display:flex;gap:18px;padding:12px 0;border-top:1px solid #e1eaef}.flow-bom-row>strong{min-width:65px}.flow-bom-row>span{display:grid;gap:5px}.flow-bom-row small{font-size:.8125rem;color:#5c7a86}.flow-project{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}.flow-project label{font-size:.875rem}.flow-project input,.flow-project textarea{font-size:.875rem}.flow-project details{font-size:.875rem;border:1px solid #d5e4eb;background:#fff;padding:12px 15px;border-radius:8px}.flow-project summary{cursor:pointer;line-height:1.6}.flow-project textarea{margin-top:12px}.flow-project li{margin:8px 0;line-height:1.6}.flow-project ul{padding-right:20px}.flow-save{margin-top:18px;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:17px 20px;background:#fff;border:1px solid #d1e1e9;border-radius:10px}.flow-save>div{display:grid;gap:6px}.flow-save>div>span{font-size:.875rem;color:#5a7a89}.flow-save>button{padding:13px 20px;font-size:.875rem}.flow-return{margin-bottom:15px;padding:12px 18px;background:#e3f3f2;color:#235e66;border:1px solid #bfd7dc}
@media(min-width:1800px){.flow-workspace{grid-template-columns:minmax(450px,1fr) 390px}.flow-canvas-wrap canvas{height:620px}.flow-base>div{height:112px}.flow-accessories{max-height:360px}}
@media(max-width:1250px){.flow-workspace{grid-template-columns:minmax(300px,1fr) 315px;gap:12px}.flow-panel{padding:15px}.flow-canvas-wrap canvas{height:490px}.flow-heading{align-items:flex-start}.flow-heading h1{font-size:1.6rem}.flow-stage-toolbar>div{width:100%}.flow-stage-toolbar{gap:8px}.flow-base>div{height:78px}.flow-room{gap:14px;flex-wrap:wrap}.flow-heading>div:last-child{max-width:400px}}
@media(max-width:900px){.flow-workspace{grid-template-columns:minmax(0,1fr)}.flow-stage{position:relative;top:0}.flow-panel{grid-row:2}.flow-heading{flex-wrap:wrap;gap:10px}.flow-heading>div:last-child{max-width:none}.flow-canvas-wrap canvas{height:400px}.flow-panel:has(.flow-base-grid){grid-row:1}.flow-base-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.flow-base span{display:none}.flow-base>div{height:80px}.flow-panel-heading h2{font-size:1.2rem}.flow-base-options{margin-top:0}.flow-stage-toolbar>div{width:auto}.flow-intent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.flow-accessories{grid-template-columns:1fr 1fr;max-height:270px}.flow-project{grid-template-columns:1fr 1fr}.flow-project details{grid-column:1/-1}.flow-heading h1{font-size:1.5rem}}
@media(max-width:550px){.flow-heading>div:last-child button{font-size:.875rem;min-height:38px;padding:7px}.flow-room{padding:10px;gap:10px;font-size:.875rem}.flow-room>button{width:100%;margin:0}.flow-room input{width:64px}.flow-stage-toolbar{padding:10px}.flow-stage-toolbar>strong{width:100%}.flow-canvas-wrap canvas{height:340px}.flow-panel{padding:14px}.flow-intent-grid{grid-template-columns:1fr 1fr}.flow-base b{font-size:.875rem}.flow-base>div{height:65px}.flow-base-grid{gap:7px}.flow-base{padding:7px}.flow-accessories{grid-template-columns:1fr}.flow-save{flex-direction:column;align-items:stretch;padding:15px}.flow-save>button{width:100%}.flow-empty b{font-size:1.05rem}.flow-empty span{font-size:.875rem}#flow-hotspots button{font-size:.8125rem;padding:7px;min-height:36px}.flow-panel label{font-size:.875rem}}

/* Compact drafting surface: space goes to the drawing, with sale details on demand. */
.layout:has(.flow-studio){grid-template-columns:160px minmax(0,1fr)}
.layout:has(.flow-studio)>.cart{display:none}
main:has(.flow-studio){padding:18px}
.flow-studio .flow-heading{margin-bottom:10px;gap:10px}
.flow-studio .flow-heading h1{font-size:1.25rem;letter-spacing:0}
.flow-studio .flow-heading>div:first-child>span{display:none}
.flow-studio .flow-workspace{grid-template-columns:minmax(0,1fr) 280px;gap:12px}
.flow-studio .flow-room{gap:12px;padding:8px 10px;flex-wrap:wrap;margin-bottom:10px}
.flow-studio .flow-room input{width:68px;padding:5px;min-height:32px;margin:0}
.flow-studio .flow-room button{padding:6px 9px;margin:0;min-height:32px}
.flow-studio .flow-room>button:last-child{margin-inline-start:auto}
.flow-studio .flow-panel{grid-row:auto;padding:12px;gap:10px;max-height:calc(100vh - 235px);overflow-y:auto;position:sticky;top:100px}
.flow-studio .flow-panel-heading h2{font-size:1rem;line-height:1.45}
.flow-studio .flow-panel-heading>span{font-size:.75rem;margin-bottom:3px}
.flow-studio .flow-panel-heading p{font-size:.8125rem;margin-top:5px;line-height:1.5}
.flow-studio .flow-panel select,.flow-studio .flow-panel input{padding:6px 8px;min-height:34px;margin-top:0}
.flow-studio .flow-panel label{gap:4px;font-size:.875rem}
.flow-studio .flow-intent-grid button{padding:10px 8px;gap:4px}
.flow-studio .flow-intent-grid span{font-size:.75rem}
.flow-studio .flow-stage{top:100px}
.flow-studio .flow-stage-toolbar{padding:8px 10px;gap:6px}
.flow-studio .flow-stage-toolbar>div{width:auto}
.flow-studio .flow-stage-toolbar button{padding:5px 8px;min-height:30px;font-size:.8125rem}
.flow-studio .flow-canvas-wrap canvas{height:max(420px,calc(100vh - 350px))}
.flow-studio .flow-tools{display:flex;flex-wrap:wrap;gap:5px;padding:7px 10px;background:white;border-bottom:1px solid #d5e2e9}
.flow-studio .flow-tools button{font-size:.8125rem;padding:5px 8px;min-height:30px}
.flow-studio .flow-tools .active{background:#214e5b;color:white;border-color:#214e5b}
.flow-studio .flow-base-grid{gap:6px}
.flow-studio .flow-base{padding:6px;gap:4px;cursor:grab}
.flow-studio .flow-base>div{height:65px}
.flow-studio .flow-base span{font-size:.75rem}
.flow-studio .flow-bays{padding:7px 10px;gap:6px}
.flow-studio .flow-bays button{padding:6px 9px;min-width:115px;gap:2px;min-height:34px}
.flow-studio .flow-bays b{font-size:.8125rem}
.flow-studio .flow-bays span{font-size:.75rem}
.flow-studio .flow-stage-hint{padding:7px 10px;font-size:.8125rem}
.flow-studio .flow-empty b{font-size:1.125rem}
.flow-studio .flow-empty span{font-size:.875rem}
.flow-studio .flow-part-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.flow-studio .flow-part-list button{padding:7px;display:grid;gap:4px;text-align:right;cursor:grab}
.flow-studio .flow-part-list b{font-size:.9375rem;color:#18576a}
.flow-studio .flow-part-list small,.flow-studio .flow-part-list span{font-size:.75rem;line-height:1.4}
.flow-studio .flow-part-list .active{background:#e9f5f4;border-color:#227b86}
.flow-studio .flow-position{border-top:1px solid #d7e2e8}
.flow-studio .flow-position summary{padding:8px 0;font-size:.8125rem}
.flow-studio .flow-position>div{display:flex;gap:7px;margin-bottom:8px}
.flow-studio .flow-position label{min-width:0;flex:1}
.flow-studio .flow-position p{font-size:.75rem;line-height:1.5;color:#597783}
.flow-studio .flow-proposal,.flow-studio .flow-placement-options{padding:10px;gap:8px}
.flow-studio .flow-primary{padding:8px 10px!important}
.flow-studio .flow-variant-list button{padding:9px;gap:4px}
.flow-studio .flow-variant-list b{font-size:.875rem}
.flow-studio .flow-accessories{max-height:none;overflow:visible}
.flow-studio .flow-accessories button{padding:7px;gap:8px}
.flow-studio .flow-accessories img{width:45px;height:50px}
.flow-studio .flow-project{margin-top:12px;gap:10px}
.flow-studio .flow-save{margin-top:10px;padding:10px 12px}
@media(max-width:1000px){.layout:has(.flow-studio){grid-template-columns:130px minmax(0,1fr)}.flow-studio .flow-workspace{grid-template-columns:minmax(0,1fr) 245px}.flow-studio .flow-heading{flex-wrap:wrap}}
@media(max-width:760px){.layout:has(.flow-studio){display:block}main:has(.flow-studio){padding:12px}.flow-studio .flow-workspace{grid-template-columns:minmax(0,1fr)}.flow-studio .flow-panel{position:static;max-height:none}.flow-studio .flow-stage{position:relative;top:0}.flow-studio .flow-canvas-wrap canvas{height:380px}.flow-studio .flow-base-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.flow-studio .flow-room>button:last-child{margin:0}.flow-studio .flow-room>button{width:auto}.flow-studio .flow-panel:has(.flow-base-grid){grid-row:2}}
@media(pointer:coarse){.flow-studio button{min-height:40px}.flow-studio .flow-panel input,.flow-studio .flow-panel select{min-height:40px}}