:root{--studio-font:13px;--studio-font-emphasis:14px;--studio-caption:12px;--studio-control:28px;--studio-gap:6px}
/* Compact desktop workspaces. Keep controls and readable type; reduce padding and empty space. */
body{font-size:var(--studio-font);line-height:1.35}button,input,select,textarea{font-size:var(--studio-font);line-height:1.35}button,input,select{min-height:var(--studio-control)}button{padding:5px 9px;border-radius:5px}input,select{padding:5px 7px}label,.field-label,.section-label,.nav-button,.view-tabs button,.type-switch button{font-size:var(--studio-font)!important;line-height:1.35}label{margin:5px 0;gap:4px}h1{font-size:20px;line-height:1.2}h2{font-size:20px}h3{font-size:18px}p{margin:5px 0;line-height:1.45}li{line-height:1.5}.hint,.mouse,.scope,.mini-note,.sales-list-note,.estimate-note{font-size:var(--studio-font)!important}
.clean-disclosure,details{margin-top:6px;padding-top:5px}.clean-disclosure{margin-bottom:5px}.clean-disclosure>summary,details>summary{min-height:28px;padding:4px 2px;font-size:var(--studio-font);line-height:1.4}.clean-disclosure[open]>summary{margin-bottom:4px}.clean-form-section{padding:4px 0}.clean-form-section>summary{font-size:var(--studio-font-emphasis)}.clean-form-section>.form-section{padding:5px 0}.clean-field-help>summary{min-height:24px;font-size:13px}.clean-disclosure>p,.clean-disclosure>small{font-size:var(--studio-font)!important}
.tile-picker{margin:5px 0 8px}.tile-picker fieldset{margin-bottom:7px}.tile-picker legend{font-size:var(--studio-font);padding-bottom:4px}.tile-picker button{font-size:var(--studio-font);padding:5px 9px;min-height:var(--studio-control)}.tile-models,.tile-faces{gap:5px}.tile-photo-grid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:5px;max-width:580px}.tile-photo-grid button{padding:4px;gap:2px}.tile-photo-grid img{height:46px;border-radius:3px}.tile-photo-grid span{font-size:13px}.tile-faces small{font-size:var(--studio-caption)}.tile-choice{font-size:var(--studio-font);margin:3px 0}.tile-face-help p{font-size:var(--studio-font)}.tile-face-help label{gap:4px}.tile-face-help{margin-top:4px}
body:has(#layout-quick-create)>header{padding:8px 18px;min-height:36px;gap:12px}body:has(#layout-quick-create)>main{max-width:1700px;padding:8px 12px}.intro{max-width:none}.intro h1{font-size:20px;margin:3px 0}.intro>p{font-size:var(--studio-font);margin:4px 0}.intro .eyebrow{display:none}.intro>.clean-disclosure{display:inline-block;margin:2px 0}.steps{margin:5px 0 7px;gap:16px;font-size:13px}.steps b{height:20px;width:20px;margin-right:4px}.quick-create-panel{margin:4px 0 10px;border-top:0;padding:0}.quick-create-panel>summary{font-size:var(--studio-font-emphasis)}.quick-roof{padding:8px 10px;margin:3px 0 6px;border-radius:7px}.quick-roof-heading{gap:12px;align-items:center}.quick-roof-heading .eyebrow{display:none}.quick-roof-heading h2{font-size:17px;margin:0 0 3px}.quick-roof-heading p{font-size:var(--studio-font);margin:2px 0}.quick-roof-heading>details{flex-basis:120px}.quick-roof-fields{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px 10px}.quick-roof label{font-size:var(--studio-font)}.quick-roof .primary{min-width:160px;padding:5px 10px;font-size:var(--studio-font);margin:4px 0 0;min-height:30px}.quick-roof [role=status]:empty,.quick-roof [role=alert]:empty{display:none}.quick-roof .tile-picker{display:grid;grid-template-columns:190px minmax(0,1fr) 225px;gap:0 14px;align-items:start}.quick-roof .tile-picker fieldset{margin:4px 0}.quick-roof .tile-models{align-content:start}.quick-roof .tile-choice{grid-column:1/3;align-self:center}.quick-roof .tile-face-help{grid-column:3;grid-row:2;margin:0}.quick-roof .tile-face-help[open]{grid-column:1/-1;grid-row:auto}.quick-roof .tile-photo-grid{max-width:590px}.quick-roof .tile-models,.quick-roof .tile-faces{display:flex}.quick-roof [name=tileId][hidden]{display:none}
.workspace{grid-template-columns:230px minmax(0,1fr);gap:10px}.workspace>aside,.preview{padding:8px;border-radius:7px}.workspace .fields{gap:0 7px}.workspace h2{font-size:17px}.preview{position:static}.toolbar{gap:6px}.toolbar button,.actions button{font-size:var(--studio-font);padding:5px 8px;min-height:var(--studio-control)}.actions{gap:5px;margin:5px 0}#layout-canvas{height:clamp(220px,36vh,350px);min-height:200px;margin-top:6px}.metrics{padding:4px 0;margin:4px 0;gap:6px}.metrics strong{font-size:18px}.metrics span{font-size:13px}.surface-preview{margin:0;padding:0;border:0}.surface-preview>summary{font-size:var(--studio-font-emphasis)}.layout-work-tools{margin:6px 0}.templates{gap:5px;margin:5px 0 9px}.templates button{padding:5px}.templates svg{height:28px}.templates strong{font-size:13px}
#layout-framing-detail{padding:9px;margin-top:7px;border-radius:7px}#layout-framing-detail>h3{font-size:19px;margin:0 0 5px}#layout-framing-detail label{font-size:var(--studio-font)}.technical-results,.view-options{padding:4px 8px;margin:6px 0}.technical-results>summary,.view-options>summary{font-size:var(--studio-font)}#framing-status{font-size:var(--studio-font);margin:4px 0}.framing-sales-workspace{grid-template-columns:minmax(0,1.1fr) minmax(270px,1fr);gap:9px;margin:7px 0;align-items:start}#framing-canvas{height:clamp(240px,42vh,430px)}#framing-sales-list{max-height:clamp(280px,47vh,470px);padding:8px;border-radius:6px}.sales-pick-heading{margin-bottom:6px;gap:5px}.sales-pick-heading h2{font-size:18px}.sales-pick-heading p{font-size:13px;margin:3px 0}.sales-pick-actions{gap:4px}.sales-pick-actions button{font-size:13px;padding:4px 6px;min-height:28px}.sales-simple-table{margin:6px 0}.sales-simple-table th{padding:6px;font-size:13px}.sales-simple-table td{padding:6px;font-size:var(--studio-font)}.sales-simple-table td strong{font-size:var(--studio-font-emphasis)}.sales-simple-table td small{font-size:var(--studio-caption);margin-top:2px}.sales-pending{padding:5px 7px;font-size:var(--studio-font)}
.sidebar{width:176px;padding:10px 8px 8px}.brand{font-size:18px;padding:0 8px 12px;gap:7px}.brand-mark,.brand-mark svg{width:29px;height:var(--studio-control)}.workspace-tag{padding:8px;font-size:10px}.nav-label{margin:10px 7px 4px;font-size:10px}.sidebar nav{gap:3px}.nav-button{padding:6px 7px;font-size:12px!important;gap:6px;min-height:30px}.sidebar-note{padding-top:8px;margin:auto 5px 8px}.sidebar-note a{margin-top:8px;font-size:13px}.local-label{padding:10px 6px 0;font-size:var(--studio-caption)}.local-label small{font-size:11px;margin-top:3px}#main-content{margin-left:176px;width:calc(100% - 176px)}.topbar{height:38px;padding:0 10px}.breadcrumbs,.save-state{font-size:var(--studio-caption)}.top-actions{gap:5px}.button{font-size:var(--studio-font);padding:5px 9px;min-height:var(--studio-control)}.icon-button{width:28px;height:28px;min-height:28px}.page{padding:8px 10px}.project-heading{margin-bottom:6px;gap:6px}.project-heading h1{font-size:20px}.project-heading p{margin-top:3px;font-size:13px}.project-actions{gap:5px}.badge{font-size:11px;padding:3px 5px}.workspace-bar{min-height:36px;padding:3px 6px;gap:9px}.type-switch{padding:2px}.type-switch button{padding:4px 7px}.view-tabs{gap:9px}.view-tabs button{padding:4px 0}.workbench{min-height:350px;height:calc(100dvh - 215px);max-height:none}.inspector{width:245px}.inspector-heading{padding:9px 12px 5px;font-size:var(--studio-font)}.inspector-tabs{margin:0 5px;padding:0 3px;display:flex;flex-wrap:nowrap;gap:2px}.inspector-tabs button{padding:7px 4px;font-size:13px;min-width:0;flex:1}.inspector-tabs svg{width:13px}#project-form{padding:0 9px}.field{margin:5px 0}.field input,.field select,.input-unit input{padding:5px 7px;min-height:var(--studio-control)}.field-grid{gap:6px}.viewer-content{min-height:0}.viewport-panel{min-height:250px}.viewport-heading{top:9px;left:12px;right:12px}.camera-toolbar{bottom:12px;padding:3px;gap:3px}.camera-toolbar button{padding:4px 6px;font-size:13px;min-height:28px}.project-metrics{padding:5px 3px;min-height:54px}.metric{padding:0 9px}.metric strong{font-size:18px}.metric em,.metric-label{font-size:var(--studio-caption)}.warnings-area{margin-top:7px}.network-notice{font-size:var(--studio-caption);padding:5px 14px}.listing-heading{margin-bottom:8px}.listing-heading h1{font-size:20px}.listing-heading p{font-size:var(--studio-font);margin-top:4px}.projects-grid,.rule-grid{gap:8px}.project-card .card-preview{height:110px}.project-card .card-body,.rule-card{padding:12px}.rule-card p{min-height:0;font-size:var(--studio-font)}.catalog-toolbar{padding:6px;gap:6px;margin-bottom:6px}.catalog-tabs button{font-size:var(--studio-font);padding:5px 8px;min-height:var(--studio-control)}.catalog-table td,.catalog-table th{padding:6px 8px}.catalog-table td strong{font-size:var(--studio-font)!important}.catalog-table small{font-size:13px}.catalog-table .source-note{font-size:13px}.catalog-table img{max-height:65px}.catalog-footer{padding:8px}.modal{width:min(900px,95vw)}.modal-header,.modal-footer{padding:12px 16px}.modal-body{padding:12px 16px}.modal-body h3{font-size:17px;margin:9px 0 5px}.modal-body .field{margin:6px 0}.rule-values{gap:7px}.rule-values input{padding:5px}.quality-control{font-size:13px}.viewer-performance{top:46px;right:10px}.clean-note .texture-caption,.clean-note .viewport-caption{position:static;background:transparent;padding:5px;display:block}.viewport-panel>.clean-note{position:absolute;left:10px;bottom:50px;background:#fffffff2;border-radius:5px;margin:0;padding:0 7px;max-width:calc(100% - 20px)}.viewport-panel>.clean-note>summary{font-size:13px}.viewport-panel>.clean-note[open]{z-index:6}.viewport-panel>.clean-note:not([open])>*:not(summary){display:none}
@media(max-width:1200px){.quick-roof-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-roof .tile-picker{grid-template-columns:175px minmax(0,1fr)}.quick-roof .tile-faces{grid-column:1}.quick-roof .tile-choice{grid-column:2;grid-row:2}.quick-roof .tile-face-help{grid-column:2;grid-row:3}.quick-roof .tile-picker .tile-colors{grid-row:1/3;grid-column:2}.quick-roof .tile-choice{grid-row:3}.quick-roof .tile-face-help{grid-row:4}.workspace{grid-template-columns:200px minmax(0,1fr)}.framing-sales-workspace{grid-template-columns:1fr 1fr}.project-heading{flex-wrap:wrap}.project-actions{margin-left:auto}.workspace-bar{flex-wrap:wrap;gap:6px}.workbench{height:calc(100dvh - 250px)}}
@media(max-width:850px){.sidebar{width:150px}#main-content{margin-left:150px;width:calc(100% - 150px)}.nav-button{font-size:13px!important}.inspector{width:235px}.framing-sales-workspace{grid-template-columns:1fr}#framing-sales-list{max-height:360px}.quick-roof .tile-picker{grid-template-columns:150px minmax(0,1fr)}.quick-roof .tile-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){.sidebar{display:none}#main-content{margin:0;width:100%}.topbar{padding:0 8px}.topbar .breadcrumbs{display:none}.page{padding:8px}.project-heading h1{font-size:20px}.workbench{height:auto;min-height:0;flex-direction:column}.inspector{width:100%;max-height:260px}.viewer-content{min-height:340px}.viewport-panel{min-height:290px}.project-metrics{grid-template-columns:repeat(2,1fr);gap:8px}.quick-roof-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-roof .tile-picker{display:block}.quick-roof .tile-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.quick-roof .tile-choice{margin-top:6px}.quick-roof-heading{display:block}.quick-roof-heading>details{margin:3px 0}.workspace{display:flex;flex-direction:column}.workspace>aside,.workspace>.preview{width:100%}.intro h1{font-size:22px}.steps{font-size:var(--studio-caption);gap:7px}body:has(#layout-quick-create)>main{padding:8px}#framing-canvas{height:280px}.framing-sales-workspace{grid-template-columns:1fr}.modal-choice{gap:5px}.rule-grid,.projects-grid{grid-template-columns:1fr}.tile-photo-grid img{height:44px}.mobile-nav{padding:5px}.mobile-nav button{padding:6px;font-size:13px;min-height:var(--studio-control)}}

.workspace-panel{border-top:0;margin:5px 0;padding:0}.workspace-panel>summary{font-size:var(--studio-font-emphasis);margin-bottom:5px}.quick-roof .tile-models{min-width:0}.quick-roof .tile-picker{grid-template-columns:200px minmax(0,590px) 230px;justify-content:start}.quick-roof-tile .tile-picker fieldset{min-height:0}.quick-roof-heading p{display:none}.quick-roof-heading>div>h2{margin-bottom:4px}.quick-roof-fields label{margin:4px 0}.quick-roof .tile-choice{font-size:13px}.quick-roof [role=status]:not(:empty){margin:4px 0;font-size:13px}@media(max-width:1200px){.quick-roof .tile-picker{grid-template-columns:175px minmax(0,1fr)}}@media(max-width:650px){.quick-roof .tile-picker{display:block}}

.intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;flex-wrap:wrap}.roof-overview{border:0;margin:0;padding:0}.roof-overview[open]{flex-basis:100%}.roof-overview .steps{margin:6px 0}.study-more{margin:6px 0}.framing-more-actions{border:0;margin:0;padding:0;position:relative}.framing-more-actions>summary{font-size:var(--studio-font);padding:5px 8px;border:1px solid #bbc9b8;border-radius:5px;min-height:var(--studio-control)}.framing-more-actions[open]{flex-basis:100%;display:flex;flex-wrap:wrap;gap:5px}.framing-more-actions[open]>button{margin:4px 4px 0 0}.framing-more-actions section{flex-basis:100%}.intro h1{margin:2px 0}.workspace-panel>.workspace{margin-top:3px}

.framing-tool-groups{display:flex;flex-wrap:wrap;gap:4px 15px;align-items:start;margin:3px 0}.framing-tool-groups>details{margin:0;padding:0;border:0}.framing-tool-groups>details>summary{min-height:28px;padding:4px 0;font-size:var(--studio-font)}.framing-tool-groups>details[open]{flex:1 0 100%;padding:4px 0}.framing-tool-groups>p{margin:0}.preview>.surface-preview,.preview>.layout-work-tools{display:inline-block;margin:0 12px 3px 0;vertical-align:top}.preview>.surface-preview[open],.preview>.layout-work-tools[open]{display:block;width:100%}.preview>.layout-work-tools{border:0;padding:0}.preview>.surface-preview>summary,.preview>.layout-work-tools>summary{min-height:28px}.framing-sales-workspace #framing-canvas{height:clamp(230px,36vh,340px)}#framing-sales-list{max-height:clamp(260px,40vh,380px)}.workspace .preview>details.clean-warnings{margin:3px 0;padding:3px 0}.preview>.study-more{margin:3px 0}.preview .technical-results{margin:4px 0;padding:3px 7px}

#main-content{display:flex;flex-direction:column;height:100dvh;min-height:0}.topbar{height:38px;min-height:38px;flex-shrink:0}#studio-page:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}#studio-page .workbench{height:auto;flex:1;min-height:300px}#studio-page .workspace-bar,#studio-page .project-heading,#studio-page .warnings-area{flex-shrink:0}#warnings details{padding:3px 9px;margin:3px 0 0}#warnings summary{min-height:26px;padding:2px}.project-heading .eyebrow{font-size:10px;line-height:1.2;margin-bottom:3px}.inspector-tabs button{flex:1 1 auto;min-width:0;padding:5px 2px;white-space:nowrap;font-size:12px}.network-notice{flex-shrink:0}@media(max-width:650px){#main-content{height:auto;min-height:100dvh}#studio-page .workbench{flex:none;min-height:0}.inspector-tabs button{font-size:13px}}

.scene-control{display:flex;align-items:center;gap:4px;font-size:13px;pointer-events:auto}.scene-control label{display:flex;align-items:center;gap:5px;font-size:13px!important;margin:0}.scene-control select{font-size:13px;padding:4px 6px;min-height:28px;width:auto;max-width:155px}.scene-control button{min-height:28px;padding:3px 7px;font-size:16px}.viewport-heading{gap:8px;flex-wrap:wrap}.viewport-heading>.scene-control{margin-left:auto}.framing-tool-groups>.scene-control{margin-left:auto}.scene-control [hidden]{display:none}.card-preview{background:linear-gradient(155deg,#e8f0ea,#d5e1d7)!important}.project-card .card-preview>svg{width:100%;height:100%;max-height:none}.projects-grid .card-preview{height:112px}.project-card-content{padding:8px 10px!important}.project-card-content h3{font-size:14px;margin:0 0 5px;line-height:1.35}.project-card-content p{font-size:13px;margin:3px 0}.project-card-actions{margin-top:8px}.templates svg{height:58px;width:100%}.templates button{border-color:#c4d2c8;background:#f8fbf7}.templates small{display:none}@media(max-width:850px){.viewport-heading>.scene-control{margin-left:0}.viewport-heading{font-size:var(--studio-caption)}.projects-grid .card-preview{height:100px}}

[data-project-thumb]{width:100%;height:100%;display:grid;place-items:center}[data-project-thumb]>svg{width:100%;height:100%;display:block}.templates svg{border-radius:4px;background:#eaf0e9}.card-preview .badge{font-size:10px;padding:2px 5px}.project-card{border-radius:7px}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.project-card-content{min-height:0}.project-card-actions .button{font-size:13px}.project-card-content h3{margin-bottom:5px}#layout-plan-summary svg{height:140px;max-width:280px}

[data-project-thumb]>img{width:100%;height:100%;object-fit:contain;display:block}.card-preview>svg{width:100%;height:100%;display:block}

#layout-framing-detail>h3{line-height:1.25;font-size:18px;margin-bottom:4px}#framing-error:empty{display:none}.framing-sales-workspace #framing-sales-list{max-height:clamp(240px,36vh,340px)}.quick-create-panel:not([open]){margin:2px 0}.preview>.surface-preview>summary,.preview>.layout-work-tools>summary{min-height:25px;padding:3px 0}.technical-results>details{margin-top:5px}.framing-model-pane{line-height:1.3}

.project-card .card-preview{position:relative;overflow:hidden;flex-shrink:0}.project-card .card-preview>[data-project-thumb]{position:absolute;inset:0;width:100%;height:100%;display:block;min-height:0;overflow:hidden}.project-card .card-preview>[data-project-thumb]>img,.project-card .card-preview>[data-project-thumb]>svg{display:block;width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain}.project-card .card-preview>.badge{z-index:2}

/* Keep the two pressure cases visible on compact desktop viewports. */
@media screen {
 #analysis-area>.panel-toolbar{margin-bottom:6px}
 #analysis-area>details:not([open]){padding:2px 0;margin:2px 0}
 #analysis-area .traditional-roof-analysis>h3{margin:6px 0}
 #analysis-area .traditional-roof-analysis>details:not([open]){padding:2px 0;margin:4px 0}
 #analysis-area .traditional-roof-analysis th,#analysis-area .traditional-roof-analysis td{padding:6px 8px}
}
/* Optional compound analysis stays compact and its tables retain readable gaps. */
.compound-roof-mechanics .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 12px}
.compound-roof-mechanics .field{display:grid;gap:3px;margin:0}
.compound-roof-mechanics .field input,.compound-roof-mechanics .field select{width:100%;min-width:0;box-sizing:border-box}
.compound-roof-mechanics .table-wrap{overflow:auto}
.compound-roof-mechanics table{width:100%;min-width:640px;border-collapse:collapse}
.compound-roof-mechanics th,.compound-roof-mechanics td{padding:5px 8px;text-align:left;border-bottom:1px solid #dce3d5;line-height:1.35}
.compound-roof-mechanics th{font-size:var(--studio-caption);white-space:normal}
.compound-roof-mechanics td{font-size:13px;overflow-wrap:anywhere}
.compound-roof-mechanics td small{display:block}
.free-timber-toolbar,.free-timber-selection{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:5px 0}
.free-timber-toolbar label{display:flex;align-items:center;gap:4px;margin:0;font-size:13px}
.free-timber-toolbar select{max-width:220px;height:var(--studio-control);padding:3px 5px}
.free-timber-toolbar details{margin:0;padding:0}
.free-timber-toolbar details[open]{flex-basis:100%}
.free-timber-selection{border-top:1px solid #dce3d5}
.free-timber-selection strong{font-size:13px}
.free-timber-selection>span{font-size:var(--studio-caption);color:#354c40}
.free-timber-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.free-timber-form-grid .field{margin:0}
.free-timber-form-grid .free-timber-product{grid-column:1/-1}
.free-timber-form-grid select,.free-timber-form-grid input{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:600px){.free-timber-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#free-timber-controls{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid #dce3d5}
#plan-host{scroll-margin-top:90px}
.free-timber-selection{gap:4px}
.free-timber-selection .button{font-size:var(--studio-caption);padding:3px 6px;min-height:28px}
/* SVG coordinates are metres; focus strokes must remain screen-sized. */
#plan-svg [data-free-timber]:focus-visible{outline:none;outline-offset:0;stroke:#174f35;stroke-width:2px;vector-effect:non-scaling-stroke}
.roof-free-timber-editor{margin:6px 0;padding:4px 0}
#roof-free-timber-plan{display:block;width:100%;height:260px;min-height:180px;border:1px solid #dce3d5;background:#fafbf7}
#roof-free-timber-plan [data-free-timber]:focus-visible{outline:none;outline-offset:0;stroke:#174f35;stroke-width:2px;vector-effect:non-scaling-stroke}
.roof-free-point-tools{display:flex;align-items:end;flex-wrap:wrap;gap:6px;padding:5px 0}
.roof-free-point-tools label{display:grid;gap:3px;margin:0;font-size:13px}
.roof-free-point-tools input{width:110px}
.roof-free-point-tools input,.roof-free-point-tools select{height:var(--studio-control);padding:3px 5px;box-sizing:border-box}
.roof-free-timber-dialog{max-width:660px;width:calc(100% - 40px);max-height:85vh;overflow:auto;padding:12px;border:1px solid #a9bda5;border-radius:6px;color:#233e32;background:#fff}
.roof-free-timber-dialog::backdrop{background:rgba(20,38,29,.35)}
.roof-free-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.roof-free-dialog-head h3{margin:0;font-size:18px}

.roof-free-point-tools [hidden]{display:none!important}

.roof-free-timber-editor .free-timber-toolbar label{white-space:nowrap}
.roof-free-timber-editor .free-timber-toolbar input[type=checkbox]{width:16px;height:16px;min-height:0;padding:0;flex:0 0 16px}

.roof-free-plan-navigation{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-left:auto}
.roof-free-plan-navigation button{min-height:28px;padding:3px 7px;font-size:var(--studio-caption)}

.deck-void-choices{border:1px solid #d8e1d2;border-radius:5px;padding:6px 9px;margin:8px 0;display:grid;gap:6px}
.deck-void-choice{display:flex;align-items:center;gap:7px;margin:0;font-size:var(--studio-font)}
.deck-void-choice input[type=checkbox]{width:16px;height:16px;min-height:0;flex:0 0 16px;margin:0}

/* Regional finish settings replace the uniform face buttons without empty space. */
.tile-picker [hidden],.quick-roof-faces [hidden]{display:none!important}
.quick-roof-faces{margin:6px 0 9px}.quick-roof-faces>label{display:block;max-width:360px}.quick-roof-faces .fields{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 8px}.quick-roof-faces details{margin:5px 0}

.deck-guard-plan{max-width:490px;margin:6px auto}.deck-guard-plan svg{display:block;width:100%;max-height:220px;background:#f4f7f1;border:1px solid #c5d1c6;border-radius:5px}.deck-guard-plan [role=button]{cursor:pointer}.deck-guard-plan [role=button]:focus{outline:2px solid #1f6650;outline-offset:2px}.deck-guard-actions{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}.deck-guard-edge-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 10px}#deck-guard-error:not(:empty){color:#8a3027;background:#fff2ec;padding:7px;border-left:3px solid #ac4938}#deck-guard-preview{border-top:1px solid #c5d1c6;margin-top:7px;padding-top:7px}#deck-guard-preview[hidden]{display:none!important}

/* Read-only piece inspection keeps the existing compact seller table. */
.sales-inspect-piece{font:inherit;font-weight:700;color:#155c82;background:transparent;border:0;border-bottom:1px dotted currentColor;border-radius:2px;padding:1px 2px;min-height:26px;cursor:pointer;text-align:left}
.sales-inspect-piece span{font-size:13px}.sales-inspect-piece[aria-pressed=true]{background:#dceef8;color:#0d4268}
.sales-inspect-piece:focus-visible,.roof-piece-inspection button:focus-visible{outline:2px solid #176fa9;outline-offset:2px}
.sales-simple-table tr[data-sales-selected]>td{background:#edf6fc}
.roof-piece-inspection{font-size:var(--studio-font);line-height:1.35;margin:5px 0 0;padding:4px 0;border-top:1px solid #cad6d0}
.roof-piece-inspection p{margin:3px 0}.roof-piece-inspection .actions{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0}
.roof-piece-inspection button{font:inherit;font-size:13px;padding:4px 6px;min-height:28px}
.roof-piece-inspection details{margin:4px 0;padding:0;border:0}.roof-piece-inspection summary{font-size:13px;min-height:26px;padding:3px 0}
.roof-piece-inspection [hidden]{display:none!important}.roof-piece-inspection [data-piece-error]:empty{display:none}.roof-piece-inspection [data-piece-error]:not(:empty){color:#8b352b;background:#fff0ea;padding:4px}

.sales-assembly-partial{border-left:3px solid #a45627;background:#fff1df;color:#653810;padding:5px 7px;margin-bottom:7px;font-size:13px}.sales-assembly-partial strong,.sales-assembly-partial span,.sales-assembly-partial small{display:block}.sales-assembly-partial small{font-size:var(--studio-caption);line-height:1.35;margin-top:2px}
.roof-support-post-editor{font-size:var(--studio-font);margin:4px 0;padding:3px 0}.roof-support-post-editor>summary{padding:3px 0;min-height:26px}.roof-support-post-editor table{width:100%;font-size:13px;border-collapse:collapse;margin:5px 0}.roof-support-post-editor th,.roof-support-post-editor td{padding:4px;text-align:left;border-bottom:1px solid #d5ded3}.roof-support-post-editor td small{display:block}.roof-support-post-editor button{font:inherit;font-size:13px;padding:4px 6px;min-height:28px}.roof-support-post-editor [hidden],.roof-support-post-dialog [hidden]{display:none!important}.roof-support-post-editor [role=alert]:empty{display:none}.roof-support-post-editor [role=alert]:not(:empty),.support-post-rejected{color:#8b352b}.roof-support-post-dialog{max-width:660px;width:calc(100vw - 32px);max-height:85dvh;overflow:auto}.roof-support-post-dialog .fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px}.roof-support-post-dialog label{display:block;margin:5px 0}.roof-support-post-dialog details{margin:4px 0}.roof-support-post-dialog [data-support-form-error]:not(:empty){background:#fff0e8;padding:5px;border-left:3px solid #a7442e}@media(max-width:600px){.roof-support-post-dialog .fields{grid-template-columns:1fr}}
/* Guided creation: keep basic choices visible on a small desktop without large empty cards. */
#modal:has(#easy-preview){width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
#modal:has(#easy-preview) #modal-content{max-height:calc(100dvh - 26px)}
#modal:has(#easy-preview) .modal-head{padding:9px 14px}#modal:has(#easy-preview) .modal-head h2{font-size:20px;margin:0}
#modal:has(#easy-preview) .modal-body{padding:7px 14px}#modal:has(#easy-preview) .modal-footer{padding:7px 14px;gap:6px}
#modal:has(#easy-preview) .field{margin:3px 0 5px;gap:3px;min-width:0;font-size:var(--studio-font);line-height:1.3}
#modal:has(#easy-preview) .field input,#modal:has(#easy-preview) .field select{min-height:var(--studio-control);height:var(--studio-control);padding:4px 7px;font-size:var(--studio-font);line-height:1.3}
#modal:has(#easy-preview) .field-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px}
#modal:has(#easy-preview) h3{font-size:var(--studio-font-emphasis);margin:7px 0 4px;line-height:1.3}
#modal:has(#easy-preview) .modal-choice{gap:5px;margin:4px 0 6px}
#modal:has(#easy-preview) .modal-choice label{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;min-height:var(--studio-control);padding:4px 6px;margin:0;font-size:var(--studio-font);line-height:1.3}
#modal:has(#easy-preview) input[type=radio],#modal:has(#easy-preview) input[type=checkbox]{min-height:0;width:16px;height:16px;margin:0}
#modal:has(#easy-preview) details{margin:3px 0;padding:2px 0}#modal:has(#easy-preview) summary{min-height:26px;padding:3px 0;font-size:var(--studio-font);line-height:1.3}
#modal:has(#easy-preview) p,#modal:has(#easy-preview) li{font-size:var(--studio-font);line-height:1.35;margin:4px 0}
#modal:has(#easy-preview) #easy-project-status:empty{display:none}#modal:has(#easy-preview) #easy-project-error:not(:empty){padding:5px 7px;margin-bottom:5px}
#easy-roof-fields{display:inline-block;width:calc(66.666% - 4px);vertical-align:top}#easy-roof-fields .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#easy-overhang-fields{display:inline-block;width:33.333%;padding-left:8px;vertical-align:top}
#modal:has(#easy-preview) #easy-preview{padding:7px 9px;margin-top:7px}#modal:has(#easy-preview) #easy-preview svg{height:90px!important}
#modal:has(#easy-preview) .drawing-project-intro{padding:5px 8px;margin-bottom:6px}
@media(max-width:600px){#modal:has(#easy-preview) .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#modal:has(#easy-preview) .modal-head,#modal:has(#easy-preview) .modal-body,#modal:has(#easy-preview) .modal-footer{padding-left:9px;padding-right:9px}#easy-roof-fields,#easy-overhang-fields{display:block;width:100%;padding-left:0}#modal:has(#easy-preview) .modal-choice{display:grid;grid-template-columns:repeat(2,1fr)}}
.studio-generation-message{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;padding:5px 8px;border:1px solid #b6c9bd;border-radius:5px;background:#edf4ed;color:#234636;font-size:var(--studio-font);line-height:1.35}.studio-generation-message.error{border-color:#c4a18c;background:#fff2e8;color:#6c3928}.studio-generation-message button{flex-shrink:0;padding:4px 7px;min-height:28px}.generation-metrics-pending{grid-column:1/-1;padding:7px 10px;font-size:var(--studio-font);color:#385448}#studio-generation-status:empty{display:none}#studio-page[data-generation=pending] #canvas-host{opacity:.45}@media(max-width:600px){.studio-generation-message{align-items:flex-start;flex-wrap:wrap}}

/* Keep the plan itself visible; advanced tools retain their original IDs. */
#plan-area{padding:8px!important}
#plan-area>.panel-toolbar{gap:5px;margin:0 0 5px;padding:0;align-items:center}
#plan-area>.panel-toolbar h2{font-size:16px;line-height:1.25;margin:0}
#plan-area>.panel-toolbar p{display:none}
#plan-area .plan-tools{gap:3px;flex-wrap:wrap}
#drafting-controls .plan-quick-controls{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 5px}
#drafting-controls .plan-quick-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex-basis:100%;margin:0;padding:0}
#drafting-controls .plan-quick-grid{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;flex:1 1 300px;margin:0;padding:0;border:0}
#drafting-controls .plan-quick-grid label{display:inline-flex;flex-direction:row;align-items:center;gap:4px;margin:0;font-size:13px!important;line-height:1.2;min-width:0}
#drafting-controls .plan-quick-grid input[type=number],#drafting-controls .plan-quick-grid select{height:28px;min-height:28px;padding:3px 5px;font-size:13px}
#drafting-controls .plan-quick-grid input[type=number]{width:62px}
#drafting-controls .plan-quick-grid select{width:104px}
#drafting-controls .plan-quick-grid input[type=checkbox]{width:16px;height:16px;min-height:0;margin:0}
#plan-area .plan-tools .button,#drafting-controls .plan-quick-controls .button{min-height:28px;padding:4px 7px;font-size:13px;line-height:1.2}
#drafting-controls .plan-more-tools{margin:0;padding:0;border:0;min-width:0}
#drafting-controls .plan-more-tools[open]{flex-basis:100%}
#drafting-controls .plan-more-tools>summary{font-size:13px;line-height:1.3;min-height:28px;padding:5px 0;white-space:nowrap}
#drafting-controls .plan-more-tools .draft-grid-controls{margin:5px 0;padding:5px 7px}
#drafting-controls .plan-more-tools .draft-grid-controls>output{font-size:var(--studio-caption)}
#plan-area .wall-opening-create{margin:5px 0;padding:3px 0;border:0}
#plan-area .wall-opening-create>summary{font-size:var(--studio-font);padding:4px 0;min-height:28px}
#plan-area .wall-opening-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:5px 8px}
#plan-area .wall-opening-fields label{display:grid;gap:3px;margin:0;font-size:13px}
#plan-area .wall-opening-fields input,#plan-area .wall-opening-fields select{width:100%;min-width:0;height:var(--studio-control);min-height:var(--studio-control);padding:3px 6px;font-size:var(--studio-font)}
#plan-area [data-opening-create-error]:empty{display:none}
#plan-area [data-opening-create-error]:not(:empty){font-size:var(--studio-font);color:#803821;background:#fff0e7;padding:5px 7px}
#plan-host{min-height:0}
#plan-host svg{height:var(--plan-canvas-height,240px);max-height:none}
@media(max-width:650px){#plan-area>.panel-toolbar{align-items:flex-start;flex-wrap:wrap}#drafting-controls .plan-quick-grid{flex-basis:100%}#drafting-controls .plan-quick-controls .button{max-width:100%}}

/* Compact, keyboard-operable exploded presentation. */
.exploded-controls,.framing-exploded-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font:inherit}.exploded-controls label{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:var(--studio-font);white-space:nowrap}.exploded-controls input[type=checkbox]{width:15px;height:15px;margin:0}.exploded-controls input[type=range]{width:85px;padding:0;min-height:24px}.exploded-controls button,.framing-exploded-toolbar>button{min-height:var(--studio-control);padding:4px 8px;font-size:var(--studio-font)}.exploded-controls details{position:relative;font-size:13px}.exploded-controls summary{cursor:pointer}.exploded-controls details p{position:absolute;z-index:25;right:0;top:22px;width:260px;padding:10px;margin:0;background:#fff;color:#173d30;border:1px solid #b9cabb;box-shadow:0 3px 14px #173d3020;white-space:normal}.exploded-controls [hidden]{display:none!important}.framing-exploded-toolbar{margin-bottom:5px}.viewport-heading{flex-wrap:wrap}.exploded-controls button[aria-pressed=true],.framing-exploded-toolbar>button[aria-pressed=true]{background:#e3ecdf;border-color:#315d48}.client-toolbar .exploded-controls label{margin-left:0}
.viewport-heading .exploded-controls{pointer-events:auto;background:rgba(255,255,255,.96);padding:4px 6px;border-radius:5px;color:#173d30}.viewport-heading .quality-control{pointer-events:auto}.exploded-controls details{white-space:nowrap}.exploded-controls details p{line-height:1.5}

[data-closing-zone]{min-inline-size:0;margin:6px 0;padding:5px 8px;border:1px solid #c4d1c0;border-radius:4px}[data-closing-zone]>legend{font-size:13px;padding:0 4px}[data-closing-zone]>label{font-size:13px;margin:2px 0}[data-closing-zone] .fields,[data-closing-zone] .field-grid{gap:6px;margin:4px 0}[data-closing-zone-fields][hidden]{display:none!important}
[data-closing-zone]>.closing-zone-toggle{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:24px}[data-closing-zone]>.closing-zone-toggle input[type=checkbox]{width:14px;height:14px;min-height:0;margin:0;padding:0;flex:none}
#modal:has(#main-closing-enabled){max-height:calc(100dvh - 40px)}#modal:has(#main-closing-enabled) #modal-content{display:flex;flex-direction:column;max-height:calc(100dvh - 42px)}#modal:has(#main-closing-enabled) .modal-body{min-height:0;flex:1;overflow:auto;padding:10px 16px}#modal:has(#main-closing-enabled) .modal-head,#modal:has(#main-closing-enabled) .modal-footer{flex-shrink:0;padding:10px 16px}#modal:has(#main-closing-enabled) .field input{min-height:var(--studio-control);padding:5px 7px}
/* Exploded labels have their own rail; controls occupy a compact header. */
.viewport-panel.exploded-with-callouts{display:flex;flex-direction:column}
.viewport-panel.exploded-with-callouts .viewport-heading{position:relative;inset:auto;padding:4px 8px;margin:0;min-height:0;flex-shrink:0;gap:4px 8px;justify-content:flex-start;pointer-events:auto;background:#f7faf4;border-bottom:1px solid #d7dfd2;order:-1}
.viewport-panel.exploded-with-callouts .viewport-heading>.scene-control{margin-left:0}
.viewport-panel.exploded-with-callouts .viewport-heading .exploded-controls{order:3;flex-basis:100%;padding:0;background:transparent}
.viewport-panel.exploded-with-callouts .exploded-drawing-canvas{position:relative!important;inset:auto!important;flex:1;min-height:160px;height:auto!important;width:100%}
.viewport-panel.exploded-with-callouts .viewer-performance{position:static;inset:auto;margin:0;padding:0 4px;border:0;background:transparent;max-width:none}
/* Keep the partial-pergola workflow short without hiding its basic choices. */
#modal-form:has([data-pergola-range-controls]) .field-grid{gap:4px 10px}
#modal-form:has([data-pergola-range-controls]) .field{gap:3px;margin-bottom:6px}
#modal-form:has([data-pergola-range-controls]) input:not([type=checkbox]),#modal-form:has([data-pergola-range-controls]) select{min-height:var(--studio-control);padding:5px 8px;font-size:var(--studio-font)}
#modal-form:has([data-pergola-range-controls]) .toggle-label{padding:5px 0;margin:0 0 6px}
#modal-form:has([data-pergola-range-controls]) details{margin-top:5px;padding-top:4px}
#modal-form:has([data-pergola-range-controls]) .mini-note{margin:4px 0;font-size:13px}

/* Materials-only summary: three physical metrics, no financial card. */
.project-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:650px){.project-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Complete the shared density on pages that still inherited spacious base styles. */
@media screen {
 .top-actions .button,.project-actions .button{font-size:13px;padding:4px 7px;min-height:28px}
 .inspector h3{font-size:16px;margin:5px 0}
 .data-panel{padding:8px;min-height:0;min-width:0}
 .panel-toolbar{gap:6px;margin-bottom:7px;flex-wrap:wrap}
 .panel-toolbar h2{font-size:16px;margin:0}
 .panel-toolbar p{font-size:12px;line-height:1.35}
 .rule-card{padding:10px;border-radius:6px;min-width:0}
 .rule-card h3{font-size:14px;margin:0 0 4px}
 .rule-card p{font-size:13px;line-height:1.4;margin:4px 0}
 .rule-values{margin:8px 0;gap:6px}
 .rule-values small{font-size:12px}.rule-values strong{font-size:15px;margin-top:2px}
 .rule-actions{gap:4px;flex-wrap:wrap}.rule-actions .button{font-size:13px;padding:4px 7px}
 .modal-head{padding:9px 12px}.modal-head h2{font-size:18px;margin:0}
 .modal-body,.modal-footer{padding:8px 12px}
 .modal-body .field-grid{gap:6px;margin-bottom:7px}
 .modal-body .field{margin:4px 0;font-size:13px}
 .modal-body .field :is(input,select,textarea){font-size:13px;padding:4px 6px;min-height:28px}
 .modal-body p{font-size:13px;line-height:1.4}
 .sales-simple-table th,.sales-simple-table td{padding:5px 6px}
 .sales-simple-table td strong{font-size:13px}
 .sales-simple-table td small{line-height:1.35}
 .sales-pick-heading h2{font-size:16px}
 .sales-list-note,.sales-pending{line-height:1.4}
 .tile-picker legend{padding-bottom:3px}.tile-picker fieldset{margin-bottom:5px}
 .tile-photo-grid img{height:40px}.tile-photo-grid button{padding:3px}
 .templates svg{height:44px}
 .network-notice{font-size:12px;line-height:1.3;padding:4px 10px}
 :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid #245d45;outline-offset:2px}
}
/* Touch devices keep usable targets without inflating desktop controls. */
@media (pointer:coarse){button,.button,input:not([type=checkbox]):not([type=radio]):not([type=range]),select{min-height:36px}}

/* Measured slab fields share one compact row; disabled hidden controls stay hidden. */
#modal [hidden]{display:none!important}
#easy-slab-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 8px}
#easy-slab-fields>.field-grid,#easy-slab-wall-fields,#easy-slab-wall-fields>.field-grid{display:contents}
#easy-slab-fields>details,#easy-slab-wall-fields>details{grid-column:span 2;min-width:0}
#easy-slab-fields details[open]{grid-column:1/-1}
#easy-slab-fields:has(#easy-slab-wall-fields[hidden])>.field-grid>label{grid-column:span 2}
#modal .field-grid:has(input[name=height]:disabled){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){#easy-slab-fields{grid-template-columns:repeat(2,minmax(0,1fr))}#easy-slab-fields>.field-grid>label{grid-column:auto!important}}

/* Layer switches are a compact list, with the whole row remaining clickable. */
.layer-row{padding:4px 0;margin:0;gap:6px;min-height:28px;line-height:1.25}
.layer-row input[type=checkbox]{width:14px;height:14px;min-height:0;padding:0;margin:0;flex-shrink:0}
.layer-row .swatch{width:6px;height:6px;flex-shrink:0}

.roof-piece-inspection [data-piece-finish]:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:3px 6px;margin:4px 0;font-size:12px}.roof-piece-inspection [data-piece-finish]>select{width:112px;min-height:27px;padding:3px 5px;font-size:12px}.roof-piece-inspection [data-piece-finish]>small{grid-column:1/-1;font-size:11px;line-height:1.3}.roof-piece-inspection [data-piece-tools]>summary{min-height:24px;padding:3px 0;font-size:12px}.roof-piece-inspection [data-piece-tools]>.actions{margin:3px 0}

/* One primary create action; short controls share rows in every project type. */
#modal:has(#easy-preview) #easy-deck-shape{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 8px}
#modal:has(#easy-preview) #easy-deck-shape>details{align-self:end}
#modal:has(#easy-preview) #easy-deck-shape>details[open],#modal:has(#easy-preview) #easy-deck-L-fields{grid-column:1/-1}
#modal:has(#easy-preview) #easy-deck-L-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 8px}
#modal:has(#easy-preview) #easy-deck-L-fields>.field-grid{display:contents}
#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked){grid-template-columns:repeat(8,minmax(0,1fr))}
#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked)>.field-grid{display:contents}
#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked)>.field-grid>.field{grid-column:span 2}
#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked) #easy-overhang-fields{grid-column:span 2}
#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked) #easy-post-fields>.field{grid-column:span 4}
@media(max-width:600px){#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked){grid-template-columns:repeat(2,minmax(0,1fr))}#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked)>.field-grid>.field,#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked) #easy-overhang-fields,#modal:has(#easy-preview) #modal-form:has(input[name=type][value=pergola]:checked) #easy-post-fields>.field{grid-column:span 1}#modal:has(#easy-preview) #easy-deck-L-fields{grid-template-columns:repeat(2,minmax(0,1fr))}#modal:has(#easy-preview) #easy-deck-L-fields>.field{grid-column:1/-1}}
#modal:has(#easy-preview){width:min(760px,calc(100vw - 20px))}
#modal:has(#easy-preview) #modal-form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px 8px;align-items:start}
#modal:has(#easy-preview) .field{display:flex;flex-direction:column;align-items:stretch}
#modal:has(#easy-preview) #modal-form>:is(details,.modal-choice,.field-grid,#easy-preview,#easy-project-error,#easy-project-status,#easy-ground-fields,#easy-slab-fields,#easy-deck-shape,.drawing-project-intro){grid-column:1/-1}
#modal:has(#easy-preview) #modal-form>h3{grid-column:1/-1}
#modal:has(#easy-preview) :is(#easy-roof-support-fields,#easy-post-fields,#easy-depth-fields,#easy-roof-fields,#easy-roof-fields>.field-grid){display:contents}
#modal:has(#easy-preview) #easy-roof-support-fields>.field,#modal:has(#easy-preview) #easy-post-fields>.field{grid-column:span 3}
#modal:has(#easy-preview) #easy-depth-fields>.field{grid-column:span 3}
#modal:has(#easy-preview) #easy-depth-fields>.mini-note{grid-column:span 3;align-self:center;font-size:12px}
#modal:has(#easy-preview) .easy-name-wood{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr;gap:8px;align-items:end}
#modal:has(#easy-preview) #easy-deck-mode{grid-column:span 3}
#modal:has(#easy-preview) #easy-roof-fields>.field{grid-column:span 3}
#modal:has(#easy-preview) #easy-roof-fields>.field-grid>.field{grid-column:span 1}
#modal:has(#easy-preview) #easy-overhang-fields{display:block;width:auto;grid-column:span 1;padding:0}
#modal:has(#easy-preview) #easy-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 8px}
#modal:has(#easy-preview) #easy-materials>.tile-picker{grid-column:1/-1}
#modal:has(#easy-preview) .modal-head h2{font-size:18px}
#modal:has(#easy-preview) .field>input,#modal:has(#easy-preview) .field>select{width:100%;min-width:0}
.studio-shortcut-help{position:relative;font-size:12px}.studio-shortcut-help summary{cursor:pointer;min-height:26px;padding:4px}.studio-shortcut-help dl{position:absolute;right:0;top:28px;z-index:80;background:#fff;border:1px solid #b8c9bc;border-radius:4px;padding:9px;margin:0;width:285px;box-shadow:0 3px 12px #173d3020}.studio-shortcut-help dl>div{display:grid;grid-template-columns:115px 1fr;gap:8px;padding:3px 0}.studio-shortcut-help dd{margin:0}.studio-shortcut-help kbd{font:inherit;background:#edf2e6;padding:2px 4px;border-radius:3px}
@media(max-width:600px){#modal:has(#easy-preview) #modal-form{grid-template-columns:repeat(2,minmax(0,1fr))}#modal:has(#easy-preview) .easy-name-wood{grid-template-columns:1fr 1fr}#modal:has(#easy-preview) :is(#easy-roof-support-fields,#easy-post-fields,#easy-depth-fields,#easy-roof-fields)>:is(.field,.mini-note),#modal:has(#easy-preview) #easy-roof-fields>.field-grid>.field,#modal:has(#easy-preview) #easy-deck-mode,#modal:has(#easy-preview) #easy-overhang-fields{grid-column:span 1}#modal:has(#easy-preview) #easy-materials{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-shortcut-help dl{position:fixed;right:10px;top:70px}}

/* Seller delivery: a visible starting model, three essential measures, details later. */
#modal:has(.seller-start){width:min(680px,calc(100vw - 20px))}
#modal:has(.seller-start) #modal-form{display:flex!important;flex-direction:column;gap:5px}
#modal:has(.seller-start) #modal-form>*,#modal:has(.seller-start) .seller-start{width:100%;min-width:0}
#modal:has(.seller-start) .modal-choice{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 4px}
#modal:has(.seller-start) .modal-choice label{min-width:0;justify-content:center;padding:6px 5px;font-size:12px;border-radius:5px;cursor:pointer}
#modal:has(.seller-start) .modal-choice label:has(:checked){background:#eaf2eb;border-color:#315d46;color:#183f2e;font-weight:650;box-shadow:inset 0 0 0 1px #315d46}
#modal:has(.seller-start) .seller-start{padding:9px 10px 6px;border:1px solid #d5e0d4;border-radius:6px;background:#f3f7f1}
#modal:has(.seller-start) .seller-start .mini-note{margin:4px 0 0;font-size:11px;line-height:1.4}
#modal:has(.seller-start) #modal-form>.field-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#modal:has(.seller-start) #modal-form>.field-grid:has(input[name=height]:disabled){grid-template-columns:repeat(2,minmax(0,1fr))}
#modal:has(.seller-start) #modal-form>.field-grid>.field{grid-column:auto!important}
#modal:has(.seller-start) .field{margin:0;font-size:12px;gap:3px}
#modal:has(.seller-start) :is(input:not([type=radio]):not([type=checkbox]),select){min-height:29px;padding:4px 7px;font-size:12px}
#modal:has(.seller-start) .easy-name-wood{grid-template-columns:1fr 1fr;gap:8px;margin:3px 0}
#modal:has(.seller-start) #modal-form>details{margin:0;border-top:1px solid #e2e8df;padding-top:2px}
#modal:has(.seller-start) #modal-form>details>summary{font-size:12px;min-height:27px;padding:5px 0;cursor:pointer}
#modal:has(.seller-start) .seller-setup-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px 8px;padding:5px 0}
#modal:has(.seller-start) .seller-setup-grid :is(#easy-deck-shape,#easy-ground-fields,#easy-support-help,#easy-slab-fields){grid-column:1/-1}
#modal:has(.seller-start) #easy-roof-fields>.field-grid>.field{grid-column:span 2}
#modal:has(.seller-start) #easy-overhang-fields{grid-column:span 2!important}
#modal:has(.seller-start) .modal-head h2{font-size:17px}
#modal:has(.seller-start) .modal-body{padding:12px 14px}
#modal:has(.seller-start) .modal-footer{padding:9px 14px}
#modal:has(.seller-start) :is(#easy-project-error,#easy-project-status):empty{display:none}
@media(max-width:480px){#modal:has(.seller-start) .modal-choice{grid-template-columns:repeat(2,minmax(0,1fr))}#modal:has(.seller-start) .seller-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#modal:has(.seller-start) .seller-setup-grid .field,#modal:has(.seller-start) #easy-overhang-fields{grid-column:span 1!important}#modal:has(.seller-start) #easy-slab-fields .field{grid-column:auto!important}}

#modal:has(.seller-start) #modal-form>.field-grid{align-items:end}

#modal:has(#easy-preview):has(.seller-start){width:min(680px,calc(100vw - 20px))}
#modal:has(#easy-preview):has(.seller-start) .easy-name-wood{grid-template-columns:1fr 1fr}
#modal:has(#easy-preview):has(.seller-start) #easy-roof-fields>.field{grid-column:1/-1}